WordPress子テーマ実装方法【トップページ編】

Posted on by

WordPress子テーマ【トップページ編】

WordPressで子テーマを実際に作っていきます。

ローカルでコーディングします。

WordPressで子テーマを作る前にローカル環境で静的HTMLを作成しましょう!!

FTPから必要なファイルをダウンロード

WordPressをインストールし、「/wp-content/themes」へ移動します。
今回は、「twentysixteen」の子テーマを作成致します。
「twentysixteen」から必要なファイルをダウンロードします。

cssに記載

まずは「css」に下記の内容を記載します。

  /*
  Template:twentysixteen ※選択した大元のフォルダ名に変更してください。
  Theme Name:template    ※ローカル環境のフォルダ名に変更してください。
  Version:1.0
  */

ファイルをアップロード

「css」に記載した後、ファイルを上げていきます。
ローカルで作成した際の「css/images/js」ファイルもあげます。



header.phpへ内容を記載

WordPressからダウンロードしたファイルへ、ローカルで作成したHTMLの内容を組み込んでいきます。

デフォルトの内容を削除、また追加を行います。

同様に、「index.php/footer.php」へも内容を変更記載していきます。
その際に、imgを読み込むための、WordPressのタグを入れ忘れしないように注意してください。

タグの内容の詳細はこちらから

全てのファイルをアップロード

FTPを使いファイルをアップロード致します。
アップロード完了後、テーマを反映させば、トップページの公開完了です。

テーマの反映方法の詳細はこちら