こんにちは、たつきです。
WordPress制作歴は3年ほどです。
本記事ではWordPress制作に頻出なテンプレートタグを解説していきます。テンプレートタグは沢山ありますが、よく使うものは限られているので、まずはそこをキッチリと学習していきましょう。
テンプレートタグとは?
WordPress制作をしていく上で欠かせないモノですので、WordPress制作をしている方や現在WordPressを学習している方は参考にしてみてください。
【頻出】よく使う便利なテンプレートタグ一覧【WordPress】
下記のようなジャンルに分けて解説していきます。
- テンプレート系
- サイト情報系
- 記事情報系
ザックリこんな感じに分けました。
順番に解説していきます。
テンプレート系
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
テンプレートを呼び出したりする時に使用するタグです。
get_header()
get_header()<!-- header.phpを読み込む --> <?php get_header(); ?> <!-- header-work.phpを読み込む --> <?php get_header('work'); ?>
テーマ内に作成したheader.phpを読み込みます。
header-work.phpなど個別のファイルを読み込む場合は引数に名前を指定する事で読み込む事ができます。(今回の場合はwork)
※テンプレート系のタグは使い方が同じですので以後省略していきます。
get_footer()
get_footer()<!-- footer.phpを読み込む --> <?php get_footer(); ?> <!-- footer-work.phpを読み込む --> <?php get_footer(‘work'); ?>
テーマ内に作成したfooter.phpを読み込みます。
get_sidebar()
get_sidebar()<!-- sidebar.phpを読み込む --> <?php get_sidebar(); ?> <!-- sidebar-work.phpを読み込む --> <?php get_sidebar(‘work'); ?>
テーマ内に作成したsidebar.phpを読み込みます。
get_search_form()
get_search_form()<!-- searchform.phpを読み込む --> <?php get_search_form(); ?>
テーマ内に作成したsearchform.phpを読み込みます。
searchform.phpとは検索欄のformのテンプレートです。このブログだと下記の部分です。
独自のフォームをsearchform.phpで作った場合はそのファイルを読み込みます。作っていない場合はデフォルトのフォームが読み込まれます。
get_template_part()
get_template_part()<!-- original.phpを読み込む --> <?php get_template_part('original'); ?> <!-- original-work.phpを読み込む --> <?php get_template_part('original','work'); ?>
独自のオリジナルのテンプレートファイルを読み込む時に使います。
今回は独自のoriginal.phpとoriginal-work.phpというファイルを作って、それらを読み込んでいます。上記のコードを見ると分かりやすいですが、引数にファイルのスラッグと名前を指定して読み込んでいます。
サイト情報系
- bloginfo()
- home_url()
- wp_nav_menu()
- the_custom_logo()
- get_template_directory_uri()
サイトの情報などを扱うタグです。
bloginfo()
bloginfo()<!-- サイトのタイトルを表示 --> <?php bloginfo('name'); ?> <!-- サイトのキャッチフレーズを表示 --> <?php bloginfo('description'); ?>
管理画面で設定した「サイトタイトル」と「サイトのキャッチフレーズ」を出力する事ができます。この他にも使える機能はありますが、非推奨のモノが多いので上記の2つだけ覚えておけばOKです。
home_url()
home_url()<!-- サイトのURLを表示 --> <?php echo home_url(); ?>
管理画面で設定したサイトのトップページのURLを表示させる事ができます。
wp_nav_menu()
wp_nav_menu()<!-- カスタムメニューを表示 --> <?php wp_nav_menu(array( 'theme_location' => 'global-menu', 'menu_class' => 'nav_container', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>' )); ?>
管理画面で作成したカスタムメニューを表示させます。
カスタムメニューの作り方は下記の記事で解説しているので参考にどうぞ。
the_custom_logo()
the_custom_logo()<!-- カスタムロゴを表示 --> <?php the_custom_logo(); ?>
管理画面で設定したカスタムロゴが表示されます。
カスタムロゴの作り方は下記の記事で解説しているので参考にどうぞ。
get_template_directory_uri()
get_template_directory_uri()<!-- テーマディレクトリまでのパスを出力 --> <img src="<?php echo get_template_directory_uri(); ?>/images/sample.png" alt="sample">
使用しているテーマディレクトリ内のファイルを読み込む時に使用します。
上記ではテーマディレクトリにある、imagesという画像フォルダのsample.pngを読み込んでいます。
WordPressでパスを指定する時に使用する事が多いです。便利です。
記事情報系
- the_title()
- the_excerpt()
- the_content()
- the_permalink()
- the_time()
- the_category()
- the_tags()
- the_author()
- has_post_thumbnail()
- the_post_thumbnail()
記事の情報を扱うタグです。
原則ループ内でのみ使用します。
the_title()
the_title()<!-- 記事のタイトルを表示 --> <?php the_title(); ?>
現在の記事を表示します。
the_excerpt()
the_excerpt()<!-- 記事の抜粋を表示 --> <?php the_excerpt(); ?>
現在の記事の抜粋を表示します。
投稿画面で設定した抜粋を表示します。設定していない場合は最初の55字を表示
the_content()
the_content()<!-- 記事の内容を表示 --> <?php the_content(); ?>
現在の記事の内容を表示します。
投稿画面で作成した記事内容を表示します。主にsingle.phpで使います。
the_permalink()
the_permalink()<!-- 記事のURLを表示 --> <?php the_permalink(); ?>
現在の記事のURLを表示する。
aタグなどに設定する事が多いです。
the_time()
the_time()<!-- 記事の公開日時を表示 --> <?php the_time(); ?>
記事を公開した日付を表示します。
日付の表示形式は管理画面で設定したものが表示されます。
上手く表示されない場合は下記のように書くと表示されます。
the_time()<?php the_time( get_option('date_format') ); ?>
僕は上記のコードを使用するようにしています。
the_category()
the_category()<!-- 記事のカテゴリーを表示 --> <?php the_category(); ?>
記事のカテゴリーを表示します。
複数のカテゴリーがある場合は、ulタグを使って表示されます。
通常はハイパーリンク付きで表示されますが、不要な場合がありますよね。そういう場合は下記のコードを使う事がでリンクなしでカテゴリーを表示する事ができます。
the_category()<!-- リンクなしカテゴリーを表示 --> <?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>
好みや状況に合わせて使い分けてみてください。
the_tags()
the_tags()<!-- 記事のタグを表示 --> <?php the_tags(); ?>
記事のタグを表示します。
複数のタグがありカンマなどで区切りたい場合は下記のようにコードを書きます。
the_tags()<!-- カンマで区切る --> <?php the_tags('Tags:' , ','); ?>
Tagsの部分はタグの前に表示する語句です。
Tags以外にもできますので、好きな語句を入れる事ができます。
the_author()
the_author()<!-- 作成者を表示 --> <?php the_author(); ?>
管理画面に設定してある名前が表示されます。
has_post_thumbnail() / the_post_thumbnail()
- has_post_thumbnail():アイキャッチ画像があるかどうかを判定
- the_post_thumbnail():アイキャッチ画像を表示する
アイキャッチ画像に使うタグになります。
セットで使う事が多いので一緒に解説します。
HTML<!-- アイキャッチ画像があれば表示する --> <?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?>
has_post_thumbnail()でアイキャッチ画像が設定されているかを判定して、あれば表示するというコードになります。頻出ですね。
これ以外にテンプレートタグは沢山あります。
本記事で紹介したテンプレートタグは一部です。
これ以外にはあり、使い方も沢山ありますので、WordPress制作をしていく中で少しづつ覚えていきましょう。
全てのテンプレートタグを確認したいという方は下記の記事で詳しく解説されているので確認してみてください。