作成日:

静的 HTML を WordPress 化するための最低限のテーマを作成する

このページは、静的 HTML を WordPress 化するための最低限のテーマの作成手順についてまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • 動作確認したバージョンは WordPress 5.2.4 です。
  • WordPress の機能の使用自体も最低限のものになります。
    • 新着情報は投稿で作成する仕組みにします。
    • 中ページは固定ページで作成する仕組みにします。(内容を管理画面上で編集できる)
    • メニューやサイドバーなどのWordPress の機能は使わず、元のHTMLをほぼそのまま使います。

最低限のテーマのファイル構成

本当に最低限にする場合、テーマのファイル構成は下記のような形になります。(カスタマイズはしにくいですが、テーマ設定での選択はできる状態)

WordPressのフォルダ/
    wp-content/
        themes/
            フォルダ/
                index.php
                style.php

ある程度作成・管理しやすいようにした最低限のテーマのファイル構成は下記のようになります。

WordPressのフォルダ/
    wp-content/
        themes/
            フォルダ/
                index.php
                style.php
                functions.php (<title> の追加)
                front-page.php (トップページ用) ※1
                home.php (投稿一覧ページ用)
                single.php (投稿ページ用)
                page.php (固定ページ用)
                404.php (404ページ用)

※1 「表示設定」 > 「ホームページの表示」を「固定ページ」にしていない場合は home.php がトップページ兼投稿一覧ページ用のテンプレートファイルになります。
よくある「トップページに新着情報を数件表示して、新着情報一覧ページで全件表示する」というケースでは「表示設定」 > 「ホームページの表示」を「固定ページ」にしたほうが作成がしやすいです。

最低限のテーマの作成手順

1. WordPressの設定でテーマが選択できるようにする

最低限下記ができていれば作成したテーマをテーマ設定で選択することができるので、まずはこの部分だけ作業します。

  1. WordPressのフォルダ/wp-content/themes の下に新しくフォルダを作る
  2. 作成したフォルダの中に style.css と index.php ファイルを作る
  3. 作成した style.css の中にコメントでテーマ名を記載する

この段階では、公開側で常に index.php に書いてある内容が表示されるだけのテーマです。

style.css

/*
Theme Name: サイト名
*/

index.php (例。内容は何でも可)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/style.css">
    <title>サイト名</title>
</head>
<body>
    サイトの内容

    <script src="/js/script.js"></script>
</body>
</html>

確認

まずはここまでで、

  • 管理側のテーマ設定に新しく作ったテーマが表示されていて、有効化できること
  • 有効化したのち、公開側で元の静的HTMLの内容が表示されること

を確認してください。
テーマ設定の画面でスクリーンショットを表示したい場合は、作成したフォルダ内に screenshot.png という名前でスクリーンショットを配置してください。

ある程度作成・管理しやすいようにした最低限のテーマの作成手順

「最低限のテーマの作成手順」で作成したテーマにファイルを追加していきます。
先に「最低限のテーマの作成手順」の手順を行っておいてください。

2. ヘッダーとフッターを分ける

index.php の内容を変更してヘッダー (header.php) とフッター (footer.php) のファイルに分けます。

ヘッダーとフッターを分けておくと、投稿ページ (single.php 等)、固定ページ (page.php 等)、404ページ (404.php) などのテンプレートファイルでもヘッダーとフッターを使い回すことができて便利です。

※ ここでのヘッダーとは「どのページでも常に出力させる先頭の HTML タグ (<!DOCTYPE html>～グローバルナビ等)」、フッターとは「どのページでも常に必要な末尾の HTML タグ (コピーライト等～</html>」のことです)

index.php

<?php get_header(); ?>

<?php get_footer(); ?>

get_header() で header.php が、get_footer() で footer.php が読み込まれます。

header.php の雛形

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="<?php echo esc_html(home_url()); ?>/css/style.css">
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
<!-- グローバルナビなどもあればここに記載 -->
  • <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>"> はテーマの CSS (テーマフォルダ内の style.css) を読み込むためのタグですが、 テーマの CSS を使用しない場合は追加しなくてもよいです。
    (<link> タグではなく functions.php で wp_enqueue_style() を使用して読み込む方法もあります)
  • wp_head() は必ず追加して下さい。(WordPress 本体やプラグインの JavaScript や CSS のタグがこの部分で出力されるため、追加しないとプラグイン等が動作しなくなります)
  • <title> は functions.php (後述) で追加するため、ここでは消しておきます。
  • CSS、JS、画像のパス、内部リンクには <?php echo esc_html(home_url()); ?> や <?php echo home_url(); ?> を使用すると便利です。

footer.php の雛形

<!-- フッターナビやコピーライトなどもあればここに記載 -->
<?php wp_footer() ?>
<script src="<?php echo esc_html(home_url()); ?>/js/script.js"></script>
</body>
</html>

wp_footer() は必ず追加して下さい。(wp_head() と同じ理由)

確認

公開側のページをブラウザで再読み込みして、ページが崩れたりしていないかを確認してみてください。

3. <title> を出力できるようにする

<title> を設定するために、フォルダ内に functions.php を用意して下記の内容を記載します。

functions.php

<?php
add_theme_support('title-tag'); // タイトルを付ける
add_filter('document_title_separator', function(){ return '|'; }); // タイトルの区切り文字を「|」にする (必要な場合)

確認

公開側のページをブラウザで再読み込みして、<title> タグが出力されているかを確認してみてください。

4. トップページと投稿一覧ページのテンプレートを作成する

トップページと投稿一覧ページのテンプレートを作成します。手順は下記になります。

  1. トップページと投稿一覧ページの固定ページを作成する (タイトルのみで内容は空でよいです。投稿一覧ページは、パーマリンク (URL スラッグ) を「news」など必要なものに変更してください)
  2. 「表示設定」 > 「ホームページの表示」を「固定ページ」に変更し、「ホームページ」「投稿ページ」に 1. で作成した固定ページを指定する
  3. front-page.php (トップページ用) と home.php (投稿一覧用) を用意する

front-page.php の雛形

<?php get_header(); ?>

<!--
ここにトップページの元HTMLのヘッダーとフッター以外の部分を貼り付けて調整します。
-->

<?php get_footer(); ?>

新着情報の出力が必要な場合は下記の雛形コードを使用しながら調整してください。

投稿を新着情報として表示するための雛形コード
<?php
$q = new WP_Query(array(
    'posts_per_page' => 5 // 表示件数
));
while ($q->have_posts()): ?>
    <?php $q->the_post(); ?>
    <?php
        // カテゴリ (最初のカテゴリ名のみ。リンク付きですべて表示する場合は the_category(); を使用します)
        $cat = get_the_category();
        $cat_name = isset($cat[0]->cat_name) ? $cat[0]->cat_name : '';
        echo esc_html($cat_name);
    ?>
    <?php the_time('Y年m月d日'); /* 投稿の公開日 */ ?>
    <?php the_title(); /* 投稿タイトル */ ?>
<?php
    wp_reset_postdata();
endwhile ?>

home.php の雛形

<?php get_header(); ?>

<!--
ここに投稿一覧の元HTMLのヘッダーとフッター以外の部分を貼り付けて調整します。
-->

<?php get_footer(); ?>

一覧を出力する部分は下記の雛形コードを使用しながら調整してください。

<?php while (have_posts()): ?>
    <?php the_post(); ?>
    <?php
        // カテゴリ (最初のカテゴリ名のみ。リンク付きですべて表示する場合は the_category(); を使用します)
        $cat = get_the_category();
        $cat_name = isset($cat[0]->cat_name) ? $cat[0]->cat_name : '';
        echo esc_html($cat_name);
    ?>
    <?php the_time('Y年m月d日'); /* 投稿の公開日 */ ?>
    <?php the_title(); /* 投稿タイトル */ ?>
<?php endwhile ?>
<?php the_posts_pagination(); /* ページネーション */ ?>

タイトルをリンクにしたい場合は <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> のようなコードにしてください。

確認

  • 公開側のトップページをブラウザで開いて、トップページの表示を確認してみてください。
  • 管理画面でいくつか投稿を作成・公開しておき、トップページ上に表示されるか確認しながらスタイルなどを調整してください。
  • 投稿一覧ページをブラウザで開いて、投稿一覧ページの表示を確認してみてください。
    (投稿一覧ページは管理画面経由で投稿一覧の固定ページを表示して確認するとどのURLになっているかも含めて確認がしやすいと思います)

5. 固定ページのテンプレートを作成する

固定ページのテンプレートを作成します。手順は下記になります。

  1. page.php を用意する
  2. 管理画面で固定ページをいくつか作成する (タイトルはページタイトル、内容は元HTMLのタグをそのまま使用)

page.php の雛形

<?php get_header(); ?>

<?php while (have_posts()): ?>
    <?php the_post(); ?>
    <?php the_title(); ?>
    <?php the_content(); ?>
<?php endwhile ?>

<?php get_footer(); ?>

確認

管理画面経由などで固定ページをブラウザで表示して確認してみてください。

6. 投稿ページのテンプレートを作成する

投稿ページのテンプレートを作成します (必要な場合)。手順は下記になります。

  1. single.php を用意する
  2. 管理画面で投稿をいくつか作成する (トップページや投稿一覧ページの作成時にすでに投稿を作っている場合は不要です)

single.php の雛形

<?php get_header(); ?>

<?php while (have_posts()): ?>
    <?php the_post(); ?>
    <?php the_title(); ?>
    <?php the_content(); ?>
<?php endwhile ?>

<?php get_footer(); ?>

確認

管理画面経由などで投稿をブラウザで表示して確認してみてください。

7. 404ページのテンプレートを作成する

404ページのテンプレートを作成します (必要な場合)。

404.php の雛形

<?php get_header(); ?>

ページが見つかりません。

<?php get_footer(); ?>

確認

存在しないURLをブラウザで開いてみて、404ページが表示されるか確認してみてください。