*

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

BuddyPress Registration System (Custom)

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

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

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

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

1.BuddyPressのテーマを設置する

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

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

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

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

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

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

2.ディレクトリを作る

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

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

3.スタイルシート(CSS)を作る

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

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

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

4.テーマを有効化する

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

5.親テーマのCSSを読み込む

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

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

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

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

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

 

!注意!

1.アップデートによる上書き

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

2.function.php のカスタマイズ

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

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

Google AD


Comment

  1. […] 【wordpress】buddypressでの子テーマの作リ方 | world is wonderful always […]

Message

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

WP-SpamFree by Pole Position Marketing

関連記事

no image

AmazonEC2にcakephp2入れたときにエラーが出た件

  たぶんEC2にはcakephpをこれからも入れるだろうから自分用にエントリー。 Amazon

記事を読む

あらら?Googleのストレージサービスで、無料なのに有料プランが使えてる?!

  「ストレージサービス」をご存知でしょうか。「サーバーのディスクスペースを

記事を読む

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しですね。 iwatchのネット

記事を読む

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろこれまで以上に元気です。

記事を読む

Dont-Be-Evil

エントリー数を増やしてSEO的にアクセス数が戻った件(Don’t be evil)

先月、サーバを変えたらアクセス数が落ちたエントリーをしました。 そんなことがあったので、1

記事を読む

本日エクストリーム出社しました

「エクストリーム出社」をご存知でしょうか? 去年あたりからネットでちらほら話題になっていた

記事を読む

no image

img画像に隙間(空間)ができる件

何度か経験してそのたびにイラッときたので自分用にエントリー。 スタイルシートで下記のように記述

記事を読む

【自分語り】WEB業界に入ろうと思った理由・経緯【その2】

前回は自分がどういう経緯でWEB業界に入って行くかの前篇をお送りしました。 今回はその続き

記事を読む

【いまさら?】楽天でんわ+IIJmio+SIMフリーiphone【試してみた】

先日MVNOしてIIJmioにしたとエントリーしました。 これまではdocomoを使ってい

記事を読む

【体験談:ダイエット】脂肪燃焼スープを作ってみた感想 5日目

思わず食べたいものをトップ画像にしてしまいました・・・。 脂肪燃焼スープでダイエットも今日

記事を読む

Google AD

Google AD

iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

6月末で現職を退職します

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑