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

WordPressテーマ開発入門：ゼロからカスタムテーマを構築する

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

WordPressのカスタムテーマを作成するには、まずその基本構造を理解する必要があります。最もシンプルなWordPressテーマとは、基本的に以下のような構造を持っています：/wp-content/themes/ディレクトリ内にあるフォルダには、2つの必須ファイルが含まれています。style.cssとindex.php前者はテーマのスタイルを定義するだけでなく、より重要なのはそのファイルのヘッダー部分にテーマのメタデータ（テーマ名、作者、説明など）が含まれていることです。後者はデフォルトのテンプレートファイルであり、WordPressがより具体的なテンプレートを見つけられない場合に使用されます。

これら2つのファイルに加えて、機能が完備されたテーマには通常、他のテンプレートファイルも含まれています。例えば、単一の記事を表示するためのテンプレートなどです。single.phpこれは記事リストを表示するために使用されます。archive.php、そしてページを表示するために使用されるものpage.phpこれらのテンプレートファイルを理解し、作成することは、テーマ開発の核心です。

コーディングを始める前に、XAMPP、MAMP、またはLocal by Flywheelなどの開発環境をローカルに構築することをお勧めします。これにより、オンラインのウェブサイトに影響を与えることなく、自由にテストやデバッグを行うことができます。また、テキストエディタやIDE（VS Code、PhpStormなど）が準備されていることを確認し、PHP、HTML、CSS、JavaScriptの基本知識に精通していることも大切です。

推薦図書 WordPressテーマ開発入門ガイド：ゼロから最初のテーマを作成する方法。

トピックの基本ファイルと構造を作成する

テーマフォルダーとスタイルシートを作成する

まず、/wp-content/themes/ディレクトリ内に新しいフォルダを作成し、例えば「example_folder」という名前にします。my-first-themeその後、そのフォルダ内に新しいファイルを作成してください。style.cssファイルを作成し、以下のファイルヘッダー情報を入力してください：

UltaHostのWordPressホスティングサービス
30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。
UltaHost ロゴ アクセスページ 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题入门示例。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

このコメントは、WordPressがテーマを認識するための鍵となるものです。次に、このCSSファイルにいくつかの基本的なスタイルを追加することができます。

コアテンプレートファイルを作成します。

次に、作成してください。index.phpファイルです。これはすべてのページのバックアップテンプレートです。非常にシンプルなものです。index.phpウェブサイトのヘッダー、繰り返し処理されるコンテンツ、そしてフッターの基本構造のみを含むことができます。

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1008>
    
    <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
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

このファイルでは、WordPressのコア関数が複数使用されています。例えば：wp_head()、body_class()、the_content()など、これらはテーマの正常な動作にとって非常に重要です。

テンプレートの階層構造を理解し、それに基づいて実装することです。

WordPressでは、「テンプレート階層（Template Hierarchy）」と呼ばれるルールセットを用いて、特定のページリクエストに対してどのテンプレートファイルを使用するかを決定しています。この階層構造を理解することは、テーマを効率的に開発するための鍵となります。

推薦図書 プロフェッショナルなウェブサイトを構築するために不可欠：WordPressテーマ開発とカスタマイズの完全ガイド。

よく使われるテンプレートファイルとその役割

ウェブサイトのホームページにアクセスすると、WordPressは順番に以下の処理を行います：front-page.php、home.phpそして最後に、index.phpブログ記事一覧ページについては、それが検索を行います。home.php単一の記事については、優先的にそれを使用します。single-post.phpまたは一般的なsingle.php静的ページの場合は、以下の方法を使用します：page.phpカテゴリーページに対応します。category.php検索ページに対応しています。search.php404エラーページに対応する処理404.php。

これらの特定のテンプレートファイルを作成することで、ウェブサイトのさまざまな部分に完全に異なるレイアウトやスタイルを設計することができます。

テンプレートコンポーネントを使用してコードを分割する

コードの整然とした構造と再利用性を保つために、繰り返し出現する部分を独立した「テンプレートコンポーネント」ファイルに分割するべきです。最も一般的な分割方法は、ヘッダー（Header）、フッター（Footer）、サイドバー（Sidebar）をそれぞれ別のファイルに分けることです。

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

作成header.phpファイル、それを…index.phpあなたは何歳ですか？タグの開始から…タグの前にあるすべてのコードをその中に移動させてください。その後、元の場所に元のコードを再び使用してください。get_header()関数の呼び出し。

// 在 index.php 中替换原来的代码
<?php get_header(); ?>

同様に、作成します。footer.phpファイルにフッターコードを保存し、それを使用します。get_footer()呼び出すこともできます。また、新たに作成することも可能です。sidebar.phpそして、それを使用してください。get_sidebar()この方法により、コードのモジュール化の度合いが大幅に向上しました。

WordPressのコア機能を統合する

記事の繰り返し表示機能と特徴的な画像の導入

“「ループ」とは、WordPressがデータベースから記事を取得し表示するための核心的なメカニズムです。index.phpまたはsingle.phpここでは、私たちは「使用」（use）という言葉を使っています。if ( have_posts() ) : while ( have_posts() ) : the_post();これでループが開始されます。ループの中では、一連のテンプレートタグを使用して記事情報を出力することができます。

推薦図書 WordPressプラグイン開発の実践ガイドブック。ゼロから始めて、あなたの最初のプラグインを構築しましょう。。

例えば、使うことでthe_title()記事のタイトル：the_permalink()出力記事のリンク：the_content()記事の内容を出力します。the_excerpt()記事の要約を出力するには、まず記事に含まれる特徴的な画像を取り出す必要があります。そのためには、以下の手順を踏む必要があります：functions.phpファイルにテーマサポートに関する声明を追加します：

add_theme_support( 'post-thumbnails' );

その後、テンプレートファイルのループ内で使用することができます。the_post_thumbnail()特徴的な画像を表示してください。

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

`functions.php`ファイルを作成してテーマを拡張します。

functions.phpこのファイルは、あなたのテーマの「コントロールセンター」のようなものです。必須ではありませんが、ほとんどのテーマで利用されています。ここでは、機能を追加したり、メニューを登録したり、ツールバー領域を定義したり、スクリプトやスタイルシートを読み込んだりすることができます。

基本的なものfunctions.php以下の内容が含まれる可能性があります：

__( '顶部菜单', 'my-first-theme' ),
            'footer-menu' =&gt; __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

// 添加小工具区域支持
function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; __( '在此添加小工具。', 'my-first-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', 'mytheme_widgets_init' );

// 引入主题样式表和脚本
function mytheme_enqueue_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 引入主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()-&gt;get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
?&gt;

スタイルの追加とレスポンシブデザインの実装

基本的なCSSフレームワークを構築する

からstyle.cssまず、テーマの基本的な視覚スタイルを設定しましょう。グローバルなボックスモデル、フォント、色などを設定することから始めるとよいでしょう。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

モバイル端を優先したレスポンシブレイアウトを実現する

現代のウェブデザインでは、レスポンシブデザインが必須です。モバイル端末を優先する方針を採用し、まず小さな画面向けにデザインを作成し、その後メディアクエリ（Media Queries）を使用して大きな画面向けに追加のスタイルを適用するか、既存のスタイルを上書きします。

/* 移动端基础样式 */
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}
.main-navigation li {
    border-bottom: 1px solid #ddd;
}

/* 平板及以上设备 */
@media (min-width: 768px) {
    .main-navigation ul {
        flex-direction: row;
    }
    .main-navigation li {
        border-bottom: none;
        margin-right: 2rem;
    }
    .content-area {
        width: 70%;
        float: left;
    }
    .widget-area {
        width: 28%;
        float: right;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

画像もレスポンシブにするには、CSSを使用して設定する必要があります。max-width: 100%; height: auto;、またはWordPressに標準で搭載されている機能を使用することもできます。srcset属性（Attribute）the_post_thumbnail()デフォルトでは出力されます。

概要

ゼロからWordPressテーマを開発することは、体系的な学習プロセスです。これには、基本的なファイル構造の作成、テンプレートの階層構造の理解、テンプレートコンポーネントの分割、そしてそれらを組み合わせてテーマを完成させるまでの一連のステップが含まれます。functions.phpコア機能を統合した後、スタイリングの設計とレスポンシブ対応を行います。このプロセスを通じて、WordPressの仕組みを深く理解するだけでなく、ウェブサイトの外観や機能を完全にコントロールする能力も身に付けることができます。覚えておいてください：極めてシンプルな状態から始めることで……style.cssとindex.phpまずは機能を段階的に追加し、テストを行うことから始めるのが、安全で効率的な学習方法です。最初のテーマは非常にシンプルかもしれませんが、それによって将来的により複雑で専門的なプロジェクトを構築するためのしっかりとした基盤が築かれます。

FAQ よくある質問

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

完全な機能を持つWordPressテーマを開発するには、PHP、HTML、CSS、JavaScriptのスキルが必要です。PHPはコアとなり、ロジックの処理やWordPressの関数の呼び出しを行います。HTMLはページの構造を構築し、CSSはスタイルとレイアウトを担当します。JavaScriptはインタラクティブな効果や動的な機能の実現に使用されます。SQLについても基本的な知識があると、WordPressのデータベースクエリを理解するのに役立ちます。

なぜ私のカスタムテーマがバックエンドに表示されないのか？

これは通常、style.cssファイルヘッダのコメント情報に誤りがあるか、コメントが欠落しているためです。そのファイルがテーマフォルダのルートディレクトリにあること、そしてファイルの冒頭にあるコメントブロックの形式が正しく、「Theme Name」などの必須情報が含まれていることを確認してください。さらに、テーマフォルダの権限も正しいかを確認してください。style.cssファイル自体には文法的な誤りはありません。

自分のテーマにカスタムのページテンプレートをどのように追加するか？

まず、あなたのテーマディレクトリ内に新しいPHPファイルを作成してください。例えば、`new_php_file.php`といった名前で。template-fullwidth.phpこのファイルの最上部に、テンプレート名を定義するための特別なコメントを追加してください。その後、このファイルに任意のPHPコードやHTMLコードを記述しても構いません。ただし、他のテンプレートファイルからの参照を忘れないでください。page.php基本的構造（コピー循環など）を作成します。作成が完了すると、WordPressの管理画面でページを編集する際に、「ページ属性」の「テンプレート」ドロップダウンリストから自分で作成したカスタムテンプレートを選ぶことができるようになります。

開発時にPHPのエラーを安全にデバッグするにはどうすればよいでしょうか？

ローカル開発環境での開発をお勧めします。wp-config.phpファイル内でWordPressのデバッグモードを有効にします。WP_DEBUG定数は次のように設定されています。trueこれにより、すべてのPHPエラー、警告、および通知が画面上に表示されます。より詳細なデバッグを行うには、以下の方法を使用できます：WP_DEBUG_LOGエラーを記録してください。/wp-content/debug.logファイルの中にあります。ウェブサイトを公開する前に、必ずデバッグモードをオフにしてください。

次はどうする？

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

拡大読書と実践的知識

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

タグ: