WordPressテーマ開発入門ガイド:ゼロからあなただけのウェブサイトテーマを作ろう

読了時間4分
2026-03-18
2026-06-04
1,962
以下のリンクからお買い物をしていただくと、コミッションを差し上げます。.

コードの作成を始める前に、ローカル開発環境が必要です。これには通常、ローカルサーバー(XAMPP、MAMP、またはLocalなど)とコードエディタ(VS Code、PhpStormなど)が含まれます。環境にPHP(7.4以降のバージョンが推奨)とMySQLがインストールされていることを確認してください。

標準的なWordPressテーマとは、特定のファイル群を含むフォルダのことです。まず、自分のローカルのWordPressインストール環境で…wp-content/themesディレクトリ内に新しいフォルダを作成し、例えば「example_folder」という名前にします。my-first-theme

次に、2つの最も基本的で必要なファイルを作成します:style.cssindex.phpその中で、style.cssスタイルシートだけでなく、テーマの「身分証明書」のようなものでもあります。そのファイルのヘッダー部分にあるコメントブロックを使って、WordPressに自分のテーマについて情報を伝えます。

推薦図書 WordPressテーマ開発入門ガイド:ゼロからパーソナライズされたウェブサイトを作成する

はい。style.cssファイル内に、以下の形式のヘッダー情報を追加する必要があります:

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
/*
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
*/

これらの情報はWordPressの管理画面(バックエンド)にある「外観」→「テーマ」のページに表示されます。index.phpこのファイルはテーマのデフォルトテンプレートであり、たとえ一時的に空の状態であっても存在していなければなりません。WordPressがこれを有効なテーマとして認識するためには、このファイルが必要です。

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

基本ファイルができたとしても、あなたのテーマではまだ何も表示されません。WordPressはテンプレートの階層システムを使用して、異なるタイプのページにどのテンプレートファイルを読み込むかを決定します。次に、いくつかのコアとなるテンプレートファイルを作成していきます。

ヘッダーとフッターのテンプレートを作成します。

コードの再利用と一貫性を実現するために、通常はウェブページのヘッダー(Header)とフッター(Footer)を別々のファイルに分けます。まずは、それらのファイルを作成しましょう。header.phpこのファイルには、HTMLドキュメントのヘッダー部分が含まれています。<body>タグやウェブサイトのトップ部分にある共有エリア(ロゴやナビゲーションメニューなど)です。

最もシンプルなものheader.php例示には以下の内容が含まれる場合があります:

推薦図書 プロフェッショナルなウェブサイトの構築:WordPressテーマの開発とカスタマイズに関する総合的なガイド

<!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' ); ?&gt;</a></h1>
        <p>ブログの説明文を表示するには?php bloginfo( 'description' ); ?&gt;</p>
    </header>

その中にあるものに注意してください。wp_head()関数とは、必ず呼び出さなければならないもので、WordPressのコア、プラグイン、そしてテーマ自体がページのヘッダー部分に必要なコード(CSSやJSなど)を挿入するために使用されます。

次に、作成してください。footer.phpこのファイルは、何かを閉じるために使用されます。<body><html>タグを含み、フッターの内容も表示されます。

    <footer>
        <p>©  . All Rights Reserved.</p>
    </footer>
    
</body>
</html>

同様に、wp_footer()関数も必要です。

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

では、これで更新することができます。index.php用途get_header()get_footer()これら2つの部分を導入するための関数を用意します:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容将在这里显示
        endwhile;
    else :
        // 没有找到文章时的内容
    endif;
    ?>
</main>

<?php get_footer(); ?>

記事のループ処理とコンテンツテンプレートの作成

上記のindex.phpここでは、WordPressの核心である「The Loop」について見てきました。The Loopは、現在のページに掲載されているすべての記事(または単一の記事)を順番に処理するために使用されます。記事の内容をより整理された形で表示するために、通常は単一の記事を表示するためのロジックを別のファイルに分離します。

作成content.phpまたはtemplate-parts/content.phpファイルを読み取り、その後ループ内で処理を行います。get_template_part()関数がそれを呼び出します。

推薦図書 WordPressテーマ開発の完全ガイド:入門から上級者までの実践トレーニング

// 在 index.php 的循环中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

そして、作成するのです。template-parts/content.php

<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
    <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
    <div class="entry-meta">
        by
    </div>
    <div class="entry-content">
        あなたのコメントは受け付けられました。ありがとうございます。
    </div>
</article>

このように、記事のタイトル、要約、メタデータなどが標準化された形式で出力されます。

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

スタイルとスクリプトの導入

現代的なテーマにはCSSとJavaScriptが欠かせません。WordPressでは、テンプレート内で直接使用するのではなく、スタイルシートやスクリプトファイルを安全に処理するための標準的な機能が用意されています。<link>または<script>タグ。

登録およびキュー処理用のメインスタイルシート

私たちはすでにそれを持っていますが、style.cssしかし、通常は次のような方法で…functions.phpファイルを読み込むためには、まずテーマのルートディレクトリにファイルを作成してください。functions.phpファイル。

そして、使用してください。wp_enqueue_style()関数を使ってスタイルシートを読み込む必要があります。functions.php中创建一个函数,并将其钩到wp_enqueue_scriptsこのアクションについてです。

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载Google Fonts示例
    wp_enqueue_style( 'my-first-theme-google-fonts', '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ファイルパス。

レスポンシブなナビゲーションメニューのスクリプトを追加します。

インタラクティブな機能(例えばモバイル端末向けのレスポンシブメニュー)を追加するためには、JavaScriptを導入する必要があります。ここでは、メニューの表示/非表示を切り替えるための簡単なスクリプトがあると仮定します。

まず、以下の手順で新しいファイルを作成してください:js/navigation.jsファイルです。そして、その後…functions.php同じ関数内で使用するwp_enqueue_script()それを読み込むために来てください。

function my_first_theme_scripts() {
    // ... 之前的样式代码 ...

// 加载导航脚本
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}

最後のパラメータtrueこれは、スクリプトをページの下部に配置することを意味しています。</body>(タグの前に配置することで)、これは通常、ページの読み込み性能を向上させるのに役立ちます。

テーマの核心機能を実現する

functions.phpこれはテーマの「脳」のようなもので、さまざまな機能を追加したりサポートを提供したりするために使用されます。リソースを読み込むだけでなく、ここでテーマがサポートする機能も宣言する必要があります。

トピック機能のサポートを追加します。

WordPressは一連の「テーマ機能」を提供しており、これらを使用するにはそれらを明示的にサポートするよう設定する必要があります。最も基本的な機能には、記事のサムネイル(特集画像)、カスタムメニュー、HTML5マークアップのサポートなどが含まれます。

はい。functions.php以下のコードをその中に追加してください:

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接自动添加到head中
    add_theme_support( 'automatic-feed-links' );
    // 让文章和页面支持“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 启用对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用标题标签支持,WordPress会自动管理文档标题
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

after_setup_themeこれはテーマの初期化時に実行されるアクションフックであり、テーマ機能を設定するための標準的な場所です。

登録ナビゲーションメニュー

ほとんどのウェブサイトにはナビゲーションメニューが必要です。WordPressのメニューシステムでは、ユーザーが管理画面の「外観」→「メニュー」でメニューアイテムをカスタマイズすることができます。まず、使用しているテーマにメニューの配置情報を登録する必要があります。

先ほどの…my_first_theme_setup関数内で、以下の内容を追加してください:

function my_first_theme_setup() {
    // ... 之前的 add_theme_support 代码 ...

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}

登録後、テンプレートファイル(例えば…)を使用できるようになります。header.php)で使用されていますwp_nav_menu()このメニューを表示するための関数が用意されました:

<nav>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
    ) );
    ?>
</nav>

サイドバーとツールバー領域を作成する

ウィジェット(Widget)はWordPressのもう一つの強力な機能です。これを使用するには、まずサイドバー(ウィジェットを配置する領域)を登録する必要があります。

はい。functions.php新しい関数を作成し、それを既存のシステムやプロセスに組み込みます。widgets_initアクションに関しては:

関数 my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Main Sidebar', 'my-first-theme' )、
        'id' =&gt; 'sidebar-1'、
        'description' =&gt; __( 'Add widget here., 'my-first-theme' ), 'description' =&gt; __( 'Add widget here.
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

登録後、「管理画面」の「外観」→「小道具」で「メインサイドバー」エリアを確認でき、そこに小道具をドラッグアンドドロップで追加できます。この小道具をテーマ内に表示させるには、テンプレートなどで設定を行う必要があります。sidebar.phpそして最後に、mainメソッドを呼び出します。dynamic_sidebar( 'sidebar-1' )関数。

概要

このガイドを通じて、非常にシンプルながらも機能的に完全なWordPressテーマの開発プロセスを完了しました。環境の構築や基本ファイルの作成から始め、テンプレートの階層構造を段階的に構築し、ヘッダーとフッターを分離し、記事の表示処理を実装しました。その後、テーマにスタイルやスクリプトを標準的な方法で追加する方法を学び、互換性とパフォーマンスを確保しました。最後に、functions.phpこのテーマでは、特徴的な画像、ナビゲーションメニュー、ツールバーなどの核心機能を有効にしており、非常に高いカスタマイズ性を実現しています。

これはあくまで出発点に過ぎません。この基盤の上で、より専門的なテンプレートファイルを作成し続けることができます。single.phppage.phparchive.phpより複雑なWordPress API(カスタム記事タイプ、カテゴリ、カスタマイザーAPIなど)を探求することで、機能豊富でデザインがユニークなオリジナルのウェブサイトテーマを作り出すことができます。

FAQ よくある質問

WordPressテーマを開発するには、どのような技術をマスターする必要がありますか?

WordPressのテーマを開発するには、いくつかの核心技術をマスターする必要があります。まず第一にPHPです。WordPress自体がPHPで書かれており、すべてのテンプレートファイルや機能のロジックはPHPなしには成り立ちません。基本的なPHPの文法、関数、ループ、条件文などを理解する必要があります。

次にHTMLとCSSです。これらはウェブページの構造とスタイルを作成するために使用されます。レスポンシブデザインの原則や、Flexbox、Gridなどの現代のCSSレイアウト技術を理解することが非常に重要です。最後に、JavaScriptについての基本的な知識が必要であり、これによってフロントエンドのインタラクティブ機能を実現します。WordPress特有のPHP関数やフック(Hooks)システムに精通していることは、効率的なテーマ開発に不可欠です。

スタイル.cssとfunctions.phpのファイルのどちらが重要ですか?

これら2つのファイルは、WordPressのテーマ開発においてまったく異なる役割を果たしていますが、どちらも非常に重要であるため、どちらがより重要かを単純に比較することはできません。style.cssファイルはテーマの「識別子」のようなものであり、そのファイルのヘッダー部分にあるコメントブロックはWordPressがテーマを認識するために必要不可欠です。これがなければ、そのテーマはバックエンドの「テーマ」リストに表示されません。

しかし、functions.phpこのファイルはテーマの「機能の中心」となるもので、テーマの機能を強化するためのほぼすべてのコードがここに記述されています。例えば、登録メニューの作成、テーマサポートの追加、スクリプトやスタイルの読み込み、カスタム関数の定義などです。このファイルがなければ、テーマはほとんどの動的機能や拡張性を失ってしまいます。これら2つは相互に補完し合うものであり、どちらも欠かせません。

なぜ `wp_head()` と `wp_footer()` 関数を使用しなければならないのでしょうか?

wp_head()wp_footer()これはWordPressのコアとテーマ、プラグイン間の通信を行うための重要なフック(hook)です。header.php</head>タグの前で呼び出すwp_head()これは、WordPress自体、インストールしたプラグイン、およびテーマの他の部分がページのヘッダーに必要なコード(メタタグ、スタイルシートのリンク、スクリプトの参照、JSON-LDの構造化データなど)を挿入するための標準的な方法です。

同様に、footer.php</body>タグの前で呼び出すwp_footer()これらの関数は、ページの下部で読み込む必要があるスクリプト(分析コード、遅延読み込みのJSなど)やその他のHTMLを挿入するために使用されます。これらの関数を省略すると、プラグインが正しく動作しない、管理ツールバーが表示されない、さまざまな互換性の問題が発生する可能性があります。

テーマをWordPressの公式標準に準拠させるにはどうすればよいですか?

あなたのテーマがWordPressの公式基準に準拠し、高品質であるためには、「WordPressテーマ開発マニュアル」と「テーマレビュー要件」に従う必要があります。これには、安全なコーディング習慣の実施や、すべての動的に生成されるデータに対してエスケープ関数を使用することが含まれます。esc_html(), esc_url())すべての翻訳文字列に対して国際化関数(例:`i18n()`など)を使用してください。__(), _e())そしてテキストフィールドを読み込む。

テーマはレスポンシブデザインを採用しており、すべてのデバイスで正常に表示される必要があります。コードはクリアでコメントが付けられており、WordPressのコーディング基準に従っている必要があります。さらに、テーマはWordPressのカスタマイザーを通じて十分なカスタマイズオプションを提供し、すべてのWordPressのコア機能やフックが正しく実装されている必要があります。公開する前に、Theme Checkプラグインを使用してテストを行うことは良い習慣です。