開発環境の準備と基本ファイルの整備
どんなコードの作成を始める前にも、効率的なローカル開発環境を構築することが非常に重要です。Local by Flywheel、XAMPP、MAMP などのツールを使用することをお勧めします。これらのツールを使えば、PHP、MySQL、Apache/Nginx を備えたローカルサーバーを簡単にセットアップできます。この環境にWordPressをインストールしたら、あなただけのテーマを作成することができるようになります。
WordPress テーマは本質的に、次の場所にある /wp-content/themes/ ディレクトリ内にあるフォルダです。このフォルダの名前があなたのテーマ識別子になります。このテーマフォルダ内には、最低限存在しなければならない2つのファイルがあります。 style.css と index.php。
style.css このファイルはCSSスタイルを保存するためだけに使用されるわけではなく、ファイルのヘッダー部分にあるコメントがWordPressにテーマ情報を伝える重要な役割を果たしています。以下に標準的な例を示します:
推薦図書 WordPressテーマ開発の完全ガイド:ゼロからカスタムウェブサイトを構築する。
/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的 WordPress 自定义主题,用于学习开发。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ index.php これはテーマのデフォルトテンプレートファイルであり、より具体的なテンプレートが適用されない場合にWordPressがページのレンダリングに使用します。まず、このファイルに簡単なHTML構造を記述して、テーマがWordPressに正しく認識されているかをテストすることができます。
コアテンプレートファイルの構造と階層
WordPressは、異なるタイプのページにどのテンプレートファイルを使用するかを決定するための正確なテンプレート階層システムを採用しています。この階層構造を理解することは、効率的な開発の鍵となります。
ホームページテンプレートの優先順位
ウェブサイトのホームページについて、WordPressは以下のファイルを順番に探します:front-page.php > home.php > index.php通常、front-page.php これは、カスタマイズされた静的なホームページを表示するためのものです。 home.php これはブログ記事の一覧を表示するために使用されます。
記事とページテンプレート
ウェブサイト上の個別の記事にアクセスすると、WordPressはまず以下のものを優先的に検索します: single-post.phpもし該当するものが存在しない場合は、元の状態に戻します。 single.phpそして最後に、 index.php独立ページの場合は、それを探します。 page-{slug}.php または page-{id}.phpそして次に page.php。
アーカイブおよび分類テンプレート
「記事分類目録ページ」には使用されます。 category-{slug}.php、category-{id}.php、archive.phpそして最後に、 index.phpタブページ、著者ページ、日付別のアーカイブページなども、同様の階層ルールに従っています。
推薦図書 ゼロからWordPressテーマ開発をマスターする:カスタムウェブサイトを構築するためのベストプラクティスとガイド。
このルールをマスターすれば、特定のテンプレートファイルを作成することで、ウェブサイトの各部分の表示効果を正確に制御することができます。例えば、以下のようなテンプレートファイルを作成するといった具合です: category-news.php このファイルを使用すると、「news」という名前のカテゴリーに対して、独自のスタイルとレイアウトを設計することができます。
テーマ機能と動的コンテンツの呼び出し
静的なHTMLページはWordPressのテーマではありません。テーマとは、WordPressのデータベースからコンテンツを動的に呼び出すことができるものです。これは主に、WordPressのテンプレートタグや「The Loop」と呼ばれる処理を通じて実現されます。
WordPressのメインループを理解する。
ループはWordPressテーマの核心的なメカニズムであり、データベースから記事を取得してページ上に表示するために使用されます。最も基本的なループ構造は以下の通りで、通常は以下の場所に配置されます: index.php、single.php または page.php 中,:
備考:この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
終わりました。ありがとうございました。
<p>申し訳ありませんが、該当する記事は見つかりませんでした。</p>
endif; 終わり このループの中で、the_title() と the_content() これらはテンプレートタグであり、現在の記事のタイトルと内容を出力します。
テーマ機能用のファイルを導入します。
機能と表現を分離するためのベストプラクティスとしては、PHPの関数コードを独立したファイルやモジュールに配置することです。 functions.php このファイルはトピックのルートディレクトリにあり、トピックサポートの機能やメニューの登録、サイドバーなどを追加するために使用されます。
例えば、 functions.php 以下のコードを追加することで、記事の特集画像やカスタムメニューの機能を有効にすることができます:
推薦図書 WordPressテーマ開発入門から上級者へ:カスタムウェブサイトの構築方法を手取り足取り教えます。
<?php
function my_theme_setup() {
// 添加文章和页面的文章特色图片支持
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' ); メニューとサイドバーの呼び出し
テンプレートファイル内では、以下のように使用することができます: wp_nav_menu() 関数を使って登録されたメニューを表示します。例えば、 header.php メインナビゲーションを呼び出す:
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav> 同様に、あなたも以下の方法で… register_sidebar() 関数は動作しています。 functions.php 「小道具」登録エリアに登録した後、次に… sidebar.php ここで使用されているのは dynamic_sidebar() それを呼び出すために。
テーマスタイル、スクリプト、パフォーマンス最適化
現代のテーマ開発では、外観だけでなく、パフォーマンス、アクセシビリティ、レスポンシブデザインにも重点を置いています。
スタイルとスクリプトを正しく導入する方法
テンプレートファイル内でCSSやJavaScriptファイルに直接ハードリンクを張ることは絶対に避けてください。正しい方法は、これらのファイルを別の場所に配置し、テンプレート内でその場所を参照するようにすることです。 functions.php ファイルを使用するには、 wp_enqueue_style() と wp_enqueue_script() この関数はそれらをキューに追加します。これにより、依存関係が正しく保たれ、重複して読み込まれるのを防ぎます。
function my_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); レスポンシブレイアウトを構築する
はい。 style.css メディアクエリ(Media Queries)を使用して、さまざまな画面サイズに対応したスタイルを作成します。まずはモバイルデバイス(小さな画面)向けのスタイルから作成を始め、その後徐々にタブレットやデスクトップ向けのスタイルを追加していきます。これは「モバイルファースト(Mobile First)」と呼ばれる現代的な開発戦略です。
パフォーマンス最適化の実施に向けた基礎
画像のサイズを最適化したり、HTTPリクエストの数を減らしたり、WordPressのキャッシングプラグインを使用することは、テーマのパフォーマンスを向上させるための一般的な方法です。開発の観点からは、スクリプトやスタイルが必要なページでのみ読み込まれるようにすることが重要です(例えば、条件付きタグを使用するなど)。 is_page()、is_single()これにより、不必要なリソースの消費を大幅に削減することができます。
概要
環境の構築や基本ファイルの作成から始め、テンプレートの階層構造を深く理解し、動的なコンテンツの呼び出しやループ処理をマスターし、さらには… functions.php 機能を拡張し、パフォーマンスを最適化することで、あなたはWordPressのカスタムテーマ開発の全過程を遂行しました。その鍵は、WordPressのデータフローとテンプレートシステムを理解し、そのコーディング基準に従うことにあります。機能、スタイル、構造を明確に分離することが、メンテナンスが容易で高性能なテーマを構築するための鍵となります。次に、サブテーマの開発やカスタム記事タイプの設定、テーマカスタマイザーなど、より高度な機能を探求することで、テーマの機能性をさらに拡張することができます。
FAQ よくある質問
###: テーマ開発にはPHPの知識が必須ですか?
はい、PHPはWordPressのコアプログラミング言語であり、テーマ開発(特に動的コンテンツの処理や機能の拡張)において必須のスキルです。基本的なPHPの文法や関数、そしてWordPress特有のPHP関数(テンプレートタグ)を理解する必要があります。
functions.php ファイルの役割は何ですか?
functions.php このファイルは、テーマの「機能の中心」となるものです。メニューやサムネイルの追加、ガジェットエリアの設定、読み込み順序の管理、スタイルやスクリプトの設定、カスタム関数の定義など、テーマの機能をサポートするために使用されます。このファイルに含まれるコードは、テーマが初期化される際に自動的に読み込まれます。
どうやって私のテーマを多言語に対応させることができるでしょうか?
あなたは2つのことをしっかりと行う必要があります。まず、 style.css ヘッダー内のコメントや、テキストを使用するすべてのPHP関数内で(例:) __() または _e()まず、テキストドメイン(Text Domain)を使用します。例えば、「my-first-theme」といった名前です。次に、Poeditなどのツールを使って.potファイルを作成し、さまざまな言語用に.poファイルと.moファイルを生成します。これを国際化(i18n)およびローカライゼーションと呼びます。
開発時にWordPressのエラーをデバッグするにはどうすればよいでしょうか?
提案は以下の通りです: wp-config.php このファイル内でWordPressのデバッグモードを有効にします。 WP_DEBUG 定数の値を `true` に設定します。これにより、ページ上にPHPのエラー、警告、および通知が表示されるようになり、開発過程での問題の特定が大幅に容易になります。ただし、本番環境に導入する前には必ずこの設定をオフにしてください。
私のテーマはどのようにして公式の審査を通過し、販売用にリリースされるのでしょうか?
WordPressの公式テーマディレクトリには厳格な審査基準があります。ご提供いただくテーマは、WordPressのコーディング規格に準拠していなければならず、コードの安全性と無誤動作が保証されている必要があります。また、アクセシビリティ(a11y)にも対応し、テキストの国際化も正しく行われている必要があります。さらに、廃止された関数の使用は推奨されません。詳細な基準については、WordPress Theme Review Teamのハンドブックで確認できます。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。