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

WordPressテーマ開発入門：ゼロから初めてのカスタマイズテーマの作成

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

準備作業と環境設定

コードの執筆を始める前に、適切な開発環境が必要です。これには、ローカルのサーバー環境（XAMPP、MAMP、またはLocal by Flywheelなど）とコードエディタ（VS Code、PhpStorm、Sublime Textなど）が含まれます。ローカル環境がPHP（バージョン7.4以上）およびMySQL/MariaDBをサポートしていることを確認してください。

次に、WordPressのインストールディレクトリ内で…wp-content/themesフォルダ内に新しいフォルダを作成します。これがあなたのテーマディレクトリになります。例えば、「my_themes」という名前のフォルダを作成することができます。my-first-themeこのフォルダーです。ここにあなたのすべてのテーマファイルが保管されています。まさに「家」のようなものです。

WordPressのテーマにおいて、最も基本的なファイルはたった2つだけです：style.cssとindex.phpその中で、style.cssスタイルシートだけでなく、テーマの「身分証明書」のようなものでもあります。このファイルのヘッダー部分にあるコメント情報を通じて、WordPressにテーマの名前、作者、説明などのメタデータを宣言します。

推薦図書 WordPressテーマ開発の詳細解析：初心者から上級者までの核心技術ガイド。

テーマ情報ファイルを作成する

あなたのテーマフォルダ内に、新しいファイルを作成してください。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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

このコメントは必要不可欠です。WordPressはまさにこのコメントを読み取ることによって動作しています。Theme Nameこの行は、バックエンドのテーマリスト内であなたのテーマを識別し、表示するためのものです。その他の情報については…Text Domainこれは国際化（翻訳）のための準備です。

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

次に、最も基本的なものを作成します。index.phpそのファイルです。たとえそのファイルが一時的に空の状態であっても、問題ありません。style.css情報が完全であれば、あなたのテーマはWordPressの管理画面（バックエンド）の「外観」→「テーマ」のリストに表示され、有効にすることができます。さて、次に…index.phpブログのタイトルと記事の内容を出力するための、最もシンプルなHTML構造を書き込んでください。

<!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
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article>
                    <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
                    <div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_foot(); ?>
</body>
</html>

このコードでは、WordPressのコア機能が複数使用されています。模板标签例えばbloginfo()、the_title()、the_content()関数wp_head()とwp_foot()これは非常に重要な機能であり、WordPressのコア、プラグイン、その他のスクリプトがページのヘッダーやフッターに必要なコードを挿入できるようにします。

テンプレートの階層構造を理解し、コアテンプレートを作成する方法

WordPressは、「WordPress Core」と呼ばれるソフトウェアコアを使用しています。模板层级特定のページリクエストに対してどのテンプレートファイルを使用してレンダリングするかを決定するためのルールです。これはテーマ開発において最も重要な概念の一つです。簡単に言うと、WordPressは最も具体的なテンプレートファイルから検索を開始し、該当するファイルが存在しない場合はより一般的なファイルに移行し、最終的にはデフォルトのテンプレートファイルに戻ります。index.php。

推薦図書 WordPressテーマ開発入門ガイド：ゼロから最初のカスタムテーマを構築する。

記事詳細ページのテンプレートを作成します。

ユーザーが単一の記事にアクセスした場合、WordPressはまず以下のものを優先的に検索します：single-post.phpもし該当するものが存在しない場合は、代わりに以下の方法を使用してください。single.phpそして最後に、index.phpでは、一つ作ってみましょう。single.phpこれは、特定の記事の表示を制御するためのものです。

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
            <header class="entry-header">
                あなたのウェブサイトのページにこのコードを追加すると、タイトルが自動的に<h1>として表示されます。
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
            </div>
            <footer class="entry-footer">
                カテゴリ：
            </footer>
        </article>
        <?php
        // 上一篇/下一篇导航
        the_post_navigation();
        // 评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>

このテンプレートには、3つの重要なテンプレートコンポーネントが導入されています：get_header()、get_sidebar()とget_footer()それぞれ、導入に使用されます。header.php、sidebar.phpとfooter.phpファイルは、コードの再利用とモジュール化設計を実現するための鍵です。

ページテンプレートを作成する

静的なページ（例えば「关于我们」のようなページ）については、WordPressは自動的にそのコンテンツを探し出します。page.php。作成page.phpその構造は…single.php似ていますが、通常はカテゴリーやタグ、公開日時などのメタ情報は表示されません。

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

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
            <header class="entry-header">
                あなたのウェブサイトのページにこのコードを追加すると、タイトルが自動的に<h1>として表示されます。
            </header>
            <div class="entry-content">
                あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

トピック機能とスタイルの実装

完全なテーマには、テンプレートファイルだけでなく、それを実際に動作させるためのその他のコンポーネントや設定も必要です。functions.phpこのファイルを使用して機能を追加したり、メニューやツールバーの領域を設定したりすることができます。style.cssスタイルを追加します。

テーマ機能関連のファンクションファイル

あなたのテーマのルートディレクトリ内にファイルを作成してください。functions.phpこのファイルはテーマの初期化時に自動的に読み込まれ、すべてのカスタムPHP関数やフック（hook）が保存されています。

<?php
/**
 * 我的第一个主题的功能函数
 */

// 添加主题支持功能
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像（缩略图）功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
        )
    );
    // 添加HTML5标记支持
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

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

// 加载主题样式表和脚本
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 加载通用CSS
    wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
    // 加载通用JavaScript
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

基本スタイルを追加する

さて、では次に…style.cssのコメントヘッダーの後に、いくつかの基本的なCSSを追加して、あなたのテーマをより美しくしましょう。

推薦図書 ワードプレステーマ開発の究極ガイド：ゼロからカスタムワードプレスウェブサイトテーマの作成。

/* 基础重置与排版 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

header {
    border-bottom: 2px solid #0073aa;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.entry-title {
    color: #222;
}

.site-main {
    float: left;
    width: 70%;
}

/* 侧边栏样式 */
.widget-area {
    float: right;
    width: 25%;
    padding-left: 5%;
}

/* 页脚样式 */
footer {
    clear: both;
    border-top: 1px solid #ddd;
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    color: #666;
}

モジュール化とテンプレートコンポーネント

コードのメンテナビリティと再利用性を高めるために、WordPressではヘッダー、フッター、サイドバーなどの繰り返し出現するページ要素を個別のテンプレートファイルに分割することを推奨しています。

ヘッダーとフッターのコンポーネントを作成します。

作成header.php、以下の内容を含んでいます：<!DOCTYPE html>「開始から開くまで」<main>タグの前にあるすべての内容。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>

<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary">メインコンテンツにジャンプ</a>
    <header id="masthead" class="site-header">
        <div class="site-branding">
            もし現在のページがフロントページであり、かつホームページである場合：
            ?&gt;
                <h1 class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></h1>
                <?php
            else :
                ?>
                <p class="site-title"><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">ブログの名前を表示するには？php bloginfo( 'name' ); ?&gt;</a></p>
                endif;
    $my_first_theme_description = get_bloginfo( 'description', 'display' );
    if ( $my_first_theme_description || is_customize_preview() ) :
      ?&gt;
                <p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
            endif; 終わり
        </div>
        <nav id="site-navigation" class="main-navigation">
            'primary',
                    'menu_id'        =&gt; 'primary-menu',
                )
            );
            ?&gt;
        </nav>
    </header>
    <div id="content" class="site-content">

それに応じて、作成します。footer.php、含まれている<div>\n</div><!-- #content -->その後のすべての内容。

    <div>\n</div><!-- #content -->
    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>&lt;?php printf( esc_html__( &#039;主题：%1$s&#039;, &#039;my-first-theme&#039; ), &#039;<a href="https://example.com/">我的第一个主题</a>' ); ?&gt;</p>
        </div>
    </footer>
<div>\n</div><!-- #page -->

</body>
</html>

作成sidebar.phpこれにより、ツールバー領域が表示されます。

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

これらの部品をすべて組み立てたら、あなたはそれを使うことができます。get_header()、get_footer()とget_sidebar()関数はすべてのテンプレートファイル内で簡潔に呼び出されています。

概要

このガイドを通じて、ゼロから基本的なWordPressテーマを構築する全てのプロセスを完了しました。開発環境の設定方法や、必要なテーマファイルの作成方法などを学びました。style.cssとindex.phpまた、WordPressのテンプレート階層システムを深く理解したことで、記事やページなどの異なるページタイプに合わせた専用のテンプレートを作成することができました。single.php， page.phpあなたはそれを実現する方法をマスターしました。functions.phpこのファイルには、テーマに応じた核心的な機能が追加されています。例えば、登録メニューや便利なツール、特徴的な画像のサポートなどです。さらに、モジュール化開発の考え方を実践し、ヘッダー、フッター、サイドバーを再利用可能なテンプレートコンポーネントに分割しました。header.php， footer.php， sidebar.phpこれにより、コードのメンテナビリティが大幅に向上しました。これはあくまで始まりに過ぎません。この基盤の上で、カスタムの記事タイプ、高度なテーマオプション、レスポンシブデザイン、JavaScriptによるインタラクションなどをさらに探求し、機能豊富でデザインが洗練されたWordPressテーマを段階的に構築していくことができます。

FAQ よくある質問

なぜ私のテーマがバックエンドで表示されないのでしょうか？

テーマフォルダーが正しく配置されていることを確認してください。wp-content/themes/ディレクトリ内にあり、その中に…style.cssファイルのヘッダー部分には、正しい形式で記述されたコメントブロックが含まれています。特に…Theme Name:この行は必ず存在し、正しくなければなりません。ファイルのエンコーディングはUTF-8（BOMなし）でなければなりません。

自分のテーマにカスタムロゴのサポートを追加するにはどうすればいいですか？

あなたのfunctions.phpファイルのmy_first_theme_setup関数内に、以下のような一行のコードを追加してください：add_theme_support( 'custom-logo' );追加した後、ユーザーはWordPressの管理画面（バックエンド）の「外観」→「カスタマイズ」→「サイトのアイデンティティ」でロゴをアップロードして設定することができます。そのためには、まず…header.phpここで使用されているのはthe_custom_logo()Logoを出力するための関数です。

修改了functions.php文件后网站出现白屏怎么办？

これは通常、次のような意味を持ちます：functions.phpファイルにPHPの文法エラーが存在します。WordPressはこの致命的なエラーのために実行を停止します。FTPまたはファイルマネージャーを使用してサーバーにアクセスし、エラーのあるファイルを修正する必要があります。functions.php名前を変更する（例えば、「××」から「××」に変更する）functions.php.bakウェブサイトが再びアクセス可能になるようにしてください。その後、コードを確認し修正した上で、正しいファイルを再アップロードしてください。ローカル開発環境でテストを行うことは、このような問題を防ぐための良い習慣です。

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

あなたはすでにそれをやっています。style.css設定が完了しました。Text Domain（テキストフィールド）、そしてfunctions.phpその文字列の中で使用されています。esc_html__( ‘文本’， ‘my-first-theme’ )このような翻訳機能です。次に、Poeditのようなツールを使用して、テーマファイル内の翻訳可能な文字列をスキャンし、翻訳データを生成する必要があります。.potテンプレートファイルを用意し、その後、各言語に対応するファイルを作成します。.poと.moファイルを取り出し、それらをトピックの中に置いてください。/languagesフォルダ内にあります。WordPressはサイトの言語設定に基づいて、対応する翻訳を自動的に読み込みます。

次はどうする？

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

拡大読書と実践的知識

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

タグ: