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

機能豊富なカスタムWordPressテーマの作り方を、手取り足取り教えます。

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

なぜWordPressのテーマを一から構築することを選んだのでしょうか？

オープンソースの世界には、数多くの無料および有料のWordPressテーマが存在します。そのため、多くのユーザーはこれらのテーマをそのままダウンロードして使用する傾向にあります。しかし、ゼロからカスタムテーマを構築することには比類のない利点があります。まず第一に、開発者はウェブサイトの外観、機能、パフォーマンスを完全にコントロールできるのです。不要なコードや機能をすべて排除し、プロジェクトのニーズに完全に合った軽量なソリューションを作成することができるため、ウェブサイトの読み込み速度やユーザー体験を大幅に向上させることができます。

次に、カスタムテーマは一部のサードパーティ製テーマのように、アップデート時にコア機能やインストール済みのプラグインとの互換性の問題に直面することはありません。また、WordPressのコア開発におけるベストプラクティスやセキュリティ基準に従うことができるため、コードベースの長期的なメンテナビリティと安全性を保証できます。これは特にビジネスプロジェクトにとって非常に重要です。最後に、これはWordPressのテンプレート階層構造を深く理解するための優れた学習機会となります。WP_QueryテーマカスタマイザーAPIおよびフックactions と filters）などの核心概念です。これらの知識は、どのWordPress開発者にとっても非常に重要です。

準備作業にはいくつかの重要なステップがあります：まず、ローカルまたはオンラインのWordPress開発環境を用意すること、VS CodeやPhpStormのような優れたコードエディタを使用すること、そしてHTML、CSS、PHP、JavaScriptの基本知識を持っていることです。それでは、最初のテーマファイルの作成を始めましょう。

推薦図書 WordPressテーマ開発完全ガイド：入門から上級まで、オリジナルテーマを構築する方法。

テーマの基本構造とコアファイルの構築

有効なWordPressテーマには、少なくとも2つのコアファイルが必要です：index.php と style.css後者はスタイルを提供するだけでなく、WordPressにテーマに関するメタ情報も含んでいます。まずはテーマディレクトリの作成から始めましょう。

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

テーマディレクトリとスタイルシートを作成する

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

次に、作成します。 style.css ファイルを作成し、そのファイルの冒頭に必要なコメントブロックを追加してください。これらのコメントは、WordPressがテーマを認識するために必要です。

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain 国際化のために使用され、後で翻訳関数を呼び出す際に必要になります。

基本的なインデックステンプレートを構築する

index.php これはトピックのデフォルトテンプレートであり、テンプレート階層構造の最終的なリタイアポイント（つまり、他のテンプレートがすべて失敗した場合に使用されるテンプレート）でもあります。非常に基本的な構造を持っています。 index.php ウェブサイトがどのような状況下でもコンテンツを正しく表示できるようにすることができます。

推薦図書 WordPressテーマ開発の完全ガイド：ゼロから高性能なカスタムテーマを構築する。

<!DOCTYPE html>
<html no numeric noise key 1009>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1006>
    

<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>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 循环内容将在这里展示
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>著作権...</p>
    </footer>


</body>
</html>

この時点で、これら2つのファイルをテーマディレクトリに置くと、WordPressの管理画面の「外観」→「テーマ」で自分のテーマを確認し、有効にすることができます。見た目は非常にシンプルですが、すでに機能が完備したテーマです。次に、モジュール化と機能の強化を行う必要があります。

テンプレートの階層構造とモジュール化設計を実現する

コードの可読性と保守性を高めるために、すべてのHTML構造を一つにまとめてしまうべきではありません。 index.php はい。WordPressのテンプレート階層システムにより、異なるページタイプに対して専用のテンプレートファイルを作成することができます。

ページヘッダー、ページフッター、サイドバーを分割する

作成 header.php、footer.php と sidebar.php これはモジュール化を実現するための第一歩です。

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

「将」 index.php あなたは何歳ですか？ <head> 到着しました。 <main> 「前の部分をこちらに移動してください。」 header.php。を <footer> その後の部分は以下のように移動させてください： footer.phpそして、その後に… index.php ここで使用されているのは get_header() と get_footer() 関数はそれらを導入します。

<?php get_header(); ?>

<main>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

 <!-- 如果创建了侧边栏文件 -->
<?php get_footer(); ?>

記事内容テンプレートを作成する

記事内容の表示に関しては、独立したテンプレート部分を作成することがベストプラクティスです。 content.php または template-parts/content.phpループ内の表示ロジックをその中に移動させてください。その後、 index.php `for`ループの中で使用します。 get_template_part() それを呼び出してください。

// 在 index.php 的循环中替换为：
while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

この関数はまず、以下のようなものを探します： content-video.php このようなフォーマットの特定テンプレートが見つからない場合は、デフォルト設定に戻ります。 content.php。

推薦図書 WordPressテーマ開発入門から上級まで：カスタムウェブサイトを構築するための核心ガイド。

WordPressのコア機能とテーマカスタマイズの統合

強力なテーマは、WordPressのコア機能（メニュー、ツールバー、記事のサムネイル、テーマカスタマイザーなど）と深く統合されていなければなりません。

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

テーマに関しては、 functions.php このファイル内で使用されています。 register_nav_menus() レストランの登録場所です。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

また、ツールバー（サイドバー）の領域にアイテムを登録することもできます。

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

はい。 header.php またはテンプレートファイル内で使用します。 wp_nav_menu() メニューを表示します。

テーマカスタマイザーにオプションを追加する

「テーマカスタマイザー（Customizer）」を使用すると、ユーザーはテーマ設定をリアルタイムでプレビューしたり、変更したりすることができます。 WP_Customize_Manager オブジェクトにオプションを追加します。

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

そしてその後、 footer.php ここでは、「使用」を使っています。 get_theme_mod() この値を出力してください。

<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 Your Company' ) ); ?></p>

トピックのパフォーマンスとセキュリティの最適化

テーマを構築する最後の重要なステップは、そのテーマが迅速かつ安全に機能することを確認することです。

スクリプトとスタイルが正しく読み込まれている

必ず使用しなければなりません。 wp_enqueue_scripts フックを使用してCSSおよびJavaScriptファイルを読み込むことで、依存関係が正しく処理され、ファイルの重複読み込みが防がれます。

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主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' );

基本的なセキュリティ対策を実施する

ユーザーやデータベースからの原始出力を絶対に信じてはいけません。すべての動的なコンテンツに対してエスケープ処理を行ってください。

  • 利用する esc_html(), esc_attr(), esc_url() HTML属性やコンテンツに出力されるテキストに対してエスケープ処理を行う。
  • データをデータベースに挿入する前に、以下の処理を行います： sanitize_text_field() などを清掃してください。
  • テンプレート内で使用する the_title(), the_content() などの関数では、一部のエスケープ処理が既に組み込まれています。カスタムフィールドについては、以下の方法を使用してください： echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

概要

以上の手順を通じて、非常に機能的なカスタムWordPressテーマの骨組みを構築しました。まずは最も基本的な部分から始めました。 style.css と index.php まず、テンプレートの階層構造とモジュール化設計のコンセプトを段階的に導入し、ヘッダーとフッターの部分を分離しました。その後、 functions.php WordPressのコア機能（ナビゲーションメニュー、ツールバー、記事のサムネイルなど）が統合されており、テーマカスタマイザーを通じてユーザーにフレンドリーな設定インターフェースが提供されています。最後に、その使用方法についても強調しました。 wp_enqueue_scripts リソースの読み込みを最適化し、出力データのエスケープ処理などのセキュリティ対策を実施することの重要性。

このテーマは基本的なものですが、構造が明確でベストプラクティスに従っているため、カスタム記事タイプ、高度なテーマオプション、AJAXによる読み込みなど、いかなる複雑な機能も後から追加しやすい基盤ができています。WordPress Codexや開発者向けリソースをさらに探求していくことで、その機能性をさらに拡張していくことができるでしょう。

FAQ よくある質問

WordPressのテーマを作成するには、どのようなプログラミング言語を習得する必要がありますか？

WordPressのテーマを構築するには、PHP、HTML、CSS、JavaScriptのスキルが必要です。PHPはサーバーサイドのロジック処理やWordPressのコアとのやり取りに使用されます。HTMLはページの骨格を形成し、CSSはデザインやレイアウトを担当します。JavaScriptはフロントエンドのインタラクションや動的な効果を実現するために使用されます。SQLについても基本的な知識があると、WordPressのデータベースクエリを理解するのに役立ちます。

主题的 functions.php 文件有什么特殊作用？

functions.php このファイルはテーマの「機能の中心」となるもので、非常に重要な役割を果たしています。これはページが読み込まれるたびに含まれるプラグインではなく、テーマ自体の一部です。このファイルに追加するコードによって、テーマのデフォルトの動作を変更したり、新しい機能（メニューやツールバーなど）を登録したり、記事のサムネイル表示などのサポートを追加したり、スクリプトやスタイルの読み込み順序を制御したり、さまざまなカスタム関数を定義したりすることができます。このファイルは、あなたのテーマとWordPressのコア機能をつなぐ橋渡しとなる存在なのです。

どうすれば自分で作成したWordPressテーマを多言語対応にできるでしょうか？

テーマを多言語に対応させる（国際化：i18n、ローカライゼーション：l10n）には主に2つのステップが関わります。まず、 style.css のコメントヘッダーや翻訳が必要なすべての文字列の周りには、次のように表示します： __（'Text', 'text-domain'） または _e（'Text', 'text-domain'） このような翻訳機能をラップ（つまり、別のコードやフレームワークの中に組み込む）する必要があります。次に、Poeditのようなツールを使用して、テーマファイルをスキャンし、翻訳データを生成します。 .pot テンプレートファイルを用意し、その後、各言語に対応するファイルを作成します。 .po そしてコンパイル後の .mo そのファイルをテーマの中に置いてください。 /languages/ これらの翻訳データはディレクトリ内に保存されています。ユーザーはLoco Translateのようなプラグインを使用して、これらの翻訳内容を管理することができます。

カスタムテーマとサブテーマ（Child Theme）はどのように選択すればよいのでしょうか？

それはあなたの具体的な目標と開発モデルに依存します。もしゼロから特定のプロジェクトのために独自のデザインや機能を構築し、別の親テーマのスタイルやテンプレートに依存するつもりがない場合は、カスタムテーマを作成するのが適切です。その利点は、コードが完全に自己管理されており、冗長がないことです。

サブテーマは、既存のペアレントテーマを変更したり拡張したりするために使用されます。AstraやGeneratePressのような人気のあるテーマをカスタマイズしたい場合でも、将来ペアレントテーマを安全にアップデートしてもカスタマイズ内容が失われないようにしたい場合は、サブテーマを使用する必要があります。サブテーマには、カスタマイズしたファイルのみが含まれます。 style.css, functions.php カバーされているテンプレートファイルを使用することで、親テーマのすべての機能を継承します。これはWordPress公式が推奨するカスタマイズ方法であり、アップデート時の互換性を最大限に保証することができます。

次はどうする？

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

拡大読書と実践的知識

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

タグ: