WordPress開発環境の設定
コードの執筆を始める前に、安定して効率的なローカル開発環境を構築することが非常に重要です。これにより、オンラインサーバーの運用環境をシミュレートするだけでなく、本番サイトに損害を与えることを防ぐことができます。
ローカル開発キットの選択
お勧めします。 Local by Flywheel、 MAMP または XAMPP このような統合型ソリューションです。これらを使用すると、Apache、MySQL、PHPを含むサーバー環境をあなたのコンピューター上に迅速に構築することができます。Windowsユーザーの方にとっても非常に便利です。Local by Flywheel そのシンプルなインターフェースとWordPressへの徹底的な最適化により、非常に人気があります。Macユーザーも便利に利用できます。 MAMP。
コードエディタとバージョン管理
機能豊富なコードエディターを選ぶことは、効率を向上させるための鍵です。例えば… Visual Studio Code、 PHPStorm または Sublime Text必ず「WordPress Code Snippets Suggestions」や「PHP Smart Sensing」といったプラグインをインストールしてください。また、コードの管理には最初からバージョン管理システム（Gitなど）を使用してください。Gitリポジトリを初期化し、そこにコードを保存してください。 .gitignore ファイルの無視 node_modules構築された製品やWordPressのコアファイルなどは一切送信せず、テーマのコアソースコードのみを送信してください。
推薦図書 WordPressテーマ開発：ゼロからプロフェッショナルレベルのレスポンシブウェブサイトを構築する。
テーマの基本構造とコアファイル
標準的なWordPressテーマは一連の特定のファイルで構成されており、その中には必須のファイルが2つあります。これらのファイルがテーマの「身分証明書」のようなものです。
テーマスタイルシートファイル
style.css このファイルは、すべてのWordPressテーマの基盤であり、入り口となる存在です。このファイルにはCSSスタイルだけでなく、その上部にあるコメントブロックにもテーマのメタデータが記載されています。これらの情報は、WordPressの管理画面の「外観」→「テーマ」リストに表示されます。
/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于演示的高性能自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-awesome-theme
*/その中で、Text Domain 国際化のために使用されるものであり、必ずテーマフォルダの名前と一致させてください。
テーマ関連の関数ファイル
functions.php これはテーマの「脳」のようなもので、機能の追加や特徴の登録、さまざまなPHPコードの統合に使用されます。テーマが初期化される際に自動的に読み込まれます。このファイルでは、スタイルシートやJavaScriptファイルを読み込んだり、メニューやサイドバーを登録したり、テーマがサポートする機能を定義したりすることができます。
<?php
// 引入样式和脚本
function my_awesome_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
// 注册导航菜单
function register_my_menus() {
register_nav_menus(
array(
'primary-menu' => __( '主导航菜单', 'my-awesome-theme' ),
'footer-menu' => __( '页脚导航菜单', 'my-awesome-theme' ),
)
);
}
add_action( 'init', 'register_my_menus' );
?>テンプレートの階層構造とテンプレートファイルの開発
WordPressは、異なるページリクエストに対してどのテンプレートファイルを使用してコンテンツを表示するかを決定するための、洗練された「テンプレート階層」システムを採用しています。このルールを理解し、適用することはテーマ開発の核心です。
推薦図書 WordPressテーマ開発完全ガイド：入門から上級まで、オリジナルテーマを構築する方法。
基本ページテンプレートを作成する
最も基本的で重要なテンプレートファイルには以下のものが含まれます：
1. index.phpこれは最後の代替テンプレートであり、より具体的なテンプレートが存在しない場合に使用されます。
2. header.phpドキュメントを含む <head> 一部のページやサイトのヘッダー領域です。 get_header() 関数の呼び出し。
3. footer.phpサイトを含むページのフッター領域です。 get_footer() 関数の呼び出し。
4. sidebar.phpサイドバーを定義します。 get_sidebar() 関数の呼び出し。
5. page.php静的ページを表示するために使用されます。
6. single.php：単一のブログ記事を表示するために使用されます。
典型的 index.php 構造は以下の通りです：
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 显示文章内容
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>アプリケーション条件タグとテンプレートコンポーネント
より柔軟で再利用可能なテンプレートを作成するためには、条件タグやテンプレートコンポーネントの使い方をマスターする必要があります。条件タグ（例えば…） is_front_page(), is_single(), has_post_thumbnail()これにより、テンプレート内で異なる条件に応じて異なるコードを実行することができます。テンプレートコンポーネントは、そのための仕組みを提供しています。 get_template_part() この関数は、再利用可能なコード断片（例えば記事の要約やメタ情報など）を別のファイルに抽出します。 template-parts/content.phpこれにより、メインテンプレートファイルがより一目で理解しやすくなります。
テーマ機能の強化とパフォーマンスの最適化
現代の高性能テーマにおいては、コア機能の強化と読み込み速度の極限までの最適化が不可欠です。
テーマカスタマイザーのサポートを追加します。
WordPressのカスタマイザーを使用すると、ユーザーはテーマの設定をリアルタイムでプレビューしたり、変更したりすることができます。 functions.php そのコードの中に、パネルやセクション、コントロールを追加することができます。例えば、サイトの識別色を選択するオプションを追加するといった具合です。
function my_awesome_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'primary_color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控件
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
'label' => __( '主色调', 'my-awesome-theme' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );そしてその後、 style.css この色値は、内联スタイルを使用するか、別のCSSファイルに出力することで適用されます。
推薦図書 WordPressテーマ開発に精通するための完全ガイド：入門から実践まで。
フロントエンドリソースの最適化を実現する
パフォーマンスはユーザー体験にとって非常に重要です。最適化策には以下のようなものがあります：
- 脚本与样式排队管理：始终使用 wp_enqueue_script() と wp_enqueue_style() リソースを導入し、依存関係やバージョン番号を正しく設定する。
– 非同期ロードと遅延ロード：非必須のJavaScriptコードに対して使用する async または defer 画像に対しては「ラズリーロード（lazy loading）」を使用します。
- 生成关键CSS：提取首屏渲染所需的CSS并内联到HTML的<head>その中で、残りのCSSは非同期で読み込まれます。
– 翻译機能を合理的に使用してください：ユーザーに表示されるすべてのテキストに対して翻訳機能を適用してください。 __()、 _e() これらの関数をラップして、国際化に備えます。 wp_set_script_translations() JavaScriptの翻訳ファイルを読み込んでいます。
概要
ローカル環境の設定から基本ファイル構造の構築、テンプレート階層の深い理解、複雑なテンプレートファイルの開発、そして機能の強化とパフォーマンスの最適化に至るまで、このプロセスはWordPressテーマ開発の核心を網羅しています。重要なのは、WordPressの標準とベストプラクティスに従い、明確でメンテナンスしやすく、高性能なコードを書くことです。WordPressエコシステムの更新に継続的に学び、適応することで、さまざまなプロジェクトのニーズに応える、強力で柔軟なテーマを構築することができるでしょう。
FAQ よくある質問
WordPressテーマを開発するには、どのようなプログラミング言語を習得する必要がありますか？
WordPressのテーマを開発するには、HTML、CSS、PHP、そして基本的なJavaScriptの知識が必要です。HTMLはページの構造を作成するために使用され、CSSはデザインやレイアウトの表示を担当します。PHPはテーマの動的な機能を実現し、WordPressのコアシステムとのやり取りを行うための鍵となる言語です。JavaScriptはユーザーインターフェースに動的な要素を追加するために使用されます。SQLについても基本的な理解があると、データの処理や呼び出しをより容易に理解することができます。
どうすれば私のテーマが審査を通過し、公式カタログに掲載されるのでしょうか？
要使主题进入WordPress官方主题目录，必须严格遵守主题审查手册。这包括：使用安全的编码实践、对所有输出数据进行转义或净化、正确实现国际化、不捆绑恶意代码或无关插件、提供详尽的文档说明，并确保主题在所有默认环境下都能良好运行。主题代码必须完全遵循GPL许可证。
サブトピックとメイントピックの違いは何ですか？いつどのように使用すればよいのでしょうか？
親テーマとは、機能が完全で独立したテーマのことです。子テーマは親テーマのすべての機能とスタイルを継承しており、子テーマ自体には1つのみのコンテンツが含まれています。 style.css ファイルと、それに含まれる可能性のあるもの functions.php などのファイルです。既存のテーマ（特に人気のあるフレームワークや商用テーマ）をカスタマイズしたい場合で、将来親テーマを安全に更新してもカスタマイズ内容が失われないようにしたい場合は、サブテーマを作成するべきです。サブテーマの変更内容は親テーマの対応するファイルを上書きします。
テーマ開発において、画像やメディアファイルをどのように扱うべきでしょうか？
テーマ自体で使用する画像（ロゴやデフォルトの背景画像など）は、テーマフォルダ内に配置する必要があります。 assets/images/ユーザーがアップロードしたコンテンツの画像については、WordPressに内蔵されているメディア処理関数を使用するべきです。 the_post_thumbnail() 生成文章的缩略图，并利用这些缩略图进行进一步的展示或处理。 add_image_size() 自分のテーマレイアウトに合った画像サイズを登録し、レスポンシブな画像の読み込みを実現してください。絶対に画像のURLパスをハードコードしてはいけません。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語