Wordpressのオリジナルテーマを作る時にやること一覧

前提

オリジナルテーマを作るとき、そこそこ工程があるのですが、前に自分が作ったものを見返して調べたりする作業が発生していて非効率な感じがしたので、自分用にチェックリストが欲しくて覚書として書き出そうと思います。

Wordpressバージョン： 6.2

HTMLとCSSで、各ページの静的なコーディングは終わっているところから、Wordpressのクエリ等々を書き込む？入れ込む？ところから何をするのかまとめました。

ヘッダー、フッダーを分離

ヘッダー部分をheader.php
フッター部分をfooter.php

に抜き出し、header.phpもfooter.phpも、1行目に以下を挿入する。

<?php global $_v; ?>

また管理画面にログインしているとどのページを見ていても表示されるWordpressツールバーを表示させたり、色々とWordpressの処理で大切なことをやってくれる関数を追加していく。

heaser.phpの</head>タグの直前にwp_head();を追加。
参考：wp_head | 関数リファレンス

<?php wp_head(); ?>
</head>

footer.phpの</body>の直前にwp_footer()を追加。
参考：wp_footer | 関数リファレンス

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

そして、各ページの元々ヘッダーやフッターがあった位置にheader.phpとfooter.phpを読み込ませるために、wpのお決まりの関数を書いていく。

ヘッダーなら

<?php get_header(); ?>

フッターなら

 <?php get_footer(); ?>

header.phpのcssやjsの読み込みパスを変更する

ルートディレクトリのパスの記述を<?php echo get_template_directory_uri(); ?>に変更する。

CSSの場合

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" />

JSの場合

<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

headタグ内を書き換える

headタグの中はベタ書きしないで、管理画面の設定を受け取れるように書き換えます。
基本形で、よく見るのは以下の形。

<title><?php wp_title(); ?></title>

私はこの後に作るアーカイブページでも同じheader.phpで対応できるようにtitleタグは動的に出し分けて欲しいのでこんな感じで書きます。

• 最新記事一覧
• カテゴリ名＋記事一覧
• 固定ページ、投稿ページのタイトル

を動的に出し分けるように書いてます。

    <?php if (is_category()) : ?>
        <title><?php single_cat_title(); ?>記事一覧 | <?php bloginfo('name'); ?></title>
    <?php elseif (is_archive()) : ?>
        <title>最新記事一覧 | <?php bloginfo('name'); ?></title>
    <?php else : ?>
        <title><?php wp_title('|', true, 'right'); ?></title>
    <?php endif; ?>

あとはmetaタグですが、これはAll in one SEOとかプラグインを使う場合、勝手に挿入してくれるのでスルーで。

自分で入れる場合は以下のように書くことができます。
(keywordsはどうするのかとか、og:imageのパスとかは適宜変えてください。)

    <?php if (is_front_page()) : ?>
      <meta name="description" content="<?php echo get_bloginfo('description'); ?>">
    <?php elseif (is_singular('page') || is_singular('post')) : ?>
      <meta name="description" content="<?php echo get_the_excerpt(); ?>">
    <?php endif; ?>
    <meta name="keywords" content="<?php echo ''; ?>">
    <meta property="og:title" content="<?php wp_title('|', true, 'right'); ?>">
    <meta property="og:description" content="<?php echo get_bloginfo('description'); ?>">
    <meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/images/サイトの画像">

descriptionは、Topページならget_bloginfo('description');が出力されます。
これは、wordpressの管理画面>設定>一般設定>キャッチフレーズのところに設定したものが出力されます。

それ以外の固定ページと投稿ページは、各ページの編集画面の右側のメニューの中にある「抜粋」に入力された値が出力されます。
この「抜粋」は、デフォルトでは入力窓が非表示の状態なので、functuon.phpを開いて、以下を書き込んでください。

function.php

    //固定ページで抜粋を使えるようにする
    add_post_type_support( 'page', 'excerpt' );

次に、固定ページと投稿ページの編集画面を開き、「公開」や「更新」ボタンがある並びにある…を押して、設定>パネル>抜粋のチェックをONにすると、サムネイル画像を設定したりする右側メニューの中に「抜粋」が現れ、使えるようになります。

ちなみにこの抜粋機能ですが、空欄でもWordpressが自動で抜粋を作ってくれるそうで、どうしても手動で追加したい時以外は空欄でも良いようです。

参考：抜粋

Topページのテンプレートを作成

WordpressはTopページにするファイル名が決まっています。
昔はindex.phpで統一していた時代もあるみたいなので、その時の風習で行くならindex.php、
もしくはTopはfront-page.phpを使うのが推奨になっているので、front-page.phpを作って中にコードを入れます。
その場合、index.phpはファイルだけ作って中身は空でもOKです。

• front-page.php
• index.php

ページのimgタグのパスを変更

もし、imagesフォルダがテーマフォルダ(wp-content/theme/テーマフォルダ)があるディレクトリ(index.phpやfront-page.htmlと同じ階層)にある場合、テーマディレクトリに当たる部分に<?php echo get_template_directory_uri(); ?>を追加する。

<img src="<?php echo get_template_directory_uri(); ?>/images/image.jpg" alt="画像の説明文" />

aタグのパスを変更する

今作っているサイト内のリンクはWordpressの場合、パスを書き換えないといけません。
(ドメインが決まっていて、正確なURLがわかっている場合はそのままURLを入れても構いませんが。。。)

ドメインが入る部分に<?php echo home_url(); ?>を入れましょう。

<a href="<?php echo home_url(); ?>">トップページへのリンク</a>

ちなみに、home_url()の()の中に引数を入れると特定のURLを取得してくれます。
例えばexample.comというドメインのサイトを作っているとして、
<a href="<?php echo home_url('/page'); ?>">ページへのリンク</a>
という書き方をすれば、https://example.com/pageというURLをHTMLへ出力してくれます。

<a href="<?php echo home_url('/page'); ?>">ページへのリンク</a>

固定ページを作る

固定ページ用のphpファイルを作る

Wordpressの管理画面から投稿できる固定ページはphpのコードを入れることができません。(プラグインでショートコードを発行して挿入する場合を除く)

なので、例えばTopページに最新記事5件をページの中に出力したいといった時に困ります。
そういった時に、テーマフォルダ(wp-content/theme/テーマフォルダ)に直接phpのファイルを置いて固定ページを作るのでそれをやります。

固定ページは'page-固定ページ名.php'というファイル名にすれば自動でwordpress側が固定ページとして読み込んでくれます。
なので、一旦phpファイルで固定ページを作りましょう。
固定ページ名は小文字アルファベットと、-と_だけ使えます。
もちろん日本語はNGです。

作った'page-固定ページ名.php'の中にはヘッダーとフッターを読み込むようにしたり、imgタグやaタグのパスの書き換えを行います。

<?php get_header(); ?>
 <?php get_footer(); ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/image.jpg" alt="画像の説明文" />
<a href="<?php echo home_url(); ?>">トップページへのリンク</a>

Wordpress管理画面でスラッグを設定する

次に、この固定ページのphpファイルをWordpressに認識させる作業が必要です。
Wordpressの管理画面に行き、固定ページを新規作成します。

タイトルを入力し、右上にある「公開」ボタンの下の方にURLという項目があり、URLぽいものが入っているので、そこをクリックするとパーマリンクという入力窓が開きます。
ここへ、さっき作った固定ページ名を入れましょう。

ex)page-hoge_hoge.phpという固定ページを作った場合はhoge_hogeと入力

できたら、「公開」ボタンを押します。
すると、ドメイン名/固定ページ名にブラウザでアクセスすると閲覧できる状態になっていると思います。

パンくずリストを付ける

YoastSEOのようなプラグインを使わない方法で行きます。
どうせ使うことが決まっている場合はこの作業はいらないです。

パンくずリストはそこそこ長いコードになるので、各ページに直接書くとテンプレートファイルが見づらくなります。
なので、このパンくずリストだけコンポーネント(パーツ?)として別ファイルを作って、適用させたいテンプレートファイルに読み込ませる、という流れで作っていきます。

まず、テーマフォルダ(wp-content/theme/テーマフォルダ)直下にbreadcrumbList.phpというファイルを作成して、以下の内容を書き込みます。

<div class="breadcrumbs">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">Top</a>
    <span> > </span>
        <?php
        $crumbs = array();
        $home_link = home_url();
        $home_name = 'Home';

        if ( is_category() ) {
            $category = get_category( get_query_var( 'cat' ), false );
            if ( $category->parent != 0 ) {
                $crumbs[] = '<a href="' . get_category_link( $category->parent ) . '">' . get_cat_name( $category->parent ) . '</a>';
            }
            $crumbs[] = '<a href="' . get_category_link( $category ) . '">' . single_cat_title( '', false ) . '</a>';
        } elseif ( is_tag() ) {
            $tag_id = get_query_var( 'tag_id' );
            $tag = get_tag( $tag_id );
            $crumbs[] = '<a href="' . get_tag_link( $tag_id ) . '">' . $tag->name . '</a>';
        } elseif ( is_archive() && ! is_category() && ! is_tag() ) {
            $crumbs[] = '' . get_the_archive_title() . '';
        } elseif ( is_page() && ! is_front_page() && ! $post->post_parent ) {
            $crumbs[] = '' . get_the_title() . '';
        } elseif ( is_page() && ! is_front_page() && $post->post_parent ) {
            $parent_id = $post->post_parent;
            while ( $parent_id ) {
                $page = get_page( $parent_id );
                $crumbs[] = '<a href="' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . '</a>';
                $parent_id = $page->post_parent;
            }
            $crumbs = array_reverse( $crumbs );
            $crumbs[] = '' . get_the_title() . '';
        } elseif ( is_single() ) {
            $category = get_the_category();
            if ( $category ) {
                $category_display = '';
                $category_link = '';
                foreach ( $category as $cat ) {
                    if ( $cat->parent == 0 ) {
                        $category_display = $cat->name;
                        $category_link = get_category_link( $cat->term_id );
                    }
                }
                $crumbs[] = '<a href="' . $category_link . '">' . $category_display . '</a>';
            }
            $crumbs[] = '' . get_the_title() . '';
        } elseif ( is_404() ) {
            $crumbs[] = '404 Not Found';
        }
        if ( ! empty( $crumbs ) ) {
            echo implode( '', $crumbs );
        }
        ?>
</div>

そして、パンくずリストを挿入したい箇所に、以下の記述をすると、パンくずリストを自動で取得して表示させられるようになるはずです。

<?php get_template_part('breadcrumbList'); ?>

ファイル名は何でもいいのですが、作ったファイル名をget_template_part('')の引数に入れるとWordpressはそのファイル名を探して、コンポーネント(パーツ?)として読み込んでくれます。便利ですね。

共通コンポーネントをテンプレートファイルで作成する。

先ほどのパンくずリスト同様、サイドバーとか、バナーが並んでいるセクションとか、CTAとか…
Webサイトは同じパーツを別ページで繰り返し使うということはよくあると思います。

こういう部分を共通コンポーネントとして、抜き出して別ファイルにして、挿入箇所に読み込むという作り方をしておくと、変更があったときにいろんなテンプレートファイルを1つ1つ編集しないで、1ファイルを編集するだけで済むので、仕事が減ります。

やり方はさっきのパンくずリストと大枠は同じです。

aside.phpとか、sidebar.phpとかcta_banner.phpとか、任意の名前をつけたファイルをテーマフォルダ(wp-content/theme/テーマフォルダ)直下におきます。

そして、それを読み込ませたい固定ページや投稿ページのテンプレートファイルの中で以下のようにして読み込ませるだけでOKです。

<?php get_template_part('ファイル名'); ?>

投稿一覧(archive.php)を作る

テーマフォルダ(wp-content/theme/テーマフォルダ)直下に、archive.phpというフォルダを作ります。

中の1行目には、読み込ませるために以下のようなコメントを挿入する必要があります。

<?php
/*
Template Name: archives
*/
?>

次に、<?php get_header(); ?>や<?php get_footer(); ?>を入れたら、h1タグに「最新記事一覧」とか「カテゴリ名＋記事一覧」みたいなテキストを入れることがあると思うので、そこを作ります。

<?php if (is_category()) : ?>
    <h1><?php single_cat_title(); ?>記事一覧</h1>
<?php elseif (is_archive()) : ?>
    <h1>最新記事一覧</h1>
<?php else : ?>
    <h1><?php wp_title('|', true, 'right'); ?></h1>
<?php endif; ?>

次に、実際に投稿された記事のタイトルとかサムネを表示させるコードを挿入します。

例えば1ページ9件の記事のタイトルとサムネ画像を取得して並べて表示したいとします。
その場合は、まず繰り返す部分にこんな感じの記述をして、ループを回すようにします。(ul, liタグで作る場合、liの中にこれが入るイメージです)

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <a href="<?php the_permalink(); ?>" class="articleList__item">
    <?php if(has_post_thumbnail()): ?>
    <img class="" src="<?php the_post_thumbnail_url('large'); ?>">
    <?php endif; ?>
    <h3 class=""><?php the_title(); ?></h3>
  </a>
<?php endwhile; endif; ?>

ページネーションもないといけないので、ページネーションを挿入します。

<?php
  $args = array(
    'mid_size' => 0,
    'prev_text' => '<',
    'next_text' => '>',
    'screen_reader_text' => ' ',
  );
  the_posts_pagination($args);
?>

これで、自動でページネーションこんなのがとして以下のような表示が出力されます。

< 1 2 3 … 5 >

前へ、次へ、だけでいいならこんな感じでも書けます。

<?php if( get_previous_posts_link() ) :?>
    <div class="p-pagenavi -prev">
        <?php previous_posts_link('<< 前へ'); ?>
    </div>
<?php endif; ?>

<?php if( get_next_posts_link() ) :?>
    <div class="p-pagenavi -next">
        <?php next_posts_link('次へ >>'); ?>
    </div>
<?php endif; ?>

the_posts_paginationは色々な使い方ができます。
どんなものにするのかはデザインにもよるので、ドキュメント見ながらカスタマイズします。

paginate_links() | Function | WordPress Developer Resources
古いですが日本語の公式ドキュメント

次に、function.phpの方に以下のように記述してアーカイブページを有効化します。

<?php
    // アーカイブページを作成する
    function post_has_archive($args, $post_type)
    {
        if ('post' == $post_type) {
            $args['rewrite'] = true; // リライトを有効にする
            $args ["label"] = 'ブログ'; /*「投稿」のラベル名 */
            $args['has_archive'] = 'blog'; // 任意のスラッグ名
        }
        return $args;
    }
    add_filter('register_post_type_args', 'post_has_archive', 10, 2);

そして、Wordpressの管理画面の設定→表示設定→1ページに表示する最大投稿数で、出力したい記事数を設定します。
今回は9を入力して、さっきのループの部分を9回出力させるようにします。

最後、Wordpressの管理画面で、設定→パーマリンクを開いて、その画面の「変更の保存」　ボタンを押してください。
なぜかWordpressはこれから紹介する儀式？を行わないとアーカイブページが表示できません。

パーマリングに関する設定を行なった際も、同様にこの儀式を行わないと設定が反映されないとこが多いので、覚えておきましょう。

投稿記事のページ(single.php)を作る

投稿記事を表示するにはsingle.phpテンプレートファイルを作らなければいけません。
テーマフォルダの直下にsingle.phpというファイルを用意します。

これで、管理画面の投稿画面から入力された内容はsingle.phpに出力されるようになりますが、これだけだと、タイトルとか本文が出ないので、その出力される窓口となるコードを挿入します。

投稿ページのデザインにもよりますが、多くの場合は挿入される画像やpタグやh1〜h5タグ、リストタグなどにオリジナルのデザインを適用させたいと思うと思います。

なので、cssファイルの方で用意してあるクラス名を追加させるように作ります。

<?php while (have_posts()) : the_post(); ?>
  <!-- 投稿のタイトルを表示 -->
  <h1><?php the_title(); ?></h1>
  
  <!-- サムネイル画像を表示 -->
  <?php if (has_post_thumbnail()) : ?>
      <div class="thumbnail">
          <?php the_post_thumbnail('thumbnail', array('class' => 'サムネ画像にクラス名をつけたい時はここに挿入')); ?>
      </div>
  <?php endif; ?>

  <!-- 投稿につけたタグを表示 -->
  <div class="tags">
    <?php
    $tags = get_the_tags();
    if ($tags) {
      foreach ($tags as $tag) {
        echo '<span class="tag">' . $tag->name . '</span>';
      }
    }
    ?>
  </div>


  <!-- 投稿の本文を表示 -->
  <div class="post-content">
    <?php
      // 投稿の本文を取得
      $content = get_the_content();

      // 各タグに対するクラス名の配列を定義
      $class_names = array(
        'h1' => 'class-for-h1',
        'h2' => 'class-for-h2',
        'h3' => 'class-for-h3',
        'h4' => 'class-for-h4',
        'h5' => 'class-for-h5',
        'p' => 'class-for-p',
        'img' => 'class-for-img',
      );

      // 各タグに対してクラス名を付けて出力
      foreach ($class_names as $tag => $class) {
        $content = str_replace('<' . $tag . ' class="', '<' . $tag . ' class="' . $class . ' wp-block-heading ', $content);
      }

      echo $content;
    ?>
  </div>
<?php endwhile; ?>

投稿ページにアイキャッチ(サムネイル画像)が追加できるように設定する

function.phpに以下を追加します。

<?php
    // アイキャッチ画像(サムネイル画像)有効化
    add_theme_support('post-thumbnails');

次に、Wordpressの管理画面で、設定→メディアを開いて、「サムネイルのサイズ」を変更します。
デフォルトだと150px x 150px と、小さめなので、おそらくデザインに合わせて変更しておいた方が後々やりやすいのでは無いかと思います。

そして、ここでも最後にWordpressの管理画面で、設定→パーマリンクを開いて、その画面の「変更の保存」　ボタンを押してください。
なぜかWordpressはこれから紹介する儀式？を行わないとfunction.phpに書いたサムネイルの設定が反映できません。

同じタグの記事を取得して、関連記事として表示させる

            <div class="reccomendArticle">
                <h2 class="reccomendArticle__headline">関連記事</h2>
                <div class="articleList__wrap">
                <?php
                $current_tags = get_the_tags();

                if ($current_tags) {
                    foreach($current_tags as $tag):
                        $current_tag_list[] = $tag->term_id;
                    endforeach ;
                    $args = array(
                        'post__not_in' => array($post -> ID),
                        'posts_per_page'=> 3,
                        'tag__in' => $current_tag_list,
                        'orderby' => 'rand',
                    );
                    $query = new WP_Query($args);

                    if( $query -> have_posts() ): while ($query -> have_posts()): $query -> the_post(); ?>
                        <a class="articleList__item" href="<?php the_permalink() ?>">
                            <?php the_post_thumbnail('thumbnail'); ?>
                            <h3><?php the_title(); ?></h3>
                        </a>
                    <?php endwhile; else:?>
                        <p>関連記事はありませんでした。</p>
                    <?php endif;
                    wp_reset_postdata();
                        } else {
                            echo "<p>関連記事はありませんでした。</p>";
                        }
                    ?>

                </div>

投稿記事(single.php)にページネーションをつける

プログ記事の本文の後に

< 前の記事 | 次の記事 >

みたいなページネーションをつけます。

<?php if(get_previous_post() || get_next_post()) { ?>
  <div class="wpSinglePager">
    <?php previous_post_link('%link', '< 前の記事'); ?>
    <?php echo '|' ?>  
    <?php next_post_link('%link', '次の記事 >'); ?>
  </div>
<?php } ?>

このページネーションに、以下のように記事タイトルも追加する場合は以下のようにします。

< 前の記事タイトルを取得して表示 | 次の記事タイトルを取得して表示 >

<?php if(get_previous_post() || get_next_post()) { ?>
  <div class="wpSinglePager">
    <?php previous_post_link('%link', '< %title'); ?>
    <?php echo '|' ?>  
    <?php next_post_link('%link', '%title >'); ?>
  </div>
<?php } ?>

もし、記事のタイトルだけではなく、サムネイル画像も取得させたい場合は、カスタム関数を追加する必要があるので、function.phpに以下の関数を追加します。

<?php
function my_post_navigation() {
    $prev_post = get_previous_post();
    $next_post = get_next_post();

    if (!empty($prev_post)) {
        $prev_title = strip_tags(str_replace('"', '', $prev_post->post_title));
        $prev_thumb = get_the_post_thumbnail($prev_post->ID, 'thumbnail');
        echo '<div class="nav-previous"><a href="' . get_permalink($prev_post->ID) . '" title="' . $prev_title . '">' . $prev_thumb . $prev_title . '</a></div>';
    }

    if (!empty($next_post)) {
        $next_title = strip_tags(str_replace('"', '', $next_post->post_title));
        $next_thumb = get_the_post_thumbnail($next_post->ID, 'thumbnail');
        echo '<div class="nav-next"><a href="' . get_permalink($next_post->ID) . '" title="' . $next_title . '">' . $next_thumb . $next_title . '</a></div>';
    }
}
?>

そして、single.phpのページネーションを追加したい場所に以下を追加するだけです。

<div class="post-navigation">
    <?php my_post_navigation(); ?>
</div>

Topページ等固定ページに最新記事4件表示みたいなパーツを作る

Topページに、最新記事のタイトルとサムネを出して4件表示する、みたいなセクションをよく目にすると思います。
あの部分を作ります。

最新記事4件を取得したい場合

<?php
// 最新記事4件を取得
$args = array(
'posts_per_page' => 4 // 表示件数
);
$posts = get_posts( $args );
foreach ( $posts as $post ):
setup_postdata( $post );
?>

<!-- ここから、同じカテゴリーの記事を4件出力 -->
<a class="blogCardListItem" href="<?php the_permalink(); ?>">
    <div class="blogCardListItemImg">
        <?php the_post_thumbnail(); ?>
    </div>
    <h3>
        <?php the_title(); ?>
    </h3>
</a>
<?php
endforeach; // ループの終了
?>

同じカテゴリーの最新記事を3件取得したい場合

<?php
  // 同じカテゴリーの記事を3件取得
  $current_tags = get_the_tags();

  foreach($current_tags as $tag):
    $current_tag_list[] = $tag->term_id;
  endforeach ;
  $args = array(
    'post__not_in' => array($post -> ID),
    'posts_per_page'=> 3,
    'tag__in' => $current_tag_list,
    'orderby' => 'rand',
  );
  $query = new WP_Query($args);
?>

<!-- ここから、同じカテゴリーの記事を3件出力 -->
<?php if( $query -> have_posts() ): while ($query -> have_posts()): $query -> the_post(); ?>
  <a class="articleList__item" href="<?php the_permalink() ?>">
    <?php the_post_thumbnail('thumbnail'); ?>
    <h3><?php the_title(); ?></h3>
  </a>
<?php endwhile; else:?>
  <p>関連記事はありませんでした。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>