WordPressテーマ「AllTuts」:ウェジットにサイドバー2を作成する

このサイトは、WordPressテーマ「AllTuts」を使用していますが、サイドバーにGoogle AdSenseなどの画像を追加すると、上下に余白が空いてしまい見栄えが悪いので、専用のサイドバー2を作成しました。

サイドバー2の手順を下記に記しましたので、同じように困っている方は参考にどうぞ。

※php、cssのテンプレートを変更いたしますので、レイアウトが崩れるなど発生する場合がありますので自己責任で行なってください。当サイトでは、責任を負いかねますのでご了承ください。

・作業を行う前に、変更を行うphpのバックアップをしてから行うことをお勧めします。万が一、レイアウトなどが崩れた場合に、上書き保存で戻せます。

 

ウィジェットのサイドバーに、「サイドバー2(sidebar2)」を作るには?
 

外観:ウェジットに「サイドバー2の項目」をサイドバーの下に作成します。

・外観 → テーマ編集 → functions.phpを選択

▽テーマのための関数:functions.php(61行目~72行目)
 ※テキストエディターに貼りつけた際の行数です。テキストエディターで折り返し設定を行なっている際は異なります。

61行目--->
register_sidebar(array(
	'name' => 'sidebar',
	'before_widget' => '<div class="rightBox">
			<div class="rightBoxTop"></div>
			<div class="rightBoxMid">',
	'after_widget' => '</div>	
			<div class="rightBoxBottom"></div>
		</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>',
));
<---72行目

上記の62~72行目までをコピーして、73行目の空白行に貼り付ける。
貼りつけた後、下記のように変更、削除を行う。

register_sidebar(array(
	'name' => 'sidebar2', <!--← 変更-->
	'before_widget' => '<div class="rightBox2"> <!--← 変更-->
			<div class="rightBoxTop"></div>
			<div class="rightBoxMid2">', <!--← 変更-->
	'after_widget' => '</div>	
			<div class="rightBoxBottom"></div>
		</div>',
	'before_title' => '<h2>', <!--← 削除-->
	'after_title' => '</h2>', <!--← 削除-->
));

【ファイルを更新】ボタンを押す。保存後、ウィジェットにサイドバー2(sidebar2)ができる。
※現在のところ、サイドバーにウェジットを追加してもHPには何も反映されません。
 

HP上にサイドバー2を表示させる
・外観 → テーマ編集 → sidebar.phpを選択

▽サイドバー:sidebar.php(42~43行目)

42行目--->
<?php /* Widgetized sidebar */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>
<---43行目

42行目を下記のように変更する。( || !dynamic_sidebar(2)を追加する。)

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() || !dynamic_sidebar(2)) : ?><?php endif; ?>

【ファイルを更新】ボタンを押す。HP上の既存サイドバーの下に、サイドバー2が追加されます。
※サイドバー2(sidebar2)にウェジットが追加されている場合。(スタイルが異なるので、現在のところは上下のスペースなどがあります。)
 

サイドバー2のスタイルを変更する(タイトルを表示するための上下のスペース部分を削除)

・外観 → テーマ編集 → style.cssを選択

650行目--->
.rightBox .rightBoxMid {
	padding:50px 20px 25px;
	background:url(images/bk_box_mid_right.png) 0 0 repeat-y;
	position:relative;
}
<---654行目

上記の650~654行目までをコピーして、655行目の空白行に貼り付ける。
貼りつけた後、下記のように変更、追加(画像を横幅に対してセンター揃え)を行う。

.rightBox2 .rightBoxMid2 {
	padding:5px 0px 5px ; <!--←マージン(内側の余白):上、左右、下-->
	text-align: center; <!--←画像を横幅に対してセンター揃え-->
	background:url(images/bk_box_mid_right.png) 0 0 repeat-y;
	position:relative;
}

【ファイルを更新】ボタンを押す。

完了後、HP上に問題なく表示されてると思いますが、完了となります。
他の方法もあるのかもしれませんが・・・

この方法を試した方が、うまくいくことを願います。(失敗したら、変更前のphpで元に戻してください。)


コメントはこちらから