WordPressテーマの構造

公開: 2015-06-04

これは、6月16日にリリースされるWordPress開発のマルチメディアガイドである「Upand Running：A Practical Guide to WordPress Development」の章です。完全なパッケージには、フルレングスの電子書籍、50以上のテーマ、プラグイン開発のチュートリアルビデオが含まれています。そして、世界最高のWordPress開発者13人へのコードウォークスルーインタビュー。 今すぐupandrunningwp.comで20％割引で事前注文してください！

重要なポイント：

WordPressテーマは、一貫したパーツのセットで構成されています。子以外のテーマの重要な部分には、 style.css 、 functions.php 、およびいくつかの種類のPHPテンプレートファイル（ header.php 、 footer.php 、 index.phpなど）が含まれます。
テーマのCSSスタイルの主なソースとして、 style.cssはテーマの視覚的な外観を決定します。 style.cssの上部にあるコメントセクションには、テーマ名、作成者などが登録されています。
functions.phpは、テーマにプレゼンテーション機能を追加する場所です。 Functions.phpを使用して、CSSスタイルシート、JavaScriptファイル、ナビゲーションメニュー、ウィジェットエリア、およびその他のfunctions.phpを追加します。
テンプレートファイルは、非公式に次のように分割できます。「常に使用される」テンプレートファイル（ header.phpとfooter.php 、および該当する場合はsidebar.php ）。 WordPressテンプレート階層内のファイル（ index.php 、 single.php 、 page.phpなど）。および「テンプレートパーツ」（繰り返しを減らすために他のテンプレートファイルから取得された不完全なスニペット）。
テーマは任意に大きく複雑にすることができます。しかし、これらは最も重要で予想通りにそこにある部分です。

この短い章は、大きな図を中心に展開します。なぜ待つのですか？ここにあります：

WordPressテーマの構造

パニックにならない！あなたはこれをすぐに理解するでしょう。この章の残りの部分では、図の各部分についてさらに詳しく説明します。

名前って何？

WordPressは、名前に基づいてテーマファイルの処理方法を決定します。

最初に気付くのは、図のすべてのファイルに特別な名前があることです。 functions.php 、 style.css 、 index.php —これらのファイルはいずれも誤って名前が付けられておらず、任意の名前も付けられていません。

WordPressは、名前に基づいてテーマファイルの処理方法を決定します。これには、 functionz.phpに対して特別な処理が記述されていますが、 functions.phpに対してはまったく処理されていません。したがって、一連の命令をfunctions.phpとしてアップロードすると、WordPressはそれらを解釈します。ただし、 functionz.phpと同じ命令をアップロードすると、WordPressはデフォルトで、そのファイルとその命令を完全に無視します。

style.css

style.cssは、テーマの視覚的外観の主なソースです。

style.cssは、CSSスタイリングのテーマの主なソースです。そのため、フォントや色の選択から、テーマがレスポンシブグリッド上で動作するかどうかまで、テーマの視覚的外観の主なソースになります。

したがって、たとえば、テーマのstyle.cssに次のCSSを入力した場合：

p {
color: blue;
}

…その後、段落内にあるものはすべて、テーマの実行中にサイトのどこにでも青に変わります。本当にかっこいいですよね？

style.cssは、テーマを希望どおりに表示するために、作業の大部分を実行する場所です。

この種の視覚的制御は、 style.cssで行うべき作業がたくさんあることを意味します。これは、テーマを希望どおりに見せるために作業の大部分を行う場所です。

style.cssは、テーマを登録する方法でもあります

style.cssのヘッダーにはコメントセクションもあり、テーマデータ（テーマ名、作成者、親テーマ（存在する場合）など）が登録されます。次のようになります。

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPressはこれらのコメントを読んで、テーマに関する情報を取得します。したがって、上記の小さなコメントブロックは、WordPress管理領域の[外観]>[テーマ]にあるサイトのテーマのリストにテーマが表示される原因です。

themeAnatomy1

その大きなグラフィック、Anatomy of a WordPress Themeのstyle.cssの1行目から6行目に、テーマの実際の登録データの例を見ることができます。

関数.php

functions.phpは、テーマにカスタム機能を追加する場所です。これは、次のような非常に多くの可能性があります。

CSSスタイルシート（ style.css自体を含む）とJavaScriptファイルの追加
ナビゲーションメニューエリアとウィジェットエリアの登録
サイトで利用できるようにするカスタム画像サイズを定義する
ページコンテンツのフィルタリング

functions.phpは、主にWordPressフック（アクションフックおよびフィルターフックとも呼ばれます）を介してWordPressの残りの部分と「通信」し、適切な場所に機能を追加できるようにします。 WordPressテーマのコアコンセプトでfunctions.phpの動作について詳しく説明します。3。functions.phpでfunctions.phpを追加し、WordPressフック（アクションとフィルター）のフックについて詳しく説明します。

PHPテンプレートファイル

WordPressサイトのテンプレートファイルは、サイトのマークアップを決定します。それらがなければ、ページには文字通り何もありません。

テーマのファイルの大部分は、そのPHPテンプレートファイルです。 functions.php .phpがテーマの頭脳であり、 style.cssがその服であり、テンプレートファイルがその実際の本体である場合。

テンプレートファイルは、HTMLマークアップとPHPコードが混在するコード>.phpファイルです。（そのグラフィックを確認すると、どのように見えるかがわかります。）

テンプレートファイルは2つの方法でマークアップを作成します

これらのファイルが一緒になって、サイトのマークアップ、つまりブラウザがサイトにアクセスしたときに表示される実際のHTMLを決定します。彼らは2つの方法でそれを行います。

1. HTML

まず、テンプレートファイルは、通常の.htmlファイルと同じように、HTMLをブラウザに直接出力します。 内にないものはすべてPHPではありません。ページに直接表示されるのは単なるHTMLです。したがって、テーマのheader.phpに次のようなHTMLが含まれている場合：

<body class="site-body">

これは、 header.phpを含むすべてのWordPressWebページでブラウザーに表示されるものとまったく同じです。

2. PHP

テンプレートファイルは、HTMLにコンパイルまたはHTMLに変換されるPHPを使用して実際に魔法のように機能します。簡単な例として、同じheader.phpファイルに次のコードを含めることができます。

<body class="<?php echo 'site-body'; ?>">

追加されたPHPは、文字列site-bodyをページにエコー（印刷）するだけです。そのため、サーバーは最後に追加のPHP処理を実行しましたが、ブラウザーには同じ古いHTMLが表示されます。

ご想像のとおり、テーマのテンプレートファイルは非常に重要です。テンプレートファイルがないと、ページには文字通り何も表示されません。

「常に使用される」テンプレートファイル

header.phpとfooter.phpは通常、テーマのあらゆる場所で使用されます。これは、ほとんどのサイトで、異なるページ間で一貫したヘッダーとフッターが必要なためです。

一部のテンプレートファイルは、サイトのすべてのWebページで使用されます。主な例はheader.phpとfooter.phpです。

これらのファイルは頻繁に使用されるため、WordPressには他のテンプレートファイルにそれらを含めるための特別な関数があります： get_header()およびget_footer() 。このように呼び出されると、パラメーターなしで、これらの関数は単にheader.phpとfooter.phpを取得し、関数が呼び出された場所にドロップします。

これらのファイルがどこでも使用されているのはなぜですか？これは、ほとんどのサイトが異なるページ間で一貫したヘッダーとフッターを必要としているためです。 1つのページに会社のロゴとプライマリナビゲーションメニューがある場合は、他のページにも同じことをしてもらいたいと思うでしょう。ページ下部のフッターについても同じことが言えます。

注として、 sidebar.phpもこの種のファイルの一種です。これは、サイト上のほとんどの種類のWebページが単一のサイドバーを共有する場合が多いためです。ただし、ページタイプの表示専用の全幅ページは例外です。投稿。 sidebar.phpにも独自の関数get_sidebar()があります。

WordPressテンプレート階層内のファイル

本当の興奮は、 index.php 、 single.php 、 page.phpなどのファイルで発生します。これらのファイルは、さまざまな種類の投稿データに対してどのマークアップが表示されるかを示します。

言い換えれば、 WordPressはどのページをどの種類の投稿データに使用するかを知っています。例えば：

要求されているWebページにページタイプの投稿（たとえば、Aboutページ）が含まれている場合、WordPressはpage.phpを使用してそのWebページを構築する可能性があります。
リクエストされたウェブページが個々の投稿タイプの投稿である場合（たとえば、特定のブログ投稿を表示している場合）、WordPressはsingle.phpを使用してそれを構築する可能性があります。
2014年に書いたすべての投稿タイプの投稿を調べている場合、WordPressはおそらくarchive.phpを使用してそのWebページを構築します。

これは、WordPressテーマのコアコンセプトで詳細に説明しているWordPressテンプレート階層の魔法です。1。テンプレート階層。

これらのテンプレートファイルはループに基づいています

これらの「テンプレート階層内」テンプレートファイルはすべて、非常に重要なものを共有しています。これらは、WordPress開発の絶対的なコア原則の1つであるTheLoopを中心に構築されています。

WordPressテーマのコアコンセプトのループについて深く掘り下げます。2。ループを使用した投稿の処理。ループは本当にかっこいいので、初めての方は靴下を持って、ループが吹き飛ばされないようにしてください。

テンプレートパーツ

index.phpとpage.phpの両方にまったく同じセクションがあるとしましょう。これらのファイルの両方でそのコードを繰り返す必要がありますか？

実際、DRY（「Do n't Repeat Yourself！」）は、優れたプログラマーにとっての戦いの叫びです。繰り返しはあらゆる種類の問題を引き起こします。繰り返されるセクションについて何かを変更したい場合はどうなりますか？今、あなたはそれを2つの場所で変える必要があります。ある場所で変更するのを忘れたり、あるファイルで間違いを犯したが別のファイルでは間違いを犯したりした場合はどうなりますか？これで、コードが同期しなくなり、サイトにバグが発生します。（今、同じコードを20回繰り返すとどうなりますか？20回行うすべての変更を繰り返す必要があり、「すべてをキャッチ」することを期待します。）

テンプレートパーツは、テンプレートファイルの繰り返される可能性のある部分を取得し、それらを新しいファイルに移動します。このように、 index.phpとpage.phpはどちらも、個別に2回書き込むのではなく、同じテンプレート部分を参照するだけで済みます。そのセクションを変更したい場合は、一度だけ変更します。

今、あなたはあなたのテーマの解剖学を知っています

これらは、WordPressテーマについて本当に理解することです。大きすぎるThemeForestテーマでさえ、このコアスケルトンを中心に構築されるため、これらの要素がどのように連動するかを理解すると、WordPressテーマを理解するための多くの力が得られます。

その解剖学のレッスンが終了すると、次の3つの章では、テーマがどのように機能するかを説明する4つの重要なプログラミング原則について詳しく説明します。

WordPressテンプレート階層
ループ
関数.php
WordPressフック

先へ！