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

WordPressテーマ開発実践トレーニング：ゼロから現代のレスポンシブテーマを構築する

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

準備作業と環境設定

WordPressのテーマ開発プロジェクトを開始するには、まず適切な作業環境を構築する必要があります。これには、ローカルの開発サーバーの設定だけでなく、明確なプロジェクトディレクトリ構造の作成や、現代的な開発ツールの使用も含まれます。

ローカル開発環境の構築にはさまざまな選択肢があります。XAMPP、MAMP、Local by Flywheelのような統合ソフトウェアパッケージを使用すると、Apache、MySQL、PHPをローカルコンピューターに迅速にインストールできます。本番環境により近い体験を求める場合は、Dockerコンテナの使用を検討してみてください。また、ほとんどの現代のテーマ開発は、VS Codeのような基本的なコードエディタから始まり、コーディング効率を高めるために必要なプラグインを組み合わせて使用されます。

標準的で明確なテーマカタログの構造は、プロジェクトのメンテナビリティ（維持管理の容易さ）の基盤です。WordPressでは…wp-content/themesディレクトリ内に、あなたのテーマ名を使ってフォルダを作成してください。例えば：my-modern-themeこのフォルダ内で、2つの核心的なファイルを作成する必要があります：style.cssとindex.phpその中で、style.cssスタイルシートだけでなく、テーマに関するメタデータ情報も含まれています。その他のファイルやディレクトリについては、JavaScriptスクリプトを保存するためのものなどがあります。/jsテンプレートコンポーネントを保存するための/template-partsページテンプレートを保存するための/page-templatesなどは、開発プロセスの中で段階的に構築していくことができます。

推薦図書 Tailwind CSSアルティメットガイド：初心者からマスターまでの実践的なヒント。

テーマスタイルシートのヘッダー情報

テーマに関するstyle.cssファイルのヘッダーには、WordPressシステムにあなたのテーマについて情報を提供するための、フォーマットが規定されたコメントを含める必要があります。この情報は非常に重要であり、テーマの名前、作者、説明、バージョンなどを定義します。

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ 
/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
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-modern-theme
*/

その中のText Domainこれは国際化のためのもので、後続の翻訳機能で使用されるテキスト領域として機能します。これらの情報を定義すると、作成したテーマがWordPressの管理画面の「外観」→「テーマ」リストに表示されるようになります。

コア関数ファイルを導入する

たとえindex.phpとstyle.cssテーマが識別されるのに十分な情報は含まれているが、機能が完全なテーマにはさらに以下の要素が必要である：functions.phpこのファイルは、コンテンツを直接出力するためのものではなく、テーマの「機能エンジン」として使用されます。テーマのサポート機能の追加、メニューやサイドバーの設定、スタイルやスクリプトの導入などに役立ちます。

テーマのルートディレクトリ内に作成してください。functions.phpファイルです。初期段階では、まずその中にいくつかの基本的な機能を追加することができます。あなたは以下の方法でそれを行うことができます：add_theme_support()この関数は、トピックがサポートしている機能を宣言するためのものです。例えば、記事のサムネイル（Featured Image）、カスタムロゴ、HTML5タグなどです。

コアテンプレートファイルを構築する

WordPressはテンプレートの階層システムを採用しており、異なる種類のコンテンツをどのように表示するかを決定しています。これらのコアテンプレートファイルを理解し、作成することは、自分のデザインを動的なウェブサイトに変換するための鍵となります。

推薦図書 現代ウェブサイト構築の徹底解説：計画から公開までの完全な実践ガイド。

最も基本的なテンプレートファイルはindex.phpこれはすべてのページに共通する最終的なリタイア（戻る）テンプレートです。しかし、より細かい制御を実現するためには、より具体的なテンプレートを作成する必要があります。例えば、ブログ記事の一覧を表示するためのテンプレートなどです。home.phpまたはindex.phpこれは、単一の記事を表示するために使用されます。single.phpこれは静的なページを表示するために使用されます。page.phpまた、記事のカテゴリーやタグなどを表示するためのアーカイブページにも使用されます。archive.php。さらに、header.phpとfooter.phpウェブサイトのヘッダー部分とフッター部分のコードを分離するために使用されます。get_header()とget_footer()関数は各テンプレート内で呼び出され、コードの再利用が実現されています。

ヘッダーテンプレートを作成します。

header.phpファイルは通常、HTML文書を含んでいます。<head>サイトのアイデンティティやメインナビゲーションメニューなど、ページの一部や冒頭に表示される構成要素です。重要なステップの一つは…<head>内部呼び出し（internal call）wp_head()フック（Hook）とは、WordPressのコア、プラグイン、テーマ自体が必要なCSS、JavaScript、メタデータを出力するための仕組みのことです。

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

記事のループ処理を実現する

記事のループ処理は、WordPressにおける動的コンテンツの出力の核心的なメカニズムです。index.php、single.phpこれらのテンプレートの中で、私たちは…（We use… in these templates.）if ( have_posts() ) : while ( have_posts() ) : the_post();各記事を順番に処理し、表示します。

hosting.com 共有ホスティング
AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減
ホスティング・ドットコムのロゴ アクセスページ 
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?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>
</div>

get_template_part()関数は優れた実践方法です。それにより、記事の内容を表示するためのHTML構造を別の場所に分離することが促されます。template-parts/content.phpこのようなコンポーネントファイルにおいて、メインテンプレートファイルをより簡潔でわかりやすいものにする必要があります。

レスポンシブデザインとスタイリングの実装

現代のウェブサイトのデザインテーマはレスポンシブでなければならず、スマートフォンからデスクトップまで、さまざまな画面サイズで良好なブラウジング体験を提供できるようにする必要があります。これは主にCSSのメディアクエリ、フレックスボックス（Flexbox）、およびCSSグリッド（CSS Grid）を使用して実現されます。

まず、functions.php中正确地使用wp_enqueue_style()この関数は、あなたのメインスタイルシートをキューに追加します。呼び出す際には、WordPressに内蔵されているスタイルに依存する設定を必ず行ってください。dashicons。

推薦図書 Tailwind CSS 終極ガイド：入門から現代の Web 開発まで。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

モバイルファーストのCSS戦略

「モバイルファースト」の方針に従ってCSSを作成するとは、まず小さな画面デバイス（例えばスマートフォン）向けに基本のスタイルを定義し、その後メディアクエリを使用して徐々に大きくなる画面（タブレット、デスクトップ）向けに追加のスタイルやレイアウトの調整を行うということです。

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

レスポンシブルイメージの処理

WordPressは強力なレスポンシブ画像サポートを提供しています。the_post_thumbnail()関数を呼び出し、適切なサイズパラメータを渡すと、WordPressは自動的にそれに合わせた出力を行います。srcsetとsizes属性の`

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

このタグにより、ブラウザはデバイスの画面サイズに応じて最も適した画像ファイルを選択し、読み込み性能を最適化します。

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

トピック機能とカスタマイズの追加

基本的テーマが完成した後、WordPressのAPIを利用してさまざまな機能を追加することで、その使いやすさや専門性を高めることができます。これには、カスタムメニューやツールバー（サイドバー）、そしてカスタマイザーやオプションページを通じたテーマのカスタマイズが含まれます。

登録ナビゲーションメニュー

はい。functions.phpここで使用されているのはregister_nav_menus()関数を使って、自分のテーマがどのメニュー位置をサポートしているかを定義します。その後、ユーザーはバックエンドの「外観」→「メニュー」で、これらの位置にメニューを割り当てることができます。

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

ウィジェットエリアを作成する

サイドバー（Sidebar）では、ユーザーがアイコンや小道具をドラッグ＆ドローすることでページのレイアウトを自由にカスタマイズできます。register_sidebar()関数を登録します。通常、メインサイドバーやフッターのツールバーなどに複数のツールエリアを作成します。

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', 'my-modern-theme' ),
        '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_modern_theme_widgets_init' );

登録後、テンプレートファイル（例えば…）にアクセスできるようになります。sidebar.php）で使用されていますdynamic_sidebar( 'sidebar-1' )その領域を表示するには、関数を呼び出すだけです。

カスタマイザAPIの統合

WordPressのカスタマイザーを使用すると、ユーザーはリアルタイムのプレビューの中でテーマの設定を調整することができます。カスタマイザーのAPIを通じて、色の選択やロゴのアップロードなどの簡単な設定を追加することも可能です。これには、カスタマイザーの機能を活用することが必要になります。$wp_customize->add_setting()と$wp_customize->add_control()方法。

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

そしてその後、header.phpその中で、以下の方法を通じて…get_theme_mod( 'header_textcolor' )この値を取得し、インラインスタイルなどを使用して適用してください。

概要

ゼロから現代的でレスポンシブなWordPressテーマを開発することは、体系的なエンジニアリング作業です。開発者はPHPやWordPressのコアAPIに精通しているだけでなく、HTML5、CSS3（特にFlexboxやGrid、メディアクエリ）、JavaScriptにも精通している必要があります。このプロセスはモジュール化され、メンテナンスしやすい設計に従って進められます。まず環境を構築し、テーマの情報を定義した後、テンプレートの階層に従ってPHPファイルを段階的に作成し、記事の表示機能を実装します。次に、「モバイルファースト」のCSS戦略とレスポンシブな画像技術を用いて、ウェブサイトがすべてのデバイスで優れた表示を実現します。最後に、WordPressの強力な機能APIを活用してナビゲーションメニューやツールバー、カスタマイザー機能を追加し、ユーザーに柔軟なカスタマイズの自由を提供します。これらのステップに従えば、プロフェッショナルで効率的、かつメンテナンスしやすいWordPressテーマを構築することができるでしょう。

FAQ よくある質問

###: WordPressテーマを開発するには、どのようなコア技術をマスターする必要がありますか？

WordPressの完全なテーマを開発するには、一連のコア技術をマスターする必要があります。まず第一にPHPが挙げられます。WordPress自体がPHPで書かれており、すべてのテンプレートファイルや機能ロジックはPHPに依存しています。次にHTML5とCSS3があり、これらはページの構造とスタイルを構築するために使用されます。特にレスポンシブデザインには、CSSのメディアクエリやFlexbox、Gridといった現代的なレイアウトモデルが不可欠です。JavaScriptについても基本的な知識があると非常に重要で、インタラクティブな機能を実現するために使用されます。最後に、WordPressのコア概念、例えばテンプレートの階層構造、記事の表示処理、フック（Hooks）、フィルター（Filters）などを深く理解している必要があります。

`style.css`ファイル内の`Text Domain`とは何ですか？

Text Domainこれは、テーマの国際化およびローカライゼーションにおいて重要な識別子です。その役割は、テーマ内のすべての翻訳可能な文字列に一意の名前空間を提供することです。コード内で、この識別子を使用すると…__('Hello World', 'my-modern-theme')または_e('Read More', 'my-modern-theme')このような翻訳機能では、2番目のパラメータがテキスト領域となります。これにより、Poeditのような翻訳ツールが、あなたのテーマに属する文字列を正しく認識し抽出できるようになり、その結果として翻訳が正確に行われます。.poと.moこのファイルを翻訳することで、テーマ内容を簡単に任意の言語に翻訳することができます。

どのようにしてテーマに記事のサムネイル機能をサポートさせるか？

テーマで記事のサムネイル（別名：特集画像）をサポートするには、テーマの設定ファイル内で関連する設定を行う必要があります。具体的な手順は、使用しているテーマのドキュメントや開発者のガイドラインを参照してください。通常、サムネイルの表示方法や設定項目はテーマのカスタマイズオプションの中に含まれています。functions.phpファイルに対応するテーマサポートの宣言を追加してください。使用方法は以下の通りです。add_theme_support()関数を呼び出し、引数を渡します。'post-thumbnails'パラメータです。これをすべての記事タイプで有効にすることもできますし、特定の記事タイプ（例えば……）でのみ有効にするように指定することもできます。postとpage）を有効にします。

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

サポートを追加すると、記事編集ページに「特色画像」のメタボックスが表示され、ユーザーは画像をアップロードしたり選択したりできるようになります。テンプレート内では、以下のように使用します：has_post_thumbnail()確認してください。サムネイルが存在するかどうかを確認し、必要に応じて適切な処理を行ってください。the_post_thumbnail()関数を使ってそれを表示します。

なぜ`get_template_part`関数の使用を推奨するのでしょうか？

get_template_part()関数は、WordPressのテーマ開発においてコードの再利用とモジュール化を実現するための最良の実践の一つです。主に、記事の内容を表示するためのHTML構造などのよく使われるテンプレートコードを独立したコンポーネントファイルに分離するために使用されます。これにはいくつか顕著な利点があります。まず第一に、コードの可読性と保守性が向上します。メインのテンプレートファイルでは、複雑な処理を関数に分けることで、コードがより簡潔で理解しやすくなり、修正や更新も容易になります。index.php）非常にシンプルになりました。次に、柔軟性が向上しました。記事の種類などの異なる条件に応じて、異なるコンポーネントファイルを読み込むことができるようになりました。get_template_part( 'template-parts/content', 'page' )優先的に読み込まれます。content-page.php最後に、サブテーマのカバーが容易になりました。サブテーマは同名のコンポーネントファイルを1つ提供するだけで、親テーマの表示ロジックを変更することができます。

次はどうする？

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

拡大読書と実践的知識

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

タグ: