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

WordPressテーマ開発入門ガイド：ゼロから自分のウェブサイトを構築する

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

準備作業と環境設定

コードの執筆を始める前に、適切な開発環境が必要です。これには、ローカルサーバー環境（XAMPP、MAMP、またはLocal by Flywheelなど）とコードエディタ（VS Code、Sublime Text、PHPStormなど）が含まれます。ローカルサーバー環境により、オンラインサーバーの環境をシミュレートすることができ、毎回の変更後にネットワークサーバーにアップロードする必要なく、自分のコンピューター上で安全にテーマの開発やテストを行うことができます。

コアファイルとは、各WordPressテーマの基盤となるファイル群のことです。最も基本的なテーマであっても、少なくとも2つのファイルが必要です。style.css と index.phpその中で、style.css スタイルシートだけでなく、このファイルのより重要な機能は、テーマの「情報ヘッダー」として機能し、WordPressシステムに対して自分のテーマについて情報を宣言することです。このファイル内で、特定のコメントブロックを使用してテーマ名、作者、説明、バージョンなどのメタ情報を定義する必要があります。

また、必須ではありませんが、作成することを強くお勧めします。functions.php このファイルは、あなたのテーマ「機能強化器」用のものです。このテーマを使用すると、カスタム機能の追加、メニューやサイドバーの設定、その他のスクリプトやスタイルファイルの導入が可能になります。コアファイルを変更することなく、テーマの機能を拡張することができます。

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

現代のWordPressテーマ開発では、サブテーマ（Child Theme）の使用が推奨されています。これは、親テーマのファイルを直接変更することなく、テーマをカスタマイズしたり機能を追加したりするための安全な方法です。親テーマがアップデートされても、サブテーマに保存されたカスタマイズ内容はそのまま保持されます。サブテーマを作成するには、前述の2つのコアファイルが必要です。style.css スタイルヘッダ内で、以下のように設定します：Template:このフィールドは、その親テーマを宣言しています。

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

テーマのコアテンプレートファイルを作成する。

WordPressはテンプレート階層（Template Hierarchy）システムを使用して、特定のページリクエストに対してどのPHPテンプレートファイルを使用してコンテンツをレンダリングするかを決定します。このルールを理解することは、テーマを開発する上で非常に重要です。

記事とページの表示テンプレート

最も基本的なテンプレートはsingle.phpとpage.phpそれらはそれぞれ、単一のブログ記事と独立したページの表示を制御するために使用されます。これらのテンプレートでは、一連のWordPressのコア関数を使用してコンテンツを繰り返し出力します。最も重要なループ構造は通常、以下のようになります：

備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
    <h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
    <div class="entry-content">
        あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
    </div>
終わりました。ありがとうございました。

このコードは、記事が存在するかどうかをチェックし、その後ループに入って記事のタイトルと内容を順に出力します。関数名は「article_display」などです。the_title()とthe_content()対応するデータを出力するために使用されます。

記事一覧テンプレートとアーカイブテンプレート

ユーザーがブログのホームページ、カテゴリーページ、または著者のアーカイブページにアクセスすると、WordPressはリストテンプレートを使用します。最も一般的なリストテンプレートはindex.php（最後の手段として）そしてarchive.phpリストテンプレート内では、ループによって複数の記事が順番に処理されます。通常、このような処理には以下の方法が使用されます：the_excerpt()記事の要約を出力します。全文ではありません。

推薦図書 WordPressのテーマ開発を段階的にマスターしましょう：ゼロからカスタムテーマを構築する方法。

// ループ内で記事リストの項目を出力する
<article>
    <h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
    あなたのコメントは受け付けられました。ありがとうございます。
</article>

the_permalink()この関数は、現在の記事の永久リンクを取得するために使用されます。

トピックの共通構成要素

コードの再利用性と保守性を高めるために、共通のページ部分を独立したテンプレートファイルに分割するべきです。これにより、get_header(), get_footer(), get_sidebar()とget_template_part()などの関数を使用して実現します。

例えば、あなたのheader.phpこのファイルにはHTMLドキュメントのヘッダー部分が含まれています。エリアおよびウェブサイトのトップナビゲーションメニュー。single.phpその中で、あなたは最初に関数を呼び出すだけでよいのです。get_header()その場合、WordPressは自動的に必要なコードを読み込んでくれます。header.phpその内容です。

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

同様に、複数の場所で繰り返し使用されるコードブロック（例えば記事のメタ情報など）は、別ファイルとして保存しておくとよいでしょう。content.phpまたはtemplate-parts/content.phpそして、メインテンプレートで使用します。get_template_part('template-parts/content', get_post_format());それを呼び出してください。2番目のパラメータを使用すると、記事の形式（ギャラリー、引用など）に応じて異なるバリアントファイルを読み込むことができます。content-gallery.php）。

関数ファイルを使用してテーマ機能を強化する

functions.php このファイルはテーマの「コントロールセンター」のようなもので、直接HTML出力には含まれないすべての機能的なコードはここに配置する必要があります。このファイルはテーマが初期化される際にWordPressによって自動的に読み込まれます。

「登録トピック機能とメニュー」

基本的で必要な操作の一つは、以下の方法を使用することです：add_theme_support() 関数を使用して、自分のテーマがどのWordPress機能をサポートしているかを宣言します。例えば、記事の特集画像の表示、カスタムメニューの設定、HTML5マークアップのサポートを有効にすることは標準的な処理です。

推薦図書 WordPressのコアアーキテクチャと動作原理。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

そして、あなたは使うことができますregister_nav_menus() 関数を使用して、テーマ内で利用可能なメニューの配置を定義します。例えば、「トップメインナビゲーション」や「フッターナビゲーション」などです。

スタイルシートとJavaScriptの導入

CSSやJavaScriptファイルを正しくキューに追加（enqueue）することは、プロフェッショナルな開発において非常に重要です。これにより、依存関係が正しく管理され、スクリプト間の競合が防げます。絶対にテンプレートファイル内で直接これらのファイルを使用してはいけません。またはタグはリソースを導入します。

インターサーバー共有ホスティング
共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.
インターサーバー LOGO アクセスページ 
function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

フックwp_enqueue_scripts これは、ウェブサイトのフロントエンドでスクリプトやスタイルを読み込むために使用されます。get_stylesheet_uri()とget_template_directory_uri() この関数を使えば、トピックディレクトリの正しいURLを取得することができます。

ウィジェットエリアを作成する

サイドバーやフッターのウィジェットエリアでは、ユーザーはバックエンドのドラッグアンドドロップインターフェイスを利用してコンテンツをカスタマイズすることができます。register_sidebar() 関数を使用すると、新しいツール領域を作成することができます。

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          =&gt; '主侧边栏',
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; '此区域的小工具将显示在文章和页面侧边。',
        '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_theme_widgets_init');

登録後、テンプレートファイル（例えば…）にアクセスして設定を行う必要があります。sidebar.php）で使用されていますdynamic_sidebar('sidebar-1');この関数を使って、この領域のデータを出力します。

レスポンシブレイアウトとスタイルシートの作成

現代のウェブサイトは、さまざまなデバイス上で問題なく表示されなければなりません。つまり、使用するテーマはレスポンシブでなければなりません。レスポンシブデザインを実現するには、主にCSSのメディアクエリ（Media Queries）とフローティングレイアウト（Fluid Layouts）が利用されます。

モバイルファーストのスタイル戦略

「モバイルファースト」のCSS設計戦略を採用することをお勧めします。つまり、まずモバイルデバイス（小画面）向けに基本スタイルを作成し、その後メディアクエリを利用してより大きな画面向けのスタイルを段階的に追加したり上書きしたりするのです。

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

この戦略により、コアコンテンツがすべてのデバイスでアクセス可能になり、より大きな画面でのユーザー体験が段階的に向上しています。

画像やメディアファイルを柔軟に処理する

画像や埋め込みコンテンツ（例えば動画）がコンテナを超えて表示されないようにすることは、レスポンシブデザインの基本要件です。簡単で汎用的なルールとしては：

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

このCSSルールにより、メディア要素の幅が親コンテナの幅を超えることがなく、高さは自動的に比例して調整されるため、レイアウトが崩れるのを防ぐことができます。

WordPressの補助クラスや関数を活用する

WordPress自体が多くの有用なCSSクラスを生成しており、それらを利用することでより精密なスタイル設定が可能になります。例えば、タグには、ページや記事の種類を示すクラスが追加されます（例：.page, .single-post）、そして記事IDクラス（例：.postid-123）記事リストのループ内で、post_class()この関数は、各記事のコンテナに一連のクラス名（記事のフォーマット、カテゴリなど）を出力します。これにより、より詳細なスタイル設計が非常に容易になります。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

スタイルシート内では、次のように位置指定を行うことができます：

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

概要

WordPressのテーマ開発とは、創造性、フロントエンド技術（HTML、CSS、JavaScript）、およびバックエンド技術（PHP）を組み合わせるプロセスです。まず、テーマの基本構造を構築し、次にユーザーインターフェースのデザインを行い、機能を実装していきます。このプロセスには、コーディングスキルだけでなく、デザインセンスやユーザビリティに対する理解も求められます。完成したテーマstyle.cssとindex.php基本フォルダから始めて、段階的にテンプレート階層システムを学び、実装していきましょう。ページを再利用可能なテンプレートコンポーネントに分割してください。核心となるのは…functions.phpファイルとは、テーマ機能の拡張、メニューやスクリプトの登録を行うための「舞台」です。最後に、レスポンシブなCSSデザインを用いることで、スマートフォンからデスクトップまであらゆるデバイスで優れたブラウジング体験を提供できるようにします。サブテーマの使用や、スクリプト・スタイルの正しい配置といったベストプラクティスに従うことで、テーマの専門性や安全性が高まり、メンテナンスも容易になります。

FAQ よくある質問

没有PHP基础可以开发WordPress主题吗？

理論的には、HTMLやCSSのみを変更して既存のテーマの外観を調整することも可能ですが、WordPressの標準に準拠した、機能が完全なテーマをゼロから開発するにはPHPの知識が不可欠です。基本的なPHPの文法や関数の呼び出し方、そしてWordPress特有のテンプレートタグやフック（Hook）システムを理解する必要があります。まずはPHPとWordPressの基本的なテンプレートタグについて学ぶことをお勧めします。

テーマ開発が完了したら、どのようにして他人に公開して使用してもらうのでしょうか？

テーマをWordPressの公式テーマディレクトリに公開したり、商業的に販売する前には、厳格なテストを行い、『WordPressテーマ開発マニュアル』に記載されているコーディング基準に準拠していることを確認する必要があります。これには、コードのセキュリティチェック、テーマが完全にレスポンシブであることの確認、そして国際化（i18n）の準備（翻訳関連の関数の使用など）が含まれます。__()と_e()）を実行し、すべてのデバッグコードを削除してください。その後、公式ディレクトリにコードを送信するか、自分のウェブサイトを通じて配布することができます。

サブトピックと親トピックの更新にはどのような関係がありますか？

サブテーマの存在理由は、親テーマを安全に修正するためです。サブテーマを使用すると、スタイルや機能のカスタマイズ内容はすべてサブテーマのファイルに保存されます。親テーマにアップデートがある場合は、他のテーマと同様に親テーマを更新するだけでよく、サブテーマのファイルはそのまま残り、すべてのカスタマイズ内容も保持されます。これは、コア機能（親テーマ）を更新しつつも個性化されたデザイン（サブテーマ）を失わないための最善の方法です。

自分のテーマにカスタムオプションページを追加するにはどうすればいいですか？

高度カスタマイズ可能が必要なテーマには、カスタムオプションページを追加する必要があります。これは通常、WordPressの設定API（Settings API）を使用するか、Redux、Kirki、Carbon Fieldsライブラリなどの人気のあるオプションフレームワークを統合することで実現されます。設定APIはWordPressのコアに組み込まれている標準化されたインターフェースであり、オプションの安全な作成、検証、保存を行うためのものです。初心者にとっては、成熟したフレームワークを使用することでユーザーフレンドリーなオプションパネルをより迅速に構築できますが、テーマの複雑さやファイルサイズが増加する可能性があります。

次はどうする？

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

拡大読書と実践的知識

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

タグ: