WordPressテーマと作る時に必要なコードのサンプルをまとめてみた

WordPressで自作のテーマを作成する時に必要な大体のコードをサンプルとしてまとめました。

必要な部分はそのままコピペしてもいいですし、コードの書き方を参考にしても構いません。

 

ヘッダー(最低限)

header.phpのコピペ用コードです。最低限の記述しかしていませんが、header.phpの原型くらいにはなっていると思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?php if ( is_home() ) { ?>
  <?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>
<?php } else { ?>
  <?php wp_title( '' ); ?> | <?php bloginfo( 'name' ); ?>
<?php } ?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>">
</head>
<body <?php body_class(); ?>>
<div class="body-inner">

 

最後の行のbody-innerクラスは幅を狭めて中央寄せにするといった使い方ができると思います。

これを用意しておくと何かと便利なので、インナーとして作っておくといいでしょう。

 

ヘッダー

こちらはサイト名、キャッチフレーズ、検索ボックスなどがついたヘッダーです。同じくheader.phpにコピペします。

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?php if ( is_home() ) { ?>
  <?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>
<?php } else { ?>
  <?php wp_title( '' ); ?> | <?php bloginfo( 'name' ); ?>
<?php } ?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>">
</head>
<body <?php body_class(); ?>><div class="body-inner">
  <div class="site-header">
    <!-- サイト名(リンク付き) -->
    <span class="site-name">
      <a href="<?php bloginfo( 'url' ); ?>">
        <?php bloginfo( 'name' ); ?>
      </a>
    </span>
    <!-- /サイト名 -->

    <!-- キャッチフレーズ -->
      <span class="site-description">
        <?php bloginfo( 'description' ); ?>
      </span>
    <!-- キャッチフレーズ -->

    <!-- 検索フォーム -->
    <?php get_search_form(); ?>
    <!-- 検索フォーム -->
  </div>

 

OGP関連

Twitterカード、FacebookカードなどのOGP設定です。

FacebookのAPP_IDとTwitterIDはそれぞれ自分のものに変更してください。

<meta property="fb:app_id" content="FacebookのAPP_ID" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TwitterID" />
<?php if ( is_home() ) { // トップページ ?>
  <meta property="og:url" content="<?php bloginfo( 'url' ); ?>" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
  <meta property="og:image" content="サイト用の画像URL" />
  <meta property="og:description" content="<?php bloginfo( 'description' ); ?>" />
<?php }
else if ( is_single() ) { // 投稿、固定ページ等 ?>
  <?php while ( have_posts() ) { the_post(); ?>
  <meta property="og:url" content="<?php the_permalink(); ?>" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="<?php the_title() ?> | <?php bloginfo( 'name' ); ?>" />

  <?php if ( has_post_thumbnail() ) { // アイキャッチあり ?>
  <?php $src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); ?>
    <meta property="og:image" content="<?php echo esc_url( $src[0] ) ?>" />
  <?php } else if ( preg_match( '#<img.*?src="(.+?)"#', get_the_content(), $m ) ) { // 本文欄画像あり ?>
    <meta property="og:image" content="<?php echo esc_url( $m[1] ) ?>" />
  <?php } else { // アイキャッチ、本文欄画像なし ?>
    <meta property="og:image" content="" />
  <?php } ?>

  <meta property="og:description" content="<?php echo wp_html_excerpt( get_the_excerpt(), 50, '...' ) ?>" />
  <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>" />
  <?php } ?>
<?php } ?>

 

なお、OGP設定が正しくできているかどうかは以下のツールで確認することができます。

デバッガー – 開発者向けFacebook

Twitter Card Validator

 

フッター(最低限)

footer.phpにコピペして使うことができます。特にフッターに使用したいものがない人はこれだけでもいいと思います。

</div>
<?php wp_footer(); ?>
</body>
</html>

 

終了タグの</div>は開始タグも<div>となっている前提です。開始タグが別のタグの場合は適宜変更してください。

 

フッター(コピーライト付き)

「Copyright © 2019 ○○ All rights reserved.」といった著作権表記をつけたい場合です。年度は自動で更新されます。

<div class="site-footer">
<span class="copyright">
Copyright © <?php echo current_time("Y"); ?> ○○ All rights reserved.
</span>
</div>
</div>
<?php wp_footer() ?>
</body>
</html>

 

current_time()の代わりにdate()を使ってもいいのですが、WordPressの場合date()を使うと9時間ズレが発生します。

WordPressではcurrent_time()という関数が用意されているので、こちらを使うのが確実でしょう。

 

投稿の表示(最低限)

記事を表示する投稿表示です。single.phpに使うことができます。

記事タイトルを内容が表示されます。

<!-- ヘッダー (header.phpを表示) -->
<?php get_header(); ?>
<!-- /ヘッダー -->

<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- タイトル -->
    <div class="post-title">
      <?php the_title(); ?>
    </div>
    <!-- /タイトル -->

    <!-- 本文 -->
    <div class="post-content">
      <?php the_content(); ?>
    </div>
    <!-- /本文 -->

    </div>
    <!-- /投稿 -->
  <?php endwhile; ?>
<!-- /ループ -->

<!-- フッター (footer.phpを表示) -->
<?php get_footer(); ?>
<!-- /フッター -->

 

投稿の表示

こちらは投稿日時、更新日時、カテゴリー、タグなども表示する投稿表示です。

順番や配置は自分の好きなように変更するといいでしょう。同じくsingle.phpに使うことができます。

<!-- ヘッダー (header.phpを表示) -->
<?php get_header(); ?>
<!-- /ヘッダー -->

<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- タイトル -->
    <div class="post-title">
      <?php the_title(); ?>
    </div>
    <!-- /タイトル -->

    <!-- メタデータ -->
    <div class="post-meta">
      <!-- 投稿日時 -->
      <span class="post-date"><?php the_time('Y/m/d H:i:s'); ?></span>
     <!-- /投稿日時 -->

      <!-- 更新日時 -->
      <span class="post-modified-date"><?php the_modified_time('Y/m/d H:i:s'); ?></span>
      <!-- /更新日時 -->

      <!-- 著者 -->
      <span class="post-author"><?php the_author(); ?></span>
      <!-- /著者 -->

      <!-- カテゴリー -->
      <span class="post-category"><?php the_category(', '); ?></span>
      <!-- /カテゴリー -->

      <!-- タグ -->
      <span class="post-tag"><?php the_tags(); ?></span>
      <!-- /タグ -->
      </div>
    <!-- /メタデータ -->

    <!-- 本文 -->
    <div class="post-content">
      <?php the_content(); ?>
    </div>
    <!-- /本文 -->

  </div>
<!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

<!-- フッター (footer.phpを表示) -->
<?php get_footer(); ?>
<!-- /フッター -->

 

投稿日時、更新日時は自分の好きな表示形式に変更しましょう。

例えば日付だけにしたい場合は「Y/m/d H:i:s」の部分を「Y/m/d」にします。

 

投稿の表示(一覧形式)

記事タイトルのみを表示し、一覧形式にする投稿表示です。カテゴリーページ(category.php)やアーカイブページ(archive.php)に使うといいと思います。

<!-- ヘッダー (header.phpを表示) -->
<?php get_header(); ?>
<!-- /ヘッダー -->

<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- タイトル(リンク付きタイトル) -->
    <div class="post-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
    <!-- /タイトル -->

  </div>
  <!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

<!-- ページ区切りリンク -->
<?php the_posts_pagination(); ?>
<!-- /ページ区切りリンク -->

<!-- フッター (footer.phpを表示) -->
<?php get_footer(); ?>
<!-- /フッター -->

 

投稿の表示(タイトル+抜粋)

投稿一覧を記事タイトル+抜粋で表示する投稿表示です。

カテゴリーページやアーカイブページに加え、検索ページなどでも使えそうですね。

<!-- ヘッダー (header.phpを表示) -->
<?php get_header(); ?>
<!-- /ヘッダー -->

<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- タイトル(リンク付きタイトル) -->
    <div class="post-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
    <!-- /タイトル -->

    <!-- 抜粋 -->
    <div class="post-excerpt">
    <?php the_excerpt(); ?>
    </div>
    <!-- /抜粋 -->

  </div>
  <!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

<!-- ページ区切りリンク -->
<?php the_posts_pagination(); ?>
<!-- /ページ区切りリンク -->

<!-- フッター (footer.phpを表示) -->
<?php get_footer(); ?>
<!-- /フッター -->

 

投稿の表示(タイトル+カテゴリー+投稿日)

投稿日、カテゴリー、記事タイトルの順で新着記事を表示します。トップページで使うといいでしょう。

また、以下のコードを使う場合は設定→表示設定→フロントページの表示を「最新の投稿」にしてください。

「1ページに表示する最大投稿数」で表示する投稿記事数を変更できます。

<!-- ヘッダー (header.phpを表示) -->
<?php get_header(); ?>
<!-- /ヘッダー -->

<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- 投稿日 -->
    <span class="post-date"><?php the_time('Y/m/d'); ?></span>
    <!-- /投稿日 -->

    <!-- カテゴリー -->
    <span class="post-category"><?php the_category(' '); ?></span>
    <!-- /カテゴリー -->

    <!-- タイトル(リンク付きタイトル) -->
    <span class="post-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </span>
    <!-- /タイトル -->

  </div>
  <!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

<!-- フッター (footer.phpを表示) -->
<?php get_footer(); ?>
<!-- /フッター -->

 

まとめ

自分でWordPressテーマを作るのはかなり労力がかかる作業ですが、できた時の達成感は素晴らしいものです。

やり方さえわかってしまえばオリジナルの機能をつけたりもすることができるので、挑戦してみると面白いと思います。