- Menu -

【WordPress】CMSオリジナルテーマのテンプレート分解。仕組みを図入りで超簡素解説。

Home >> Blog >> Webサイト制作

Tag: ,

WordPress CMSオリジナルテーマのテンプレート分解。仕組みを図入りで超簡素解説。

当サイトのオリジナルテーマvol.1は、自分でとても気に入っているテーマです。
いずれリニューアルするので、この愛着があるテーマのテンプレートを並べて記事に残すことにしました。
初めてオリジナルテーマを作った時、まずテンプレート階層がわかりにくかったので、初めての人にはなんとなくイメージがわかるかもしれないと思っています。

WordPressオリジナルテーマ作成前に

WordPress(ワードプレス)作成時は新しく信頼できる情報を得る
(日本語の記事が良いって意味じゃないんですけど、このイメージいまいちですね。作っておきアップしながらイマイチってw)

WordPressではphpコードやテンプレートタグを使いますが、情報を得る際に注意したいこと。

  • 新しい情報を得る
    (テンプレートタグが非推奨になっていないか等注意する。動かなくなることもある)
  • 信頼できる情報を得る
    (Web専門の人が書いた情報かどうか、説明がきちんとできているかどうか)

私が初めてWordPressのオリジナルテーマを作った時は、書籍メインで作りました。
足りないものはネットからの情報で作りました。

もちろん、古い記事でも今でも通用するきちんとした記事はあります

phpでは「動かなくなったのでこうやってみたら動くようになった!」というような記事が書かれていても、説明不足では信頼が薄いように思います。
なぜ動かなくなったのか。どうして動くように変更することができたのか。そういった説明まできちんとついている記事が信頼できるのではないでしょうか。
それを採用するか、採用しないかは、自分次第!

私の経験からのみの話ですが、最初だけでも、評判の良いWordPressの系統だった新しい書籍を1冊買った方がいいんじゃないかと思います。
評判の良い本でも改版が出ていることもあるので、チェックしたうえで購入検討された方がよいと思います。
WordPressもどんどんアップデートするので、バージョンの古い書籍や情報を見ても結局わからない場合もあると思います。

WordPress 日本語
WordPress Codex 日本語

Back to Contents Menu

Karujuオリジナルテーマvol.1の構成とテンプレート階層の概要

ご覧の通り、単一のブログではありません。
ギャラリーとブログで構成し、トップページ、アーカイブ、それぞれのsingle.phpなどはデザインが異なるように構成しています。

ここに書いた記事のテンプレートは一例で、他のテンプレートでも同じように表示されるものもあります
テンプレート階層の詳細は下記をご覧下さい。
とにかく、実際に作れば、どのテンプレートで表示されているのか、仕組みがわかるはずです。

WordPRess Codex テンプレート階層

Back to Contents Menu

テンプレートのインクルードについて

同じテンプレートを使いまわす場合は、メンテナンス性をよくするためテンプレートを分ける場合が多いです。
Dreamweaverなどでも、テンプレートを使い回しますが、同じことです。
header.php、footer.php、sidebar.phpなどは分けることが多く、各テンプレートにインクルードさせて表示させます。
特に凝らずに単一のブログをするのであれば、たった一つのテンプレート(index.php)で仕上げることもできます。でも、やれることが狭まります。

WordPRess Codex インクルードタグについて

Back to Contents Menu

home.php(トップページ)

Karujuオリジナルテンプレート(home.php)

オリジナルテーマで注意したいのが、index.phpとstyle.cssが必ず必要だということ。
私の場合いつもhome.phpでトップページを作っていますが、必ずindex.phpもアップロードしないとサイトが表示されません

私自身、index.phpを上げ忘れて「表示されない!なんでや!はっ。あーindex上げてなかったわ」と一瞬焦っていることがあります。

トップページは、home.phpにheader.phpとfooter.phpをインクルードしています。
2カラムなどsidebar.phpがある場合は、これもインクルードします。(私のサイトは1カラムなので必要ありません)

header.phpとfooter.phpをテンプレートで分けているのは、他の全ページでも使うからです。

Back to Contents Menu

header.php(ヘッダー)、footer.php(フッター)、comments.php(コメント欄)

home.phpの項でも書いたように、header.php、footer.php、comments.phpは他のテンプレートにインクルードされて表示させるので単体で使うことはありません。

Back to Contents Menu

single.php(ブログページ)

Karujuオリジナルテンプレート(single.php)

ブログの記事のページです。ポスト投稿です。
あらかじめWordPressで用意されている「投稿」画面から投稿して記事本文は表示されます。

Wordpress(ワードプレス)ポスト投稿タイプ

コメント欄は、comments.phpをインクルードしています。
私の場合、comments.phpをテンプレートで分けているのは、ギャラリーページでも使うからです。

Back to Contents Menu

single-gallery.php(ギャラリーページ)

Karujuオリジナルテンプレート(single-gallery.php)

絵のページです。
ギャラリーページはカスタム投稿タイプで作成していて、post type(分類名)の名前はgalleryにしています。
ポスト投稿タイプのブログページとはレイアウトや管理を変えたいので、カスタム投稿タイプにしています。
ご覧の通り、ブログのページではシングルカラムでしたが、ギャラリーページは2カラム入り、レイアウトが違います。

Wordpress(ワードプレス)カスタム投稿タイプ

comments.phpをテンプレートで分けているのは、ブログの記事ページでも使うからです。

カスタム投稿を使うには、便利で有名なプラグイン『Custom Post Type UIがあります。
便利で管理しやすいです。とてもメジャーなので使い方は検索すればたくさん出てきますよ。
WordPress(ワードプレス)Custom Post Type UIのメニュー

Back to Contents Menu

karuju-blog-top.php(ブログ一覧)

Karujuオリジナルテンプレート(karuju-blog-top.php)

ブログ記事のトップページに当たります。
上部のメニューBlogをクリックして記事一覧が表示されるページです。

ブログだけ運営している時は、index.phpやhome.phpがトップページにあたるでしょうが、当サイトの場合、トップページの表示を変えているので、そうではありません。
だから、ブログ記事のトップページを個別に作る必要があります。

これは、私が定義したテンプレートになります。自分でわかりやすい名前をつけたらよいのです。(例えば、blog.phpでも、blog-top.phpでも、私のようにサイト名を入れてもいい)
全ての記事の概要が表示されます。
1ページに全ての記事が表示されていると長くなっていきますので、5記事ずつページ送りしています。

Back to Contents Menu

archive-gallery.php(ギャラリー一覧)

Karujuオリジナルテンプレート(archive-gallery.php)

slugがgalleryのアーカイブテンプレートになります。
上部のメニューGalleryをクリックして表示されるギャラリー一覧ページです。
1ページに全ての絵が表示されていると長くなっていきますので、12枚ずつページ送りしています。

Back to Contents Menu

category.php(ブログカテゴリー)

Karujuオリジナルテンプレート(category.php)

ブログ記事は、3つのカテゴリーで構成していますので、カテゴリーごとに表示させることができます。
例えば、「趣味」をクリックすれば、そのカテゴリーの記事のみが一覧で表示されるようにしています。

Back to Contents Menu

tag.php(ブログのタグ)

Karujuオリジナルテンプレート(tag.php)

ブログのタグは、複数のタグがあるので、タグごとに表示させることができます。
例えば、オンラインショップに関する情報だけ見たい場合は、タグの「オンラインショップ」をクリックすれば、そのタグの記事のみが一覧で表示されるようにしています。

Back to Contents Menu

taxonomy-illust.php(ギャラリーのタグ)

Karujuオリジナルテンプレート(taxonomy-illust.php)About

post taxonomy(分類名)の名前をillustにしています。
ギャラリーのタグは、複数のタグがあるので、タグごとに表示させることができます。
例えば、猫だけの絵を見たい場合は、タグの「猫」をクリックすれば、猫の絵だけが出てくるようにしています。

Back to Contents Menu

page.php(AboutとContact用ページ)

Karujuオリジナルテンプレート(page.php)About
Karujuオリジナルテンプレート(page.php)

固定ページです。
About(当サイトの紹介)とContact(お問い合わせ)のページで使っています。
本文は投稿フォームで入力されたものが表示されています。

なお、『Contact Form 7』については、【WordPress】『Contact Form 7』を便利にするプラグインやカスタマイズという記事も過去に書いていますので、ご参考下さい。

Back to Contents Menu

404.php

Karujuオリジナルテンプレート(404.php)

存在しないURLが入力された場合、404のページを表示させます。
オリジナルの404ページが表示されるので、凝っている人はとても面白いものもあります。

必ず必要なものではありません。
404.phpを作成してない場合は、味気ないテキストのみの「404 not found ページがありません」が表示されます。

私はデフォルトの「404 not found ページがありません」というテキストのみのページが出てしまうと、サイトそのものの存在がなくなったのかな?と思ってしまうので作っています。
ヘッダーのメニューがついているだけでも、そこに訪れた人は他のページを見に行くかもしれません。

Back to Contents Menu

その他のよく使われるテンプレートと使わなかった理由

検索結果を表示するsearch.php、日付別に表示するdate.php、作者ページを表示するauthor.phpがよく使われるんじゃないでしょうか。
私が使わなかった理由は下記の通りです。

  • search.php:記事が少ないから、category.phpやtag.phpで見れば間に合うと思いました。そろそろ追加してもいいかもしれないです。
  • date.php:日付で探して見ることはないと思ったからです。
  • author.php:page.phpを使いまわしたからです。

Back to Contents Menu

最後に。次回のオリジナルテーマについて

ver.1は、とても思い入れのあるお気に入りテーマです。
WordPressとしては2作目、公開は他のサイトも制作していたので、3作目でした。
全てブログ単体型ではなく、トップページやカテゴリページ、複数のシングルで異なるデザインになるサイトしか作ったことがなく、一度作れば使い回しができるので、最初よりは簡単に作る事が出来ました。
シングルカラムで制作したのは初めてだったので、新鮮でした。
もっとテンプレートを少なくすることもできるのかもしれませんが、私は分けた方がわかりやすいので、こんな感じになっています。

いずれリニューアルしたいと思いますが、使用するテンプレートも再検討し、PC表示でもスマホでそのまま見やすい感じで、スマホ用ではすこーしだけ表示を変更するのみのオリジナルテーマにしたいと考えています。

(他にテンプレートとして最低限必要な情報があれば、追加していくかもしれません。何かおかしな点がございましたら教えてくださるとありがたいです。)