【wordpress】buddypressでの子テーマの作リ方
先日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
関連記事
-
cakephpでユーザ定義定数を読みだす方法
サイトを作るにあたって、定数を使いたいときがよくあります。 サイト上のある数値に変更があっ
-
【ダイエット:レシピ】脂肪燃焼スープ
脂肪燃焼スープのレシピと、スケジュールが書いてなかったので、ここに書いておきます。 【
-
ブログでアクセス増やすためにはやっぱりタイトルと記事が重要らしい件
最近はアクセス数にも気をつけてるので、ブログのアクセスを増やす方法が書かれた記事が気になりま
-
「おっ」思ったWEBデザイン
ちょっと調べることがあったのでメモ。■株式会社テトラシーンhttp://www.tetratone.
-
【wordpress:プラグイン】会員制サイトを作るのでBuddyPressをインストールしてみた
今ちょっと温めてるアイデアがあって、それを実現させるために会員制サイトを作ろうと思います。
-
WEBが全く分からないサイコパスがPJTに入って私が辞表を出すまでの経緯
WEB制作のプロジェクトで、全然使えない人がいたんですね。(ここではT氏としておきます)
-
「おっ」と思った記事
前回に引き続き、「おっ」と思ったサイトを紹介します。今回はデザインうんぬんでなく、コンテンツの方で。
-
共産主義から資本主義に異動
4月1日付で、営業側の部署に異動になりました。組織変更があると言う事は分かってましたが、前日の
-
アマゾンのクラウド(AWS)を使ってみる
前々からやろうやろうと思っていて手を着けられていなかったサービス、アマゾンウェブサービス(AWS
-
【感想】ネットで注文した電動アシスト自転車が届いたので早速試し乗りしてみたよ!
2週間ほど前のポストで電動アシスト自転車を購入したとエントリーしましたが、ついにその自転車が納車
Comment
[…] 【wordpress】buddypressでの子テーマの作リ方 | world is wonderful always […]