HOME  /WordPress(応用)
 /自作のパンくずを作成する
2020年04月07日

自作のパンくずを作成する

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

そこでここでは自作のパンくずを作る方法を解説しています。

1.前提知識

現在表示されているページを判断する関数。

ページ種別 関数 備考
ホームページ is_front_page() 設定→表示設定で選択したページかを判定する。
固定ページ is_page() 固定ページで作成したコンテンツかを判定する。
投稿ページ is_single() 投稿で作成したコンテンツかを判定する。
カスタム投稿ページ is_singular(‘××’) カスタム投稿かを判定する。

××はカスタム投稿の名前
カスタム投稿はis_single()でも検知される為、if文では
is_single()の前に記述する必要がある。

カテゴリページ is_category() カテゴリを選択して表示されたページかを判定する。
検索ページ is_search() 検索結果ページかを判定する。
アーカイブページ is_date() アーカイブページかを判定する。
is year() 年別アーカイブページかを判定する。
is_month() 月別アーカイブページかを判断する。

 

2.具体的なプログラム

2-1.functions.phpへの記述

// パンくず
	get_template_part('func/my_breadcrumb');

※1.上記はfuncフォルダの中にあるmy_breadcrumb.phpを取り込め!という命令です。

 

2-2.func¥my_breadcrumb.phpに記述するプログラムは下記になります。

<?php 
/*****************************************************************************
breadcrumbプログラム
*******************************************************************************/
function my_breadcrumb()
 {
 	global $wp_query,$post;
	/* Bootstrapアイコン文字のセット */
	$icon_home='<span class="glyphicon glyphicon-home" aria-hidden="true"></span>';
	$icon_book='&nbsp;/&nbsp;<span class="glyphicon glyphicon-book" aria-hidden="true"></span>&nbsp;';
	$icon_file='&nbsp;/&nbsp;<span class="glyphicon glyphicon-file" aria-hidden="true"</span>';
?>

<style>
	#breadcrumb{
		display:flex;
		flex-wrap:wrap; /* パンくずが画面一杯になった複数行にする */
margin:3px;0;
		font-size:14px;font-size:0.875rem;}
</style>		

<?php if(is_front_page()):return; ?> <!-- HOMEページなら終了 --> 
<?php endif; ?> 
<div id='breadcrumb'>
	<a href='<?php echo home_url(); ?>/'><?php echo $icon_home; ?> HOME</a><!--パンくずの先頭部分-->
	<!--固定ページのパンくず処理-->
	<?php if(is_page()): ?>
		<?php	if($post->post_parent != 0):?>
      <?php $ancestors = array_reverse(get_ancestors($post->ID,'page'));?>
	  	<?php foreach($ancestors as $id):?> 
				<a href='<?php echo get_permalink($id); ?>'><?php echo $icon_book.get_the_title($id); ?></a>
			<?php endforeach;?>
		<?php endif;?>
		<?php echo $icon_file.$post->post_title; ?>
	<!--投稿ページのパンくず処理-->
	<?php elseif(is_single()): ?>
		<?php $nowcat = get_the_category($post->ID)[0];?>
		<?php if($nowcat -> parent != 0): ?>
			<?php $ancestors = array_reverse(get_ancestors($nowcat -> cat_ID, 'category')); ?>
			<?php foreach($ancestors as $id):?>
				<a href='<?php echo get_category_link($id);?>'><?php echo $icon_book.get_cat_name($id);?></a>
			<?php endforeach;?>
		<?php endif;?>
		<a href='<?php echo get_category_link($nowcat->term_id);?>'><?php echo $icon_book.$nowcat->name;?></a>
		<div><?php echo $icon_file.$post->post_title; ?></div>
	<!-- カテゴリページのパンくず処理-->
	<?php elseif(is_category()): ?>
    <?php $nowcat=get_queried_object();?>
		<?php if($nowcat->category_parent != 0):?> 
	    <?php $ancestors = array_reverse(get_ancestors( $nowcat->cat_ID, 'category' ));?> 
	    <?php foreach($ancestors as $id):?>
				<a href='<?php echo get_category_link($id);?>'>&nbsp;/&nbsp;<?php echo get_cat_name($id);?></a>
	    <?php endforeach;?>
	 <?php endif;?>
	 <div>&nbsp;/&nbsp;カテゴリ「<?php echo $nowcat->name;?>」を表示:<?php echo $wp_query->found_posts;?>件</div>
	<!--検索ページのパンくず処理-->
	<?php elseif(is_search()): ?> 
		<div>&nbsp;/&nbsp;「<?php the_search_query();?>」の検索結果:<?php echo $wp_query->found_posts;?>件</div>
	<!-- アーカイブページのパンくず処理-->
	<?php elseif(is_date()): ?>
		<?php if(is_year()==1 and is_month()==0):?>
			<div>&nbsp;/&nbsp;<?php echo get_query_var('year');?>年の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div>
		<?php else:?>
			<a href='<?php echo get_year_link(get_query_var("year"));?>'>&nbsp;/&nbsp;<?php echo get_query_var('year');?>年</a>
			<div>&nbsp;/&nbsp;<?php echo get_query_var('monthnum');?>月の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div>
		<?php endif;?>
	<!-- if文の終了 -->
  <?php endif;?>		
</div>

<?php
 }
?>

 

3.プログラムの解説

①先頭部分

global $wp_query,$post;
/* Bootstrapアイコン文字のセット */
$icon_home='<span class="glyphicon glyphicon-home" aria-hidden="true"></span>';
$icon_book='&nbsp;/&nbsp;<span class="glyphicon glyphicon-book" aria-hidden="true"></span>&nbsp;';
$icon_file='&nbsp;/&nbsp;<span class="glyphicon glyphicon-file" aria-hidden="true"</span>';

始めにこのプログラムの中で使うグローバル変数($wp_query,$post)を宣言しています。

次に下記の様なパンくずの前に付くBootstrapアイコンを各変数($icon_home,$icon_book,$icon_file)セットしています。

 

②スタイル設定

<style>
	#breadcrumb{
		display:flex;
		flex-wrap:wrap; /* パンくずが画面一杯になった複数行にする */
  margin:3px;0;
		font-size:14px;font-size:0.875rem;}
</style>

#breadcrumb(パンくず)の横表示はFlexbox機能を利用しています。
また画面一杯になった時に「flex-wrap:wrap;」で複数行表示を指定しています。

 

③フロントページの処理

<?php if(is_front_page()):return; ?> <!-- HOMEページなら終了 --> 
<?php endif; ?>

フロントページの場合はこの関数からリターンさせています。

 

④パンくずの先頭処理

<div id='breadcrumb'>
	<a href='<?php echo home_url(); ?>/'><?php echo $icon_home; ?> HOME</a><!--パンくずの先頭部分-->

パンくずの先頭に下記を表示しています。

 

⑤固定ペーの処理

<!--固定ページのパンくず処理-->
<?php if(is_page()): ?>
 <?php if($post->post_parent != 0):?>
  <?php $ancestors = array_reverse(get_ancestors($post->ID,'page'));?>
   <?php foreach($ancestors as $id):?> 
    <a href='<?php echo get_permalink($id); ?>'><?php echo $icon_book.get_the_title($id); ?></a>
			<?php endforeach;?>
  <?php endif;?>
	<?php echo $icon_file.$post->post_title; ?>

※1.この固定ページに親がある場合は「$post->post_parent」に値が入っています。

※2.親がある場合は親を「get_ancestors」で取得し、「array_reverse」で反転させて古い順に並べます。

※3.反転させた親を「foreach」で1個づつ読み出しブックアイコン+「get_the_title」と「get_permalink」でリンク付き文字にして表示しています。

※4.最後にファイルアイコン+ドキュメントタイトル「$post->post_title」を表示しています。

表示例

上記は固定ページに親を付けたパンくずサンプルです。

 

⑥投稿ページの処理

<!--投稿ページのパンくず処理-->
<?php elseif(is_single()): ?>
 <?php $nowcat = get_the_category($post->ID)[0];?>
	<?php if($nowcat -> parent != 0): ?>
		<?php $ancestors = array_reverse(get_ancestors($nowcat -> cat_ID, 'category')); ?>
		<?php foreach($ancestors as $id):?>
			<a href='<?php echo get_category_link($id);?>'><?php echo $icon_book.get_cat_name($id);?></a>
	 <?php endforeach;?>
	<?php endif;?>
	<a href='<?php echo get_category_link($nowcat->term_id);?>'><?php echo $icon_book.$nowcat->name;?></a>
	<div><?php echo $icon_file.$post->post_title; ?></div>

※1.現在のカテゴリ情報を「$nowcat = get_the_category($post->ID)[0]」で呼び出します。

※2.親がある場合は「$nowcat -> parent」に値が入っています。

※3.親がある場合は親を「get_ancestors」で取得し、「array_reverse」で反転させて古い順に並べます。

※4.反転させた親を「foreach」で1個づつ読み出しブックアイコン+「get_cat_name」と「get_category_link」でリンク付き文字にして表示します。

※5.次に現在のカテゴリを上記と同様にブックアイコン+「get_cat_name」と「get_category_link」でリンク付き文字にして表示します。

※6.最後にファイルアイコン+ドキュメントタイトル「$post->post_title」を表示しています。

表示例

上記はカテゴリに親を付けたパンくずサンプルです。

 

⑦カテゴリページの処理

<!-- カテゴリページのパンくず処理-->
<?php elseif(is_category()): ?>
 <?php $nowcat=get_queried_object();?>
 <?php if($nowcat->category_parent != 0):?> 
  <?php $ancestors = array_reverse(get_ancestors( $nowcat->cat_ID, 'category' ));?> 
  <?php foreach($ancestors as $id):?>
    <a href='<?php echo get_category_link($id);?>'>&nbsp;/&nbsp;<?php echo get_cat_name($id);?></a>
  <?php endforeach;?>
 <?php endif;?>
 <div>&nbsp;/&nbsp;カテゴリ「<?php echo $nowcat->name;?>」を表示:<?php echo $wp_query->found_posts;?>件</div>

※1.関数「get_queried_object()」は、現在のカテゴリ情報を返します。
投稿ページでないので「$nowcat = get_the_category($post->ID)[0]」は使えません。

※2.現在のカテゴリの親の処理は投稿ページの時と同様な処理をしています。

※3.最後に現在のカテゴリ名に加えて、このカテゴリの件数($wp_query->found_posts)を表示しています。

表示例

上記はカテゴリに親を付けたパンくずサンプルです。

 

⑧検索結果ページの処理

<!--検索ページのパンくず処理-->
<?php elseif(is_search()): ?> 
	<div>&nbsp;/&nbsp;「<?php the_search_query();?>」の検索結果:<?php echo $wp_query->found_posts;?>件</div>

※1.何のワードで検索したか?は「the_search_query()」で取得できます。

※2.検索件数は「$wp_query->found_posts」に設定されています。

表示例

 

⑨アーカイブページの処理

<!-- アーカイブページのパンくず処理-->
<?php elseif(is_date()): ?>
 <?php if(is_year()==1 and is_month()==0):?>
		<div>&nbsp;/&nbsp;<?php echo get_query_var('year');?>年の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div>
	<?php else:?>
		<a href='<?php echo get_year_link(get_query_var("year"));?>'>&nbsp;/&nbsp;<?php echo get_query_var('year');?>年</a>
		<div>&nbsp;/&nbsp;<?php echo get_query_var('monthnum');?>月の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div>
	<?php endif;?>

※1.月別アーカイブページの場合は、年のURLと月の投稿件数を表示します。
月別アーカイブページの場合は、その年の投稿件数を表示します。

※2.年や月のデータは「get_query_var()」で$wp_queryにあるquery_varsからデータを読み込みます。
年は「get_query_var(‘year’)」、
月は「get_query_var(‘monthnum’)」で取得できます。

※3.年のリンク情報は「get_year_link(get_query_var(“year”)」で取得します。

※4.対象件数は$wp_queryにある「found_posts」の値を見ています。

表示例

 

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

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

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

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

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

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

「Velvet Blues Update URLs」はWordpressのプラグインです。よって、WordPress稼動中にURLを変更するツールです。これを使ってサイトのURLを変更する方法を解説しています。

WordPressを構築した後、URL変更をしたい等のニーズが発生しますが、この時に重要なのはWordPressの稼働環境を理解する必要があります。ここでは「WordPressの稼働環境」と「MariaDBの中の構造」を解説しています。

「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)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

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

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「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のページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

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

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と完全に分離するので見やすくすることができます。

phpmyadminのセキュリティ対策として①phpMyAdminを別名にする方法②phpMyAdminをrootでアクセスできなくする方法
③phpMyAdminアクセスをローカルに限定する方法を解説しています。