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

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

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

準備作業と環境設定

コードの執筆を始める前に、安定したプロフェッショナルなローカル開発環境が必要です。オンラインサーバー上で直接テーマファイルを編集することは強くお勧めしません。ローカル開発環境を使用すれば、ウェブサイトの正常なアクセスに影響を与えることなく自由にテストを行うことができます。XAMPP、MAMP（Mac用）、Laragon（Windows用）などの統合開発環境ソフトウェアを選択するとよいでしょう。これらのソフトウェアを使用すると、Apache、MySQL、PHPをワンクリックでインストールおよび設定することができます。

WordPress自体もローカル環境にインストールする必要があります。WordPressの公式ウェブサイトにアクセスして最新のインストールパッケージをダウンロードし、ローカルサーバーのウェブサイトのルートディレクトリ（例えばXAMPPの場合）に解凍してください。 htdocs フォルダを作成した後、ブラウザを使用して有名な「5分間のインストール」を行ってください。インストール中は、設定したデータ情報を忘れないでください。

最後に、使いやすいコードエディタや統合開発環境（IDE）が必要です。Visual Studio Code、PhpStorm、Sublime Textなどはどれも優れた選択肢であり、構文のハイライト表示、コードヒント、ファイル管理機能などを提供して開発効率を大幅に向上させてくれます。

推薦図書 WordPressのテーマ開発を段階的にマスターしましょう：ゼロからカスタムテーマを構築する方法。

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

WordPress テーマは本質的に、次の場所にある /wp-content/themes/ ディレクトリ内にあるフォルダには、特定のルールに従って作成された一連のファイルやディレクトリが含まれています。これらのファイルが協力して、WordPressにウェブサイトの外観や内容の表示方法を指示します。

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ

その最も核心的なメカニズムは「テンプレートの階層構造」です。WordPressは、現在アクセスしているページの種類に応じて、自動的に適切なテンプレートファイルを選択してコンテンツを表示します。例えば、ブログ記事にアクセスした場合、WordPressはまず該当するテンプレートを探します。 single.phpブログのホームページにアクセスすると、以下の内容が探されます： home.php または index.phpこの仕組みにより、テーマに非常に高い柔軟性がもたらされています。

各トピックには、2つの基本ファイルを含める必要があります：style.css と index.php。style.css このファイルの役割は、スタイルを提供するだけでなく、ファイルのヘッダー部分にあるコメントブロックがテーマの「身分証明書」のようなものであり、WordPressにテーマの名前、作者、説明などのメタ情報を伝えるために使用されます。index.php これは最後のセーフティネットとなるもので、より具体的なテンプレートファイルが存在しない場合にWordPressが使用するテンプレートです。

典型的なテーマヘッダーのコメントは以下のようになります：

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain 国際化のために使用されるもので、後続で翻訳関数を呼び出す際に使用される識別子です。

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

これら2つのファイルに加えて、機能が完全なテーマには通常、以下のものが含まれます：header.php（ウェブページのヘッダー部分）footer.php（ウェブページの下部）sidebar.php（サイドバー）および functions.php（テーマ機能強化ファイル）この基本構造を理解することで、テーマ開発の骨組みを把握することができます。

コアテンプレートファイルを作成します。

では、最初のテーマの作成を始めましょう。あなたの… /wp-content/themes/ ディレクトリ内に新しいフォルダを作成し、例えば「example_folder」という名前にします。 my-first-themeその後、そのフォルダ内に最も基本的なファイルを作成してください。

まずは作成しましょう。 style.cssそして、前の部分で述べたトピックヘッダーの注釈を追加してください。次に、作成を進めましょう。 index.phpこれがあなたの最初のテンプレートファイルです。非常にシンプルなものです。 index.php 記事のタイトルと内容のみを含むループを実行することができます。

hosting.com 共有ホスティング
AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減
ホスティング・ドットコムのロゴ アクセスページ 
<?php get_header(); ?>
<main>
    
    
      <article>
        <h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
        <div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
      </article>
    
    <p>現在のところ、表示する内容はありません。</p>
  endif; 終わり
</main>

このコードではテンプレートタグが使用されています。 get_header(), get_sidebar(), get_footer(), the_title() と the_content()それを動作させるためには、対応するヘッダー、サイドバー、およびフッターのファイルを作成する必要があります。

作成 header.phpそれには、HTMLドキュメントの開始部分から、メインコンテンツエリアが始まるまでの部分が含まれている必要があります。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body no numeric noise key 1004>
  <header>
    <h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></h1>
    <p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?&gt;</p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

ここでは、wp_head() これは非常に重要な機能であり、WordPressのコア、プラグイン、テーマがページのヘッダーに必要なコード（例えばスタイルシートのリンクなど）を挿入することを可能にします。body_class() この関数は、一連の意味的に明確なCSSクラス名を出力します。これにより、より詳細なスタイル設定を行うことができます。

推薦図書 WordPressのコアアーキテクチャと動作原理。

作成 footer.php 開いているタブを閉じるには：

  <footer>
    <p>©</p>
    
  </footer>
</body>
</html>

注意してください。wp_footer() それは「と」です。 wp_head() 相対的な尾部フックもまた、欠かせないものです。

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

作成 sidebar.phpとりあえずは、シンプルなコントロールの呼び出しを1つだけ行うことができます：

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

この時点で、あなたのテーマには基本的な「テンプレート機能」が備わっており、バックエンドで有効にしたりプレビューしたりすることができます。まだ簡素ですが、WordPressのコアアーキテクチャに準拠しています。

Functions.phpを使用してテーマの機能を拡張する

functions.php このファイルは、あなたのテーマの「コントロールセンター」のようなものです。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルであり、機能の追加やコンポーネントの登録、WordPressの各APIへのハッキング（連携処理）などが行われます。これがテーマを専門的にカスタマイズするための鍵となります。

このファイルをテーマのルートディレクトリに作成する必要があります。まず、テーマにスタイルシートとスクリプトファイルを追加しましょう。正しい方法は、WordPressが提供する関数を使用してこれらのファイルを追加することであり、HTML内に直接記述するのではありません。 <link> タグ。

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

ここでは、wp_enqueue_style() と wp_enqueue_script() これは、リソースを安全に追加するための関数です。get_stylesheet_uri() テーマに関連する style.css。add_action() 私たちの関数をマウントしてください。 wp_enqueue_scripts このフックについては、正しいタイミングで実行されるようにしてください。

次に、ナビゲーションメニューとサイドバー（ツールバー領域）を登録します：

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() バックエンドの「外観」→「メニュー」インターフェースに、選択可能なメニュー項目が表示されるようにしてください。add_theme_support() この関数は、さまざまなテーマ機能を有効にするために使用されます。これは、現代のテーマ開発における標準的な手法です。例えば、ある機能を有効にするには… title-tag その後、あなたはもうそれをする必要はありません。 header.php 中手動出力 <title> タグ付けしました。

最後に、サイドバーのツールエリアを登録してください：

関数 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' );

これで、あなたのテーマは基本的な表示から機能の強化に至るまでの完全なプロセスを備えるようになりました。バックエンドでの設定メニューやツールの追加を通じて、テーマの動的な変化を確認することができます。

概要

「から作成するまでのプロセスについて説明します。」 style.css と index.php そのフォルダーから始めて、分離されたテンプレートコンポーネントを構築していきます。header.php, footer.phpそれから、強力な機能を通じて… functions.php ファイルの登録メニューやサイドバーの設定、そしてリソースの安全な読み込みまで——これであなたはカスタムWordPressテーマを作成するための基本的な手順をすべて完了しました。このプロセスの鍵は、WordPressのテンプレート階層とフックシステムを理解し、それに従うことにあります。

あなたはもはや単なるテーマの使用者ではなく、その創造者になりました。これらの基礎知識を身につけた後、より複雑なテンプレートファイルについてさらに深く学ぶことができます。 single.php、page.php、archive.phpWordPressのループ機能のさらなる可能性を探求し、条件タグ（例えば`if`や`else if`など）を活用してください。 is_page(), is_single()より精密なページ制御を実現するための方法です。テーマ開発の世界は広大で魅力的ですが、これはあくまで堅固な出発点に過ぎません。

FAQ よくある質問

WordPressのテーマを開発するには、PHPに精通している必要がありますか？

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

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

これら2つの関数はWordPressのコアフックです。wp_head() 位置は </head> タグの前にこの領域があることで、WordPressのコア、プラグイン、そしてあなたが作成したテーマが、ページのヘッダー部分に必要なコードを挿入することができます。例えば、CSSスタイルシートのリンク、メタタグ、JavaScript変数などです。wp_footer() 位置は </body> タグの前には、分析コードや遅延読み込みされるJavaScriptファイルを挿入するためによく使用されます。これらが欠けていると、多くのプラグインが正常に動作しなくなるだけでなく、WordPress自体の一部の機能にも異常が発生することがあります。

自分のテーマにページテンプレートをどのように追加するか？

新しいPHPファイルを作成します。例えば、`new_file.php`という名前にします。 page-fullwidth.phpこのファイルの冒頭に、特定のテンプレート名に関するコメントブロックを追加する必要があります。例えば：

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

その後、このファイル内に他とは異なる内容を記述することができます。 page.php HTML構造についてですが、例えば省略するということですか？ get_sidebar() 保存設定後、WordPressの管理画面でページを編集する際に、「ページ属性」の「テンプレート」ドロップダウンリストから「全幅ページ」というオプションが選択できるようになります。

テーマ開発において、CSSとJavaScriptをどのように扱うかがベストプラクティスなのでしょうか？

ベストプラクティスとしては、WordPressが提供している機能やツールを使用することです。 wp_enqueue_style() と wp_enqueue_script() 関数ですね。 functions.php （The item is mounted to…） wp_enqueue_scripts 钩子来添加资源。这种方式可以：1）正确处理依赖关系（例如你的脚本依赖 jQuery）；2）避免重复加载同一资源；3）方便插件和其他主题代码进行管理；4）符合 WordPress 编码标准。绝对要避免直接在模板文件中使用 <link> または <script> タグによるリソースのハードコーディング。

私のテーマでは、どのようにして多言語サポート（国際化）を実現するのでしょうか？

あなたには2つのことを行う必要があります。まず、 style.css ヘッダーのコメントや呼び出しの翻訳テキストを行う際には、正しい「テキストドメイン（Text Domain）」を使用してください。ガイドラインに示されているように、定義を行ってください。 Text Domain: my-first-theme次に、 functions.php すべてのテンプレートファイルにおいて、翻訳が必要なすべてのユーザーインターフェーステキストにはWordPressの翻訳機能を使用してラップする必要があります。最も一般的に使用される方法は… __()（和） _e()（直接显示翻译后的字符串。例如：）<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>その後、Poeditなどのツールを使用して生成することができます。 .pot テンプレートファイルは、翻訳者が異なる言語のテキストを作成するために使用されます。 .po と .mo ファイル。

次はどうする？

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

拡大読書と実践的知識

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

タグ: