WordPressのテーマの基本構造を理解する
WordPressのテーマとは、単にウェブサイトの外観を制御するスタイルシートの集まりではありません。それは、特定の規格に従って作成された一連のファイルから構成されるものです。これらのファイルが協力して、WordPressにウェブサイトのコンテンツをどのように表示するかを指示します。最もシンプルなテーマは、たった2つのファイルしか含んでいません。style.css と index.phpしかし、機能が豊富なテーマには、数十個ものテンプレートファイル、関数ファイル、アセットファイルが含まれています。
コアファイルとその役割
すべてのWordPressテーマには、必ず1つ含まれていなければなりません。 style.css このファイルは、ウェブサイトのデザインを定義するための核心的な要素であるだけでなく、ファイルのヘッダー部分にはテーマに関するメタデータ（テーマ名、作者、説明、バージョンなど）も含まれています。これらの情報は、WordPressが有効なテーマを認識するための鍵となります。
もう一つの基本ファイルは index.phpこれはテーマのデフォルトテンプレートファイルです。WordPressが現在のリクエストに対してより具体的なテンプレートファイルを見つけることができない場合、このデフォルトテンプレートが使用されます。 index.php。
推薦図書 WordPressテーマ開発の究極ガイド：ゼロから上級者まで、カスタムウェブサイトの構築方法。
テンプレートの階層構造
WordPressのテーマシステムは、強力な「テンプレート階層構造」のルールに従っています。これは、特定のページにアクセスした際に、WordPressが事前に定義された順序に従って最も適合するテンプレートファイルを探すということを意味します。例えば、ブログ記事にアクセスした場合、WordPressはまず以下のように処理を行います： single-post.phpもし存在しない場合は、検索を行います。 single.php最後に使用する。 index.phpこの階層構造を理解することは、高度なカスタマイズを行うための基礎です。
最初の基本的なテーマを作成しましょう。
ゼロからテーマを作成することは、その仕組みを理解する最良の方法です。まず、WordPressの… wp-content/themes ディレクトリ内に新しいフォルダを作成し、例えば「my-first-theme」という名前にします。
スタイルシートのヘッダー情報を作成する
このフォルダ内に、新しいファイルを作成してください。 style.css ファイルを開き、以下の基本ヘッダー情報を入力してください：
/*
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: GNU General Public License v2 or later
Text Domain: my-first-theme
*/基本インデックステンプレートの構築
次に、作成してください。 index.php これは最も基本的なテンプレートで、WordPressのコア関数を使用してウェブサイトのタイトルや記事を取得し、表示しています。
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
</header>
<main>
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
終わりました。ありがとうございました。
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
endif; 終わり
</main>
</body>
</html>この時点で、WordPressの管理画面（バックエンド）の「外観 > テーマ」でこの基本テーマを確認し、有効にすることができます。
推薦図書 WordPressテーマ開発の完全実践ガイド：ゼロからカスタムテーマの構築まで。
テンプレートファイルとフックを利用してカスタマイズを行う
テーマ機能を豊かで構造的に明確なものにするためには、テンプレートファイルとWordPressのフックシステムを上手に活用する必要があります。
テンプレートをモジュール化されたコンポーネントに分割する
専門的なテーマでは、すべてのコードを一緒にまとめて表示することはありません。 index.php はい。私たちはそれを使用しています。 get_header()， get_footer()， get_sidebar() テンプレートを分割するために、`split`などの関数を使用します。まず、 index.php 中央部分と下部のHTML構造は、それぞれ新しく作成されたファイルに移されました。 header.php と footer.php ファイルを取得した後、修正を加えます。 index.php 以下の通り：
<?php get_header(); ?>
<main>
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
終わりました。ありがとうございました。
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
endif; 終わり
</main>関数ファイルを通じて機能を追加する
functions.php ファイルはテーマの「脳」のようなもので、特別な機能の追加、メニューの登録、ツールバーの設定、スタイルシートやスクリプトの配置などに使用されます。このファイルを作成し、以下の基本コードを追加してナビゲーションメニューを登録してください：
<?php
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
// 添加文章缩略图支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 排入样式表和脚本
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>その後、あなたは… header.php ここで使用されているのは wp_nav_menu() このメニューを表示するための関数です。
レスポンシブデザインとサブテーマの開発を実現する
現代のウェブサイトは、さまざまなデバイスや画面サイズに対応する必要があります。また、親テーマを安全に更新しつつもカスタマイズした設定を失わないようにするために、サブテーマの使い方を理解することは非常に重要なスキルです。
レスポンシブデザインの原則を適用する
はい。 style.css CSSのメディアクエリを使用してレスポンシブなレイアウトを作成します。例えば、タブレットやスマートフォンなどのデバイスに対して異なるスタイルルールを設定することができます。
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからカスタムウェブサイトを構築する。
/* 基础样式 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
/* 平板设备 (宽度小于 768px) */
@media (max-width: 768px) {
.container { padding: 0 15px; }
.sidebar { display: none; }
}
/* 手机设备 (宽度小于 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.5em; }
}サブトピックを作成して親トピックを上書きする
サブテーマを使用すると、別のテーマ（親テーマ）の機能を変更したり拡張したりすることができます。新しいフォルダを作成してください。例えば、「my-first-theme-child」という名前でフォルダを作成し、その中に必要なコンテンツを配置してください。 style.cssそのヘッダー情報には、「Template」という行を含める必要があり、これによって親テーマディレクトリの名前が指定されます。
/*
Theme Name: My First Theme Child
Template: my-first-theme
Version: 1.0
*/そして、サブトピック内で… functions.php その中で、親テーマと子テーマのスタイルシートを組み込む必要があります。
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
// 排入父主题样式表
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 排入子主题样式表，位于父主题样式之后
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
?>その後、サブトピック内に同名のテンプレートファイルを作成することで（例えば…） header.php親テーマの対応するファイルを上書きするか、新しいCSSルールを追加して外観を変更することができます。
概要
WordPressのテーマ開発とは、まずコアの構造を理解することから始め、基本的なテーマの作成を実践し、次にテンプレートの階層構造、フック（hook）、レスポンシブデザイン、サブテーマ（subtheme）といった高度な機能を活用してテーマをさらにカスタマイズしていくプロセスです。標準化されたファイル構造や開発手法に従うことで、機能が豊富でメンテナンスが容易、見た目もプロフェッショナルなテーマを構築することができます。最も重要なのは実際に手を動かして試すことです。まずはシンプルなテーマから始めてみましょう。 index.php と style.css まずは、WordPressのテーマシステムについての包括的な理解を段階的に深めていきましょう。
FAQ よくある質問
WordPressのテーマには、少なくともいくつのファイルが必要ですか？
WordPressのテーマには少なくとも2つのファイルが必要です：style.css と index.php。
その中で、style.css テーマのヘッダーコメントには正しいトピックメタデータを含める必要があります。これはWordPressがテーマを認識し、適用するための鍵となります。 index.php デフォルトのテンプレートファイルとして、より具体的なテンプレートとマッチしないリクエストを処理する役割を果たします。
個々の記事ページの表示をカスタマイズするにはどうすればよいですか？
単一の記事の表示をカスタマイズするには、WordPressのテンプレートの階層構造に基づいて新しいテンプレートを作成する必要があります。 single.php ファイル、あるいはより正確な制御のために、特定の記事タイプに対応したテンプレートを作成することもできます。例えば： single-post.php。
このファイルでは、記事のタイトル、本文、メタデータ（著者、公開日時、カテゴリなど）、およびコメントエリアのレイアウトを自由に設定することができます。WordPressが提供するテンプレートタグを使用することもできます。 the_title()， the_content()， the_author() 「等来」は中国語の表現で、「待ってください」という意味です。この表現は、相手に対して「少々待ってほしい」という依頼や要請を伝える際に使われます。
functions.php ファイルの役割は何ですか？
functions.php これはテーマの核心機能を実現するファイルであり、プラグインのような役割を果たしています。テーマに機能やフック、フィルターを追加するために使用されます。
它的主要作用包括：初始化主题功能（如注册菜单、小工具区域、添加特色图像支持）、排入CSS样式表和JavaScript脚本、定义自定义短代码、修改默认的WordPress行为（通过钩子），以及设置主题特定的配置选项。它将在主题加载时自动被WordPress调用。
サブトピックを使用する利点は何でしょうか？
サブテーマを使用する最大の利点は、親テーマのソースファイルを直接編集することなく、安全に親テーマを変更したりカスタマイズしたりできることです。
これは、親テーマにセキュリティ更新や機能更新が適用された場合に、親テーマを直接更新しても、サブテーマを通じて行ったすべてのカスタマイズ（スタイル、テンプレートファイル、機能の追加など）が保持され、上書きされないことを意味します。これにより、ウェブサイトのメンテナンスの効率と安全性が大幅に向上し、WordPress開発におけるベストプラクティスとされています。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語