WordPressテーマの基本構造
WordPress テーマは、基本的にwp-content/themes/ディレクトリ内にあるフォルダには、ウェブサイトの外観や機能を制御するための一連のファイルが含まれています。これらの核心的なファイルの役割を理解することは、開発を行う上での基礎となります。
テーマに必要なテンプレートファイル
各テーマには、2つの最も基本的なファイルを含める必要があります:style.cssとindex.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()これらの部分は他のテンプレートにも簡単に導入することができます。
さらに、以下のようなこともできます:single.php単一の記事に使用するためのものです。page.php独立ページ用です。archive.phpアーカイブリストの作成や管理に使用されます。functions.phpこの特別なファイルには、テーマを追加するための機能や特徴が含まれています。
トピックのホームページテンプレートを作成する
ホームページはウェブサイトの顔であり、通常、最もユニークなデザインが求められます。まずは構築から始めましょう。index.phpでは、内容を表示するためにループをどのように導入するかについて探っていきましょう。
ヘッダーとフッターを統合する
良い慣行の一つは、共通する部分をモジュール化することです。まず、テーマフォルダ内に新しいファイルを作成してください。header.phpとfooter.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.phpのget_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で推奨されている方法であり、依存関係が正しく保たれ、競合が発生するのを防ぐことができます。
スタイルシートを正しく読み込むには…
たとえ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これはテーマの「ツールボックス」であり、ここにさまざまな機能を追加することでテーマを強化することができます。コアのテンプレートファイルを変更する必要はありません。
テーマサポート機能を追加
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.cssとindex.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()関数が翻訳ファイルを読み込みます。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。