2021.05.27テーマ

WordPressのテーマを自分で作成してみたら意外と簡単だった！

この記事を書いた人

土井純也

WordPressスペシャリスト・エンジニア/株式会社プレート取締役

1985年北海道生まれ。200社以上のWordPressサイトの制作を担当し、「wp.support」では一部上場企業を含め、様々なサイトのWordPress保守・セキュリティをサポートしている。

WordPressを使ってサイトを制作する上で、テーマの選択はSEOを考えた上でもSNS運用を考えた上でも非常に大切です。

当サイトのブログは「Xeory base」と呼ばれるテーマを使っているのですが、このような他人が作ったテンプレートテーマを使ってサイトを作成した場合はカスタマイズしにくいといった欠点があります。
なぜなら、機能やSEOを充実させるためにカスタマイズをしたいと思った時にどこにどんな記述がしてあるのかを理解していなければ、時間と手間がかかってしまうからです。

なので当サイトのような簡単なブログならいいのですが、コーポレートサイトのような作り込む必要のあるHPをワードプレスで作る場合は、カスタマイズや運用をしていく上でオリジナルテーマを作ることが必ず必要となってきます。

しかし！

テーマの作成方法ってなんだか難しそう
今までテンプレートテーマでしかサイトを作成したことがない
オリジナルテーマってすごい時間かかりそう

このような不安を抱えてWodrdPressのテーマを作成することに対して抵抗がありませんか？

実は私もはじめは同様のイメージを抱えていましたが、一度ftpでテーマファイルを触ったことがある人ならすぐにオリジナルテーマが作成できます！テーマファイルを触ったことがない人でもftpにさえつなぐことができるなら、簡単にオリジナルテーマを作成することができます！

wp.makeでテーマ作成した場合の料金はこちら

※なお、ここではデフォルトのWordPressはすでにインストール済みであるとします。また、最初にできるテーマはみすぼらしいものになるので、本番サイトで実行しないでください。

作成に必要なWordPressで使用されているテーマなどのファイルを理解する

WordPressのファイルをFTPなどで見たことがある人はご存知かもしれませんが、テーマのディレクトリ(フォルダ)は「(ワードプレスをインストールしたディレクトリ)/wp-content/themes/」の中にテーマはあります。デフォルトでは「twenty」で始まるテーマディレクトリが3つ備わっています。

(ワードプレスをインストールしたディレクトリ)
└──wp-content
    └──themes
        ├──twentyfifteen
        ├──twentyseventeen
        └──twentysixteen

(ワードプレスをインストールしたディレクトリ)

└──wp-content

└──themes

├──twentyfifteen

├──twentyseventeen

└──twentysixteen

その中を見てもらうと、いくつかのディレクトリとファイルが入っていると思いますが、ここではオリジナルテーマを作成する時に最低限の役割は覚えておくべきファイルを紹介します。

index.php

index.phpはWordPressで作成したテーマのTOPページを表示させるためのファイルになります。
記事の一覧型を表示させるにしろ、記事のようなコンテンツを作成するためにはなくてはならないコンテンツと言えます。
「.php」で終わるファイルは、phpというプログラムを記載したファイルとなります。index.htmlでも良いように思う方もいるかもしれませんが、phpファイルでTOPページを作成することにより別ページのコンテンツの情報を引用することができたり、他のページの更新情報が動的に反映されるといったメリットがあります。

header.php

WordPressのテーマファイルにおいて、ページの「head」部分や「body」の上部までを構成するファイルになります。
index.phpやsingle.phpなどに「head」や「body」を直接記述しても良いのですが、解析タグの挿入やメタタグの挿入など各ページごとに挿入すると面倒となってしまうためheader.phpを作成することで大幅に時間短縮することができます。

footer.php

WordPressのテーマファイルにおいて、ページの<body>下部を構成するファイルになります。footer.phpに記載するのは主にcopyrightやfooterなどheader.phpと同様に各ページの違いがほとんどないものになります。
リマーケティングタグなどは「body」の一番最後に挿入する機会が多いと思いますが、footer.phpさえあれば、一度でほとんどのページに反映させることができるので非常に便利です。

page.php

WordPressのテーマでpage.phpを作成すると自動的に固定ページのテンプレートファイルとして認識されます。
固定ページでも各ページで違うテンプレートを読み込みたいという人は、「page-任意の値.php」というファイルを作成し、冒頭部分に以下の記述をすることにより、WordPressの固定ページを新規作成するときにテンプレートを変更することができます。

<?php
/**
 * Template Name: 任意の名前を設定してください
 */
?>

<?php

/**

* Template Name: 任意の名前を設定してください

seo的には考慮したい記事の親子関係も固定ページではデフォルトで設定することができるので、更新頻度は高くないけどSEOもデザインも意識したいページがあれば固定ページを活用しましょう。

single.php

single.phpは投稿ページのテンプレートです。
WordPressテーマのデフォルトでは一つのテンプレートしかないように思われるかもしれませんが、カテゴリーの名前でテンプレートを切り分けることが可能です。「single-カテゴリー名.php」でsingle.phpよりも優先的に読み込むようになるので、カテゴリーごとにテンプレートを切り分けたい時は活用しましょう。

archive.php

カテゴリーページやタグページなど記事を一覧で表示させるようなページのテンプレートファイルになります。
コーポレートサイトにはあまり必要がないかもしれませんが、ブログやコンテンツマーケティングを行うサイト作成する際のテーマには必須なので、状況に合わせて作成しましょう。

sidebar.php

sidebar.phpはサイトが2カラムや3カラムある時に表示される本体横のコンテンツです。
1カラムのwebサイトには必要ないかもしれませんが、サイドバーがほしいときなど様々なコンテンツを見て欲しい場合には積極的にテーマに取り入れて活用してみてください。

404.php

「404.php」というファイルをWordPressでテーマを作成した場合、ユーザーが存在しないURLに飛んでしまったときに設定をしなくても404.phpで書かれたソースを自動で吐き出してくれます。
なので、SEO的にはnoindexタグを404.phpに挿入することでクロールエラーを極力抑えることができます。

style.css

WordPressのテーマ作成だけではなくwebサイトには欠かせないデザインシートです。
どんなwebサイトにするにしてもhtmlに直接styleを書き込むと修正の際に不便だったり、htmlが見づらくなってしまったりするので極力外部ファイル化して、読み込むようにしましょう。

function.php

もしかすると自分で作成したテーマを作成した場合、最初は記述することがないかもしれませんが、カスタム投稿タイプを追加したりショートコードを作成したりとWordPressのオリジナルテーマを作成するためにはなくてはならない存在です。

wp.makeでテーマ作成した場合の料金はこちら

オリジナルテーマを作成するために必要なファイルの作成方法

WordPressのファイルをみると、サイトによって読み込むべきファイルと読み込まなくても良いファイルがあるのがわかると思います。すべてのファイルをアップロードしても良いのですが、運用していくにあたってどのファイルをいじればいいのかがわかりにくくなってしまうので、なるべく必要最低限だけアップするようにしましょう。

index.phpの作成方法

index.phpの基本的な構造はindex.htmlと同様なのですが、ここでindex.htmlの記述をおさらいしてみましょう。

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

コンテンツ部分やhead部分の記述はしていせんが、このような記述になると思います。しかし、このindex.htmlをindex.phpに設定したとしても動的にコンテンツが吐き出されることはないですし、WordPressのオリジナルテーマでサイト制作に使用するメリットはありません。

なので、一般的なWordPressのindex.phpの構造は次のように記述されていると思います。

<?php get_header(); ?>
・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。
・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、
have_posts()やget_posts()
を使用し該当投稿の情報が引用できるよう記述しましょう。
<?php get_footer(); ?>

<?php get_header(); ?>

・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。

・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、

have_posts()やget_posts()

を使用し該当投稿の情報が引用できるよう記述しましょう。

<?php get_footer(); ?>

一般的なWordPressのindex.phpはこのような形式になっていると思います。bodyの開始がheader.phpに含まれ、bodyの終わりがfooter.phpに含まれていますが、analyticsタグやリマーケティングタグの設定の際にbody直後やbodyの終わり直後を指定することが多いため、このような記述が一般的となっています。

※どうやって下層の投稿データを引用すればいいのかわからない!という方はwp.makeでは簡単なカスタマイズの依頼も受け付けておりますので、ぜひチャットかお問い合わせでご連絡ください。

wp.makeでテーマ作成した場合の料金はこちら

header.phpの作成方法

header.phpはindex.htmlの開始からbodyの始まりまでを記述することが多いです。

<!DOCTYPE html>
<html>
 <head>
  <?php wp_head(); ?>
 </head>
 <body>
  <header>
  </header>

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

</header>

通常のindex.htmlと違い、WordPressでテーマを作成するならhead部分には必ずwp_head()を記述するようにしてください。記載しなければ各プラグインが動作しないなどのエラーが起きてしまうので必須事項です。

またheaderのような各ページの上部で共通化できそうな部分はheader.phpに記述しておくと便利なのでWordPressでサイトを制作するなら積極的に記述していきましょう。

footer.phpの作成方法

WordPressのfooter.phpはbodyとhtmlの閉じタグまでを記述します。

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

</footer>

<?php wp_footer(); ?>

</body>

</html>

header.phpと同様にWordPressでテーマを作成するならwp_footer()を必ず記述してください。header.phpと同様にプラグインが動作しなくなってしまうので要注意です。

そして、footer部分やタグ関係など共通化できる部分は記述して他のページで楽をしましょう。

header.phpの内容はget_header()のところに、footer.phpの内容はget_footer()のところに入ります。なので、上で作ったindex.phpにget_header()やget_footer()を適応すると以下となります。このように結果的に1つのhtmlが出来上がるわけです。

<!DOCTYPE html>
<html>
 <head>
  <?php wp_head(); ?>
 </head>
 <body>
  <header>
  </header>
　　　　・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。
　　　　・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、
　　　　have_posts()やget_posts()
　　　　を使用し該当投稿の情報が引用できるよう記述しましょう。
　　　　<footer>
  </footer>
  <?php wp_footer(); ?>
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

</header>

　　　　・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。

　　　　・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、

　　　　have_posts()やget_posts()

　　　　を使用し該当投稿の情報が引用できるよう記述しましょう。

</footer>

<?php wp_footer(); ?>

</body>

</html>

また、headerやfooterで一部のページだけ共通化させたくないという場合であっても、「is_page()」や「is_single()」といったWordPressオリジナルのpage指定方法があるので、if文で条件分岐を設定してあげれば特定のページだけ読み込んだり読み込ませなかったりすることができます。

phpでif文が書けないという方は、簡単な質問もwp.makeでは受け付けておりますのでお気軽にご相談ください。

page.phpの作成方法

page.phpはワードプレスにおいて固定ページのテンプレートの事です。記述は以下のような形が一般的となっています。

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

<?php get_header(); ?>

<?php if (have_posts()):

while (have_posts()) :

the_post();

the_content();

endwhile;

endif; ?>

<?php get_footer(); ?>

記述している内容は投稿があるかをチェックし、あれば投稿内容を取得する指定をしています。また、上で紹介した固定ページにテンプレートを追加したい場合は以下のような記述になります。

<?php
/**
 * Template Name: 任意の名前を設定してください
 */
get_header(); ?>
<?php if (have_posts()):
              while (have_posts()) :
                 the_post();
                 the_content();
              endwhile;
           endif; ?>
<?php get_footer(); ?>

<?php

/**

* Template Name: 任意の名前を設定してください

get_header(); ?>

<?php if (have_posts()):

while (have_posts()) :

the_post();

the_content();

endwhile;

endif; ?>

<?php get_footer(); ?>

仮にこの状態で「page-sample.php」という名前でアップすれば、WordPressの固定ページにはテンプレート名として「任意の名前を設定してください」というテンプレートが選択できるようになっているので、一度試してみてください。

single.phpの作成方法

single.phpは投稿ページのテンプレートです。

基本的に中身はpage.phpと同じです。

<?php get_header(); ?>
<?php if (have_posts()):
              while (have_posts()) :
                 the_post();
                 the_content();
              endwhile;
           endif; ?>
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
<?php get_footer(); ?>

<?php get_header(); ?>

<?php if (have_posts()):

while (have_posts()) :

the_post();

the_content();

endwhile;

endif; ?>

<?php previous_post_link(); ?>

<?php next_post_link(); ?>

<?php get_footer(); ?>

404.phpの作成方法

404とは「404 Not Found. ファイルが見つかりません。」を意味する数字で、404.phpは例えば記事が見つからないときなどに表示されるテンプレートとなります。

これも中身はindex.phpなどと同様となります。

<?php get_header(); ?>
記事が見つかりません。
<?php get_footer(); ?>

<?php get_header(); ?>

記事が見つかりません。

<?php get_footer(); ?>

style.cssの作成方法

style.cssには以下のようにコメントの形でテーマの情報を追加する必要があります。

/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/
/* この下に通常のcssを書いていく */

Theme Name: テーマの名前（必須）

Theme URL: テーマのサイトのURI

Description: テーマの説明

Author: 作者の名前

Version: テーマのバージョン

Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）

License: テーマのライセンス

License URI: テーマのライセンスのURI

/* この下に通常のcssを書いていく */

今回は必須となっているテーマの名前だけを指定して、以下のように書くことにします。

/*
Theme Name: サンプルテーマ
*/
/* この下に通常のcssを書いていく */

Theme Name: サンプルテーマ

/* この下に通常のcssを書いていく */

「この下に通常のcssを書いていく」の以下に、cssを書いていくことになります。WordPress特有の書き方みたいなものは存在しないので、通常通りにcssを書いていってください。cssについてはここでは解説しません。cssが書けないという方は、やはりオリジナルテーマの作成は難易度がとても高くなってしまうのでお気軽にご相談ください。

wp.makeでテーマ作成した場合の料金はこちら

style.cssを追加したとしても、そのままではstyle.cssは読み込まれません。以下のように、cssを読み込む一文を付け加える必要があります。

<!DOCTYPE html>
<html>
 <head>
　　　　<link rel="stylesheet"　href="<?php echo get_stylesheet_uri(); ?>" > <!-- この一文を付け足しました。 -->
  <?php wp_head(); ?>
 </head>
 <body>
  <header>
  </header>

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

</header>

付け足した行のget_stylesheet_uri()は、style.cssのURLを取得する関数です。linkタグでstyle.cssを指定してcssを読み込むようにすることにより、cssが有効になります。

function.phpの作成方法

上でも言ったとおり、最初はこれを追加する必要はないと思います。必要なときが来たら勉強するということでいいと思います。

wp.makeでテーマ作成した場合の料金はこちら

作成したファイルをftp上でアップロードする

以下のように、sample_themeフォルダを作成し、その下にこれまで作ったファイルをアップしてみてください。

(WordPressをインストールしたディレクトリ)
└──wp-content
    └──themes
        ├──sample_theme
        │   ├──404.php
        │   ├──footer.php
        │   ├──header.php
        │   ├──index.php
        │   ├──page.php
        │   ├──single.php
        │   └──style.css
        ├──twentyfifteen
        ├──twentyseventeen
        └──twentysixteen

(WordPressをインストールしたディレクトリ)

└──wp-content

└──themes

├──sample_theme

│ ├──404.php

│ ├──footer.php

│ ├──header.php

│ ├──index.php

│ ├──page.php

│ ├──single.php

│ └──style.css

├──twentyfifteen

├──twentyseventeen

└──twentysixteen

ここで、sample_themeというのは、テーマ名「サンプルテーマ」から取ったディレクトリ名となります。もし別のテーマを作ってアップするときは、テーマ名を英語(半角英数とハイフンやアンダーバーなど)で表したディレクトリ名をつけることを推奨します。

オリジナルテーマを有効化する

ファイルをftpでアップしても、まだブログの外観は変わっていないはずです。これは、テーマが有効化されていないからです。

テーマを有効にするには、まず管理画面に入り、サイドバーの外観 > テーマをクリックしてください。

すると、以下のような画面が出てきて、その中に「テストテーマ」があると思います。テストテーマの「有効化」をクリックしてください。

これでトップページにアクセスすると、以下のようにindex.phpに書いた内容が表示されると思います。(管理画面にログインしているので、上にはWordPressのヘッダーが表示されているかもしれません。)

(上は、真っ白な画面に文字だけあるのでわかりにくいですが、画像です。)

記事一覧も何も表示されていませんが、これはindex.phpにそういう記述をしていないからです。

オリジナルテーマをカスタマイズする

前節で一応オリジナルテーマを作ることができましたが、あまりにも何もないテーマになりました。ここからカスタマイズしていく必要があります。カスタマイズする方向としては以下のような物があると思います。

そもそも意味のある情報が何も表示されないので、情報が表示されるようにする。
他のページへのリンクを貼る
スタイルが何も入っていないので、cssを設定したり、画像を表示したりして、表示をリッチにする。
その他、コメントを付けられるようにしたり、記事を検索できるようにしたりなど、機能を充実させる。
検索エンジンに引っかかりやすいように、SEO対策をする。

ここでは、最低限、記事一覧を出せし、記事にリンクできるようにします。index.phpを以下の内容に更新してみてください。

<!DOCTYPE html>
<?php get_header(); ?>
<?php if (have_posts()): ?>
  <?php while (have_posts()) : ?>
    <?php the_post(); ?>
    <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
  <?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

<!DOCTYPE html>

<?php get_header(); ?>

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

<?php while (have_posts()) : ?>

<?php the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

<?php get_footer(); ?>

これは、上で特に説明もなくpage.phpなどに書いた記述とほぼ同じになります。詳しくは説明しませんが、以下のようなループを作ると、ループの中で記事の情報を使うことができます。

<!DOCTYPE html>
<?php get_header(); ?>
<?php if (have_posts()): ?>
  <?php while (have_posts()) : ?>
    <?php the_post(); ?>
    ここに記事の情報を使ってなにか表示する。
  <?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>