WordPressテーマ開発の基本概念
コードの執筆を始める前に、WordPressのテーマの基本的な構成を理解することが非常に重要です。テーマとは本質的にはフォルダのことであり、その中にはウェブサイトの外観や一部の機能を決定する一連のファイルが含まれています。WordPressシステムはこれらのファイルを読み取ることで、ウェブページのコンテンツをレンダリングします。
最も基本的なテーマであっても、少なくとも2つのファイルが必要です。style.cssとindex.phpその中で、style.cssスタイルの設定だけでなく、ファイルのヘッダー部分にあるコメントブロックには、テーマのメタ情報（テーマ名、作者、説明、バージョン番号など）も含まれています。これがWordPressがテーマを認識するための情報源となります。
WordPressはテンプレートの階層システムを利用して、どのテンプレートファイルを使用するかを決定します。例えば、個別の記事にアクセスした場合、WordPressはまず以下の順番でテンプレートを探します：single.phpブログの記事一覧ページにアクセスすると、以下の情報が検索されます：index.phpまたはhome.php；ページにアクセスすると、検索が行われます。page.phpこの階層関係を理解することで、正しい場所にコードを記述することができます。
推薦図書 ゼロから1へ：現代のウェブサイト構築の全プロセス コア技術とベストプラクティス。
テーマのコアファイルの役割
functions.phpこのファイルは、テーマの機能的な中心となる存在です。必須ではありませんが、ほとんどの現代のテーマで使用されています。ここには、テーマがサポートする機能やメニュー、サイドバーの設定、スクリプトやスタイルシートの読み込み、さまざまなカスタム関数の定義などを行うことができます。このファイルはテーマが初期化される際に自動的に読み込まれるため、テーマの機能を拡張する上で非常に重要です。
もう一つの重要なファイルはheader.php通常、これにはドキュメントタイプの宣言、CSSやJSを読み込むためのリソースの指定、そしてウェブサイトのヘッダー部分が含まれます。footer.phpこれには、フッターに共通するコンテンツと終了タグが含まれます。WordPressの関数を使用して実現します。get_header()とget_footer()他のテンプレートファイルからも簡単にこれらを導入することができ、コードのモジュール化と保守性を維持できます。
ローカル開発環境の構築とテーマ構造の作成
テーマをオンラインサーバーにデプロイする前に、ローカル開発環境を構築することが最も効率的で安全な方法です。XAMPP、MAMP、Local by Flywheel、Dockerなどのツールを使用して、ローカルコンピューター上にApache、MySQL、PHPを迅速にインストールし、WordPressを実行することができます。
環境が整ったら、最初のテーマの作成を開始できます。まず、WordPressのインストールディレクトリに入ってください。wp-content/themesフォルダーです。ここに新しいフォルダーを作成し、あなたのテーマ名（例えば「my-first-theme」）で名前を付けてください。すべてのテーマ関連のファイルはこのフォルダーに保存されます。
次に、上記で述べた基本ファイルを作成します。まずは…style.cssそのファイルのヘッダーには、特定のスタイルシート情報を含める必要があります。
推薦図書 プロフェッショナルなウェブサイトの構築：WordPressテーマの開発とカスタマイズに関する総合的なガイド。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/そして、最も基本的なものを作成します。index.phpファイルです。最初は非常にシンプルなもので、テーマがWordPressによって認識され、有効になるようにするためのものでした。
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>こんにちは、WordPressテーマ開発です！</h1>
</body>
</html>この時点で、WordPressの管理画面にログインし、「外観」→「テーマ」のページに移動してください。そうすると、自分が選択したテーマが表示されるはずです。そのテーマを有効にした後、ウェブサイトのトップページにアクセスすると、上記のコードで出力された簡単な情報が表示されます。これで、あなたの最初の「空白のテーマフレームワーク」の構築が完了しました。
テーマテンプレートとループの構築
テーマの核心的な役割はコンテンツを表示することですが、WordPressにおけるコンテンツの表示は「ループ」に依存しています。ループとは、WordPress内でデータベースから記事（ページやカスタム記事タイプなどを含む）を取得し、ページ上に表示するために使用されるPHPのコード構造のことです。
メインループを理解し、実装する。
最も基本的なループ構造は以下の通りで、通常は以下の場所に配置されます：index.phpまたはsingle.php「等テンプレートファイル内に：」
<!-- 在这里输出每篇文章的内容 -->
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
<p>何の記事も見つかりませんでした。</p>
endif; 終わりhave_posts()この関数は、表示する必要がある記事があるかどうかをチェックします。the_post()この関数は、現在の記事のデータを設定し、テンプレートタグ（例えば）で使用できるようにします。the_title()、the_content()）を呼び出します。
共通テンプレートファイルの作成
テーマが異なるページを専門的に処理できるようにするためには、一連のテンプレートファイルを作成する必要があります。index.phpこの最終的なリトリートテンプレートには、以下のものも作成する必要があります：
推薦図書 WordPressテーマ開発の完全ガイド：入門から上級者までの実践トレーニング。
header.php公共ヘッダーコードを抽出します。footer.php公共の下部コードを抽出します。single.php：単一の記事を表示するために使用されます。page.php：単一のページを表示するために使用されます。archive.phpカテゴリ、タグ、著者などのアーカイブページを表示するために使用されます。
その後、再構築する必要があります。index.phpWordPressの関数を使用して、モジュール化されたコード部分を読み込みます。
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
あなたのコメントは受け付けられました。ありがとうございます。
</article>
<?php endwhile; ?>
</main>このように、ページのヘッダーとフッターは別々のファイルで管理され、メインテンプレートファイルはそのページ特有のコンテンツロジックのみに焦点を当てているため、構造が明確でメンテナンスが容易になります。
使用functions.php增强主题功能
functions.phpこれはあなたのテーマの「ツールボックス」です。ここにコードを追加することで、WordPressのコア機能を安全に修正したり拡張したりできます。コアファイルを直接変更する必要はありません。
登録されたトピックでサポートされている機能：
とおすadd_theme_support()関数を使って、テーマがサポートするさまざまな機能を宣言することができます。例えば、記事の特集画像やカスタムロゴ、記事の要約などをテーマでサポートできるようにすることができます。
function my_first_theme_setup() {
// 让主题支持文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 支持文章格式（可选）
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );
// 为文章和页面开启HTML5标记支持
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );注意ですが、私たちはその関数をマウント（mount）しました。after_setup_themeこのアクションフックは「after_setup_theme_action」に設定されています。これはWordPressがテーマを読み込んだ後に実行される標準的なフックであり、テーマの初期化を行うのに最適なタイミングです。
登録メニューとスタイルスクリプト
登録されたナビゲーションメニューの位置情報により、ユーザーはバックエンドの「外観」→「メニュー」でメニューを管理することができます。
function my_first_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '底部菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'my_first_theme_menus' );テンプレートファイル内では、以下のように使用することができます：wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )このメニューを表示するには。
最後に、CSSファイルとJavaScriptファイルを正しく読み込むことが重要です。これはベストプラクティスです。
function my_first_theme_scripts() {
// 引入主题的主要样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );
// 引入自定义的JavaScript文件
wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );利用するwp_enqueue_style()とwp_enqueue_script()関数を作成し、それをマウントします。wp_enqueue_scriptsフック（Hook）はWordPressが公式に推奨する方法です。フックを使用することで依存関係を処理し、不要なデータの重複読み込みを防ぎ、プラグインなどの環境での互換性を確保することができます。
概要
「から作成するまでのプロセスについて説明します。」style.cssとindex.phpフォルダから始めて、テンプレートの階層構造や「ループ」の仕組みを理解し、さらにそれを活用するまで…functions.phpファイルに豊富な機能を追加することで、あなたはWordPressテーマ開発の核心的なプロセスをすでに経験しました。テーマ開発の鍵はモジュール化の考え方にあります。つまり、ヘッダーやフッターなどの繰り返し使用される部分を独立したファイルに分けて管理することです。functions.phpコンテンツの一元管理機能を活用し、WordPressのテンプレート階層のルールに従ってコンテンツの表示ロジックを整理します。これらの基本知識をマスターすることで、パーソナライズされたウェブサイトを作成するための基盤ができ上がります。その後は、プラグインエリアやカスタム記事タイプ、テーマカスタマイザAPIなど、より高度な機能についてさらに探求し、WordPress開発のスキルを深めていくことができます。
FAQ よくある質問
テーマを変更した後、ウェブページがすぐに更新されない場合はどうすればいいでしょうか？
これは通常、ブラウザのキャッシュやWordPressのキャッシュメカニズムが原因で発生します。まず、ブラウザでCtrl+F5（またはCmd+Shift+R）を押して強制更新を試してください。問題が解消されない場合は、キャッシュプラグインやサーバーサイドのキャッシュを使用していないかを確認し、すべてのキャッシュを削除してみてください。CSSやJSファイルについては…wp_enqueue_styleとwp_enqueue_script関数内では、バージョン番号のパラメータに動的な値を設定することができます（例えば：time()開発中はキャッシュを避けるべきですが、リリース前にはバージョン番号を固定する必要があります。
なぜ私のテーマがバックエンドで表示されないのでしょうか？
まず、ご自身の「テーマ」フォルダーが正しいパスに配置されているかを確認してください。wp-content/themes/次に、確実に…style.cssファイルの上部にあるコメントブロックの形式は完全に正しいです。特に「Theme Name:」という行は必須です。最後に、テーマフォルダーおよびその中のファイルの権限設定が正しくなっているかを確認し、Webサーバー（例えばApache）がこれらのファイルを読み取る権限を持っていることを確認してください。
私のテーマにサイドバーをどのように追加するか？
サイドバーを追加するには2つのステップがあります。まず、functions.phpここで使用されているのはregister_sidebar()この関数は、1つまたは複数のツールバー領域を登録します。その後、サイドバーを表示したいテンプレートファイル内で…sidebar.php）中で使用するdynamic_sidebar()関数を使用してそれを呼び出す必要があります。また、メインのテンプレートファイル（例えば）にもそれを記述する必要があります。index.php）で使用されていますget_sidebar()サイドバーのテンプレートを導入するために…
開発テーマの際に、プラグインとの互換性をどのように保証するか？
WordPressのコーディング基準に従うことは、互換性を保証するための基本です。プラグインによって追加される可能性のあるコンテンツについては、自分のテーマがそれを適切に呼び出しているかを確認してください。wp_head()とwp_footer()関数です。なぜなら、多くのプラグインがこれら2つのフックに依存して必要なコード（統計コード、CSS/JSなど）を挿入するからです。さらに、記事の内容を出力する際には常にこれらのフックを使用しています。the_content()データベースに直接アクセスするのではなく、この関数がプラグインを通じて「the_content」フィルターで加えられたすべての変更を適用します。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語