ウェブサイトの外観や機能を高度にカスタマイズしたい開発者にとって、WordPressのテーマ開発を学ぶことは非常に価値のあるスキルです。既製のテーマを使用するのとは異なり、自分でテーマを作成することで、完全な制御権を持ち、他にはない独自のデザインや優れたパフォーマンスを実現し、特定のニーズに合わせたウェブサイトを構築することができます。この記事では、環境の構築から基本的なテンプレートファイルの作成まで、初めてのカスタムWordPressテーマを作成するための主要なステップを順を追って説明します。
開発環境とツールの準備
コードの執筆を始める前に、適切なローカル開発環境が必要です。これにより、オンラインサイトに影響を与えることなくテストやデバッグを行うことができます。
ローカルサーバーの環境設定
統合されたローカルサーバーソフトウェアパッケージの使用をお勧めします。例えば、XAMPP、MAMP（Mac向け）、またはLocal by Flywheelなどです。これらのツールはApacheサーバー、MySQLデータベース、PHPをワンクリックでインストールしてくれるため、面倒な設定作業が不要です。XAMPPを例にとると、インストール後にApacheおよびMySQLサービスを起動するだけで、ローカルサーバー環境が準備できます。
コードエディターの選択
機能豊富なコードエディタは、効率的な開発に欠かせないツールです。Visual Studio Code (VS Code) は現在非常に人気のある選択肢で、無料で軽量な上、PHP Intelephense（PHPコードのインテリセンス機能）、WordPress Snippet（コードスニペット）、Live Server（リアルタイムプレビュー機能）など、多くの拡張プラグインが用意されており、開発効率を大幅に向上させることができます。
WordPressのコアファイルのインストール
ローカルサーバーのルートディレクトリ（例えばXAMPPの`htdocs`フォルダ）に、「my-first-theme」という名前の新しいプロジェクトフォルダを作成してください。次に、WordPress.orgの公式サイトから最新のWordPressの圧縮ファイルをダウンロードし、解凍した後、すべてのファイルを`my-first-theme`フォルダに移動させてください。その後、ブラウザで`http://localhost/my-first-theme`にアクセスし、有名な「5分でインストール」の手順に従ってWordPressのインストールを完了してください。設定したデータ名、ユーザー名、パスワードを必ず覚えておいてください。これらは後でデータベースに接続する際に必要になります。
トピックを作成するための基本構造とファイル
WordPressのテーマとは、本質的には`wp-content/themes/`ディレクトリ内にあるフォルダのことで、その中には特定の機能を持つPHPテンプレートファイル、スタイルシート、スクリプトファイルが含まれています。
テーマフォルダとスタイルシート
まず、ローカルのWordPressインストールディレクトリ内の`wp-content/themes/`に移動し、新しいフォルダを作成します。そのフォルダの名前は、例えば`mycustomtheme`のように、自分が作成するテーマの名前にします。このフォルダ内で最初に作成する必要がある、そして最も重要なファイルが`style.css`です。このファイルのヘッダーに記載されたコメントは、テーマ情報を宣言するためだけでなく、WordPressがそのテーマを認識するための鍵となります。
推薦図書 WordPressテーマ開発入門ガイド：ゼロからカスタムテーマを構築する方法。
私たちはこのアプリを開発し、あなたの個人データを収集しています。````css
/*
テーマ名：My Custom Theme
テーマのURI: https://example.com/mycustomtheme
著者：あなたの名前
著者のURI: https://example.com
説明：これは私が初めて自作したWordPressテーマで、開発の学習に使用しています。
バージョン：1.0.0
ライセンス：GPL v2 以降
テキストドメイン：mycustomtheme
*/
```
コアテンプレートファイル：`index.php` と `functions.php`
`index.php`ファイルを作成してください。これはテーマのデフォルトのテンプレートファイルであり、バックアップ用のテンプレートでもあります。より具体的なテンプレートファイルが存在しない場合、WordPressはこのファイルを使用してページをレンダリングします。最初は、非常にシンプルな内容で構いません。
php
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
// 一時的に記事のタイトルを簡単に出力する
タイトル( ' )'<h2>', '</h2>' );
コンテンツ();
`endwhile;`;
else :
私はこれをあなたに送ります。'<p>記事はありません。</p>';
終わり；;
?>
<?php wp_footer(); ?>
</body>
</html>
```
次に、`functions.php`ファイルを作成してください。これはあなたのテーマの「エンジン」であり、機能の追加や機能の有効化（例えば記事のサムネイル表示）、スタイルやスクリプトの順次読み込みなどを行うためのものです。
php
<?php
// 記事の特徴的な画像機能を有効にする
`add_theme_support('post-thumbnails');`;
// メニュー機能のサポートを追加します。
`add_theme_support('menus');`;
// ナビゲーションメニューの項目を登録する
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );
// メインスタイルシートを正しく読み込んでいます。
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```
推薦図書 WordPressテーマ開発入門：ゼロから最初のカスタムテーマを作成する。
上記の手順を完了したら、WordPressの管理画面にログインし、「外観」→「テーマ」に移動してください。そこでは「My Custom Theme」というテーマが表示されるはずです。それを有効にするためにクリックしてください。
テンプレートの階層構造とよく使用されるテンプレートファイル
WordPressのテンプレート階層を理解することは、テーマ開発の核心です。これにより、WordPressが異なるタイプのページリクエストに対して、どのテンプレートファイルを優先的に使用するかが決まります。
テンプレートの階層構造に関する概念
WordPressは、現在表示されているページのタイプに応じて、特定の優先順位でテンプレートファイルを探します。例えば、個別のブログ記事にアクセスした場合、WordPressは以下の順番でテンプレートファイルを探します：`single-post.php` → `single.php` → `singular.php` → `index.php`。存在する最初のファイルが見つかったら、それを使用します。
共通テンプレートファイルの作成
このレベルを基にして、テーマをより豊かにするためのより具体的なテンプレートファイルの作成を始めることができます。
- `header.php` と `footer.php`：`index.php` 内のヘッダー部分とフッター部分のコードをこれら2つのファイルに分離し、`index.php` 内で `get_header()` および `get_footer()` 関数を使用してそれらを読み込むようにします。これにより、コードの再利用が可能になります。
- `page.php`：静的なページを表示するためのファイルです。まずは`index.php`の内容をコピーして`page.php`を作成し、その後でカスタマイズを加えてください。
- `single.php`：単一の記事を表示するためのファイルです。通常、ここには記事のタイトル、内容、公開日、著者、カテゴリ、タグなどの情報が含まれています。
- `archive.php`：記事のアーカイブ一覧を表示するためのファイルで、カテゴリー、タグ、著者、日付などによるアーカイブページを作成する際に使用されます。
- `front-page.php`：このファイルが存在する場合、それがウェブサイトのホームページとして使用され、`home.php`や`index.php`よりも優先順位が高くなります。ここで独自のホームページレイアウトをデザインすることができます。
これらのファイルを作成すると、あなたのテーマの構造がより明確でプロフェッショナルなものになります。
推薦図書 WordPressテーマ開発完全ガイド：入門から上級まで。
スタイルと基本機能の追加
スタイルが設定されていないテーマは「原始的」な状態ですが、いくつかの基本的な機能を追加することで、そのテーマの実用性やユーザー体験を大幅に向上させることができます。
基本的なCSSスタイルを作成する
`style.css`ファイルの冒頭にあるコメントの下から、スタイルルールの記述を始めてください。まずはブラウザのデフォルトスタイルをリセットし、全体的なフォントや色を設定します。その後、ヘッダー、ナビゲーション、メインコンテンツエリア、サイドバー（後で追加する場合）、フッターの各部分について順にスタイルを設計していきましょう。レスポンシブデザインのためのメディアクエリを使用して、ウェブサイトがスマートフォン、タブレット、コンピューターのいずれのデバイスでも正常に表示されるようにしてください。
私たちはこのアプリを開発し、あなたの個人データを収集しています。````css
/* 基本設定のリセットとグローバルスタイル */
* {
`margin: 0;`;
`padding: 0;`;
`box-sizing: border-box;`;
}
ボディ {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
`color: #333;`;
`background-color: #f4f4f4;`;
}
.container {
幅: 90%;
`max-width: 1200px;`;
`margin: 0 auto;`;
`padding: 20px;`;
}
/* ヘッダースタイル */
ヘッダー {
背景：#333;
`color: #fff;`;
`padding: 1rem 0;`;
`text-align: center;`;
}
/* ナビゲーションメニューのスタイル */
.primary-menu {
/* あなたのナビゲーションメニューのスタイル */
}
```
ナビゲーションメニューとサイドバーを実装する
`header.php`内に用意されているメニュー用の領域において、`wp_nav_menu()`関数を使用して`functions.php`で登録されたメニューを表示します。
php
```
サイドバーを追加するには、まず`functions.php`内でサイドバー用のツールバー領域を登録する必要があります。
php
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'mycustomtheme_widgets_init' );
```
その後、サイドバーを表示したい場所（例えば`index.php`や`single.php`のメインコンテンツエリアの横）で、`dynamic_sidebar('sidebar-1')`関数を使用してサイドバーを表示します。
概要
この記事の手順に従って、ゼロから基本的なWordPressカスタムテーマを構築する旅を完了しました。ローカル開発環境の構築方法、`style.css`、`index.php`、`functions.php`を含むテーマのコアファイルの作成方法、テンプレートの階層構造の理解、およびよく使われるテンプレートの拡張方法について学びました。さらに、テーマに基本のスタイルやナビゲーションメニュー、サイドバーなどの機能を追加しました。これはあくまで始まりに過ぎません。これからは、より高度なテンプレート（検索ページ`search.php`や404ページ`404.php`など）の探求を続けたり、WordPressのThe Loopの機能をさらに学んだり、JavaScriptフレームワークを統合したり、自分のテーマをWordPressの公式テーマディレクトリに提出したりすることができます。継続的な実践と公式の開発マニュアルの参照が、スキル向上の最良の方法です。
FAQ よくある質問
WordPressテーマを開発するには、どのような前提知識が必要ですか？
HTMLとCSSの基本知識が必要であり、これによってウェブページの構造とスタイルを作成します。また、PHPについても基本的な理解が不可欠です。なぜなら、WordPressのテーマは主にPHPのテンプレートファイルで構成されているからです。JavaScriptについても少し知っていると、インタラクティブな機能を追加する際に役立ちますが、入門段階では必須ではありません。
なぜ私の新しいテーマがWordPressの管理画面のテーマ一覧に表示されないのでしょうか？
まず、ご使用のテーマフォルダーが`wp-content/themes/`ディレクトリ内に正しく配置されているかを確認してください。次に、`style.css`ファイルがそのフォルダーのルートディレクトリに存在するか、そしてそのファイルのヘッダー部分に記載されているコメント情報（テーマ名など）の形式が正しいかを確認してください。いずれかのエラーがあると、WordPressがテーマを認識できなくなる可能性があります。
functions.phpファイルの役割は何ですか？
`functions.php`ファイルは、あなたのテーマの機能を管理するための中心となるファイルです。このファイルを使用して、WordPressのコア機能を有効にしたり変更したり（例えば、テーマサポートのオプションを追加するなど）、ナビゲーションメニューやサイドバーのツールバー領域を登録したり、CSSスタイルシートやJavaScriptスクリプトを安全に読み込んだり、カスタム関数やフィルターを定義したりします。これは、テーマの機能を拡張する上で非常に重要なファイルです。
どうやって私のテーマを多言語に対応させることができるでしょうか？
让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。
開発が完了した後、テーマをオンラインサイトにデプロイするにはどうすればよいでしょうか？
テーマのデプロイ方法には主に2つあります。1つ目は、FTP/SFTPクライアント（例：FileZilla）を使用して、ローカルのテーマフォルダをウェブサイトの`wp-content/themes/`ディレクトリに直接アップロードする方法です。2つ目は、テーマをZIPファイルに圧縮し、WordPressの管理画面で「外観」→「テーマ」→「新しいテーマを追加」→「テーマをアップロード」の手順に従ってインストールするより専門的な方法です。どちらの方法を使用する場合でも、デプロイする前にウェブサイトのテスト環境で十分にテストすることをお勧めします。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語