開発環境とツールの準備
コードの執筆を始める前に、効率的で隔離されたローカル開発環境を構築することは非常に重要な第一歩です。これにより、本番サイトを保護するだけでなく、開発効率も大幅に向上させることができます。
ローカル開発環境の設定
ローカルサーバー用のソフトウェアパッケージ(Local by Flywheel、MAMP、XAMPPなど)の使用をお勧めします。これらのツールを使えば、Apache/Nginx、PHP、MySQLをワンクリックでインストールでき、オンラインサーバー環境を完璧に再現できます。PHPのバージョンは7.4以上であることを確認し、MySQLiやPDO、GD画像ライブラリなどの必要な拡張機能を有効にしてください。また、Visual Studio CodeやPhpStormのようなコードエディタをインストールしてアクティブにしてください。これらのエディタはWordPress開発において、優れた構文ハイライト機能やコードヒントを提供します。
必要なツールとプラグインの紹介
コードエディタに加えて、コードの変更を管理するためのバージョン管理システム(例:Git)も必要です。ブラウザ内では、開発者ツール(Chrome DevTools または Firefox Developer Tools)が HTML、CSS、JavaScript のデバッグに非常に役立ちます。WordPress の開発においては、ローカルサイトに以下の開発支援プラグインをインストールすることをお勧めします:Query Monitor データベースのクエリやPHPのエラー、フックを監視するために使用されます。Show Current Template 現在のページで使用されているテンプレートファイルを表示することができます。Theme Check プラグインは、テーマの開発が完了した後に、そのテーマがWordPressのテーマ開発基準に適合しているかどうかをチェックするために使用されます。
推薦図書 WordPressテーマ開発入門から上級者へ:カスタムウェブサイトを構築するための包括的なガイド。
テーマファイルの構造とコアファイル
標準的なWordPressテーマとは、特定のファイルを含むフォルダーのことで、以下の場所に保存されています: /wp-content/themes/ ディレクトリ内にある各コアファイルの役割を理解することは、テーマを構築するための基石です。
スタイルシートとテーマ情報の定義
style.css ファイルは、各WordPressテーマにとって「身分証明書」のようなものであり、スタイル設定を定義するための入口でもあります。そのヘッダーコメントブロック(Stylesheet Header)は、テーマのスタイルを定義するだけでなく、より重要なのはWordPressがテーマを認識するために必要なメタデータも提供します。以下に基本的な例を示します:
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/ 本文中では、CSSスタイルを記述してください。Text Domain 国際化のために使用されるものであり、後続で翻訳関数を呼び出す際に使用されるテキストデータと一致していなければなりません。
機能強化とテンプレートの導入ファイル
functions.php ファイルはテーマの「脳」とも呼べる存在で、機能の追加や特性の登録などを行うためのものです。コアファイルを直接変更する必要はありません。ここでは、記事のサムネイルやカスタムメニューの追加、スクリプトやスタイルシートの導入、カスタム関数の定義など、テーマに関連する機能を追加することができます。
index.php これはトピックのデフォルトテンプレートであり、必須です。WordPressがより具体的なテンプレートファイルを見つけられない場合(例えば…) single.php または page.phpその場合は元に戻してそれを再使用します。通常、index.php メインループが含まれており、記事リストを出力するために使用されます。
推薦図書 ワードプレスのテーマ開発:カスタムテーマをゼロから構築するための完全なガイド。
テンプレートの階層構造とテンプレートファイル
WordPressでは、「テンプレート階層(Template Hierarchy)」と呼ばれるルールセットを使用して、特定のページのリクエストに対してどのテンプレートファイルを読み込むかを決定します。このルールを理解することで、異なるページの外観を正確に制御するテンプレートを作成することができます。
記事とページテンプレートの詳細解説
単一の記事について、WordPressは以下の順序でテンプレートを探します:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php例えば、「about-us」という名前のページ(ポストタイプが「post-type」である)では… pageその場合、優先的に探されるのは… page-about-us.phpそして次に page.phpそして最後に、 index.php。
single.php 通常は単一のブログ記事を表示するために使用されますが、 page.php 独立ページを表示するために使用されます。これらのファイルでは、メインループを使用してその記事のタイトル、内容、メタデータなどを出力します。
アーカイブおよび分類テンプレート
ユーザーがブログ記事一覧、カテゴリーページ、またはタグページにアクセスすると、WordPressはアーカイブテンプレートを使用します。検索の順序は以下の通りになる可能性があります:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpあなたはそれを作成することができます。 archive.php すべてのアーカイブページのレイアウトを制御したり、より具体的なものを作成したりするために… category-news.php 「ニュース」カテゴリー専用のページを別途デザインしてください。
もう一つの重要なテンプレートは front-page.phpもしそのファイルが存在する場合、それがウェブサイトの静的なホームページとして使用されます。存在しない場合は、WordPressが自動的に適切なページを表示します。 home.php 最新のブログ記事を表示するか、または以前の記事に戻すかを選択できます。 index.php。
テーマ機能と高度な機能
基本テンプレートの構築が完了したら、関数やフックを使用してテーマに強力な動的機能を組み込むことができます。これにより、静的なテンプレートから機能豊富なアプリケーションインターフェースへと変換することができます。
推薦図書 WordPressテーマ開発入門から上級まで:オリジナルテーマを完全構築するガイド。
メニューおよびツールバー領域の登録
現代のテーマでは、通常、カスタマイズ可能なナビゲーションメニューやサイドバーのツール領域がサポートされています。これを実現するには… functions.php 特定の関数を使用して登録を行います。
まず、を使用して register_nav_menus() 関数登録の場所です。例えば:
function mytheme_register_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' ); その後、テンプレートファイル(例えば…)に… header.php)中で使用する wp_nav_menu() 関数を呼び出してメニューを表示します。
次に、使用する方法は… register_sidebar() 関数登録用ツールバー領域(サイドバー):
function mytheme_widgets_init() {
register_sidebar(
array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
)
);
}
add_action( 'widgets_init', 'mytheme_widgets_init' ); はい。 sidebar.php テンプレート内で使用します。 dynamic_sidebar( 'sidebar-1' ) それを表示するために。
記事の特徴的な画像やカスタムメイドの背景の使用がサポートされています。
とおす add_theme_support() この機能を使えば、テーマにさまざまなコア機能を簡単に有効にすることができます。最もよく使用されるのは「記事の特徴的な画像(Post Thumbnail)」機能で、ユーザーが記事にサムネイルを設定できるようになります。
add_theme_support( 'post-thumbnails' );
// 你还可以为特定文章类型启用,或定义缩略图尺寸
set_post_thumbnail_size( 1200, 630, true ); // 设置默认尺寸和裁剪模式
add_image_size( 'mytheme-featured-image', 800, 400 ); // 添加自定义图片尺寸 テンプレート内で使用するには、 the_post_thumbnail() この関数は、特徴的な画像を出力するためのものです。
また、一行のコードを使用することで、カスタムのヘッダーや背景色、画像などの機能を有効にすることもできます。これらの設定はWordPressの管理画面の「外観」→「カスタマイズ」で確認でき、ユーザーにより多くの制御権を与えます。
add_theme_support( 'custom-background' );
add_theme_support( 'custom-header' ); 概要
ゼロからWordPressテーマを開発することは、体系的なプロジェクトです。これには、PHP、HTML、CSS、JavaScriptなどのフロントエンド技術に精通しているだけでなく、WordPressのコア動作メカニズム(テンプレートの階層構造、メインループ、フックシステムなど)を深く理解することが求められます。専門的なローカル環境を構築し、テーマファイルの構造を明確に計画し、テンプレートの階層に従ってテンプレートファイルを作成することで、効率的に開発を進めることができます。 functions.php トピック機能を登録し、高度な機能を統合することで、デザイン要件に完全に合致し、コードが明確でメンテナンスしやすいカスタムテーマを作成することができます。このプロセスは困難を伴いますが、ウェブサイトの外観と機能を完全にコントロールできるようになるため、上級のWordPress開発者になるための必要なステップです。
FAQ よくある質問
WordPressのテーマを開発するにはPHPをマスターする必要がありますか?
はい、PHPを深く習得することは必須です。WordPressのコア自体はPHPで書かれており、テーマのテンプレートファイル(例えば…)も同様にPHPで構成されています。header.php, page.php)および機能ファイル(functions.phpこれらすべてにおいて、PHPの文法を使用してコンテンツを動的に生成したり、WordPressの関数を呼び出したり、データを操作したりする必要があります。既存のテーマをコピーしてCSSやHTMLのみを変更することはできますが、カスタムのロジックや機能を実現するにはPHPの知識が不可欠です。
どうすれば私のテーマがWordPressの公式要件に適合するようになるでしょうか?
为了让你的主题安全、高效且可能被WordPress官方主题目录收录,需要遵循一系列标准。这包括:使用安全的编码实践(如对输出进行转义、对输入进行验证)、遵循模板层级、正确实现国际化(使用__()と_e()(関連する関数などを使用し)、フロントエンドコードがレスポンシブでアクセス可能であることを確認し、コア機能をテーマにハードコードしないでください(サブテーマやプラグインを使用すべきです)。前述の内容を参考にしてください。Theme Checkプラグインを使用してスキャンを行うことは、コンプライアンスを確認するための良い方法です。
テーマ内のstyle.cssファイルの名前を変更することはできますか?
ダメです。style.cssこのファイル名はWordPressがテーマを認識するために必須であり、ファイルのヘッダー部分にあるコメントブロックには正しい情報を記入する必要があります。WordPressはこの特定のファイルに含まれるメタデータを読み取ることで、管理画面の「外観」→「テーマ」において、テーマの名前、スクリーンショット、説明などの情報を表示します。ただし、主要なCSSコードは他のファイルに分割して配置することも可能です。.cssファイルの中で、その後…functions.php里用(Riyō)wp_enqueue_style()関数は必要に応じてロードされます。
サブトピックとは何か、そしてどのような場合に使用すべきか?
サブテーマとは、別のテーマ(親テーマと呼ばれる)に依存するテーマのことで、親テーマのすべての機能、スタイル、テンプレートファイルを継承しますが、その一部を安全に上書きすることができます。サブテーマ内で必要な変更を行うだけでよいのです。style.cssまず、親テーマのテンプレート名を宣言し、その後、変更が必要なファイルのみを配置します(例えば、変更後のファイルなど)。style.css、functions.phpまたは、あるテンプレートファイルの場合も同様です。親テーマが更新されても、子テーマに加えたカスタマイズは上書きされません。これは、既存の人気テーマをカスタマイズする際に非常に便利であり、推奨されるベストプラクティスです。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。