WordPressのテーマの基本アーキテクチャを理解する
コーディングを始める前に、WordPressのテーマの基本的な構成を理解することは非常に重要です。テーマとは単なる一連のスタイルシートではなく、特定の規格に従って作成された一連のテンプレートファイルから構成される有機的な全体です。これらのファイルが協力して動作し、WordPressにあなたのウェブサイトのコンテンツをどのように表示するかを指示します。テーマのディレクトリは通常、以下の場所にあります： /wp-content/themes/作成した各トピックには、独立したフォルダを用意する必要があります。
最も基本的なWordPressテーマには、たった2つのファイルしか必要ありません：style.css と index.phpその中で、style.css スタイルの設定だけでなく、そのファイルのヘッダー部分にあるコメントブロックはテーマの「身分証明書」のようなものであり、WordPressにテーマの名前、作者、説明などの情報を伝えるために使用されます。 index.php これはデフォルトのメインテンプレートファイルであり、より具体的なテンプレートがマッチしない場合、WordPressはこのテンプレートを使用してページをレンダリングします。
しかし、機能が充実したカスタムテーマには多くのテンプレートファイルが含まれており、それぞれのファイルが特定のページや機能に対応しています。例えば、header.php ウェブサイトのヘッダー領域を定義する。footer.php 底部領域を定義する。single.php 単一の記事を表示するために使用されます。page.php 独立ページを表示するために使用されます。functions.php これは、テーマ特有の機能を追加したり、さまざまなコンポーネントを登録したりするために使用されます。
推薦図書 WordPressテーマ開発入門ガイド：最初のカスタムテーマをゼロから構築する。
WordPressはテンプレートの階層システムを採用しており、特定のリクエストにどのテンプレートファイルを使用するかを決定します。これにより、ウェブサイトのすべてのページに対して個別にコードを書く必要はありません。異なる階層のテンプレートファイルを作成することで、記事、ページ、カテゴリ、著者ページなど、さまざまな種類のコンテンツの表示方法を正確に制御できます。この階層関係を理解することは、効率的にテーマを作成するための鍵となります。
カスタムテーマの開発環境を構築する
ファイルの作成に取り掛かる前に、ローカル開発環境を構築することがプロフェッショナルなワークフローの第一歩です。これにより、オンラインサイトに影響を与えることなく開発やテストを行うことができます。Local by Flywheel、XAMPP、MAMP、Dockerなどのツールを使用すると、Apache/Nginx、PHP、MySQLを備えたWordPress環境をローカルコンピューター上に迅速に構築できます。
ローカル環境が準備できたら、WordPressのインストールディレクトリ内で以下の操作を行う必要があります。 wp-content/themes フォルダ内に新しいフォルダを作成してください。この新しいフォルダの名前は、あなたのテーマを識別するための識別子となります。小文字、数字、ハイフンを使用し、既存のテーマと名前が重ならないようにすることをお勧めします。例えば： my-custom-theme。
次に、最初の必要なファイルを作成します：style.cssその上部に、正しい形式のトピック情報の注記ブロックを必ず追加してください。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/その後、同様に必要なものを作成します。 index.php ファイルです。最初は非常にシンプルなもので、HTMLの一行だけを含んでいることもあります。
推薦図書 WordPressテーマ開発入門：ゼロからカスタムテーマを構築する。
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>こんにちは、WordPressテーマ開発です！</h1>
</body>
</html>この時点で、ローカルのWordPress管理画面にログインし、「外観」 → 「テーマ」に移動してください。そうすると、自分が作成したテーマが表示されるはずです。そのテーマを有効にしてウェブサイトのトップページにアクセスすると、上記のコードで出力された簡単なメッセージが表示されます。これは、自分で作成したカスタムテーマが正常に動作していることを意味します。
テーマのコアテンプレートファイルを作成する。
実行可能なテーマフレームワークを持っている場合、次のステップはそれをモジュール化し、WordPressのコア機能を利用して動的なコンテンツを処理することです。モジュール化の鍵は、再利用可能な部分を独立したテンプレートファイルに分割することにあります。
ヘッダーとフッターのテンプレートを作成します。
まず、私たちは… index.php 中のヘッダー部分とボトム部分のコードを分離してください。新しいファイルを作成し、その名前を「header_bottom_code-separated.txt」として保存してください。 header.php一部の和の開始部分を内側に移動させてください。
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</head>
<body no numeric noise key 1004>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p class="site-description">ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
</header>次に、作成してください。 footer.php ファイルには、フッターの内容と終了タグが含まれています。
<footer id="colophon" class="site-footer">
<p>© . All Rights Reserved.</p>
</footer>
</body>
</html>その後、修正を加えます。 index.phpWordPressのテンプレートを使用して、関数を呼び出すためのコードを導入します。
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容输出将在这里
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
endif;
?>
</main>記事およびページのテンプレートを作成する
記事とページの異なるレイアウトを実現するために、以下のような方法があります： single.php 単一の記事を処理するための手順、および page.php 独立ページの処理を行います。これらのページの基本構造は似ていますが、WordPressの条件タグを利用することができます。 is_single() と is_page() 必要に応じて区別を行う。
作成する functions.php このファイルは非常に重要であり、テーマ機能を強化するために使用されます。このファイル内では、メニューやサイドバー（ツールバー）、記事のサムネイル表示やカスタムのタイトルタグなどのテーマサポート機能を追加したり、スタイルシートやスクリプトファイルに設定を記述したりすることができます。
推薦図書 WordPressテーマの究極のガイド：選択、カスタマイズ、開発までの完全なソリューション。
<?php
function my_custom_theme_setup() {
// 让 WordPress 负责管理文档标题标签
add_theme_support( 'title-tag' );
// 启用文章和页面特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个主菜单
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
function my_custom_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
// 排入自定义脚本
wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>アプリケーションのスタイリングとインタラクティブ機能の追加
機能を重視したテーマであっても、使いやすさと可読性を保証するためには基本的なスタイルが必要です。 style.css メインのスタイルシートを基に拡張し、レスポンシブなレイアウトと美しいインターフェースを作成します。
基本的なレスポンシブデザインを実現する
まずはCSSのリセット設定や基本スタイルの設定から始め、次にモバイルデバイス向けのレスポンシブデザインのためのメディアクエリを作成します。
/* style.css */
/* 基础重置与样式 */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
padding: 1rem 0;
text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
.site-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
}ナビゲーションメニューのスクリプトを作成する
モバイル端末のメニューをインタラクティブにするためには、簡単なJavaScriptファイルを作成することができます。まず、 header.php メニューボタンにHTML構造を追加した後、次に… /js/navigation.js 制御ロジックを追加してください。
// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.querySelector('.menu-toggle');
const primaryMenu = document.querySelector('#primary-menu');
if (menuButton) {
menuButton.addEventListener('click', function() {
primaryMenu.classList.toggle('toggled');
this.setAttribute('aria-expanded',
this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
);
});
}
});最後に、WordPressのカスタマイザAPIを利用したり、テーマのオプションページを作成したりすることで、ユーザーにサイトの色やロゴのアップロードなどの簡単なカスタマイズオプションを提供することができます。これは通常、以下のような手順で行われます： functions.php ここで使用されているのは add_theme_support 関連するAPI関数を使用して実現します。
概要
ゼロからカスタムWordPressテーマを作成することは、体系的な学習プロセスです。これには、PHP、HTML、CSS、JavaScriptの基礎知識に加えて、WordPressのコアアーキテクチャやAPIについての理解が求められます。プロセス全体は、基本的な構造を構築するところから始まります。 style.css と index.php まず、モジュール化を通じてヘッダー、フッター、サイドバーなどのテンプレートファイルを分離します。テンプレートの階層システムを利用してコンテンツの表示を正確に制御し、そして… functions.php テーマ機能を統合し、さまざまなコンポーネントを登録します。最終的には、レスポンシブなCSSと必要なJavaScriptスクリプトを使用して、テーマを美しく、操作しやすいものにします。このアプローチをたどることで、ウェブサイトの外観を独自のものにするだけでなく、WordPressの仕組みを深く理解することができ、より高度なテーマやプラグインの開発のための確かな基盤を築くことができます。
FAQ よくある質問
WordPressのテーマを作成するには、どのようなプログラミング言語を習得する必要がありますか？
完全機能するWordPressテーマを作成するには、いくつかの核心的な技術をマスターする必要があります。PHPが最も重要です。なぜならWordPress自体がPHPで書かれており、すべてのテンプレートファイルやロジック処理にPHPが不可欠だからです。HTMLはページの構造を構築するために使用され、CSSはスタイルやレイアウトを制御し、テーマの美観性やレスポンシブデザインを実現します。JavaScript（多くの場合はjQuery）は、メニューの切り替えやスライドショーなどのフロントエンドのインタラクティブな効果を追加するために使用されます。
カスタムテーマを使用することと、既存のテーマやページビルダーを使用することとの主な違いは何でしょうか？
カスタムテーマを使用すると、最大限の柔軟性と独自性を実現できます。ウェブサイトのすべてのコード、機能、パフォーマンスを自分でコントロールできるため、特定のブランドやビジネスニーズに完全に合わせたウェブサイトを作成することができます。また、カスタムテーマのコードは通常、よりシンプルで効率的です。一方で、既存のテーマやページビルダーを使用すると、導入は簡単ですが、冗長なコードが多く含まれていたり、カスタマイズオプションが限られていたり、プラグインへの依存が生じたり、ウェブサイトの同質化リスクが高くなることがあります。カスタムテーマは、独自のブランドイメージや特定の機能、高いパフォーマンスが求められるプロジェクトに適しています。
どうすれば自作のテーマをWordPressの公式基準に合わせることができるでしょうか？
あなたのテーマがWordPressのコアスタンダードに準拠し、公式のディレクトリに掲載される可能性を高めるためには、「WordPressテーマ開発マニュアル」を厳守する必要があります。これには、正しいテンプレートの階層構造の使用、すべての動的データの出力に対する国際化（i18n）処理、ユーザー入力と出力の安全な処理、テーマコードがWordPressのコーディング基準に従っていることの確認、アクセシビリティ（A11y）対応の提供、そしてコア機能が有効または無効のどちらの状態でもテーマが正常に動作することの確認（テーマのユニットテスト）が含まれます。
開発テーマの際、functions.phpファイルの主な役割は何でしょうか？
functions.php 文件是你的主题的“功能工具箱”。它不用于生成页面上的直接输出，而是用于定义主题的功能和行为。其主要作用包括：通过钩子（Hooks）添加或修改 WordPress 核心功能、注册导航菜单位置和侧边栏（小工具区）、为主题添加特色功能支持（如文章缩略图、自定义Logo）、以及安全地排入主题的样式表和 JavaScript 脚本文件。它是连接你的主题外观和 WordPress 后台功能的关键桥梁。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語