WordPress オリジナルテーマの作り方

何かしらの理由によってテーマを自作しようと思った方へオリジナルテーマ作りの方法をご紹介します。
何度か作ってみると自分のやりやすい方法や必要なものが分かってくると思うので、まずは基本を押さえておきましょう。

  • この記事の内容はWordPress6.3.1バージョンで動作確認しています。
  • TOPページには記事の一覧を表示、その他固定ページ、投稿の一覧ページと詳細ページ、404ページがあるサイトを想定したテーマ作りです。

テンプレートテーマを使用するかオリジナルテーマを作るか

正直なところ私はテンプレートテーマをあまり使ったことがありません。WordPressで初めてサイト制作した時からテーマを自作していたからだと思いますが、テンプレートテーマを使いこなせないのです。そもそもどのテンプレートテーマがいいのかわからないので選ぶのにも時間がかかります。

WordPressにはすでに他の人が作って公開しているテンプレートテーマなるものが膨大に作られています。それをインストールすれば、コードを書かなくてもサイトが瞬時に完成します。
テンプレートテーマを活用してサイト運用できるなら、わざわざコードを一つ一つ書いていく手間が省けて効率的ですし、とても便利です。

ですが、テンプレートテーマはやりたいことによってはカスタマイズしにくいことも多々あります。
テンプレートテーマを使いこなすにはそのテーマの機能や使い方の理解が必要です。やりたいことをするためにはどうしたらいいのか、機能が豊富なものほど便利ではあるものの使い方を調べるのも大変です。テーマによってはやりたいことができないこともあるかもしれません。

とある案件で有料のテーマを使用したサイトの修正依頼を受けたことがありました。一部分のなんてことない修正内容だったのですが、テーマに則して変更することで思った以上に時間がかかってしまいました。使用したことのあるテーマならなんてことなかったとも思いますが、やっぱり手間だと思ってしまったんです。

もっと使いやすく、必要な機能をつけたい!これを突き詰めていった方々が一般公開されているテーマを作っていったのではないかとも思います。
一般公開してさまざまなユーザーに利用してもらうと、いろいろな問題が出て機能も追加されていきます。ですが、自分にとっては不要なものかもしれません。
機能の取捨選択をしやすいのはオリジナルテーマのメリットだと思います。

学習コストはかかってしまいますが、自分が使いやすいと思うテーマを作ってみるとWordPressの理解も深まります。勉強の一環としてテーマを自作してみるのもおすすめです。

WordPressのテンプレートタグを覚えていく

WordPressには専用のテンプレートタグというものが用意されています。これは、そのコードを記述するだけで設定されている機能が使えるものです。

例えば記事のタイトルを取得するときは <?php the_title(); ?>、カテゴリーなら <?php the_category(); ?> というテンプレートタグを記述するだけで表示することができます。
本来プログラムを書かないと表示することができないものでも、簡単にできるような仕組みになっています。

このページでもいくつかのテンプレートタグを使用しています。とても多くのテンプレートタグがあるので全て覚えるのは難しいですが、よく使うものだけでも覚えておく、何かしたいことに対して用意されているテンプレートタグがあるということだけでも頭に入れておくとテーマ作成がはかどりやすいです。

コードでのカスタマイズとプラグインを併用して作る

WordPressには機能を追加できるプラグインがたくさんあり、それらの使い方を紹介している記事もたくさんあります。インストールすれば機能が使えるのはとても便利です。有効活用していきましょう。
ただ欲しい機能がついていない場合もあるので、その際にはカスタマイズや自作する必要があることも。また妥協しなければならない場面もあるかもしれません。

プログラミングがよく分からなくても、コピペすれば動くコードがweb上にたくさんあります。私もよくお世話になります。

ただ必ず動くとは限りません。

エラーになった時に対応できれば問題ないのですが、そうでなければさまざまなところに影響を与えてしまうことも…

ちゃんと理解していないコードを使ってうまく動かない場合、エラーと格闘するのもいいですが目当ての機能を提供しているプラグインを使った方が余計な手間がありません。もちろん勉強の一環として自分でコードを書く、というのはとてもいいことだと思います。

ローカル環境を構築する

一からテーマを作る際は一つ一つの機能が問題なく動くか、表示がちゃんとされるかチェックが必要です。

そこでローカル環境を作ってまずはそこで作業してから公開サーバーの方にアップロードしていきます。
私は「Local」というWordPressのローカル環境構築ツールを使用しています。簡単に環境を自分のPC上に作ることができます。

LocalではWordPress本体も自動的にダウンロードしてくれるのですが、他の環境構築方法を利用するならWordPressのダウンロードをする必要があります。

【ダウンロードはこちらから】Download | WordPress.org 日本語

オリジナルテーマフォルダを作成

テーマを設定するためにthemesフォルダ内にオリジナルテーマのフォルダを作成します。

WordPressのフォルダ内で【wp-content > themes】と進んでいき、このthemesフォルダ内に新しくテーマフォルダを作成します。

テーマを使用するために必須のファイルは「index.php」と「style.css」です。この2つがないと【外観 > テーマ】のところに「壊れているテーマ」として表示され、テーマが切り替えられません。

index.php がない場合
style.css がない場合

「index.php」と「style.css」があればテーマ一覧に表示されます。初めはまっさらな状態で良いので、2つのファイルを設置してテーマを切り替えます。

style.cssにテーマ概要を記載

style.cssに何も書いていなくてもファイルさえあればテーマとして機能しますが、初めにコメントアウトでテーマの情報を記載しておくこともできます。
WordPressの公式ディレクトリに登録(一般公開)したい場合は必須の部分がいくつかあるようですが、そうでない場合は必要なところだけ設定すれば大丈夫です。

【style.cssに書かれるテーマ説明リスト】

/*
  Theme Name: テーマの名前
  Theme URI: サイトのURI
  Author: 作者の名前
  Author URI: 作成者のサイトURI
  Description: テーマの説明
  Version: テーマのバージョン
  Requires at least: テーマが動作する一番古いWordPressバージョン
  Tested up to: 動作テストをした最新のWordPressバージョン
  Requires PHP: 推奨するPHPバージョン
  Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
  License: テーマのライセンス
  License URI: テーマのライセンスについて記載しているURI
  Text Domain: 翻訳ファイルを参照するためのテキストドメイン
  Template: 子テーマの場合に親テーマを指定
*/

自分用として作るなら「Theme Name」だけの設定でも十分かと思います。あとはメモしておきたい項目を設定するのも良いと思います。
「Theme Name」も必須というわけではないようで、ない場合はテーマフォルダの名前がテーマ名として表示され、テーマを切り替えることができました。ただプラグインなどで不具合が起こることもあるようなので設定しておいた方が良いでしょう。

テーマ情報を記載した後にサイトのスタイルを記述していきます。こちらにスタイルを記述してもいいですが、CSSファイルを分けて管理したい場合は別途ファイルを作成して読み込むようにします。

各テンプレートファイルの作成

「index.php」と「style.css」の2つのファイルがあればテーマとして設定することはできるものの、WordPressを利用するなら投稿記事の表示をさせたいことがほとんどでしょう。

WordPressではページごとに呼び出されるファイルが決まっていて、これらをテンプレートファイルと呼んでいます。ページに該当するテンプレートファイルがあればそのファイルが読み込まれ、なければ index.php を読み込みます。
ヘッダーやフッター、サイドバーなどページ自体を表示するのではなく各ページ共通で使うものとして、呼び出すためのテンプレートファイルもあります。

サイトによって要不要なものはありますが、私がいつもテーマを作成するときは大体以下のファイルセットを作成しています。

  • index.php (テーマに必須、トップページや他のテンプレートファイルの代わりに表示)
  • style.css(テーマに必須、スタイルを記述)
  • funtions.php(テーマに使用する機能を記載)
  • header.php(サイト共通のヘッダー部分)
  • footer.php(サイト共通のフッター部分)
  • sidebar.php(サイト共通のサイドバー部分)
  • single.php(投稿ページ)
  • archive.php(記事一覧ページ)
  • page.php(固定ページ)
  • 404.php(404ページ)

初めは全て作らずともOK。必要最低限のものを作成してサイトに合わせて追加していきましょう。

私は主にトップページには index.php を利用していますが、front-page.php や home.php でもトップページを作ることができます。

functions.php に機能を追加していく

functions.php は主にWordPressの機能を追加、カスタマイズしたいことを記述します。
サイトを運用していると、WordPressのデフォルトの設定では機能が足りなかったり不要な機能があったりと、サイトの使い勝手が良くないと思うことが出てきます。そんな時に機能を拡張・変更するために使用するのが functions.php です。

またテンプレートテーマや有料テーマなどを使っていると感じにくいですが、実は設定しないと使えない機能がいくつかあります。一から自分で作るときの注意点です。

オリジナルテーマを作成するならこのファイルを編集するのは必須です。基本的な機能でいえば、サイトやページごとのタイトル設定、アイキャッチ画像の登録、不要な初期機能の削除などがあげられます。また管理画面のカスタマイズもここで設定できます。

functions.php は使用するテーマフォルダのすぐ下に置きます。

この場所から動かすと設定した内容がうまく動作しません。もし設定したはずなのにうまく機能しない、といった場合は所定の位置にファイルがあるか確認しましょう。

多機能なWordPressにしようとするほど、コードが長くなり煩雑になってしまうことも。初めは機能を厳選して、必要になった時に追加していくようにした方がいいと思います。

機能を追加・変更するときによく使われるのが「フック」というもので、こちらもWordPressをカスタマイズしていくなら覚えておきたいものです。

初期で設定しておきたい機能

大体のサイトで必要になるであろう機能の設定をいくつかピックアップします。functions.phpに記載しておくと後から「この機能が使えない?!」といったことを防げます。

先に設定しておいてもいいですし、後から要・不要がわかったら随時追加するのももちろんありです。

アイキャッチの有効化

ブログサイトなら特にアイキャッチは必須項目でしょう。アイキャッチは初期では表示されないようになっているので以下の記述が必要です。

add_theme_support('post-thumbnails');

アイキャッチ設定は投稿タイプごとに設定することもできます。

// 投稿ページのみ
add_theme_support('post-thumbnails',array('post'));
// 固定ページのみ
add_theme_support('post-thumbnails',array('page'));

もし投稿にアイキャッチが表示されない場合は、この記述があるか、間違いがないか確認してみてください。

titleタグの出力設定

ページのtitleタグはWebサイトに設定しておきたいものの一つです。設定方法はいくつかありますが、ページのタイトルをそのままタイトルタグとして利用するなら、functions.php に以下のコードを記載するだけでOKです。

add_theme_support('title-tag');

このコードがあれば、headタグ内にtitleタグは必要ありません。

初期ではtitleタグに出力される区切り文字はハイフン(ー)ですが、カスタマイズすることもできます。

CSS、JSの読み込みをfunctions.phpに記載する

HTMLで静的サイトを作るときに「headタグ内にCSSを読み込み、JSはbodyタグの直前に読み込む」という形で記述しますが、WordPressでは直接そこに書かずfunctions.phpで一元管理することが推奨されています。

WordPress本体も独自でスクリプトを読み込んでいます。その上でheadタグなどにスクリプの読み込みを記述すると、同じファイルを何回も読み込んでしまったり、正い順序で読み込まれないことがあります。またプラグインのファイルと重複することもあります。

functions.phpで読み込むことで依存関係を整理させることができるため、問題が出にくくなります。

CSSやJSの読み込みには、wp_enqueue_style()wp_enqueue_script() というコードを使います。CDNなど外部リンクもここで設定できます。

function add_files() {
  // サイト共通CSS
  wp_enqueue_style('reset-css', get_template_directory_uri() . '/assets/css/reset.css', '', '');
  wp_enqueue_style('main-css', get_template_directory_uri() . '/assets/css/main.css', '', '');
  // サイト共通JS
  wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.5.1.min.js', '', '', false);
  wp_enqueue_script('my-script', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), '', true );
}
add_action('wp_enqueue_scripts', 'add_files');

ループのメインクエリ検索条件の変更

メインループを使って記事一覧を表示させるときの設定を変更できます。

一覧の表示件数なら、【設定 → 表示設定→1ページに表示する最大投稿数】で設定できます。ただここでは全ページ一律の設定しかできません。

TOPページでは3件、カテゴリーページでは10件ずつ表示させたい、並べる順序を変えたい、といった時に functins.php で指定すればここで一元管理できます。

function my_preget_posts($query) {
  if (is_admin() || ! $query->is_main_query()){
    return;
  }
  if ($query->is_home()) {
     $query->set('posts_per_page', 3);
     return;
  }
  if ($query->is_category()) {
    $query->set('order', 'DESC');
    $query->set('orderby', 'date');
  }
}
add_action('pre_get_posts','my_preget_posts');

管理画面のカスタマイズ

ログイン画面やアドミンバーの設定、メニュー項目の表示などをカスタマイズできます。

またサイトによって異なりますが、不要な初期機能はいくつかあります。あらかじめ表示されないように設定しておくと記事が書きやすくなりますし、混乱も少なくなります。

ウィジェット

ウィジェットを活用するなら、こちらも初期は機能がOFFになっているので、設定が必要です。

add_theme_support('widgets');

URLの取得コードを簡易的にする

リンクを設定する際に home_url(); を使用したり、画像を取得する際に get_template_directory_uri() というテンプレートタグでとある部分までURLを補完してくれます。ただ echo をつけたりタグをちゃんと記述するのが結構手間なので、私は自分でテーマを作る時にはもっと簡略化して記述できるよう、関数化しています。

/*-------------------------------------------------
URL取得
-------------------------------------------------*/
function homeurl() {
  echo home_url('/');
}

function tmpdir() {
  echo get_template_directory_uri();
}

function imgdir() {
  $tmpdir = get_template_directory_uri();
  echo $tmpdir. '/assets/img/';
}

このように設定しておくことで tmpdir(); で wp-content までのリンクが取得・出力できますし、imgdir();だけで画像フォルダまで毎回記載せずに済むので便利です。

【PR】

ウェブ開発の人気オンラインコース

テスト用の投稿を作成する

WordPressの投稿機能を利用するなら、ちゃんとその機能が動いているか、表示が問題ないか確認は必須です。

デザインをコーディングするときも記事がないとちゃんとそのコードで表示されるのかわかりません。記事の見出しやリスト、引用などさまざまなブロックを入れてスタイルを確認しましょう。

ページネーションやカテゴリーの表示が問題ないかの確認もしておきたいところです。ある程度の記事数と、カテゴリーやタグなどが決まっているならそれをまんべんなく設定した投稿記事が必要です。

またこの時に投稿編集画面に不足がないかも確認して、必要な機能を追加します。

トップページとヘッダー・フッターのファイル作成

トップページ作成と併せてヘッダーとフッターも作成していきます。

ヘッダーには header.php、フッターには footer.php を使用します。
ここではトップページは index.php を使用します。front-page.php や home.php でもファイルが異なるだけで記述することは変わらないです。

【index.php のサンプル】

<?php get_header(); ?>
  <main>
    <h2>記事一覧</h2>
    <?php
      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'cat' => '10',
        'no_found_rows' => true;
      );
      $my_posts = new WP_Query($args);
      while ($my_posts->have_posts()):
        $my_posts->the_post();
    ?>
      <h3><?php the_title(); ?></h3>
      <div><?php the_content(); ?></div>
    <?php endwhile; wp_reset_postdata();?>
  </main>
<?php get_footer(); ?>

get_header(); で header.php を読み込み、get_footer(); で footer.php を読み込むことができます。

記事の取得・出力には WP_Queryget_posts を利用します。

【header.php のサンプル】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <meta name="format-detection" content="telephone=no">
  <?php wp_head(); ?>
</head>
<body>
  <header>
  </header>

headタグの情報設定とヘッダーのコーディングをします。WordPressでは、head終了タグの直前に wp_head(); を記述します。このテンプレートタグはWordPressで必要な設定ファイルなどを読み込むためのものです。

【footer.php のサンプル】

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

body終了タグの直前には wp_footer(); を記述します。こちらもWordPressの基本的な機能を使用するのに必要なので忘れずに設定しましょう。

サイドバー用ファイル作成

サイトに共通して表示させるサイドバーがあるなら sidebar.php ファイルを作成します。

直接HTMLコードで作ってもいいですし、管理画面から編集できるようにしたい場合はウィジェットを利用しましょう。

<div class="side_content">
  <?php dynamic_sidebar('sidebar'); ?>
</div>

sidebar.php の呼び出しは get_sidebar(); です。

<?php get_header(); ?>
  <main>
    <h2>記事一覧</h2>
    <?php
      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'cat' => '10',
        'no_found_rows' => true;
      );
      $my_posts = new WP_Query($args);
      while ($my_posts->have_posts()):
        $my_posts->the_post();
    ?>
      <h3><?php the_title(); ?></h3>
      <div><?php the_content(); ?></div>
    <?php endwhile; wp_reset_postdata();?>
  </main>
  <?php get_sidebar(); ?>
<?php get_footer(); ?>

各投稿一覧ページ用ファイル作成

カテゴリーやタグ、作成者や日付別といった投稿の一覧ページを表示するために使われるファイルが archive.php です。

archive.php はさまざまな一覧ページで適用されるテンプレートファイルです。一律同じ表示にする場合はこちらのファイルを一つ作っておけばOK。

各一覧で表示内容を変えたい、条件分岐などを使うとコードを管理しづらい、といった場合はそれぞれ別のテンプレートファイルを作成します。

カテゴリーなら category.php、タグなら tag.php、作成者なら author.php、日付なら date.php ファイルがあると、archive.phpファイルがあっても各ファイルが優先させるようになっています。

<?php get_header(); ?>
  <h2><?php echo single_term_title('', false);?></h2>
  <?php if(have_posts()): ?>
    <?php while(have_posts()): the_post();?>
      <?php the_content(); ?>
    <?php endwhile; ?>
  <?php else: ?>
    <p>記事がありません。</p>
  <?php endif; ?>
<?php get_footer(); ?>

投稿ページ用ファイル作成

「投稿」で作成した記事を表示する際に使われるテンプレートファイルが single.php です。

<?php get_header(); ?>
  <?php if(have_posts()): ?>
    <?php while(have_posts()): the_post();?>
      <h1><?php the_title(); ?></h1>
      <div>
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
<?php get_footer(); ?>

投稿のテンプレートを管理画面で指定するようにもできます。以下のように冒頭にテンプレート名とテンプレートポストタイプを記述します。

<?php
/*
* Template Name: Template_name
* Template Post Type: post
*/
?>
<?php get_header(); ?>
<?php get_footer(); ?>

固定ページ用ファイル作成

固定ページで作成した記事を表示する際に使われるテンプレートファイルが page.php です。

<?php get_header(); ?>
  <?php if(have_posts()): ?>
    <?php while(have_posts()): the_post();?>
      <h1><?php the_content(); ?></h1>
      <div>
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
<?php get_footer(); ?>

案件などでは、固定ページは投稿ページのように一律のスタイルには当てはまらずスタイルを作り込んだページにすることも多いので、そのままHTMLで直接記述することも多いです。
この場合投稿ループの部分はなくして作成していきます。

page-slug.php (slug にはURLのスラッグ)というファイル名にするとそちらが優先して適用されます。/theme_name/pages/page-**.php のようにthemeフォルダの直下にない場合は自動的には適用されません。

各固定ページの編集画面でテンプレートファイルを指定することもできます。
設定を管理画面で変更できるよう、以下のように冒頭にテンプレート名を記述し、ファイル名もわかりやすい名称に変更します。

<?php
/*
* Template Name: Template_name
*/
?>
<?php get_header(); ?>
<?php get_footer(); ?>

404ページ用ファイル作成

サイト上に存在しないURLにアクセスした際に使われるテンプレートファイルが 404.php です。404.php がなければ通常は index.php の内容が表示されます。

<?php get_header(); ?>
  <h1>NOT FOUND</h1>
  <p>アクセスされたページが存在しません。</p>
  <p><a href="/">TOPページへ</a></p>
<?php get_footer(); ?>

必須のページというわけではないのですが、あった方がそのページが存在するかどうかが明確になるので、簡易的でも作成しておいた方がユーザーに親切です。

404ページに関連する記事や検索窓などを設置して、離脱を防ぐようにしておくのもサイト運営には大切なことだと思います。

テーマのスクリーンショット作成

テーマのスクリーンショットとはサムネイル画像のことです。

設定していない場合は上記の左端のように画像は表示されません。Twenty Twenty-Three や Twenty Twenty-Two にはスクリーンショットが設定されています。

そのテーマのTOPページのスクリーンショットを撮って設定することが多いですが、何かしらわかりやすい画像を設定するのもありです。
画像を作成したらテーマフォルダの直下に screeenshot.jpg(またはpng)をアップロードすれば表示されます。

テーマをバージョンごとに複数作成したり案件で提出する場合は特に、スクリーンショットがあったほうがテーマが分かりやすいです。テーマを一般公開するのでなければ特に必須というわけではありませんが、設定しておいた方がテーマの切り替え間違いを防げる効果もあります。

本番環境に公開する

ローカル環境でテーマを作成したら本番環境に公開します。

既存サイトの場合

既存のサイトのテーマ変更だけだったり、すでにドメインやサーバー、WordPressが準備されていればテーマをあげるだけでOK。
管理画面にログインして、【外観 > テーマ】の上部にある「新規追加」をクリック、続いて「テーマのアップロード」をクリックするとアップロード画面が表示されます。こちらからZIP形式にしたテーマフォルダをアップロードするとテーマが追加されます。
もちろんFTPツールでサーバーに直接あげてもOKです。

テーマを適用する前に本番環境でも問題ないかチェックしましょう。作成したテーマをすぐに公開するのではなく、一度テストテーマとして確認するのがおすすめです。

新規サイトの場合

サーバーとドメインの準備がまだできていなければ、これらの設定から必要です。まだどこから借りるかも決まっていない場合は、おすすめのレンタルサーバーやドメインサービスなどを紹介しているサイトがたくさんあるので、比較して考えて決めていきましょう。

私は自分が管理するサイトではロリポップとカラフルボックスというレンタルサーバーを利用しています。

まずはリーズナブルに手軽にサイト運用をしてみたいという人はロリポップがおすすめです。管理画面の操作が比較的分かりやすくネットでの情報も豊富にあります。
カラフルボックスは表示速度の速さやセキュリティ性の高さに定評があるサーバーです。こちらもロリポップほどではありませんが、その他のサーバーと比べると比較的リーズナブルな金額で始められます。

【PR】

ドメインは「お名前.com」や「ムームードメイン」を使用したことがあります。カラフルボックスならサーバーとドメインを一括して契約することもできます。

新しく作るサイトで、もし管理画面の設定や投稿なども一緒に反映させたい場合は、サイトのコピーができるプラグインを利用するのがおすすめです。

データベースをエクスポート・インストールする方法もありますが、プラグインの方が簡単で初心者の方でもすぐにできると思うので、使用したことがなければぜひ試してみてください。

カテゴリー : WordPress

TOPへ