*

【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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

【今さら】ブラインドタッチができるようになるまでにやった3つの事【もういいでしょ】

過去、仕事で一緒になった人がブラインドタッチが苦手だということがありました。 両手の人差し

記事を読む

no image

佐々木俊尚さんの講演:ソーシャルとクラウドとグローバル

11月17日、Hitachi Open Middleware World Cloud Day に参

記事を読む

年の瀬

年末最後の日なので2013年を振り返ってみる

facebookを見てるとスキー場行ったり旅行行ったりしてる写真がタイムラインに流れてきて、

記事を読む

自分がブログ続けていく意味を考えたよ

ブログを続ける意味を考えてみました。 1.自分用メモ 基本的に私の場合はこれがメインに来

記事を読む

andoさん写真

「オープンソースカンファレンス2012」でcandycaneのセミナー聞いてきた

 オープンソースカンファレンス2012に行ってきました。 オープンソースカンファレンス20

記事を読む

no image

タグクラウド機能を付加。

右側のナビにタグクラウドを付けた。どうでしょうか。それにしてもワードプレスってタグが簡単だよね。wp

記事を読む

WEBサイトの表示速度をスピードアップする方法

サイトの表示が遅いので、いくつかツールを使ってチューニングすることにしました。 まず初めに

記事を読む

年末なので2013年を振り返ってみる

クリスマスとか忘年会とか大晦日とか正月とか、この時期ゆっくりしてられないですよね。 それな

記事を読む

【体験談】アンガーマネジメントを実践してみたよ

あるきっかけで「アンガーマネジメント」という言葉を知りました。 アンガーマネジメントとは、

記事を読む

cakephp2にACLプラグインを入れてみた

cakephpで、ユーザーによって権限やアクセスを変えたりする方法を調べてたら、それ用のプラ

記事を読む

Google AD

Google AD

PAGE TOP ↑