034

2014.01.11

buddypressカスタマイズ手帳3:デフォルトをベースにオリジナルデザインのコーディング

このエントリーをはてなブックマークに追加

前回記事の「buddypressカスタマイズ手帳2」で下準備が完了しましたので、

さっそくカスタマイズ・コーディングしていきます。

と、その前に、plugins>buddypress>bp-themesから「bp-default」をコピーして、

まるごとthemesフォルダーにペーストしておきましょう。

その際にフォルダー名は「bp-default」から、

自分で分かりやすい名称「任意名」に変えときます。

このデータを子テーマ(オリジナルテーマ)としていじくり倒していきます。

 

まずは、functions.phpの記述を書き換えます。

子テーマ(オリジナルテーマ)のfunctions.phpの中身をばっさり削除しちゃいます。

親テーマ(bp-default)とバッティングさせないためです。

そんでもって、下記を記述します。

こうすることでbp-defalutのstyle.cssが効かなくなり、

その代わりにオリジナルテーマのstyle.cssが反映されるようになります。

 

?続いて先ほどthemesフォルダーにペーストした

子テーマ(オリジナルテーマ)の「style.css」を開いてみましょう。

これまた、思いきって中身を書き換えます。 新たなTheme Nameなどを記述します。

▼こんな感じです。

「Tags:」の覧に 「buddypress」を書き忘れると、

You’ll need to activate a BuddyPress-compatible

theme to take advantage of all of BuddyPress’s features.

We’ve bundled a default theme, but you can always install some other compatible themes

or update your existing WordPress theme.

という注意書きが管理画面の上に出現してうっとうしいので書き忘れないようにしましょう。

 

これで、CSSの準備が整いました。

あとはデザインにあわせて、どんどん記述していけばOK。

とはいうものの、デザインを変えていくということは、

各種PHPファイルもいじっていく必要があります。

試しに、一例としてヘッダー作りで作業してみます。

ヘッド

 

hdeder.php(デフォルトではこうなっています)

これをオリジナルデザインに合わせて変えます。

図のようにメインナビゲーションや検索は、

左サイドバーにレイアウトしていますので、 ズボッと取っちゃいます。

ずいぶんスッキリしちゃいました(笑)

1作目のオリジナルテンプレートが、

今後、2作目、3作目の参考書として使っていくことになりますので、

ソースコメントを遠慮なくガンガンメモしちゃいましょ!

▼CSSはこんな感じになります。

ヘッダーのカバー画像を管理画面の外観>テーマ>ヘッダーで挿入する場合は、

functions.phpにヘッダーのカバー写真のサイズを記述しておきます。

ヘッダーに直接埋め込むなら、上記は無用!header.phpに

<img src=”<?php bloginfo(‘stylesheet_directory’); ?>/_inc/images/画像名.png” />を

直接記述して呼び出せばOKです。

デモサイト;buddypressのおしゃべりをたのしむソーシャル・ネットワーク[buddy waiwai]

 

まとめ

こんな感じでガシガシとカスタマイズコーディングを進めていくわけですが、

なにしろカスタマイズするPHPファイル数はわんさかあります。

管理画面のテーマ編集に出ていない第3階層や第4階層にもあったりします。

ここからは、根気あるのみです!

 

 

デモサイト;buddypressのおしゃべりをたのしむソーシャル・ネットワーク[buddy waiwai]

ユーザー登録テストや投稿テストなどの使い勝手をお確かめいただけます。
登録後は、buddyなコミュニティとしてつながりましょ。(^_^)

 

 

  • アーカイブ

このエントリーをはてなブックマークに追加