前回記事の「buddypressカスタマイズ手帳２」で下準備が完了しましたので、
さっそくカスタマイズ・コーディングしていきます。
と、その前に、plugins＞buddypress＞bp-themesから「bp-default」をコピーして、
まるごとthemesフォルダーにペーストしておきましょう。
その際にフォルダー名は「bp-default」から、
自分で分かりやすい名称「任意名」に変えときます。
このデータを子テーマ（オリジナルテーマ）としていじくり倒していきます。
まずは、functions.phpの記述を書き換えます。
子テーマ（オリジナルテーマ）のfunctions.phpの中身をばっさり削除しちゃいます。
親テーマ（bp-default）とバッティングさせないためです。
そんでもって、下記を記述します。
<?php
//+++++++++++++++++++++++++++++++++++++++++
//bp-defalutのstyle.cssを無効化し
//オリジナルテーマのstyle.cssを有効化する
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) :
function bp_dtheme_enqueue_styles() {}
endif;
?>
こうすることでbp-defalutのstyle.cssが効かなくなり、
その代わりにオリジナルテーマのstyle.cssが反映されるようになります。
?続いて先ほどthemesフォルダーにペーストした
子テーマ（オリジナルテーマ）の「style.css」を開いてみましょう。
これまた、思いきって中身を書き換えます。 新たなTheme Nameなどを記述します。
▼こんな感じです。
@charset "utf-8"; /* * Theme Name: OriginalTemplate01 * Theme URI: http://任意のURL * Description: OriginalTemplate01 * Version: 1.6.4 * Author: OriginalTemplate01制作者 * Author URI: http://任意のURL * Template: bp-default * License: 当サイト以外での使用は禁止します。 * License URI: license.txt * Tags: buddypress, two-column, blue */
「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（デフォルトではこうなっています）
.
. 省略
.
<body <?php body_class(); ?> id="bp-default">
<?php do_action( 'bp_before_header' ); ?>
<div id="header">
<div id="search-bar" role="search">
<div class="padder">
<h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php _ex( 'Home', 'Home page banner link title', 'buddypress' ); ?>"><?php bp_site_name(); ?></a></h1>
<form action="<?php echo bp_search_form_action(); ?>" method="post" id="search-form">
<label for="search-terms" class="accessibly-hidden"><?php _e( 'Search for:', 'buddypress' ); ?></label>
<input type="text" id="search-terms" name="search-terms" value="<?php echo isset( $_REQUEST['s'] ) ? esc_attr( $_REQUEST['s'] ) : ''; ?>" />
<?php echo bp_search_form_type_select(); ?>
<input type="submit" name="search-submit" id="search-submit" value="<?php _e( 'Search', 'buddypress' ); ?>" />
<?php wp_nonce_field( 'bp_search_form' ); ?>
</form><!-- #search-form -->
<?php do_action( 'bp_search_login_bar' ); ?>
</div><!-- .padder -->
</div><!-- #search-bar -->
<div id="navigation" role="navigation">
<?php wp_nav_menu( array( 'container' => false, 'menu_id' => 'nav', 'theme_location' => 'primary', 'fallback_cb' => 'bp_dtheme_main_nav' ) ); ?>
</div>
<?php do_action( 'bp_header' ); ?>
</div><!-- #header -->
<?php do_action( 'bp_after_header' ); ?>
<?php do_action( 'bp_before_container' ); ?>
<div id="container">
これをオリジナルデザインに合わせて変えます。
図のようにメインナビゲーションや検索は、
左サイドバーにレイアウトしていますので、 ズボッと取っちゃいます。
ずいぶんスッキリしちゃいました（笑）
1作目のオリジナルテンプレートが、
今後、2作目、3作目の参考書として使っていくことになりますので、
ソースコメントを遠慮なくガンガンメモしちゃいましょ！
.
. 省略
.
<?php do_action( 'bp_head' ); ?>
<?php wp_head(); ?><!--//カバー画像は管理画面の外観＞テーマ＞ヘッダーで挿入//-->
</head>
<body <?php body_class(); ?> id="bp-default"><!--//CSSでbodyに背景画像をいれちゃう//-->
<!----------------- ▼全体をラッピング//footer.phpの</body>の手前まで ----------------->
<div id="wrapper"><!--//CSSで4pxの青ボーダーで囲む//-->
<!------------ ▼ヘッダーステージ ------------>
<?php do_action( 'bp_before_header' ); ?><!--//ヘッダーアクション関数実行（※bp-defaultのthemeにフックされてるので現状では意味ないかも？）//-->
<div id="header">
<!--▼タイトル//管理画面の設定＞一般＞サイトのタイトル に書く一文-->
<h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php _ex( 'Home', 'Home page banner link title', 'buddypress' ); ?>"><?php bp_site_name(); ?></a></h1>
<!--▲タイトル-->
<?php do_action( 'bp_header' ); ?>
</div>
<?php do_action( 'bp_after_header' ); ?><!--//ヘッダーアクション関数実行（※bp-defaultのfunctions.phpに実行してほしい処理が記述されてないので現状では意味ないかも？/あっても問題ない）//-->
<!------------ ▲ヘッダーステージ ------------>
<!------------ ▼センターステージ//メインコンテンツと左右のサイドバーを格納 ------------>
<!--//コンテナアクション関数実行ここから//-->
<?php do_action( 'bp_before_container' ); ?><!--//コンテンツアクション関数実行（※bp-defaultのfunctions.phpに実行してほしい処理が記述されてないので現状では意味ないかも？/あっても問題ない）//-->
<div id="container">
.
. 省略
.
▼CSSはこんな感じになります。
.
. 省略
.
/*******************************************
Global Elements
********************************************/
body {
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
line-height: 160%;
color: #333;
width: 90%;
min-width: 960px;
max-width: 1250px;
margin: 0 auto;
padding-top: 0 !important;
background-image: url(_inc/images/background1.png );
background-repeat: no-repeat;
background-color: #F9F7E7;
}
.
. 省略
.
/*******************************************
全体ラッピング
********************************************/
#wrapper {
width: 1040px;
border: 4px solid #87C3E4;
background-color: #FFFFFF;
margin: 50px auto 20px auto;
}
/*******************************************
ヘッダー(header.php)
********************************************/
#header {
position: relative;
border-bottom: 4px solid #87C3E4;
height: 300px;
}
#header #search-bar {
position: absolute;
top: 25px;
left: 0;
width: 100%;
text-align: right;
}
#header h1 {
padding: 150px 0px 0px 55px;
}
#header h1 a {
font-size: 15px;
font-weight: normal;
}
.
. 省略
.
ヘッダーのカバー画像を管理画面の外観＞テーマ＞ヘッダーで挿入する場合は、
functions.phpにヘッダーのカバー写真のサイズを記述しておきます。
//+++++++++++++++++++++++++++++++++++++++++ //ヘッダーのカバー写真 $custom_header_params = array( 'default-image' => '', //デフォルト画像 'random-default' => false, //ランダム表示 'width' => 1040, //幅 'height' => 300, //高さ 'flex-height' => false, //フレキシブル対応（高さ） 'flex-width' => false, //フレキシブル対応（幅） 'default-text-color' => '', //デフォルトのテキストの色 'header-text' => true, //ヘッダー画像上にテキストを表示する 'uploads' => true, //ファイルアップロードを許可する ); add_theme_support( 'custom-header', $custom_header_params );
ヘッダーに直接埋め込むなら、上記は無用！header.phpに
<img src=”<?php bloginfo(‘stylesheet_directory’); ?>/_inc/images/画像名.png” />を
直接記述して呼び出せばOKです。
デモサイト；buddypressのおしゃべりをたのしむソーシャル・ネットワーク[buddy waiwai]
まとめ
こんな感じでガシガシとカスタマイズコーディングを進めていくわけですが、
なにしろカスタマイズするPHPファイル数はわんさかあります。
管理画面のテーマ編集に出ていない第3階層や第4階層にもあったりします。
ここからは、根気あるのみです！
|
デモサイト；buddypressのおしゃべりをたのしむソーシャル・ネットワーク[buddy waiwai] ユーザー登録テストや投稿テストなどの使い勝手をお確かめいただけます。
|