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

WordPressテーマ開発入門：ゼロから最初のレスポンシブテーマを作成する

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

コードの作成を始める前に、ローカル開発環境が必要です。これには通常、ローカルサーバー（XAMPP、MAMP、またはLocal by Flywheelなど）、PHP、MySQLデータベース、そしてコードエディタ（VS Code、Sublime Textなど）が含まれます。使用するPHPのバージョンがWordPressの公式要件を満たしていることを確認してください。

次に、あなたのWordPressのインストールディレクトリ内で…wp-content/themesフォルダ内で、新しいフォルダを作成してください。例えば、my-first-themeこのフォルダには、あなたのテーマに関連するすべてのファイルが保存されます。

最も基本的なWordPressテーマには、たった2つのファイルしか必要ありません。style.cssとindex.php.まず、以下を作成する。style.cssファイルには、そのテーマに関する情報を含むコメントをファイルのヘッダー部分に追加する必要があります。これはWordPressがテーマを認識するために必要な手順です。

推薦図書 カスタマイズされたWordPressテーマ：ゼロから独自のウェブサイトの外観を作成するための完全なガイド。

/*
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
Text Domain: my-first-theme
*/

そして、最もシンプルなものを作成してください。index.phpこのファイルには、現時点ではHTMLの基本構造（スケルトン）と「Hello World」というテキストのみが含まれています。

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ 
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>こんにちは、World！これが私の初めてのテーマです。.</h1>
    
</body>
</html>

今、WordPressの管理画面にログインし、「外観」→「テーマ」を選択してください。そこに「My First Theme」が表示され、有効にすることができるはずです。現時点では機能は限られていますが、WordPressが認識できるテーマを自分で作成することに成功しました。

テーマのコアテンプレートファイルを作成する。

完全なテーマは一連のテンプレートファイルで構成されており、これらのファイルがウェブサイトのさまざまな部分の表示を制御しています。まず、最も重要ないくつかのファイルから構築を始めましょう。

ヘッダーとフッターを分離する

繰り返し出現するコード（ヘッダーやフッターなど）を別のファイルに分離することが最優先事項です。作成してください。header.phpこのファイルには、以下の内容が含まれています：<!DOCTYPE html>開くまで<body>タグの前にあるすべての内容。

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1003>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></h1>
</header>

作成footer.phpファイルには、フッターの内容と終了タグが含まれています。

推薦図書 ゼロから始める、あなた専用のWordPressテーマ制作：設計・デザイン・開発の完全ガイド。

<footer id="colophon" class="site-footer">
    <p>©</p>
</footer>

</body>
</html>

その後、あなたのものを修正してください。index.phpファイルを使用するには、get_header()とget_footer()これらの部分を導入するための関数を使用します。

<?php get_header(); ?>

<main id="primary" class="site-main">
    &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>

<?php get_footer(); ?>

記事のループ処理とサイドバーの作成

上記のindex.php基本的WordPressのメインループ（The Loop）がすでに含まれており、これによって記事リストを取得して表示することができます。次に、そのループを利用してコンテンツを生成する処理を作成します。sidebar.phpサイドバーを追加しましょう。

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

ページにサイドバーを導入するためには、以下の手順が必要です：index.phpメインコンテンツエリアの構造を前後に調整し、以下の方法を使用してください：get_sidebar()関数です。また、それと同時に、別のものも作成する必要があります。functions.phpこのサイドバーのツール領域を登録するためのファイルです。

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

レスポンシブなレイアウトとスタイルの実装

レスポンシブデザインにより、あなたのテーマがさまざまなデバイス上で正常に表示されるようになります。まずは基本的なCSSの構造とメディアクエリから始めましょう。

基本スタイルとエラスティックボックスモデルの設定

あなたのstyle.cssテーマ情報の注釈の下に、スタイルをリセットするための設定と基本的なレイアウトを追加しましょう。Flexboxを使用してシンプルなレスポンシブレイアウトを作成することは、良い出発点となります。

/* 基础重置与样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}
/* 主要布局容器 */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    flex: 1;
    padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
    background-color: #f8f9fa;
    padding: 1rem 2rem;
    text-align: center;
}

メディアクエリを追加する

メディアクエリはレスポンシブデザインの核心です。画面の幅が768px未満（典型的なタブレットデバイス以下）になると、コンテンツエリアとサイドバーのレイアウトを並列から積み重ねに変更するための簡単なブレークポイントを追加しました。

推薦図書 WordPressテーマ開発：入門から上級者までの完全ガイド。

まず、HTML構造を修正してください。index.phpメインコンテンツとサイドバーを1つのコンテナで囲みます。

<div class="content-area">
    <main id="primary" class="site-main">
        <!-- 主循环内容 -->
    </main>
    
</div>

その後、CSSに対応するスタイルを追加します。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
.content-area {
    display: flex;
    flex-wrap: wrap;
}
.site-main {
    flex: 3;
    min-width: 300px;
}
#secondary {
    flex: 1;
    min-width: 250px;
    padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
    .content-area {
        flex-direction: column;
    }
    #secondary {
        padding-left: 0;
        padding-top: 2rem;
    }
    .site-header, .site-footer, .site-main {
        padding: 1rem;
    }
}

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

functions.phpこのファイルは、あなたのプロジェクトの「エンジンルーム」のようなもので、機能を追加したり、特徴を登録したり、スクリプトやスタイルを安全に導入するために使用されます。

登録ナビゲーションメニューおよびツールバー領域

はい。functions.phpここでは、「使用」を使っています。register_nav_menus関数を使用して、トピックのナビゲーションメニューの位置を登録します。

esc_html__( 'Primary Menu', 'my-first-theme' ),
        'footer'  =&gt; esc_html__( 'Footer Menu', 'my-first-theme' ),
    ) );

// 注册侧边栏小工具区域
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Main Sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', '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( 'after_setup_theme', 'my_first_theme_setup' );
?&gt;

登録後、あなたはそれを利用できるようになります。header.phpとfooter.phpここで使用されているのはwp_nav_menu()これらのメニューを呼び出すための関数が用意されています。

安全にスタイルシートやスクリプトを読み込む方法

テンプレートファイル内でCSSやJavaScriptファイルに直接ハードリンクを張ることは絶対に避けてください。代わりに、以下の方法を使用するべきです：wp_enqueue_style()とwp_enqueue_script()関数を通じて…wp_enqueue_scriptsフックを使ってそれらを読み込みます。

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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

より多くのテンプレートファイルを作成して機能を豊かにしましょう。

現在、私たちのトピックは1つだけです。index.phpそれはすべてのページで使用されます。WordPressのテンプレート階層によって、異なるタイプのページに対してより具体的なテンプレートが探されるようになります。では、いくつかテンプレートを作成しましょう。

単一の記事とページテンプレート

作成single.php単一の記事を表示するために使用されます。

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', 'single' );
        // 显示文章导航
        the_post_navigation();
        // 如果评论开启，则加载评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

作成page.php静的なページを表示するために使用されます。その構造は…single.php似ていますが、通常はカテゴリーやタグなどのメタ情報は表示されません。

DRY（Don’t Repeat Yourself）原則に従うために、記事やページのコンテンツ表示部分をテンプレートパーツ（Template Part）に抽出することができます。これを実現するには、テーマのルートディレクトリに必要なファイルを作成します。template-partsフォルダを作成し、その中にもう一つフォルダを作ります。content-single.phpとcontent-page.php。

記事アーカイブページテンプレート

作成archive.phpこのコードは、カテゴリ、タグ、著者などの情報を表示するアーカイブページを生成するためのものです。再利用も可能です。index.phpそのループの中で処理が行われますが、通常はアーカイブのタイトルが上部に表示されます。

<?php get_header(); ?>
<main id="primary" class="site-main">
    <header class="page-header">
        &lt;?php
        the_archive_title( &#039;<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="archive-description">', '</div>' );
        ?&gt;
    </header>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 显示上一页/下一页导航
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

概要

このガイドを通じて、基本的でありながらも完全なレスポンシブなWordPressテーマの構築を完了しました。テーマの基本的なファイル構造を理解し、テンプレートコンポーネント（ヘッダー、フッター、サイドバー）の分離方法を学び、WordPressのコアループを実装しました。さらに、CSSのメディアクエリを使用してレスポンシブなレイアウトを構築する方法も習得しました。functions.phpファイルを使用してメニューやツールバーを登録し、リソースを安全に読み込む方法を学びましょう。また、WordPressの強力なテンプレート階層システムにも触れていきます。

テーマ開発は絶えず深まっていくプロセスです。次に、さらに多くのテンプレートファイルを探求することができます（例：404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。

FAQ よくある質問

WordPressのテーマには、最低でもどのようなファイルが必要でしょうか？

WordPressで認識される最もシンプルなテーマは、たった2つのファイルだけで構成されています：style.cssとindex.php。style.cssヘッダー部分には正しいトピック情報の注記を含める必要があります。index.phpそれがすべてのページのデフォルトテンプレートとなります。

私のテーマに多言語翻訳を追加するにはどうすればいいでしょうか？

あなたは2つのことをしっかりと行う必要があります。まず、style.cssヘッダー内のコメントや、テキストが使用されているすべての場所（例えば、以下のように）__()または_e()このガイドでは、テキストドメイン（Text Domain）を使用してテーマを作成する方法について説明します。ここで使用するテキストドメインは「my-first-theme」です。次に、Poeditのようなツールを使用して.potファイルを作成し、それを.poおよび.moファイルに翻訳した後、テーマのフォルダに保存します。/languagesディレクトリ内にあります。最後に、functions.phpここで使用されているのはload_theme_textdomain()「Function loading」の翻訳です。

なぜ私のカスタムスタイルやスクリプトが効果を発揮しないのでしょうか？

これは通常、WordPressが推奨する方法で読み込みの順序を管理していないために発生します。必ず、WordPressが推奨する方法で処理を行っていることを確認してください。functions.phpこのファイル内で使用されています。wp_enqueue_style()とwp_enqueue_script()関数を作成し、それらをマウントします。wp_enqueue_scriptsフックを利用してスタイルやスクリプトを追加します。テンプレートファイル内に直接記述されたリンクは、キャッシングプラグインによって無視されたり、場合によっては読み込み順序が正しくなかったりする可能性があります。

自分のテーマにカスタムロゴのサポートを追加するにはどうすればいいですか？

これは非常に一般的な機能です。あなたはそれを必要としています…functions.phpファイルのテーマ設定関数内で（通じて）after_setup_theme（フックの実行を追加）add_theme_support( 'custom-logo' )Logoのサイズなどの属性を定義するために、パラメータ配列を渡すことができます。これを追加すると、ユーザーは「外観」→「カスタマイズ」→「サイトアイデンティティ」でLogoをアップロードできるようになります。フロントエンドでは、以下のように使用できます：the_custom_logo()関数を使ってそれを表示します。

开发过程中如何调试PHP错误？

ローカル開発環境での開発をお勧めします。wp-config.phpファイル内でWordPressのデバッグモードを有効にします。WP_DEBUG定数は次のように設定されています。trueまた、複数の設定を同時に行うこともできます。WP_DEBUG_LOGとWP_DEBUG_DISPLAYエラーをログファイルに記録するか、画面上に表示するかを選択します。テーマを公開する前には、必ずデバッグモードをオフにしてください。

次はどうする？

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

拡大読書と実践的知識

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

タグ: