WordPressテーマ制作時に頻繁に使用する WordPressタグのまとめ Vol.2

WordPressタグの中でも、WordPressテーマ制作の際に覚えておきたい頻繁に使用するものをご紹介します。
HTMLの静的サイトよりも効率的なサイト運用が可能なWordPressサイト。WordPressタグの使い方を工夫することで、より効率良くサイト運用ができるようになります。
WordPressテーマ制作に慣れていない方に向けのTips。ぜひ参考にしてみてください。

プラグインAdvanced Custom Fields Pro の繰り返しフィールドを表示させるWordPressタグ

クライアントが更新しやすくするためにAdvanced Custom Fields Pro　を使用していますが、繰り返しフィールドを利用することが多いです。
その繰り返しフィールドを表示するためには、以下のWordPressタグを記述します。

<?php if(get_field('repeater field name')): ?>
<?php while(the_repeater_field('repeater field name')): ?>
	<?php the_sub_field('sub field name'); ?>
<?php endwhile; ?>
<?php else: ?>
	<!-- 入力がない場合はここが表示される -->
<?php endif; ?>

目次へ

独自のテンプレートパーツを作成する

WordPressには、ヘッダーやフッター、サイドバーなど全ページ共通のテンプレートパーツは既存でありますが、その他に独自のテンプレートパーツを作成する事も可能です。
「パンくずリストやSNSボタンなどは全ページに掲載するから一括で管理したい。」といったケースはよく出てきます。その時は、独自のテンプレートパーツを作成して1つのファイルを編集した方が効率的になります。

あらかじめ共通項目用に独自テンプレートパーツを作成しておき、ファイル名を決めておきます。
例：themename.php など

あとは、表示したい箇所に、以下のWordPressタグを記述します。

<?php get_template_part('themename'); ?>

themenameの部分は同じものを記述します。

目次へ

次のページへのページネーションを実装するWordPressタグ

WordPressアーカイブページのページネーションは数字でリンクされているものが一般的ですが、次のページのリンクを大きく表示しておくと視認性が高く、クリックしやすくなります。
コンテンツの多いブログではできるかぎりボリュームをアピールしたいもの。複数のアーカイブページを訪れてもらえるように、私の制作では、あえて次のページへのリンクを別に用意しておくようにしてます。

<?php
	global $paged;
	if(empty($paged)) $paged = 1;
	global $wp_query;
	$pages = $wp_query->max_num_pages;
	if(!$pages){
		$pages = 1;
	}
	if($pages != 1) {
		if ( $pages == $paged ) {
			$next_page_num = $paged;
		} else {
		$next_page_num = $paged + 1;
		}
		if ( $paged < $pages ) {
			echo '<div class="pagenation-next"><a href="'.get_pagenum_link($next_page_num).'">次のページへ</a></div>';
		}
	}
?>

参考：Brunoブログのアーカイブページ

目次へ

現在のカテゴリ名をリンクなしで出力するWordPressタグ

WordPressカテゴリアーカイブページでは、そのページのカテゴリタイトルを表示する際や、パンくずリストを独自で作成する際に、現在表示しているページのカテゴリ名をリンクなしで表示させたいケースはよくあります。下記WordPressタグを記述することで、ループ外であっても出力することができます。

<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->cat_name " ;} ?>

目次へ

カテゴリ名をリンク付きでリスト表示するWordPressタグ

WordPressでサイドバーやフッターなどにカテゴリリストをリンク付きで表示させるための WordPressタグです。直接記述でも良いのですが、カテゴリを管理画面から編集したいというクライアントも多いので、こちらを利用してます。

<ul>
	<?php wp_list_categories('orderby=name&title_li=&hide_empty=0'); ?>
</ul>

目次へ

カスタム投稿のターム名をリスト表示するWordPressタグ

こちらは、カスタム投稿のターム名をリンク付きで表示させるための WordPressタグです。例では、productsというカスタム投稿のターム名一覧を掲載させます。

<ul>
	<?php
		$terms = get_terms( 'products', 'hide_empty=0&parent=0' );
		foreach ( $terms as $term ) {
			echo '<li><a href="' . get_term_link( $term, $term->taxonomy ) . '">' .$term->name. '</a></li>';
		}
	?>
</ul>

また、親子の階層をもつタームがあり、子ターム名を表示する場合は、parent=0の数字を親タームのIDに変えます。

目次へ

テーマ編集時のChromeキャッシュ対策をするWordPressタグ

テーマを編集しているとCSSファイルをよく編集するのですが、Chromeで確認しているとキャッシュが残ってしまうので、編集するたびに履歴からキャッシュを削除しないといけません。これが結構手間なので、CSSファイルにタイムスタンプを追加して、ファイル名を更新ごとに変更させております。これにより、Chromeは新しいCSSファイルを読み込んでいると認識してくれます。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

上記のWordPressタグでCSSファイルを読み込むと、

<link rel="stylesheet" href="https://.../style.css?123456789">

とファイル名に?123456789といった文字列が追加されるようになります。

編集が完了しましたら、私はChromeがキャッシュを残せるように<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>">に戻してます。

目次へ

管理画面から編集できないページでもカスタムフィールドで編集できるようにするWordPressタグ

ブログのアーカイブページ（index.php といったブログトップページ）などは、デフォルトでは管理画面内に編集するページがなく、テーマファイルを直接編集しないといけません。しかし、クライアントが直接テーマファイルを編集するとなるとハードルがかなり上がるため、できるかぎり管理画面内から編集できるようにしたいもの。

そこで、任意の固定ページ編集画面からコンテンツを編集できるように、カスタムフィールドを使用して編集できるようにします。

まず、既存の固定ページにカスタムフィールドを用意します。

固定ページIDの例： 2
フィールド名の例： fieldname

該当箇所に下記のWordPressタグを記述します。