WordPressテーマの開発は、個性あふれるウェブサイトを制作するための中心的なスキルです。これにより、ウェブサイトの外観や機能を完全にコントロールでき、既存のテーマに制約されることはありません。この記事では、ゼロから完全なWordPressテーマを構築するための全てのプロセスを体系的に説明します。
ワードプレステーマの基本概念
コーディングを始める前に、WordPressテーマの基本的な構成と仕組みを理解することが非常に重要です。テーマとは、本質的にウェブサイトに保存されているものです。wp-content/themes/目録の下にあるフォルダーには、特定の機能を備えた一連のファイルが含まれています。
テーマのコアファイル構造
ウェブサイトを作成する際に最も基本的なWordPressテーマには、少なくとも2つのファイルが必要です。style.cssとindex.phpその中で、style.cssテーマのスタイルだけでなく、ヘッダーコメントにはテーマのメタデータ（テーマ名、作者、説明、バージョン番号など）も記録されています。このファイルの先頭にあるコメントは、WordPressがテーマを認識するための重要なものです。
推薦図書 初心者から上級者まで、WordPressテーマ開発の完全なガイドと実践的なチュートリアル。
テーマが複雑にな流につれ、さまざまなページを構築するために多くのテンプレートファイルが導入されるようになります。例えば、header.phpウェブページのヘッダー領域を担当しています。footer.php下部領域を担当する、sidebar.php管理側バーを管理しながら、functions.phpこれは、テーマ機能の追加、メニューの登録、ウィジェット領域の設定、スクリプトやスタイルシートの導入などに使用される強力なファイルです。
テンプレートの階層とループメカニズム
WordPressは、「テンプレート階層」と呼ばれるインテリジェントシステムを使用して、現在のリクエストでどのテンプレートファイルを使用してページをレンダリングするかを決定します。基本的なルールは、最も具体的なテンプレートから検索を開始し、存在しない場合はより一般的なテンプレートに移行することです。たとえば、IDが123の記事の場合、WordPressはまずその記事用のテンプレートを検索します。single-post-123.phpそして次にsingle-post.php続いて、single.phpそして、最後に元に戻します。singular.phpもしどれも見つからなかったら、最終的にこれを使うことになります。index.php。
すべてのコンテンツに共通する中心的な概念は「ループ」です。ループとは、WordPressがデータベースからコンテンツ（記事、ページなど）を取得してウェブページに表示するために使用するPHPコードの構造です。その基本形式は次のようになります。
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<!-- 在这里输出文章内容，例如： -->
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
終わりました。ありがとうございました。テンプレート関数などを利用して。the_title()とthe_content()ループ内で記事の各セクションを出力できます。ループを理解し、上手に利用することがテーマ開発の基礎です。
基本テーマのフレームワークを構築する。
さて、コアコンセプトを実践してみましょう。「MyFirstTheme」という名前のミニマルテーマを作成してみましょう。
推薦図書 独自のウェブサイトを作成する：WordPressテーマ開発の全てのプロセスを詳細に解説。
スタイルシートとメインファイルの作成
まず、wp-content/themes/カタログの下にフォルダを作成するmyfirstthemeそして、そのフォルダ内に作成してください。style.cssファイルを開き、ファイルの先頭に必要な注釈情報を追加します。
/*
Theme Name: My First Theme
Theme URI: https://example.com/myfirsttheme
Author: Your Name
Author URI: https://example.com
Description: 一个用于学习的极简WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/次に、テーマのメインファイルを作成しましょう。index.phpこれは、すべてのページの最終的なバックアップテンプレートです。最も簡単なバージョンでは、基本的なHTML構造とループが含まれることができます。
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h1>', '</h1>' );
the_content();
endwhile;
else :
echo '<p>現時点では何もありません。</p>';
endif;
?>
</body>
</html>wp_head()とwp_footer()2つのフックが非常に重要であり、WordPressのコア、プラグイン、その他のスクリプトがページに追加される際にこれらを利用することができます。<head>と</body>スタイル、スクリプト、メタタグなど、必要なコードを先に挿入してください。
機能ファイルとテンプレートの分離を導入する。
コードをよりモジュール化するためには、テンプレートを分割する必要があります。作成してください。header.phpを置き換えます。<head>セクションやページトップの共通構造（ナビゲーションメニューなど）がそこに移動されます。作成するfooter.phpフッターのコンテンツを追加します。そして、index.phpここで使用されているのはget_header()とget_footer()関数はそれらを導入します。
同時に、作成してください。functions.phpこのファイルは、テーマの「コントロールセンター」です。まず、ここではテーマにメニューサポートを追加し、スタイルシートを導入することができます。
<?php
function myfirsttheme_setup() {
// 让主题支持导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'myfirsttheme' ),
) );
// 为文章和评论RSS feed添加支持
add_theme_support( 'automatic-feed-links' );
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );
function myfirsttheme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'myfirsttheme-style', get_stylesheet_uri() );
// 引入Google Fonts等外部资源
wp_enqueue_style( 'myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'myfirsttheme_scripts' );
?>高度なテーマ機能を実現する。
基本フレームワークが構築された後、より現代的で強力な機能を統合し、テーマのプロフェッショナリズムと使いやすさを向上させることができます。
推薦図書 ワードプレスのテーマとその主な機能は何ですか？。
サイドバーと組み合わせてウィジェットを追加することができます。
ウィジェットとは、WordPressでドラッグアンドドロップできるコンテンツブロックです。テーマがウィジェットをサポートするようにするには、functions.phpウェブサイトに1つ以上の「ウィジェットエリア」、通常はサイドバーと呼ばれるエリアを登録することができます。
function myfirsttheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'myfirsttheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'myfirsttheme' ),
'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', 'myfirsttheme_widgets_init' );登録後、「外観」->「ウィジェット」に移動すると、「メインサイドバー」領域が表示されます。フロントエンドに表示するには、テンプレート（例えば <）で設定する必要があります。sidebar.phpまたはindex.php）で使用されていますdynamic_sidebar( 'sidebar-1' )関数の呼び出し。
記事に統合された特集画像とカスタムロゴ
現代のテーマは一般に、記事のサムネイル（特集画像）やカスタムサイトロゴをサポートしています。これらは次のように設定できます。add_theme_support()関数でこれらの機能を簡単に有効にすることができます。
function myfirsttheme_theme_support() {
// 启用文章和页面的“特色图像”功能
add_theme_support( 'post-thumbnails' );
// 启用自定义Logo功能
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
}
add_action( 'after_setup_theme', 'myfirsttheme_theme_support' );有効にすると、記事の編集ページに「特集画像」メタボックスが表示され、「カスタマイザー」の「サイトのアイデンティティ」セクションにロゴのアップロードオプションが表示されます。テンプレートでは、次のように使用できます。the_post_thumbnail()特徴的な画像を表示するには、the_custom_logo()ロゴを表示します。
テーマのカスタマイズと最適化の実践
開発が完了したからといって終わりではありません。テーマの柔軟性、メンテナンス性、および高性能を確保するためには、同様に重要な作業が必要です。
カスタマイザーを使用してテーマオプションを追加する。
WordPressのカスタマイザーでは、ユーザーはテーマ設定をリアルタイムでプレビューして変更することができます。これを利用してWP_Customize_Managerオブジェクトは、テーマにさまざまな設定やコントロールを追加できます。たとえば、ウェブサイトのタイトルの色を変更するオプションを追加できます。
function myfirsttheme_customize_register( $wp_customize ) {
// 添加一个设置（Setting）用于存储颜色值
$wp_customize->add_setting( 'site_title_color', array(
'default' => '#333333',
'transport' => 'postMessage', // 支持实时预览刷新
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控件（Control）用于在定制器界面显示颜色选择器
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'site_title_color', array(
'label' => __( '网站标题颜色', 'myfirsttheme' ),
'section' => 'colors', // 放在已有的“颜色”板块
'settings' => 'site_title_color',
) ) );
}
add_action( 'customize_register', 'myfirsttheme_customize_register' );そして、style.cssまたは、wp_add_inline_style関数は、この動的スタイルを出力します。
パフォーマンスの最適化とセキュリティ対策
優れたテーマは、優れたパフォーマンスとセキュリティの基盤を備えなければなりません。パフォーマンスに関しては、すべてのCSSとJavaScriptファイルが正常に読み込まれるようにする必要があります。wp_enqueue_style()とwp_enqueue_script()正確に導入し、依存関係や読み込み場所を適切に設定する（例えば、スクリプトはフッターに配置する）。画像の場合、レスポンシブイメージのサポートを確認し、ユーザーに画像サイズを最適化するように促す必要があります。
セキュリティ上の理由から、ユーザーやデータベースから取得してページに出力されるすべての動的データは「エスケープ」する必要があります。WordPressでは、出力URLのエスケープなど、いくつものエスケープ関数が提供されています。esc_url()出力されたHTML属性を使用する。esc_attr()出力テキストエリアの内容を使用する場合は、esc_textarea().でfunctions.phpカスタマイザーやオプションから取得したすべての値は、出力する前にエスケープ処理が必要です。
さらに、翻訳の準備をするために、テーマに追加します。__( ‘文本’, ‘myfirsttheme’ )と_e( ‘文本’, ‘myfirsttheme’ )全てのユーザーに表示される文字列をパッケージ化し、作成しましょう。.pot言語ファイルを使用すると、あなたのテーマを世界中のユーザーが利用できるようになります。
概要
WordPressテーマの開発は、テンプレート階層やループなどのコアコンセプトを理解し、ファイル構造を構築し、テンプレートを分割し、メニュー、ウィジェット、特集画像などの機能を統合する実践的なプロセスから始まります。これらを深く理解する必要があります。functions.phpカスタマイズ可能なAPIを利用することで、テーマの柔軟性とプロフェッショナリズムを大幅に向上させることができます。最後に、コードのセキュリティ、パフォーマンス、国際化に常に注意を払うことは、プロのテーマ開発者になるための重要な要素です。これらのステップとベストプラクティスに従うことで、見た目に美しく機能的なWordPressテーマを作成することができるでしょう。
FAQ よくある質問
WordPressのテーマを作るにはPHPを知る必要があるの？
はい、PHPは必須です。WordPress自体やそのテーマテンプレートシステムはすべてPHPで構築されています。基本的なPHP文法をマスターする必要があります。特に、HTMLにPHPコードを埋め込む方法、WordPressが提供する何千もの組み込みテンプレート関数やフックを使用してコンテンツを動的に出力し、記事をループ処理し、論理を処理する方法について理解する必要があります。HTMLとCSSは外観を構築するための基礎であり、PHPは動的な機能を実現するための中心的なものです。
なぜ私のトピックはバックエンドで表示されないのか？
もし、テーマフォルダがすでにアップロードされているのであれば、wp-content/themes/カタログはありますが、WordPressのバックエンドで「外観」->「テーマ」に表示されないので、まずそこを確認してください。style.cssファイルの先頭にあるテーマ情報の注釈形式は正しいですか？注釈ブロックは必ず次のように記述しなければなりません。/*まず、*/終わりです、そして含まれていますTheme Name:この行です。さらに、テーマフォルダーに少なくとも1つのファイルが存在することを確認してください。style.cssとindex.phpこの2つのファイルです。ファイルのアクセス権の問題が原因で、トピックを読むことができない可能性もあります。
functions.phpファイルとプラグインの違いは何ですか？
functions.phpプラグインはテーマの一部であり、現在アクティブなテーマにバインドされています。通常、登録メニューの場所、ウィジェット領域の定義、テーマサポートオプションの追加、テーマ専用のスタイルやスクリプトの追加など、テーマのビジュアル表現や機能に密接に関連する機能を追加または変更するために使用されます。一方、プラグインが提供する機能はテーマとは独立しており、テーマを変更しても通常は機能が維持されます。一般的に、ウェブサイトの機能を向上させるだけでなく、外観を変更する場合は、プラグインの方が適しています。一方、テーマのレイアウト、スタイル、デザインロジックと深く統合された機能は、テーマ内に置く方が良いでしょう。functions.php真ん中だ。
私のテーマにサブテーマを追加するにはどうすればいいですか？
ユーザーがカスタマイズを行いながらも更新を失わないようにするための最善の方法は、テーマにサブテーマをサポートさせることです。これを「親テーマ」と呼びます。まず、テーマが優れたコーディング基準に従っており、テンプレートファイル、関数、スタイルが明確に整理されていることを確認してください。最も重要なステップは、style.cssここでは、「使用」を使っています。@importルールで親テーマのスタイルを導入する方法は時代遅れです。正しい方法は、子テーマのfunctions.phpここで使用されているのはwp_enqueue_scriptsフックを使用して親テーマのスタイルシートを読み込むためのキューを作成します。親テーマの開発者は、コード構造が明確であり、子テーマの作成方法がドキュメントに記載されていることを確認する必要があります。ユーザーが子テーマを作成すると、WordPressは優先的に子テーマのファイルを読み込み、親テーマの同名ファイルを上書きします。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語