WordPressテーマ開発入門ガイド:ゼロから最初のテーマを作成する方法

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

開始前の準備作業

何らかのコードを書き始める前に、開発環境が整っていることを確認する必要があります。まず、XAMPP、MAMPのようなローカルサーバー環境、またはDockerを使用する必要があります。次に、コードエディターが不可欠であり、Visual Studio CodeやPHPStormなどがおすすめです。最も重要なのは、最新バージョンのWordPressをインストールし、正常に動作していることを確認することです。

次に、あなたのWordPressのインストールディレクトリ内で…wp-content/themesフォルダ内に新しいフォルダを作成してください。これがあなたのテーマディレクトリになります。例えば、その名前を「my_project」などにすることができます。my-first-themeこのディレクトリの名前は直接、あなたのトピック識別子となりますので、小文字、数字、ハイフンを使用することをお勧めします。

テーマフォルダ内には、WordPressテーマを起動するために必要な最低限の2つのファイルがあります:style.cssindex.phpこれらがなければ、WordPressはバックエンドの「外観」→「テーマ」リストであなたのテーマを認識することができません。

推薦図書 WordPressテーマ開発をゼロから学ぶ:パーソナライズされたウェブサイトを作成するための完全ガイド

テーマの核心的なファイル構造を理解する

機能が完全なWordPressテーマは、一連のテンプレートファイルで構成されており、これらのファイルは特定の命名規則に従っています。各ファイルは、ウェブサイトの異なる部分をレンダリングする役割を果たしています。

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

スタイルシートとテーマ情報の宣言

style.cssファイルはCSSスタイルを記述するためだけのものではありません。そのヘッダー部分にあるコメントエリアは、WordPressがテーマのメタデータを読み取るために使用される場所です。このエリアはファイルの最上部にあり、特定の形式に従っていなければなりません。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“「Text Domain」は国際化(インターナショナライゼーション)のために使用されるもので、翻訳ファイルを後から読み込む際の重要な識別子です。これらの情報をすべて入力したら、WordPressの管理画面のテーマページを更新してください。そうすると、「私の最初のテーマ」という名前のアイコンが表示されるはずです。

メインテンプレートファイルの役割

index.phpこれは、あなたのテーマのメインテンプレートファイルであり、ウェブサイトのデフォルトの「リセット」テンプレートでもあります。WordPressがより具体的なテンプレートファイルを見つけられない場合(例えば…)single.phpまたはpage.phpその場合には、以下の方法を使用します:index.phpその最も基本的な構造は、WordPressのヘッダー部分、メインのコンテンツ部分、そしてフッター部分を呼び出すことです。

<?php get_header(); ?>

<main id="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(); ?>

拡張基本テンプレートと機能の導入

のみindex.phpstyle.cssそれだけでは不十分です。ヘッダー、フッター、サイドバーなどの部分を分離し、構造をより明確にする必要があります。また、テーマの核心的な機能も導入する必要があります。

推薦図書 ゼロから始めましょう:WordPressのカスタムテーマを開発する方法を手取り足取り教えます。

ヘッダー部分とフッター部分のテンプレートを分離する

作成header.phpこのファイルには、ドキュメントのタイプを宣言する情報やHTMLのコードが含まれています。ウェブサイトのタイトルやナビゲーションエリアにも使用されています。wp_head()フックを使用することで、プラグインと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">
    
</head>
<body no numeric noise key 1003>

<header>
    <h1><a href="/ja/</?php echo esc_url( home_url( '/' ) ); ?>">ブログの名前を表示するには?php bloginfo( 'name' ); ?&gt;</a></h1>
</header>

作成footer.phpこのファイルにはウェブサイトのフッター情報が含まれており、ファイルの最後に何らかの処理が実行されています。wp_footer()フック。

<footer>
    <p>©</p>
</footer>

</body>
</html>

そうすると、index.phpその中で、私たちはそれを使用することができます。get_header()get_footer()関数を使ってそれらを導入します。

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

機能ファイルを作成する

functions.phpこれはテーマの「脳」とも呼ばれる部分で、機能の追加、メニューの登録、特別な画像の有効化、サイドバーの設定などを行うために使用されます。これはテンプレートファイルではなく、テーマが初期化される際に自動的に読み込まれるPHPファイルです。

以下は…functions.php以下是一个基本的示例:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

より多くのテンプレートファイルを作成してください。

異なるタイプのページにより適したレイアウトを提供するために、より多くの専用のテンプレートファイルを作成する必要があります。

推薦図書 インストールから習得まで:WordPressによるウェブサイト構築の完全ガイドと実用テクニックの解説

記事の単一ページとページテンプレート

single.php単一のブログ記事をレンダリングするために使用されます。その構造は…index.php似ていますが、通常はコメントテンプレートが含まれています。comments.phpの呼び出し。

page.php静的なページをレンダリングするために使用されます。通常、カテゴリーやタグなどのメタデータは表示されず、ページのコンテンツ自体により焦点が当てられます。

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

記事アーカイブリストテンプレート

archive.phpアーカイブページにカテゴリ、タグ、著者、日付などを表示するために使用されます。条件タグなどを利用することができます。is_category()is_tag()異なるアーカイブタイプを区別し、それぞれに対応するタイトルを表示するためです。

404エラーページを作成します。

404.phpこれは、ユーザーが存在しないURLにアクセスしたときに表示されるページです。良い404ページには、ユーザーフレンドリーなメッセージ、検索ボックス、そして主要なページへのリンクが含まれているべきで、ユーザーが必要なコンテンツを見つけるのを助けるべきです。

概要

このガイドを通じて、フォルダーやコアファイルの作成から、テンプレートの階層構造の理解、さらにはテーマ機能の拡張や専用テンプレートの作成に至るまでの全プロセスを完了しました。あなたは、基本的な構造を持ち、WordPressに認識され、拡張機能も備えたテーマを構築しました。これはシンプルに見えるかもしれませんが、すべての核心的な概念が含まれています。次に、テンプレートタグやカスタムクエリ、WordPressのループのさらなる使い方、そしてカスタム記事タイプやテーマカスタマイザーオプションの作成方法について深く学ぶことができます。これにより、あなたのテーマの機能をより強力でパーソナライズされたものにすることができるでしょう。

FAQ よくある質問

###… なぜ私のテーマがWordPressの管理画面に表示されないのでしょうか?
まず、ご自身の「トピック」フォルダーが正しい場所に配置されているかを確認してください。wp-content/themes/ディレクトリ内にあります。次に、フォルダ内に必要なファイルやディレクトリが含まれているかを確認してください。style.cssindex.phpファイルです。最後に、開いてください。style.cssファイルについては、上部のトピック情報のコメントブロックの形式が完全に正しいことを確認してください。特に…Theme Name:この行です。

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

あなたは「テーマについて」何かをする必要があります。functions.phpファイルに一行のコードを追加して、この機能を有効にします。使用方法は以下の通りです:add_theme_support( ‘custom-logo’ )この機能を有効にすると、ユーザーは「外観」→「カスタマイズ」→「サイトのアイデンティティ」でロゴをアップロードしたり設定したりできるようになります。また、あなたも以下の手順を行う必要があります:header.php適切な場所で使用してください。the_custom_logo()関数を使ってそれを表示します。

functions.phpファイルとプラグインにはどのような違いがありますか?

functions.phpその機能は現在アクティブなテーマに密接に結びついています。テーマを切り替えると、これらの機能は利用できなくなります。一方、プラグインの機能はテーマとは独立しており、どのテーマを使用していても、プラグインが有効になっていればその機能は正常に動作します。したがって、もしその機能がテーマの視覚的な表現(例えば、登録フォームの配置やレイアウトの定義)に強く依存している場合は、プラグインを使用することをお勧めします。functions.php中;もし汎用的な機能(連絡フォームやSEO最適化など)であれば、プラグインとして作成する方が適しています。

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

あなたは2つのことをしっかりと行う必要があります。第一に、開発時には、ユーザーに表示されるすべての文字列に対して翻訳関数を適用する必要があります。例えば、__( ‘文本’, ‘my-first-theme’ )または_e( ‘文本’, ‘my-first-theme’ )そして、確実に…‘my-first-theme’そしてstyle.css第一に、宣言されている「Text Domain」と一致していることを確認してください。第二に、Poeditのようなツールを使用して、テーマコードから翻訳が必要なすべての文字列を抽出し、翻訳用のファイルを生成してください。.potファイルは、その後翻訳者によって対応する言語に翻訳されます。.poそしてコンパイル後の.moファイルをテーマの中に配置してください。/languages/ディレクトリ内にあります。