ホームページ/知識関連/WordPress/コンテンツ詳細

WordPressテーマ開発入門ガイド：ゼロから最初のテーマを作成する方法

3分で読了
2026-03-14
2026-06-05
2,376
以下のリンクからお買い物をしていただくと、コミッションを差し上げます。.

WordPressのテーマの基本構造を理解する

コードを書き始める前に、WordPressテーマの構成を理解しておくことが非常に重要です。最も基本的なテーマでも、最低2つのファイルが必要です。1つはテーマ情報を定義するスタイルシート、もう1つはサイトのコンテンツを表示するPHPテンプレートファイルです。これらのファイルが一体となってテーマの骨組みを形作り、特定のディレクトリ構造と命名ルールに従って構成されます。

核となる文書はstyle.cssこれは単なるCSSスタイルを含むだけでなく、ファイル先頭のコメントブロックはテーマの「身分証明書」でもあります。このブロックは、テーマ名、作者、説明、バージョンなどのメタ情報をWordPressシステムに伝えます。正しい形式になっていない場合、style.css、WordPress はテーマを認識して有効化できません。

もう1つの必須ファイルはindex.php。这是主题的主模板文件，当WordPress无法找到更具体的模板文件（如single.phpまたはpage.php）すると、ページのレンダリングにはデフォルトでこれが使用されます。これはすべてのテンプレートファイルのフォールバックです。

推薦図書 WordPressテーマ開発を解き明かす：ゼロからカスタムサイトを構築するための重要技術。

テーマ情報声明書

テーマのスタイルシートstyle.cssヘッダーには特定のコメントを含める必要があります。以下は最も基本的な例です：

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
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国際化のために使用され、後で翻訳を行う際の識別子として使われます。このファイルには、通常、すべてのCSSスタイルコードも含まれています。

コアテンプレートファイル

index.phpファイルはテーマの入り口です。最もシンプルなindex.php可以只包含调用WordPress核心函数的基本循环，用以获取并显示文章列表。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

このコードでは、wp_head()とwp_footer()これは2つの重要なフックで、WordPress本体やプラグイン、その他のスクリプトが、ページの先頭や末尾にスタイル、スクリプト、メタタグなどの必要なコードを挿入できるようにします。

ローカル開発環境の構築

テーマを本番サーバーに公開する前に、ローカル開発環境を構築することが、最も効率的で安全な方法です。ローカル環境なら、本番サイトに影響を与えることなく、自由にコードをテストし、不具合をデバッグできます。

推薦図書 WordPressテーマ開発を完全にマスターするためのガイド：入門から上級者まで。

ローカルサーバーソフトウェアを選択

初心者には、統合型のローカルサーバーソフトがおすすめです。Apache/Nginx、PHP、MySQLデータベースがひとまとめになっており、ワンクリックでインストールしてすぐに使えます。たとえば、XAMPP、Local by Flywheel、DevKinstaなどが人気の選択肢です。これらのツールは実際のWebサーバー環境を再現するため、自分のパソコン上でWordPressを動かせます。

WordPressをインストールしてテーマディレクトリを作成

ローカルサーバーで実行した後、新しいWordPressをインストールする必要があります。最新のWordPressの圧縮ファイルをダウンロードし、ローカルサーバーのウェブサイトのルートディレクトリ（例えばXAMPPのhtdocsフォルダ）に解凍してください。その後、ブラウザでローカルアドレス（http://localhostなど）にアクセスして、有名な「5分でインストール完了」の手順に従ってください。

インストール完了後、WordPressのwp-content/themesディレクトリ。ここで、これから開発するテーマ用に新しいフォルダを作成します。たとえば「my-first-theme」という名前にします。先ほど作成したstyle.cssとindex.phpファイルはこのフォルダ内に配置してください。この時点でWordPressの管理画面にログインし、「外観」→「テーマ」を開くと、まだ機能は非常にシンプルですが、あなたのテーマが表示されているはずです。

hosting.com 共有ホスティング
AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減
ホスティング・ドットコムのロゴ アクセスページ

基本テンプレートファイル構成を作成

のみindex.phpテーマだけでは到底不十分です。機能が揃ったテーマには、個別記事、固定ページ、記事アーカイブなど、さまざまな表示場面に対応するテンプレートファイル一式が必要です。WordPressのテンプレート階層システムは、現在のリクエストに最も適したテンプレートファイルを自動的に選んでページを表示します。

記事とページテンプレート

single.phpこのテンプレートは、個別のブログ記事を表示するために使われます。ユーザーが記事の全文を読むためにクリックすると、WordPress はこのテンプレートを使用します。通常、カテゴリー、タグ、投稿者、コメント欄など、より詳細な記事情報が含まれます。

page.phpテンプレートは、「会社概要」や「お問い合わせ」ページのような独立した静的ページを表示するために使われます。投稿テンプレートとの違いは、通常、公開日時やカテゴリーなど、ブログ記事に関する要素を表示しない点です。

推薦図書 WordPressテーマ開発の詳細解説：入門から上級者までの完全ガイド。

头部与底部模板

DRY（Don't Repeat Yourself）原則に従い、WordPressテーマでは通常、ページのヘッダーとフッターを独立したファイルとして分離します。

header.phpこのファイルには、先頭からページのメインコンテンツエリアの手前までのすべてのコードが含まれます。領域、サイト識別情報、メインナビゲーションメニューなどが含まれます。でindex.php、single.phpなどの他のテンプレートで使用get_header()その関数を使ってそれを導入します。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ

同様に、footer.phpこのファイルには、著作権情報や補助ナビゲーションなど、フッターのすべての内容が含まれており、を通じてget_footer()函数引入。此外，sidebar.php（サイドバー）も分離して使用されることが多いget_sidebar()呼び出し。

リファクタリング後index.php非常にシンプルになります：

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

スタイルとスクリプトを統合

モダンなテーマでは、CSSスタイルシートとJavaScriptスクリプトを正しく効率的に読み込む必要があります。WordPressには、これらのリソースを管理する専用の関数が用意されており、依存関係を正しい順序で読み込み、重複読み込みや競合を防げます。

関数キューでスタイルを追加

正しい方法は次のとおりですwp_enqueue_style()この関数はスタイルシートをキューに追加します。テーマ内に次の名前のものを作成する必要がありますfunctions.phpテーマ機能の中核となるファイルで、さまざまな特性や機能を追加し、デフォルトの動作を変更するために使用されます。

はい。functions.phpでは、関数をマウントできますwp_enqueue_scriptsこのアクションフックに：

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()関数がテーマを自動取得しますstyle.cssファイルパス。この方法で読み込むことで、WordPress はリソースをより適切に管理できます。

関数キューでスクリプトを追加

JavaScriptスクリプトの読み込みにもキューを使用し、対応する関数はwp_enqueue_script()。你可以在同一个函数中添加它们。

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

ここでは、array( 'jquery' )このスクリプトが中核となるjQueryライブラリに依存していることを示しており、WordPressはjQueryが先に読み込まれるようにします。最後の引数trueスクリプトをページ下部に配置することを示し、ページの読み込み速度の向上に役立ちます。

概要

ゼロからWordPressテーマを開発することは、基礎的なファイル構成の理解、ローカル環境の構築、テンプレート構成の作成、リソースの適切な組み込みまでを含む、体系的な学習プロセスです。実際に自分の手で作成することでstyle.css、index.php、header.php、footer.phpもfunctions.phpこれらの主要ファイルを通して、動作するテーマを構築できるだけでなく、WordPressのテンプレート階層やフックシステムの仕組みもより深く理解できます。大切なのは、WordPressの規約や標準に従ってテーマを開発することです。そうすることで、互換性が高く、効率的で、保守しやすいテーマを実現できます。ここを出発点として、カスタム投稿タイプ、テーマカスタマイザー、ウィジェットエリアなど、さらに高度な機能にも取り組みながら、機能性に優れたオリジナルテーマへと育てていきましょう。

FAQ よくある質問

開発テーマを作成するには、PHPを習得する必要がありますか？

はい、PHPの習得はWordPressテーマ開発に欠かせない条件です。WordPress自体がPHPで作られているため、すべてのテンプレートファイル（たとえばindex.php、single.php）はすべてPHPファイルで、PHPコードを通じてWordPressのコア関数を呼び出し、ページ内容を動的に生成します。また、機能を追加するためのfunctions.php文件也完全由PHP代码构成。HTML和CSS用于定义结构和样式，而PHP是实现动态功能和数据交互的灵魂。

主题的functions.php文件有什么作用

functions.phpこのファイルは、テーマの「機能の中枢」です。テンプレートファイルではないため、ページ上の特定の部分を直接生成することはありません。代わりに、テーマの機能を変更・拡張するためのPHPコードをすべて格納するために使われます。一般的な用途には、ナビゲーションメニューの位置の登録、ウィジェットエリアの定義、〜を通じた機能追加などがあります。wp_enqueue_scriptsフックによるCSS・JavaScriptファイルの追加、テーマサポート機能の追加（アイキャッチ画像、カスタム背景など）、各種カスタム関数の定義を行います。このファイルはテーマの有効化時に自動で読み込まれます。

どうすれば私のテーマが多言語に対応できるようになるでしょうか？

テーマを多言語対応（国際化とローカライズ）にするには、主に2つの手順があります。1つ目は、テーマ内で翻訳が必要なすべてのテキストに対して、次のような特定のWordPress翻訳関数を使用することです。例えば__('文本', 'text-domain')または_e('文本', 'text-domain')どのtext-domain必ず…と共にstyle.cssで宣言されたText Domain一致しています。2つ目のステップは、Poeditのようなツールを使ってテーマコードをスキャンし、生成することです。.potテンプレートファイル。翻訳者はこれを基に対応言語（中国語など）を作成します.poそしてコンパイル後の.moそのファイルをテーマの中に置いてください。/languages/ディレクトリ.WordPressは、ウェブサイトの言語設定に従って対応する翻訳を自動的に読み込みます。

テーマとプラグインの違いは何ですか

WordPressでは、テーマとプラグインはそれぞれまったく異なる役割を担います。テーマ（Theme）は主にサイトのフロントエンド表示を管理し、ユーザーが目にするデザイン、レイアウト、スタイル、テンプレート構造を決定します。つまり、サイトが「どう見えるか」を決めるものです。 一方、プラグイン（Plugin）はサイトに特定の機能を追加するためのもので、どのテーマを使っていても機能します。たとえば、お問い合わせフォームの作成、SEOの最適化、ECカート機能の追加などです。つまり、サイトが「何ができるか」を決めるものです。 実務上の基本原則としては、見た目やレイアウトに関わるコードはテーマに、コア機能に関わるコードはできるだけプラグインとして実装するのが望ましいです。そうすることで、テーマを変更してもサイトの重要な機能を失わずに済みます。

次はどうする？

WordPressのウェブサイトを構築または最適化している場合、次のステップはパフォーマンスの最適化、プラグインの設定、テーマのカスタマイズについて読み進めることです。

拡大読書と実践的知識

以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。

タグ: