はじめに

本記事の対象者

WordPressの既存テーマと自作テーマの違い

まず既存テーマとはWordpressに元々備わっているテーマのことであり、こちらを使用する場合は制作時間が短く済み、コストが抑えられ高品質なデザインが手軽に実現可能です。しかし、自作テーマと比べて自由度は低く、希望するデザインの実装が難しい場合あります。自作テーマは自身で好みのデザインにすることができ、自由度が高くなっています。

自作テーマを作成し利用することのメリット

自作テーマを利用する場合、ブランドイメージやコンセプトにあった独自のデザインが実現でき、必要な機能とデザインを備えた理想のWebサイトが作成できます。さらに不要な機能を搭載しないことによりサイト全体の動作やページ表示を速くすることが可能です。

自作テーマ作成の準備

自作テーマを作成するために必要なテンプレートファイルの一覧

下記ファイルはテーマディレクトリ直下に配置してください

・index.php

→Wordpressで作成したテーマのトップページファイルです。表示できるテンプレートファイルが何もない場合に表示されるものです。

・header.php

→ページのhead部分やbodyの上部までを構成するファイルです。ヘッダー部分をパーツ化して使い回しが可能です。

・footer.php

→ページのbodyの下部を構成するファイルです。フッター部分をパーツ化して使い回しが可能です。

・page.php

→固定ページのテンプレートファイルです。カテゴリーなどは分けることは不可です。主にお問い合わせやプロフィールなどに使用されます。

・single.php

→投稿ページのテンプレートファイルです。カテゴリーなどが分けることが可能です。主にブログや新着情報などに使用されます。

・404.php

→該当のページが存在しなかった場合に表示するページです。

・style.css

→デザインについて記述するファイルです。

・function.php

→テーマ内で汎用的に使用するコードを記述するファイルです。影響範囲はテーマだけではなく管理画面の設定などにも影響するため編集の際はバックアップを取ると良いでしょう。

各テンプレートファイルが該当するWordpressのページ

トップページ

wordpressのトップページはデフォルトの状態で「https://xxx.com/」に表示されているページのことを指します。

①front-page.php

②home.php

③index.php

固定ページ

カテゴリに紐づけられないページのことです。他のページとは隔絶された記事ページとなります。

②page-[slug].php

③page-[id].php

④page.php

⑤singular.php

⑥index.php

投稿ページ

記事を作成したページのことです。固定ページとは異なり投稿はカテゴリによって紐づけられます。

①single-[post_type（カスタム投稿名）].php

②single.php

③singular.php

④index.php

WordPressが定めているテンプレートファイルの読み込み優先順位について

トップページ表示

①front-page.php

②home.php

③index.php

サイトのトップページがリクエストされた場合

front-page.php→home.php→page.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

個別投稿表示

①single-{post_type（カスタム投稿名）}.php

②single-{post_type}.php

③single.php

④singular.php

⑤index.php

例）投稿タイプがbook、スラッグがabcのページがリクエストされた場合

single-book-abc.php→single-book.php→single.php→singular.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

固定ページ表示

①カスタムテンプレート名.php

②page-[slug].php

③page-[ID].php

④page.php

⑤singular.php

⑥index.php

例）固定ページのスラッグがaboutのページ（投稿IDが10）がリクエストされた場合

カスタムテンプレートファイル→page-about.php→page-10.php→page.php→singular.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

ちなみに、投稿IDを用いた「page-{投稿ID}.php」を使用するのはおすすめしません。

理由として、テンプレート名からファイルの内容が判断できない、他の環境のWorpress上で扱った場合、投稿IDが変わる可能性があるというものが挙げられます。

カテゴリー表示

①category-[slug].php

②category-[ID].php

③category.php

④archive.php

⑤index.php

例）カテゴリーのスラッグがnewsのページ（カテゴリーIDが5）がリクエストされた場合

category-news.php→category-5.php→category.php→archive.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

ちなみに固定ページと同様にカテゴリーIDを用いた「category-{カテゴリーID}.php」を使用することはお勧めできません。

タグ表示

①tag-[slug].php

②tag-[ID].php

③tag.php

④archive.php

⑤index.php

例）タグのスラッグがnewsのページ（タグIDが5）がリクエストされた場合

tag-news.php→tag-5.php→tag.php→archive.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

ちなみに固定ページなどと同様にカテゴリーIDを用いた「tag-{タグID}.php」を使用するのはお勧めしません。

カスタムタクソノミー表示

①taxonomy-[taxonomy]-[teram].php

②taxonomy-[taxonomy].php

③taxonomy.php

④archive.php

⑤index.php

例））タクソノミーのスラッグがnewsのページでタームのスラッグがabcのページがリクエストされた場合

taxonomy-news-abc.php→taxonomy-news.php→taxonomy.php→archive.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

カスタム投稿タイプ表示

①archive-[post_type].php

②archive.php

③index.php

例）投稿タイプがbookのアーカイブページがリクエストされた場合

archive-book.php→archive.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

作成者表示

①author-[name].php

②author-[ID].php

③author.php

④archive.php

⑤index.php

例）投稿者のニックネームがazumaのページ（投稿者IDが2）がリクエストされた場合

author-azuma.php→author-2.php→author.php→archive.php→index.php

の順番でテンプレートを探し最初に見つかったテンプレートを表示します。

日付別表示

①date.php

②archive.php

③index.php

date.php→archive.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

検索結果表示

①search.php

②index.php

search.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

404エラー表示

①404.php

②index.php

404.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

添付ファイル表示

①MYME_TYPE.php

②attachment.php

③single.php

④index.php

MYME_TYPE.php→attachment.php→single.php→index.php

の順番でテンプレートを探し、最初に見つかったテンプレートを表示します。

自作テーマ作成の方法

覚えておくと便利な代表的wordpress関数の一覧

投稿の出力で使用する関数

・the_title：投稿のタイトルを出力します

（例

<?php if(have_post()):?>
  <?php while(have_posts()): the_post();?>
      個々の投稿を出力する処理
      <?php the_title();?>
  <?php endwhile;?>
      投稿一覧を出力した後に行う処理
<?php else:?>
  投稿がない時の処理
<?php endif;?>

・the_content：投稿の本文を出力します

（例

<?php if(have_posts()): ?>
    <?php while(have_posts()) : the_post(); ?>
        個々の投稿を出力する処理
        <?php the_content(); ?>
    <?php endwhile; ?>
        投稿一覧を出力した後に行う処理
<?php else: ?>
    投稿が無い時の処理
<?php endif; ?>

・the_post_thumbnail：投稿のアイキャッチ画像を出力します

（例

<?php if(has_post_thumbnail()): ?>
　/* 投稿にアイキャッチ画像が有る場合の処理 */
　<?php the_post_thumbnail(); ?>
<?php endif; ?>

・the_time：投稿の日時を出力します

（例

// 2020/01/01 13:01
the_time('Y/m/d H:i')

// 2020年1月1日 1:01
the_time('Y年n月j日 G:i')

・the_category：投稿が属するカテゴリーのページへのリンクをリストで出力します

（例

<?php if(have_posts()): ?>
    <?php while(have_posts()) : the_post(); ?>
        個々の投稿を出力する処理
        <?php the_category(); ?>
    <?php endwhile; ?>
        投稿一覧を出力した後に行う処理
<?php else: ?>
    投稿が無い時の処理
<?php endif; ?>

・the_tags：投稿につけられたタグのページへのリンクをリストで出力します

（例

<?php if(have_posts()): ?>
    <?php while(have_posts()) : the_post(); ?>
        個々の投稿を出力する処理
        <?php the_tags(); ?>
    <?php endwhile; ?>
        投稿一覧を出力した後に行う処理
<?php else: ?>
    投稿が無い時の処理
<?php endif; ?>

テンプレートの呼び出しで使用する関数

・get_header：「header.php」テンプレートを呼び出します

（例　トップページのみに使うヘッダーテンプレート「header-index.php」の組み込み用関数

<?php get_header('index'); ?>

・get_sidebar：「sidebar.php」テンプレートを呼び出します

（例　固定ページのみに使うサイドバーテンプレート「sidebar-page.php」の組み込み用の関数

<?php get_sidebar('page'); ?>

・get_footer：「footer.php」テンプレートを呼び出します

（例　アーカイブページのみに使うフッターテンプレート「footer-archive.php」の組み込み用の関数

<?php get_footer('archive'); ?>

URL出力に使用する関数

・home_url：ホームページのURLを取得します。「http」か「https」かも自動で判別してくれます

（例　$schemeはURLのスキーム名（省略すれば自動的にhttpやhttpsを判別してくれます）

home_url($path, $scheme);

・previous_post_link：現在の投稿から見て一つ前の投稿へのリンクを出力します

（例　リンクのテキストには「記事のタイトル」と矢印が自動的に表示されます。

<?php previous_post_link(); ?>

・next_post_link：現在の投稿から見て一つ後の投稿へのリンクを出力します

（例　リンクのテキストには上記同様「記事のタイトル」と矢印が自動的に表示されます。

<?php next_post_link(); ?>

記事の一覧をループで表示する方法

一般的なWordpressループ

<?php if(have_post()) : ?>

<?php while(have_post()) : the_post(); ?>

  各々の記事に関する処理

　<?php endwhile;?>

<?php else : ?>

  記事が一件も見つからなかった時の処理

<?php endif; ?>

→最初のifで記事の存在を確認している。have_post()はクエリした結果記事を取得できたかどうかを判定する関数です。

次のwhile (have_post())で投稿が存在する限り繰り返し処理を行います。

-実践的なループの例-

<?php if(have_post()) : ?>

<?php while(have_post()) : the_post(); ?>

　　<section class="post-item">

　　  <h2><?php the_title(); ?></h2>

　　　  <p><?php the_content(); ?></p>

　　</section>

<?php endwhile; ?>

<?php else : ?>

  <div class="error">

　　  <p>お探しの記事は見つかりませんでした。</p>

　  </div>

<?php endif; ?>

→the_title()は記事のタイトルを出力する関数、the_contentは記事の本文を出力する関数であり、the_postはループ内で値をカウントアップする役目があります。

共通部分をテンプレート内で読み込む方法

get_template_part($slag, $name, $args)関数を使用します。

この関数は3つの引数を渡すことができ、第一引数($slag)にはファイルまでのパスを(parts.phpを読み込みたい場合はpartsと記述)第二引数にはテンプレートの名前(オプション)、第三引数にはテンプレートに渡す配列(オプション)が入ります。

（例　part.phpというファイルを読み込みたい時はこのように記述します。

get_template_part('parts');

part.phpファイルがincludesフォルダに入っている場合はこのように記述します。

get_template_part('includes/parts');