WordPressテーマ開発のための基本準備
WordPressのテーマ開発は、適切な開発環境を構築し、そのコアアーキテクチャを理解することから始まります。ローカル開発環境は、効率的で安全な開発に不可欠であり、XAMPP、MAMP、Dockerといったソフトウェアパッケージを使用することで、PHP、MySQL、Apache/Nginxの環境を簡単にローカルコンピュータ上に構築することができます。
次に、トピックのカタログ構造を理解しましょう。標準的なWordPressテーマには、少なくとも2つのファイルが含まれています：style.cssとindex.phpその中で、style.cssスタイルシートだけでなく、あるテーマの「身分証明書」のようなものでもあります。その上部にあるスタイルシートのヘッダー内のコメントは、WordPressにそのテーマの情報を伝えるために使用されます。
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Description: 这是一个自定义WordPress主题。
Version: 1.0
*/テーマテンプレートの階層構造を理解する
WordPressの核心は、その強力なテンプレート階層システムにあります。このシステムにより、WordPressは現在アクセスしているページの種類に応じて、自動的に適切なテンプレートファイルを選択してレンダリングする仕組みになっています。例えば、単一の記事にアクセスした場合、WordPressはまずその記事用のテンプレートを探します。single-post.phpもし存在しない場合は、バックアップに戻ります。singular.php最後に、一般的な（通用的な）ものです。index.php。
推薦図書 WordPressテーマ開発の徹底解説：入門から上級者までの実践ガイド。
この「特殊なものから一般的なものへ」という検索ロジックこそが、テンプレートの階層構造です。これにより、開発者はカテゴリページ、著者のアーカイブページ、検索結果ページなどの特定のページタイプに対して、高度にカスタマイズされたレイアウトを作成することができます。テンプレートの階層構造を理解し、上手く活用することは、効率的なテーマ開発の基本です。初心者は、いくつかのキーテンプレートをマスターすることから始めるとよいでしょう。header.php、footer.php、sidebar.php、index.php、single.phpとpage.php。
基本テーマファイルを作成する
では、最もシンプルなテーマを作成しましょう。まず、wp-content/themes/ディレクトリ内に新しいフォルダを作成します。例えば：my-first-themeこのフォルダ内に、必要不可欠なものを作成してください。style.cssファイルを作成し、上記のヘッダー情報を記入してください。
そして、作成するのです。index.phpこのファイルは、すべてのページの最終的なバックアップテンプレートであり、その主な役割はWordPressのコアテンプレート関数を呼び出してページの構造を出力することです。
<?php get_header(); ?>
<main id="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
<?php
endwhile；
else ：
echo '<p>現在、コンテンツはありません。</p>';
endif；
?>
</main>テーマのコアテンプレートファイルを作成する。
機能が完全なテーマでは、ページの構造をモジュール化する必要があります。これは、独立したヘッダー、フッター、サイドバーのテンプレートファイルを作成することによって実現されます。
ウェブサイトのヘッダーとフッターをデザインする
header.phpこのファイルには、ウェブサイトの冒頭部分に含まれる一般的なコードが記載されています。例えば、ドキュメントタイプの宣言などです。エリア（そこでは必ず呼び出す必要があります）wp_head()関数、ウェブサイトのロゴ、メインナビゲーションなどです。get_header()WordPressは、関数が必要なテンプレートに自動的にそれを導入します。
推薦図書 ゼロからWordPressテーマ開発の達人になるための完全ガイド。
同様に、footer.phpこのファイルには、ページの下部に表示される一般的なコンテンツが含まれています。例えば、著作権情報やスクリプトの読み込み領域などです。スクリプトの読み込み領域では、必ず関連するコードを実行する必要があります。wp_footer()（関数を通じて）get_footer()関数の導入により、構造を分離する最大の利点はメンテナンスの容易さです。ある部分を変更するだけで、全体に影響が及びます。
テーマの核心的なループを実装する
“「The Loop（ループ）」はWordPressにおいて最も重要な概念の一つであり、データベースから内容を取得し、それをページに表示するためのPHPコードの構造です。前述の通り…index.php例示されているように、ループは通常、if ( have_posts() ) :まず、while ( have_posts() ) : the_post();各記事やページについては内部で処理が行われます。ループ内では、一連のテンプレートタグを使用することができます。the_title()、the_content()、the_permalink()来は、記事の特定の情報を出力します。
カスタムページテンプレートの作成
標準テンプレートの他に、特定のページ用にカスタムテンプレートを作成することもできます。これは、PHPファイルの冒頭に特定のテンプレート名のコメントを追加することで実現されます。
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的页面模板
*/
get_header(); ?>
<main id="main" class="full-width">
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div class="entry-content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
<?php endwhile; ?>
</main>
<?php get_footer(); ?>作成した後、WordPressの管理画面でページを編集する際に、「ページ属性」の「テンプレート」ドロップダウンメニューから自分で定義した「全幅ページ」を選択することができます。
テーマの機能とスタイルを強化する
優れたテーマには、適切な構造だけでなく、強力な機能と美しいスタイルも求められます。これには、機能を実現するファイルやスタイルシートの詳細なカスタマイズが関わってきます。
通过函数文件添加主题功能
functions.phpこれはテーマの「コントロールセンター」であり、コアファイルを変更することなく、テーマに機能や特徴を追加したり、デフォルトの動作を変更したりするために使用されます。必須ではありませんが、ほとんどの現代のテーマには含まれています。
推薦図書 WordPressテーマ開発入門ガイド：ゼロから最初のテーマを作成する方法。
基本的なアプリケーションとしては、登録用のメニューやサイドバーがあります。メニューは以下のように機能します：register_nav_menus()関数登録機能により、バックエンドの「外観」→「メニュー」で複数のナビゲーション位置を管理することができます。
function mytheme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'mytheme' ),
'footer' => __( '底部菜单', 'mytheme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );サイドバー（または「ウィジェットエリア」）を通じて、register_sidebar()関数の登録機能です。これにより、ウェブサイトの管理者はバックエンドにある「ツール」インターフェースを通じて、これらのエリアに動的にコンテンツを追加することができます。
アプリケーションにレスポンシブデザインとCSSを導入する
はい。style.cssコード内でスタイルを記述する際、レスポンシブデザインは基本要件です。これは通常、メディアクエリ（Media Queries）を使用して実現されます。また、テーマの安全性とメンテナビリティを高めるために、レイアウトの基準単位を以下のように設定することを強くお勧めします：remそして、box-sizing属性を以下のように設定します：border-box。
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 62.5%; /* 方便rem计算，1rem ≈ 10px */
}
body {
font-size: 1.6rem; /* 16px */
}
@media (max-width: 768px) {
.site-header {
flex-direction: column;
}
}JavaScriptおよびCSSを安全に導入する方法
テンプレートファイル内に外部スクリプトやスタイルを直接ハードコードして導入することは絶対に避けてください。正しい方法は、それらを別のファイルに分けて管理し、テンプレートから必要な時にそのファイルを読み込むようにすることです。functions.php用途wp_enqueue_script()とwp_enqueue_style()この関数により、依存関係が正しく管理され、データの重複読み込みが防がれます。また、WordPressのキャッシュメカニズムとも互換性があります。
function mytheme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );高度な開発技術とベストプラクティス
基礎をマスターしたら、より高度な技術を探求し、より強力で柔軟性があり、セキュリティに優れたテーマを構築することができます。
サブトピックを利用してカスタマイズする
もし既存のテーマ（特にサードパーティ製や親テーマ）を変更したい場合、ベストプラクティスとしてはサブテーマを作成することです。これにより、親テーマが更新されても、あなたが加えた変更内容が上書きされるのを防ぐことができます。サブテーマを使用することで、親テーマの変更に影響を受けずに、自分のテーマを自由にカスstyle.cssヘッダー部分には追加の宣言が必要です。Templateフィールドを使用して親テーマを指定します。
/*
Theme Name: 我的子主题
Template: twentytwentyfour // 父主题的文件夹名
*/サブテーマは親テーマのすべての機能を継承します。サブテーマを通じて、functions.php新機能を追加するか、同名のテンプレートファイルを使用して親テーマのテンプレートを上書きします。
テーマカスタマイザーオプションを作成する。
ユーザーがコードを書かずにテーマを調整できるようにするには（例えば色を変更したり、ロゴをアップロードしたりするために）、WordPressのカスタマイザーを統合する必要があります。これは主に以下の方法で実現されます：functions.phpの中$wp_customizeオブジェクトAPIを使用して処理を完了します。
function mytheme_customize_register( $wp_customize ) {
// 添加一个设置选项，用于存储Logo的URL
$wp_customize->add_setting( 'mytheme_logo' );
// 添加上传控件到某个部分
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mytheme_logo', array(
'label' => __( '上传 Logo', 'mytheme' ),
'section' => 'title_tagline',
'settings' => 'mytheme_logo',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );テンプレートファイル内では、次のようにしてそれを実現できます：get_theme_mod( 'mytheme_logo' )ユーザーがアップロードしたロゴを取得し、表示する。
国際化および翻訳の基準に従ってください。
あなたのテーマを世界中のユーザーが利用できるようにするためには、国際化（インターナショナライゼーション）の準備をしっかり行う必要があります。つまり、ユーザーに表示されるすべてのテキスト文字列は、特定の関数を使って処理されなければなりません。
_e( '这是一段文本', 'mytheme' ); // 输出翻译后的文本
__( '这是另一段文本', 'mytheme' ); // 返回翻译后的文本その中で'mytheme'これは「テキストドメイン（Text Domain）」であり、WordPress.orgでのテーマのスラグ（slug）やテーマフォルダの名前と一致していなければなりません。その後、Poeditなどのツールを使用して作成することができます。.pot翻訳テンプレートと.po/.mo翻訳ファイルを作成し、コミュニティのメンバーに翻訳を依頼しましょう。
パフォーマンスの最適化とセキュリティチェックを実施します。
テーマ開発が完了した後、パフォーマンスとセキュリティは最後にチェックすべきポイントです。すべてのフロントエンドリソースが圧縮（ミニファイ）されていること、画像のサイズが適切であることを確認してください。サブテーマのオーバーライドメカニズムを使用し、コアファイルを直接変更することは避けてください。ユーザーやデータベースから取得し出力されるすべてのデータについては、適切なエスケープ関数を使用してください。esc_html()、esc_url()XSS攻撃を防ぐためです。
概要
WordPressのテーマ開発とは、基盤となるインフラストラクチャ（テンプレートの階層構造やコアの処理ループなど）を理解した上で、段階的にモジュール化されたテンプレートファイルを構築していくプロセスです。そして、それらのテンプレートファイルを組み合わせることで、ウェブサイトの機能や外観をカスタマイfunctions.php注入機能の実装プロセスについてです。開発者はフロントエンドの表示とバックエンドのロジックの両方を考慮する必要があり、PHP、HTML、CSS、JavaScriptを熟知していることが求められます。サブテーマの作成、カスタマイザーの統合、国際化の実装、セキュリティ性能への配慮といったベストプラクティスに従うことが、プロフェッショナルで使いやすく、人気のあるWordPressテーマを開発するための鍵となります。開発の道のりは継続的なものであり、単純なテーマから始まります。index.php始めてから、継続的に実践し、テストし、学び続けることで、徐々に機能が充実し、デザインも美しいテーマを構築することができるでしょう。
FAQ よくある質問
WordPressのテーマ開発を学ぶには、どのような前提知識が必要ですか？
まずは基本的なHTMLとCSSの知識を身につけ、静的なウェブページを作成できるようになることをお勧めします。また、WordPressのコア部分がPHPで書かれているため、PHPの基本文法も理解しておく必要があります。JavaScript（特にjQuery）については初歩的な知識があると、インタラクティブな機能の実装に大いに役立ちます。最初から専門家である必要はありませんので、開発を進めながら学びながら使っていけば問題ありません。
現在の親テーマファイルを修正すべきでしょうか？
絶対に、第三者から入手した親テーマファイル（例えば「Twenty Twenty」シリーズなど）を直接編集してはいけません。親テーマが更新されると、あなたが加えたすべての変更が破棄されてしまいます。正しい方法は、サブテーマを作成し、そのサブテーマのディレクトリ内で、親テーマのテンプレートファイルと同名のファイルを使用して必要な変更を加えることです。または、サブテーマの設定を通じて親テーマの機能をカスタマイズすることもできます。functions.php機能の追加や修正を行うこと。これはWordPressのテーマ開発において最も重要なメンテナンスの原則です。
なぜ私のテーマがバックエンドで表示されない、または有効にならないのでしょうか？
最も一般的な原因は、あなたの…です。style.cssファイルの上部にあるトピック情報のコメントの形式が正しくない、または重要な情報が欠落しています。よく確認してください。Theme Name:これらのフィールドが正しく記入されているかどうかを確認してください。次に、トピックフォルダーが直接含まれていることを確認してください。style.cssとindex.php無意味なフォルダが重複していることはありませんでした。最後に、PHPの文法エラーをチェックするには、以下の方法があります：wp-config.php有効にするWP_DEBUG具体的なエラー情報を確認するためにこちらをご覧ください。
自分のテーマにカスタムの記事タイプや分類法を追加するには、どうすればよいですか？
カスタムの記事タイプや分類方法を追加するには、主に以下の方法を使用します：functions.phpファイルの実装には、以下のものを使用する必要があります：register_post_type()この関数を使用して新しい記事タイプを登録することができます。register_taxonomy()新しい分類法を登録するための関数があります。これらの関数には多数のパラメータがあり、バックエンドでの管理インターフェースの設定、タグの設定、公開の有無などの動作を定義するために使用されます。WordPressの公式コデックスや開発者マニュアルを参照し、簡単な例から始めることをお勧めします。
商業テーマの開発にあたっては、特に以下の点に注意する必要があります：
販売や配布を目的とした商用テーマを開発する場合、責任はさらに大きくなります。WordPressのコーディング基準やセキュリティのベストプラクティスをより厳格に遵守し、すべてのデータに対してエスケープ処理や検証を行う必要があります。そのテーマはWordPressのカスタマイザー（100%）と互換性がなければならず、すべてのオプションや機能について詳細な説明を記録しておく必要があります。使用するすべてのリソース（画像、フォント、コードスニペットなど）については、商用利用に適したライセンスがあることを確認してください。さらに、優れたユーザーマニュアルの提供や迅速なテクニカルサポートは、信頼性を築くための鍵となります。リリースする前には、さまざまな環境（異なるPHPバージョン、異なるプラグインの組み合わせ）で十分にテストを行うことが不可欠です。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語