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

ゼロからWordPressテーマの開発を学ぶ：カスタマイズされたウェブサイトを作るための基本ガイド

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

ワードプレステーマ開発の中心コンセプト

コードを深く掘り下げる前に、WordPressテーマを構成する基本要素を理解することが非常に重要です。テーマとは単なるPHPやCSSファイルの集まりではなく、特定の構造に従い、WordPressのコアと密接に連携するアプリケーションです。その中心となるのがテンプレートの階層システムであり、このシステムによってWordPressは現在アクセスしているページの種類（ホームページ、記事ページ、固定ページ、カテゴリーアーカイブなど）に応じて適切なテンプレートファイルを選択し、レンダリングします。

最も基本的なテーマには、2つのファイルが含まれていなければなりません：style.cssとindex.phpその中で、style.cssスタイルシートだけでなく、あるテーマの「身分証明書」のようなものでもあります。そのファイルのヘッダー部分にあるコメントブロックには、テーマの名前、作者、説明、バージョンなどのメタ情報が含まれています。index.phpこれはデフォルトのテンプレートファイルであり、より具体的なテンプレートファイルが存在しない場合にWordPressはこのデフォルトテンプレートを使用するようになります。

テーマは、一連の標準化されたテンプレートファイルを通じてコンテンツを整理しています。例えば…single.php単一の記事を表示するために使用されます。page.php独立ページを表示するために使用されます。archive.php記事のアーカイブリストを表示するためのものです。開発の鍵は、WordPressが提供する多数の組み込み関数を理解し、それらを活用することにあります。the_title()、the_content()、wp_head()とwp_footer()これらの関数はデータベースからデータを抽出し、安全にページ上に表示します。これはテーマの外観とウェブサイトのコンテンツを結びつけるための橋渡し役となります。

推薦図書 自分に合ったWordPressテーマを選びカスタマイズする方法。

最初のトピックを構築しましょう：基本的なファイル構造

では、「MyFirstTheme」という名前のミニマルなテーマを作成して、開発プロセスに慣れていきましょう。まず、WordPressのインストールディレクトリ内で…wp-content/themes/以下に新しいフォルダを作成し、その名前を「new_folder」とします。myfirsttheme。

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

スタイルシートファイルを作成する

まず、トピック情報ヘッダーファイルを作成します。style.cssこのファイルには、テーマのメタデータが定義されています。

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text Domainこれは国際化のためのもので、後続の翻訳機能の準備をするためのものです。これ以降、ウェブサイトのCSSスタイルの作成を始めることができます。

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

次に、基本的なものを作成します。index.phpファイルです。これがこのトピック全体の入口です。

<!DOCTYPE html>
<html no numeric noise key 1013>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1010>
    <header>
        <h1><a href="/ja/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
                <div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
            </article>
        終わりました。ありがとうございました。
    </main>

<footer>
        <p>©</p>
    </footer>
    
</body>
</html>

このコードは、完全なHTML5ページ構造を構築しています。wp_head()とwp_footer()フックを使用すると、プラグインやテーマがページのヘッダーやフッターにCSSやJSなどのコードを挿入することができます。body_class()この関数は一連のCSSクラス名を出力するため、条件付きのスタイル設計を容易に行うことができます。the_post()関数はループ内でグローバル変数を設定しています。$post変数を使用することで…the_title()とthe_content()現在の記事のデータを正しく出力できます。

推薦図書 プロフェッショナルなウェブサイトを作成する：WordPressテーマの選択とカスタマイズのための究極ガイド。

機能ファイルを導入する

たとえ、ただ一つだけのものであっても…style.cssとindex.phpそのテーマはすでに動作可能ですが、完全なテーマには通常、さらに多くの要素が含まれます。functions.phpこのファイルはテンプレートファイルではなく、WordPressの各アクションフックやフィルターフックに関数をマウントするための「機能プラグイン」です。

作成functions.phpこのファイルは、テーマサポート機能の追加や、スタイルシートやスクリプトの順序立てての読み込みを行うために使用されます。

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

とおすadd_theme_support()この関数により、現代のWordPressテーマでよく使用される機能が有効になりました。wp_enqueue_style()これはスタイルシートを正しく導入するための標準的な方法であり、依存関係の管理や重複読み込みの回避を実現します。

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

高度な開発：テンプレートコンポーネントとループ制御

テーマの基本機能が完備された後、コードのメンテナビリティと再利用性を向上させるために、テンプレートコンポーネントやより高度なループ制御の仕組みを学ぶ必要があります。

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

「将」index.phpページのヘッダー、フッター、サイドバーなどの共通部分を独立したテンプレートコンポーネントファイルに分割することは、標準的な慣行です。header.php、footer.phpとsidebar.php。

「将」index.phpあなたは何歳ですか？<body>タグの前にあるすべてのコードを移動してください。header.php。を</body>と</html>タグの前にあるすべてのコード（フッターの内容を含む）wp_footer()）移動到footer.phpそして、その後に…index.phpここで使用されているのはget_header()とget_footer()関数を使ってそれらを導入します。

推薦図書 開発からデプロイまで：プロフェッショナルレベルのWordPressテーマを構築して最適化する方法。

修正後のindex.php本文の主体部分は以下の通りです：

<?php get_header(); ?>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
            <div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
        </article>
    終わりました。ありがとうございました。
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    endif; 終わり
</main>

カスタムページテンプレートの作成

WordPressでは、特定のページ用にカスタムテンプレートを作成することができます。例えば、全幅のページテンプレートを作成する場合です。新しいPHPファイルを作成してください。template-fullwidth.phpファイルの冒頭に、以下のテンプレート名の注記を追加してください：

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
            <div class="entry-content">
                あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

ページを作成または編集する際に、「ページ属性」の「テンプレート」ドロップダウンリストから「全幅ページテンプレート」を選択することができます。これにより、テンプレートシステムの柔軟性が実感できます。

メインループの制御とカスタムクエリの実行

はい。archive.phpまたは、カテゴリページでは、メインループの動作を変更する必要があるかもしれません。使用方法は以下の通りです。WP_Queryクラスでは、カスタムのクエリを作成することができます。

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

カスタムクエリループが終了した後に必ず使用してください。wp_reset_postdata()これにより、グローバル変数がメインループの状態に復帰し、後続の機能でエラーが発生するのを防ぐことができます。

トピックの最適化とベストプラクティス

開発が完了した後、テーマの堅牢性（信頼性）、安全性、およびパフォーマンスを確認することは、リリース前の最後のステップです。

セキュリティと国際化を確保する

すべての動的に生成されるコンテンツにはエスケープ処理を行う必要があります。WordPressが提供するエスケープ関数を使用してください。esc_html()、esc_attr()、esc_url()。についての翻訳では、以下のように行います：__()进行字符串翻译，使用_e()以前、私たちは…functions.phpテキストフィールドはすでに設定されています。myfirsttheme。

// 正确示例
echo '<a href="/ja/' . esc_url($user_profile_link) . '/">'`. esc_html($user_name)`.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

ツールバー領域を追加します。

サイドバー（Sidebar）はWordPressの定番機能です。functions.phpサイドバーのツール領域に登録します。

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

そしてその後、sidebar.phpここでは、「使用」を使っています。dynamic_sidebar()関数を使ってそれを呼び出します。

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

パフォーマンス最適化に関する考慮事項

テーマの読み込み速度を最適化することは非常に重要です。CSSファイルとJavaScriptファイルが正しく統合され、圧縮されていることを確認してください（これは通常、WebpackやGulpなどのビルドツールを使用して開発段階で行われます）。add_image_size()適切な画像サイズを設定し、フロントエンドで過大な画像を読み込むのを避けましょう。スクリプトについては、必要ない場合は使用しないでください。wp_dequeue_script()スクリプトを削除し、ページのフッターで読み込まれるようにしてください（そのためには…）。wp_enqueue_script()の最後のパラメータを以下のように設定します：true）。

概要

WordPressのテーマ開発とは、テンプレートの階層構造やフック関数といった基本概念を理解することから始まり、基本的なファイル構造を構築し、テンプレートコンポーネントやカスタムクエリを活用してモジュール化された設計を行い、最終的にはセキュリティの強化やパフォーマンスの最適化を行うまでの一連のプロセスです。WordPressの公式なコーディングスタンダードやベストプラクティスに従うことで、開発者は美しく、効率的で、セキュアで、メンテナンスが容易なテーマを作成することができます。重要なのは、継続的に実践を積むことです。index.phpとstyle.cssまずは簡単なテンプレートファイルから始めて、徐々により複雑なテンプレートファイルに挑戦していきましょう。functions.phpこれらの機能を活用することで、最終的には完全にニーズに合ったパーソナライズされたウェブサイトを作成することができるでしょう。

FAQ よくある質問

没有编程基础可以学习WordPress主题开发吗？

はい、可能ですが、基礎知識を学ぶために時間が必要です。まずはHTMLとCSSをマスターすることをお勧めします。これらはウェブページの外観を構築するための基本要素です。その後、PHPの文法を段階的に学んでいきましょう。なぜならWordPressのコア部分はPHPで書かれているからです。最後に、WordPress特有の関数やフックを活用して開発を行ってください。既存のテーマを修正することから始めると、学習に非常に役立ちます。

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

functions.phpこれはテーマの一部であり、その機能はテーマの外観や表示方法と密接に関連しています。ユーザーがテーマを切り替えるとき、functions.phpその機能はテーマを変更すると無効になります。一方、プラグインが提供する機能は通常テーマとは独立しており、ウェブサイトに特定の機能（連絡フォームやSEO最適化など）を追加することを目的としています。そのため、テーマを変更してもプラグインの機能は引き続き利用できます。もし何らかの機能がテーマのビジュアルデザインとは関係がない場合、プラグインとして実装する方が適しています。

なぜ私のカスタムページテンプレートがドロップダウンリストに表示されないのでしょうか？

カスタムテンプレートファイルがテーマのルートディレクトリ内にあるかを確認してください。また、ファイルの冒頭にあるテンプレート名のコメントブロックの形式が正しいかも確認してください。コメントブロックはPHPのコメントとして記述されていなければならず、「Template Name:」という行が正確に記載されている必要があります。さらに、ファイルが存在することも確認してください。.phpサフィックスを追加し、WordPressの管理画面からキャッシュを更新しました。

私のテーマで子テーマ（Child Theme）をサポートするにはどうすればいいですか？

あなたのテーマをサブテーマを通じて安全にカスタマイズできるようにするために、開発時にはいくつかのルールに従う必要があります。get_template_directory_uri()親テーマのリソースを参照するために使用され、子テーマではそれが利用されます。get_stylesheet_directory_uri()複写可能な関数を以下のようにラップします：if (!function_exists(‘…’))条件文の中で、ドキュメント内においてテーマがサブテーマをサポートしていることを明確に説明し、基本的なサブテーマも提供してください。style.css例。

開発テーマを作成する際には、どのようなコーディング規格を遵守しなければならないでしょうか？

強く遵守することをお勧めします。WordPress公式のPHPコーディングスタンダードとCSSコーディングスタンダードこれには、文字列を定義する際にシングルクォーテーションを使用すること（変数を解析する必要がない場合を除く）、インデントにスペースを使用すること、ブロックを構成するための大括弧の行挿入の仕方、関数や変数の名前に小文字とアンダースコアを使用することなどが含まれます。これらの規範に従うことで、他の開発者があなたのコードをより容易に理解し、受け入れることができます。特に、コードを公式のリポジトリに提出する際には重要です。

次はどうする？

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

拡大読書と実践的知識

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

タグ: