みなさんこんにちは、ゆうやです!
本記事は、フリーランスでWebサイト制作を生業としている筆者が業務の中で必ずと言っていいほど使用するCMS、「WordPress」でよく使用する関数スニペットやテンプレートタグをいつでもコピペで使えるようまとめたものです!
以前、Quitaの限定公開でまとめ集を作った際、仕事仲間からの反響が大きかったため今回改めて記事にすることにしました。
僕と同じくWordPressを愛する方々が同じようなことがあったときのお役に立てれば幸いです!
それでは参りましょう。
文字コードの表示
サイトで使用している文字コード(UTF-8)を表示してくれます。
header.php<meta charset="<?php bloginfo( 'charset' ); ?>">
サイトのタイトルを表示
サイトのタイトルを表示してくれます。
トップページ以外では、「ページ名 | サイトタイトル」の形式で表示されます。
header.php<title>
<?php if(!is_front_page()) {
wp_title('|', true, 'right');
}
bloginfo('name'); ?>
</title>
style.cssの先頭に記述するやつ
固定ページ用のテンプレートファイル先頭に記述するやつ
page-company.php<?php
?>
head閉じタグ直前で使うやつ wp head
head閉じタグ直前で使う呪文です。
どうやらこいつがいないとWordPressが用意してくれている様々なhtmlがhead内に出力されなくなってしまうようなので必ず入れましょう笑
header.php<?php wp_head(); ?>
body閉じタグ直前で使うやつ wp footer
はい、さっきの呪文のお仲間です。</body>の直前に必ず配置してあげましょう。
footer.php<?php wp_footer(); ?>
テンプレートディレクトリのURLを取得する
cssやjsファイルのパスを通すために頻繁に使うやつです。
まじでこの子は必ず使ってますがちょいと記述が長いので覚えられませんで笑
コピペでどうぞ!
header.php<?= get_template_directory_uri(); ?>
<script src="<?= get_template_directory_uri(); ?>/resources/scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/index.css">
条件分岐タグ is front page…
この子らもよーーく使わせていただいてますね〜
ページごとに読み込むcssファイルを分けたい時に必須です!!
header.php
<?php if(is_front_page()): ?>
<?php endif; ?>
<?php if(is_page('about')): ?>
<?php endif; ?>
<?php if ( is_single() ) : ?>
<?php endif; ?>
<?php if ( is_archive('cast')) : ?>
<?php endif; ?>
<?php if ( is_singular('cast')): ?>
<?php endif; ?>
<?php if ( is_404() ) : ?>
<?php endif; ?>
キャッシュ対策
これも大変お世話になっておりますスニペットです!
クライアントから指摘された修正点を修正して反映した際に、「え、直ってないんですけど?」と言われることがあり悩まされていた頃に出会った友です。
下記をcss・jsファイルの末尾に追加することでタイムスタンプが出力されるのでブラウザのキャッシュを削除してもらわなくても反映を確認することができます。
header.php
?var=<?= time() ?>
トップページのURLを取得する
ヘッダーの「ロゴ」や、ナビゲーションメニュー内の「TOP」というテキストに、トップページへのリンクを貼る場合があると思います。
そういう場合にお世話になるのが以下のテンプレートタグです。
header.php
<?php echo esc_url( home_url( '/' ) ); ?>
また、上記を使用して下層ページへのURLも取得可能です。これまた多用するでしょう。
header.php
<?php echo esc_url( home_url( '/about/' ) ); ?>
<?php echo esc_url( home_url( '/service/' ) ); ?>
<?php echo esc_url( home_url( '/news/' ) ); ?>
<?php echo esc_url( home_url( '/access/' ) ); ?>
<?php echo esc_url( home_url( '/recruit/' ) ); ?>
<?php echo esc_url( home_url( '/contact/' ) ); ?>
指定ページの指定箇所へのリンクを貼る
先程のテンプレートタグを使用します。
使用するシチュエーションとして考えられるのは例えば、以下でしょう。
- トップのServiceセクションで3つの事業を紹介していて
- それぞれに下層のServiceページの該当箇所へと遷移する「MORE」ボタンを設置している
そういう場合に役立つのがこちら!
front-page.php<?php echo esc_url( home_url( '/service/#service01' ) ); ?>
<a href="<?php echo esc_url( home_url( '/service/#service01' ) ); ?>">MORE</a>
<a href="<?php echo esc_url( home_url( '/service/#service02' ) ); ?>">MORE</a>
<a href="<?php echo esc_url( home_url( '/service/#service03' ) ); ?>">MORE</a>
記事タイトルを表示
あまり意識していませんでしたが、ループの中でしか使用できないものらしいです。
当たり前か笑
single.php<?php the_title(); ?>
記事公開年月日を表示
記事を表示する際に「記事タイトル表示」のテンプレートタグとセットで使うことが多いです。
single.php
<?php echo the_time('Y.m.d'); ?>
記事のパーマリンク取得
前述の2つのテンプレートタグでセットで使うことが多いです。記事トリオですね。
archive.php<?php the_permalink(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
記事本文を表示
single.php<?php the_content(); ?>
記事本文抜粋を表示
これを使うと記事の先頭から110文字抜粋され、末尾に[…]が表示されます。
front-page.php<?php the_excerpt(); ?>
WordPressの場合、サイト全体の共通のヘッダー部分とフッター部分はそれぞれ「header.php」「footer.php」というように別ファイルとして作成することが多いです。
その際、テンプレートファイルで上記2ファイルを読み込むスニペットがこちらです。
front-page.php<?php get_header(); ?>
<?php get_footer(); ?>
WordPressメインループ
記事詳細ページで記事を表示する際に使用するメインループのスニペットです。
single.php<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
この間に記事コンテンツ表示のhtml等を入れる
<?php endwhile; ?>
<?php endif; ?>
WordPressサブループ
記事一覧を任意のページで表示させたい場合に使用するサブループのスニペットです。
page-news.php
<?php
$args = array(
'post_type' => "post",
'posts_per_page' => 9,
);
$my_query = new WP_Query($args);
if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
表示するコンテンツを入れる
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
サブループ内で記事連番を出力
front-page.php<?php echo $the_query->current_post + 1; ?>
PC・スマホで条件分岐
たまにお世話になります。
front-page.php<?php if ( wp_is_mobile() ) : ?>
スマホのときに表示させたい内容
<?php else: ?>
PCのときに表示させたい内容
<?php endif; ?>
<?php if ( wp_is_mobile() ) : ?><?php else: ?>PCのときに表示させたい内容<?php endif; ?>
投稿サムネイル(アイキャッチ画像)を有効化
こちらは必ずfunctions.phpファイルに記述してください。
functions.phpadd_theme_support('post-thumbnails');
カテゴリー、タグページで該当のカテゴリー、タグを表示
ブログでよく使われるあれです。

category.php<?php single_cat_title(); ?>
<h2>「<?php single_cat_title(); ?>」の記事一覧</h2>
background:urlに任意の画像URL指定
画像の比率を保つためいつもpadding-top:〇〇%を使っている方向けです。
front-page.php<div class="ImgBox">
<div class="ImgBox-Img" style="background:url('<?= get_template_directory_uri(); ?>/resources/images/index-item.jpg') no-repeat;background-size:cover;background-position:center;"></div>
</div>
background:urlにアイキャッチ画像URLを指定
もしかしたら指定方法間違ってるかもしれないのでその時は教えていただけると幸いです(^o^)
single.php<div class="ImgBox">
<div class="ImgBox-Img" style="background: url('".get_the_post_thumbnail_url()."') no-repeat; background-size: cover; background-position:center;"></div>
</div>
記事サムネイル表示、無い場合は灰色表示
single.php<div style="background: <?php echo (get_the_post_thumbnail_url()) ? "url('".get_the_post_thumbnail_url(). "')": "
記事詳細のページネーション
single.php
<?php previous_post_link('%link', '%title', TRUE, ''); ?>
<?php next_post_link('%link', '%title', TRUE, ''); ?>
<?php previous_post_link('%link', '<i class="fas fa-caret-left"></i>Back', TRUE, ''); ?>
<?php next_post_link('%link', 'Next<i class="fas fa-caret-right"></i>', TRUE, ''); ?>
特定のタグの記事一覧表示
front-page.php<div class="Card">
<?php
$args = array(
'posts_per_page' => -1,
'tag' => 'タグのスラッグ'
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
// ループさせるコンテンツ
<a href="<?php the_permalink(); ?>" class="Card-Item">
<div class="Card-Item-ImgBox">
<div class="Card-Item-ImgBox-Img" style="background:url('<?= get_template_directory_uri(); ?>/〇〇.png') no-repeat center;background-size:cover;"></div></div>
<h2 class="Card-Item-Title"><?php the_title(); ?></h2>
</a>
<?php endwhile; endif;
wp_reset_postdata(); ?>
</div>
タグテンプレートで記事一覧表示
tag.php <?php
$posttags = get_the_tags();
$args = array(
'posts_per_page' => 12,
'tag' => single_tag_title("", false),
);
$my_query = new WP_Query($args);
?>
<?php if ($my_query->have_posts()): ?>
<?php while ($my_query->have_posts()): $my_query->the_post(); ?>
コンテンツ
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>
記事一覧ページのページネーション
page-news.php
<article class="PaginationSection">
<section class="PaginationWrap">
<?php
$GLOBALS['wp_query']->max_num_pages = $the_query->max_num_pages;
the_posts_pagination( array(
'prev_text' => '<i class="fas fa-caret-left"></i>',
'next_text' => '<i class="fas fa-caret-right"></i>',
) );
?>
</section>
</article>
page-news.php<nav class="navigation pagination" role="navigation">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<a class="prev page-numbers" href="http://localhost/minimalist/">前へ</a>
<a class="page-numbers" href="http://localhost/minimalist/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="http://localhost/minimalist/page/3/">3</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://localhost/minimalist/page/8/">8</a>
<a class="next page-numbers" href="http://localhost/minimalist/page/3/">次へ</a>
</div>
</nav>
ページネーションのスタイリング
style.css.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.PaginationSection{
margin-bottom: 24px;
}
.PaginationGroup{
display: flex;
justify-content: space-between;
}
.PaginationGroup__Item.current{
border: none;
background: #36CACA;
color: #fff;
}
.PaginationGroup__Item{
margin-left: 8px;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #eee;
border-radius: 4px;
color: #36CACA;
font-size: 1.4rem;
}
.PaginationGroup__Item:first-child,
.PaginationGroup__Item:last-child,
.PaginationGroup__Item.dots{
border: none;
}
@media screen and (min-width: 768px) {
.PaginationGroup__Item{
margin-left: 15px;
width: 45px;
height: 45px;
}
}
ページネーションデフォルトのaタグに任意のクラス付与
functions.phpadd_filter( 'previous_post_link', 'add_prev_post_link_class' );
function add_prev_post_link_class($output) {
return str_replace('<a href=', '<a class="Prev" href=', $output);
}
add_filter( 'next_post_link', 'add_next_post_link_class' );
function add_next_post_link_class($output) {
return str_replace('<a href=', '<a class="Next" href=', $output);
}
記事一覧でNewマークを表示
page-news.php<?php
$post_time = get_the_time('U');
$days = 3;
$last = time() - ($days * 24 * 60 * 60);
if ($post_time > $last) {
echo '<span class="New">New</span>';
}
?>
テンプレートファイルにショートコード直書き
お問い合わせフォームでお馴染みのプラグイン「Contact Form 7」で作成したフォームのショートコードをテンプレートファイルに直書きしたい場合に使用したことがあります。
page-contact.php<?php echo do_shortcode('[ショートコード]'); ?>
<?php echo do_shortcode('[contact-form-7 id="1" title="お問い合わせ"]'); ?>
記事SNSシェア
single.php
<a href="https://twitter.com/share?url=<?= get_the_permalink() ?>&text=<?= get_the_title() ?>" target="_blank"></a>
<a href="https://www.facebook.com/share.php?u=<?= get_the_permalink() ?>" target="_blank"></a>
まとめ
いかがでしたでしょうか。
大量に思いつく限りWordPressでよく使うスニペットを紹介させていただきました。
今後も思いついたら追記していく予定ですのでお楽しみに!
それでは最後までご高覧いただきありがとうございました!!