WordPressテーマ開発の基礎と環境構築
コードの作成を始める前に、WordPressのテーマの基本的な構成を理解する必要があります。テーマとは本質的にはフォルダであり、その中にはPHP、CSS、JavaScript、画像などのファイルが含まれており、これらのファイルが合わさってウェブサイトの外観や一部の機能を定義しています。このフォルダはWordPressのインストールディレクトリ内にある必要があります。wp-content/themesディレクトリ内にあります。各トピックには、コアとなるスタイルファイルが必要です。style.cssそして、1つの基本テンプレートファイルもあります。index.phpこれが、いかなるテーマ開発プロジェクトも開始するための最低限の要件です。
効率的な開発を行うためには、ローカル開発環境の構築を強くお勧めします。これにより、オンラインサイトに影響を与えることなく自由にテストを行うことができます。XAMPP、MAMP、Local by Flywheel、DevKinstaなどの統合ツールパッケージを使用すると、Apache/Nginx、PHP、MySQLをワンクリックでインストールできます。ローカル環境では、VS Code、PhpStorm、Sublime Textなどのコードエディタも必要になります。これらのエディタにはPHP、HTML、CSSの構文をハイライト表示したり、補助情報を表示したりする機能が備わっており、コーディングの効率を大幅に向上させてくれます。
準備作業が完了したら、あなたは次のステップに進む必要があります。wp-content/themesディレクトリ内に新しいフォルダを作成します。例えば：my-first-theme次に、最初の必要なファイルを作成します。
推薦図書 ゼロからWordPressテーマ開発をマスターする：カスタムウェブサイトを構築するためのベストプラクティスとガイド。
コアスタイルファイルを作成する
テーマフォルダ内に、「新しいファイル」という名前のファイルを新しく作成してください。style.cssこのファイルは、ウェブサイトのデザイン（スタイル）を決定するだけでなく、その冒頭にあるコメントヘッダー（Comment Header）がWordPressがテーマを認識するための唯一の手段となっています。コメントヘッダーには、テーマの名前、作者、説明などのメタ情報が含まれています。
以下は…style.cssファイルヘッダーの標準的な例：
/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/ファイルのヘッダーの後になると、通常のCSSを書くように、ウェブサイトの要素にスタイルルールを追加することができます。テキストドメイン（Text Domain）my-first-themeこれはテーマの国際化（翻訳）に使用されるための識別子であり、テーマフォルダの名前と一致している必要があります。
テーマのコアテンプレートファイルを構築する
テンプレートファイルはWordPressのテーマの骨格であり、さまざまな種類のコンテンツがどのように整理され、表示されるかを決定します。これらのファイルは主にPHPコードで構成されており、HTMLタグも混在しています。最も基本的なテンプレートファイルは…index.phpこれはすべてのページに適用される代替テンプレートであり、より具体的なテンプレート（例えば…）がない場合に使用されます。single.phpまたはpage.phpその場合、WordPressはそれを使用します。
基本インデックスファイルを作成します。
テーマフォルダ内に作成します。index.php最もシンプルでありながらも機能が完全に備わったものindex.phpWordPressの「The Loop」を含むことができます。これはデータベースから記事の内容を取得し、表示するための核心的なメカニズムです。
推薦図書 WordPressテーマ開発入門から上級者へ：カスタムウェブサイトの構築方法を手取り足取り教えます。
最小化されたindex.php以下に例を示します：
<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1014>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
</header>
<main>
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
<p>記事はありません。</p>
endif; 終わり
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>このファイルにはいくつかの重要な部分が含まれています：wp_head()とwp_footer()フック（Hook）とは、WordPressのコア、プラグイン、その他のスクリプトがページの開始時や終了時に必要なコード（CSSやJSなど）を挿入できるようにする仕組みです。the_post()関数はループ内で現在の記事のデータを設定するために使用され、その後…the_title()とthe_content()「等」のようなテンプレートタグを使用すると、対応するコンテンツが出力されます。
スタイルとスクリプトの導入
ただただstyle.cssファイルだけでは不十分です。WordPressにいつそのファイルを読み込むべきかを伝えるために、関数を使用する必要があります。そのためには、テーマフォルダ内にもう一つ非常に重要なファイルを作成する必要があります。functions.phpこれはテンプレートファイルではなく、テーマの機能を強化するための「機能ライブラリ」です。メニューやサイドバーの設定、そしてスタイルシートやスクリプトの安全な導入にも使用されます。
拡張テーマ機能とスタイルの読み込み
functions.phpこのファイルはテーマの「エンジンルーム」（つまり、テーマの機能を実現するためのコードが格納される場所）です。直接ページの出力に関係しないすべてのPHPコードはここに配置する必要があります。このファイル内では、以下のようにコードを記述してください：add_action()この関数は、あなたのコードをWordPressの特定のアクションフックにマウントします。これにより、コードが正しいタイミングで実行されるようになります。
安全にスタイルシートを読み込む
正しい方法は、テンプレートファイル内で直接タグを使用して要素を導入するのではありません。style.cssそれではなく、以下の方法で…wp_enqueue_style()この機能は、ファンクションを使用してロードの順序を管理します。これはWordPressの依存関係管理メカニズムに従っており、同じコンテンツの繰り返し読み込みを防ぐことができます。
はい。functions.php以下のコードをその中に追加してください：
推薦図書 2026年の人気入門ガイド：ゼロから自分の最初のWordPressテーマを作成する方法。
<?php
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 可以在此加载其他样式或脚本，例如：
// wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );ここでは、get_stylesheet_uri()関数は自動的にトピックの情報を取得します。style.cssファイルパス。add_action( 'wp_enqueue_scripts', ... )WordPressがフロントエンドのスクリプトやスタイルを準備する際に、私たちのロード関数が正しく呼び出されるようにしてください。
基本テーマ機能を有効にします。
はい。functions.phpまた、現代のウェブサイトにとって非常に重要な機能もいくつか有効にすることができます。例えば、記事やページに特徴的な画像（記事のサムネイル）を表示する機能を有効にしたり、ウェブサイトにカスタムメニューを追加したりすることができます。
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );add_theme_support()この関数は、テーマがサポートするさまざまな機能を宣言するために使用されます。register_nav_menus()これにより、WordPressの管理画面（「外観」→「メニュー」）でメニューの配置を行うための設定が定義されます。
専用のテンプレートとテーマを作成してテストを行います。
テーマの基本機能が完備されるにつれて、単一の…index.phpこのファイルでは、すべてのページタイプの表示ニーズを満たすことができなくなっています。WordPressのテンプレート階層構造を利用すると、ホームページ、個々の記事、ページ、アーカイブページなどに専用のテンプレートファイルを作成することができ、より細かい制御が可能になります。
記事の単ページテンプレートを作成する
ユーザーが記事の全文を読むためにクリックすると、その記事の詳細ページに移動します。そこで、「記事詳細ページ」という名前のページを作成しましょう。single.phpそのファイルは、その表示を専門的に制御するためのものです。通常、カテゴリ、タグ、著者、コメントなど、より完全な記事情報が含まれています。
<?php get_header(); ?>
<main>
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div class="meta">
发布于： | 作者：
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="featured-image">
<?php the_post_thumbnail(); ?>
</div>
endif; 終わり
<div class="content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
<div class="taxonomies">
分类：
<br>
标签：
</div>
</article>
</main>このテンプレートには新しいテンプレート関数が導入されています：get_header(), get_sidebar()とget_footer()それらはそれぞれ、「」という名前のファイルを読み込みます。header.php、sidebar.phpとfooter.phpテンプレートコンポーネントファイルです。この方法により、ページの構造がモジュール化され、コードの重複が避けられます。これらの対応するファイルを作成し、必要なコードをそこに移動させる必要があります。index.php該当するヘッダー、フッター、サイドバーのコードです。
テストおよび検証を行ってください。
コアテンプレートの作成が完了したら、WordPressの管理画面にログインし、「外観」→「テーマ」に移動してください。テーマ一覧の中に「My First Theme」というテーマが表示されているはずです。そのテーマを有効にした後、ウェブサイトのホームページと個々の記事ページをそれぞれ閲覧し、すべての要素（タイトル、本文、メニュー、フッター）が期待通りに表示されているかを確認してください。
ブラウザの開発者ツールを使用して、HTML構造が正しいか、CSSが正しく適用されているかを確認してください。特徴的な画像、カテゴリ、タグを含むテスト記事をいくつか作成し、それらがテンプレート内で正しく呼び出され、表示されるかを確認してください。これが潜在的な問題を発見し、修正する最良の方法です。
概要
おめでとうございます！最初のWordPressテーマの基本構築を完了しました。このガイドを通じて、テーマフォルダの作成方法から必要なコードの記述方法までをマスターしました。style.cssとindex.phpファイルを活用するために…functions.php機能の強化、リソースの読み込み、専用のテンプレートファイルの作成、モジュール化開発に至るまでの完全なプロセスです。これはテーマ開発の世界におけるほんの始まりに過ぎません。これから、さらに多くのテンプレートファイル（例えば……）について深く探求することができます。page.php、archive.phpツールバー、ガジェットエリア、カスタムの記事タイプなどの高度な機能を実装し、コードの構造やデザインを継続的に最適化していきましょう。
FAQ よくある質問
### なぜ私の投稿がバックエンドで表示されないのでしょうか？
これは通常、以下のような理由によるものです：style.cssファイル内のテーマ用コメントヘッダーの形式が正しくない、または欠落しているためです。そのファイルがテーマフォルダのルートディレクトリにあること、そしてコメントヘッダーの情報が完全で正しい形式であることを確認してください。もう一つの可能性としてはファイルのアクセス権の問題が考えられますので、WordPressがテーマフォルダを読み取る権限を持っていることを確認してください。
functions.phpファイルは必須ですか？
技術的な観点から言えば、あるものが「ただの…」であるということは、それに特別な機能や性能がなく、他のものと比べて何の優位性もないということです。style.cssとindex.phpそのテーマも機能するはずです。しかし…functions.php基本的HTML出力を超えた機能（登録メニューの実装、サイドバーの追加、スクリプトやスタイルの安全な読み込みなど）を実現するためにはこれが不可欠です。これはテーマの機能を拡張したりカスタマイズしたりするための標準的な方法であり、実用的なテーマであればどれでも必須となります。
私のテーマにサイドバーをどのように追加するか？
まず、functions.phpここで使用されているのはregister_sidebar()この関数は、1つまたは複数のツールバー領域（サイドバー）を登録します。その後、サイドバーを表示したいテンプレートファイル内で……index.phpまたはsingle.php）中で使用するdynamic_sidebar()関数を使ってそれを呼び出します。その後、ユーザーはWordPressの管理画面の「外観」→「ウィジェット」ページで、このエリアにウィジェットをドラッグ＆ドロップすることができるようになります。
テーマ開発時には、以下のようなセキュリティ上の注意事項があります：
ユーザーが入力したデータやデータベースから取得したデータを絶対にそのまま信じてはいけません。ページに動的なコンテンツを出力する際には、WordPressが提供するエスケープ関数を必ず使用してください。esc_html()、esc_url()とwp_kses_post()テーマにカスタム機能やフォームを導入する際には、WordPressのnonce（ノンス）および権限チェックの仕組みに従う必要があります。wp_enqueue_style()とwp_enqueue_script()リソースを読み込むために使用されるのは、コード内に直接記述（ハードコーディング）したりタグを使用したりする方法ではありません。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語