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

WordPressテーマ開発入門：ゼロから始めて、あなたの最初のテーマを作成しましょう

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

準備作業と環境設定

どんなコードも書き始める前に、適切な開発環境が必要です。これには、ローカルサーバー環境（XAMPP、Local by Flywheel、MAMPなど）とコードエディタ（VS Code、Sublime Text、PHPStormなど）が含まれます。ローカル環境にPHP、MySQL、Apache/Nginxがインストールされていることを確認してください。

次に、ローカルサーバー上で…wp-content/themes/ディレクトリ内に新しいフォルダを作成してください。このフォルダの名前は、あなたのテーマ名にします。例えば：my-first-themeこれが、すべてのテーマファイルが保管されている「家」です。

最も基本的なWordPressテーマには、たった2つのファイルしか必要ありません。style.cssとindex.phpその中で、style.cssスタイルシートだけでなく、あるテーマの「身分証明書」のようなものでもあります。その上部にあるコメントブロックには、そのテーマに関するメタ情報が含まれています。まずはこのファイルを作成しましょう。

推薦図書 WordPressテーマ開発をゼロから学ぶ：パーソナライズされたウェブサイトを作成するための完全ガイド。

テーマのヘッダーファイルを作成する。

style.cssファイルの上部にあるコメントブロックは、WordPressがテーマを認識するための鍵となります。ご自身のテーマフォルダ内にそのコメントブロックを作成してください。style.cssそして、以下の内容を書き込んでください：

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://example.com/
Description: 一个用于学习WordPress主题开发的简单入门主题。
Version: 1.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
*/

これらの情報は、WordPressの管理画面（バックエンド）の「外観」→「テーマ」ページに表示されます。Text Domain国際化のために使用されるもので、後から翻訳ファイルを読み込む際の重要な識別子です。

基本インデックステンプレートの作成

次に、トピックのコアファイルを作成します。index.phpたとえこのファイルに現時点で一行のコードしか含まれていなくても、WordPressはそれを認識し、あなたのテーマを有効にすることができます。

<?php get_header(); ?>
<h1>こんにちは、WordPress Theme Worldの皆さん！</h1>
<?php get_footer(); ?>

get_header()とget_footer()これらはWordPressのテンプレート関数であり、`{{var}}`という名前のファイルを読み込もうとします。header.phpとfooter.phpこれらのファイルについてですが、まだ作成していませんが、標準的な手順としてはこのように記述するのが適切です。次に、WordPressの管理画面にログインし、「外観」→「テーマ」で「My First Theme」を見つけて有効にしてください。ウェブサイトのホームページを更新すると、「Hello, WordPress Theme World!」というメッセージが表示されるはずです。

テンプレートの階層構造を理解し、コアファイルを作成する方法

WordPressでは、「テンプレート階層（Template Hierarchy）」と呼ばれるルールセットを使用して、ホームページ、記事ページ、カテゴリページなど、さまざまなページリクエストに対してどのテンプレートファイルを使用してコンテンツを表示するかを決定します。この仕組みを理解することは、効率的にテーマ（Theme）を開発するための基本です。

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

最も一般的なテンプレートはindex.phpそれはすべてのページの最終的な代替案です。しかし、異なるページの外観をより細かく制御するためには、より具体的なテンプレートファイルを作成する必要があります。まず、最も基本的で重要な3つのファイルを作成しましょう：header.php、footer.phpとfunctions.php。

ウェブサイトのヘッダーテンプレートを構築する

header.php文件通常包含HTML文档的头部（<head>ウェブサイトのトップ部分にある公共エリア、例えばロゴやナビゲーションメニューなども含めて、それらを作成します。header.phpファイル：

<!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 id="site-header">
        <div class="container">
            <h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></h1>
            <p>ブログの説明文を表示するには？php bloginfo( 'description' ); ?&gt;</p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

ここにいくつかの重要な関数があります：wp_head()フックにより、WordPressのコア、プラグイン、テーマがそれぞれ独自に処理を行うことが可能になります。<head>必要なコード（スタイルシートのリンクなど）を該当するエリアに挿入してください。body_class()一連のCSSクラス名が出力されるので、異なるページに応じてスタイルを制御するのに便利です。wp_nav_menu()ナビゲーションメニューを表示するために使用されます。

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

ウェブサイトの下部テンプレートを構築する

footer.phpファイルには通常、ウェブサイトの共通な下部領域（著作権情報など）が含まれており、そこでファイルは閉じられます。header.php開いているタグを閉じます。footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All Rights Reserved.</p>
        </div>
    </footer>
    
</body>
</html>

wp_footer()そしてwp_head()同様に、これは重要なフック（hook）であり、以下の処理を実行するために使用されます：</body>タグの前にスクリプトやコードを挿入します。

さて、あなたの話に戻りましょう。index.phpそれを、私たちが新しく作成したヘッダーとフッターのファイルを使用するように更新してください。

推薦図書 SEOに優しいWordPressテーマを選択し、カスタマイズする方法。

<article>
        <h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
        <div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
    </article>
終わりました。ありがとうございました。
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

このコードはWordPressのテーマにおける「The Loop」と呼ばれる核心的な処理ループを構成しています。このループは、現在表示されているページに記事が存在するかどうかを確認し、その後、各記事のタイトルと内容を順に出力します。

関数ファイルを利用してテーマ機能を強化する

functions.phpこれはあなたのテーマの「コントロールセンター」です。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルです。ここにはテーマのサポート機能の追加、メニュー項目の登録、キュー用のスタイルシートやスクリプトなどを記述することができます。functions.php：

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

この関数ファイルはいくつか重要なことを行っています：1)add_theme_support()启用了现代WordPress主题常用的功能；2) 通过register_nav_menus()レストランの情報を登録しました。これで、以前に…header.php内部で呼び出された（functionやmethodなど）primaryメニューはバックエンドの「外観」→「メニュー」で割り当てることができます。3) を使用してください。wp_enqueue_style()この関数は、セキュリティに配慮した方法でスタイルシートをキューに正しく追加しています。

独立記事テンプレートを作成する

単一の記事をより良く表示するために、専用のテンプレートファイルを作成することができます。single.phpテンプレートの階層に基づき、個別の記事にアクセスした際には、WordPressは優先的に以下の処理を行います：single.php…ではなくindex.php。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        あなたのウェブサイトのページにこのコードを追加すると、タイトルが自動的に<h1>として表示されます。
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        endif; 終わり
    </header>
    <div class="entry-content">
        あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
    </div>
</article>

<?php get_footer(); ?>

このテンプレートでは、記事の情報がより詳細に表示されています。例えば、公開日や特徴的な画像（設定されている場合）などです。post_class()この関数は、記事の種類に応じたCSSクラスを出力します。

基本スタイルとレスポンシブデザインを追加する

現在、あなたのテーマには骨格と基本的な機能が備わっています。次に、それをより見栄えの良いものにする時です。私たちは…style.cssその中にいくつかの基本的なCSSを追加し、レスポンシブデザインに対応していることを確認してください。

あなたのstyle.cssファイル（トピック情報のヘッダーの下）に以下のスタイルを追加してください：

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

これらのスタイルは、クリアでモダンな視覚効果を提供するとともに、小さな画面を持つデバイスに対しても基本的なレスポンシブなレイアウトを実現しています。あなたもこれらを利用してコンテンツを作成することができます。/assets/css/custom.cssこのファイルは、より多くのカスタムスタイルを保存するためのもので、すでに使用されています。functions.phpその中で、ロードの順番に並んでいます。

概要

この記事の手順に従って、空のフォルダから機能が完備され、構造が明確なWordPressテーマを作成することに成功しました。テーマ開発における最も基本的なファイルについても理解できたはずです。style.cssとindex.phpテンプレートの階層構造について学び、それに基づいてコードを作成しました。header.php、footer.php、single.phpその他のコアテンプレートファイルも含まれています。また、あなたは…functions.phpこのファイルにより、あなたのテーマに機能サポートとリソース管理の機能が追加され、最後にCSSを使用して視覚的な表現が実現されました。

これはあくまで出発点に過ぎません。次に、さらに多くのテンプレートファイルを作成する方法を探求することができます。page.php、archive.php、404.phpWordPressのフック（Hooks）やアクション（Actions）/フィルター（Filters）システムについて深く学び、自分のテーマがウィジェット（Widgets）やカスタマイザー（Customizer）をサポートできるようにする方法を研究してください。継続的に実践し、探求を重ねることで、あなたは熟練したWordPressテーマ開発者になれるでしょう。

FAQ よくある質問

テーマのロゴをどのように変更するか？

はい。header.phpファイル内で、ウェブサイトのタイトルを表示するコード行を見つけてください。`

タグの置換bloginfo( ‘name’ )そして、あなたのロゴ画像にリンクを設定してください。よりプロフェッショナルな方法としては、functions.phpここで使用されているのはadd_theme_support( ‘custom-logo’ )WordPressのカスタマイザーにおけるロゴのアップロード機能をサポートするためのものです。

なぜ私のナビゲーションメニューが表示されないのでしょうか？

まず、すでに準備が整っていることを確認してください。functions.phpあなたは中国を通してそれを達成しました。register_nav_menus()野菜の販売場所を登録しました（例えば…）primaryその後、WordPressの管理画面にログインし、「外観」 → 「メニュー」のページに移動します。新しいメニューを作成し、メニューアイテムを選択した後、「表示位置」のセクションで登録したメニューの位置（例：「Primary Menu」）にチェックを入れ、メニューを保存します。

どのようにしてトピックにサイドバーを追加するのでしょうか？

まず、functions.phpここで使用されているのはregister_sidebar()この関数は、サイドバー用のコンポーネント領域を登録します。その後、サイドバーを表示したいテンプレートファイル内で（例えば…）index.phpまたはsingle.php）中で使用するdynamic_sidebar()この領域では関数の呼び出しが行われます。また、作成が必要です。sidebar.phpサイドバーの具体的なHTML構造は、ファイルによって定義されます。

functions.phpファイル内の処理は、必ずフック（hook）を使用して実行しなければなりませんか？

はい、ほとんどの場合、コードが正しいタイミングで実行されるようにするためには、機能コードを関数内にまとめ、特定のフック（hook）を使用してそれを呼び出すべきです。after_setup_theme、wp_enqueue_scripts）マウントします。直接書き込んでください。functions.phpグローバル範囲でのコードは、不適切なタイミングで実行されたり、エラーを引き起こしたりする可能性があります。

次はどうする？

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

拡大読書と実践的知識

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

タグ: