Jizo Games
WordPress

まずは”小さな”自作テーマをつくってみる

はじめに

WordPressのテーマ制作にあたっては、公式のハンドブック（https://developer.wordpress.org/themes/）を確認しながら進めていきたいと思います。

クラシックテーマでは、PHPという言語で書かれたテンプレートファイルを使ってテーマが作られています。まずは、必要最低限のところから作成していき、必要になったらその都度足し算や引き算を行っていきたいと思います。

VS Codeでプロジェクトフォルダをひらく

まずは、どこでもいいので好きな場所にプロジェクトフォルダを作成します。このフォルダの中に、PHPでのテンプレートファイルや、CSS、画像などのファイルを保存していきます。

フォルダを作成したら、VS Codeを開き、「フォルダーを開く」で今作成したフォルダを開きます。

今回作成するテーマは、「Jizo + Oasis」で「Jizoasis」という名前にしました。

当然ですが、ここは好きな名前をつけて構いません。分かりやすくするため「フォルダ名 = テーマ名」としていますが、WordPressの管理画面などで表示されるテーマ名は、後述するようにCSSファイルで指定するので、一致していなくても大丈夫だと思います。

最小限のファイルで作成してみる

先述のハンドブックによると、テーマとして必須となるファイルはindex.phpとstyle.cssのようです（ハンドブックではブロックテーマを例に説明がありました。たぶんクラシックテーマも同じでしょう）。

index.phpはもっとも基本となるテンプレートファイルで、style.cssはテーマのスタイルシートです。

まずは、index.phpを作成します。VS Codeを開き、Ctrl + Nキーでファイルを新規作成します。以下のコードを書き、「index.php」という名前でテーマフォルダに保存しましょう。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

このコードは、外部から不正にアクセスされ処理を実行されることを防ぐものです。ABSPATHという定数はWordPressで定義されます。ABSPATHが定義されていない、ということはWordPressから呼び出されていないことになるため、その場合は処理を停止するという意味のコードになります。

続いて、style.cssを作成します。こちらはその名のとおりテーマのスタイルシートですが、ファイルの始めにコメントアウトの形でテーマの名前や作者、バージョンなどを記述する必要があります。以下のように記述し「style.css」という名前で保存します。設定できる項目はこれですべてではないので、調べてみるといいでしょう。

@charset "UTF-8";
/*
Theme Name: Jizoasis
Description: Jizo Games Original Theme
Author: Jizo Games
Author URI: https://jizogames.com/
Version: 1.0
*/

２つのファイルを作成し、これですでにテーマとして機能するものが作れました。

さて、このテーマをテスト環境に適用してみましょう。テーマを適用する方法は、通常のサイトと同じように管理画面からzipファイルをアップロードする方法と、XAMPPのインストールフォルダに直接コピーする方法があります。

XAMPPのインストールフォルダにコピーする場合は、（デフォルト設定でインストールした場合は）「C:\xampp\htdocs\wordpress\wp-content\themes」フォルダ内にコピーします。

続いて、WordPressのテスト環境の管理画面から「外観 → テーマ」をクリックすると、先ほどの自作テーマが表示されます。「有効化」しましょう。

サイトを表示してみると、もちろん真っ白です。ほぼなにも書いていませんからね。

しかし、間違いなく自分で作ったテーマを適用することができました。

header.php、footer.phpを追加する

さすがにこれで「自作テーマをつくった」というには早い気がしますよね。

もう少し形にするため、header.phpとfooter.phpというテンプレートを追加します。

header.phpを作成する

新規ファイルを作成し、以下のコードを記述してください。「header.php」という名前で保存します。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: https://ogp.me/ns#">
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <?php wp_head(); ?>
</head>
<body>
    <header id="js-global-header" class="global-header" aria-label="ページヘッダー">
        <h1 class="site-title" translate="no"><?php bloginfo( 'name' ); ?></h1>
    </header>

PHPでの記述を交えながら、通常のHTMLファイルの<head>タグから<header>タグの中身を書いていくイメージになります。

注目は、</head>直前の「wp_head()」という関数です。これがあることで、<head>タグ内に必要な情報が自動でHTMLとして出力されるようになります。

footer.phpを作成する

続いて、「footer.php」を作成し以下のコードを記述します。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
    <footer class="global-footer" aria-label="ページフッター">
        <div class="copyright">
            <p translate="no"><small>&copy; <?php bloginfo( 'name' ); ?></small></p>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

ここでも注目は「wp_footer()」です。これもwp_header()同様、必要な情報をWordPress側で自動で出力してくれるものになります。

また、header.phpで記述した<html>タグや<body>タグの閉じタグ（</html></body>）も忘れずに書いておきましょう。

index.phpに追記する

header.php、footer.phpを作成しました。しかしこれだけでは、ウェブサイトに内容は反映されません。index.phpにそれぞれの内容を出力するためのコードを追記しましょう。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>
<div class="contents-wrapper">
    <p>Jizo Games さいこう！</p>
</div>
<?php get_footer(); ?>

「get_header()」「get_footer()」のそれぞれの関数で、ヘッダーのテンプレートとフッターのテンプレートを呼び出しています。

index.phpへの追記が終わったら、テスト環境のテーマを上書きして更新します。もう一度サイトを表示してみましょう。まだまだウェブサイトというには寂しいですが、headerやfooterの内容が表示されていることが確認できます。

まとめ

WordPressテーマは、index.phpとstyle.cssがあれば機能します。

それだけでは寂しいので、様々なテンプレートファイルを追加してWordPressの機能を最大限活かしていくことができます。今回は、header.phpとfooter.phpを追加しました。

まだまだ小さなテーマですが、成長が楽しみになってきましたね！

X Facebook LINE Pocket