気になる備忘録

VPSやWordPressの設定記録、ゲームや趣味から時事評論まで気になる事を書き残す

WordPress

子テーマを利用してみる

wordpress-logo-002

投稿日:2016年11月17日 更新日:

タグとCSSとの関連性がだいぶ判ってきたので、もうすこし大胆にデザインをいじってみたくなってきた。
そこで、デザインをいじる際にWordPressで推奨されている子テーマを作成してのカスタマイズに挑戦してみた。

実は以前にちょっとだけ挑戦してたんだけど、うまく子テーマが機能せず ブログのデザインがテキストベースになっちゃって 慌てて元に戻した経緯もあったりする。

スポンサードリンク

子テーマの作成

作成といっても、難しいことは何もない。しかるべき場所にディレクトリを作成して、最小限必要なファイルを作成するだけでOK。

1.子テーマ名でディレクトリ作成

WordPressのインストール下の以下ディレクトリに
/wp-content/themes/子テーマ名
となるようにディレクトリを作成する。この時、子テーマ名は 親テーマ名_child と作成することを推奨されています。
*子テーマ名は次で作成するstyle.cssで記入します。

2.直下に必要ファイルの作成

1.で作成したディレクトリ内に以下2つのファイルを作成

  • style.css
    ブログのデザインを決定しているスタイルシート。
    動作としては親テーマのstyle.cssに続けて読み込まれる為、子テーマのstyle.cssに書き込まれたスタイルが優先される原理。
    なので、このファイルには変更部のスタイルのみ記載していけばOK。
  • functions.php
    ブログの動作をつかさどるメインのプログラムファイル。
    *ファイル名が functions.php ということに注意。自分はfunction.phpとしていて動かずハマリましたので・・・

3.ファイルに必要最小限の記述を

style.css への記述

Template: には、自分が作成しようとしてる親テーマのディレクトリ名を記載
Theme Name: には、1. で作成した子テーマディレクトリ名を記載

functions.php への記述

通常はこの記述で子テーマの style.css は自動で読み込まれるらしいのですが、自分の環境ではダメでした。
その場合は、こちらの記述で。

子テーマのstyle.css の読み込みを明示するかしないか の差らしいので、むしろ明示してあるこちらの記述を使う方が、変な心配がなくて安心。

ちょっと気になったメモ

functions.phpに記載する内容に <?php    ?>  を記述してないパターンや、 先頭の<?php はあるのに 最後の ?>  は記述してないパターン。どっちも無いパターン。など、さまざまあってどれが正しいのか疑問ですよね。
<?php    ?>基本的には、どっちもちゃんと必要です! そして、この記述は 囲んである範囲がphpのプログラムですよ、という明示で HPを表示する際に この囲まれた範囲を見つけたら phpで処理をして、結果のみを表示する。という動作をさせる為に重要なのできちんと記述を。
ですが、、、phpだけで構成されてるファイルには終了タグ( ?> )は記載しないというルールがあるので、今回のfunctions.php に関しては 先頭の<?php のみが正しい模様。

 

詳細な説明や、style.css への本来記述すべき内容などは以下へ
WordPress Codex 日本語版 – 子テーマ

4.子テーマの所有者とグループを変更

意外と忘れがちなのがコレ。スーパーユーザーでファイルの作成などを行ってた場合は 子テーマディレクトリ以下について 所有者と所属グループを apache に変更しておきます。
そう、私は これをし忘れて2度目のハマリに陥ったのです・・・

子テーマの適用

テーマの編集から確認

ダッシュボードのテーマの編集から、作成したテーマの編集画面を出すと 設定がうまくいってれば、
この子テーマは親テーマ ○○○のテンプレートを引き継ぎます。
と表示されているハズです。

ライブプレビューで確認

ダッシュボード – 外観 – テーマ の一覧から 作成した子テーマ に ライブプレビュー のボタンが表示されてるので、押して 表示状態を確認します。

問題ないようなら、子テーマを選択して適用します。
ただし、このカスタマイズ画面から変更した設定内容は初期値に戻るようなので 子テーマを適用したあとは再度設定が必要です。

デザインの変更

以降のデザインの変更は、子テーマ の 編集 から style.css に必要項目を記入していけばOKです。
又、その他ファイルの編集をしたい場合は 必要ファイルを親テーマから子テーマへコピーして、子テーマ側のファイルを変更していけばOKです。
親テーマと子テーマに同名ファイルが有る場合は、子テーマ側のファイルが有効となり実行されます。

*ただし、functions.php だけは、コピーでの変更はできません。必要に応じて WordPress Codex 日本語版 を読むべし。

 

 

スポンサードリンク

広告

広告

-WordPress
-


comment

メールアドレスが公開されることはありません。

関連記事

wordpress-logo-001

マルチサイト化したwordpressのファイルアップロード制限

今まで画像をアップロードする際に制限に掛かったことがなかったので気にしてなかったんだけど、ついさっき アップロード出来なかったので 制限を上げる事に。 検索して出てくるのは、レンタルサーバーの事ばかり …

wordpress-logo-002

新しい改行方を覚えた!

文章入力レベルが1上がった!! (今のレベルは不明です) スポンサードリンク 目次1 WordPressの文章改行には2種類ある1.1 Enterのみの改行(段落)1.2 Shift+Enterでの改 …

wordpress-logo-001

WordPressで記事が表示されない状態に陥った話

4月15日の夕方頃から、WordPressが謎の動作不良になってしまい 6時間近く悪戦苦闘してました。 ひたすら、検索、検索、検索 しまくって、結局当てはまる解決策にたどり着けず 最後の手段でとってお …

wordpress-logo-002

RSSを利用して、ブログの更新状況を表示

ブログ工房のHPに、このブログの更新情報を載せるように設定。 今後作成するブログも同様にリスト化して表示する予定なんだけど・・・どうしてもデザインがダサくて悲しい。 ほんとセンス無いんだよなぁ。 CS …

wordpress-logo-002

カテゴリーの順番を並び替える

カテゴリーが増えてきたので、並び順を整理しようと。他のブログでは普通にあったので、どこかにあるだろうと、カテゴリーに関するメニューをあれこれ触ってみたけど・・・ どうやらWordPressの標準機能に …

検索

管理人のシルビアです。
広島県在住。
熱しやすく冷めやすい慎重派。
興味のある事はトコトン調べてから行動。始める前に冷める事も・・・