*

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

関連記事

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

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

記事を読む

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

自分はこれまで、「WEBエンジニア」と「WEBディレクター」として仕事をしてきました。 今

記事を読む

【どうしてこうなった!?】このブログの直帰率が1%を切りました【自分史上初】

以前のエントリーで、このブログの直帰率が80%から20%に激減したことを報告しました。

記事を読む

さくらインターネットでPEARを使ってみる

以前、自分が持っている書籍を管理するアプリ「ブックマネージャー」を作ってアップしてたのですが

記事を読む

no image

WEBは入り口

スクール革命っていう、日曜の昼に放送してる番組見てたら、「近いうちに夢を録画できるようになる

記事を読む

no image

NO MUSIC,NO LIFE.メーカー作ってみた

以前から、画像を使ったアプリを作ってみたいと思い、GDを使ったアプリを作ってみました。 N

記事を読む

CakePHP1.3でブラウザを閉じてもセッションが切れないようにする方法

ちょっと体調を崩してしまってましたが、なんとか回復してきました。(辛かった・・・) 本当に

記事を読む

蒙古タンメン中本新宿店で北極ラーメンを食べた感想

節分を過ぎて暦の上では春ですが、関東地方では昨日雪が降りました。 まだまだ春は遠いですねー。

記事を読む

シェーバー買い換えたら進化が凄くてビビッた

かなり昔に購入したシェーバーを買い換えました。 ↓こちらが以前使っていたシェーバーです。

記事を読む

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

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

記事を読む

Google AD

Google AD

PAGE TOP ↑