WordPressテーマ開発:ゼロからカスタムテーマを作成するための完全ガイド

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

WordPressテーマの基本構造

WordPress テーマは、基本的にwp-content/themes/ディレクトリ内にあるフォルダには、ウェブサイトの外観や機能を制御するための一連のファイルが含まれています。これらの核心的なファイルの役割を理解することは、開発を行う上での基礎となります。

テーマに必要なテンプレートファイル

各テーマには、2つの最も基本的なファイルを含める必要があります:style.cssindex.phpその中で、style.cssCSSスタイルを保存するだけでなく、そのファイルのヘッダー部分にあるコメントブロックにはテーマに関するメタ情報も含まれています。WordPressはこれらの情報を利用してテーマを識別します。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpこれはテーマのデフォルトテンプレートファイルであり、WordPressがより具体的なテンプレートを見つけられない場合には、このテンプレートを使用してページをレンダリングします。すべてのページに表示される「セーフネット」のようなものです。

推薦図書 高品質なウェブサイトの作成:WordPressテーマのカスタマイズと最適化の実践ガイド

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

異なるページの表示をより細かく制御するためには、さらに多くのテンプレートファイルを作成する必要があります。例えば、header.php通常、ドキュメントタイプの宣言が含まれています。<head>地域やウェブサイトのヘッダー部分;footer.phpその場合、ページフッターの内容と閉じ括弧が含まれます。sidebar.phpサイドバー用です。WordPressに内蔵されている関数などを使用して…get_header()get_footer()get_sidebar()これらの部分は他のテンプレートにも簡単に導入することができます。

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

さらに、以下のようなこともできます:single.php単一の記事に使用するためのものです。page.php独立ページ用です。archive.phpアーカイブリストの作成や管理に使用されます。functions.phpこの特別なファイルには、テーマを追加するための機能や特徴が含まれています。

トピックのホームページテンプレートを作成する

ホームページはウェブサイトの顔であり、通常、最もユニークなデザインが求められます。まずは構築から始めましょう。index.phpでは、内容を表示するためにループをどのように導入するかについて探っていきましょう。

ヘッダーとフッターを統合する

良い慣行の一つは、共通する部分をモジュール化することです。まず、テーマフォルダ内に新しいファイルを作成してください。header.phpfooter.php.でheader.phpその中で、あなたが含める必要がある内容は以下の通りです:<!DOCTYPE html>宣言(せんげん)とは、ある事実や意図、見解などを公に表明することです。法律文書や公式声明などでよく使われます。<html>タグの開始<head>エリア(使用)wp_head()フック(hook)により、プラグインやテーマでコードを挿入することができます。また、ウェブサイトのロゴやメインナビゲーションなどのページの冒頭部分も設定できます。

そして、index.php…の冒頭で、使用してください。<?php get_header(); ?>このヘッダーを導入するために…index.phpの末尾に、使用してください。<?php get_footer(); ?>(来引入)footer.phpその中には以下の内容を含める必要があります:wp_footer()フックによる呼び出しとクロージング</body></html>タグ。

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

ループを使用して記事を出力する

WordPressの核心は「The Loop」と呼ばれるもので、これはPHPコードの一節です。このThe Loopは、記事が存在するかどうかを確認し、存在する場合にはそれらを順番に表示するために使用されます。index.phpget_header()その後、以下の基本的なループコードを挿入することができます:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
            <div class="entry-content">
                あなたのコメントは受け付けられました。ありがとうございます。
            </div>
        </article>
      

    <p>申し訳ありませんが、該当する記事は見つかりませんでした。</p>
endif; 終わり

このコードでは、have_posts()the_post()関数駆動型ループ。the_title()the_permalink()the_excerpt()等模板标签用于输出文章的具体内容。这样,一个基本的文章列表页面就完成了。

テーマにスタイルとスクリプトを追加する

スタイルが設定されていないテーマは魅力的ではありません。CSSファイルとJavaScriptファイルを正しくキューに追加する必要があります。これはWordPressで推奨されている方法であり、依存関係が正しく保たれ、競合が発生するのを防ぐことができます。

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

スタイルシートを正しく読み込むには…

たとえstyle.cssそれは必要ですが、HTML内に直接リンクを設定するべきではありません。正しい方法は…functions.phpファイルで使用されているwp_enqueue_style()関数です。まず、トピックのルートディレクトリに作成してください。functions.phpファイルを開いたら、以下のコードを追加してください:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

このコードは関数を定義しており、WordPressに対してテーマのメインスタイルシートをどのように処理するかを指示しています。get_stylesheet_uri()取得したパスを「my-theme-style」というハンドル名でキューに追加します。add_action()このフックによって、この関数がメソッドチェーンに登録されます。wp_enqueue_scriptsこのアクションについては、ページが読み込まれる際に必ず実行されるようにしてください。

カスタムJavaScriptを導入する

JavaScriptファイルの導入方法も似ていますが、使用する方法は少し異なります。wp_enqueue_script()関数です。例えば、あなたが以下のような関数を持っているとします:js/script.jsそのファイルを追加するには、次のようにします:

推薦図書 入門から上級者まで:WordPressテーマ開発の完全ガイドと実践トレーニング

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

ここでのパラメータはそれぞれ以下を意味します:スクリプトハンドル、スクリプトのURL、依存関係の配列(例:array('jquery')バージョン番号、そしてフッターで読み込まれるかどうかtrue表示されています。</body>(プリロード)

拡張テーマ機能

functions.phpこれはテーマの「ツールボックス」であり、ここにさまざまな機能を追加することでテーマを強化することができます。コアのテンプレートファイルを変更する必要はありません。

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

テーマサポート機能を追加

WordPressには多くの内蔵機能がありますが、それらを有効にするには、使用しているテーマがその機能をサポートしていると明確に宣言している必要があります。これは…add_theme_support()関数の実装についてです。例えば、記事のサムネイル(特集画像)、カスタムロゴ、HTML5のマークアップをサポートするためには、以下のようにすることができます:functions.php「中に追加する:」

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )これらの設定がテーマの初期化時にできるだけ早く実行されるようにしてください。

登録ナビゲーションメニュー

ユーザーがバックエンドの「外観-メニュー」でナビゲーションを設定できるようにするには、まずメニューアイテムの位置を事前に登録する必要があります。register_nav_menus()関数:

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

登録後、テンプレートファイル(例えば…)を使用できるようになります。header.php)で使用されていますwp_nav_menu( array( 'theme_location' => 'primary' ) )このメニューが表示されました。

概要

「Create a file that contains…」style.cssindex.php基礎フォルダから始めて、段階的に完全なWordPressテーマを構築していきました。テンプレートの階層構造を理解することで、異なるタイプのページを正確に制御するための専用のテンプレートファイルを作成する方法を学びました。wp_enqueue_style()wp_enqueue_script()リソースを適切に管理することは、テーマの互換性とパフォーマンスを保証するための最善の方法です。最後に、これを活用してください。functions.phpファイルについては、以下の方法でアクセスできます:add_theme_support()register_nav_menus()これらの関数を使うことで、テーマに強力な機能を安全に追加することができます。これらの核心的なステップをマスターすれば、カスタマイズされたWordPressテーマを独自に開発するためのしっかりとした基盤が築かれるでしょう。

FAQ よくある質問

WordPressテーマを開発するには、どのような前提知識が必要ですか?

HTMLとCSSのしっかりとした基礎が必要であり、これによってウェブページの構造とスタイルを構築します。また、WordPressのテーマテンプレートは主にPHPで動作しているため、PHPの基本文法にも精通している必要があります。JavaScriptについては初歩的な知識があると、インタラクティブな機能を追加するのに役立ちます。さらに、WordPressの基本概念(記事、ページ、カテゴリ、タグなど)に精通していると、開発作業がよりスムーズに進むでしょう。

为什么必须使用wp_enqueue_style加载样式表,而不是直接link?

そのまま使用してください。<link>タグにスタイルシートのパスをハードコードする方法にはいくつか問題があります。まず、依存関係を適切に処理できない点です。例えば、あなたのスタイルが特定のフレームワークのスタイルに依存している場合があります。次に…wp_enqueue_styleプラグインや他のテーマのサブテーマが、あなたのスタイルを安全に上書きしたり変更したりできるようにすることができます。最も重要なのは、これがキャッシュやパフォーマンス最適化のプラグインとよりよく連携し、リソースの読み込み順序や効率を確保できる点です。これはWordPressエコシステムにおける標準的な慣行です。

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

functions.phpテーマ内で定義されたコードは、そのテーマに密接に関連しているため、ユーザーがテーマを切り替えるとこれらの機能は利用できなくなります。これらのコードは、テーマの視覚的な表示やレイアウトに直接関連する機能(例えば登録メニュー、特別な画像のサポート、サイドバーの定義など)に適しています。一方、プラグインが提供する機能は通常、テーマとは独立しており、ウェブサイトに特定の汎用的な機能(連絡フォーム、SEO最適化など)を追加することを目的としています。そのため、ユーザーがテーマを変更してもこれらの機能は引き続き利用できます。もし機能がテーマの外観とは関係がない場合は、それをプラグインとして実装する方が柔軟な選択肢になります。

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

テーマを国際化に対応させることは、グローバル市場に進出するための鍵です。まず、すべてのテーマテキストの出力箇所で、WordPressの翻訳機能を使用してください。例えば:__('文本', 'my-custom-theme')または_e('文本', 'my-custom-theme')どのmy-custom-themeそれはそうです。style.css中で定義されたテキストフィールドです。その後、Poeditのようなツールを使用して、テーマファイルをスキャンし、生成します。.potテンプレートファイルを使用することで、翻訳者はそれに基づいて異なる言語のコンテンツを作成することができます。.po.moファイルです。最後に、functions.phpあなたは中国を通してそれを達成しました。load_theme_textdomain()関数が翻訳ファイルを読み込みます。