スマホ対応のサイドバープログラムの作成

どPC画面は幅が広いのでコンテンツ+サイドバーの構成が取れますが、スマホは幅が狭いのでこの構成が取れません。

そこでPCやタブレットの場合は通常のサイドバー、スマホの場合はBootstrapのドロップダウンメニュにする方法を解説しています。

1.基本知識

サイドバーに表示する項目を管理画面で編集する機能がウィジェットです。

WordPressの「外観→ウィジェット」で開く画面がサイドバー編集のウィジェット画面です。

また、このサイトで使っているTwentytwelveテーマはfunctions.phpの中の「twentytwelve_widgets_init()」の所で下記のウィジェットが設定されています。

id名	日本語名
sidebar-1	メインサイドバー
sidebar-2	フロントページウィジェットエリア１
sidebar-3	フロントページウィジェットエリア１

よってウィジェット編集画面で編集できるのは、上記の3つのサイドバーメニュです。

メニュの呼び出しには下記の関数を使います。
dynamic_sidebar(‘id名’)

2.sidebar.phpの作成

メインプログラムで
<?php get_sidebar(); ?>
を実行すると「sidebar.php」が実行されます。

この「sidebar.php」で表示デバイスを判断し、表示するサイドバーを決めています。

sidebar.php
my_dropdown_menu()

sidebar.phpのプログラムは下記になります。

<?php if(is_active_sidebar('sidebar-1')):?>
	<?php if(is_my_mobile() == 'xs'):?>		
		<?php my_dropdown_menu(2,'サブメニュ','sidebar-1');?>
	<?php else: ?>
<?php dynamic_sidebar('sidebar-1'); ?>
	<?php endif; ?>
<?php endif; ?>

※1.is_active_sidebar(‘sidebar-1’)は、ウィジェット画面で「メインサイドバー」が作成されているかを判断する関数です。
設定されてない場合は、何も表示しません。

※2.is_my_mobile()は、表示デバイスの種類を判断する自作関数です。
詳細は表示デバイスと画面サイズの両方を使った判断方法を参照してください。

※3.my_dropdown_menuは、スマホの時に表示するドロップダウンメニュです。
詳細は右のタブを見て下さい。

※4.dynamic_sidebarは、ウィジェットで作成されたサイドバーメニュを表示する関数です。

メインのsidebar.phpから呼ばれるドロップダウンメニュの関数です。

①functions.phpの記述

//DropDownメニュ
get_template_part('func/my_dropdown_menu');

※1.funcフォルダにあるdropdown_menu.phpをロードします。

②dropdown_menu.phpに記述している内容

<?php 
/*****************************************************************************
Bootstrapのドロップダウンメニュ関数
引数：
$color : ボタンの色[1:default(灰色),2:primary(青),3:success(緑),4:info(水色),5:warning(オレンジ),6:danger(赤)]
$title :ボタンに表示する文字
$menu  :呼び出すメニュ
*******************************************************************************/
function my_dropdown_menu($color,$title,$menu)
 {
	if($color==2){$color='primary';}
	elseif($color==3){$color='success';}
	elseif($color==4){$color='info';}
	elseif($color==5){$color='warning';}
	elseif($color==6){$color='danger';}
	else{$color='default';}
?>
<div class='dropdown'>
	<button type="button" class="btn btn-<?php echo $color;?> btn-xs" data-toggle="dropdown">
		<?php echo $title;?><span class="caret" </span>
	</button>
	<div class='dropdown-menu'>
		<?php dynamic_sidebar($menu);?>
	</div>
</div>
<?php
 }
?>

※1.赤で記述された所がBootstrapのドロップダウンでWordPressサイドバーを読み出す所です。
基本形はBootstrapのドロップダウンコンポーネントを参照してください。

③関数の利用例

No	色サンプル	使用例
1		my_dropdown_menu (1,’サブメニュ’,’sidebar-1′)
2		my_dropdown_menu (2,’サブメニュ’,’sidebar-1′)
3		my_dropdown_menu (3,’サブメニュ’,’sidebar-1′)
4		my_dropdown_menu (4,’サブメニュ’,’sidebar-1′)
5		my_dropdown_menu (5,’サブメニュ’,’sidebar-1′)
6		my_dropdown_menu (6,’サブメニュ’,’sidebar-1′)

3.CSSの作成

このサイトではサイドバーに下記を表示しています。
①カテゴリ
②最近の投稿

3-1.カテゴリのCSSの作成

<aside id="categories-2" class="widget widget_categories">
		<h3 class="widget-title">カテゴリー</h3>
		<ul>
			<li class="cat-item cat-item-12  current-cat">
				<a href="URL" title="カテゴリの説明文">GIMP</a>
			 (15)
			</li>
			<li class="cat-item cat-item-11">
				<a href="URL" title="カテゴリの説明文">Synology</a>
				(25)
			</li>
		</ul>
</aside>

※1.カテゴリには「widgetとwidget_categories」のクラスが付く

※2.タイトルはh3で「widget-title」のクラスが付く

※3.現在アクティブなカテゴリには「current-cat」のクラスが付く

カテゴリのCSS設定

上記のHTMLから下記CSSを設定しています。

/* ウィジェットタイトル設定 */
.widget h3{
	margin:5px 0;
　padding-left:10px;
	font-size:14px;font-size:0.875rem;
	font-weight:bold;
	color: #ffffff;
	background:#7f7f7f;}
/* カテゴリ表示 */
.widget_categories{margin-top:-5px;}
.widget_categories li{font-size:14px;font-size:0.875rem;}
.widget_categories li a{
	color:#666666;
	font-size:14px;font-size:0.875rem;
	line-height:20px;line-height:1.25rem;}
.widget_categories li:hover{background:#c6e2ff;;cursor:pointer;}
.widget_categories li a:hover{text-decoration:none;}
.widget_categories li.current-cat{background:#c6e2ff;}

※1.ウィジットタイトル(.widget h3)は背景付の白文字にしています。

またマージンやスマホ対応の為にrem指定にしています。

※2.カテゴリは「.widget_categories li」データと「.widget_categories li a」データから構成されており、これもスマホ対応の為にrem指定にしています。

※3.カテゴリにカーソルがきた場合はli要素全体でポインター表示にし、背景を付けています。

※4.アクティブなカテゴリ「.current-cat」には背景を付けています。

3-2.最近の投稿

<aside id="recent-posts-2" class="widget widget_recent_entries">
	<h3 class="widget-title">最近の投稿</h3>
	<ul>
		<li>
			<a href="URL">スマホ用のサイドバーを作る</a>
			<span class="post-date">2017-11-15</span>
		</li>
		<li>
			<a href="URL/">固定ページをデザインする</a>
			<span class="post-date">2017-11-14</span>
		</li>
	</ul>
</aside>

※1.最近の投稿には「widgetとwidget_recent_entries」のクラスが付く

※2.タイトルはh3で「widget-title」のクラスが付く

※3.最近の投稿データは<li>要素の中にa要素と「post-date」のクラスが付いた日付から構成される。

最近の投稿のCSS設定

投稿データを綺麗に並べる為にFlexboxの機能で表示順番を下記の様に変更しています。

/* 最近の投稿表示 */
.widget_recent_entries li{
	display:flex;
	flex-direction:row-reverse;}
.widget_recent_entries li a{
	width:70%;
	color:#666666;
	font-size:14px;font-size:0.875rem;
	line-height:18px;line-height:1.125rem;
	margin-bottom:10px;}
.widget_recent_entries li .post-date{width:30%;margin-left:-5px;}
.widget_recent_entries li:hover{background:#c6e2ff;;cursor:pointer;}
.widget_recent_entries li a:hover{text-decoration:none;}

※1.投稿タイトルを70%、日付を30%の幅にして、Flexboxのrow-reverse機能で表示順番を逆にしています。

※2.クリックはli要素全体をポインタ表示にしています。

3-3.スマホのボタン設定

スマホで表示する場合はドロップダウンボタンになるが、このCSS設定は下記になります。

<div class='dropdown'>
	<button type="button" class="btn btn-danger btn-xs" data-toggle="dropdown">
		サブメニュ<span class="caret" </span>
	</button>
	<div class='dropdown-menu'>
		<aside id="categories-2" class="widget widget_categories">
			<h3 class="widget-title">カテゴリー</h3>
			<ul>
				<li class="cat-item cat-item-12"><a href="url" title="説明">GIMP</a>(15)</li>
				<li class="cat-item cat-item-11"><a href="url" title="説明">Synology</a>(25)</li>
			</ul>
		</aside>
		<aside id="recent-posts-2" class="widget widget_recent_entries">
			<h3 class="widget-title">最近の投稿</h3>
				<ul>
					<li><a href="url">ドキュメントタイトル</a><span class="post-date">日付</span></li>
					<li><a href="url">ドキュメントタイトル</a><span class="post-date">日付</span></li>
					<li>
				</ul>
		</aside>
	</div>
</div>

※1.ドロップダウンボタンには「dropdown」のクラスが付与される。

※2.カテゴリには「widget_categories」、最近の投稿には「widget_recent_entries」のクラスが付与される。

そこでCSS設定として下記を定義している。

/* スマホメニュボタンの設定 */
@media screen and (max-width:767px){
	.dropdown{margin:0 0 5px 0;}
	.widget_categories li,
	.widget_recent_entries li{margin-left:5px;}
　.btn:hover{background:#fcfcfc;color:#2f4f4f;}
}

※1.ボタンの下は5pxの余白を作る。

※2.カテゴリと最近の投稿は左に5pxの余白を付ける。

※3.ボタンにカーソルがきた場合の設定を変更する。

4.jqueryの設定

CSSではli要素全体をリンクエリアに設定したが、これを実際に作動させる為に自作Queryに下記を追加している。

/* サイドバー全体をリンクエリアにする設定 */
$(function(){
     $('.widget_categories li,.widget_recent_entries li').click(function(){
     	var url   = $(this).find('a').attr('href');
      window.location= url;
     });
});

※1.「.widget_categories li」又は「.widget_recent_entries li」がクリックされた場合は要素の中からa要素を見つけ出しそこにジャンプする。