WordPressテーマ開発の基本概念
コードの執筆を始める前に、WordPressテーマの基本的な構成を理解することが非常に重要です。WordPressテーマとは、本質的に一連のファイルの集合であり、これらのファイルが合わさってウェブサイトの外観や機能を定義しています。これらのファイルには、テンプレートファイル、スタイルシート、オプションとして用意されている関数ファイル、スクリプトなどが含まれます。
核となる文書はstyle.cssとindex.phpその中で、style.cssテーマのスタイルシートだけでなく、テーマの「身分証明書」のようなものでもあります。そのファイルのヘッダーには、テーマの名前、作者、説明、バージョンなどの重要なメタ情報が含まれています。WordPressはこれらの情報を読み取ることで、バックエンドでテーマを識別し、管理しています。
テンプレートファイルは、異なるページの表示ロジックを制御する役割を果たします。例えば、single.php単一の記事を表示するために使用されます。page.phpこれは独立したページを表示するために使用されます。archive.phpこれらのファイルは記事のアーカイブリストを表示するために使用されます。これらのファイルはWordPressのテンプレート階層システムに従っており、特定のテンプレートが存在しない場合、システムは自動的により一般的なテンプレートに切り替わり、最終的にはデフォルトのテンプレートに戻ります。index.php。
推薦図書 WordPressテーマ開発入門ガイド：ゼロからあなただけのウェブサイトデザインを作り上げる。
もう一つの重要なファイルはfunctions.phpこのファイルはテンプレートファイルではなく、テーマの機能を定義するためのファイルです。この中にカスタム機能を追加したり、メニューやサイドバー（ツールバー）を登録したり、テーマに特徴的な画像（記事のサムネイル）の表示機能を追加したり、JavaScriptやCSSファイルの読み込みを遅延させる（キューイング）設定を行うことができます。このファイルはテーマの「脳」のようなもので、ロジックの処理や機能の拡張を担当しています。
これらの基本ファイルとその役割を理解することは、安定して保守が容易なテーマを構築するための第一歩です。
ローカル開発環境の構築とテーマ構造の作成
コーディングを始める前に、効率的なローカル開発環境を構築することが不可欠です。Local by Flywheel、XAMPP、MAMPなどのローカル開発ツールを使用することをお勧めします。これらのツールを使えば、Apache、MySQL、PHPを備えたWordPressの運用環境を簡単にローカルコンピュータ上に構築できます。これにより、オンラインサイトに影響を与えることなく、オフラインで開発やテスト、デバッグを行うことができます。
環境が整ったら、WordPressのインストールディレクトリ内で以下の作業を行う必要があります。wp-content/themes/フォルダ内に新しいフォルダを作成し、それをあなたのテーマディレクトリとして使用してください。フォルダの名前には小文字、数字、ハイフンを使用し、説明的な名前にしてください。例えば：my-first-theme。
次に、最も基本的な2つのファイルを作成します。まずは…style.cssそのファイルのヘッダーには、以下の形式のコメントを含める必要があります：
推薦図書 WordPressテーマ開発とは。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/“「Text Domain」は国際化のために使用され、通常はテーマディレクトリの名前と一致します。その後は…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>
<header>
<h1>私の最初のトピック</h1>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif;
?>
</main>
<footer>
<p>© 著作権所有</p>
</footer>
</body>
</html>この時点で、WordPressの管理画面にログインし、「外観」→「テーマ」に移動してください。そこに新しいテーマが表示されているはずですので、それを有効にしてください。シンプルな作りですが、すでに使えるテーマとなっています。
核心テンプレートファイルとループの詳細解説
WordPressでは、「The Loop」と呼ばれる処理を使用してデータベースから記事の内容を取得し、ページ上に表示します。The LoopはWordPressのテーマ開発における核心的な概念であり、ほとんどすべてのテンプレートファイルがこのThe Loopを中心に構築されています。
WordPressのメインループを理解する。
ループの基本構造は、一連の処理手順です。ifとwhileこのステートメントは、現在のクエリに記事が含まれているかどうかをチェックし、その後各記事を順に処理します。処理の際には、記事のデータ（タイトル、内容、著者など）をテンプレートタグで呼び出せるようにします。典型的なループ構造は以下の通りです：
<!-- 在这里输出文章内容，例如： -->
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
<p>何の記事も見つかりませんでした。</p>
endif; 終わりthe_post()この関数は、現在の記事のデータを設定するために使用されます。その設定が完了した後でなければ、関連する機能を使用することはできません。the_title()、the_content()などのテンプレートタグです。
共通テンプレートファイルの作成
テーマがさまざまなページを専門的に処理できるようにするためには、いくつかのコアテンプレートファイルを作成する必要があります。まずは…header.phpとfooter.phpこれは、ヘッダーとフッターのコードを別の場所から読み込むために使用されます。index.php中央から分離されました。header.php中に、から置いたものを…到着しました。タグの開始後の内容；在footer.php中に置く。その前の内容の後で、そして、index.phpここでは、「使用」を使っています。get_header()とget_footer()関数を使ってそれらを導入します。
推薦図書 WordPressテーマ開発の完全ガイド：入門コードから実践的なテクニックまで。
次に、作成してください。single.php単一の記事に使用するためのものです。page.php独立ページ用です。これらのファイル内で先に使用することができます。get_header()とget_footer()その後、単一の記事やページに対応するループ処理やHTML構造を組み込みます。例えば、single.phpその中で呼び出しが行われる可能性があります。the_post_thumbnail()これは記事の特徴的な画像を表示するためのものです。page.php公開日が表示されない場合もあります。
最後に、作成します。archive.phpこのファイルでは、分類、タグ、著者などの情報を含むアーカイブページの処理を行います。通常、以下のような作業を行います：the_archive_title()アーカイブのタイトルを出力し、複数の記事を要約またはリストの形式で表示してください。
これらのテンプレートを分離することで、あなたのテーマの構造が明確になり、メンテナンスも容易になります。
トピック機能とスタイルの強化
基本的テーマフレームワークが完成したら、次のステップは機能を追加し、スタイルを美しくすることです。これは主に以下の方法で行われます：functions.phpとstyle.cssそれを実現するために。
関数ファイルを通じてコア機能を追加する
functions.phpファイルは、テーマに機能を追加するための主要な場所です。まず、テーマに基本的な機能のサポートを追加する必要があります。これは以下の手順で行います：add_theme_support()関数の実装。
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 让主题支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 让主题支持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_first_theme_setup' );次に、トピックのメニュー位置とサイドバー（ツールバー領域）を登録する必要があります。メニューの登録には以下の手順を使用してください：register_nav_menus()関数：
function my_first_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'init', 'my_first_theme_menus' );その後、テンプレートファイル（例えば）を使用することができます。header.php）で使用されていますwp_nav_menu( array( 'theme_location' => 'primary' ) );メニューを表示するために。
スタイルとスクリプトの導入
CSSおよびJavaScriptファイルを正しく導入する方法は、以下のように使用することです：wp_enqueue_style()とwp_enqueue_script()関数を、それらをマウントするようにします。wp_enqueue_scriptsフックの上にあります。これにより、依存関係が正しく処理され、データの重複読み込みが防がれます。
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入Google字体
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
// 引入主题的JavaScript文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );基本的なスタイルを記述する
最後に、style.cssはい、スタイルの作成を始めることができます。まずはブラウザのデフォルトスタイルをリセットし、その後段階的に必要なスタイルを追加していきましょう。body、headerナビゲーションメニュー、記事内容、サイドバー、そして…footerスタイルを定義しましょう。レスポンシブデザインのメディアクエリを使用して、テーマがスマートフォン、タブレット、デスクトップデバイスすべてで良好に表示されるようにします。継続的に調整しテストを行うことで、あなたの最初のウェブサイトのスキンは徐々に美しく、プロフェッショナルなものになっていきます。
概要
「から作成するまでのプロセスについて説明します。」style.cssとindex.phpシンプルなフォルダから始めて、徐々に構築していきます。header.php、footer.php、single.php専門的なテンプレートファイルから、そしてそれを通じて…functions.phpファイルにトピック機能、メニュー、スクリプトを追加することで、あなたは初のWordPressテーマの構築という重要なステップを完了しました。このプロセスを通じて、テンプレートの階層構造、ループ処理、アクションフックといった重要な概念を習得するだけでなく、WordPressテーマがデータ、ロジック、表示層をどのように分離しているかも理解できました。引き続き実践を重ね、自分のテーマにさらに多くのテンプレートを追加してみてください。search.php、404.php）や高度な機能（例えばカスタム記事タイプのサポートなど）を活用することで、より強力でユニークなウェブサイトのスキンを作り出すことができるでしょう。
FAQ よくある質問
WordPressのテーマを開発するにはPHPをマスターする必要がありますか？
はい、PHPはWordPressのコアプログラミング言語です。機能が充実したテーマを開発するには、PHPの基本文法を習得する必要があります。特に、関数、条件文、ループの仕組み、そしてWordPressのAPI（テンプレートタグやフック関数など）とのやり取りの方法を理解することが重要です。HTMLとCSSはフロントエンドインターフェースを構築するための基本要素であり、JavaScriptはインタラクティブな効果を追加するために使用されます。
functions.phpファイルとプラグインにはどのような違いがありますか？
functions.phpファイル内に記載されている機能は、現在アクティブになっているテーマに紐付けられています。テーマを切り替えると、これらの機能は利用できなくなります。このファイルは、そのテーマの視覚的な表現やレイアウトに密接に関連する機能の追加に最適です。例えば、そのテーマ特有のメニューの配置やサイドバーの設定、またはテーマ専用のショートコードの定義などが該当します。
プラグインが提供する機能はテーマから独立しており、どのテーマに切り替えてもプラグインの機能は通常そのまま保持されます。プラグインは、連絡フォーム、SEO最適化、キャッシングなど、テーマの外観とは関係のない汎用的な機能を追加するのに適しています。良い慣行としては、他のテーマでも再利用可能な汎用的な機能をプラグインとして作成することです。
どうやって私のテーマを多言語対応（国際化）にするか？
テーマを多言語に対応させる、つまり国際化（i18n）を実現するには、コード内でユーザーに表示されるすべての文字列を適切に処理する必要があります。PHPファイルでは、以下の方法を使用することができます：__()、_e()JavaScriptファイル内でも、同様の翻訳機能を使用してテキストを出力する必要があります。wp_set_script_translations()同様の処理を行ってください。
あなたはそれが必要です。style.css「Text Domain」とfunctions.php内部呼び出し（internal call）load_theme_textdomain()その際には、一意のテキストドメイン（Text Domain）を指定してください。次に、Poeditのようなツールを使用して、テーマのコードをスキャンし、必要な情報を生成します。.pot翻訳テンプレートファイルに基づいて、翻訳者は翻訳作業を行うことができます。.poと.mo言語ファイルです。これらの言語ファイルをテーマのフォルダに置いてください。/languages/ディレクトリ内に置いてください。
WordPressのテーマでエラーをデバッグする方法は？
WordPressのデバッグモードを有効にすることは、問題を発見し解決するための鍵です。編集を通じて…wp-config.phpファイル、それを…WP_DEBUG定数は次のように設定されています。trueまた、複数の機能を同時に有効にすることもできます。WP_DEBUG_LOG（エラーをログファイルに記録する）そしてWP_DEBUG_DISPLAY（ページにエラーが表示されています。）ウェブサイトを公開する前に、必ずデバッグモードをオフにしてください。
さらに、ブラウザの開発者ツール（F12キーを押して開く）を使用してHTML構造やCSSスタイル、JavaScriptコンソールのエラーを確認することは、フロントエンドデバッグにおいて欠かせない手段です。複雑なPHPロジックについては、error_log()関数や専用のデバッグプラグイン（例えばQuery Monitor）も、作業効率を大幅に向上させることができます。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語