現在のウェブサイト開発分野において、WordPressはその優れた柔軟性と広大なエコシステムにより重要な地位を占めています。WordPressウェブサイトの外観や機能の核心となるのが、まさに「テーマ」です。ゼロからWordPressテーマを開発する方法を学ぶことで、ウェブサイトのデザインを完全に自分の思い通りにコントロールできるようになるだけでなく、WordPressの基本的な仕組みを深く理解するための絶好の手段ともなります。この記事では、基本的でありながら機能的に完全なテーマを構築するために必要なすべてのステップをご案内します。
開発環境と基盤構造
最初のコード行を書く前に、適切なローカル開発環境を構築することが非常に重要です。XAMPP、MAMP、Local by Flywheel、Dockerなどのツールを使用することができます。環境にはPHP、MySQL、Apache/Nginxが含まれていることを確認してください。その後、テスト用に新しいWordPressインスタンスをインストールしてください。
WordPress テーマは本質的に、次の場所にある /wp-content/themes/ ディレクトリ内にあるフォルダです。このフォルダの名前があなたのテーマ識別子になります。このフォルダ内には、必須のファイルが2つあり、それらがテーマの基本構造を構成しています。
推薦図書 ワードプレスのテーマ開発を初心者から上級者まで：高性能カスタムウェブサイトの構築。
テーマ情報声明書
最初に必要なファイルは style.cssその役割は単にスタイルを保存するだけではありません。より重要なのは、ファイルのヘッダー部分にあるコメントブロックで、WordPressにテーマのメタデータを宣言するために使用されます。この情報ブロックはファイルの最上部に配置する必要があります。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/その中で、Text Domain 国際化のために使用され、後ほどテーマ内で活用されます。 __() または _e() 関数が文字列を翻訳する際には、これに一致する必要があります。
核心功能与模板引入文件
2つ目の必須ファイルは index.phpこれはテーマのデフォルトテンプレートファイルであり、WordPressがより具体的なテンプレートファイルを見つけられない場合に、ページのレンダリングに使用されます。たとえ一時的に空の状態であっても、このファイルは存在しなければなりません。
しかし、より現代的で標準的な方法としては、新しいものを作成することです。 functions.php このファイルは、あなたのテーマ用の「機能プラグイン」であり、テーマのサポート機能の追加、登録メニュー、サイドバー、そしてキュー処理のスタイルやスクリプトの設定に使用されます。必須ではありませんが、ほとんどのテーマに標準的に搭載されています。
<?php
// 主题功能定义
function my_first_theme_setup() {
// 让 WordPress 管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和评论的 RSS feed 链接
add_theme_support( 'automatic-feed-links' );
// 启用文章缩略图（特色图像）功能
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>コアテンプレートファイルを作成します。
WordPressはテンプレートの階層システムを使用して、特定のページのリクエストにどのテンプレートファイルを使用するかを決定します。これらのテンプレートファイルを理解し、作成することはテーマ開発の核心です。 index.php少なくとも、以下のいくつかの基本テンプレートを作成する必要があります。
推薦図書 WordPressテーマ開発入門ガイド：ゼロから高度なインターフェースを構築する。
サイト全体で共通に使用できるヘッダーとフッター
header.php このファイルには、各ページの上部に表示される共通のコードが含まれています。例えば、ドキュメントのタイプを示す宣言、地域設定、サイトのタイトル、メインナビゲーションなどです。 get_header() 関数はテンプレート内で呼び出されます。
footer.php このファイルには、各ページの下部に表示される共通のコードが含まれています。例えば、著作権情報やスクリプトの参照などです。 get_footer() 関数の呼び出し。
典型的 header.php 冒頭部分は以下の通りです：
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1005>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
<nav>
'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
</header>wp_head() と wp_footer() これらは非常に重要なフックであり、多くのプラグインやWordPressのコア機能がコードを注入するためにこれらに依存しています。必ずこれらが存在するようにしてください。
記事のループ処理とコンテンツの表示
single.php 単一のブログ記事やカスタム記事タイプを表示するために使用されます。その核心となるのが「WordPressのループ処理」であり、これはデータベースからコンテンツを取得して表示するためのメカニズムです。
基本的なもの single.php 構造は以下の通りです：
推薦図書 WordPressテーマ開発をゼロからマスターする：モダンなウェブサイトを構築するための実践ガイド。
<?php get_header(); ?>
<main>
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div class="meta">
发布于： | 作者：
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail( 'large' ); ?>
</div>
endif; 終わり
<div class="content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
</main>page.php 静的なページを表示するために使用され、その構造は… single.php 似ていますが、通常は公開日や著者名は表示されません。
スタイル、スクリプト、サイドバー
美しく、機能的にも問題のないテーマを実現するには、CSSとJavaScriptのサポートが不可欠です。また、サイドバーは各種ツールを配置するための場所としても役立ちます。
安全にスタイルやスクリプトを追加する方法
テンプレートファイル内でCSSやJSファイルに直接ハードリンクを張ることは絶対に避けてください。正しい方法は、それらのファイルを別の場所に配置し、テンプレート内でその場所を参照するようにすることです。 functions.php ファイルを使用するには、 wp_enqueue_style() と wp_enqueue_script() 関数を使ってそれらを「キューに入れる」ことで、依存関係が正しく処理され、重複して読み込まれるのを防ぐことができます。
function my_first_theme_scripts() {
// 排队主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 排队一个自定义 JavaScript 文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );登録ダイナミックサイドバー
サイドバー（ツールバー領域）では、ユーザーがWordPressの管理画面を通じてコンテンツを動的に追加できます。まずは、以下の手順を行う必要があります： functions.php それを登録してください。
関数 my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'my-first-theme' )、
'id' => 'sidebar-1'、
'description' => __( 'Add widget here., 'my-first-theme' ), 'description' => __( 'Add widget here.
'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_first_theme_widgets_init' );登録後、テンプレートファイル（例えば）などで使用できるようになります。 sidebar.php）で使用されています dynamic_sidebar( 'sidebar-1' ) このサイドバーを呼び出すための関数を用意し、必要な場所でそれを使用します。 get_sidebar() 導入。
トピックの国際化と公開準備
テーマの基本的な開発を完了した後、まだ2つの重要なステップがあります。1つは翻訳のための国際化（i18n）であり、もう1つは公開の準備です。
テキスト翻訳機能の実装をサポートします。
国際化とは、ユーザーに表示されるすべてのテキスト文字列を特定のWordPress関数で囲むことで、他の言語に翻訳できるようにすることを意味します。これは主に以下の方法で実現されます： ()、_e() 関数および esc_html() 等変体（などへんたい）。
次のことを確認してください style.css 正しい設定がされています。 Text Domainそして、 functions.php の after_setup_theme アクション中に呼び出される load_theme_textdomain()。
function my_first_theme_load_textdomain() {
load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );その後、類似の方法を使用して… echo __( '阅读更多', 'my-first-theme' ); すべての文字列を特定の方法で出力するために、開発者はPoeditなどのツールを使用して生成することができます。 .pot 翻訳テンプレートファイル。
トピックのスクリーンショットを作成し、チェックリストを確認する
トピックをディレクトリに送信したり、顧客に引き渡したりする前に、トピックのスクリーンショットを作成する必要があります。これは「トピックスクリーンショットの作成」と呼ばれるプロセスです。 screenshot.png その画像のサイズは通常1200×900ピクセルで、あなたのテーマの外観を表しています。それをテーマのルートディレクトリに置いてください。
また、定期的にテーマのチェックを行うことも良い習慣です。「Theme Check」というプラグインをインストールすると、WordPressのテーマディレクトリの最新の基準に基づいてテーマのコード品質、セキュリティ、互換性などを一連のテストで確認してくれます。
概要
ゼロからWordPressテーマを開発することは、体系的なプロセスであり、基本的なファイル構造、テンプレートの階層構造、機能関数、国際化（インターナショナライゼーション）など、多くの側面にわたります。 style.css、functions.php また、一連のテンプレートファイルを使用することで、ウェブサイトの骨格を段階的に構築することができます。WordPressのループ処理、テンプレートタグ、フック関数を正しく理解し、適切に使用することが鍵となります。スクリプトを安全に実行するための最適な方法を守り、メニューやサイドバーを正しく登録し、すべてのテキストに翻訳機能を追加するなどのベストプラクティスに従うことで、テーマをよりプロフェッショナルで堅牢、かつメンテナンスしやすいものにすることができます。このプロセスを通じて、ウェブサイトの外観をカスタマイズする能力を身に付けるだけでなく、WordPressという強力なコンテンツ管理システムの仕組みについても深く理解することができます。
FAQ よくある質問
WordPressテーマを開発するには、どのようなプログラミング言語を習得する必要がありますか？
WordPressのテーマを開発するには、主にPHP、HTML、CSS、そして基本的なJavaScriptのスキルが必要です。PHPはロジックの処理やWordPressの関数の呼び出しに使用されます。HTMLはページの構造を作成するために使われ、CSSはデザインのスタイリングを担当します。JavaScriptはインタラクティブな効果を実現するために使用されます。WordPress自体の関数やフックシステムについて深い理解を持つことが非常に重要です。
どうやって私のテーマでGutenbergブロックエディタをサポートさせることができますか？
あなたのテーマがGutenbergブロックエディタをよりよくサポートできるようにするために、以下のことができます： functions.php 関連するトピックのサポート機能を追加します。例えば、以下のように使用することができます： add_theme_support( 'wp-block-styles' ) これは、コアブロックのデフォルトスタイルを読み込むためのものです。使用してください。 add_theme_support( 'align-wide' ) 幅広い揃え（ワイドアライメント）や全幅揃え（フルウィドアライメント）のオプションを有効にするには、こちらをご利用ください。また、記事やページにエディタのスタイルを追加することもでき、バックエンドのエディタでのプレビュー結果がフロントエンドと一致するようにできます。
functions.phpファイルとプラグインにはどのような違いがありますか？
functions.php ファイルはテーマの一部であり、その機能はテーマと密接に関連しています。テーマを切り替えると、その中に含まれるコードは通常機能しなくなります。ファイルの主な役割は、特定のテーマに機能やスタイル、スクリプトを追加することです。一方、プラグインはテーマとは独立した機能モジュールであり、異なるテーマで使用できる汎用的な機能や特定の機能を提供することを目的としています。簡単な原則としては、機能がウェブサイトの外観表現と密接に関連している場合はテーマ内に配置し、再利用可能な独立した機能であればプラグインとして作成するのが適切です。
テーマ開発中に遭遇したPHPエラーをどのようにデバッグするか？
まず、ご自身の環境で以下のことを確認してください： wp-config.php ファイル内でデバッグモードが有効になっています。 define( ‘WP_DEBUG’, true ); この行は次のように設定されています： trueこれにより、ページ上にすべてのPHPエラー、警告、および通知が表示されます。より安全にするため（エラーを一般公開しないようにするために）、以下の設定を同時に行うことができます： define( ‘WP_DEBUG_LOG’, true ); エラーを記録してください。 /wp-content/debug.log ファイルの中にあります。さらに、ブラウザの開発者ツール（コンソールやネットワークタブ）を使用して、JavaScriptのエラーやリソースの読み込みに関する問題を確認してください。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語