*

【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

webアプリの行方

Google Appsの説明会に行ったとき、「Googleのサービスはweb100%を目指し

記事を読む

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

脂肪燃焼スープでダイエット6日目。 昨日計ったら1Kg減量してました! おおー!すご

記事を読む

東日本大震災から3年経過した今、あの時の状況と変化したこと

今日で東日本大震災から3年経ちました。 日本中の誰の心の中にも、大きな影響を与えた出来事で

記事を読む

PV5000/月達成したのでまたGoogleAnalyticsのデータを公開します

めちゃくちゃに力を入れていた訳でもなく、特にすごいコンテンツをエントリーした訳でもないのに、

記事を読む

no image

Pear::pager と TwitterBootstrap をマッシュアップしてみた

前回に引き続き、WEBアプリをカスタマイズしてみました。 DB使って商品登録をしてると

記事を読む

postgresqlデータベースにインデックスを作成する方法

ビットコインが取引停止になったり、LINEがスタンプを自由に作れるようにしたり、何かとにぎや

記事を読む

no image

JQueryのsliderでpagination機能を作ってみた

複数ページが存在するWEBサイトによく使われている機能として「ページネーション」があります。

記事を読む

no image

xoops cubeを入れてみた

かなり枯れたパッケージだが、xoops cubeを調べたのでエントリー。 Xoops と言われ

記事を読む

xamppでSSLの設定をする

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

記事を読む

no image

WEBディレクター、WEBエンジニア募集してます。

いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線

記事を読む

Google AD

Google AD

PAGE TOP ↑