【WordPress】テーマ作成に使う
テンプレートタグを集めました

TIPS

inoue

はじめに

WP化する時に、「あれ、タグページのIDってどうやって取得するっけ？検索、検索…」とか毎回やってるなーと思っていたので、この際このページに使うタグは一気に全部載せようと思います。完全な個人用のメモですね。笑

本当に自分がテーマ作る時のスニペット的なものなので引数とか細かい使い方については省略します。

かなり長くなりそうですが、どんなに長くなっても1ページに収めます。笑
随時追加していきます。

条件分岐タグ

//TOPページ
is_front_page()

//固定ページ
is_page()

//投稿ページ
is_single()

//カテゴリーページ
is_category()

//アーカイブページ
is_archive()

//タグページ
is_tag()

//特定のページテンプレート
is_page_template('ページテンプレートのファイル名')

//投稿タイプ
is_singular('投稿タイプ名')

//タクソノミーページ 
is_tax()

//著者ページ
is_author()

//日付アーカイブページ
is_date()

//ページネーション2ページ目以降
is_paged()

//検索結果
is_search()

//404ページ
is_404()

//管理画面
is_admin()

//プレビュー画面
is_preview()

//ログインしているかどうか
is_user_logged_in()

//テーマカスタマイザー内かどうか
is_customize_preview()

テンプレートタグ

インクルードタグ

//header.phpを読み込む
get_header();

//footer.phpを読み込む
get_footer();

//指定したテンプレートファイルを読み込む
get_template_part('テーマスラッグ名', 'テンプレート名');

//searchform.phpを読み込む
get_search_form();

//インクルードしたファイルに変数を渡したい時
//グルーバル変数で渡すか
global $data;
get_template_part('content/about');

//includeする
include locate_template('content/about.php');

固定・投稿ページでよく使うタグ

//タイトル出力
the_title();

//タイトル取得
get_the_title();
$post->post_title;

//タイトルをaltなどの属性に使うとき
the_title_attribute();

//エディターに書いたコンテンツ出力
the_content();

//エディターに書いたコンテンツ取得
get_the_content();
$post->post_content;

//公開日出力
the_time('Y.m.d'); //2019.09.01
the_time('Y.n.j'); //2019.9.1

//公開日取得
get_the_time('Y.m.d');

//更新日出力
the_modified_time('Y.m.d');

//更新日取得
get_the_modified_time('Y.m.d');

//今日の日付
date_i18n('Y.m.d', current_time('timestamp'));

//パーマリンク出力
the_permalink();

//パーマリンク取得
get_the_permalink();

//アイキャッチ画像出力
if(has_post_thumbnail()){
 the_post_thumbnail();
}

//アイキャッチ取得
get_the_post_thumbnail('投稿ID', 'サイズ', '属性オプション');

//前の記事の取得
get_previous_post();

//次の記事の取得
get_next_post();

//前の記事出力
if($prev){
 previous_post_link('%link', '文言');
}

//次の記事の出力
if($next){
 next_post_link('%link', '文言');
}

//投稿者情報
$author = get_userdata($post->post_author);
//投稿者ID
$author_id = $author->ID;
//投稿者ニックネーム
$author_nicename = get_the_author_meta('user_nicename');
//投稿者ページメタ情報
$author_meta = get_user_meta($auther_id, 'フィールド名', true);
//投稿者ページリンク
$author_link = get_author_posts_url($author_id);

//カテゴリー情報
$category = get_the_category();
//カテゴリーID
$cat_id = $category[0]->cat_ID;
//カテゴリー名
$cat_name = $category[0]->cat_name;
//カテゴリースラッグ
$cat_slug = $category[0]->slug;
//カテゴリーページへのリンク
$cat_link = get_category_link($cat_id);

//タグ情報
$tags = get_the_tags();
if(!empty($tags)){
  foreach($tags as $tag) {
    //タグID
    $tag_id = $tag->term_id;
    //タグ名
    $tag_name = $tag->name;
    //タグページへのリンク
　　 $tag_link = get_tag_link($tag_id);
  }
}

カスタム投稿アーカイブページでよく使うタグ

//全ての記事数
$max_pages = $wp_query->max_num_pages;

//現在のページ
$current = (get_query_var('paged')) ? get_query_var('paged') : 1;

//投稿タイプ名を出力
post_type_archive_title('', true);

//投稿タイプ名を取得
$archive_title = post_type_archive_title('', false);

カテゴリーページでよく使うタグ

//現在のカテゴリーIDを取得
$cat_id = get_query_var('cat');

//カテゴリー名を出力
single_cat_title( '', true );

//カテゴリー名を取得
$cat_title = single_cat_title( '', false );

タグページでよく使うタグ

//現在のタグIDを取得
$tag_id = get_query_var('tag_id');

//タグ名を出力
single_tag_title( '', true );

//タグ名を取得
$tag_title = single_tag_title( '', false );

投稿者アーカイブページでよく使うタグ

//現在の投稿者IDを取得
$author_id = get_query_var('author');
//投稿者名
$author_name = get_the_author_meta('user_nicename', $author_id);
//URL
$author_url = get_author_posts_url($author_id);

検索結果ページでよく使うタグ

//サイト内検索を行ったときのクエリ文字列を取得
get_search_query();

その他よく使うタグ

//URL出力
home_url('/') //TOPページ https://notes.sharesl.net/

//テーマフォルダのURL
get_theme_file_uri('assets/images/mv.jpg');

//テーマフォルダの絶対パス
get_theme_file_path('assets/images/mv.jpg');

//読み込んだスクリプトにクエリを付けてキャッシュを回避するとき
get_theme_file_uri('script.js?'.filemtime(get_theme_file_path('script.js')));

//特定の投稿の情報を取得
get_post('投稿ID');

//スラッグ名からページを取得
get_page_by_path('スラッグ名');

//ページタイトルからページを取得
get_page_by_title('ページタイトル');

//カスタムフィールドを取得
get_post_meta('投稿ID', 'フィールド名', true);

//カスタムフィールドを更新
update_post_meta('投稿ID', 'フィールド名', '値');

//2連続の改行を<p>タグに置き換える
wpautop($raw_text, true); //trueで1つの改行は<br>に変換

ループ

記事一覧（WP_Query）

新着記事

//除外記事用
global $exclude;

$new_args = [
  'post_type'      => 'post',
  'posts_per_page' => 6,
  'post_status'    => 'publish',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'post__not_in'   => $exclude,
  'no_found_rows'  => true
];
$new_query = new WP_Query( $new_args );
if ( $new_query->have_posts() ) :
  while ( $new_query->have_posts() ) :
    $new_query->the_post();
　　 
    //ページ内で被らないようにする
    $exclude[] = $post->ID;
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
endif;

投稿ページと同一カテゴリーの記事（関連記事）

global $exclude;

//現在のページのカテゴリー情報を取得
$category   = get_the_category();
$cat_id     = $category[0]->cat_ID;

$args = [
  'post_type'      => 'post',
  'cat'            => $cat_id,
  'posts_per_page' => 6,
  'post_status'    => 'publish',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'post__not_in'   => $exclude,
  'no_found_rows'  => true
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) :
    $query->the_post();

　　 //ページ内で被らないようにする
    $exclude[] = $post->ID;
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
endif;

ページネーションを付ける場合（WP-PageNaviを使用）

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = [
  'post_type'      => 'post',
  'posts_per_page'  => 10,
  'post_status'     => 'publish',
  'order'           => 'DESC',
  'orderby'         => 'date',
  'paged'           => $paged
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) :
    $query->the_post();
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
  //ページネーションを追加するラッパー関数
  add_pager('p-archive-pager', $query);
endif;

ページネーションを追加する時は簡単なのでWP-PageNaviを使っています。
ただ出力するページが多いといちいち処理を書くのが面倒なので以下のようなラッパー関数を用意しています。

<?php
/*
* wp_pagenaviを追加
* @param String class 付与するclass名
* @param String query wp_query
*/
function add_pager($class = null, $query = null){
  if (function_exists('wp_pagenavi')) {
    //サブクエリの場合
    if (!empty($query)) {
      $arg = [
        'echo'  => false,
        'query' => $query
      ];
    }
    //メインクエリの場合
    else {
      $arg = [
        'echo'  => false
      ];
    }
    $pagenavi = wp_pagenavi($arg);
    if (!empty($pagenavi)) {
      $class = !empty($class) ? $class : ''; ?>
      <div class="c-pager<?php echo esc_attr(" ${class}")?>">
        <?php
        echo $pagenavi; ?>
      </div>
      <!-- /.c-pager -->
      <?php
    }
  }
}

?>

デフォルトはc-pagerというクラスの付いたdiv要素で囲みます。第一引数でさらに固有のクラス名を追加できます。第2引数はサブループの場合（ここではWP_Query）でページネーションする場合にそのクエリを指定します。

ただ個人的にはページネーションを作るようなページはWP_Queryでサブループを回すとページが重くなるので、固定ページで作らずに素直にアーカイブページやカテゴリーページを作った方が軽くなります。pre_get_postsでループの内容は制御できますしね。
まぁ知っててもなんでかWP_Query+固定ページで作ってしまって、あとでやり直しみたいな無駄をよくします・・・笑

特定のカスタムフィールドを持った記事のみ

$args = [
  'post_type'      => 'post',
  'posts_per_page'  => 10,
  'post_status'     => 'publish',
  'order'           => 'DESC',
  'orderby'         => 'date',
  'meta_key'         => 'cf_apple', //カスタムフィールド名
  'meta_value'       => 1, //カスタムフィールドの値
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) :
    $query->the_post();
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
endif;

カスタム投稿タイプの特定のタームの記事

$args = [
  'post_type'      => 'photo',
  'posts_per_page' => 10,
  'post_status'    => 'publish',
  'order'          => 'DESC',
  'orderby'        => 'date',
  'tax_query'      => [
    'taxonomy' => 'photo_category', //タクソノミー名
    'field'    => 'slug', // 対象とするフィールドを指定。ここではslug
    'terms'    => 'sea' //タームスラッグを指定
  ]
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) :
    $query->the_post();
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
endif;

特定の親ページを持った子ページ一覧

$parent_page = get_page_by_path('parent');
$parent_page_id = $parent_page->ID;
$args = [
  'post_type'       => 'page',
  'post_status'     => 'publish',
  'posts_per_page'  => -1,
  'post_parent'     => $parent_page_id,
  'no_found_rows'   => true
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) :
    $query->the_post();
    
    //ループの中身
    
  endwhile;
  wp_reset_postdata();
endif;

WP_Queryの負荷を下げるオプション

//ページネーションや全記事数の取得が不要な場合
'no_found_rows' => true
//カスタムフィールドを利用しない場合
'update_post_meta_cache' => false
//タクソノミーを利用しない場合
'update_post_term_cache' => false
//IDのみを取得する場合
'fields' => 'ids'

記事一覧（get_posts）

WP_Queryのラッパー関数なのでできることはほぼ同じ。

新着記事一覧

$args = [
  'post_type'              => 'post',
  'posts_per_page'         => -1,
  'post_status'            => 'publish',
  'orderby'                => 'date'
];
$query = get_posts( $args );
if ( !empty($query) ) :
  foreach ( $query as $q ) :

    //ループの中身

  endforeach;
  wp_reset_postdata();
endif;

WP_Queryとの違いとしては、WP_Queryの方が細かい条件の指定ができたり融通が効くことが多いです。
get_postsは結果だけが返ってくるのに対し、WP_Queryはインスタンスを扱うことになるので若干の差異があります。

個人的な使い分けとしては、管理画面ではget_postsを使います。
カスタムフィールドをSmart Custom Fieldsでコード定義して作る時なんかに、「あの投稿ページの一覧をセレクトボックスにしたいなー」とかっていうようなことがあります。そういう時はget_postsを使います。
理由としては、管理画面でWP_Queryを使うと、他のところに影響してタイトルが置き換わってしまったり、何かとバグることが多いからです。

テンプレートで使うことはあまりないですが、get_postsの方が書き味はいいかもしれません。

記事一覧（メインクエリ）

pre_get_postsで各ページのループを制御します。

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

  //記事の表示数
  $post_per_page = 12;

  //投稿者ページ
  if ($query->is_author()) {
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
    return;
  }

  //カテゴリー
  if ($query->is_category()) {
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
    return;
  }

  //タグ
  if ($query->is_tag()) {
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
    return;
  }

  //検索結果
  if ($query->is_search()) {
    $query->set('post_type', ['post']);
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
  }

  //年月アーカイブ
  if ($query->is_date()) {
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
  }

  //投稿一覧
  if ($query->is_archive()) {
    $query->set('posts_per_page', $post_per_page);
    $query->set('orderby', 'date');
    $query->set('order', 'DESC');
    return;
  }

}
add_action('pre_get_posts', 'custom_query');

ちなみに投稿一覧をarchive.phpで扱う場合はfunctions.phpに以下を追記してパーマリンクを更新するとできます。

//投稿一覧ページの作成
function post_has_archive( $args, $post_type ) {

  if ( 'post' == $post_type ) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'blogs'; // /blogs/が投稿アーカイブページになる
  }
  return $args;

}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

blogsは任意で変更してください。これでテーマ内にarchive.phpを置くと投稿一覧を取得でき、pre_get_postsで制御できます。

メインクエリの記事取得

あとはcategory.phpやauthor.phpなどのテンプレートを作ってメインループを回すだけです。single.phpも同じですね。

if ( have_posts() ) :
　while ( have_posts() ) :
    the_post();

    //ループの中身

  endwhile;
endif;

カテゴリー一覧

//カテゴリ全取得
$cat_args = [
  'orderby'    => 'menu_order',
  'hide_empty' => 0
];
$categories = get_categories($cat_args);
if(!empty($categories)){
  foreach( $categories as $category ) {
      $cat_id   = $category->cat_ID;
      $cat_link = get_category_link($cat_id);
      $cat_name = $category->cat_name;
      $cat_slug = $category->slug;
  }
}

タグ一覧

//タグ一覧
$tags = get_tags([
  'orderby' => 'count'
]);
if(!empty($tags)){
  foreach($tags as $tag) {
    //タグID
    $tag_id = $tag->term_id;
    //タグページへのリンク
    $tag_link = get_tag_link($tag_id);
    //タグ名
    $tag_name = $tag->name;
  }
}

投稿者一覧

$exclude_users = is_author() ? [$author] : [];
$author_args = [
  'orderby' => 'registered',
  'exclude' => $exclude_users
];
$author_query = new WP_User_Query( $author_args );

if(!empty($author_query->results)){
  foreach ($author_query->results as $author){
    //投稿者ID
    $author_id = $author->ID;
    //投稿者ニックネーム
    $author_name = $author->user_nicename;
    //投稿者ページリンク
    $author_link = get_author_posts_url($author_id);
  }
}

さいごに

とりあえず基本的なものを載せました。これで過去のコード引っ張り出したりいろんなページを見なくても済むかな。多少は。笑

このページはもうちょっと複雑な具体例とかも随時追記していきます！

記事一覧

RELATED

inoue
TIPS

【CSS + JS】テキストの無限ループアニメーション

  • JS
  • CSS
inoue
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

  • Shopify
inoue
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

  • PhotoSwipe
  • JS
inoue
TIPS

gulpでjpg・pngからAVIF画像を生成する

  • AVIF
  • WebP
  • gulp
  • WordPress
inoue
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe（v5）+Swiper（v8）連携]

  • MutationObserver
  • PhotoSwipe
  • Swiper
  • JS
inoue
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

  • GoogleSpreadSheet
  • API

NEW POSTS

inoue
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

  • GA4
  • Simple GA Ranking
  • php
  • WordPress
inoue
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

  • Netlify
  • Nuxt.js
inoue
TIPS

【PHP】Google Business Profile APIを使ってクチコミを取得する

  • API
  • Google Business Profile
  • php
inoue
TRY

スクリーンショットのAPI「screendot」を使ってみた

  • API
  • php
  • WordPress
inoue
TIPS

【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定

  • JS
  • CSS
inoue
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

  • lax.js
  • パララックス
  • JS
ブログ記事一覧
  • HOME
  • TIPS
  • 【WordPress】テーマ作成に使うテンプレートタグを集めました