【WP】WordPressテーマファイルのページ階層早見表

wordpress-basics-template-hierarchyWordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。

テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く理解するためにWordPressのテーマのファイルがどのように構築されているのか、それぞれのファイルの役割や優先度など確認できる早見表があるのでご紹介をします。

テーマファイルのページ階層早見表

早見表は「wordpress.org」の開発サイトで公開されています。左側にあるファイルのほうが優先度が高く、先に表示されます。どの系統も最終的には「index.php」に収束されます。

template-hierarchy

Image credit: WordPress Codex

解説ページ: WordPress Codex

画像バージョンと内容は同じですが、各ファイルの解説へリンクされている階層早見表がこちらで公開されています。

The WordPress Template Hierarchy

上記の早見表に掲載されているファイル以外にも「header.php」、「footer.php」、「functions.php」などのファイルがあり、WordPressのテーマはできています。

関連記事

インデックスタブ制作のチュートリアルまとめ

WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。 作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデ...続きを読む

2015.02.07HTMLコーディング

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

【デザイン】HTML5を使用したアニメーションサイト

HTML5より新しく登場した「Canvas」などによって、AdobeのFlashのような動的な2次元グラフィックを、HTML形式ファイルをベースに制作することができるようになりました。 今後、デザインとして設計されるのはもちろん、アニメーションやゲーム、WEBアプリケー...続きを読む

2015.02.16インスピレーション