準備作業：完全なテーマ環境を作成する
どんなコードを書く前にも、構造が明確な開発環境を整えることが成功の鍵です。まず、ローカルまたはリモートサーバーにWordPressをインストールしてください。テーマを保存するためのディレクトリを作成し、その場所はWordPressのインストールディレクトリ内に設定してください。 /wp-content/themes/ はい。私たちは「××」という名前のものを作成します。 my-first-theme 新しいフォルダーです。これが私たちがカスタマイズしたテーマのコアディレクトリです。
最も基本的なWordPressテーマであれば、システムに認識されるために2つのファイルだけが必要です。1つ目はスタイルシートファイルです。 style.cssそれは単にサイトの外観を定義するだけでなく、ヘッダー部分に含まれるコメント情報はまさにそのテーマの「身分証明書」のようなもので、テーマの名前、作者、説明などのメタデータが含まれています。2つ目はコアテンプレートファイルです。 index.phpこれはWordPressのデフォルトのトップページテンプレートファイルです。
まずは作成しましょう。 style.css ファイルに、必要なヘッダー情報を書き込みます。
推薦図書 WordPressテーマ開発：ゼロからカスタムテーマを構築するための完全ガイド。
/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.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-first-theme
*/
/* 以下是正式的样式内容 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}次に、最も基本的なものを作成します。 index.php このファイルは非常にシンプルなもので、テーマが正しく認識されているかどうかをテストするためだけに使用されます。
<!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>こんにちは、世界！これが私の最初のテーマです。</h1>
</body>
</html>これら2つのファイルの作成が完了したら、WordPressの管理画面にログインし、「外観」 → 「テーマ」のページに移動してください。そこには先ほど作成した「My First Theme」というテーマが表示されているはずです。このテーマを有効にした後、ウェブサイトのトップページにアクセスすると、最もシンプルな表示内容が確認できるでしょう。これで、あなたのテーマの枠組みが成功裏に構築されたということになります。
コアテンプレートファイルとその階層構造を理解する
WordPressはテンプレート階層（Template Hierarchy）を利用して、異なるページリクエストに対してどのテンプレートファイルを使用してレンダリングするかを決定します。このルールを理解することは、テーマ開発の核心です。簡単に言えば、ユーザーが特定のページにアクセスすると、WordPressは優先順位に従ってマッチするテンプレートファイルを探します。最も基本的な仕組みは… index.phpそれはすべてのページにおける最終的なリセット／元に戻すオプションです。
例えば、ブログ記事の個別の内容にアクセスした場合、WordPressはまず以下のような処理を行います： single-post.phpもしそれがない場合は、探す必要があります。 single.phpもしまだない場合にのみ、それを使用します。 index.php記事一覧を表示するページについては、それぞれの記事を順番に検索します。 home.php、front-page.php、index.php。
機能が完全なブログテーマを実現するためには、少なくとも以下のいくつかのキーテンプレートファイルを作成する必要があります：header.php（ウェブサイトのヘッダー）footer.php（ウェブサイトのフッター）sidebar.php（サイドバー、オプション）index.php（メインコンテンツインデックス）single.php（単一の記事）page.php（シングルページ）および style.css（スタイルシート）
推薦図書 ゼロからカスタムWordPressテーマを開発する方法。
とおす get_header()、get_footer() と get_sidebar() これらのテンプレート関数を利用することで、共通のコードをモジュール化し、コードの再利用を実現することができます。メインのテンプレートファイルは以下のようになります： index.php その構造はこれにより非常に明確になります。
<?php get_header(); ?>
<main id="main-content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 循环输出文章内容
endwhile;
else :
// 没有找到内容的提示
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>このモジュール化された考え方により、コードのメンテナンスが容易になるだけでなく、異なるタイプのページに対しても特定のヘッダーやフッターを簡単に作成することができます。
実践開発：メインループの作成と記事内容の呼び出し
どのブログテーマの核心でも、「The Loop（ループ）」が存在します。これはWordPressがデータベースから記事の内容を取得し、ページ上に表示するために使用するPHPコードの構造です。このループの中で、一連のテンプレートタグ（Template Tags）を使用して、記事のタイトル、本文、著者、日付などの情報を出力することができます。
では、最も基本的なものを構築しましょう。index.phpファイルについては、メインループ内で記事リストを表示します。
<?php get_header(); ?>
<div class="content-area">
<main class="site-main">
もし投稿があるなら：
<header class="page-header">
<h1 class="page-title">最新記事</h1>
</header>
<?php
while ( have_posts() ) : the_post();
?>
<article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
<h2 class="entry-title">
<a href="/ja/</?php the_permalink(); ?>">
あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。
</a>
</h2>
<div class="entry-meta">
公開日：<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
</div>
<div class="entry-content">
<?php the_excerpt(); // 输出文章摘要 ?>
</div>
</article>
<?php
endwhile;
// 输出分页导航
the_posts_navigation();
else :
?>
<p>申し訳ありませんが、該当する記事は見つかりませんでした。</p>
endif; 終わり
</main>
</div>
<?php get_footer(); ?>上記のコードでは、私たちは have_posts() と the_post() ループを構築するために使用されるテンプレートタグです。 the_title()、the_permalink()、the_excerpt() などが使用されて、対応するコンテンツが出力されます。post_class() この関数により、記事コンテナ用に一連の非常に便利なCSSクラスが自動的に生成されます。これにより、スタイル設計を容易に行うことができます。
単一の記事については、以下のようなものを作成する必要があります： single.phpその構造はインデックスページに似ていますが、通常は1つの記事のみを表示し、その記事の全文を表示します。the_content())。
推薦図書 WordPressテーマ開発入門ガイド：ゼロからカスタムテーマを構築する。
<?php get_header(); ?>
<main id="primary">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', 'single' );
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>ここでは、より強力な関数が導入されています。 get_template_part()これは、テーマディレクトリ内にある別のテンプレートファイルを読み込むために使用されます。例えば、get_template_part( 'template-parts/content', 'single' ); 優先的に読み込まれます。 template-parts/content-single.php ファイルが存在しない場合は、読み込みます。 template-parts/content.phpこれにより、コードの組織性と再利用性がさらに向上しました。
テーマ機能の強化とベストプラクティス
基本的テーマが形になった後、テーマ機能用のファイルを追加したり、ベストプラクティスに従ったりすることで、そのテーマをより強力で信頼性の高いものにすることができます。最も重要なファイルの一つは… functions.php。
テーマに関するfunctions.phpこのファイルは必須ではありませんが、テーマに機能を追加したり、特定の機能を登録したり、WordPressのコアAPIとやり取りを行うために使用できます。これはテーマの「プラグイン」のようなものですが、テーマに直接結びついています。ここで行うべき作業は「登録」や「宣言」であり、直接コンテンツを出力することではありません。
「標準的な」functions.php以下の内容を含める必要があります：
1. 注册菜单：使用 register_nav_menus() 関数。
2. 注册侧边栏：使用 register_sidebar() 関数。
3. 添加主题支持：使用 add_theme_support() これらの機能（記事の特徴的な画像やカスタムロゴなど）を有効にするための関数です。
4. 加载样式和脚本：使用 wp_enqueue_style() と wp_enqueue_script() 函数，并正确地使用 wp_enqueue_scripts フック。
__( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 加载谷歌字体
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap', array(), null );
// 加载主 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' );
// 注册一个右侧边栏
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );
?>これらのベストプラクティスに従ってください。例えば、フックを使用して機能を追加したり、リソースの読み込みを適切に並列化したり、翻訳関数を利用したりしてください。 __() と _e() テーマを国際化することで、テーマの安全性と効率性を確保し、WordPressの公式な開発基準に準拠することができます。
概要
「Create a file that contains…」 style.css と index.php 基本的フォルダ構造から始めて、カスタムWordPressテーマを構築するための主要なステップをすべて経験しました。テンプレートの階層システムについて詳しく学び、WordPressがどのようにして異なるページに適切なテンプレートファイルを自動的に選択してレンダリングするかを理解しました。メインループの構築を実践し、さまざまなテンプレートタグを使用してコンテンツを動的に出力する方法を習得しました。最後に、 functions.php このテーマには、より強力な機能と規範性が組み込まれています。これはまだ始まりに過ぎませんが、これをきっかけにさらに探求を続けることができます。より多くのテンプレートファイルや豊富なスタイル、インタラクティブな機能を追加することで、最終的にはあなたや顧客のニーズに完全に合ったユニークなウェブサイトを作り上げることができるのです。
FAQ よくある質問
テーマ開発にはPHPの知識が必要なのでしょうか？
はい、WordPressのテーマを深く開発するには、ある程度のPHPの知識が必要です。WordPress自体がPHPで構築されているため、すべてのテンプレートファイル、関数の呼び出し、データ処理のロジックはPHPなしには成り立ちません。初心者の方にとっては、PHPの基本文法、変数、配列、ループ、条件判断、関数の使い方をマスターすることが不可欠です。
どうすれば私のテーマをモバイルデバイスに最適化できるでしょうか？
テーマにレスポンシブデザインを実装することは、現代のウェブサイトにとって基本的な要求です。CSSのメディアクエリ（Media Queries）を使用して、異なる画面幅に応じてレイアウトやスタイルを調整する必要があります。開発時には常に「モバイルファースト」のアプローチを採用し、まず小さな画面に適したスタイルを作成し、その後メディアクエリを通じてより大きな画面向けのスタイルを追加したり上書きしたりしていくべきです。
開発とテストを行うための最適な方法は何でしょうか？
テーマ開発にあたっては、ローカル開発環境を使用することを強くお勧めします。Local by Flywheel、XAMPP、MAMP、Dockerなどのツールを使ってローカルサーバー環境を構築することで、オンラインサイトに影響を与えることなく、迅速にイテレーションやテストを行うことができます。また、WordPressの設定を適切に行うことで… WP_DEBUG モードは非常に重要です。PHPのエラーや警告を画面上に表示することで、コードの問題を迅速に発見し、修正するのに役立ちます。
どのようなフロントエンド技術を習得する必要がありますか？
PHPに加えて、HTMLとCSSも習得する必要があります。これらはウェブページの構造とスタイルを決定するための基本要素です。より複雑なインタラクションや動的な効果を実現するには、JavaScriptの知識も非常に重要です。特に、WordPress内でJavaScriptファイルを安全かつ正しく読み込み、使用する方法を学ぶことが重要です。 wp_enqueue_script）や、WordPressに搭載されているJavaScriptライブラリの使い方を学ぶことです。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語