【wordpress】buddypressでの子テーマの作リ方

先日BuddyPressのインストール方法をお伝えしましたが、インストールしたままテーマを変えていなければ普通のブログと見た目が変わらない感じになっていると思います。

やはりそれではSNSとしては味気ないので、今回はSNSっぽくデザイン（テーマ）を変えてみます。
そこで必要になるのが「子テーマ」です。

WordPressではテーマをカスタマイズできるのですが、登録されているテーマを直接カスタマイズしてしまうと、その後のアップデート等に対応できなくなってしまいます。

カスタマイズする際はまず既存のテーマから「子テーマ」を作り、その子テーマをカスタマイズしていくようなやり方が望ましいのです。
それでは早速子テーマを作ってみましょう。

１．BuddyPressのテーマを設置する

BuddyPressを入れたらテーマが反映されると思ってたら、テーマは反映されないです。
反映させるには、ちょっと手を加える必要があります。

まずサーバーにBuddyPressを配置したパスの中の
/wp-content/plugins/buddypress/bp-themes/
を見てください。

ここに設置している「bp-default」がBuddyPressのデフォルトテーマになります。
これをそのまま/wp-content/themes/にアップロードしましょう。

取りあえずBuddyPressのテーマをデフォルトで使うのであれば、これでOKです。
デフォルトテーマを有効化しましょう。

よっしゃ、さっそくこれをカスタマイズ・・・といきたいところですが、上記の理由からカスタマイズは別テーマで行います。

デフォルトテーマをカスタマイズすると、テーマがアップデートしたりメンテナンスされたりした際に、対象外になってしまいます。
それを避けるために子テーマをつくるのです。

２．ディレクトリを作る

デフォルトテーマとは別に、子テーマ用のディレクトリを用意します。
名前は何でもいいですが、分かりやすいものがいいでしょう。ここでは「buddy-child」としています。

ディレクトリの設置場所は
/wp-contents/themes/です。
パーミッションは他のテーマのディレクトリと同じ「７５５」です。

３．スタイルシート（CSS）を作る

ディレクトリを作ったら、その中に「style.css」というファイルを作ります。
内容は以下のように記述します。

/*
Theme Name: buddy-child
Template: bp-default
*/

この「Template」が重要です。ここで記述されたテーマ名が子テーマにとっての「親テーマ」になります。
つまり、親テーマを引き継ぐことになります。

４．テーマを有効化する

CSSができたらいったんWPの管理画面からテーマを確認してみてください。
今作ったCSSのテーマ名が反映されて「buddy-child」が追加されていると思います。
早速「有効化」しましょう。

５．親テーマのCSSを読み込む

ここまでできてフロント画面を見てみると、あれ？と思うこととなります。
CSSが効いておらず、プレーンなHTMLとして表示されています。

これは、上記２．で作ったCSSが効いているため起こることです。
あわてずに親テーマをインポートしましょう。

/*
Theme Name: Child
Template: bp-default
*/

@import url('../bp-default/style.css');

ここまでできればカスタマイズ準備完了です。
カスタマイズしたい部分に手を入れていきましょう。

！注意！

１．アップデートによる上書き

この方法は、親テーマがアップデートされると子テーマにもアップデートが反映される方法です。
もし親テーマのアップデートの影響を受けないようにする場合は、普通のテーマと同じように記述してください。
簡単な方法は、bp-default　のディレクトリごとコピーして別名で保存する方法です。

２．function.php　のカスタマイズ

上記の方法で子テーマを作った場合、function.php　を編集する際に注意が必要です。
具体的に言うと子テーマのfunction.phpには同名でオーバーライド(上書き)できず、親テーマの追加という形で読み込まれる、ということです。

function.phpの内容を編集したい場合は、親テーマのfunction.phpを直接編集する必要があります。
親テーマのアップデートがあった場合など、編集した内容が失われてしまうので、注意が必要です。（バックアップ等をとっておきましょう。）