WordPressテーマを作りたい！まずは最小構成のテーマを作ってみる。

2024年9月11日2024年9月12日

はい、こんにちは。普段は広告やWEBサイトのデザインの仕事をしている「にじいろのたか」です。
絵が下手っぴ系のデザイナーです。シュールな絵を描きます。

さて。

最近やりたい熱が上がっているのがWordPressのテーマ作成。
自分で1から作ってリリースするところまでやってみたい。
そんな野望を持っています。

実はWordPressテーマは仕事でよく制作します。
企業サイトって言われる、その会社ごとのオーダーメイドのWordPressテーマです。
それに関しては年間いくつも作成しています。

なので、WordPressに関しては慣れている方だとは思うのですが、汎用的なWordPressテーマとなると勝手が違います。どんな環境でもどんなユーザーでも満足できるようなテーマを作るというのは中々難しいのです。

それに挑戦してみたい！そんな熱が高まってます。

WEBデザイナーとして独立して10数年が過ぎて、
新しい目標というかステージに行きたいというか、
ちょっとマンネリ化してた日々の業務に風穴を開けたい。

というわけで今日からWordPressテーマ作成の旅に出ます。

まずは最小構成のテーマを作るところから。

最初に何をするか。

テーマのコンセプトなどを考える前に、ちょっとだけ手を動かしたい。
というわけで最小構成のテーマを作ってみます。
テーマ名はとりあえずの「prototype」という名前にしておきます。

WordPressはテーマフォルダ内にstyle.cssとindex.phpが必要になります。

今回はシンプルにprototypeフォルダにstyle.cssとindex.phpが格納されているデータ構造で、それぞれのファイルに必要なコードを書いてみました。

style.css

style.cssのヘッダーにWordPress側で必要な情報をコメントで記載しておきます。

/*
Theme Name: prototype
Theme URI: 
Author: nijiiro
Author URI: 
Description: テーマ制作のためのプロトタイプ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iii
*/

今回はこれだけで特にスタイルは記述しません。
URIなどの情報は一旦空欄にしてます。

index.php

index.phpはテーマやサイト全体の表示において重要な役割を果たす最後の門番的なファイルです。
WordPressは目的のテンプレートが見つからない時、代用するテンプレートを探して表示します。
最終的にテンプレートが見つからなかったときに呼び出されるのがindex.phpです。

下記のファイルは基本的なレイアウトの構造だけを記述しました。
このままではテキストは画像などは何も表示されません。
ただ、どのテンプレートでも流用できるシンプルな構造にしてあるので、このファイルをベースの各種テンプレートを作成していきたいと思います。

<?php
/**
 * index.php
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div class="l-wrapper">

        <header id="header" class="l-header"></header>

        <div id="content" class="l-content">
            <div class="l-content__body">
                <!--ここまでheader.php-->    

                <main id="main" class="l-main"></main>

                <!--ここからfooter.php-->
                <aside id="sidebar" class="l-sidebar"></aside>

            </div><!--end l-content__body-->
        </div><!--end l-content-->

        <footer id="footer" class="l-footer"></footer>
        <?php wp_footer(); ?>

    </div>        
</body>
</html>