WordPressのテーマの基本構造を理解する
WordPressのテーマとは、本質的に一連のファイルの集合であり、これらのファイルが合わさってウェブサイトのフロントエンドの外観と機能を定義しています。その中で、すべてのテーマに必ず含まれていなければならないファイルが2つあります：style.cssとindex.phpそれらはテーマの基石を形成しています。
最も基本的なレベルでは、WordPressのテーマはテンプレートファイルシステムを通じて動作します。訪問者がページをリクエストすると、WordPressはリクエストされたページの種類（ホームページ、記事ページ、アーカイブページなど）に応じて、どのPHPテンプレートファイルを読み込んでコンテンツをレンダリングするかを特定します。このような設計により、開発者は異なる種類のページの表示内容を非常に柔軟に制御することができます。
テーマファイルの構造概要
標準的なWordPressテーマには、一連の特定のファイルが含まれています。必要なファイルに加えて、…style.cssとindex.php機能が充実したテーマには、通常、以下のような要素も含まれています：functions.php、header.php、footer.php、sidebar.phpまた、異なるページ向けのテンプレートファイルについても…single.php（記事ページ）およびpage.php（ページ）functions.phpファイルはテーマの「脳」のようなもので、機能の追加やメニューの登録、サイドバーの設定などが行われます。
推薦図書 WordPressテーマ開発入門：ゼロから初めてのウェブサイトスキンを作成する。
style.cssこのファイルにはスタイルシートだけでなく、ファイルヘッダのコメントにもテーマに関するメタデータが含まれています。例えば、テーマの名前、作者、説明、バージョンなどです。これらがWordPressがテーマを識別するための鍵となります。
/**
* Theme Name: My Custom Theme
* Author: Your Name
* Description: A custom theme built from scratch.
* Version: 1.0
*/ローカル開発環境の構築
コードの執筆を始める前に、専門的なローカル開発環境を構築することが非常に重要です。これにより、オンラインサイトに影響を与えることなく、安全で隔離された環境ですべての機能をテストすることができます。
推奨されるツールの組み合わせには、Local by Flywheel、XAMPP、MAMPなどがあります。これらはPHP、MySQL、WordPressをワンクリックでインストールできます。さらに、強力なコードエディタ（VS Code、PhpStormなど）やバージョン管理システム（Gitなど）も、現代のテーマ開発には欠かせません。
「最初のトピックフォルダを作成する」
まず、WordPressのインストールディレクトリ内にある…wp-content/themes/フォルダ内で、新しいフォルダを作成してください。例えば、my-first-themeこのフォルダの名前があなたのテーマ識別子になります。
その後、そのフォルダ内に2つの最も基本的なファイルを作成してください。style.cssとindex.php「。確保」style.cssファイルのヘッダー情報を完全に記入してください。その後、WordPressの管理画面にログインし、「外観」→「テーマ」のページに移動すると、新しく作成したテーマが表示されるはずです。ただし、現時点ではまだどんなスタイルや機能も備わっていません。
推薦図書 WordPressテーマ開発の完全ガイド：入門コードから実践的なテクニックまで。
コアテンプレートコンポーネントの導入
DRY（Don’t Repeat Yourself）原則に従うために、WordPressのテーマではテンプレートコンポーネントを使用して共通部分を分割しています。header.php、footer.phpとsidebar.php。
はい。index.phpここでは、「使用」を使っています。get_header()、get_footer()とget_sidebar()これらのコンポーネントを導入するための関数があります。これらの関数はWordPressのコアテンプレートタグであり、指定された名前のテンプレートファイルを自動的に探し出して読み込みます。
// 在 index.php 中的典型结构
<?php get_header(); ?>
<main id="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 输出文章内容
endwhile;
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>コアテンプレートとループの詳細な仕組みについて
WordPressの「ループ」は、コンテンツの表示を駆動する核心的なメカニズムです。これはPHPコードの構造であり、現在のページに記事（またはページ）が存在するかどうかをチェックし、存在する場合はそれらをループ処理してコンテンツを出力します。
メインループとクエリの仕組みを理解する
最も基本的なループ構造は以下の通りです。これはほぼすべてのテンプレートファイルに含まれており、記事リストや個々の記事の内容を取得して表示するために使用されます。
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
これで終わりです。最後に、WordPressのテーマやプラグインの開発者に感謝します。このループの中で、have_posts()とthe_post()関数がプロセスを制御しています。テンプレートタグなども…the_title()とthe_content()現在の記事に関する具体的な情報を出力するために使用されます。
カスタムページテンプレートの作成
特定のページに独自のレイアウトを作成することは可能です。そのためには、新しいPHPファイルを作成し、そのファイルの冒頭に特定のテンプレート名を記述するコメントを追加する必要があります。
推薦図書 WordPressテーマ開発の完全ガイド：入門から上級者までの核心技術と実践的手順。
たとえば、`my_project`という名前のプロジェクトを作成するには、次のようにします：template-fullwidth.phpそのファイルの冒頭には以下のように書き込んでください：
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板。
*/保存した後、WordPressの管理画面で任意のページを編集すると、「ページ設定」→「テンプレート」のドロップダウンリストに「全幅ページ」オプションが表示されます。それを選択すると、そのページはあなたが作成したカスタムテンプレートを使用してレンダリングされます。
関数ファイルを利用してテーマ機能を強化する
functions.phpこれはあなたのテーマツールボックスです。ここでは、テーマサポート機能の追加、ナビゲーションメニューの登録、ツールバー領域の定義、スタイルやスクリプトファイルの順序付けての導入、そしてカスタム関数の作成ができます。
トピックのサポート機能と登録メニューを追加します。
利用するadd_theme_support()関数を使用することで、WordPressのコア機能を有効にすることができます。例えば、記事のサムネイル機能を有効にすることは、多くのテーマで標準的に備わっています。
function mytheme_setup() {
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5标记（用于评论表单、搜索表单等）
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );登録後、ナビゲーションメニューを使用できるようになります。register_nav_menus()関数です。登録すると、バックエンドの「外観」→「メニュー」でこれらのメニュー項目の配置を管理でき、テンプレート内で使用することができます。wp_nav_menu()呼び出すために。
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-theme' ),
'footer' => __( '页脚菜单', 'my-theme' ),
) );スタイルとスクリプトを安全に導入する。
テンプレートファイル内にCSSやJSファイルのリンクを直接ハードコードすることは絶対に避けてください。正しい方法は、それらのファイルを外部から読み込むように設定することです。wp_enqueue_style()とwp_enqueue_script()関数を作成し、それらをマウントします。wp_enqueue_scriptsこのフックの上にあります。これにより、依存関係が正しく処理され、重複して読み込まれるのを防ぐことができます。
function mytheme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );レスポンシブデザインとテーマカスタマイズの実現
現代のテーマはレスポンシブでなければなりません。つまり、テーマのレイアウトやスタイルがスマートフォンからデスクトップまでのさまざまな画面サイズに自動的に適応できるようになっている必要があります。これは主にCSSのメディアクエリを使用して実現されます。
モバイルファーストのCSSを構築する
「モバイルファースト」のCSS戦略を採用することをお勧めします。まず、小さな画面に適した基本スタイルを作成し、その後、メディアクエリを使用して徐々に大きな画面向けのスタイルを追加したり、既存のスタイルを上書きしたりしていきましょう。
/* 基础样式（针对移动设备） */
.container {
width: 100%;
padding: 1rem;
}
/* 中等屏幕（平板） */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 大屏幕（桌面） */
@media (min-width: 992px) {
.container {
width: 970px;
}
}WordPressカスタマイザーの統合
WordPressのカスタマイザーを使用すると、ユーザーはテーマの設定（色やフォントなど）をリアルタイムでプレビューしたり、変更したりすることができます。WP_Customize_Managerオブジェクトについては、トピックにカスタムオプションを追加することができます。
首先在functions.php中に関数を作成し、それを使用してください。customize_registerフック。
function mytheme_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-theme' ),
'section' => 'colors',
'settings' => 'primary_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );その後、フロントエンドのCSSで使用することができます。get_theme_mod( 'primary_color' )ユーザーが設定した値を取得し、動的なスタイルを出力するために。
概要
WordPressのテーマ開発とは、創造性と技術を組み合わせるプロセスです。基本的なファイル構造、テンプレートの階層、コアループの理解から始め、環境の構築、テンプレートコンポーネントの作成、そしてそれらを組み合わせてテーマを完成させるまで……functions.php注入機能の実装から始まり、レスポンシブデザインやカスタマイズオプションの実現に至るまで、すべてのステップは前のステップで得た知識に基づいて構築されています。これらの核心的なスキルをマスターすれば、ゼロからでも機能豊富でデザインが優れ、ベストプラクティスに準拠したWordPressテーマを作成することができるでしょう。覚えておいてください——実践こそが学習の鍵です。継続的に試行錯誤し、公式ドキュメントを参照し、プロジェクトを構築することがスキル向上の最良の方法です。
FAQ よくある質問
WordPressのテーマ開発にはPHPに精通しなければならないのでしょうか？
はい、しっかりとしたPHPの基礎があることは必須です。WordPressのコア自体がPHPで書かれており、すべてのテンプレートファイルや機能関数はPHPなしには動作しません。少なくとも、変数、配列、関数、ループ、条件判断といった基本文法を理解し、WordPressの特定の関数やフック（hook）とどのようにやり取りするかを知っている必要があります。
テーマの `style.css` ファイルのヘッダー情報は変更できますか？
はい、しかし注意が必要です。ファイルヘッダー情報に含まれる「Theme Name」は、バックエンドでテーマを識別するための唯一の識別子です。開発中にこの値を変更すると、WordPressはそれを新しいテーマとして認識します。すでに公開されているテーマの名前を直接変更すると、ユーザーのウェブサイトでテーマが切り替わったり、設定が失われたりする可能性があります。
私のテーマに多言語翻訳を追加するにはどうすればいいでしょうか？
テーマの国際化（i18n）対応を適切に準備する必要があります。コード内では、ユーザー向けのすべての文字列を WordPress の翻訳関数でラップしてください。たとえば__( ‘文本’, ‘my-theme-textdomain’ )または_e( ‘文本’, ‘my-theme-textdomain’ )その後、Poeditのようなツールを使用して作成します。.potテンプレートファイルに基づいて、翻訳者は異なる言語のコンテンツを生成することができます。.poと.moファイルです。最後に、使用してください。load_theme_textdomain()「Function loading」の翻訳です。
サブトピックとメイントピックの違いは何ですか？いつどのように使用すればよいのでしょうか？
サブテーマは親テーマのすべての機能とスタイルを継承し、親テーマを安全に修正したり、新しい機能を追加したり、スタイルを上書きしたりすることができます。既存の完成度の高いテーマ（親テーマ）をベースに高度にカスタマイズしたい場合でありながら、将来親テーマを更新しても自分のカスタマイズ内容を失いたくない場合は、サブテーマを作成するべきです。サブテーマには必要なものは1つだけです。style.cssそしてある人と。functions.phpそのファイルを使用すれば問題なく動作します。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語