WordPress テーマの作成

パンくずリストを作成する

更新日:

WordPressでテーマの作成/16

パンくずリストを記事の個別ページ『single.php』、カテゴリーページ『category.php』、月別ページ『date.php』ファイルに作成したいと思います。

記事の個別ページ

まず『single.php』を開き、コンテンツの前に下記のコードを入力します。

<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url">
		<span itemprop="title">トップ</span>
	</a> ›
</div>

<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
		<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
	</a> ›
</div>

<div><?php the_title(); ?></div>
</div>

個別記事は、『トップ > カテゴリー名 > 個別記事のタイトル名』と表示するように作成しています。ブラウザで確認してみます。

次に、『style.css』でパンくずリストのデザインを指定します。

/* パンくずリスト */
.single div#header, .archive div#header
	{margin-bottom: 5px}	/*single,archiveの下部余白を5pxに指定*/

div#breadcrumb	{margin-bottom: 5px}	/*パンくずリストの下部余白を5pxに指定*/

div#breadcrumb div	{display: inline;/*リンクを横並べに指定*/
	font-size: 0.75em}		/*文字サイズを0.75emに指定*/

それでは、再度ブラウザで確認してみます。

カテゴリーページ

次に、『category.php』ファイルを開き、コンテンツの前に下記のコードを挿入します。

<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url">
		<span itemprop="title">トップ</span>
	</a> ›
</div>
<div><?php single_cat_title(); ?></div>
</div>

カテゴリーページは、『トップ > カテゴリー名』と表示するように指定しています。ブラウザで確認してみます。

月別ページ

『date.php』ファイルを開き、コンテンツの前に下記のコードを挿入します。

<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url">
		<span itemprop="title">トップ</span>
	</a> ›
</div>

<?php if(is_month()): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo get_year_link(get_the_date('Y')); ?>" itemprop="url">
		<span itemprop="title"><?php echo get_the_date('Y'); ?>年</span>
	</a> ›
</div>

<div><?php echo get_the_date('n'); ?>月</div>
<?php endif; ?>

<?php if(is_year()): ?>
<div><?php echo get_the_date('Y'); ?>年</div>
<?php endif; ?>
</div>

月別ページの階層は、『トップ > 年 > 月』と表示するように作成しています。ブラウザで確認してみます。

 本日のコードの解説

今回のパンくずリストはHTML5の関連技術であるmicrodataという仕様を使って作成しています。

microdataとは、HTML文書の中にメタデータを埋め込むための技術で、microdataを利用することにより、googleなどの検索ロボットにパンくずリストを表示させやすくなります。詳しくはhttp://kojika17.com/2011/06/summary-of-microdata.phpのサイトをご覧下さい。

itemscope

microdataの仕様で、itemを作成するために用いられる属性

itemprop

microdataの仕様で、itemにプロパティを追加するために用いられる属性。プロパティは一般に文字列の値を持つが、URLの値を持つこともできる。

 

本日は以上です。

-WordPress, テーマの作成
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.