creatersnest30

【入門】WordPressでHTMLやCSSを簡単に編集する方法と注意点


こんにちは!
今回は、WordPressでHTMLやCSSを簡単に編集する方法と注意点をお伝えします。
初心者から脱皮して、オリジナリティのあるサイトとしてカスタマイズをする場合、
HTMLとCSSの知識が必要となります。
ここでは、WordPressでの編集する方法を説明しますが、
HTMLとCSSの詳しい知識に関しては割愛します。

WordPressの「テーマ」の基本概念

編集方法の説明に入る前に、WordPressの「テーマ」の基本概念を頭に入れておく必要がありますので、確認してみましょう。
Wordpressの場合、1つの「HTMLファイル」での構成でなく、複数の「PHPファイル」で構成しております。
構成として大きくざっくり分けると「ヘッダー(header.php)」「コンテンツ(index.php)」「サイドバー(sidebar.php)」「フッター(footer.php)」のように分けられています。
基本的にはこのような分け方ですが、WordPressは、これ以外にもっと複数のPHPで構成されてますので、
下記のサイト様が参考になります。一度ご参照下さい。

http://viral-community.com/wordpress/wordpress-theme-template-5086/#wordpress-theme-template-create

 

「テーマの編集」画面でテーマを編集する方法

管理画面の左の「外観」⇒「テーマの編集」をクリックします。

html01

 

html02

右上にあります、「編集するテーマを選択」より編集するテーマ名を選択し、
選択ボタンをクリックします。

右側に各々の「PHPファイル(テンプレート)」があります。
その中で、編集したいテンプレートを選択すれば直接修正することができます。

 

FTPを使って更新したファイルを編集・アップロードする方法

前項で説明しました「PHPファイル」の置いてある場所は下記の通りです。

/{WordPressをインストールしたフォルダ}/wp-content/themes/{テーマ名}/

なので、上記の場所からFTPを使ってダウンロードし、編集したのちアップロードをすることで編集を行っていく方法も可能となります。

こちらの方法ですと、一旦タウンロードした際にバックアップを取り、アップロードができますので、間違って修正した場合でも元に戻せるメリットがありますので、オススメです。

 

編集するにあたって注意する点(FTPをオススメする理由)

「テーマの編集」画面よりもFTPをオススメする理由には以下のようなものがあります。
(1)バックアップが取れる
上記で説明した通り、一度 FTPでダウンロードしてきてから編集する方がいいでしょう。
万一の際のファイルのバックアップにもつながります。

(2)ネットワークが遮断された時の危険性を回避できる
管理画面から編集が完了し、いざ保存しようとする時にネットワークが不安定だった場合は、
勿論、今までの作業が無駄になってします。
なので、FTPを使って一旦ダウンロードをして、オフラインの環境のもと編集します。

(3)テキストエディタの補完機能を使える
FTPを使って一旦ダウンロードをして、テキストエディタを利用して編集すると、
テキストエディタならではの機能を使えるので、とても便利です。

 

投稿ページのテキストエディタを使った編集

また、テーマのCSSをいじったりするだけでなく、投稿ページのHTMLタグを埋め込んだりもできます。
テキストエディタには、HTMLタグを自動的に挿入してくれるクイックタグボタンが用意されていますので、これを使えば更に便利です。

html03

 

まとめ

いかがでしょか。
今回は、オリジナリティのあるカスタマイズされたサイトを作る場合の編集方法を説明しました。
WordPressで個別ページへのCSSを編集する方法もございますので、
そちらはまたの機会にご紹介させていただきます。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Illustrator】透明パネルでできることと、その使い方