WordPressのテーマは、ウェブサイトの外観と機能の核心です。カスタム開発により、開発者はウェブサイトのデザインロジック、パフォーマンス、機能拡張を完全にコントロールすることができ、サードパーティのテーマに依存する必要がなくなります。このガイドでは、最も基本的なディレクトリ構造から始めて、現代の開発基準に準拠した機能豊富なWordPressカスタムテーマを段階的に構築する方法を説明します。テーマアーキテクチャの基本概念やテンプレートファイルの組織方法を習得し、PHP関数やフックを使って動的なコンテンツを注入する方法も学びます。
テーマ開発の基礎と環境準備
コードの執筆を始める前に、正しい開発環境を構築し、そのテーマの基本構造を理解することが非常に重要です。これにより、開発作業が効率的に進み、WordPressのエコシステムの規範に準拠したものになります。
ローカル開発環境の構築
ローカル開発環境（Local、XAMPP、MAMPなど）の使用をお勧めします。これらのツールを使えば、PHP、MySQL、Apache/Nginxをワンクリックでインストールできます。その環境内で新しいWordPressのインストールを行い、テーマのテストプラットフォームとして使用してください。
推薦図書 WordPressテーマ開発ガイド：ゼロからプロ仕様のテーマを構築する。
テーマの標準的なカタログ構造を理解する
WordPressで認識される最もシンプルなテーマは、たった2つのファイルだけで構成されています。style.css と index.phpしかし、しっかりと構成されたカスタムテーマディレクトリでは、さまざまな種類のファイルを適切に整理する必要があります。典型的なテーマディレクトリの構造は以下の通りです：
your-theme/
├── style.css (必需，主题样式表和信息头)
├── index.php (必需，主模板文件)
├── functions.php (主题功能增强文件)
├── header.php (头部模板)
├── footer.php (底部模板)
├── sidebar.php (侧边栏模板)
└── assets/ (静态资源目录)
├── css/
├── js/
└── images/「core style sheet file」を作成する
style.css このファイルは単なるスタイルシートではなく、テーマの「身分証明書」のようなものです。ファイルの上部にあるコメントブロックには、WordPressがテーマを認識するために必要なすべてのメタ情報が含まれています。
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/その中で、Text Domain 国際化のために使用されるもので、後続で翻訳関数を呼び出す際に必ず使用する必要がある識別子です。
コアテンプレートファイルシステムの構築
WordPressはテンプレートの階層システムを採用しており、異なるページタイプにどのテンプレートファイルを使用するかを決定します。これらのテンプレートファイルを作成することが、テーマ開発の中核的な作業です。
基本テンプレートファイルを作成します。
まず、分割されたヘッダーとフッターのテンプレートを作成します。ファイル header.php HTMLドキュメントのヘッダーを含める必要があります。地域やページのメインコンテンツの開始部分には、通常、以下のような要素が使用されます： wp_head() この関数を使うことで、プラグインやコア機能からコードを注入することができます。
推薦図書 WordPressテーマ開発入門から上級者へ：カスタムウェブサイトを構築するための包括的なガイド。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
</header>書類 footer.php その場合、ページフッターの内容が含まれ、そして… wp_footer() 関数が終了しました。
<footer>
<p>©</p>
</footer>
</body>
</html>メインテンプレートファイルの実装
index.php 最終的なテンプレートリカバリファイルとしての基本的な役割は、ヘッダーとフッターを読み込み、記事リストを表示するためのメインループを構築することです。
<?php get_header(); ?>
<main>
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div>あなたのコメントは受け付けられました。ありがとうございます。</div>
</article>
<p>記事はありません。</p>
endif; 終わり
</main>専用のページテンプレートを開発する
テンプレートの階層に基づいて、特定のページ用により詳細なテンプレートを作成することができます。例えば、 single.php 単一の記事を表示するために使用されます。page.php 独立ページを表示するために使用されます。archive.php カテゴリーアーカイブを表示するために使用されます。WordPressはこれらのより具体的なテンプレートを自動的に優先的に呼び出します。
関数ファイルを利用してテーマ機能を強化する
functions.php このファイルはあなたのテーマ「コントロールセンター」用のもので、機能の追加やメニューの登録、特徴的な画像のサポートなどに使用できます。コアファイルを変更する必要はありません。
テーマの基本サポートを追加する。
はい。 functions.php ここでは、「使用」を使っています。 add_theme_support() 関数を使って、テーマがサポートする機能を宣言します。これが標準的な出発点です。
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );登録用サイドバーのツールエリア
利用する register_sidebar() この関数は、ユーザーがバックグラウンドでコンテンツを動的に追加できるようにするためのツールバー領域を定義するためのものです。
推薦図書 WordPressテーマ開発入門 – ゼロから最初のカスタムテーマを作成する。
function my_custom_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_custom_theme_widgets_init' );スクリプトやスタイルを安全に導入する方法
テンプレート内でCSSやJSファイルに直接ハードリンクを張ることは絶対に避けてください。代わりに、以下の方法を使用してください： wp_enqueue_style() と wp_enqueue_script() 関数を作成し、それをマウントします。 wp_enqueue_scripts フックに。
function my_custom_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );テンプレートタグとループの実装
テンプレートタグとは、WordPressが提供する一連のPHP関数のことで、テンプレート内で記事のタイトル、本文、日付などのコンテンツを動的に出力するために使用されます。これらのタグは通常、メインループの内部で使用されます。
メインループを理解し、活用すること
メインループはWordPressテンプレートにおいて最も中心的な概念であり、グローバル変数を使用しています。 $wp_query 現在のページに表示されるべき記事をすべて処理するためには、以下のような基本構造を使用します：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
<!-- 没有找到文章时的内容 -->
<?php endif; ?>呼び出し中 the_post() その後、グローバルな「記事データ」が設定され、さまざまなテンプレートタグを使用することができるようになります。
一般的なテンプレートタグを使用してコンテンツを出力します。
ループの内部では、一連の関数を呼び出して記事情報を出力することができます。例えば：
- the_title()：記事のタイトルを出力します。
- the_permalink()記事の永久リンクを出力します。
- the_content()：記事の完全な内容は以下の通りです。
- the_excerpt()：記事の要約を出力してください。
- the_post_thumbnail()：特集記事の画像を表示します。
- the_date() と the_author()出力日と著者を表示してください。
記事のページナビゲーションを実装する
記事一覧（ホームページやアーカイブページなど）の表示処理が終了した後には、ページナビゲーションを提供する必要があります。そのために以下の方法を使用できます： the_posts_pagination() この関数は、見た目に美しく、アクセスしやすいページングリンクのリストを出力します。
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上一页', 'my-custom-theme' ),
'next_text' => __( '下一页', 'my-custom-theme' ),
) );概要
「正しい情報ヘッダを含むファイルを作成した後に…」 style.css 基本的なものと index.php さて、あなたはすでにカスタムWordPressテーマを構築するための核心的な手順を踏んできました。テンプレートの階層構造について詳しく学び、その構成要素を詳細に分析しました。 header.php と footer.php コードの再利用性を高めるために、そしてそれを通じて… functions.php このファイルには、テーマ機能とリソースがしっかりと追加されています。「メインループ」と「テンプレートタグ」を正しく理解し、適切に使用することが、動的なコンテンツをページ上に表示するための鍵となります。これらの手順とベストプラクティスに従うことで、機能するテーマだけでなく、メンテナンスが容易で拡張性のある、WordPressの基準に準拠したプロジェクトの基盤も構築できるのです。
FAQ よくある質問
WordPressのテーマを開発するにはPHPをマスターする必要がありますか？
はい、PHPは必ず習得すべき言語です。WordPressのコア部分自体がPHPで書かれており、すべてのテンプレートファイル、機能ロジック、データベースとのやり取りはPHPに依存しています。HTML、CSS、JavaScriptはフロントエンドの表示やインタラクションを構築するために使用されますが、PHPこそが動的なデータをフロントエンドに表示するための基盤となる言語です。
なぜ私のテーマがバックエンドで表示されない、または有効にならないのでしょうか？
最も一般的な原因は style.css ファイルの上部にあるテーマ情報のヘッダーコメントの形式が正しくなく、必要な情報が欠けているか、またはファイルのエンコーディングに問題があります。情報ヘッダーを規格に厳密に従って記入し、ファイルのエンコーディングが「UTF-8 without BOM」であることを確認してください。次に、テーマフォルダーが正しく配置されているかを確認してください。/wp-content/themes/ディレクトリ内にあります。
functions.phpファイルとプラグインにはどのような違いがありますか？
functions.php ファイル内に含まれる機能は現在のテーマと密接に関連しており、テーマを切り替えるとこれらの機能は使用できなくなります。したがって、テーマの外観やレイアウトに密接に関連する機能（登録メニューの追加、ツールバー領域の設定、テーマサポートオプションの追加など）を追加するのに適しています。一方、プラグインで提供される機能は通常テーマとは独立しており、テーマを切り替えても引き続き使用できるため、連絡フォームの作成、SEO最適化、キャッシングなどの汎用的な機能を追加するのに適しています。
どうやって私のテーマを多言語対応（国際化）にするか？
WordPressの国際化機能を使用して、ユーザーに表示されるすべてのテキストを適切に処理する必要があります。コード内で次のように使用してください： () または _e() などの関数を使用し、指定された場所で実行します。 style.css ここで定義された Text Domain例えば：echo ( ‘阅读更多’, ‘my-custom-theme’ );その後、Poeditのようなツールを使用して生成します。.pot翻訳テンプレートファイルです。翻訳者が使用して翻訳を作成するためのものです。.poと.mo言語ファイル。
開発時には、コアテンプレートファイルを直接編集すべきでしょうか？
WordPressのコアファイルや、現在使用している親テーマのコアファイルを直接変更することは絶対に避けてください（サブテーマを作成している場合を除きます）。いかなる変更も次回のアップデート時に破棄されてしまいます。カスタマイズ開発は、常に自分専用の独立したテーマやサブテーマ内で行うべきです。これがWordPress開発の基本原則です。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語