WordPressでよく使う関数スニペットまとめ

WordPressでよく使う関数スニペットまとめ

SHARE

みなさんこんにちは、ゆうやです！

本記事は、フリーランスで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の先頭に記述するやつ

style.css
/*
Theme Name: テーマの名前
*/

固定ページ用のテンプレートファイル先頭に記述するやつ

page-company.php
<?php
/*
 * Template Name: テンプレート名
 */
?>

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(); ?>
<!-- 例①jQuery -->
<script src="<?= get_template_directory_uri(); ?>/resources/scripts/jquery-3.3.1.min.js"></script>
<!-- 例②CSS -->
<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; ?>
<!-- 固定ページのとき（例はaboutページ） -->
<?php if(is_page('about')): ?>
<?php endif; ?>
<!-- 記事ページのとき -->
<?php if ( is_single() ) : ?>
<?php endif; ?>
<!-- アーカイブページのとき（例はcastアーカイブ） -->
<?php if ( is_archive('cast')) : ?>
<?php endif; ?>
<!-- カスタム投稿詳細ページのとき（例はcast） -->
<?php if ( is_singular('cast')): ?>
<?php endif; ?>
<!-- 404ページのとき -->
<?php if ( is_404() ) : ?>
<?php endif; ?>

キャッシュ対策

これも大変お世話になっておりますスニペットです！

クライアントから指摘された修正点を修正して反映した際に、「え、直ってないんですけど？」と言われることがあり悩まされていた頃に出会った友です。

下記をcss・jsファイルの末尾に追加することでタイムスタンプが出力されるのでブラウザのキャッシュを削除してもらわなくても反映を確認することができます。

header.php
//css・jsファイルの末尾に追加する
?var=<?= time() ?>

トップページのURLを取得する

ヘッダーの「ロゴ」や、ナビゲーションメニュー内の「TOP」というテキストに、トップページへのリンクを貼る場合があると思います。

そういう場合にお世話になるのが以下のテンプレートタグです。

header.php
<!--トップページ -->
<?php echo esc_url( home_url( '/' ) ); ?>

また、上記を使用して下層ページへのURLも取得可能です。これまた多用するでしょう。

header.php
<!--下層ページ -->
<!-- ■aboutページ -->
<?php echo esc_url( home_url( '/about/' ) ); ?>
<!-- ■serviceページ -->
<?php echo esc_url( home_url( '/service/' ) ); ?>
<!-- ■newsページ -->
<?php echo esc_url( home_url( '/news/' ) ); ?>
<!-- ■accessページ -->
<?php echo esc_url( home_url( '/access/' ) ); ?>
<!-- ■recruitページ -->
<?php echo esc_url( home_url( '/recruit/' ) ); ?>
<!-- ■contactページ -->
<?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
<!-- 2020.09.08形式で年月日表示 -->
<?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(); ?>

テンプレートファイルでheader.php/footer.phpを読み込む

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
<!-- 投稿タイプpostの記事を9件表示させる -->
<?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.php
add_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(). "')": "#bbb"?> no-repeat center; background-size: cover;"></div>

記事詳細のページネーション

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
<!-- デフォルトの矢印をアイコンに変更させているVer -->

<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>

the_posts_paginationで出力されるhtml

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 {   /*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.php
add_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; //Newを表示させる日数
     $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
<!-- Twitter -->
<a href="https://twitter.com/share?url=<?= get_the_permalink() ?>&text=<?= get_the_title() ?>" target="_blank"></a>
<!-- Facebook -->
<a href="https://www.facebook.com/share.php?u=<?= get_the_permalink() ?>" target="_blank"></a>

まとめ

いかがでしたでしょうか。

大量に思いつく限りWordPressでよく使うスニペットを紹介させていただきました。

今後も思いついたら追記していく予定ですのでお楽しみに！

それでは最後までご高覧いただきありがとうございました！！

前の記事

Contact Form 7で自動挿入されるpタグを削除する方法【cssが効かない!?】
Contact Form 7で自動挿入されるpタグを削除する方…

次の記事

【SANGOカスタマイズ】記事一覧グリッドのカードにユーザー名…