WordPressテーマ開発入門ガイド：ゼロから自分だけのテーマを作成する方法
什么是WordPress主题及其核心结构
WordPressのテーマとは、単にウェブサイトの外観を指すだけではありません。それは一連のファイルの集合体であり、これらのファイルが協力して、ウェブサイトのコンテンツに視覚的な表現とインタラクティブな機能を提供します。テーマは、ウェブサイトの全体的なレイアウト、色、フォント、スタイルを定義するとともに、テンプレートファイルを通じて異なる種類のコンテンツの表示方法を制御します。テーマの構成を理解することは、開発を始めるための第一歩です。
標準的なWordPressテーマには、少なくとも2つのコアファイルが含まれています：style.cssとindex.php。style.cssこのファイルにはテーマのスタイルシートだけでなく、より重要なのはその上部にあるコメントブロックです。これがWordPressがテーマを認識するための鍵となります。このコメントブロックには、テーマの名前、作者、説明、バージョンなどのメタ情報を含める必要があります。index.phpこれはテーマのデフォルトテンプレートファイルであり、より具体的なテンプレートがマッチしない場合にWordPressがページのレンダリングに使用します。
推薦図書 ゼロから始める：現代のWordPressテーマ開発の核心的なプロセスとベストプラクティスをマスターする。
これら2つの必須ファイルに加えて、機能が完全なテーマには通常、他のテンプレートファイルも含まれています。例えば、単一の記事を表示するためのテンプレートなどです。single.phpこれは記事リストを表示するために使用されます。archive.php、そしてページを表示するために使用されるものpage.phpテーマには、もう1つの要素を含めることもできます。functions.phpこのファイルは、テーマ固有の機能の追加やメニューの登録、サイドバーの設定などに使用されます。header.phpとfooter.phpこれは、ウェブサイトのヘッダーやフッターのコードをモジュール化するためのもので、メンテナンスや再利用を容易にします。
最初の基本的なテーマを作成しましょう。
テーマディレクトリとコアファイルを作成する
まず、WordPressのインストールディレクトリのwp-content/themes/指定のパス内に新しいフォルダを作成し、それをあなたのテーマディレクトリとして使用してください。フォルダ名には小文字、数字、ハイフンを使用し、スペースは含めてはいけません。例えば、以下のような名前を付けることができます：my-first-themeそのフォルダです。
次に、そのフォルダ内に新しいファイルを作成してください。style.cssファイルを作成し、その冒頭に必要なトピック情報のコメントを追加してください。これがそのトピックの「身分証明書」にあたります。
/*
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
*/基本テンプレートファイルの作成
その後すぐに、作成を行います。index.phpこれは最も基本的なテンプレートです。私たちは最もシンプルなHTML構造から始め、コンテンツを動的に読み込むために重要なWordPressの関数を組み込んでいきます。非常にシンプルな構造です。index.php以下のように表示できます：
<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1008>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暂无内容。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>このファイルでは、WordPressの複数のコア関数が使用されています。wp_head()とwp_footer()WordPressのコアやプラグインなどが、ページのヘッダーやフッターにコード（スタイルやスクリプトなど）を注入するために使用される機能です。the_post()とthe_content()これは、ループ内で記事データを出力するために使用されます。今、このテーマフォルダをサーバーにアップロードすれば、WordPressの管理画面の「外観」→「テーマ」でそれを見つけて有効にすることができます。
推薦図書 ウェブサイト構築完全プロセスガイド：プロフェッショナルなウェブサイトをゼロから構築するための完全なステップバイステップ分析。
テンプレートの階層構造とテンプレートタグを使用する
テンプレート階層システムを理解する。
WordPressは、特定のページリクエストに対してどのテンプレートファイルを使用してレンダリングするかを決定するために、精巧なテンプレート階層（Template Hierarchy）システムを採用しています。このシステムは、最も具体的なものから最も一般的なものへと順にマッチングを行います。例えば、IDが123の記事にアクセスした場合、WordPressは以下の順序でテンプレートを探します：single-post-123.php -> single-post.php -> single.php -> singular.php -> index.php開発者はこの機能を活用し、より具体的なテンプレートファイルを作成することで、異なるコンテンツの表示を正確に制御することができます。
よく使われるテンプレートタグをマスターしましょう。
テンプレートタグ（Template Tags）はWordPressに組み込まれているPHP関数で、テーマのテンプレート内でさまざまなデータを動的に出力するために使用されます。これらはテーマ開発における中核的なツールです。先ほどの例で使用されたもの以外にも、さらに多くのテンプレートタグが存在します。the_title()とthe_content()その他にも多数のタグがあります。
例えば、こうだ。the_permalink()現在の記事の固定リンクを出力するために使用されます。the_post_thumbnail()記事の特徴的な画像を出力するために使用されます。the_category()記事に属するカテゴリリストを出力するためのものです。条件判断タグも非常に重要です。例えば：is_home()、is_single()、is_page()、is_category()など、これらにより現在のページの種類に応じて異なるコードロジックを実行することができます。
<?php if ( is_single() ) : ?>
<div class="post-meta">
发布于： | 分类：
</div>
endif; 終わりこのコードは、単一の記事ページでのみ、記事の公開日とカテゴリ情報を表示します。
テーマ機能とカスタマイズを強化する。
テーマ機能用のファイルを追加します。
functions.phpこのファイルは、あなたのテーマの「ツールボックス」のようなものです。ここに追加されたコードは、テーマが有効になると実行されます。その一般的な用途の一つとして、記事の特集画像の表示、カスタムメニューの配置、カスタム背景の設定など、テーマがサポートする機能を登録することが挙げられます。
<?php
function my_first_theme_setup() {
// 让主题支持文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 支持HTML5的标记格式
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 为文章摘要添加更多标签支持
add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
function my_first_theme_excerpt_more( $more ) {
return '...';
}
?>スタイルシートとスクリプトを導入します。
コードの整頓性を保ち、ベストプラクティスに従うためには、スタイルシート（CSS）とJavaScriptファイルを別々のファイルとして管理するべきです。functions.phpファイルはキューに入れてから読み込まれ、テンプレートファイル内で直接使用されたりタグとして使用されたりするわけではありません。これにより、依存関係が正しく処理され、ファイルの重複読み込みが防がれます。
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからカスタムテーマを構築する実践トレーニング。
利用するwp_enqueue_style()この関数はメインのスタイルシートを読み込むためのものです。通常、私たちは…style.css依存項として。スクリプトについては、以下のように使用してください。wp_enqueue_script()関数。
function my_first_theme_scripts() {
// 加载主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载一个自定义的JavaScript文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );概要
WordPressのテーマ開発とは、創造性、デザイン、技術を組み合わせるプロセスです。テーマの核心となるファイル構造を理解することで、特に…style.cssとindex.phpあなたはすでに堅実な第一歩を踏み出しました。テンプレートの階層システムをマスターすることで、ウェブサイトのさまざまな部分に対して正確な表示ロジックを作成することができ、テンプレートタグを柔軟に使用することですべてのコンテンツを動的に出力することができます。functions.phpファイルを使えば、テーマにさまざまな機能やサポートを安全に追加し、リソースを標準化された方法で管理することができます。このシンプルな基礎から始めて、徐々により高度なテーマの作成方法を探求していきましょう。例えば、サブテーマの作成、Walkerクラスを使用したナビゲーションメニューのカスタマイズ、Customizer APIを活用したリアルタイムプレビュー設定、さらにはブロックエディタ（Gutenberg）を使ったフルサイトエディティング（FSE）テーマの開発などです。継続的に実践し、公式ドキュメントや優れたテーマのコードを参考にすることが、開発スキルを向上させる最良の方法です。
FAQ よくある質問
WordPressテーマを開発するには、どのような技術的な基礎が必要ですか？
WordPressのテーマを開発するには、HTML、CSS、PHPの基本知識が必要です。HTMLはページの構造を作成するために使用され、CSSはスタイルやレイアウトを制御するために使用されます。PHPはWordPressのコアプログラミング言語であり、ロジックの処理、データの呼び出し、動的なコンテンツの生成に使用されます。JavaScriptについても基本的な理解があれば、インタラクティブな機能を追加するのに役立ちます。
自分のローカルコンピューターでテーマ開発をテストするには、どうすればよいですか？
テーマの開発は、まずローカル環境で行うことを強くお勧めします。XAMPP、MAMP、Local by Flywheel、Laragonなどのローカルサーバーソフトウェアパッケージを使用すると、コンピュータ上でApache、MySQL、PHPを備えたWordPressの運用環境を迅速に構築できます。これにより、オンラインサイトに影響を与えることなく開発やデバッグを行うことができます。
functions.phpファイルとプラグインにはどのような違いがありますか？
functions.phpファイル内に記載されている機能は、現在アクティブなテーマの下でのみ有効です。テーマを切り替えると、これらの機能は利用できなくなります。一方、プラグインが提供する機能はテーマとは独立しており、どのテーマに切り替えてもプラグインがアクティブな状態であればその機能は引き続き利用できます。一般的に、ウェブサイトの視覚的な表示やレイアウトに密接に関連する機能は、テーマ内に配置されます。functions.php中で、独立した汎用機能（連絡フォーム、SEO最適化、キャッシングなど）を提供するコードは、プラグインとして作成するのに適しています。
サブトピックとは何か、なぜそれを使用するのでしょうか？
サブテーマとは、別のテーマ（親テーマと呼ばれる）に依存するテーマのことです。サブテーマを使用すると、親テーマのファイルを直接変更することなく、その機能やスタイルを変更したり拡張したりすることができます。最も大きな利点は、親テーマがアップデートされても、サブテーマ内で行ったカスタマイズ（スタイルや機能の設定など）が失われないことです。サブテーマを作成するには、親テーマの設定に基づいて新しいテーマファイルを作成するだけです。style.cssファイル内で「Template:」という宣言を使用して親テーマのディレクトリ名を指定すると、カバーする必要があるテンプレートファイルのみを作成したり、新しい機能を追加したりできます。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語