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

WordPressテーマ開発入門：ステップバイステップであなたの最初のカスタムテーマを作成する

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

準備作業と環境設定

最初のコード行を書き始める前に、適切な開発環境が必要です。これにはローカルサーバー環境とコードエディタが含まれます。XAMPP、MAMP、Laragonなどを使用してローカルサーバーを構築することをお勧めします。これらはApache、MySQL、PHPをワンクリックでインストールして実行できます。お好みのコードエディタを選んでください。例えばVisual Studio Code、Sublime Text、PHPStormなどです。これらのエディタはコードのハイライト表示や自動補完機能に優れており、開発効率を大幅に向上させてくれます。

次に、ローカルのWordPressインストール内で新しいテーマ用のディレクトリを作成する必要があります。すべてのWordPressテーマは、特定のディレクトリ内に保存されています。 /wp-content/themes/ ディレクトリ内にあります。このフォルダ内で、これから作成するトピック用に新しいフォルダを作成してください。例えば、「example-topic」という名前にしても構いません。 my-first-themeこのフォルダの名前があなたのテーマの識別子となり、バックエンドのテーマリストに表示されます。

同時に、WordPressのテーマ開発における2つの重要な要素を理解する必要があります。それはテンプレートファイルとスタイルシートファイルです。最も基本的なWordPressテーマでは、たった2つのファイルだけが必要です。style.css と index.php。style.css ウェブサイトの視覚的なスタイルを制御するだけでなく、ファイルのヘッダー部分にあるコメントブロックは、そのテーマの「身分証明書」のようなものです。ここにはテーマの名前、作者、説明などのメタ情報が含まれています。index.php これがデフォルトのメインテンプレートファイルです。

推薦図書 WordPressテーマ開発完全ガイド：ゼロから始めるカスタムテーマ構築。

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

トピックのスタイルと情報を定義する

すべてはここから始まる。 style.css はじめます。テーマフォルダのルートディレクトリにこのファイルを作成し、ファイルの冒頭にフォーマットされたコメントブロックを追加してください。このコメントブロックは、WordPressがテーマを認識し読み込むための鍵となります。以下のコードは、基本的なスタイルシートのヘッダーの例です：

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

その中で、Text Domain これは国際化（i18n）のためのもので、将来的な多言語翻訳に備えるためのファイルです。このファイルを作成した後、WordPressの管理画面にログインし、「外観」→「テーマ」のページにアクセスすると、あなたのテーマが表示されるはずです。ただし、現時点ではまだ何の機能もありません。

基本テンプレート構造の構築

次に、トピックのスケルトンファイルを作成します。 index.phpこれは最も基本的なテンプレートであり、WordPressがより具体的なテンプレートファイル（例えば…）を見つけられない場合に使用されます。 single.php または page.phpその時には、それを使用します。最もシンプルな例として… index.php WordPressのヘッダー部分、ループ処理、およびフッター部分を呼び出すための基本的な関数のみを含めることができます。

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

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

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

このファイルでは、WordPressのコアテンプレートタグが使用されています。 bloginfo() ウェブサイトの情報を取得する。the_title() と the_content() ループ内で記事のタイトルと内容を出力します。wp_head() と wp_footer() これらは非常に重要なフックであり、WordPressのコア、プラグイン、その他のスクリプトがページにアクセスしたり操作を行ったりすることを可能にします。 <head> と <footer> リージョン注入コード（Region-based code injection）。

テンプレートの分割と機能の導入

モジュール化されたテンプレートファイル

「将」 index.php すべてのコードを1つのファイルに書くと、コードのメンテナンスが困難になります。ベストプラクティスとしては、コードを複数のテンプレートパーツ（Template Parts）に分割することです。以下のファイルを作成して、コードの構造を整理してください：
* header.php：保管 <head> 地域情報やウェブサイトのトップナビゲーションなど、共通のヘッダーコンテンツです。
* footer.phpウェブサイトの下部に著作権情報などの共通的なテールコンテンツを格納するための領域です。
* sidebar.phpサイドバーの小道具を保存するためのエリア（オプション）。
* functions.php：テーマの機能関数ファイル。

推薦図書 ゼロから始めましょう：WordPressのカスタムテーマを開発する方法を手取り足取り教えます。。

そして、使用してください。 get_header()、get_footer() と get_sidebar() などの関数は… index.php それらを導入します。改造後の… index.php 核心部分は非常にシンプルになります：

<?php get_header(); ?>

<main>
    備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    終わりました。ありがとうございました。
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    endif; 終わり
</main>

ご注意ください。私たちは以下の方法を使用しています： esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) これは国際化の標準的な手法です。

トピック機能の強化

functions.php このファイルは、あなたのテーマの「コントロールセンター」のようなものです。このファイルを使用して、テーマにサポートされる機能を追加したり、メニューやサイドバーを設定したり、スタイルシートやスクリプトを読み込んだりします。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれます。

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

以下は基本的な内容です。 functions.php 例

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 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' );

// 注册侧边栏小工具区域
function my_first_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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

このファイルでは、関数を定義しています。 my_first_theme_setupそして、以下の方法で… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) それをWordPressの初期化テーマの特定のアクションフックにマウントします。同様に、私たちは… register_sidebar この関数は、小さなツール領域を登録し、それを通じて… wp_enqueue_style 関数によってテーマのスタイルシートが正しく読み込まれました。

専用のテンプレートとスタイルを作成する

異なるページタイプに合わせてテンプレートをカスタマイズする

WordPressのテンプレート階層構造により、異なるタイプのページ用に特定のテンプレートファイルを作成することができます。例えば：
* front-page.php静的なホームページとして使用されます。
* home.php：ブログ記事一覧ページ。
* single.php：単一記事の詳細ページ。
* page.php：1ページのみ。
* archive.php分類、タグ、著者などのアーカイブページ。
* search.php：検索結果ページ。
* 404.php404エラーページです。

推薦図書 WordPressテーマ開発入門実践ガイド：ゼロからカスタムテーマのアーキテクチャとテンプレートを構築する。

作成 page.php すべてのページの外観を独立して制御でき、記事ページには影響しません。その構造は… index.php 似ていますが、通常は記事の公開元データ（日付や著者など）を表示する必要はありません。

レスポンシブなレイアウトとインタラクションのデザイン

現代のWordPressテーマはレスポンシブでなければなりません。つまり、CSSはスマートフォンからデスクトップまでのあらゆる画面サイズに対応する必要があります。モバイルファースト（Mobile First）のCSS戦略を採用することをお勧めします。これは、まず小さな画面向けに基本スタイルを作成し、その後メディアクエリ（Media Queries）を使用して大きな画面向けに追加のスタイルを適用する方法です。

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

また、あなたのテーマではインタラクティブな機能（ドロップダウンメニューやスライドショーなど）を実現するためにJavaScriptが必要になるかもしれません。正しい方法は、 functions.php ここで使用されているのは wp_enqueue_script() この関数は、スクリプトの登録やキューイングを行い、（jQueryなどの）依存関係が正しく宣言されていることを確認します。これにより、スクリプトの競合や重複読み込みを防ぎ、WordPressのスクリプト最適化機能との互換性を保つことができます。

概要

上記の手順を通じて、最も基本的で実行可能なWordPressカスタムテーマを完成させました。テーマ情報を定義する方法も学びました。 style.css基本的な構築 index.php テンプレートをモジュール化されたコンポーネントに分割すること、そして… functions.php テーマ機能を強化しました。また、WordPressの強力なテンプレート階層構造についても理解しました。これにより、より複雑な専用テンプレートページの作成が可能になります。

テーマ開発は、継続的に反復され、深められていくプロセスです。次に、サブテーマ（Child Theme）の開発を探求することで、既存のテーマを安全に修正することができます。WordPressのカスタマイザー（Customizer）APIを使えば、ユーザーはバックエンドからリアルタイムでテーマ設定を調整できるようになります。また、WordPressのREST APIを深く研究することで、フロントエンドフレームワークと連携したテーマを作成することも可能です。公式の開発者ドキュメントに常に注目し、コミュニティに積極的に参加することが、スキルを継続的に向上させるための鍵となります。

FAQ よくある質問

WordPressのテーマを開発するには、PHPに精通していなければならないのでしょうか？

はい、しっかりとしたPHPの基礎を持っていることは、WordPressのテーマ開発にとって必要不可欠です。WordPress自体がPHPで書かれているため、すべてのテンプレートファイル（例えば…） index.php、single.php）および機能ファイル（functions.phpこれらすべてにおいて、PHPコードを使用してコンテンツを動的に生成し、WordPressの関数を呼び出し、データを操作する必要があります。

また、HTMLとCSSに精通していて、ページの構造とスタイルを作成できることが求められます。さらに、JavaScript（特にWordPressのコアに組み込まれているjQuery）についても基本的な知識が必要であり、インタラクティブな機能を追加するために使用します。

なぜWordPressの管理画面でテーマの変更が反映されないのでしょうか？

これは通常、ブラウザやサーバーのキャッシュによって引き起こされます。まず、ブラウザ内で以下の操作を試してください： Ctrl + F5（Windows/Linux）または Cmd + Shift + R（Mac）強制更新を行い、ブラウザのキャッシュを削除します。

問題が解決しない場合は、サーバー側またはWordPressのキャッシュプラグイン（W3 Total Cache、WP Super Cacheなど）が古いファイルをキャッシュしている可能性があります。すべてのキャッシュプラグインのキャッシュを削除してみてください。開発段階では、干渉を避けるためにこれらのキャッシュプラグインを一時的に無効にすることをお勧めします。

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

テーマが多言語をサポートする（国際化およびローカライゼーション、i18nおよびl10n）には、WordPressの翻訳関数を活用することが不可欠です。テーマ内では、ユーザーに表示されるすべてのテキスト文字列を直接記述するのではなく、翻訳関数を使用して処理する必要があります。

例えば、使うことで (‘文本’， ‘my-first-theme’) 「进行翻译，或使用」 echo esc_html(‘文本’， ‘my-first-theme’) 「出力とエスケープを行う必要があります。」 style.css のヘッダー部分と load_theme_textdomain() 関数呼び出し時に正しく設定すること Text Domain（テキストエリアに入力した後）、Poeditのようなツールを使用して作成します。 .pot 翻訳テンプレートと .po/.mo 言語ファイル。

テーマの `functions.php` とプラグインの機能にはどのような違いがありますか？

functions.php ファイル内のコードの機能はプラグインのコードの機能と似ており、どちらもWordPressを拡張するために使用できます。主な違いは、その作用域（scope）と用途です。

functions.php この機能は現在のテーマと密接に関連しています。ユーザーがテーマを切り替えると、これらの機能は通常利用できなくなります。この機能は、テーマの視覚的表現やレイアウト、テンプレートに直接関連する機能（例えば、登録フォームの配置やテーマサポートオプションの追加）を追加するのに適しています。

プラグインが提供する機能はテーマから独立しており、どのテーマを使用しても、プラグインが有効になっていればその機能は利用できます。これは、テーマの外観とは関係のない汎用的な機能（連絡フォーム、SEO最適化、電子商取引機能など）を追加するのに適しています。もし何らかの機能がテーマを変更しても引き続き必要とされる場合は、その機能をプラグインとして実装するべきです。

次はどうする？

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

拡大読書と実践的知識

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

タグ: