Weblasts

覚えておきたいWPテンプレートタグまとめ

テンプレートタグとは?

WPにおいて何かを表示させたり、何かを取得したりするときに使うPHPで作られたWP専用の関数のことを指します

使い方はPHPの開始タグと閉じタグの間に書き込むだけ
ほとんどのテンプレートタグには()が付き()の中にはパラメータを入れて使います(パラメータは省略もできる)
※()自体は省略できない

テンプレートタグのひな型

<?php テンプレートタグ名();?>
<?php テンプレートタグ名(パラメータ);?>

覚えておきたいもの

これらのテンプレートタグや処理は必須のものになります

<?php wp_head();?>

headの閉じタグ直前に記述するテンプレートタグ。
プラグインに関するコードを出力してくれる。

<?php wp_footer();?>

bodyの閉じタグ直前に記述するテンプレートタグ。
プラグインに関するコードやアドミンバーを出力してくれる

<?php body_class();?>

body開始タグの中に入れるテンプレートタグ
ページやユーザーの状態に合ったクラスを出力してくれるのでページごとに装飾を変えたいときの足掛かりになる
パラメータに追加で出力したい文字列を入れることができる

書き方

<body <?php body_class();?>>

<?php bloginfo();?>

WPサイトの様々な情報を出力できるテンプレートタグ
出力内容はパラメータで指定する
※ パラメータは文字列扱いで頼む

パラメータ 出力内容
name 「設定」→「一般設定」サイトのタイトルを出力
description 「設定」→「一般設定」キャッチフレーズ・このサイトの簡単な説明を出力
admin_email 「設定」→「一般設定」メールアドレスを出力
個人情報は出力したくない
url 「設定」→「一般設定」サイトアドレス (URL)を出力
wpurl 「設定」→「一般設定」WordPress アドレス (URL)を出力
stylesheet_directory スタイルシートディレクトリのURLを出力
stylesheet_url スタイルシートのURLを出力
template_directory テンプレートファイルディレクトリのURLを出力
template_url テンプレートのURLを出力
atom_url AtomフィードのURLを出力
rss2_url RSS2.0フィードのURLを出力
rss_url RSS0.92フィードのURLを出力
pingback_url ピンバックのURLを出力
rdf_url RDF/RSS1.0フィードのURLを出力
comments_atom_url コメントのAtomフィードのURLを出力
comments_rss2_url コメントのRSS2.0フィードのURLを出力
charset 文字コードを出力
html_type メディアタイプを出力
language 言語を出力(ja)
text_direction 設定されているテキストの向きを出力
version WordPressのバージョンを出力

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

<?php
endwhile;
endif;
?>

ループと呼ばれる設定を行うためのテンプレートタグ群
メインクエリで取得したデータを正常に出力するために使う

<?php wp_title(); ?>

表示ページのタイトルを自動的に出力してくれるテンプレートタグ
[bloginfo()]と組み合わせてtitle要素内で使う

デフォルトのまま使うと記事タイトルの右側に区切り文字として「》」が出てくるので変えたい場合はオプションから調整する
書き方

<?php wp_title('区切り文字', true, 'left or right'); ?>

<?php get_stylesheet_uri();?>

テーマフォルダ直下にある「style.css」までの絶対パスを取得するテンプレートタグ
link要素内のhref属性の中に出力する

書き方

<link rel="stylesheet" href="<?php get_stylesheet_uri();?>">

<?php get_template_directory_uri();?>

テーマフォルダまでの絶対パスを取得するテンプレートタグ
style.css以外のCSSやJSファイル・imgファイルを読み込むときに使う
※あくまでもテーマフォルダまでなので、このテンプレートタグの後は「/」記号を付けて使う

よくある間違い

//このような書き方だとうまく表示できない
<img src="<?php echo get_template_directory_uri();?>○○.jpg" alt="">
//ソースを見てみるとthemeフォルダにつながった状態でファイル名が出力されてしまう
正しい書き方

//下記のようにテンプレートタグの直後に「/」を入れてフォルダ内に入ってあげましょう
<img src="<?php echo get_template_directory_uri();?>/○○.jpg" alt="">

<?php home_url();?>

トップページのURLを取得するテンプレートタグ
トップへのリンクはいろいろなところに出力するのではないかな?

<?php get_permalink();?>

パラメータにIDを入れるとそのIDのページURLを取得できるテンプレートタグ

投稿個別ページや固定ページで使うテンプレートタグ

<?php post_class();?>

ループ内で記事全体を囲んだ要素に付けるテンプレートタグでページやユーザーの状態に合ったクラスを出力してくれます
パラメータに追加で出力したい文字列を入れることなんかもできる

<?php the_title();?>

記事のタイトルを出力するテンプレートタグ

<?php the_content();?>

記事の本文を出力するテンプレートタグ

<?php the_author();?>

記事の投稿者名を出力するテンプレートタグ

<?php the_category();?>

記事が属するカテゴリーをリンク付きの箇条書きリストで出力するテンプレートタグで、リンクの移動先はカテゴリー別の一覧ページになってます
パラメータには区切り文字を指定できて、区切り文字を指定すると箇条書きリストは解除されて、ただのリンクになります

<?php the_tags();?>

記事につけられたタグをリンク付きで出力
タグというラベルが自動で出力されカンマ区切りに出力される

<?php get_the_date();?>

記事の投稿日を取得
取得する形式はパラメータで指定できる
よく使うものは「(‘Y-m-d’)」

<?php previous_post_link(‘%link’, ‘表示したい形 + %title’); ?>

前の記事へのリンク文字列を出力する
一つ目のパラメータは固定
二つ目のパラメータは表示したい形式にする。この時[%title]がリンク文字列に置き換わる

<?php next_post_link(‘%link’, ‘表示したい形 + %title’); ?>

次の記事へのリンク文字列を出力する
一つ目のパラメータは固定
二つ目のパラメータは表示したい形式にする。この時[%title]がリンク文字列に置き換わる

サイドバーで使えるもの

register_sidebar();

functions.phpに記述するウィジェット機能を有効にする

<?php dynamic_sidebar();?>

登録したウィジェットを出力するテンプレートタグ 各項目はli要素に囲まれた状態で出力されるのでテンプレートタグはulタグで囲んでおく

ウィジェットを使わずカテゴリー一覧のリンクを出したいとき

カテゴリー一覧を取得

<?php
// パラメータを指定どちらかのパラメータを入れてね
$args = array(
'orderby' => 'count',// 記事数順で指定ならこのパラメータ
'order' => 'DSC'// 降順で指定ならこのパラメータ
);
//カテゴリー情報を取得して配列にしまう
$categories = get_categories( $args );
?>
<?php foreach( $categories as $category ):?>
<li><a href="<?=get_category_link( $category->term_id );?>"> <?=$category->name;?>  </li>
<?php endforeach;?>

カスタム系で使えるもの

<?php get_post_meta(post->ID,フィールド名,true);?>

カスタムフィールドの内容を取得するテンプレートタグ

the_field(フィールド名);

Advanced Custom Fileds専用の関数 指定したカスタムフィールドの内容を出力する

get_field(フィールド名);

Advanced Custom Fileds専用の関数 指定したカスタムフィールドの内容を取得する

functions.phpに入れて使うフック関係

コピペ推奨

投稿ページの本文入力欄を消す

投稿ページの本文入力欄を消す

add_action( 'init' , 'my_remove_post_editor_support' );
function my_remove_post_editor_support() {
remove_post_type_support( 'post', 'editor' );
}

固定ページの本文入力欄を消す

固定ページの本文入力欄を消す

add_action( 'init' , 'my_remove_post_editor_support' );
function my_remove_post_editor_support() {
remove_post_type_support( 'page', 'editor' );
}

アイキャッチ画像を利用する

アイキャッチを有効化

add_theme_support( 'post-thumbnails' );

記事のpタグを出力しない

記事の本文からpタグを消す

remove_filter('the_content', 'wpautop');

抜粋のpタグを出力しない

抜粋のpタグ

remove_filter('the_excerpt', 'wpautop');

imgを勝手に囲うpタグだけををどうにかする

pタグを消す

function remove_p_on_images($content){
return preg_replace('/

(\s*)()(\s*)<\/p>/iU', '\2', $content); } add_filter('the_content', 'remove_p_on_images');

特殊文字がsvg画像に自動変換される機能を無効にしたい

自動変換させない

function disable_emoji() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_emoji' );

一覧系のページで使えるもの

<?php the_post_thumbnail();?>

アイキャッチ画像を出力するテンプレートタグで サイズはパラメータで指定する

パラメータ画像サイズ
thumbnailサムネイルサイズ
medium中サイズ
large大サイズ
fullフルサイズ

<?php single_cat_title();?>

カテゴリーページでカテゴリー名を出力するテンプレートタグ。 カテゴリーページ以外では何も出力しない。ループの外で使う。

<?php the_excerpt();?>

投稿の抜粋を表示するテンプレートタグでループ内で強制的に抜粋を表示するときに使用します。 WP Multibyte Patchのプラグインが有効になっていればデフォルトで110文字まで(フィルターフックで変更可能)の抜粋文が表示される。
カスタマイズはfunctions.phpで頼む

抜粋文関係

//抜粋文を短くする
function my_length($length) {
return 何文字にするかを数値で;
}
add_filter('excerpt_mblength', 'my_length');

//[...]の部分の変更
function my_more( $more ) {
return '表示したい文字列・記号';
}
add_filter( 'excerpt_more', 'my_more' );

<?php if($wp_query->max_num_pages>1):?>
<?php endif;?>

記事などをリストアップするとき、1ページに収まらないときに使う条件分岐 ページャーを出したりするときに便利

<?php next_posts_link();?>

記事一覧が設定した数より多い場合に使うページャー 古い記事一覧ページへのリンクを出力する ループの外で使います ※指定できるパラメーターは一つだけなので注意

<?php previous_posts_pages();?>

記事一覧が設定した数より多い場合に使うページャーで ループの外で使います 新しい記事一覧ページへのリンクを出力する ※指定できるパラメーターは一つだけなので注意

サブループ

テンプレート内に自分好みのループを入れるならサブループ 流れは

  1. ループ用の設定を配列にまとめる
  2. 設定をWP_Queryに渡しつつ結果は変数に
  3. 変数の情報をループ内のテンプレートタグに渡してあげる
  4. ループの閉じ直後で投稿データをリセットする
サブループの書式

<?php
$args=[
'post_type'=>'post',//取得するデータの種類を投稿に指定
'posts_per_page'=>4//表示件数を4件に指定
];

$query=new WP_Query($args);

if($query->have_posts()):
while($query->have_posts()):
$query->the_post();
?>
DBから取得したデータを使った処理
<?php
endwhile;
endif;
wp_reset_postdata();// 投稿データのリセット
?>

設定で指定できるものはたくさんありますが、最低限この二つ

post_type 取得する記事の種類を指定
post・・・デフォルトの投稿機能
page・・・固定ページ
投稿タイプスラッグ・・・カスタム投稿
posts_per_page 何件表示するかを数値で指定

ページャーその②

ページャーを出力するテンプレートタグ
因みに
ここのブログはこんな感じで運用しています。

ページャー

<?php
the_posts_pagination(
(array(
'mid_size'=>2,
'prev_text'=>('Prev'),
'next_text'=>('Next'),
'screen_reader_text'=>(' ')
)
));
?>

あまり情報がないのでいろいろ試してもらうしかないですのですが一応使えそうなものを載せておきます。

ページャー

<?php
the_posts_pagination(
array(
'base'               => '%_%', // ちょっと良く分からない
'format'             => '?page=%#%', // ページネーションのパーマリンク構造
'total'              => '1', // 総ページ数
'current'            => '0', // 現在のページ番号
'show_all'           => 'false', // 全てのページを表示する。falseの場合は以下end_size, mid_sizeで指定
'end_size'           => '1', // ページ番号リストの両端に表示するページ数
'mid_size'           => '1', // 現在のページの両端に表示するページ数
'prev_next'          => true, // リスト内に「前へ」「後へ」のリンクを表示するかどうか。表示する場合はprev_text, next_textで指定
'prev_text'          => __( 'previous page', 'textdmain' ), // 前のページへ送るリンクテキスト
'next_text'          => __( 'next page', 'textdmain' ), // 後のページへ送るリンクテキスト
'type'               => 'plain', // 戻り値の指定 plain or list
'add_args'           => false, // 追加のクエリ引数の配列
'add_fragment'       => false, // リンクに付け加えるテキスト
'before_page_number' => '', // 各ページ番号の前に入れるテキスト
'after_page_number'  => '', // 各ページ番号の後に入れるテキスト
'screen_reader_text' => __( 'Post Navigation', 'textdmain' ), // スクリーンリーダー用のテキスト
)
);
?>

インクルードタグ

パーツテンプレートを読み込むタグはインクルードタグと呼ぶことが多いです ここで紹介しておきます

<?php get_header();?>

[header.php]を読み込むテンプレートタグ

<?php get_footer();?>

[footer.php]を読み込むテンプレートタグ

<?php get_sidebar();?>

[sidebar.php]を読み込むテンプレートタグ

<?php get_sidebar();?>

[sidebar.php]を読み込むテンプレートタグ

<?php comments_template();?>

[comments.php]を読み込むテンプレートタグ。コメントフォームの設置には

フォームを設置する

<?php comment_form(‘format=html5’);?>

投稿されたコメントを出力するには

コメント出力

<?php wp_list_comments();?>
※ 各コメントの項目はli要素で囲まれた状態で出力される

<?php get_search_form();?>

[searchform.php]を読み込むテンプレートタグ
WPデフォルトのものでいいのなら

searchform.phpを読み込み

<?php get_search_form(); ?>

これでも出力できますよ

<?php get_template_part(‘○○’);?>

独自に作ったテンプレート[○○.php]を読み込むテンプレートタグ
カスタムパーツテンプレートなどと呼ぶ

Recommend Post