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

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

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

準備作業と環境設定

コードの作成を始める前に、適切な開発環境を準備する必要があります。これには、ローカルサーバー環境（XAMPP、MAMP、またはLocal by Flywheelなど）、コードエディタ（VS CodeやPhpStormなど）、そして新しくインストールしたWordPressが含まれます。WordPressは最新バージョンであることを確認してください。そうすることで、最新の機能やAPIを利用できます。

次に、WordPress内で…wp-content/themesディレクトリ内に新しいフォルダを作成します。このフォルダの名前は、あなたのテーマの「スラッグ（slug）」と同じになります。例えば：my-first-themeこのフォルダーは、すべてのテーマ関連ファイルが保管される場所になります。WordPressのテーマには、基本的に2つのファイルしかありません。index.phpとstyle.cssその中で、style.cssスタイルシートだけでなく、テーマのメタデータを含む「ヘッダーファイル」でもあります。そのコメント情報は、WordPressがあなたのテーマを正しく認識するために非常に重要です。

「Create a basic…」style.cssファイルのヘッダーには、以下の情報を含めたコメントを記述する必要があります：

推薦図書 完璧なWordPressテーマを作成する：ゼロからマスターするための完全な開発ガイド。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text Domain国際化のために使用され、テーマフォルダの名前と一致している必要があります。また、最もシンプルなものを作成してください。index.phpファイルには、ただ一言だけを含めてください。<?php get_header(); ?>そしてある人と。<h1>こんにちは、World！</h1>この時点で、WordPressの管理画面（バックエンド）の「外観」→「テーマ」に行くと、自分が選んだテーマを確認し、それを有効にすることができるはずです。ただし、現時点では何も表示されないでしょう（まだテーマを実際に設定していないからです）。header.phpそれはあなたが第一歩を成功裏に踏み出したことを意味します。

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

「コアテンプレートファイルとテンプレートの階層構造を理解する」という意味です。

WordPressでは、「テンプレート階層（Template Hierarchy）」と呼ばれるインテリジェントなシステムを使用して、特定のページリクエストに対してどのテンプレートファイルを使用してコンテンツを表示するかを決定します。この階層構造を理解することは、テーマ開発の核心です。システムは最も具体的なテンプレートファイルから検索を開始し、そのファイルが存在しない場合はより一般的なテンプレートファイルに切り替えます。

最も基本的なテンプレートファイルには以下が含まれます：
* index.phpこれが最終的なデフォルトテンプレートです。より具体的なテンプレートが見つからない場合は、すべてのリクエストにこのテンプレートが使用されます。
* header.phpドキュメントを含む<head>一部のコンテンツやウェブサイトのヘッダー領域です。get_header()関数の導入。
* footer.phpウェブサイトのフッター領域を含んでいます。get_footer()関数の導入。
* sidebar.phpサイドバーコンポーネントを含んでいます。get_sidebar()関数の導入。
* functions.phpこれはテンプレートファイルではなく、あなたのテーマ用の「機能ライブラリ」です。機能の追加やメニューの登録、ツールバーの設定などに使用されます。

異なるタイプのページには、より具体的なテンプレートが用意されています。
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php（カスタムテンプレート）-> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php（ブログ記事一覧ページ用）-> front-page.php（静的ページをホームページに設定する際に使用される「ホームページ」）-> index.php。

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

まずは作成しましょう。header.phpそれは必ず……<!DOCTYPE html>開始し、WordPressの重要な関数呼び出しを含めます。例えば：wp_head()。

推薦図書 カスタマイズされた高度なWordPressテーマの作成：デザイン、開発から最適化までの実践ガイド。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/ja/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

同様に、作成します。footer.phpそして、呼び出しが正しく行われるようにしてください。wp_footer()関数。

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

現在、あなたは自分のものを更新することができます。index.phpこれらのテンプレートコンポーネントを使用してください。

<?php get_header(); ?>

<main>
    <h1>「Main」からの「Hello World」です！</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

functions.phpを通じてテーマの機能を拡張する

functions.phpファイルとは、あなたのテーマの「脳」のようなものです。ここに機能を追加したり、WordPressのコアコンポーネント（メニューやツールバーなど）を登録したり、スタイルシートやスクリプトファイルを配置したりします。

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

トピックのサポート機能と登録用のナビゲーションメニューを追加します。

まず、いくつかの基本的なテーマ機能を有効にしましょう。使用方法は以下の通りです：add_theme_support()関数を使用して、トピックがサポートする機能を宣言します。

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

次に、ナビゲーションメニューの位置を登録します。これにより、ユーザーはバックエンドの「外観」→「メニュー」でメニューを設定し、テンプレート内でそれを使用することができるようになります。wp_nav_menu()関数がそれを呼び出します。

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

スタイルシートおよびスクリプトに組み込む

正しいスタイルとスクリプトの読み込み方法は、以下の通りです：wp_enqueue_style()とwp_enqueue_script()関数を、それらをマウントするようにします。wp_enqueue_scriptsフックに。

推薦図書 WordPressテーマ開発の徹底解説：入門から上級者までの実践ガイド。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

ループとコンテンツテンプレートを作成する

“「循環（Loop）」とは、WordPressにおいてデータベースから記事を取得し表示するために使用されるPHPコードの構造です。これはほぼすべてのテンプレートファイルの中核をなす部分です。

メインループの構造を理解する

上記のindex.php例では、基本的なループの構造を見てきました。それを詳しく分解してみましょう：

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                あなたのコメントは受け付けられました。ありがとうございます。
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
endif; 終わり

単一記事のテンプレートを構築する

では、単一の記事を表示するための専用テンプレートを作成しましょう。single.phpリストページのループ処理よりも詳細な情報が表示されています。

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

概要

このガイドを通じて、ゼロから基本的なWordPressテーマを構築するための核心的なステップをすべて完了しました。開発環境の構築や基本ファイルの作成から始め、WordPressのテンプレート階層システムについて理解するまで段階的に進んできました。このシステムは、柔軟なテーマを構築するための基盤となります。また、再利用可能なコードの作成方法も学びました。header.phpとfooter.phpテンプレートコンポーネントを使用し、強力な機能によって…functions.phpこのファイルにより、あなたのテーマにナビゲーションメニューやスタイルの読み込みといった重要な機能が追加されました。最後に、WordPressの「ループ」メカニズムについて学び、記事一覧や個々の記事を表示するためのテンプレートを作成しました。

これはあくまで出発点に過ぎません。次に、より多くの特定のテンプレートを作成する方法を探求することができます（例えば……）。page.php, archive.php登録用の小ツールエリアにカスタムの記事タイプや分類方法を追加し、より高度なレスポンシブデザインやJavaScriptによるインタラクションを実現しましょう。公式の開発者ドキュメントを参考にし、継続的に実践することがスキル向上の最良の方法です。

FAQ よくある質問

私のテーマを有効にした後、ウェブサイトが真っ白な画面になってしまいます。どうすればいいでしょうか？

これは通常、PHPの致命的なエラーによって引き起こされます。まずはご自身のコードを確認してください。functions.phpファイルには構文エラーがないでしょうか？例えば、セミコロンや括弧が欠けているような場合です。WordPressの設定ファイルを開いて確認してください。WP_DEBUGこのモードを使用すると、具体的なエラー情報を確認することができます。wp-config.phpファイルの中で、define('WP_DEBUG', false);に変えるdefine('WP_DEBUG', true);。

私のテーマにカスタムロゴ機能を追加するにはどうすればよいですか？

あなたのfunctions.phpファイルのadd_theme_support「一部の内容については、新たに一行を追加する必要があります。」add_theme_support('custom-logo');Logoのサイズや高さの可変性などを定義するために、配列パラメータを渡すこともできます。その後、ユーザーは「外観」→「カスタマイズ」→「サイトアイデンティティ」でLogoをアップロードし、テンプレート内で使用することができます。the_custom_logo();関数がそれを呼び出します。

なぜ私が登録したナビゲーションメニューがバックエンドで表示されないのでしょうか？

以下の点を確認してください：第一に、ご自身の登録コードが有効であることを確認してください。functions.phpそして、すでに正しくマウントされています。initフックまたはafter_setup_themeフックの上に。第二に、あなたが定義したものを確認してください。theme_location(例'primary'）呼び出し中wp_nav_menu()時刻と完全に一致しています。第三に、メニューを作成した後、バックエンドの「外観」->「メニュー」->「管理位置」タブで、作成したメニューを登録した場所に割り当てる必要があります。

如何创建一个小工具区域（侧边栏）？

まず、functions.phpここで使用されているのはregister_sidebar()この関数は、小さなツール領域を登録するためのものです。ID、名称、説明などを定義するための配列パラメータを提供する必要があります。その後、サイドバーを表示したいテンプレートファイル（例えば…）内でこの関数を使用します。sidebar.php）中で使用するdynamic_sidebar()関数を呼び出す際には、そのツールのIDを引数として渡します。最後に、index.phpまたはsingle.phpこれらのテンプレートの中で使用されています。<?php get_sidebar(); ?>サイドバーのテンプレートを導入します。

次はどうする？

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

拡大読書と実践的知識

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

タグ: