覚えておきたいWPテンプレートタグまとめ
テンプレートタグとは?
WPにおいて何かを表示させたり、何かを取得したりするときに使うPHPで作られたWP専用の関数のことを指します
使い方はPHPの開始タグと閉じタグの間に書き込むだけ
ほとんどのテンプレートタグには()が付き()の中にはパラメータを入れて使います(パラメータは省略もできる)
※()自体は省略できない
1 2 |
<?php テンプレートタグ名();?> <?php テンプレートタグ名(パラメータ);?> |
覚えておきたいもの
これらのテンプレートタグや処理は必須のものになります
1 2 3 4 |
<?php wp_head();?> //headの閉じタグ直前に記述するテンプレートタグ。 //プラグインに関するコードを出力してくれる。 |
1 2 3 4 |
<?php wp_footer();?> //bodyの閉じタグ直前に記述するテンプレートタグ。 //プラグインに関するコードやアドミンバーを出力してくれる |
1 2 3 4 5 6 7 8 |
<?php body_class();?> //body開始タグの中に入れるテンプレートタグ //ページやユーザーの状態に合ったクラスを出力してくれるのでページごとに装飾を変えたいときの足掛かりになる //パラメータに追加で出力したい文字列を入れることができる //書き方 <body <?php body_class();?>> |
1 2 3 4 |
<?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のバージョンを出力 |
1 2 3 4 5 |
<?php if(have_posts()):while(have_posts()):the_post();?> <?php endwhile;endif;?> //ループと呼ばれる設定を行うためのテンプレートタグ群 //メインクエリで取得したデータを正常に出力するために使う |
1 2 3 4 5 6 7 8 |
<?php wp_title(); ?> //表示ページのタイトルを自動的に出力してくれるテンプレートタグ //bloginfo()と組み合わせてtitle要素内で使う //デフォルトのまま使うと記事タイトルの右側に区切り文字として「》」が出てくるので変えたい場合はオプションから調整する //書き方 <?php wp_title('区切り文字', true, 'left or right'); ?> |
1 2 3 4 5 6 7 |
<?php get_stylesheet_uri();?> //テーマフォルダ直下にある「style.css」までの絶対パスを取得するテンプレートタグ //link要素内のhref属性の中に出力する //書き方 <link rel="stylesheet" href="<?php get_stylesheet_uri();?>"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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=""> |
1 2 3 4 |
<?php home_url();?> //トップページのURLを取得するテンプレートタグ //トップへのリンクはいろいろなところに出力するのではないかな? |
1 2 3 |
<?php get_permalink();?> //パラメータにIDを入れるとそのIDのページURLを取得できるテンプレートタグ |
投稿個別ページや固定ページで使うテンプレートタグ
1 2 3 4 |
<?php post_class();?> //ループ内で記事全体を囲んだ要素に付けるテンプレートタグでページやユーザーの状態に合ったクラスを出力してくれます //パラメータに追加で出力したい文字列を入れることなんかもできる |
1 2 3 |
<?php the_title();?> //記事のタイトルを出力するテンプレートタグ |
1 2 3 |
<?php the_content();?> //記事の本文を出力するテンプレートタグ |
1 2 3 |
<?php the_author();?>> //記事の投稿者名を出力するテンプレートタグ |
1 2 3 4 5 |
<?php the_category();?> //記事が属するカテゴリーをリンク付きの箇条書きリストで出力するテンプレートタグ //リンクの移動先はカテゴリー別の一覧ページになってます //パラメータには区切り文字を指定できて、区切り文字を指定すると箇条書きリストは解除されて、ただのリンクになります |
1 2 3 4 |
<?php the_tags();?> //記事につけられたタグをリンク付きで出力 //タグというラベルが自動で出力されカンマ区切りに出力される |
1 2 3 4 5 |
<?php get_the_date();?> //記事の投稿日を取得 //取得する形式はパラメータで指定できる //よく使うものは「('Y-m-d')」 |
1 2 3 4 5 |
<?php previous_post_link('%link', '表示したい形 + %title'); ?> //前の記事へのリンク文字列を出力する //一つ目のパラメータは固定 //二つ目のパラメータは表示したい形式にする。この時[%title]がリンク文字列に置き換わる |
1 2 3 4 5 |
<?php next_post_link('%link', '表示したい形 + %title'); ?> //次の記事へのリンク文字列を出力する //一つ目のパラメータは固定 //二つ目のパラメータは表示したい形式にする。この時[%title]がリンク文字列に置き換わる |
サイドバーで使えるもの
1 2 3 |
register_sidebar(); //functions.phpに記述する</span>ウィジェット機能を有効にする |
1 2 3 4 |
<?php dynamic_sidebar();?> //登録したウィジェットを出力するテンプレートタグ //各項目はli要素に囲まれた状態で出力されるのでテンプレートタグはulタグで囲んでおく |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//ウィジェットを使わずカテゴリー一覧のリンクを出したいとき</h3> <?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;?> |
カスタム系で使えるもの
1 2 3 |
<?php get_post_meta(post->ID,フィールド名,true);?> //カスタムフィールドの内容を取得するテンプレートタグ |
1 2 3 4 |
the_field(フィールド名); //Advanced Custom Fileds専用の関数 //指定したカスタムフィールドの内容を出力する |
1 2 3 4 |
get_field(フィールド名); //Advanced Custom Fileds専用の関数 //指定したカスタムフィールドの内容を取得する |
functions.phpに入れて使うフック関係
コピペ推奨
1 2 3 4 5 6 |
//投稿ページの本文入力欄を消す add_action( 'init' , 'my_remove_post_editor_support' ); function my_remove_post_editor_support() { remove_post_type_support( 'post', 'editor' ); } |
1 2 3 4 5 6 |
//固定ページの本文入力欄を消す add_action( 'init' , 'my_remove_post_editor_support' ); function my_remove_post_editor_support() { remove_post_type_support( 'page', 'editor' ); } |
1 2 3 |
//アイキャッチ画像を利用する add_theme_support( 'post-thumbnails' ); |
1 2 3 |
//記事のpタグを出力しない remove_filter('the_content', 'wpautop'); |
1 2 3 |
//抜粋のpタグを出力しない remove_filter('the_excerpt', 'wpautop'); |
1 2 3 4 5 6 |
//imgを勝手に囲うpタグだけををどうにかする function remove_p_on_images($content){ return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content); } add_filter('the_content', 'remove_p_on_images'); |
1 2 3 4 5 6 7 8 9 10 11 12 |
//特殊文字が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' ); |
一覧系のページで使えるもの
1 2 3 4 |
<?php the_post_thumbnail();?> //アイキャッチ画像を出力するテンプレートタグで //サイズはパラメータで指定する |
パラメータ | 画像サイズ |
---|---|
thumbnail | サムネイルサイズ |
medium | 中サイズ |
large | 大サイズ |
full | フルサイズ |
1 2 3 4 |
<?php single_cat_title();?> //カテゴリーページでカテゴリー名を出力するテンプレートタグ。 //カテゴリーページ以外では何も出力しない。ループの外で使う。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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' ); |
1 2 3 4 5 |
<?php if($wp_query->max_num_pages>1):?> <?php endif;?></h3> //記事などをリストアップするとき、1ページに収まらないときに使う条件分岐 //ページャーを出したりするときに便利 |
1 2 3 4 5 6 |
<?php next_posts_link();?> //記事一覧が設定した数より多い場合に使うページャー //古い記事一覧ページへのリンクを出力する //ループの外で使います //※指定できるパラメーターは一つだけなので注意 |
1 2 3 4 5 6 |
<?php previous_posts_pages();?> //記事一覧が設定した数より多い場合に使うページャーで //ループの外で使います //新しい記事一覧ページへのリンクを出力する //※指定できるパラメーターは一つだけなので注意 |
サブループ
テンプレート内に自分好みのループを入れるならサブループ 流れは
- ループ用の設定を配列にまとめる
- 設定をWP_Queryに渡しつつ結果は変数に
- 変数の情報をループ内のテンプレートタグに渡してあげる
- ループの閉じ直後で投稿データをリセットする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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 | 何件表示するかを数値で指定 |
参考サイト
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
ページャー2 <?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' ), // スクリーンリーダー用のテキスト ) ); ?> |
インクルードタグ
パーツテンプレートを読み込むタグはインクルードタグと呼ぶことが多いです ここで紹介しておきます
1 2 3 |
<?php get_header();?> //header.phpを読み込むテンプレートタグ |
1 2 3 |
<?php get_footer();?> //footer.phpを読み込むテンプレートタグ |
1 2 3 |
<?php get_sidebar();?> //sidebar.phpを読み込むテンプレートタグ |
1 2 3 |
<?php get_sidebar();?> //sidebar.phpを読み込むテンプレートタグ |
1 2 3 4 5 6 7 |
<?php comments_template();?> comments.phpを読み込むテンプレートタグ。 //フォームを設置する <?php comment_form(‘format=html5’);?> |
1 2 3 4 |
<?php wp_list_comments();?> //投稿されたコメントを出力する //※ 各コメントの項目はli要素で囲まれた状態で出力される |
1 2 3 4 5 6 |
<?php get_search_form();?> //searchform.phpを読み込むテンプレートタグ //WPデフォルトのものでいいのなら <?php get_search_form(); ?> |
1 2 3 4 |
<?php get_template_part('○ ○');?> //独自に作ったテンプレート[○○.php]を読み込むテンプレートタグ //カスタムパーツテンプレートなどと呼ぶ |