準備作業と環境設定
最初のコード行を書き始める前に、適切な開発環境を整えることが効率的な開発のための基盤となります。構造が明確で機能が充実したローカル環境を利用することで、環境設定の問題に悩むことなく、テーマのロジックに集中することができます。
ローカル開発環境の選択と設定
Apache/Nginx、PHP、MySQLを統合したローカルサーバーソフトウェアパッケージの使用をお勧めします。例えば、Local by Flywheel、XAMPP、MAMPなどです。これらのツールを使えば、ワンクリックでWordPressの運用に適したPHP環境を構築できます。最新のWordPressの機能との互換性を確保するために、PHPのバージョンは7.4以上、MySQLのバージョンは5.6以上であることをご確認ください。
基本テーマファイルの構造を作成する
最もシンプルなWordPressテーマには、少なくとも2つのファイルが必要です：style.css と index.phpしかし、明確さとメンテナビリティのために、最初から規則正しいカタログ構造を作成することをお勧めします。あなたのWordPressのインストールディレクトリ内で… wp-content/themes/ フォルダーに新しいフォルダーを作成します。 my-custom-themeこのフォルダ内で、まず以下のコアファイルを作成してください：
- style.cssテーマスタイルシートは、テーマの「身分証明書」のようなもので、テーマに関する情報が含まれています。
- index.phpテーマのメインテンプレートファイルで、デフォルトのページ表示を制御します。
- functions.php: テーマの機能を定義するファイルで、新しい機能の追加やメニュー、サイドバーなどの設定に使用されます。
- header.php：ウェブサイトのヘッダーテンプレート。
- footer.php：ウェブサイトの下部テンプレート。
推薦図書 WordPressテーマ開発：ゼロからプロフェッショナルレベルのウェブサイトテーマを構築するための完全ガイド。
テーマのコアファイルとテンプレートの階層構造を構築する
WordPressはテンプレートの階層システムを採用しており、異なる種類のリクエストに対してどのテンプレートファイルを読み込むかを決定しています。これらのテンプレートファイルを正しく理解し、適切に構築することがテーマ開発の核心です。
テーマ情報の定義とリソースの導入
style.css ファイルのヘッダーには、必ず形式化されたコメントを含める必要があります。このコメントは、WordPressに対してあなたのテーマについて情報を提供するためのものです。これはテーマを有効にするための前提条件です。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/その後、あなたは以下のことを行う必要があります： functions.php ファイル内で、以下の方法により… wp_enqueue_style() と wp_enqueue_script() この関数は、CSSファイルとJavaScriptファイルを正しく読み込んでいます。これはWordPressが推奨する方法であり、依存関係を管理し、リソースの競合を避けることができます。
<?php
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>ヘッダーとフッターのテンプレートを分離する
ウェブサイトの公共ヘッダーとフッターのコードを別々のファイルに分離してください。 header.php と footer.php コード内で変数や関数の名前を適切に選ぶことは、DRY（Don’t Repeat Yourself）原則を守るための鍵となります。 header.php その中で、あなたが含める必要がある内容は以下の通りです： wp_head() フック（Hook）とは、WordPressのコア、プラグイン、その他のスクリプトがページのヘッダー部分に必要なコード（例えばSEO用のメタタグなど）を挿入できるようにする仕組みです。同様に、footer.php 中には以下の内容を含める必要があります： wp_footer() フック。
その後、他のテンプレートファイル内でそれを使用してください。 get_header() と get_footer() 関数を使ってそれらを呼び出します。
推薦図書 WordPressプラグイン開発の完全ガイド：入門から上級まで、カスタム機能の構築方法。
// 在 index.php 中的典型结构
<?php get_header(); ?>
<main>
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?> <!-- 如果需要侧边栏 -->
<?php get_footer(); ?>メインループを理解し、実装する。
「メインループ（The Loop）」とは、WordPressがデータベースから記事を取得し表示するために使用する仕組みです。これは通常、以下のような場面で使われます： index.php、single.php、page.php などのテンプレートの中にあります。
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article id="post-<?php the_ID(); ?>">
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div class="entry-content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
終わりました。ありがとうございました。
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
endif; 終わりこのコードは以下のように使用されます： have_posts() と the_post() この関数は、条件に合致するすべての記事を順に処理し、テンプレートタグなどを使用して処理内容を出力します。 the_title()、the_content() コンテンツを出力してください。
トピック機能とカスタムオプションの追加
成熟なテーマには、コンテンツの表示だけでなく、設定可能な機能も必要です。これにより、ユーザーはコードを変更することなくウェブサイトの外観を調整することができます。
登録ナビゲーションメニューとサイドバー
はい。 functions.php ここで使用されているのは register_nav_menus() この関数は、テーマがサポートする1つまたは複数のナビゲーションメニューの位置を宣言するためのものです。
function my_theme_setup() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
'footer' => __( 'Footer Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );登録後、ユーザーはバックエンドの「外観」→「メニュー」でこれらのメニューを管理することができます。テンプレート内では（例えば） header.phpそして、（省略）を使用して wp_nav_menu() メニューを表示するための関数です。
同様に、使用する場合もあります。 register_sidebar() 関数を使用すると、動的なツールバー領域（サイドバー）を作成することができます。
推薦図書 WordPressプラグイン開発入門ガイド：ゼロからあなたの最初のプラグインを作ろう。
統合されたテーマカスタマイザーのサポート
WordPressカスタマイザー（Customizer）は、リアルタイムでプレビューできる画面を提供し、ユーザーがテーマ設定を調整できるようにします。次の方法で wp_customize APIを使用すると、トピックにサイトのロゴやカラースキームなどのオプションを追加することができます。
function my_theme_customize_register( $wp_customize ) {
// 添加一个“颜色”板块
$wp_customize->add_section( 'my_theme_colors', array(
'title' => __( 'Colors', 'my-custom-theme' ),
'priority' => 30,
) );
// 在板块内添加一个“主色调”设置
$wp_customize->add_setting( 'primary_color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 为该设置添加一个颜色选择器控件
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
'label' => __( 'Primary Color', 'my-custom-theme' ),
'section' => 'my_theme_colors',
'settings' => 'primary_color',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );その後、フロントエンドでそれを使用することができます。 get_theme_mod( 'primary_color' ) ユーザーが設定した値を取得し、それをCSSに出力します。
トピックの最適化と公開準備
開発が完了した後、テーマを最適化しテストを行うことは、その安定性、安全性、および優れたパフォーマンスを確保するための必要なステップです。
コードの安全性と翻訳可能性を確保すること。
ページに直接出力されるすべての動的テキストには、国際化（i18n）を実現するために翻訳関数を使用してラップする必要があります。最もよく使用される関数は… esc_html()、esc_html_e() と ()また、ユーザーやデータベースから取得した変数をHTML属性、URL、JavaScriptで使用する場合には、それに適したクリーニング関数を使用する必要があります。 esc_attr()、esc_url() と wp_kses_post()これは、クロスサイトスクリプティング（XSS）攻撃を防ぐためです。
クロスブラウザテストおよびレスポンシブテストを実施する
あなたのテーマは、Chrome、Firefox、Safari、Edgeといったさまざまなブラウザや、スマートフォン、タブレット、デスクトップといった異なるデバイスサイズでも正常に表示され、機能しなければなりません。CSSのメディアクエリ（Media Queries）を使用してレスポンシブなレイアウトを実現してください。公開する前には、必ず実機での徹底的なテストを行うか、ブラウザの開発者ツールにあるデバイスシミュレーション機能を利用して補助的なテストを行ってください。
パフォーマンスの最適化とクリーニング
開発過程で残っている可能性のあるデバッグコードやコメントを削除してください。画像などのリソースは圧縮されていることを確認してください。小さなCSSファイルやJavaScriptファイルは統合し、サーバー側でGzip圧縮を有効にすることを検討してください。このテーマ自体はキャッシュ処理を行いませんが、コードをクリーンな状態に保つことができます。また、ユーザーにはW3 Total Cacheのようなパフォーマンスプラグインの使用を推奨し、ウェブサイトの速度をさらに向上させることができます。
「テーマ説明文書の作成」
専門的なトピックには、以下の要素が含まれるべきです： readme.txt ファイルには、テーマの機能や特徴、インストール方法、カスタマイズオプションの使い方などについて簡潔に説明してください。これはユーザー向けの使用ガイドであると同時に、WordPressの公式テーマディレクトリにテーマを提出する際に必要なファイルでもあります。
概要
ゼロからカスタムWordPressテーマを構築することは、体系的なプロセスです。開発者はHTML、CSS、PHPの知識だけでなく、WordPressのコア概念（テンプレートの階層構造、メインループ、フック、APIなど）を深く理解している必要があります。環境の構築やファイル構造の計画から始め、テンプレートファイルの作成、機能オプションの追加、そして最終的な最適化とセキュリティ強化を段階的に行うことで、現代のWeb基準に準拠し、安全で信頼性が高く、メンテナンスが容易なWordPressテーマを作成することができます。このプロセスはWordPressの内部メカニズムを深く学ぶための最良の方法であり、ウェブサイトの外観や機能を完全にコントロールする能力を身に付けることができます。
FAQ よくある質問
WordPressのテーマ開発にはPHPに精通しなければならないのでしょうか？
はい、PHPはWordPressのサーバーサイドで使用されるプログラミング言語であり、テーマのロジックやデータの取得、動的なコンテンツの生成などはすべてPHPに依存しています。PHPの基本文法や関数の使い方、そしてHTMLとの組み合わせ方をマスターする必要があります。しかし、PHPの専門家になる必要はありません。WordPress特有のテンプレートタグや関数を理解していれば、すぐに始めることができます。
なぜ私のテーマがバックエンドで表示されない、または有効にならないのでしょうか？
最も一般的な原因は style.css ファイルの上部にあるトピック情報のコメント形式が正しくなく、必要な情報が欠けているか、またはトピックフォルダーの配置場所が間違っています。トピックフォルダーが正しい場所にあることを確認してください。 wp-content/themes/ ディレクトリ内にあり、そして style.css 「Theme Name」などの情報が正確であることを確認してください。
特定のページタイプに応じて異なるレイアウトを作成するには、どのようにすればよいでしょうか？
これにはWordPressのテンプレート階層システムを利用する必要があります。例えば、以下のようなテンプレートを作成することができます： page-about.php 「about」ページのレイアウトを個別にカスタマイズするために、関連するファイルを使用します（ページのエイリアスが「about」であると仮定します）。同様に、single-post.php 個別の記事に使用するためのものです。category.php 分類アーカイブページ用のテンプレートです。WordPressは階層規則に基づいて、これらのより具体的なテンプレートファイルを優先的に呼び出します。
テーマの `functions.php` ファイルとプラグインにはどのような違いがありますか？
functions.php ファイルはテーマの一部であり、その機能はテーマの外観や表示方法と密接に関連しています。ファイルはテーマの切り替えに伴って有効になったり無効になったりします。一方、プラグインはテーマに依存しない汎用的な機能（連絡フォームやSEO最適化など）を追加するために使用されます。もし将来テーマを変更してもその機能を維持したい場合は、プラグインとして実装する方が適しています。良い実践としては、テーマの設計時にプラグインの利用を考慮に入れることです。 functions.php 中には、現在のテーマのビジュアルやレイアウトに密接に関連する機能コードのみが保存されています。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語