カスタムのWordPressテーマを構築するということは、ウェブサイトの外観、機能、パフォーマンスを完全に自分でコントロールできるということです。既製のテーマを使用するのとは異なり、カスタム開発によって、独自で効率的なウェブサイトを作成し、自社のブランドイメージに完全に合わせることができます。このガイドでは、基本的な環境の構築から、機能豊富なテーマの公開までの手順を順を追って説明します。
開発環境と基本ファイル構造
コードの作成を始める前に、適切なローカル開発環境を構築することが非常に重要です。XAMPP、MAMP、またはより専門的なValetやLocal by Flywheelなどを使用することができます。環境がPHP 7.4以降のバージョンおよびMySQLまたはMariaDBデータベースをサポートしていることを確認してください。
WordPress テーマは本質的に、次の場所にある wp-content/themes/ フォルダ内にあるディレクトリです。このディレクトリには、少なくとも2つのコアファイルが含まれていなければなりません：スタイルシートとインデックステンプレートです。
推薦図書 WordPressテーマ開発の入門ガイド：ウェブサイトの外観をゼロから構築する。
まず、 wp-content/themes/ の下に新しいフォルダを作成する。 my-custom-themeその後、最初の必須ファイルを作成します：style.cssこのファイルは、テーマのスタイルを定義するだけでなく、ファイルのヘッダーにあるコメントにはテーマのメタデータも含まれています。
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/次に、2つ目の必須ファイルを作成します：index.phpこれはテーマのデフォルトテンプレートファイルであり、WordPressがより具体的なテンプレートを見つけられない場合に使用されます。最もシンプルな例です。 index.php 記事リストを表示するために、1つのループのみを使用することができます。
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
<?php endwhile;
endif; ?>
</main>テンプレートの階層を理解すること
WordPressはテンプレートの階層を利用して、特定のページにどのテンプレートファイルを使用するかを決定します。例えば、個別の記事にアクセスした場合、WordPressはまず以下の順番でテンプレートを探します： single.phpもし存在しない場合は、バックアップに戻ります。 singular.phpそして最後に、 index.phpこの階層関係を理解することは、効率的にテーマを開発するための鍵です。ニーズに応じて、対応するテンプレートファイルを作成する必要があります。 page.php（ページ）、archive.php（アーカイブページ）そして single.php（単一の記事）
コアテンプレートファイルとテーマ機能
それに加えて、 index.php と style.css機能が完全なテーマには、ページ構造を分割し、コードの再利用を実現するためのいくつかのコアテンプレートファイルがさらに必要です。
作成 header.php ファイルには通常、ドキュメントのタイプを宣言する情報が含まれています。<head> 地域情報、ウェブサイトのトップナビゲーション、およびロゴの表示に使用します。 wp_head() 関数は非常に重要です。それにより、WordPressのコア、プラグイン、およびあなたのテーマがここに必要なコード（スタイルシートのリンクやメタタグなど）を挿入することができるのです。
推薦図書 WordPressテーマ開発をゼロからマスターする：モダンなウェブサイトを構築するための実践ガイド。
<!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><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
</header>作成 footer.php このファイルにはフッターの内容と閉じるHTMLタグが含まれています。同様に、それを呼び出す必要があります。 wp_footer() この関数は、スクリプトやプラグインに必要なコードを読み込むために使用されます。
functions.php このファイルは、あなたのテーマの「コントロールセンター」のようなものです。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルです。ここでは、メニューやサイドバーを登録したり、テーマに追加する機能を設定したり、スタイルシートやスクリプトを配置することができます。
<?php
// 添加主题支持
function my_theme_setup() {
add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
// 注册导航菜单
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );動的にメニューを生成する
はい。 header.php を使用することができます。 wp_nav_menu() この関数は、ご登録いただいたメニューを表示するためのものです。この関数は、WordPressの管理画面（「外観 > メニュー」）で設定されたメニューデータをもとに、正しいCSSクラスと構造を持つ無秩序リストを出力します。
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
) );
?>
</nav>スタイル、スクリプト、そしてレスポンシブデザイン
現代のWordPressテーマでは、CSSおよびJavaScriptファイルの読み込みにおいてベストプラクティスを遵守する必要があります。また、ウェブサイトがすべてのデバイスで正常に表示されるようにすることも重要です。
はい。 functions.php ここでは、「使用」を使っています。 wp_enqueue_style() と wp_enqueue_script() この関数を使用することでリソースを適切に配置することができます。これにより、正しい依存関係の管理と読み込み順序が保証され、プラグインやサブテーマによる上書きも可能になります。
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 排入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
// 为脚本本地化数据（可选）
wp_localize_script( 'my-theme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );レスポンシブデザインはデフォルトの基準として採用されるべきです。あなたの… style.css メディアクエリを使用して、異なる画面サイズに応じてレイアウトを調整します。よく使われるパターンの一つに「モバイルファースト」があります。これは、まずモバイルデバイス向けの基本スタイルを作成し、その後それに基づいて他のデバイス向けのスタイルを調整するというアプローチです。 min-width メディアクエリにより、より大きな画面向けに強化されたスタイルが追加されます。
推薦図書 機能豊富なカスタムWordPressテーマの作り方を、手取り足取り教えます。。
/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }
/* 平板电脑及以上 */
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
.menu { display: flex; }
}
/* 桌面电脑 */
@media (min-width: 992px) {
.container { width: 970px; }
}WordPressに内蔵されているクラスや関数を使用する
WordPress は、スタイルの開発を支援するための多くの便利な CSS クラスや PHP 関数を提供しています。body_class() この関数は、現在のページタイプに基づいた一連のCSSクラスを出力します（例： home, single-post, page-id-2これらのクラスを利用して、CSS内で目的に応じたスタイルを記述することができます。post_class() 関数は、各記事のコンテナ要素に類似のクラスを出力します。
高度な機能とコンポーネントの統合
お客様のテーマをよりプロフェッショナルで使いやすいものにするために、カスタム記事タイプ、ウィジェットエリア（サイドバー）、カスタマイザ設定などの高度な機能を統合することができます。
ウィジェットエリアでは、ユーザーはWordPressの管理画面（「外観 > ツール」）でモジュールをドラッグ＆ドロップすることでコンテンツをカスタマイズできます。 functions.php サイドバーのウィジェットエリアを登録します。
function my_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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );登録後、テンプレートファイル内で（例えば） sidebar.php）を使用する dynamic_sidebar() この関数を使用して、このエリアを呼び出します。
WordPressのカスタマイザー（Customizer）を使用すると、ユーザーはテーマの変更内容をリアルタイムでプレビューすることができます。自分のテーマに、ウェブサイトのロゴやフッターに表示される著作権情報などの簡単な設定を追加することもできます。これには、カスタマイザーの機能を活用する必要があります。 WP_Customize_Manager クラスですね、 functions.php 該当するコードをその箇所に追加してください。
function my_theme_customize_register( $wp_customize ) {
// 添加一个“版权信息”设置
$wp_customize->add_setting( 'footer_copyright', array(
'default' => '© 2026 Your Site Name',
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_copyright', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );そして、あなたの… footer.php を使用することができます。 get_theme_mod() この設定値を出力するための関数を作成しましょう：<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。
概要
WordPressのテーマ開発とは、PHP、HTML、CSS、JavaScriptの知識をWordPressのコアアーキテクチャと組み合わせてテーマを作成するプロセスです。まずは正しいファイル構造を構築し、次にテンプレートの階層構造、コア機能の実装、リソースの管理、レスポンシブデザインの実現を段階的に行っていきます。ウィジェットやカスタマイザーなどの高度な機能を統合することで、強力でユーザーフレンドリーなプロフェッショナルなテーマを作成することができます。重要なのは、WordPressの動作原理を理解し、そのコーディング基準やベストプラクティスに従うことです。これにより、作成したテーマが安全で効率的かつメンテナンスしやすくなります。
FAQ よくある質問
WordPressテーマを開発するには、どのような前提知識が必要ですか？
HTMLとCSSのしっかりとした基礎が必要です。これらはウェブページの外観を構築するための基石です。また、PHPの基本文法もマスターする必要があります。なぜなら、WordPressのコアやテーマテンプレートはすべてPHPで書かれているからです。JavaScript（特にjQuery）についての知識は、インタラクティブな機能を追加するのに非常に役立ちます。最後に、WordPressの基本概念（ループ、フック、テンプレートの階層など）を理解することが、テーマを成功させるための鍵となります。
テーマの `functions.php` ファイルのサイズには制限はありませんが、ファイルが大きすぎるとパフォーマンスに影響を与える可能性があります。`functions.php` には、テーマ全体で使用される関数やプラグインが記述されているため、ファイルが大きくなるほど読み込みや実行に時間がかかります。特に、以下のような場合
functions.php 理論的にはファイルは非常に長くなることがありますが、メンテナビリティの観点からはモジュール化することを強くお勧めします。カスタムの記事タイプ、ショートコード、ツールなど、異なる機能を個別のファイルに分割し、それらを必要に応じて組み合わせて使用することができます。 functions.php ここで使用されているのは require_once または include コードの記述が効率的で冗長なクエリがない限り、その長さがパフォーマンスに与える影響はほとんどありません。大規模なプロジェクトでは、ファイルを分割することが標準的な手法です。
私のテーマに多言語翻訳を追加するにはどうすればいいでしょうか？
テーマを国際化（i18n）対応にすることは、世界中のユーザーに向けた重要なステップです。PHPコード内では、ユーザーに表示されるすべてのテキスト文字列をWordPressの翻訳関数で囲む必要があります。例えば： __()（テキストをエコー表示するために使用）または _e()（直接输出文本の場合は、そのテキストをそのまま記載してください。） style.css のヘッダー部分と load_theme_textdomain() 関数呼び出し時に正しく設定すること Text Domainその後、開発者はPoeditなどのツールを使用してコードを生成することができます。 .pot テンプレートファイルを作成し、それに対応するものも作成します。 .po と .mo 翻訳ファイル。
我开发的主题如何提交到 WordPress 官方主题目录？
公式ディレクトリにコードを提出するには厳格な要件を満たす必要があります。ご使用のコードはWordPressのコーディングスタンダードに従っていなければならず、ショートコードやウィジェットを使用してコンテンツをハードコーディングしてはいけません。また、すべての機能が安全でGPLライセンスの要件を満たしていることを確認してください。テーマはTheme Checkプラグインのテストに合格し、優れたレスポンシブデザイン、アクセシビリティ、そして完全なドキュメントを備えている必要があります。提出手続きはWordPress公式サイトの提出ページを通じて行われ、その後審査チームによるレビューが行われます。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語