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

プロフェッショナルなウェブサイトの作成：ゼロからカスタムWordPressテーマを開発するための完全ガイド

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

開発環境の準備とトピック構造の理解

コードの作成を始める前に、適切なローカル開発環境が必要です。Local by Flywheel、XAMPP、MAMPなどのツールを使用することをお勧めします。これらのツールを使えば、PHP、MySQL、Apache/Nginxを備えたサーバー環境を迅速に構築できます。また、使用するテキストエディタやIDE（VS Code、PhpStormなど）がコードのハイライト機能やFTP/SFTP機能をサポートしていることを確認してください。

標準的なWordPressテーマとは、実際には特定の構造を持つフォルダーのことであり、それはWordPressのサイトディレクトリ内に保存されています。 /wp-content/themes/ ディレクトリ内には、最も基本的なコアファイルが2つだけあります。index.php と style.cssその中で、style.css スタイルシートだけでなく、「テーマ宣言ファイル」としても機能し、そのファイルヘッダのコメントにはテーマのメタデータが含まれています。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为展示而开发的自定义WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

WordPressはこのコメントを通じて、あなたが使用しているテーマを識別します。Text Domain 国際化のために使用されるもので、後で翻訳を行うための識別子です。

推薦図書 WordPressテーマ開発の究極ガイド：ゼロから始めて、あなたの最初のカスタムテーマを構築する。

テンプレートの階層関係を理解する

WordPressはテンプレート階層（Template Hierarchy）という仕組みを利用して、異なる種類のコンテンツにどのテンプレートファイルを適用するかを決定します。例えば、ブログのホームページにアクセスした場合、WordPressは順番に以下のようにテンプレートを探します： home.phpもし該当するものが存在しない場合は、代わりに以下の方法を使用してください。 index.php単一の記事については、優先的に検索を行います。 single-post.phpそして次に single.phpそして最後に、 index.php。

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

このメカニズムを理解することは、柔軟なテーマを開発する上で鍵となります。すべてのテンプレートファイルを作成する必要はありません。カスタマイズが必要なページタイプに対応するファイルのみを作成すればよく、残りのページは自動的に処理されます。 index.php この最終的な「バックアップ」テンプレートの処理についてです。

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

テンプレートファイルはテーマの骨格であり、ウェブサイトのさまざまな部分のHTML構造を制御しています。まず、必要不可欠でよく使用されるいくつかのファイルを作成することから始めましょう。

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

DRY（Don’t Repeat Yourself）原則に従うために、WordPressのテーマでは通常、ヘッダー（Header）とフッター（Footer）を別々のファイルに分けています。

ヘッダーファイル header.php 「包含から…」 <!DOCTYPE html> 開始からメインコンテンツエリアまでのすべてのコードの中で、重要なのは「呼び出し」を行うことです。 wp_head() この関数により、WordPressのコア、プラグイン、テーマがここに必要なコード（スタイルシートのリンクやメタタグなど）を挿入することができます。

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

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</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 それはページの下部にあるすべての内容を含み、終了する前に呼び出されます。 wp_footer() この関数は、スクリプトやプラグインの機能を読み込む上で非常に重要です。

<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">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article no numeric noise key 1006>
                <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
                <div class="entry-content">
                    あなたのコメントは受け付けられました。ありがとうございます。
                </div>
            </article>
            &lt;?php
        endwhile;
        the_posts_navigation();
    else :
        echo &#039;<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

このテンプレート内の have_posts() と the_post() 関数はWordPressのメインループ（The Loop）を構成しており、すべての記事の内容を出力するための基盤となっています。 the_title()、the_content()、the_permalink() ループ内で対応する記事データを出力するために使用されます。

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

高度な機能とテーマコンポーネントを統合する

プロフェッショナルなテーマは、コンテンツを表示するだけでなく、豊富な機能やコンポーネントも提供します。これには、WordPressの関数ライブラリやフックシステムを深く理解することが必要です。

メニューナビゲーション機能を追加します。

ナビゲーションメニューはウェブサイトの重要な構成要素です。まず、テーマに応じてナビゲーションメニューを設定する必要があります。 functions.php ファイルで使用されている register_nav_menus() この関数は、1つまたは複数のメニュー項目の位置を登録します。

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

その後、テンプレートファイル（例えば…）内で… header.php）メニューを表示したい場所には、以下のコードを使用してください。 wp_nav_menu() 関数がそれを呼び出します。

推薦図書 WordPressテーマ開発入門実践ガイド：ゼロからカスタムテーマのアーキテクチャとテンプレートを構築する。

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
) );
?>

ユーザーは現在、WordPressの管理画面（バックエンド）の「外観」→「メニュー」でメニューを作成し、「メインナビゲーションメニュー」に割り当てることができます。

記事のサムネイルとツールバーを有効にします。

記事の特徴的な画像（サムネイル）やウィジェット（Widget）は、コンテンツの表示の柔軟性を高めるための重要な機能です。同様に… functions.php 中では、テーマサポート関数を通じてそれらを有効にします。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
function my_custom_theme_features() {
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 为文章定义缩略图尺寸
    set_post_thumbnail_size( 1200, 630, true );

// 启用小工具和选择性刷新
    add_theme_support( 'widgets' );
    add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'my_custom_theme_features' );

サイドバーのツールバー領域を登録することができます。 register_sidebar() 関数。

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );

その後、例えば次のように… sidebar.php テンプレートファイル内で使用します。 dynamic_sidebar( 'sidebar-1' ) このエリアを出力してください。

レスポンシブデザインとスタイルの整理を実現する

現代のウェブサイトは、すべてのデバイス上で正常に表示されなければなりません。つまり、使用するテーマはレスポンシブデザインでなければなりません。

モバイルファーストのCSSを適用する

はい。 style.css まず、モバイルデバイス向けの基本スタイルから書き始め、その後メディアクエリ（Media Queries）を使用して大画面向けのスタイルを段階的に強化していきます。これにより、コアコンテンツがすべてのデバイスで優先的に表示されるようになります。

/* 基础样式 (移动设备) */
.site-header {
    padding: 1rem;
    text-align: center;
}
.site-main {
    padding: 1rem;
}
.widget {
    margin-bottom: 2rem;
}

/* 中等屏幕 (平板) */
@media (min-width: 768px) {
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

JavaScriptを安全に導入する方法

パフォーマンスと競合の回避を確実にするためには、WordPressが推奨する方法を使用するべきです。 wp_enqueue_script() JavaScriptファイルを読み込む方法です。このプロセスは通常、 functions.php 完了。

function my_custom_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 为主题的主 JavaScript 文件排队
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复链接添加条件脚本（如果页面支持评论）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

この方法により、WordPressは依存関係を管理することができ、プラグインや他のテーマが安全にその依存関係とやり取りできる中央管理ポイントが提供されます。

概要

从零开发一个自定义 WordPress 主题是一个系统性的工程，它要求你同时掌握 HTML/CSS/JavaScript 前端技术、PHP 服务器端逻辑以及对 WordPress 核心架构的深入理解。核心流程包括：搭建环境并理解主题文件结构；创建核心模板文件，特别是利用模板层级和主循环输出内容；通过 functions.php メニュー、サムネイル、ツールバーなどの高度な機能を統合し、最後にレスポンシブデザインとセキュアな方法でスタイルやスクリプトを構成することで、テーマの現代的な外観と高いパフォーマンスを実現します。これらのステップに従うことで、特定のニーズに応えるユニークなウェブサイトを構築するだけでなく、WordPressの仕組みを深く理解することができ、より複雑な開発課題に対応するための堅固な基盤を築くことができます。

FAQ よくある質問

WordPressのテーマ開発にはPHPに精通しなければならないのでしょうか？

はい、確かにPHPの基礎がしっかりしていることは必須です。WordPress自体はPHPで構築されており、そのコア関数、テンプレートタグ、フックシステム、データベースとのやり取りなどはすべてPHPなしには成り立ちません。ページビルダーやサブテーマを使えばある程度のカスタマイズは可能ですが、機能が完全で論理的に整理されたカスタムテーマをゼロから作成するには、PHPを深く理解することが不可欠です。

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

WordPressの国際化（i18n）およびローカライゼーション（l10n）機能を使用する必要があります。コード内では、ユーザーに表示されるすべてのテキスト文字列を翻訳関数で囲む必要があります。例えば： __('文本', 'my-custom-theme') または _e('文本', 'my-custom-theme')。同時に、以下の点を確実に守ってください：style.cssのヘッダー部分とすべての内容load_theme_textdomain()呼び出し中に正しく設定されました。Text Domainその後、Poeditのようなツールを使用して生成することができます。.potテンプレートファイル：翻訳者が使用するためのものです。.poと.mo言語ファイル。

サブトピックとは何ですか？また、私はそれを使うべきでしょうか？

サブテーマ（Child Theme）とは、別のテーマ（親テーマ）に依存しているテーマのことで、自分専用のスタイルファイルや一部修正されたテンプレートファイルのみを含んでいます。親テーマが更新されても、サブテーマに加えられた変更内容は上書きされません。既存のテーマのスタイルをカスタマイズしたり、ごく少数の機能を調整したい場合（例えば、カスタム関数を追加したり、いくつかのテンプレートファイルを書き換えたりする場合）には、サブテーマの使用を強くお勧めします。これにより、より安全でメンテナンスも簡単になります。しかし、作成したい構造やロジックが既存のテーマとは全く異なる場合は、ゼロから独立したテーマを開発する方が適しています。

開発が完了した後、テーマをWordPressの公式ディレクトリにアップロードするにはどうすればよいでしょうか？

WordPress.orgのテーマディレクトリにテーマを提出するには、厳格な手順が必要です。まず、ご使用のコードはWordPressのコーディング基準およびテーマのレビュー要件（セキュリティ、アクセシビリティ、コード品質など）に準拠していなければなりません。WordPress.orgのアカウントを持っている必要があり、コードをSVNリポジトリに投稿する必要があります。テーマはGPL互換のライセンスでなければならず、有料プラグインをバンドルしたり、隠れた悪意のあるコードを含んでいてはなりません。レビュープロセス全体には数週間かかることがあり、レビュアーからフィードバックが提供されます。そのフィードバックに基づいて修正を加え、承認を得るまで対応する必要があります。

次はどうする？

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

拡大読書と実践的知識

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

タグ: