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

初めてのレスポンシブWordPressテーマの開発・カスタマイズ方法

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

準備作業と開発環境の構築

コードの執筆を始める前に、効率的な開発環境を構築することは非常に重要です。これにより、作業効率が向上するだけでなく、コードの規範性や保守性も保証されます。

まず、ローカル開発環境が必要です。XAMPP、MAMP、Local by Flywheelなどのツールを使用すると、PHPとMySQLを備えたサーバー環境を簡単にローカルコンピュータ上に構築できます。これらのツールをインストールし、サービスを起動した後、Apache（またはNginx）とMySQLが実行中であることを確認してください。

次に、最新のWordPressコアファイルをダウンロードし、それをローカルサーバーのウェブサイトのルートディレクトリ（例えばXAMPPの場合）に解凍してください。 htdocs （フォルダー）ブラウザからアクセスします。 http://localhost/your-wordpress-folder WordPressのインストールプロセスを完了してください。設定したデータベース名、ユーザー名、パスワードを忘れないでください。

推薦図書 Tailwind CSS実践入門：レスポンシブでモダンなウェブページを構築するためのデザインガイド。

コードエディタとしては、Visual Studio Code、PhpStorm、Sublime Textのいずれかをお勧めします。これらのエディタはPHP、HTML、CSS、JavaScriptに対して優れた構文ハイライト機能やコードヒントのサポートを提供しています。さらに、WordPress開発用のインテリセンスプラグインや、バージョン管理用のGitなど、必要なプラグインをインストールするとより便利です。

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

最後に、ローカルのWordPressインストールディレクトリに移動してください。 wp-content/themes フォルダーです。ここで、あなたがこれから作成するトピック用に新しいフォルダーを作成してください。例えば、「MyNewTopic」といった名前にしてください。 my-first-themeこのフォルダには、あなたのテーマに関連するすべてのファイルが保存されます。

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

WordPressのテーマは一連の標準的なファイルで構成されており、その中で必ず存在しなければならないファイルが2つあります：style.css と index.phpこれらのファイルには、トピックの基本情報と構造が定義されています。

まずは作成しましょう。 style.css このファイルには、スタイルシートだけでなく、テーマに関するメタ情報も含まれています。これらの情報は、WordPressの管理画面の「外観」→「テーマ」ページに表示されます。

/*
Theme Name: 我的第一个响应式主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
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 これはトピックのメインテンプレートファイルです。WordPressがより具体的なテンプレートファイル（例えば…）を見つけられない場合に使用されます。 single.php または page.phpその時には、それを使用します。最もシンプルな例として… index.php WordPressのヘッダー、メインループ、フッターを呼び出すための基本コードのみを含めることができます。

推薦図書 Tailwind CSSをマスターするための実践的なガイド：入門から実戦まで。

<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1011>
    
    <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>
        備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
            <article>
                <h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
                あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
            </article>
        終わりました。ありがとうございました。
    </main>
    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

この時点で、ご使用のテーマを有効にすることができます。WordPressの管理画面にログインし、「外観」→「テーマ」のページに移動してください。そこに「My First Responsive Theme」というテーマが表示されているはずです。このテーマを有効にしてから、ウェブサイトのホームページを開いてみると、その基本的な効果を確認できるでしょう。

トピック機能のサポートを追加します。

テーマ機能をより完璧なものにするために、私たちは以下の手順を踏む必要があります： functions.php このファイルは、WordPressのコア機能へのサポートを追加するためのものです。functions.php ファイルはまるでテーマの「脳」のようなもので、すべてのカスタム関数、クラス、フック、フィルターを保存するために使用されます。

作成する functions.php ファイルに、以下のコードを追加して記事のサムネイル、カスタムメニュー、およびHTML5タグをサポートしましょう。

hosting.com 共有ホスティング
AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減
ホスティング・ドットコムのロゴ アクセスページ 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

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

レスポンシブデザインとは、ウェブサイトがデスクトップ、タブレット、スマートフォンなど、さまざまなサイズのデバイスで快適に閲覧できるようにすることを意味します。これは主にCSSのメディアクエリ（Media Queries）とフローティングレイアウト（Fluid Layout）を使用して実現されます。

まず、 style.css メタ情報の下に、レスポンシブデザインの基盤となる基本的なグローバルスタイルを記述します。ここでは、Flexboxなどの現代的なCSSレイアウトテクノロジーを使用しています。

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

次に、異なる画面幅に応じて調整を行うためのメディアクエリを追加します。これがレスポンシブデザインの核心です。

推薦図書 独自のウェブサイトを作り上げる：WordPressのテーマ開発を初歩からマスターするための完全ガイド。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

ナビゲーションメニューのレスポンシブ性を最適化する

スマートフォンなどの小さな画面のデバイスでは、従来の横方向のナビゲーションメニューが表示されると窮屈に見えます。よく使われる解決策の一つが、そのメニューをハンバーガーメニューに変換することです。これを実現するには、CSSと少しのJavaScriptを組み合わせる必要があります。

まず、 header メニューのHTML構造を部分的に修正する場合、通常はWordPressを使用します。 wp_nav_menu 関数の生成です。スタイルを制御するために、その関数にクラス名を付け、ハンバーガーボタンも追加します。

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

あなたの header.php テンプレートファイル内で（取得する必要がある） index.php （メニューコードは以下のようになるかもしれません：）

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

その後、CSSではデフォルトで小画面ではメニューを非表示にし、ユーザーがハンバーガーボタンをクリックするとJavaScriptを使ってクラスを切り替えます（例えば「active」クラスを適用するなど）。 .toggled）を使用してメニューを表示します。

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

最後に、簡単なJavaScriptファイルを追加してください（例：`script.js`）。 js/navigation.jsそして、それを通じて… functions.php ボタンのクリックイベントを処理するために、以下のコードを導入してください。

カスタムのページテンプレートやコンポーネントを作成する

WordPressの柔軟性は、そのテンプレートの階層構造とウィジェット（Widget）システムに大きく依存しています。カスタムのテンプレートやウィジェットを作成することで、テーマの機能を大幅に拡張することができます。

カスタムページテンプレートの構築

例えば、「全幅ページ」のテンプレートを作成したいとします。このテンプレートにはサイドバーがなく、ページのコンテンツが画面の全幅を占めます。まず、テーマのルートディレクトリに新しいファイルを作成し、その名前を「full-width-page-template.php」とします。 page-fullwidth.phpこのファイルの最上部には、テンプレート名を記載したコメントを必ず追加しなければなりません。

<?php
/**
 * Template Name: 全宽页面
 */
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>
<?php
get_footer(); // 引入 footer.php
?>

現在、WordPressの管理画面でページを作成または編集する際に、「ページ属性」の「テンプレート」ドロップダウンリストから「全幅ページ」を選択することができます。選択すると、そのページはあなたが作成したばかりのテンプレートファイルを使用してレンダリングされます。

登録用サイドバーコンポーネントエリア

「部品エリア」では、ユーザーがドラッグ＆ドロー操作を使って、テーマの特定の場所（例えばサイドバーやフッター）にコンテンツを追加できます。私たちはこれを活用する必要があります。 functions.php サイドバー領域を登録します。

利用する register_sidebar この関数は、サイドバーの名前、ID、説明、およびラッピングタグを定義するためのパラメータ配列を受け取ります。

関数 my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Main Sidebar', 'my-first-theme' )、
        'id' =&gt; 'sidebar-1'、
        'description' =&gt; __( 'Add widget here., 'my-first-theme' ), 'description' =&gt; __( 'Add widget here.
        '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_first_theme_widgets_init' );

登録後は、テーマテンプレート内の適切な場所でこのコンポーネントエリアを呼び出す必要があります。通常、サイドバーは以下のような場所に配置されます： sidebar.php ファイル内で処理を行った後、メインテンプレートファイル内で（例えば）… index.php または single.php）通過 get_sidebar() 関数の導入。

はい。 sidebar.php ここでは、「使用」を使っています。 dynamic_sidebar 関数を使用して部品領域を出力します。

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

概要

自分で初めてのレスポンシブなWordPressテーマを開発・カスタマイズすることは、挑戦的でありながらも非常にやりがいのあるプロセスです。この記事の手順に従って、ゼロから開発環境を構築し、テーマに必要な核心的なファイルを作成してきました。 style.css と index.phpそして、以下の方法で… functions.php テーマ機能が強化されました。あなたはレスポンシブウェブデザインを深く実践し、CSSのメディアクエリやFlexboxレイアウトを使用して、ウェブサイトがさまざまなデバイスで問題なく動作するようにしました。さらに、WordPressの強力なテンプレートシステムやコンポーネントAPIを探求し、カスタムのページテンプレートやドラッグアンドドロップできるコンポーネントエリアの作成方法を学びました。

これらの基礎をマスターしたら、カスタム記事タイプ、テーマカスタマイザAPI、ブロックエディタのサポートなど、より高度なテーマ機能を探求することができます。そうすることで、より機能豊富でデザインが洗練されたWordPressテーマを作り上げることができるでしょう。

FAQ よくある質問

テーマ開発は必ずゼロから始めなければならないのでしょうか？

必ずしもそうとは限りません。ゼロから始めることで全ての詳細を完全にコントロールし、理解することはできますが、初心者や迅速な開発が必要な場合には、既存のテーマ（Underscores、_s）やフレームワーク（例えばBootstrapの統合テーマ）から始める方が効率的です。これにより、ベストプラクティスに基づいたしっかりとしたコードベースが得られ、その上でカスタマイズを行うことができます。

どのようにして私のWordPressテーマをデバッグするのでしょうか？

WordPressの開発中によく使用されるデバッグ方法は、デバッグ機能を有効にすることです。 WP_DEBUGあなたの wp-config.php ファイルの中で、 define( 'WP_DEBUG', false ); 変更後の内容： define( 'WP_DEBUG', true );これにより、WordPress は画面上にすべての PHP エラー、警告、および通知を表示するようになります。さらに、ブラウザの開発者ツール（コンソール、エレメント、ネットワークタブ）を併用することで、JavaScript、CSS、およびネットワークリクエストのデバッグが可能になります。

なぜ私のテーマを変更してもすぐには反映されないのでしょうか？

これは通常、ブラウザのキャッシュやWordPressのキャッシュプラグインが原因です。まず、ブラウザで強制更新（Ctrl+F5またはCmd+Shift+R）を試してください。キャッシュプラグインを使用している場合は、そのプラグインのキャッシュを削除してください。また、変更を加えたのが現在アクティブなテーマフォルダ内の正しいファイルであることを確認してください。 functions.php ファイルについては、場合によってはバックエンドページを更新するだけで済むことがあります。というのも、そのファイルはページが読み込まれるたびに自動的に読み取られるからです。

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

テーマを多言語に対応させる（国際化およびローカライゼーション）ことは良い習慣です。これには主に2つのステップがあります。まず、テーマ内で翻訳が必要なすべてのテキストにWordPressの翻訳機能を使用してマークアップする必要があります。例えば： __('Hello World', 'my-first-theme')次に、Poeditのようなツールを使用して、テーマファイルをスキャンして生成します。 .pot テンプレートファイルを用意し、その後、各言語に対応するファイルを作成します。 .po そしてコンパイル後の .mo そのファイルをテーマの中に置いてください。 /languages/ ディレクトリ内にあります。最後に、 functions.php ここで使用されているのは load_theme_textdomain 翻訳を読み込むための関数です。

ビジネス向けのテーマを開発する際には、以下の点に注意する必要があります：

商用テーマの開発にあたっては、個人用テーマよりもはるかに高い品質が求められます。WordPressのテーマディレクトリの審査基準を厳守し、コードの安全性と無誤動作を確保する必要があります。すべてのユーザー入力および出力に対しては厳格なエスケープ処理と検証を行い、セキュアな関数を使用することが必須です。 esc_html, esc_urlテーマには詳細なドキュメントと注釈を含める必要があります。さらに、WordPressのコア機能（ブロックエディターやカスタムロゴなど）を完全にサポートすることを強くお勧めします。また、人気のあるプラグインとの互換性も確保してください。最後に、テーマカスタマイザーのサポートを追加することを検討し、ユーザーに直感的でリアルタイムのカスタマイズ体験を提供してください。

次はどうする？

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

拡大読書と実践的知識

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

タグ: