準備作業と環境設定
コードの作成を始める前に、効率的なローカル開発環境を整えることが非常に重要です。Apache/Nginx、PHP、MySQLが統合されたソフトウェアパッケージ(例:Local by Flywheel、MAMP、XAMPP)の使用をお勧めします。PHPのバージョンは7.4以上、MySQLのバージョンは5.6以上を確認してください。また、WordPressのコアコードの最新バージョンの使用を推奨します。
WordPress主题本质上是一个位于/wp-content/themes/ディレクトリ内のフォルダーについては、その基本的な構造はたった2つのファイルで構成されています。ローカル環境で新しいフォルダーを作成する必要があります。例えば:my-professional-themeそして、その中に最初の重要なファイルを作成します。
トピックのコア設定情報を作成する
各トピックには必ず1つずつ存在しなければなりません。style.cssこのファイルのヘッダー部分にあるコメントは、WordPressにテーマの基本情報を宣言するために使用されます。このファイル名は固定されており、WordPressはそのヘッダー情報を読み取ることで、あなたのテーマを識別し、一覧表示します。
推薦図書 WordPressテーマ開発をマスターする:入門から上級までの完全ガイド。
/*
Theme Name: My Professional Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个用于学习构建的专业级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-professional-theme
*/ Text Domain国際化のために使用され、後続の翻訳関数が呼び出される際の識別子として機能します。
テーマのコア起動ファイルを作成する
2つ目に必要なファイルはindex.phpそれはすべてのページのデフォルトのリターンテンプレートです。しかし、より重要なのは起動ファイルです。functions.phpこのファイルをテーマのディレクトリ内に作成する必要があります。このファイルはテーマ全体の「中枢」となり、スタイルシートやJavaScriptスクリプト、メニューの登録、サイドバーなどを読み込むために使用されます。
<?php
// 安全措施:防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// 1. 引入样式表和脚本
function my_theme_enqueue_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义样式
wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/main.css' );
// 引入JavaScript
wp_enqueue_script( 'my-theme-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?> テーマテンプレートの階層構造を構築する
WordPressのテンプレート階層構造は、その核心的な設計哲学です。ページにアクセスすると、WordPressは特定の優先順位に従って対応するテンプレートファイルを探します。これらの重要なテンプレートファイルを理解し、作成することは、柔軟なテーマを構築するための基盤となります。
ウェブサイト用の汎用レイアウトテンプレートを構築する
header.phpとfooter.phpこれらはウェブサイトのすべてのページのヘッダーとフッターを構成しています。これらを通じて… get_header() と get_footer() 関数は、どのテンプレートからでも導入することができます。作成方法は以下の通りです。header.phpその中にはHTMLドキュメントが含まれている必要があります。<head>ウェブサイトの上部にある視覚領域(ロゴやナビゲーションメニューなど)およびその一部です。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body no numeric noise key 1003>
<header id="masthead" class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation">
'menu-primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</header> footer.phpそれにはウェブサイトの下部情報や、スクリプトの導入(以下の方法で)が含まれます: wp_footer())および最終的な閉じタグです。
推薦図書 プロフェッショナルなウェブサイトの構築:カスタムWordPressテーマをゼロから構築するための完全ガイド。
記事内容のループ処理とホームページのテンプレートを作成する
index.phpこれはすべてのページに共通する最終的なリタイア(戻る)テンプレートですが、より細かい制御を行うためには、より具体的なテンプレートを作成するべきです。例えば、ブログ記事一覧ページは通常、home.phpまたはindex.php「コントロールです。一方、単一の記事の詳細ページのテンプレートは…」single.phpこれらのテンプレートの核心は「The Loop」(ループ)であり、これはWordPressが記事の内容を順番に処理し、表示するために使用する仕組みです。
作成home.phpブログ記事のリストを表示します:
<?php get_header(); ?>
<main id="primary" class="site-main">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
<header class="entry-header">
<h2 class="entry-title"><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
</header>
<div class="entry-content">
あなたのコメントは受け付けられました。ありがとうございます。
</div>
</article>
<p><?php esc_html_e( 'No posts found.', 'my-professional-theme' ); ?></p>
endif; 終わり
</main> ページとサイドバーのテンプレートを実装する
静的ページの使用方法page.phpテンプレートです。これは「关于我们(会社概要)」や「联系我们(お問い合わせ)」などのページを表示するのに理想的な選択肢です。その構造は…single.php似ていますが、通常はカテゴリーやタグなどのメタ情報は含まれていません。
サイドバーは以下のように構成されています:sidebar.phpファイルの定義には、通常、ツールバーや小道具(アイコンなど)が含まれます。functions.phpそこでは、あなたは使わなければなりません register_sidebar() この関数は、1つまたは複数のツールバー領域を登録するためのもので、その後…sidebar.phpここで使用されているのは dynamic_sidebar() それを呼び出すために。
// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-professional-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-professional-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_theme_widgets_init' ); 高度なテーマ機能を実現する。
専門的なテーマには、構造だけでなく、豊富な機能や優れたユーザー・開発者体験も求められます。これには、テーマカスタマイザーのサポート、メニューシステム、特徴的な画像、サムネイルのサポートなどが含まれます。
WordPressのメニューシステムを統合する
はい。functions.phpここでは、「使用」を使っています。 register_nav_menus() 関数を使用して、トピックでサポートされているメニュー項目の場所を登録します。header.php例では、``という名前の関数が既に呼び出されています。menu-primary料理の提供場所(つまり、食事を提供する場所の位置)です。
推薦図書 WordPressテーマ開発の完全ガイド:ゼロからカスタムテーマを構築する。
function my_theme_register_menus() {
register_nav_menus(
array(
'menu-primary' => esc_html__( 'Primary Menu', 'my-professional-theme' ),
'menu-footer' => esc_html__( 'Footer Menu', 'my-professional-theme' ),
)
);
}
add_action( 'init', 'my_theme_register_menus' ); 記事の特徴的な画像やサムネイルの追加機能がサポートされました。
「特色画像(Featured Image)」は、現代のウェブサイトデザインにおいて標準的に採用されています。 add_theme_support() この機能をご利用いただくには、ご自身のテーマに対してこの設定を有効にし、さまざまな記事のサムネイルサイズを定義する必要があります。
function my_theme_setup() {
// 支持特色图片
add_theme_support( 'post-thumbnails' );
// 为特色图片添加自定义尺寸
add_image_size( 'my-theme-blog-thumbnail', 800, 400, true ); // 裁剪模式
}
add_action( 'after_setup_theme', 'my_theme_setup' ); テンプレートファイル内で使用するには、以下のようにします: the_post_thumbnail( 'my-theme-blog-thumbnail' ) この画像を出力してください。
WordPressのカスタマイザーにアクセスして、制御機能を強化する
WordPressのカスタマイザー(Customizer)を使用すると、ユーザーはテーマの設定をリアルタイムでプレビューしたり変更したりできます。必要に応じて、新しい設定項目を追加することも可能です。settings)、控件(controls)および出力ロジックです。例えば、フッターに著作権情報を表示するオプションを追加する場合は以下のようになります:
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 Your Company Name. All rights reserved.',
'sanitize_callback' => 'sanitize_text_field',
) );
// 添加一个控件(输入框)到该设置
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( 'Footer Copyright Text', 'my-professional-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' ); はい。footer.phpここでは、「使用」を使っています。 get_theme_mod( 'footer_copyright_text' ) この値を取得して表示します。
トピックの最適化と公開準備
開発が完了した後、テーマがスムーズに動作し、セキュリティが確保され、かつ配布が容易であることを確認することが最後の重要なステップです。
テーマの国際化対応を確実に行うこと。
国際化(i18n)により、あなたのテーマをあらゆる言語に翻訳することが可能になります。functions.phpテーマのテキストを読み込むためのフィールドを設定することが第一歩です。
function my_theme_load_theme_textdomain() {
load_theme_textdomain( 'my-professional-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_theme_load_theme_textdomain' ); その後、トピック内で翻訳が必要なすべての文字列には、 ()、_e() または esc_html() これらの関数をラップ(encapsulate)するために使用されます。
コードレビューを行う際には、コーディングスタンダードに従うことが重要です。
WordPressには、PHP、CSS、JavaScriptの公式なコーディングスタンダードがあります。これらのスタンダードに従うことで、コードの可読性や保守性が向上し、コミュニティによる受け入れも容易になります。PHP_CodeSnifferのようなツールを使用し、WordPressのコーディングスタンダードに基づいたルールでコードを自動的にチェックすることができます。
セキュリティ強化を行い、最終的なクリーニングを完了します。
安全性は何よりも重要です。特に、以下の点においては…functions.php開始時のチェックABSPATH定数を除き、すべてのユーザー入力および動的な出力については、検証、クリーニング、エスケープ処理を行う必要があります。よく使用される関数には以下のものがあります:
エスケープ文字: esc_html(), esc_attr(), esc_url()
清掃: sanitize_text_field(), sanitize_email()
検証: is_email(), absint()
公開する前に、デバッグ用のすべてのコードを削除してください(例: var_dump(), print_r()すべての機能が期待通りに動作することを確認し、さまざまな環境で十分にテストを行ってください。
概要
ゼロからプロフェッショナルなWordPressテーマを構築することは、体系的な作業です。開発者はPHP/HTML/CSS/JavaScriptの知識だけでなく、WordPressの核心原理(テンプレートの階層構造、ループ処理、フックシステム、テーマサポート機能など)も深く理解している必要があります。このガイドに従って、環境の構築、テンプレートの作成、機能の実装、そして最適化された形での公開までの全プロセスを系統的に完了しました。重要なのは、優れたテーマは強力な機能と美しいデザインを提供しつつ、コードをクリアで効率的かつ安全に保ち、ユーザーや後続の開発者にとって拡張性の高いものであるべきだということです。継続的な実践、コアコードや優れたテーマの参考を通じて、開発スキルを向上させるのが最善の方法です。
FAQ よくある質問
###: WordPressテーマを開発するには、どのようなプログラミング言語をマスターする必要がありますか?
WordPressのテーマを開発するには、PHPが必ず習得すべき核心言語です。なぜなら、PHPはWordPress自体やほとんどのテンプレートタグの記述に使用されている言語だからです。また、ページの構造やスタイルを制御するためにはHTMLとCSSにも精通している必要があります。フロントエンドのインタラクティブな効果を実現するには、基本的なJavaScript(特にjQuery)の知識が不可欠です。WordPressのデータクエリの仕組みを理解するためには、SQLについてもある程度の知識が役立ちます。
なぜ私の新しいテーマがWordPressの管理画面(バックエンド)の「テーマ」リストに表示されないのでしょうか?
これは通常、以下のような理由によるものです:style.css文件头部注释信息格式不正确或文件缺失造成的。请确保:1)你的主题文件夹放置在正确的/wp-content/themes/路径下;2)文件夹内存在style.cssファイル;3)そのファイルのヘッダーにあるコメント情報(テーマ名、作者など)の形式は完全に正しく、文法エラーもありません。必要な情報が一つでも欠けていると、WordPressではそのテーマを認識できません。
自分のテーマにカスタムのページテンプレートを作成するには、どうすればよいですか?
カスタムページテンプレートを作成するには、テーマのルートディレクトリ内に新しいPHPファイルを作成し、そのファイルの最上部に特定のテンプレート名のコメントブロックを追加する必要があります。例えば、「全幅ページ」のテンプレートを作成する場合、ファイル名は以下のようになります:template-fullwidth.phpその冒頭は以下のようになるべきです:<?php /* Template Name: 全宽页面 */ ?>その後、ユーザーは編集ページで「ページ属性」の「テンプレート」ドロップダウンリストから「全幅ページ」を選択することができます。このファイル内では、まったく異なる設定を記述することができます。page.phpそのレイアウトとロジックについてです。
フック(Hooks)はテーマ開発においてどのような役割を果たすのでしょうか?
フック(アクションフックとフィルターフックに分かれます)は、WordPressのプラグインアーキテクチャおよびテーマの拡張性の基盤となる要素です。テーマ開発においては、主にアクションフックを使用します。 add_action()特定のタイミング(例えば初期化時、スクリプトの読み込み時、ページフッターの表示時)に自分の機能コードを挿入します。また、フィルターフックも使用します(これにより…)。 add_filter()WordPressや他のプラグインが出力する内容を変更するには、(例えば記事の要約の長さを変更したり、記事のクラス名をカスタマイズしたりするために)特定の処理を行います。フック(hook)を適切に利用することで、テーマのコードをモジュール化し、メンテナンスや拡張が容易になります。
テーマの開発が完了したら、どのようにしてWordPressの公式テーマディレクトリに提出するのでしょうか?
テーマをWordPress.orgの公式ディレクトリに提出するには、厳格な手順が必要です。まず、WordPress.orgでSVNアカウントを申請する必要があります。次に、提出するテーマはGPL v2またはそれ以降のライセンスに準拠していなければならず、公式のテーマ審査チームによる審査を通過しなければなりません。審査基準には、コードの品質、セキュリティ、エラーの有無、コーディング規格の遵守、十分なアクセシビリティサポートの提供などが含まれます。提出する前に、公式のテーマ開発マニュアルや提出ガイドをよく読み、Theme Checkプラグインを使用して自己審査を行うことを強くお勧めします。これにより、すべての要件を満たしていることを確認できます。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。