HOME  /WordPress(応用)
 /スマホ対応のサイドバープログラムの作成
2020年04月07日

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


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

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

1.基本知識

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

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

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

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

よってウィジェット編集画面で編集できるのは、上記の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.カテゴリには「widgetwidget_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.最近の投稿には「widgetwidget_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要素を見つけ出しそこにジャンプする。

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressからメールを送る為に下記の様な色々なプラグインを利用してきました。 ①WP Mail SMTP ■昔は簡単なプラグインだったが機能が拡張された時に障害が発生した段階で使用を断念。 ②Gmail SMTP […]

SynologyでWordPressを運用している時に、遅い!と感じる状況に遭遇しました。対策は①All in One SEOと②WP Mail SMTPの廃止です。この経緯を説明しています。

ここではWordPressからGmailのSMTPを介してメールを送る為に「Gmail SMTPプラグイン」を利用する方法を解説しています。このプラグインは「SMTP認証にOAuth2.0プロトコル」を利用するので、Gmailのセキュリティを守る事ができます。

WordPressサイトの公開後のプログラム変更は、サイトダウン等の危険性があるので難しくなります。そこで、私が行っているSyonologyを2台使った開発環境構築事例を紹介しています。

WordPressのメジャーアップデート(5.5や5.6)ではWordpressの更新が失敗する事があります。このような時にサイトを修復する方法を解説しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

ここでは、SynologyのNASの中でWordPressがどの様に稼働するか?を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

SynologyのNASのphpmyadminのセキュリティ対策として2要素認証を利用する方法を解説しています。尚、スマホを紛失した時の対応方法も解説しています。