WordPressテーマ開発の基礎
コーディングを始める前に、WordPressテーマの基本構造を理解することが重要です。テーマは基本的に、一連のPHPテンプレートファイル、スタイルシート、JavaScriptファイル、画像などのリソースを含むフォルダです。これらのファイルは、データベース内のコンテンツを特定のレイアウトやスタイルで訪問者に表示する方法をWordPressに指示するために連携します。
核となる文書はstyle.cssとindex.phpその中で、style.cssスタイルシートだけでなく、“身分証明書 ”のテーマ、テーマ情報を宣言するために使用されるファイルのコメントブロックの先頭です。例えば
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义WordPress主题示例。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/この情報は、WordPressバックエンドの「外観」→「テーマ」ページに表示される。もうひとつの必須ファイルはindex.phpこれはテーマのデフォルトの代替テンプレートファイルです。WordPressが特定のテンプレート（例えばsingle.phpまたはpage.php)を使用する。
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからカスタムテーマを構築する実践トレーニング。
テンプレートの階層構造を理解する
テンプレート階層は、WordPressテーマ開発の中核となる概念です。これは、WordPressが異なるタイプのページリクエストに対してどのテンプレートファイルを優先するかを決定します。例えば、ブログ記事を見るとき、WordPressはそれらを順番に探します：single-post-{post-id}.php -> single-post.php -> single.php -> singular.php -> index.php.この階層を使いこなすことで、商品ページ、会社概要ページ、特定カテゴリの記事リストなど、さまざまなシナリオに合わせて高度にカスタマイズされたレイアウトを作成することができます。
コアテンプレートファイルと関数
完全に機能するテーマを構築するには、いくつかの重要なテンプレートファイルを作成する必要があります。さらにindex.phpまた、通常、次のことが必要である。header.php、footer.php、sidebar.phpもfunctions.php.これらのファイルはWordPressのテンプレートタグでリンクされています。
header.phpこのファイルには、以下のような文書のヘッダー情報が含まれている。セクション、サイトタイトル、ナビゲーションメニューなどです。他のテンプレートでは、これはget_header()関数を導入する。同様にget_footer()とget_sidebar()フッターやサイドバーを導入するためのものです。このモジュール設計により、コードの保守性と再利用性が大幅に向上します。
テーマ別機能のセントラルコントローラー
functions.phpファイルはテーマの「頭脳」または「中央コントローラー」です。テンプレートファイルではなく、テーマが初期化されるときに自動的にロードされるPHPファイルです。ここで、テーマをサポートする機能を追加したり、メニューの位置を登録したり、ウィジェットエリアを定義したり、スタイルシートやスクリプトの導入をキューに入れたりすることができます。例えば、次のコードは投稿のフィーチャー画像とカスタムメニューのサポートを開始します：
function my_theme_setup() {
// 添加文章和页面支持“特色图像”
add_theme_support('post-thumbnails');
// 注册一个主菜单
register_nav_menus( array(
'primary' => __('主菜单', 'my-custom-theme'),
) );
}
add_action('after_setup_theme', 'my_theme_setup');テーマスタイルとスクリプト管理
CSSとJavaScriptファイルを正確かつ効率的に管理することは、最新のウェブ開発において必ず守るべきベストプラクティスです。 WordPressでは、このベストプラクティスをwp_enqueue_style()とwp_enqueue_script()関数を使用してリソースのロードを管理することで、依存関係が正しいことを保証し、他のプラグインやテーマとの衝突を避けることができます。
推薦図書 WordPressテーマ開発：ゼロからカスタムテーマを構築するための完全ガイド。
あなたはそれが必要です。functions.php中に関数を作成し、それを使用してください。wp_enqueue_scriptsフックを使ってマウントする。例えば、マスター・スタイルシートとカスタムJavaScriptファイルを導入する：
function my_theme_scripts() {
// 引入主样式表，依赖为空，版本号为主题版本
wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
// 引入自定义JavaScript文件，依赖jQuery，在页脚加载
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');レスポンシブ・デザインとレイアウトの導入
あなたのウェブサイトが様々なデバイスでうまく表示されるようにするには、テーマがレスポンシブである必要があります。これは主にCSSメディアクエリによって実現されます。CSSのstyle.cssで、異なる画面幅に対して異なるスタイル・ルールを定義することができます。同時にheader.phpこの場合、必ずviewport metaタグを含めること：<meta name="viewport" content="width=device-width, initial-scale=1">.良い習慣は、モバイル・ファースト戦略を採用することです。つまり、最初にモバイル・デバイス用の基本スタイルを記述し、次にメディア・クエリを使用して、より大きなスクリーン用にスタイルを徐々に強化することです。
高度なテーマ機能とカスタマイズ
ベースとなるテーマが出来上がったら、WordPressの強力なAPIを使ってさらに高度な機能を追加し、管理者のユーザーエクスペリエンスと操作性を向上させることができます。
カスタムの記事タイプと分類体系を作成する方法
商品、ポートフォリオ、チームメンバーなどのブログ以外のコンテンツには、カスタム投稿タイプ（CPT）を使うのが理想的です。カスタム投稿タイプはfunctions.phpここで使用されているのはregister_post_type()関数を使って定義することができる。同様にregister_taxonomy()これらのCPTまたはデフォルト投稿のためにカスタムタクソノミーを作成します。例えば、「商品」CPTに「商品カテゴリ」を作成します：
function my_theme_register_cpt() {
register_post_type('product',
array(
'labels' => array('name' => __('产品', 'my-custom-theme')),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
'menu_icon' => 'dashicons-cart',
)
);
}
add_action('init', 'my_theme_register_cpt');統合テーマカスタマイザー
WordPressテーマカスタマイザーでは、色、ロゴ、フッターテキストなどのテーマ設定をリアルタイムでプレビューし、変更することができます。テーマカスタマイザーを使って$wp_customizeオブジェクトを使用すると、これらのオプションを簡単にテーマに追加できます。これには、セクション、設定、コントロールを追加します。例えば、サイトタイトルの色を変更するオプションを追加します：
function my_theme_customize_register($wp_customize) {
// 添加一个颜色设置
$wp_customize->add_setting('header_color', array(
'default' => '#333333',
'transport' => 'refresh', // 或 'postMessage' 用于实时预览
));
// 添加一个颜色控件
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_color', array(
'label' => __('标题颜色', 'my-custom-theme'),
'section' => 'colors', // 添加到现有的“颜色”节
)));
}
add_action('customize_register', 'my_theme_customize_register');概要
カスタムWordPressテーマをゼロから開発することは、PHP、HTML、CSS、JavaScriptなどのフロントエンド技術だけでなく、テンプレート階層、ループ、フック、APIなどのコアとなるWordPressアーキテクチャを深く理解する必要がある体系的なプロジェクトです。header.php、footer.phpのようなコア・テンプレート・ファイルfunctions.php機能とリソースの一元管理により、構造化され、メンテナンスが容易なテーマベースを作成することができます。さらに、カスタム投稿タイプやテーマカスタマイザーなどの高度な機能を使えば、パワフルで優れたユーザーエクスペリエンスを持ち、高度にカスタマイズ可能なウェブサイトを作成することができます。このプロセスは困難ではありますが、最終的にはウェブサイトの外観と機能を完全にコントロールできるようになり、高度なWordPress開発者になるための確実な方法です。
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからパーソナライズされたウェブサイトを作成する。
FAQ よくある質問
### WordPressテーマの開発に必要な基本とは？
HTML、CSS、PHPの基本的な知識が必要です。特にインタラクティブな機能を追加する場合は、JavaScriptの基本的な理解が役立ちます。最も重要なことは、テンプレートタグ、ループ、フックメカニズムなど、WordPressの仕組みの基本を理解することです。
テーマをWordPressの公式標準に準拠させるにはどうすればよいですか？
WordPressテーマ開発マニュアルとコーディング標準に従うことが重要です。これには、テンプレートタグを正しく使用すること、データを安全に扱うこと（出力をエスケープすること、入力を検証すること）、テーマがレスポンシブであることを確認すること、WordPressテーマ開発マニュアルとコーディング標準に従うことが含まれます。functions.phpスクリプトスタイルの導入を正しくキューイングし、ユーザーから見えるすべてのテキストに国際化サポートを提供します。__()または_e()関数)。
テーマ開発におけるデバッグとテストの方法は？
まず、開発環境でWordPressのWP_DEBUG定数は次のように設定されています。trueこれにより、PHPエラーと警告が画面に表示される。次に、ブラウザ開発者ツールを使って、HTML構造、CSSスタイル、JavaScriptコンソールエラーをチェックする。最後に、異なるブラウザ（Chrome、Firefox、Safari、Edge）と異なるサイズのデバイス（モバイル、タブレット、デスクトップ）で、徹底的なフロントエンド・テストを行う必要があります。
開発が完了したら、どのようにして自分のテーマを公開するのでしょうか？
公式WordPressテーマディレクトリにテーマを投稿する場合は、コードの品質、セキュリティ、ドキュメントなどの厳しい投稿要件に従う必要があります。プライベートまたは商用テーマの場合は、テーマフォルダ（ZIPファイル）をパッケージ化し、WordPressバックエンドの「テーマのアップロード」機能を使ってインストールするだけです。あなたのstyle.cssファイルヘッダ情報は完全で、以下の情報が含まれている。screenshot.png画像はテーマのスクリーンショット。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語