【WordPressテーマ作成】最低限必要のファイルでシンプルなオリジナルテーマを作る方法

2024.09.14

WordPressは、世界中で利用されている人気のCMS（コンテンツ管理システム）です。テーマを使ってデザインや機能をカスタマイズすることで、クライアントに最適なWebサイトを提供できます。フリーランスデザイナーとして収入をアップさせたいなら、既存のテーマをカスタマイズするだけでなく、自分でテーマをゼロから作成できるスキルは非常に強力な武器となります。

この記事では、最低限必要なファイルだけを使って、シンプルなオリジナルWordPressテーマを作成する方法を解説します。HTMLとCSSに慣れている方なら、このプロセスを理解すればすぐにでもオリジナルテーマを作成できるようになります。

Contents

1. WordPressテーマ作成の基本構造
2. style.css-テーマのデザインと情報を定義するファイル
- style.cssの基本構成
3. index.php-ページの基本テンプレート
- シンプルなindex.phpの例
4. functions.php-テーマの機能を追加するファイル
- 必要最低限のfunctions.php
5. オリジナルテーマを使うための設定
- 1. ヘッダーとフッターの作成
- 2. レスポンシブデザインの実装
6. テーマの拡張-クライアント向けにカスタマイズ
まとめ：オリジナルテーマ作成のメリット

1. WordPressテーマ作成の基本構造

WordPressテーマには、特定のファイルが必要です。これらのファイルが存在しないと、テーマは正しく機能しません。最低限必要なファイルは以下の3つです。

style.cssテーマのスタイルシート。デザイン全体を制御します。
index.phpページのテンプレートファイル。コンテンツの表示方法を定義します。
functions.phpテーマの機能を拡張するためのファイル。

これらのファイルを揃えるだけで、動作するテーマが完成します。それでは、それぞれのファイルの役割と内容について詳しく見ていきましょう。

2. style.css-テーマのデザインと情報を定義するファイル

style.cssは、単なるスタイルシートではなく、WordPressにテーマの情報を伝える重要なファイルです。このファイルには、テーマのメタデータ（テーマ名、作者、バージョンなど）を記述する必要があります。また、ここに書いたCSSは、サイト全体のデザインを決定します。

style.cssの基本構成

/*
Theme Name: My First Theme
Author: あなたの名前
Description: はじめて作ったWordPressオリジナルテーマ
Version: 1.0
*/

body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #f4f4f4;
}

h1 {
    font-size: 2em;
    color: #0073aa;
}

p {
    font-size: 1em;
    line-height: 1.6;
}

このように、style.cssの最初にテーマの基本情報をコメントとして書き、その後にCSSコードを記述します。このメタデータは、WordPress管理画面の「テーマ」セクションに表示され、テーマの識別や情報提供に役立ちます。

3. index.php-ページの基本テンプレート

index.phpは、WordPressテーマの中で最も重要なテンプレートファイルです。サイトのどのページでも、このファイルが呼び出される可能性があります。基本的には、header.phpやfooter.phpなど他のテンプレートファイルと連携して使用されますが、最低限このindex.phpさえあれば、すべてのページを表示できます。

シンプルなindex.phpの例

<?php get_header(); ?>


    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title('<h1>', '</h1>');
            the_content();
        endwhile;
    else :
        echo '<p>No posts found</p>';
    endif;
    ?>


<?php get_footer(); ?>

このコードは、WordPressの「ループ」を使って投稿やページのタイトルと本文を表示する非常に基本的な構造です。get_header()とget_footer()関数で、ヘッダーとフッターを呼び出しますが、最低限のファイルとしてはこれだけでも十分機能します。

4. functions.php-テーマの機能を追加するファイル

functions.phpは、テーマの機能を拡張するためのファイルです。このファイルには、テーマに特定の機能を追加するためのコードを書きます。たとえば、テーマサポートの有効化やメニュー、ウィジェットの登録などです。

必要最低限のfunctions.php

<?php
function my_theme_setup() {
    // アイキャッチ画像（投稿サムネイル）のサポート
    add_theme_support( 'post-thumbnails' );

    // ページのタイトルタグを自動追加
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

このコードでは、アイキャッチ画像（投稿サムネイル）を使えるようにし、ページタイトルタグを自動的に生成する設定を追加しています。これだけで、投稿やページに関連した機能がしっかり動作します。

5. オリジナルテーマを使うための設定

ここまで説明したstyle.css、index.php、functions.phpの3つのファイルを用意するだけで、オリジナルテーマは機能します。しかし、テーマをよりプロフェッショナルなものにするためには、以下の追加設定を検討すると良いでしょう。

1. ヘッダーとフッターの作成

header.phpサイト全体の共通ヘッダーを作成し、ナビゲーションメニューやロゴを表示する。
footer.phpサイトの共通フッターを作成し、コピーライトやSNSリンクを配置する。

2. レスポンシブデザインの実装

Responsivestyle.cssにメディアクエリを追加して、スマートフォンやタブレットなどの異なるデバイスに対応するデザインを実装する。

Webデザインをスキルアップしたい人におすすめの講座です

6. テーマの拡張-クライアント向けにカスタマイズ

最低限のファイルでテーマを作成した後は、クライアントに合わせたカスタマイズを行うことが可能です。クライアントが求めるデザインや機能を追加することで、テーマの価値を高められます。以下はその一例です。

1. カスタム投稿タイプの追加

特定の業種向けのカスタム投稿タイプを追加することで、クライアントのニーズに合わせたテーマに仕上げることができます。

2. ウィジェットエリアの追加

サイドバーやフッターにウィジェットを追加することで、柔軟なコンテンツ管理が可能になります。

3. カスタムフィールドの利用

クライアントが簡単にコンテンツを管理できるように、カスタムフィールドを追加して特定の情報を入力できるようにします。

まとめ：オリジナルテーマ作成のメリット

最低限のファイルだけで作成できるシンプルなテーマでも、クライアントに提供することで独自のデザインと機能をアピールできます。フリーランスデザイナーとして収入をアップさせるためには、クライアントに合わせた柔軟なテーマ作成スキルが大切です。

今回紹介した内容をベースに、クライアントの要望に応じたオリジナルテーマを作成し、提供できるようになれば、より高い報酬を得られるチャンスが広がるでしょう。

hirominx- freelance web designer -

異業種を経て2008年にWeb業界へ。はじめはWeb制作の知識やスキル・経験ゼロの状態から独学でデザインを学び、企業のインハウスデザイナーやWeb制作会社を経て独立。これまでに300件以上の様々な制作案件に携わる。現在もフリーランスデザイナーとして活動しながら、Udemyなどのオンライン学習プラットフォームにて初学者向け講座のデザイン講師を務める。

« 前の記事　|　ALL　|　次の記事 »