WordPress, PHP

WordPressでの子テーマのつくり方と管理法

色々なサイトで解説されているので今更感は否めないけど、これから先に書く記事で必要になってくるもんで 

WordPressでは子テーマを作ってカスタマイズ、管理するのが吉

理由は単純、テーマを直接カスタマイズした場合は以下のような不幸が起こるから。

  • テーマが更新されるとカスタマイズしたファイルも上書きされて泣きを見ることがある。
  • 特に functions.php に変更を加えた場合、画面が真っ白になって何も表示されなくなったり、管理者としてのログイン画面すら表示されなくなって手も足も出ないという地獄に突き落とされる危険性がある。

WordPressで子テーマを作る方法

2018年8月現在、標準のテーマとなっている Twenty Seventeenを例に、ざざっと説明しておく。

  1. 以下が Twenty Seventeenが格納されているディレクトリ(フォルダ)なのでローカルにダウンロードしておく
    /wp-content/themes/twentyseventeen
  2. 以下のように子テーマのディレクトリ(フォルダ)を作る。
    /wp-content/themes/twentyseventeen-child
  3. 上記 2.で作成したディレクトリに functions.phpと style.cssというファイルを作成する。
    (上記 1.のディレクトリからコピペするもよし)
  4. functions.phpに以下を記述。

    (ただし、親からファイルをコピペした場合は内容を全て削除してから)
  5. style.cssに以下を記述。

    (ただし、親からファイルをコピペした場合は内容を全て削除してから)
  6. 子テーマのディレクトリをサーバーにアップロード。
    (上記 2.で作成した /wp-content/themes/twentyseventeen-child)
  7. WordPressの管理画面(ダッシュボード)にログインし、『外観』→『テーマ』で twentyseventeen childを選択して有効化する。
    (もし、画面最下部に以下のメッセージが表示されたら上記 5.の Theme Name: または Template: 部分に誤字脱字があると思われる。)
  8. これで子テーマを使えるようになったので、あとはカスタマイズするファイルを親から子にコピーしていじり倒すが良い。

WordPressの子テーマでカスタマイズの一例

  1. 例として、ブログ(WordPress)のフッター(最下部)に表示されている『Proudly powered by WordPress』という文字を消すなり変更したければ、親(/twentyseventeen/)から子(/twentyseventeen-child/)に footer.phpをコピーして 42行目あたりの

    を削除すれば表示は消える。
  2. 他の文字列を表示したければ、上記部分を削除後の 42-43行目あたりに記述すればOK。

    とでも記述しておけば、『©2017-(今年) HOGEHOGE』って表示できる。
  3. スタイルシートを変更したければ子の style.cssに以下を記述すれば

    フッター部分がぼんやりとグレーになるってこと。

 

ざっくりした子テーマに関してのアレコレは以上。

 

関連記事
ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です