*

【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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

windows7のxamppでvirtual hostを設定する

忘れないように忘れてもいいようにエントリー。 タイトルの通りです。 c:/xampp/a

記事を読む

no image

2013年あけましておめでとうございます(&旧年の振り返り)

あけましておめでとうございます。 2013年、新しい年のスタートです。 と、その前に、年

記事を読む

GoogleAnalyticsの直近1ヶ月データを公表します!

前回はPVが上がったので実際にやったことをポストしましたが、今回はAnalyticsの状況も

記事を読む

初めてジビエ食べてきたよ

昨日ある人のお誘いでジビエを食してきました。 これまで興味はあるものの、機会がなかったのでぜひ行き

記事を読む

xamppでSSLの設定をする

以前、xamppでvirtual host の設定をしましたが、xamppを使ってて「あれ、SS

記事を読む

【他者からの評価?】考えは自由【思想?】

自分の両親はリベラル(自由主義的)な考え方の人で、自分もその影響を受けて自由主義的な考え方を

記事を読む

【なぜ?!】ブログの直帰率が激減しました【GoogleAnalytics】

少し前から気づいていましたが、このブログの直帰率が激減しました。 まずはこちらの図表からどうぞ。

記事を読む

ipad2買ったら、コレは買っとけ的なもの その2

前回に引き続き、買ってよかったipadアプリです。i文庫HD以前PDF化した本を読むのにデフォルトの

記事を読む

no image

wordpressからbloggerに引越し

lolipopで使っているロリポプランは、DBが一つしか使用できない。もうちょっと有効に使えないかと

記事を読む

【解説】Googleウェブマスターツールの使い方

サイトの分析やアクセス解析のツールと言えばGoogleAnalyticsですよね。 このブ

記事を読む

Google AD

Google AD

PAGE TOP ↑