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

WordPressテーマの制作時には、頻繁に使用するWordPressタグがたくさんあります。いつも使っているけど「あのタグ忘れた。」という事があるので、WordPressサイト制作時によく使用するものをここにまとめて記しておきます。基本的なWordPressタグも含めており、備忘録的な内容となります。

　WordPressタグ　を使って記事一覧を表示させる

記事一覧を表示させるWordPressタグというのはよく使用します。トップページやカテゴリ一覧だけではなく、固定ページにカスタム投稿などの記事を一覧表示させるということもありますね。

アーカイブページの記事一覧を記事数を指定して表示

アーカイブページに記事一覧を表示するには、以下のものでループさせます。

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>

	<!-- contents ... -->

<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

この場合、記事数の指定は、WordPressの管理画面内にある設定→表示設定→1ページに表示する最大投稿数から設定します。ただ、すべてのアーカイブページが同じ記事数となってしまうため、「ブログ記事では10件、カテゴリー記事一覧では12件、カスタム投稿タイプでは20件表示にしたい。」という時に困ってしまいます。

そこでよく使用されているのがquery_postsです。ループさせる前にquery_postsを記述する事で、強制的に表示件数を変更する方法なのですが、このタグの使用は推奨されておりません。データベースへ無駄な負担をかけてしまうからです。

以下の記事に詳しく紹介されておりました。

また、WordPress Codex にも以下のような記載がありました。

この関数はプラグインまたはテーマの中で使われることを想定されていません。

…

query_posts() はページ内のメインクエリーを書き換え、新しいクエリーのインスタンスと置き換えるために使う関数としては過度に単純化され、問題が発生しやすい方法です。非効率的で（SQL クエリを再実行します）、一部の状況では適切に実行することもできません（特にページング処理）。

…

query_posts を使うことによって、ページ上のメインクエリーが置き換えられ、ページの読み込み速度に影響を与えることに留意してください。最悪の場合、倍かそれ以上の処理が発生します。簡単に使える代わりに、この関数は混乱と問題を引き起こす傾向があります。

テンプレートタグ/query posts – WordPress Codex 日本語版

このため、query_postsを利用することは非推奨となります。

データベースに無駄な負担をかけずに記事数を指定する方法としては、functions.phpへ以下のように設定する方法を利用しましょう。

function my_pre_get_posts($query) {
	if ( is_admin() || ! $query->is_main_query() )
	return;

	/* カテゴリアーカイブページを10件に設定 */
	if( $query->is_category() ) {
		$query->set( 'posts_per_page', '10' );
	}
	/* 『cat-slug』というスラッグが付いたカテゴリアーカイブページを20件に設定 */
	if( $query->is_category( 'cat-slug' ) ) {
		$query->set( 'posts_per_page', '20' );
	}
	/* タグアーカイブページを30件に設定 */
	if( $query->is_tag() ) {
		$query->set( 'posts_per_page', '30' );
	}
	/* "red"か"blue"か"green"のスラッグが付いたタグアーカイブページを40件に設定 */
	if( $query->is_tag(array( 'red', 'blue', 'green' )) ) {
		$query->set( 'posts_per_page', '40' );
	}
	/* 投稿タイプアーカイブページを50件に設定 */
	if( $query->is_post_type_archive() ) {
		$query->set( 'posts_per_page', '50' );
	}
	/* タクソノミーアーカイブページを60件に設定 */
	if( $query->is_tax() ) {
		$query->set( 'posts_per_page', '60' );
	}
	/* "red"か"blue"か"green"のスラッグが付いた"color"のタクソノミーアーカイブページを70件に設定 */
	if( $query->is_tax('color', array( 'red', 'blue', 'green' )) ) {
		$query->set( 'posts_per_page', '70' );
	}
}
add_action( 'pre_get_posts', 'my_pre_get_posts' );

$query->set( 'posts_per_page', '10' );の数字部分で、記事数を指定します。

is_category('cat-slug')のようにカテゴリスラッグを指定して記事数を変更することもできますし、is_category(array( 'red', 'blue', 'green' ))にすれば、特定のスラッグが付いたカテゴリアーカイブページの記事数を変更することができます。

他のアーカイブページを指定する場合には、is_categoryやis_tagといった部分を変更します。この条件分岐タグについては、以下のページを参照してみてください。

データベースへの負担をかけず、一括で指定できるので管理しやすいですね。

目次へ

固定ページに　WordPressタグ　を使って記事一覧を表示する

固定ページに記事一覧を表示させる場合には、以下のWordPressタグを使用します。

<?php
	$wp_query = new WP_Query();
	$post = array(
		'post_type' => 'post',
		'posts_per_page' => '9',
		);
	$wp_query->query( $post );
	if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>

	<!-- contents ... -->

<?php endwhile; endif; wp_reset_postdata(); ?>

post_typeで投稿タイプを指定します。『投稿』の場合はpost、『カスタム投稿タイプ』の場合には、投稿タイプのスラッグを指定します。

表示させる記事数は、posts_per_pageの数字を変更します。

表示されている投稿に関連する記事を一覧表示する

投稿の最後などに関連記事を表示させるケースは多く、このWordPressタグはよく使用します。先述した『固定ページに記事一覧を表示する』のWordPressタグに追記するだけです（赤い文字部分）。

<?php
	$categories　=　get_the_category(　$post　->　ID　);
	$category_ID　=　array();
	foreach(　$categories　as　$category　):
	array_push(　$category_ID,　$category　->　cat_ID　);
	endforeach　;
	$query　=　new WP_Query(　$my_posts　);
	$my_posts　=　array(
		'post__not_in'　=>　array(　$post　->　ID　),
		'category__in'　=>　$category_ID,
		'posts_per_page'=>　'6',
	);
	if(　$wp_query->have_posts()　):　while(　$wp_query->have_posts()　)　:　$wp_query->the_post();
?>

	<!-- contents ... -->

<?php　endwhile;　endif;　wp_reset_postdata();　?>

これで、現在表示されている投稿が属するカテゴリの記事を6記事表示させることができます。

目次へ

基本的な　WordPressタグ

記事一覧もよく使用するのですが、それよりも基本的なWordPressタグをとても頻繁に使用します。意外に忘れがちなので、見直せるようにここに記しておきます。

全般

<!-- サイト名表示 -->
<?php bloginfo('name'); ?>

<!-- <title>表示用 -->
<?php wp_title(''); ?>

<!-- ページタイトル表示 -->
<?php the_title(); ?>

<!-- コンテンツ表示 -->
<?php the_content(); ?>

<!-- コンテンツを抜粋文として表示 -->
<?php the_excerpt(); ?>

<!-- ホームURLの出力　※ -->
<?php echo esc_url( home_url() ); ?>

<!-- パーマリンク -->
<?php the_permalink() ?>

<!-- 現在使用中のテーマまでのルートディレクトリ出力 -->
<?php echo get_template_directory_uri(); ?>

<!-- サイトの説明文（description）の表示 -->
<?php bloginfo('description'); ?>

<!-- 日付表示 -->
<?php the_time('Y年n月j日'); ?>

<!-- カテゴリ名をリンクなしで表示 -->
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

<!-- カテゴリ名をリンク付きで投稿数とともに一覧表示 -->
<?php
	$cat_all = get_terms( "category", "fields=all&get=all" ); // get=all で投稿がないカテゴリも表示。未記入で非表示。
	foreach( $cat_all as $value ):
?>
	<?php echo $value->name;?> <!-- カテゴリ名表示 -->
	<?php echo get_category_link( $value->term_id ); ?> <!-- カテゴリリンクを出力 -->
	<?php echo $value->count;?> <!-- カテゴリに属する記事数を表示 -->
<?php endforeach; ?>

<!-- 特定のカテゴリの子カテゴリリストをリンク付きで一覧表示 -->
<?php wp_list_categories('child_of=1'); ?> <!-- 親カテゴリのID指定 -->

<!-- タグ名をリンクなしで表示 -->
<?php
	$posttags = get_the_tags();
	$count = count($posttags);
	$loop = 0;
	if ($posttags) {
		foreach ($posttags as $tag) {
			$loop++;
			if ($count == $loop){
				echo $tag->name . '';
		} else {
			echo $tag->name . ', ';
		}
	}
} ?>

<!-- カテゴリリストの親カテゴリだけにclass属性を付ける -->
[functions.php]
function my_list_categories() {
    $my_cats_list = get_categories('get=all');
    foreach($my_cats_list as $category) {
        $my_cats_parent = $category->parent;
        if($my_cats_parent == 0){
            $my_cats_parent_id = $category->term_id;
            $my_cats_parent_slug = $category->slug;
            $my_cats_child_list = get_categories('child_of='.$my_cats_parent_id);
            $my_cats_child_num = count($my_cats_child_list);
 
            echo '<li';
            if($my_cats_child_num != 0){
                echo ' class="main"'; <!-- class名 -->
            }
            echo '><a href="/'.$my_cats_parent_slug.'/">'.$category->cat_name.'</a>'."\n";
 
            if($my_cats_child_num != 0) {
                echo '<ul>'."\n";
                foreach($my_cats_child_list as $category_child) {
                    echo '<li>';
                    echo '<a href="/'.$my_cats_parent_slug.'/'.$category_child->slug.'/">'.$category_child->cat_name.'</a> ('.$category_child->count.')';
                    echo '</li>'."\n";
                }
                echo '</ul>'."\n";
            }
            echo '</li>'."\n";
        }
    }    
}

[テーマファイル]
<?php my_list_categories(); ?>

<!-- カスタム投稿名を表示 -->
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>

<!-- アイキャッチ画像を表示 -->
<?php the_post_thumbnail(); ?>

<!-- アイキャッチ画像のURLを表示 -->
<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>

<!-- jQueryの読み込み -->
<?php wp_enqueue_script('jquery'); ?>

<!-- コメント返信用JSライブラリを出力 -->
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

<!-- フッターにあるCopyrightの年を自動更新（現在の年表示） -->
<?php echo date( 'Y' ); ?>

※<?php bloginfo('url'); ?><?php bloginfo(‘siteurl’); ?><?php bloginfo(‘home’); ?>は非推奨のようです。以下の記事を参照してみてください。

目次へ

アクションフックやテンプレートネーム

<!-- header.php -->
<?php get_header(); ?>

<!-- sidebar.php -->
<?php get_sidebar(); ?>

<!-- footer.php -->
<?php get_footer(); ?>

<!-- wp_head -->
<?php wp_head(); ?>

<!-- wp_footer -->
<?php wp_footer(); ?>

<!-- 検索フォーム -->
<?php get_search_form(); ?>

<!-- 指定ファイルのアクションフック -->
<?php get_template_part( 'template-name' ); ?>

<!-- テンプレートネーム指定 -->
<?php
/*
Template Name: sitetop
*/
?>

目次へ

投稿関連

<!-- 記事が所属するカテゴリ名をリンク有りで表示 -->
<?php the_category(); ?>

<!-- 記事が所属するカテゴリ名をリンク無しで表示 -->
<?php foreach(( get_the_category() ) as $cat){ echo '前に表示' . $cat->cat_name . '後に表示'; } ?>

目次へ

私が制作にてよく使用する　WordPressタグ　は以上です。これからさまざまな制作が待ち構えておりますので、新たな『よく使用するWordPressタグ』が出てきましたら、この記事に追記していきたいと思います。

また、今後バージョンアップ等で使用できないWordPressタグが出てくる可能性もあります。気がついたところがありましたら「これ非推奨になっているよ。」と一言いただけるとありがたいです。