開発環境と基本準備
具体的なテーマコードの作成を始める前に、適切な開発環境を整えることが成功のための重要な基盤です。これは単にコードエディタをインストールするだけの簡単な作業ではなく、効率を向上させ、コードの品質を保証し、デバッグを容易にするための包括的なワークフローを構築することを意味します。
まず、本番環境に似た開発環境をローカルコンピュータ上に構築することを強くお勧めします。これには、Local by Flywheel、XAMPP、MAMP、Laragonなどのツールを使用してApache/Nginx、PHP、MySQLをインストールすることが含まれます。ローカルでの開発により、ファイルのアップロードを待たずに迅速にイテレーションを行うことができ、新機能を安全にテストすることができます。
次に、強力なコードエディターは欠かせません。Visual Studio Code 豊富な拡張エコシステム（PHP Intelephense、WordPress Snippetなど）のおかげで、開発者から広く支持されています。特に、バージョン管理ツールは… Gitそれは最初からあなたのワークフローに統合されなければなりません。Gitを使用してすべてのコード変更を追跡し、GitHub、GitLab、Bitbucketなどのプラットフォームを通じてバックアップや協力を行ってください。
推薦図書 WordPressテーマ開発入門から上級者へ：カスタムウェブサイトの構築方法を手取り足取り教えます。
標準的なWordPressテーマの基本ファイル構造は以下のようになっています。WordPressのインストールディレクトリ内でこれらのファイルを見つける必要があります。 wp-content/themes 以下に新しいフォルダを作成します。例えば： my-custom-theme。
my-custom-theme/
├── style.css // 主样式表，包含主题元信息
├── index.php // 主题的默认模板文件
├── functions.php // 主题功能文件，用于添加功能与集成
├── screenshot.png // 主题后台预览图
├── assets/ // 静态资源目录
│ ├── css/
│ ├── js/
│ └── images/
└── template-parts/ // 模板零件目录その中で、style.css ファイルヘッダのコメントはテーマの「身分証明書」のようなもので、WordPressにそのテーマの存在と基本情報を伝えます。この部分は正確に記入する必要があります。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Text Domain 国際化のために使用されますので、必ずご自身のテーマフォルダ名と一致させてください。
コアテンプレートファイルと階層構造
WordPressは「テンプレート階層」システムを使用して、現在のリクエストに対してどのテンプレートファイルを使用するかを決定します。この階層構造を理解することは、柔軟なテーマを構築する上で鍵となります。基本的に、WordPressは最も具体的なテンプレートファイルから検索を開始し、該当するファイルが見つからない場合はより一般的なテンプレートファイルに移行し、それでも見つからない場合は最終的にデフォルトのテンプレートが使用されます。 index.php。
整个流程可以概括为：单篇文章页 > 单页页 > 分类目录页 > 标签页 > 作者页 > 日期页 > 归档页 > 搜索页 > 首页 > 最终回退。对于文章单页，WordPress 会优先寻找 single-post-{slug}.php次に single-{post-type}.phpそして次に single.phpそして最後に、 singular.php。
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからカスタムウェブサイトを構築する。
ページの汎用テンプレートを構築する
header.php と footer.php ウェブサイトの統一された外観を構成するための基石です。header.php ファイルは通常、文書タイプ宣言を含んでいます。 エリア（通じて） wp_head() 関数は重要なメタデータやスクリプトの出力を行い、さらにウェブサイトのタイトルやナビゲーションなどの冒頭情報も表示します。ヘッダーを導入する必要がある場所では、それを適切に使用してください。 get_header() 関数。
footer.php その場合、ページフッターの内容を含め、終了する前に関連する処理を実行します。 wp_footer() 関数（これは多くのプラグインが正しく動作するために非常に重要です）…最後に使用します。 get_footer() 関数の導入。
記事の繰り返し表示やコンテンツの表示方法を制御する
ほとんどのテンプレートファイルの核心は「ループ（The Loop）」です。これはWordPressがデータベースからコンテンツを取得し、ページ上に表示するために使用するPHPコードの構造です。その基本的なパターンは以下の通りです：
<!-- 在这里显示每一篇文章的内容 -->
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
<p>申し訳ありませんが、何も見つかりませんでした。</p>
endif; 終わりループの内部では、一連のテンプレートタグを使用してコンテンツを出力することができます。例えば： the_title()、the_content()、the_excerpt()、the_permalink() などです。コードの再利用性を高めるために、ループ内で繰り返し使用される部分（例えば記事の要約や記事のメタ情報など）を抽出して別の場所に配置することができます。 template-parts ディレクトリ内の部品テンプレートを使用してください。 get_template_part() 関数の呼び出し。
テーマ機能とカスタマイズの統合
functions.php このファイルは、あなたのテーマの「コントロールセンター」のようなものです。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルであり、関数の定義や機能の登録、フィルターやアクションフックの追加などが行われます。
トピックの基本サポート機能を追加します。
まず、あなたは次のように使用すべきです： add_theme_support() この関数は、テーマがサポートする機能を宣言するためのものです。これにより、あなたのテーマはWordPressのコア機能を利用できるようになります。
推薦図書 ゼロからWordPressテーマ開発をマスターする：カスタムウェブサイトを構築するためのベストプラクティスとガイド。
function my_theme_setup() {
// 让主题支持文章和页面的特色图像
add_theme_support( 'post-thumbnails' );
// 支持在后台自定义<title>标签
add_theme_support( 'title-tag' );
// 支持HTML5的标记格式
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );登録ナビゲーションメニューとサイドバー
ナビゲーションメニューは、ユーザーがバックエンドの「外観 > メニュー」で管理することができます。まずはそれを使用する必要があります。 register_nav_menus() 関数を登録する場所を決め、その後テンプレート内で使用します。 wp_nav_menu() 関数を使って表示します。
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_menus' );ツールバーのサイドバー（または「ウィンドウコンポーネントエリア」とも呼ばれる）は、もう一つの重要な機能です。 register_sidebar() 関数を登録します。
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', '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', 'my_theme_widgets_init' );テンプレート内で使用するには、 dynamic_sidebar( 'sidebar-1' ) 呼び出すために。
スクリプトやスタイルを安全に導入する方法
テンプレートファイル内でCSSやJavaScriptファイルに直接ハードリンクを張ることは絶対に避けてください。正しい方法は、これらのファイルを別の場所に配置し、テンプレート内でその場所を参照するようにすることです。 wp_enqueue_scripts アクションフックの使用方法 wp_enqueue_style() と wp_enqueue_script() 関数を使って読み込みます。
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );高度なテーマ機能とカスタマイズ
基本テーマの構築が完了したら、より高度な技術を用いてその専門性や柔軟性をさらに高めることができます。
カスタムの記事タイプと分類体系を作成する方法
ブログの記事やページ以外のコンテンツ（製品、ポートフォリオ、チームメンバーなど）を管理するためには、カスタムの記事タイプを作成する必要があります。同様に、これらのコンテンツを整理するためにカスタムのカテゴリも使用できます。これは一般的に… functions.php あなたは中国を通してそれを達成しました。 register_post_type() と register_taxonomy() 関数の処理が完了しました。コードの整理を保つために、このロジックを別のファイルにまとめ、必要に応じて他のファイルから呼び出すようにすることをお勧めします。 require_once 導入。
WordPressのカスタマイザーを統合する
WordPressのカスタマイザー（Customizer）は、ユーザーにリアルタイムでプレビュー可能なテーマオプションの設定インターフェースを提供します。これを利用することで、 WP_Customize_Manager オブジェクトには設定、制御機能、およびセクションが追加されます。例えば、サイトのタイトルカラーを選択できるオプションを追加するといったことができます。
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'header_color', array(
'default' => '#333333',
'transport' => 'refresh',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控制
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( '页眉背景色', 'my-custom-theme' ),
'section' => 'colors',
'settings' => 'header_color',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );そして、 header.php またはインラインスタイルで使用することもできます。 get_theme_mod( 'header_color' ) この値を出力してください。
サブトピックのサポートを実装する
テーマを拡張しやすく、かつセキュリティを維持しやすくするためには、最初からサブテーマの互換性を考慮することが非常に重要です。つまり、すべてのスタイルやスクリプトの読み込みは、以下のような方法で行うべきです： get_template_directory_uri() と get_stylesheet_directory_uri() そして、その他の関数も含まれています… style.css 絶対パスの使用は避けてください。サブトピックの開発者は、あなたのテンプレートファイルを上書きすることで外観をカスタマイズすることができます。
概要
WordPressのテーマ開発とは、創造性、デザイン、そしてプログラミング技術を組み合わせるプロセスです。ローカル環境の構築やテンプレートの構造を理解することから、コアテンプレートファイルの作成、さらには… functions.php 強力な機能を統合し、カスタム記事タイプやカスタマイザーといった高度な機能を実現するまで、すべてのステップは、標準に準拠しつつも独自の特徴を持つウェブサイトソリューションを作成することを目的としています。アクションフックの使用、再利用可能なコードの作成、サブテーマの互換性の確保といったベストプラクティスに従うことで、あなたのテーマはより堅牢でプロフェッショナルなものになり、WordPressエコシステムの中で長期にわたって活用し続けることができるでしょう。
FAQ よくある質問
###: WordPressテーマを開発するには、どのようなコア技術をマスターする必要がありますか？
开发一个现代 WordPress 主题，你需要掌握的核心技术包括：HTML5 和语义化标记、CSS3（包括 Flexbox 和 Grid 布局）、PHP（特别是面向对象编程基础）、JavaScript（以及可能相关的框架如 React，用于古腾堡块开发）。此外，深刻理解 WordPress 的核心概念，如模板层级、循环、动作钩子与过滤器、以及 REST API，是必不可少的。
functions.php とプラグインにはどのような違いがありますか？
functions.php それはテーマの一部であり、その機能はテーマと深く結びついています。ユーザーがテーマを切り替えると、functions.php このコードはもはや効力を発揮しません。これは通常、テーマの外観や機能に直接関連する機能を追加するために使用されます。例えば、登録メニューの追加、特別な画像のサポート、テーマ専用のスタイルシートの読み込みなどです。
プラグインとは、テーマから独立した機能モジュールであり、異なるテーマ間で共通に利用できる機能を提供することを目的としています。ある機能がテーマの視覚的な表現とは無関係であり、ユーザーがテーマを変更した後もその機能を維持したい場合（例えば、連絡フォーム、SEO最適化、キャッシングなど）、その機能はプラグインとして開発するのが適しています。ベストプラクティスとしては、テーマは表示に特化し、複雑な機能はプラグインによって処理されるようにするのが望ましいです。
どうすれば私のテーマがWordPressのコーディング基準に準拠するようになるでしょうか？
WordPressのコーディングスタンダードに従うことは、コードの品質、可読性、およびコミュニティでの協力性を保証するための鍵です。PHPコードについては、以下のスタンダードに従うべきです： WordPressのPHPコーディングスタンダードこれには、シングルクォーテーションの使用、適切なインデント、大括弧のスタイルなどが含まれます。CSS、JavaScript、HTMLにもそれぞれ対応する標準があります。
PHP_CodeSnifferなどのツールをWordPressの標準ルールセットと組み合わせて使用したり、ESLintやStylelintなどを利用して、コードエディタやCI/CDプロセス内でコードを自動的にチェックすることができます。また、すべてのユーザーが見ることができるテキストには翻訳関連の機能（例えば翻訳フィルターや翻訳エンジン）を必ず使用してください。 __()、_e()）および国際化処理を行います。
テーマの開発が完了したら、どのようにテストを行うのでしょうか？
包括すべての機能をテストすることは、テーマを公開する前の重要なステップです。まず、さまざまな環境（異なるPHPバージョン、異なるMySQLバージョン）で基本機能のテストを行います。次に、WordPress公式のテーマチェッカー（Theme Check）を使用してコンプライアンススキャンを実施し、廃止された関数の使用やテーマレビューガイドラインに違反していないことを確認します。
その後、ブラウザ間およびレスポンシブ性のテストを行い、主要なブラウザ（Chrome、Firefox、Safari、Edge）やさまざまなデバイスサイズで正常に表示されることを確認します。また、人気のあるプラグインとの互換性もテストし、デバッグモードを有効にした状態でも問題なく動作することを確認する必要があります。 wp-config.php 設定内容 define('WP_DEBUG', true);その後、PHPによる警告や通知、エラーは一切発生しませんでした。最後に、パフォーマンステストを実施し、ページの読み込み速度を評価しました。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語