WordPressのテーマの基本構造とコアファイルを理解する
カスタムのWordPressテーマとは、本質的には特定のファイルを含むフォルダーのことであり、それはWordPressのインストールディレクトリ内の特定の場所に配置されます。/wp-content/themes/これらのファイルはディレクトリ内にあり、WordPressのテンプレート階層システムに従っています。これらのファイルが協力して、ウェブサイトがデータベース内のコンテンツ（記事やページなど）を訪問者にどのように表示するかを決定しています。これらのファイルの役割とそれらの間の連携方法を理解することが、開発の第一歩です。
トピックに必要なファイルとディレクトリ構造
すべてのWordPressテーマには、2つのコアファイルが含まれていなければなりません。style.css と index.phpその中で、style.css このファイルの役割は非常に重要です。これはテーマのスタイルを定義するCSSファイルであるだけでなく、ファイルのヘッダー部分にあるコメントブロックがWordPressがテーマを識別するための「身分証明書」のようなものです。このコメントブロックは特定の形式に厳密に従う必要があります。
/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/index.php これはトピックのメインテンプレートファイルであり、テンプレート階層の最後の防衛線でもあります。WordPressが現在のリクエストに対してより具体的なテンプレートファイルを見つけることができない場合（例えば…）single.phpまたはpage.phpその場合は、以前使用していた方法に戻して処理を行います。index.phpしたがって、堅牢なテーマにはこのファイルが必要です。
推薦図書 プロフェッショナルなウェブサイトの構築：ゼロからカスタムWordPressテーマを作成するための完全ガイド。
テンプレートの階層構造とテンプレートファイルの役割
WordPressのテンプレート階層は、インテリジェントなテンプレート選択ルールを備えています。ユーザーがアクセスするページの種類（ホームページ、記事ページ、カテゴリページなど）に基づいて、最も適切なテンプレートファイルを自動的に選択します。例えば、個別の記事にアクセスした場合、WordPressは以下の順序でテンプレートを探します：single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php そして最後に、 index.php。
上記の2つの必須ファイルに加えて、機能が完全なテーマには通常、以下のものも含まれます：
* header.phpドキュメントのヘッダーを定義し、以下の内容を含めます：<head>地区（区）、ウェブサイトのロゴ、およびメインナビゲーション。
* footer.phpドキュメントのフッターを定義します。ここには著作権情報や補助的なリンクなどが含まれます。
* functions.phpこれはテーマの「脳」のようなもので、スクリプトやスタイルの読み込み、メニューやツールバーの登録、テーマがサポートする機能の定義などを行うためのものです。
* single.php：単一の記事を表示するために使用されます。
* page.php：単一のページを表示するために使用されます。
トピックを構築する際の核心機能とテンプレート
基本なファイル構造を構築した後、次のステップはこれらのテンプレートファイルの内容を埋め込み、WordPressのコア関数や「メインループ」を利用してデータを動的に出力することです。
functions.php内でテーマ機能を初期化します。
functions.php ファイルは、テーマ機能を拡張するための中心となる存在です。ここにさまざまな機能を追加することができ、WordPressのコアファイルを変更する必要はありません。標準的な初期化プロセスには、テーマのサポート設定、ナビゲーションメニューやツールバー領域の登録、そしてスクリプトやスタイルシートの安全な読み込みが含まれます。
<?php
// 主题初始化设置
function mytheme_setup() {
// 让WordPress管理<title>标签
add_theme_support( 'title-tag' );
// 启用文章特色图像（缩略图）支持
add_theme_support( 'post-thumbnails' );
// 添加对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个主菜单位置
register_nav_menus( array(
'menu-1' => esc_html__( '主菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
// 注册小工具侧边栏
function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
// 加载主题的样式表和脚本
function mytheme_scripts() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载导航脚本（如果有的话）
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>メインループ（The Loop）を使用してコンテンツを出力します。
“「メインループ」とは、WordPressテンプレートにおいて最も中心的な概念です。これは、現在のページに表示されるべき記事（またはページ）をチェックし、それらを順に処理するためのPHPコードのことです。ほとんどすべてのコンテンツ表示用テンプレートがこのメインループに依存しています。以下にその例を示します：index.php主ループを使用した簡単な例：
推薦図書 WordPressテーマ開発入門ガイド：ゼロからカスタムテーマを構築する。
もし投稿があるなら：
<div class="posts-container">
<?php while ( have_posts() ) : the_post(); ?>
<article no numeric noise key 1009>
<h2 class="entry-title">
<a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a>
</h2>
<div class="entry-meta">
公開日：
</div>
<div class="entry-summary">
あなたのコメントは受け付けられました。ありがとうございます。
</div>
</article>
<?php endwhile; ?>
</div>
<p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
endif; 終わりこのコードでは、have_posts()とthe_post()関数がループを制御します。the_title()、the_permalink()、the_excerpt()``、``、`{{var}}`、`:name>` などのテンプレートタグは、具体的なコンテンツを出力するために使用されます。
レスポンシブデザインと高度なテーマ機能の実装
現代的なテーマは、機能が完全であるだけでなく、優れたユーザー体験も提供する必要があります。これには、さまざまなデバイス上で正常に表示されること、そして柔軟な方法で個性化されたニーズに応えることが含まれます。
レスポンシブレイアウトとモバイル端末向けの最適化を統合する
テーマをレスポンシブにするには、HTMLとCSSの両方に取り組む必要があります。まず、header.phpファイルの<head>このエリア内では、ビューポートのメタタグを必ず含めてください。
<meta name="viewport" content="width=device-width, initial-scale=1">次に、あなたの…style.css中で、メディアクエリ（Media Queries）を使用して画面の幅に応じてレイアウトやスタイルを調整しています。例えば、モバイルデバイスではサイドバーを非表示にするために使用しています：
@media screen and (max-width: 768px) {
#secondary-sidebar {
display: none;
}
.site-main {
width: 100%;
}
}カスタムページテンプレートとサブテーマを作成する方法
単一ページのユニークなレイアウトニーズに応えるために、WordPressではカスタムページテンプレートの作成が可能です。例えば、サイドバーのないフルウィドページテンプレートを作成することができ、その名前を「full-width-page-with-no-sidebars」と名付けることができます。template-fullwidth.phpそして、ファイルの冒頭に以下のコメントを追加してください：
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的页面模板。
*/その後、WordPressの管理画面でページを編集する際に、「ページ設定」の項目からこの「全幅ページテンプレート」を選択することができます。
推薦図書 WordPressテーマ開発完全ガイド：ゼロからカスタムウェブサイトの構築まで。
親テーマが更新されても、あなたが行ったカスタム変更が上書きされないようにするために、サブテーマを使用して開発することを強くお勧めします。サブテーマには、以下のもののみを含める必要があります：style.cssそして、オプションとして…functions.phpサブトピックのstyle.cssヘッダー内では必ず親テーマを宣言する必要があります。
/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/トピックの国際化、最適化、および公開準備
開発がほぼ終わりに近づいた時、テーマが世界中のユーザーにとって使いやすく、かつ優れたパフォーマンスを発揮することを確認する必要があります。そして、最後にはリリースの準備を整える必要があります。
テーマの国際化（i18n）を実現する
国際化とは、あなたのテーマを他の言語に翻訳できるようにするプロセスです。WordPressでは、これは主に2つの関数によって実現されています：__()翻訳後の文字列を返すために使用されます。_e()これらは直接翻訳後の文字列を出力するために使用されます。翻訳が必要なすべてのテキストにこれらを使用し、出力する場所を指定する必要があります。style.cssヘッダーで定義されたテキストドメイン（Text Domain）。
<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>その後、Poeditのようなツールを使用して作成することができます。.potテンプレートファイルと具体的な言語パッケージを翻訳します（例：.zh_CN.poと.mo(ドキュメンテーション）。
パフォーマンスの最適化とコードレビューを行います。
公開する前に、テーマのパフォーマンスを最適化する必要があります。これには、CSSやJavaScriptファイルの圧縮、画像のサイズを適切に設定して最適化すること、データベースのクエリ回数を減らすこと、そしてWordPressのスクリプト/スタイルのキューイングシステムを正しく使用し、テンプレート内に直接リソースを読み込まないようにすることが含まれます。さらに、コード全体を徹底的にレビューし、WordPressのコーディング基準に従っていること、デバッグ用のコードが残っていないこと、そしてすべての機能が期待通りに動作していることを確認する必要があります。
概要
ゼロからカスタムWordPressテーマを開発することは、体系的な学習プロセスです。これには、コアファイルの構造を理解し、テンプレートの階層やメインループの使い方を習得することから、さらには…functions.php中集（Zhongji）は機能の実装、レスポンシブデザインの実現、そして最終的な国際化と最適化に至るまでのプロセスを経ています。「シンプルなところから始め、段階的に改良していく」という原則に従い、まずは最小限で使えるテーマを構築し、その後新しいテンプレートファイルや機能を次々と追加していきます。これらのスキルを習得すれば、自分や顧客のニーズに完全に合ったユニークなウェブサイトを作成することができるようになり、既存のテーマに縛られることはなくなります。覚えておいてください——公式ドキュメントと開発者コミュニティは、学習の道のりにおいて最良のパートナーです。
FAQ よくある質問
WordPressのテーマを開発するには、深いPHPの知識が必要ですか？
PHPの基礎がしっかりしていることが求められますが、専門家レベルである必要はありません。PHPの文法、変数、配列、関数、ループ構造について理解している必要があります。なぜなら、WordPressのテンプレートは主にPHPコードで構成されているからです。最も重要なのは、WordPressが提供する多数の組み込み関数（テンプレートタグ）やフック（アクションとフィルター）の使い方を学ぶことです。これらは、あなたが作成したテーマとWordPressのコア機能をつなぐための重要な手段となります。
なぜ私のカスタムテーマがバックエンドに表示されないのか？
最も一般的な原因はstyle.cssファイルヘッダのコメント形式が正しくない、または情報が欠落しています。Theme NameやAuthorなどのフィールドが正しく記入されているか、そしてその形式が完全に正しいかを必ずよく確認してください。もう一つの原因は、テーマフォルダが間違ったディレクトリに配置されていることです。テーマフォルダは必ず指定されたディレクトリ内にある必要があります。wp-content/themes/その下に。
どうすれば私のテーマがGutenbergエディタをサポートするようになるでしょうか？
あなたのテーマをGutenbergエディタにより適合させるためには、以下の作業が必要です：functions.php対応するテーマサポートに関する声明を追加してください。これには、ワイドアライメントのサポートやエディタのスタイルシートなどが含まれます。例えば：
add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表さらに、段落、見出し、ボタンなどの主要な要素についてはフロントエンドのスタイルを定義し、ウェブサイトの表示画面とエディタ内での見た目が一致するようにします。
どのようにして私のテーマをテストすればよいでしょうか？
テストは多次元的に行うべきです。まず、Chrome、Firefox、Safari、Edgeなどのさまざまなブラウザや、スマートフォン、タブレット、デスクトップコンピューターといった異なるサイズのデバイスで、デザインや機能が正常に動作するかを確認します。次に、よく使われるプラグインとの互換性をテストします。さらに、WordPressに搭載されている「テーマのユニットテスト」データ（XMLファイル）を使用して、さまざまな種類のコンテンツを大量にインポートし、テーマが極端な状況下でも正常に動作するかをチェックします。最後に、…（テキストが途切れていますので、続きがあればそちらも確認してください。）WP_DEBUGこのモードでは、PHPの警告やエラーがないかを確認します。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語