カスタムのWordPressテーマを開発することは、自分のアイデアをウェブ上で実現し、ウェブサイトの外観や機能を完全にコントロールするための最良の方法です。既製のテーマを使用するのとは異なり、カスタムテーマを使えば白紙から始めて、自分や顧客のニーズに完全に合ったユニークなウェブサイトを構築することができます。このプロセスは少し恐ろしく聞こえるかもしれませんが、WordPressの公式仕様や手順に従えば、スムーズに完了できます。この記事では、基本ファイルの作成からコア機能の実装までの全ての手順をご案内します。
準備作業と環境設定
最初のコード行を書き始める前に、適切な開発環境と明確なプロジェクト計画が必要です。
ローカル開発環境の構築
まず、ローカルコンピューター上でPHPサーバー環境を構築する必要があります。XAMPP、MAMP、Local by Flywheelなどの統合されたソフトウェアパッケージの使用をお勧めします。これらのツールを使用すると、Apache、MySQL、PHPをワンクリックでインストールでき、面倒な設定を省くことができます。XAMPPを例にとると、インストール後、ウェブサイトのファイルは通常、インストールディレクトリ内に保存されます。htdocsフォルダ内です。ここでは、新しいフォルダを作成することができます。例えば、my-custom-themeこれがあなたのテーマのルートディレクトリになります。
推薦図書 ゼロからWordPressテーマの開発を学ぶ：カスタマイズされたウェブサイトを作るための基本ガイド。
テーマプロジェクトの構造計画
標準的なWordPressテーマには、少なくとも2つのコアファイルが含まれています：style.cssとindex.phpしかし、プロジェクトを開始する前に、明確で拡張性のあるディレクトリ構造を計画することをお勧めします。典型的な現代のテーマ構造は以下のようになります：
my-custom-theme/
├── style.css // 主样式表，包含主题信息头
├── index.php // 主模板文件
├── functions.php // 主题功能与函数文件
├── header.php // 头部模板
├── footer.php // 底部模板
├── sidebar.php // 侧边栏模板
├── page.php // 页面模板
├── single.php // 文章页模板
├── archive.php // 文章归档页模板
├── 404.php // 404错误页模板
├── search.php // 搜索结果页模板
├── assets/ // 静态资源目录
│ ├── css/ // 样式文件
│ ├── js/ // 脚本文件
│ └── images/ // 图片资源
└── templates/ // 可选的模板部件目录良い構造を持つことは、コードの整理や保守に役立ちます。
コアテーマファイルを作成する
これはテーマを構築するための基石です。ファイル内の情報ヘッダーによって、WordPressにこのテーマが有効であることが伝えられます。
テーマスタイルシートを定義する
style.cssこれはテーマの「身分証明書」のようなもので、その上部にあるコメントブロック（テーマ情報ヘッダー）は必須です。WordPressはこれらの情報を利用して、バックエンドであなたのテーマを識別し、表示します。作成してください。style.cssファイルを開き、以下の内容を入力してください：
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/その中で、Text Domainこれは国際化（i18n）のためのもので、テーマの一意な識別子です。通常、テーマフォルダの名前と一致します。このコメントブロックの後に、CSSスタイルの記述を始めることができます。
推薦図書 ワードプレステーマ開発ガイド：初心者から上級者までの完全な実践チュートリアル。
基本テンプレートファイルの作成
index.phpこれはすべてのページに適用されるデフォルトのリターンテンプレートです。非常に基本的なものですが、シンプルなHTML構造から始めることができます。まず、以下のようにテンプレートを作成してください：header.phpこのファイルは、ドキュメントのヘッダー情報を保存するためのものです（開始位置は…）。<!DOCTYPE html>開くまで<body>（タグの部分）およびfooter.php閉じ括弧やページフッターの内容を格納するためのものです。
header.php例
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?></a></h1>
<p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?></p>
</header>「注意使用了」という表現が使われています。wp_head()フック（Hook）とは、WordPressのコア、プラグイン、テーマにおいてスクリプトやスタイルを追加するために必要な仕組みです。
footer.php例
<footer>
<p>© . All Rights Reserved.</p>
</footer>
</body>
</html>ここでは「%s」が使用されています。wp_footer()フック。
さて、あなたの…index.php非常に簡潔に表現すると：
推薦図書 WordPressテーマ開発の完全ガイド：ゼロからプロフェッショナルレベルのテーマを構築する。
<?php get_header(); ?>
<main>
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
endif; 終わり
</main>このテンプレートでは、WordPressのコアループ（The Loop）を使用して記事リストを表示しています。
機能の導入と動的コンテンツの追加
本当の「テーマ」とは、単なる静的なページではありません。それはWordPressのコアと相互作用し、リソースを読み込み、動的な機能を実現する必要があります。
テーマ関連の関数ファイルを作成してください。
functions.phpこれはあなたのテーマ「Brain」用のファイルで、機能の追加、メニューの登録、サイドバーの設定、スタイルやスクリプトの読み込みなどに使用されます。このファイルを作成し、基本的な機能の追加を始めましょう。
<?php
// 主题设置
function my_custom_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-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
// 注册小工具区域（侧边栏）
function my_custom_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' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );add_theme_support()この関数は、トピック機能を有効にするために使用されます。register_nav_menus()とregister_sidebar()それぞれナビゲーションメニューとツールバー領域を登録します。
スタイルとスクリプトの読み込み
正しいリソースの読み込み方法は、スタイルシートとJavaScriptファイルをそれぞれ別々に読み込むことです。wp_enqueue_scriptsフックのキューイング処理です。あなたの…functions.php「中に追加する：」
function my_custom_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
// 加载自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
// 如果使用评论功能，加载评论回复脚本（仅当需要时）
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );get_stylesheet_uri()取得style.cssそのURLです。get_template_directory_uri()トピックディレクトリのURLを取得する。
テンプレートの階層構造を作成する
WordPressでは、テンプレートの階層構造を利用して、特定のページにどのテンプレートファイルを適用するかを決定します。専用のテンプレートファイルを作成することで、コンテンツの表示をより細かく、柔軟にカスタマイズすることができます。
異なるコンテンツタイプに合わせたテンプレートを作成する
異なるタイプのページには、それぞれ専用のテンプレートを作成する必要があります。例えば：
* single.php：単一の記事を表示するために使用されます。
* page.php：単一のページを表示するために使用されます。
* archive.phpアーカイブページにカテゴリ、タグ、著者、日付などを表示するために使用されます。
* search.php：検索結果を表示するために使用されます。
* 404.php「未找到」ページを表示するために使用されます。
基本的なものsingle.php以下のようになるかもしれません：
<?php get_header(); ?>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
<header>
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div>
|
</div>
</header>
<?php if ( has_post_thumbnail() ) : ?>
<div>
<?php the_post_thumbnail(); ?>
</div>
endif; 終わり
<div>
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
<footer>
<?php the_tags( '标签: ', ', ', '<br />' ); ?>
</footer>
</article>
<?php endwhile; ?>
</main>このテンプレートには以下の機能が使用されています：the_post_thumbnail()特徴的な画像を表示するために、そしてcomments_template()コメントエリアを読み込むために…
テンプレートコンポーネントを使用してモジュール化を実現する
コードの再利用性をさらに高めるために、ページ内で繰り返し出現する部分（記事のメタ情報や記事リストアイテムなど）をテンプレートパーツ（Template Parts）として抽出することができます。例えば、以下のように…template-parts/content.phpファイルを、そして…index.phpまたはarchive.php`for`ループの中で使用します。get_template_part( 'template-parts/content' );それを呼び出すことで、メインテンプレートファイルをシンプルに保つことができます。
概要
上記の手順を通じて、基本的でありながらも機能的に完全なカスタムWordPressテーマの開発を完了しました。このプロセスには、環境の構築、コアファイルの作成、WordPressの機能の導入、テンプレート階層の構築といった重要なステップが含まれています。テーマ開発は反復的なプロセスであることを覚えておいてください。最も基本的な機能から始め、徐々にカスタム記事タイプ、テーマカスタマイザーオプション、レスポンシブデザインなどのより複雑な機能を追加していくことができます。最も重要なのは、WordPressのコーディング基準とベストプラクティスに従うことです。これにより、テーマの安全性、効率性、保守の容易さが保証されます。さて、作成したテーマフォルダをWordPressのインストールディレクトリにコピーしてください。wp-content/themes/その中から選んだテーマは、バックエンドの「外観」→「テーマ」で確認し、有効にすることができます。
FAQ よくある質問
WordPressテーマを開発するには、どのようなプログラミング言語の基礎が必要ですか？
WordPressのテーマを開発するには、主にHTML、CSS、PHPのスキルが必要です。HTMLはページの構造を作成するために使用され、CSSはデザインのスタイリングに使用されます。PHPはWordPressのサーバーサイドでのプログラミング言語であり、ロジックの処理、データベースのクエリ、動的なコンテンツの生成などに使用されます。さらに、インタラクティブな機能を追加するためには、基本的なJavaScriptの知識も役立ちます。
なぜ`get_header()`と`get_footer()`関数を使用しなければならないのでしょうか？
get_header()とget_footer()これらはWordPressのテンプレートタグであり、コンテンツを含めるために使用されます。header.phpとfooter.phpファイルについては、これらの関数を使用してください。直接操作するのではなく。include「ステートメント（Statement）」は、WordPressのテンプレート階層構造およびサブテーマ（Subtheme）システムの中核をなす要素です。サブテーマは、同名のファイルを作成することで親テーマのヘッダーやフッターの内容を上書きできるため、非常に高い柔軟性を提供します。
どうやって私のテーマを多言語対応（国際化）にするか？
WordPressの国際化（i18n）機能を使用して、テーマ内で出力されるすべてのテキスト文字列をラップする必要があります。主に以下の機能を利用します：__()、_e()等の関数を使用し、そしてstyle.css正しい設定を行ってください。Text Domainその後、Poeditのようなツールを使用して生成します。.pot翻訳テンプレートファイルに基づいて、翻訳者は対応する言語の翻訳を作成することができます（例：zh_CN.poと.mo）の翻訳ファイルです。最後に、functions.phpあなたは中国を通してそれを達成しました。load_theme_textdomain()「Function loading」の翻訳です。
テーマの開発が完了した後、その互換性をどのようにテストするか？
テーマを本番環境に公開またはデプロイする前に、徹底的なテストを行うことが非常に重要です。まず、さまざまなブラウザ（Chrome、Firefox、Safari、Edge）やデバイス（デスクトップ、タブレット、スマートフォン）でレスポンシブ性のテストを行う必要があります。次に、WordPressのさまざまな設定を使用してテストを行い、様々なプラグインの有効/無効化や異なる記事タイプ、ツールの使用を試してみましょう。さらに、WordPress公式のテーマチェックプラグイン（Theme Check）を利用してテーマをスキャンし、最新のWordPressのコーディング基準やベストプラクティスに準拠しているかを確認することもできます。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語