WordPressテーマ開発入門 – ゼロから最初のカスタムテーマを作成する

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

WordPressのテーマ開発を始めるには、ローカルのPHP環境が構築されたコンピューターが必要です。XAMPP、MAMP、Local by Flywheelなどのツールを使用すると、簡単に開発環境をセットアップできます。次に、Visual Studio Code、PHPStorm、Sublime Textなどのコードエディターが必要です。これらのエディターには構文ハイライトやコードヒントなどの機能があり、開発効率を大幅に向上させてくれます。最後に、最新バージョンのWordPressをインストールし、有効にしておくことを忘れないでください。

コーディングを始める前に、WordPressのテーマのディレクトリ構造を理解することが非常に重要です。最も基本的なテーマであっても、少なくとも2つのファイルが必要です:style.cssindex.phpしかし、実際の開発では、機能を分離(デカップル)するためにより多くのファイルが必要になることがよくあります。典型的な現代のテーマ構造は以下のようになっています:

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

コアテーマファイルを作成する

このステップでは、テーマの基盤となる要素を作成します。これらのファイルによって、テーマのアイデンティティと基本的な構造が定義されます。

推薦図書 WordPressテーマ開発の究極ガイド:ゼロからカスタムテーマを構築する

テーマ情報とメインスタイルシートの定義

style.cssファイルはスタイルシートだけでなく、テーマの「身分証明書」のようなものです。その上部にあるコメントブロックには、WordPressがテーマを認識するために必要なすべてのメタ情報が含まれています。基本的なヘッダーコメントの例は以下の通りです:

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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

その中で、Text Domainこれは国際化のためのもので、後で翻訳関数を呼び出す際の重要な識別子です。コメントブロックの後で、通常のCSSを書くようにして、あなたのテーマにスタイルを追加することができます。

テーマの骨格テンプレートを構築する

index.phpこれはトピックのデフォルトのメインテンプレートであり、すべてのページのバックアップテンプレートでもあります。良い慣行としては、WordPressのテンプレート関数を使用してモジュール化された部分を導入することで、すべてのコードを1つのファイルにまとめるのではなくすることです。非常にシンプルでありながらも構造が明確な…index.php以下のようになるかもしれません:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

ヘッダーとボトムのテンプレートを分離する

header.phpファイルには通常、HTMLドキュメントのヘッダー部分が含まれており、コンテンツエリアが始まるまで続きます。そのヘッダー部分には必要な情報が含まれているはずです。宣言(せんげん)とは、ある事実や意図、見解などを公に表明することです。法律文書や公式声明などでよく使われます。タグエリア(使用)wp_head()フック(hook)およびウェブサイトのタイトルとメインナビゲーションです。重要な関数は…wp_head()それにより、プラグインやテーマがヘッダー部分に必要なコード(CSSやJSなど)を挿入することができます。

footer.phpファイルには、コンテンツエリアの終わり以降のすべての内容が含まれています。例えば、ページフッターのツールバーや著作権情報などです。このファイルは必ず、wp_footer()関数の呼び出しが終了しました。この関数は、多くのプラグイン(例えばコード分析用のプラグイン)が正常に動作するために必要なものです。

推薦図書 プロフェッショナルなウェブサイトの構築:カスタムWordPressテーマをゼロから作成するための完全ガイド

機能の導入とテーマの強化

functions.phpこのファイルは、あなたのテーマの「コントロールセンター」のようなものです。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルです。ここには、テーマのサポート機能の追加、メニューの登録、スタイルシートやスクリプトの設定、さまざまなカスタム機能の定義などが可能です。

コアテーマ機能を有効にします。

とおすadd_theme_support()関数を使えば、自分のテーマでWordPressのコア機能のサポートを宣言することができます。例えば、記事のサムネイル(特集画像)の表示やHTML5マークアップのサポートを有効にすることは、現代のテーマにとって標準的な機能です。

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持(由WordPress自动生成<title>标签)
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

登録メニューとリソースの読み込み

登録されたナビゲーションメニューの位置は、ユーザーがバックエンドの「外観」→「メニュー」で管理することができます。register_nav_menus()関数の実装:

hosting.com 共有ホスティング
AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減
function my_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

CSSやJavaScriptファイルを正しい方法で読み込むことは、良いパフォーマンスを保証するための重要な要素です。以下の方法を使用することをお勧めします:wp_enqueue_style()wp_enqueue_script()関数を作成し、それらをマウントします。wp_enqueue_scriptsフックに掛けることで、依存関係が正しく保たれ、重複して読み込まれるのを防ぐことができます。

特定のページテンプレートを作成する

WordPressはテンプレートの階層システムに従っており、これにより現在閲覧しているページの種類に応じて最も適したテンプレートファイルが自動的に選ばれます。異なる種類のページ用に専用のテンプレートを作成することで、レイアウトやコンテンツの表示をより精密に制御することができます。

単一の記事用および独立したページ用のテンプレートを設計する

single.phpこのテンプレートは、単一の記事を表示するために使用されます。それは…index.phpループ処理は似ていますが、通常はカテゴリ、タグ、著者、公開日、コメントエリアなどのより完全なメタ情報が含まれます。

推薦図書 WordPressテーマ開発の完全ガイド:ゼロからカスタムテーマを構築する

page.phpテンプレートは、独立した静的なページを表示するために使用されます。通常、記事のメタデータ(カテゴリや公開日時など)は表示されません。ループ処理もよりシンプルであり、ページエディタで編集された内容の表示に重点を置いています。

記事リストおよびアーカイブページのテンプレートを作成する

archive.phpテンプレートは、カテゴリ、タグ、著者、日付などのアーカイブページを表示するために使用されます。通常、タイトル(例:「カテゴリ:テクノロジー」)と記事リストが含まれています。

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

home.phpまたはfront-page.phpブログのホームページをカスタマイズするために使用します。もしその機能が利用可能であれば…front-page.phpそれはサイトのホームページとして機能します。もし該当するものが存在する場合は…home.phpそれは記事の索引ページとして機能します。

カスタム検索機能と404ページの実装

search.php検索結果を表示するためのものです。ここでは自由にご利用いただけます。the_search_query()この関数は、ユーザーが入力した検索キーワードを出力するためのものです。

404.phpユーザーが存在しないアドレスにアクセスした場合に表示されます。良い404ページには、親切なメッセージ、検索ボックス、そして重要なページへのリンクが含まれているべきです。

統合された小ツールと動的なサイドバー

「小工具(Widgets)」とは、WordPressがユーザーに提供する機能で、最新記事一覧、カテゴリーリスト、検索ボックスなどのコンテンツブロックを柔軟に追加できるようにするものです。自分のテーマで小工具をサポートさせるには、まず1つまたは複数の「サイドバー」(実際には小工具を表示するための領域)を登録し、その後テンプレート内でそれらを表示する必要があります。

「小道具の登録が完了しました」エリア

利用するregister_sidebar()この関数を使ってサイドバーを登録できます。functions.php中には複数のサイドバーが定義されており、それぞれメインサイドバーやフッター領域などに使用されます。

function my_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; __( '在此添加主侧边栏的小工具。', 'my-first-theme' ),
            '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_theme_widgets_init' );

テンプレート内でサイドバーを呼び出す

登録後は、テンプレートファイル内でそれを使用する必要があります。dynamic_sidebar()このエリアのデータを出力するための関数を使用します。例えば、sidebar.php中,:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

そして、index.phpsingle.phpサイドバーが必要なテンプレートでは、以下の方法で使用してください:get_sidebar()関数の導入sidebar.phpユーザーは現在、WordPressの管理画面(バックエンド)にある「外観」→「ウィジェット」のページで、「メインサイドバー」に様々なウィジェットをドラッグ&ドロップして追加することができます。

概要

ゼロからWordPressのカスタムテーマを構築することは、体系的な学習プロセスです。まずは基本的なファイル構造を理解し、次にテンプレートのレベル、機能の拡張、そして動的なコンテンツエリアについて徐々に深く学んでいきます。最も重要なのは、これらの要素をしっかりとマスターすることです。style.cssindex.phpheader.phpfooter.phpfunctions.phpこれらの基石となるファイルの役割と書き方についてです。add_theme_support()機能を有効にすると、テンプレートの階層構造を利用して目的に応じたページテンプレートを作成することができます。その後、それらのテンプレートを使ってコンテンツを生成します。register_sidebar()統合された小ツールにより、機能が完備され、構造が明確なテーマの骨格が初めて形になります。これは単なる技術的な実装にとどまらず、WordPressのコンテンツ管理ロジックに対する深い理解の表れでもあります。

FAQ よくある質問

開発テーマを作成する前に、必ずサブテーマを使用しなければなりませんか?

必ずしもそうとは限りません。もしゼロから完全にオリジナルのテーマを作成する場合は、親テーマを直接作成することもできます。サブテーマを使用する最適なシナリオは、既存のテーマ(親テーマ)をカスタマイズしたい場合や、将来親テーマを安全に更新しても自分のカスタマイズ内容が失われないようにしたい場合です。ゼロから開発を学びながら親テーマを直接作成することで、全体のアーキテクチャをより理解しやすくなります。

なぜ私のテーマがバックエンドの「外観」設定で表示されないのでしょうか?

これは通常、以下のような理由によるものです:style.cssファイルの上部にあるトピック情報のコメントブロックの形式が正しくない、欠落している、または構文エラーがあるために問題が発生しています。ファイルの冒頭にあるコメントブロックが正しい形式で書かれているかをよく確認してください。特に、Theme Name:この行は必ず存在し、正しくなければなりません。また、テーマフォルダーが正しく配置されていることを確認してください。wp-content/themes/ディレクトリ内にあります。

functions.php とプラグインにはどのような違いがありますか?

functions.phpファイル内のコードはあなたのテーマと密接に関連しており、テーマを切り替えるとこれらの機能は通常動作しなくなります。これらのコードは、テーマの外観、レイアウト、テンプレート機能に直接関連するものを格納するのに適しています。一方、プラグインはテーマに依存しない、複数のテーマで使用できる機能を提供するためのものです。簡単なルールとしては、機能がウェブサイトの外観やレイアウトに影響を与える場合は、それをテーマ内に配置するということです。functions.php中;もし独立したビジネスロジック(連絡フォームやSEO最適化など)を追加する場合は、プラグインとして作成するべきです。

どうやって私のテーマを多言語に対応させることができるでしょうか?

テーマを多言語に対応させる(国際化およびローカライゼーション)には主に2つのステップが関わります。まず、style.cssのコメントブロックとfunctions.php中所有需要翻译的字符串处,使用像__( ‘文本’, ‘my-first-theme’ )このような翻訳機能をラップ(つまり、別のコードやクラスなどに組み込む)するには、以下のような方法があります:‘my-first-theme’それはあなたのテキストドメインです。次に、Poeditのようなツールを使用して、テーマファイルをスキャンし、生成する必要があります。.potテンプレートファイルを用意し、各言語に対応するファイルを作成してください。.po.mo翻訳したファイルを、該当するトピックの場所に置いてください。/languages/ディレクトリ内にあります。