スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

自分のためのWordpressでページ毎に違うサイドバーを表示させる方法まとめ

2011-10-08-00.png

フッターに続き、サイドバーをページ毎に切り替える事ができるようになりましたvv。
この切り替えが特に必要なのが、story music、fantasy music、worksと言った音楽コンテンツ。
storyとfantasyはサイドバーにサブメニュー必須な一方、worksは音楽プレイヤーがあればOK。
なので、これも何とか実現させたかったのです。

PHPには全く馴染みのない私でも理解できるような分かりやすい解説をして下さっている方々に大感謝でございます!

と言う訳で今回も自分用にまとめ。

参考にさせて頂いた記事




カスタマイズ方法

【0】.下準備:ページ構成を決めてサイドバーテンプレートを複製。


サイドバーのデフォルトをログインフォーム+会員様メニューと言うウィジェットの組み合わせとすると、
サイドバーのテンプレートはデフォルト(sidebar.php)の他に

①Works:デフォルト+プレイヤー
②Story music:デフォルト+プレイヤー+story musicのサブメニュー
③Fantasy music:デフォルト+プレイヤー+fantasy musicのサブメニュー

の3パターンが必要。
デフォルトの「sidebar.php」を3つ複製してそれぞれ名前を変更しておく。

①Works用:sidebar-2.php
②Story music用:sidebar-story.php
③Fantasy music用:sidebar-fantasy.php



【1】.function.phpを編集してウィジェットを置くサイドバーグループを増設。


今回はウィジェットを分割して

○デフォルト(name:サイドバー1):ログインフォーム、会員様メニュー
(1)story music用(name:subside):story musicのサブメニュー
(2)fantasy music用(name:subside2):fantasy musicのサブメニュー
(3)MP3プレーヤー用(name:subside_player):MP3プレーヤーをインラインフレームで表示

とするため、以下のように3つ増やす。

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',//デフォルト
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'subside',//story musicのサブメニュー
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'subside2',//fantasy musicのサブメニュー
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'subside_player',//MP3プレーヤー
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}


するとウィジェット編集画面はこんな感じに。
2011-10-08-01.png


【2】.下準備で用意したsidebar-xx.phpを編集して、それぞれ表示するサイドバーグループを指定。


sidebar-2.php:デフォルト+プレイヤー
プレイヤーを表示したい場所に以下を書き加える。
<li><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subside_player);?></li>


sidebar-story.php:デフォルト+プレイヤー+story musicのサブメニュー
独自メニューとプレイヤーを表示したい場所に以下を書き加える。
<li><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subside);?></li>
<li><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subside_player);?></li>


sidebar-fantasy.php:デフォルト+プレイヤー+fantasy musicのサブメニュー
独自メニューとプレイヤーを表示したい場所に以下を書き加える。
<li><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subside2);?></li>
<li><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subside_player);?></li>


※dynamic_sidebar(subside_player) のsubside_playerは、【1】で決めた'name'=>'subside_player',より。

これでサイドバーのテンプレートはOK。
次はページ用テンプレート。


【3】.ページ用テンプレートを編集して音楽展示コンテンツ用のテンプレートを作る。


ページ用テンプレート「page.php」を複製して名前を「page-music.php」に。

音楽コンテンツはstory music、fantasy music、worksの3つ。
それぞれ独自サブメニューが異なるので、条件分岐で呼び出すサイドバーテンプレート「sidebar-xx.php」を変える。

page-music.php
<?php if(is_page('story-music')): ?>
<?php get_sidebar('story'); ?>
<?php endif; ?>
<?php if(is_page('fantasy-music')): ?>
<?php get_sidebar('fantasy'); ?>
<?php endif; ?>
<?php if(is_page('works')): ?>
<?php get_sidebar('2'); ?>
<?php endif; ?>


※is_page('story-music') のstory-musicは、ページのスラッグ
※get_sidebar('story'); のstoryは、下準備で決めたsidebar-xx.phpのxx部分

これでページテンプレートもOK。
あとはウィジェットを配置!


【4】.ウィジェットを配置する。


story musicとfantasy musicのサブメニュー表示には、WordPress › My Link Order « WordPress Pluginsを利用。
「テキスト」でやってもいいけどタグ打ちがめんどくs(ry)並び替えができるから便利!

Include Category:に表示したいカテゴリーのID(数字)を設定。
カテゴリーのIDは、リンク>リンクカテゴリー>リンクカテゴリーの編集のURL末尾(cat_ID=xx)
2011-10-08-02.png


できあがり!!

2011-10-08-03.png
2011-10-08-04.png
2011-10-08-05.png


***

フッターのカスタマイズ

サイドバーと同じように、

function.phpを編集してサイドバーグループ増設。
    register_sidebar(array(
'name'=>'subfooterleft',//この名前を呼び出す
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));


footer.php内に呼び出しコードを挿入。
<ul><?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(subfooterleft);?></ul>


③HTMLやCSSで整える。

が基本。

ページ毎にヘッダーを切り替えたい場合にも応用できるな~、これは。
そうすると違う外部CSSを読み込むでページ全体のデザインも変えられる事に!
思ってたより色々とカスタマイズできて楽しい~!(*´∀`*)~♪

 ***

10/8現在の進捗とか 
・曲の登録作業は、UT分以外全部完了。全体のほぼ半分(・・・)。
・音楽コンテンツのページも、UT分以外全部完了。残りDL用ページのみ。
・他のページは残り規約と会員制案内のみ。でもコピペでいけそう。

・システムが固まったら、800人分の会員さんの登録情報を移す作業へ(・・・)。
・全部終わったらバックアップとってメルマガでお知らせ。


関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。