WordPressでオリジナルテーマを作ろう・構造編

WordPressでオリジナルテーマを作ろう

こんにちは、ダンナの人です。

WordPressでオリジナルテーマを作って遊ぼうとしたわけですが、それにはまずWordPressがどんな仕組みなのか把握する必要がありました。今回は忘れないようにメモする意味も含めて、ダンナの理解できた範囲で説明したいと思います(*”ー”)ゞ

CMSの仕組み

WordPressCMSに分類されるシステムです。これは例えばタイトルであったり画像であったり日付であったり、様々なデータ(コンテンツ)を一元管理するシステムのこと。細かい定義は置いておいて、実際にWordPressでブログを書く際にどういうことをしているかというと、投稿記事のタイトルや本文・カテゴリーなどをデータベースに記録し、必要に応じて呼び出して表示しているわけです。

その表示(出力)部分を定義するのがテーマ。テーマで設定したテンプレートに従ってタイトルをココに表示、本文はココに表示と指定するとブラウザに出力してくれます。

このテーマ内のテンプレートを弄れば自分の好みの出力をしてくれるようになるわけですが、それにはいくつか覚えなければいけないこともあるのです。

htmlとCSS

WordPressもブラウザを通して見るものなので、基本的にHTMLで出力され、それをCSSで装飾しています。テーマテンプレートでも殆どがHTMLで書かれていて、一部データベースからデータを取り出す際にPHPタグを使用する事になります。

PHP

動的なコンテンツを出力させるための言語、、、とでも言えば良いんですかね?動的というのは固定でないということ。HTMLで書いたものは書いたことがそのまま出力されますが、PHPでは記録されたテーブルからデータを取り出してきているので、例えば先週の記事のタイトルであったり昨日の記事のタイトルなど、取り出したデータに応じた出力をしてくれるわけです。

データを取り出すなんて難しそう、、と思ってしまいますが、実際には決まった関数を使うのでHTMLタグと少し書式の違うタグを書くような感じになります。イメージ的にはHTMLJavascriptの中間のような書き方でしょうか。

テーマ作成に必要なファイル

では実際にテーマを作るには何をすればいいのか、ですが。。

テーマフォルダの中を覗いたことのある人はものすごい数のPHPファイルが有ってビックリしたと思いますが、テーマの最小構成は以外と少ないファイルだったりします。

最低限必要なのは、

  • テーマをまとめるフォルダ
  • index.php
  • style.css

です。

indexはなんとなく分かるとしてスタイルシートが必須なのは少し不思議でしたが、このstyle.css内で「ここにあるのはテーマですよ」と知らせる役目を担っています。

例えば「Laperm」というテーマを作るとして、「Laperm」という名前のフォルダを作り、その中に空っぽでも良いのでindex.phpというテキストファイルとstyle.cssを作り、style.cssの冒頭に「/* Theme Name: Laperm */」と書いておけばWordPress上でテーマとして認識してもらえます。

ページ構成とテンプレートの種類

このままテーマとして設定しても、index.phpの中は空っぽなので勿論何も出力されません。出力したい中身を書いていかないといけないのですが、その前にWordPressでのページ構成を覚えて必要なテンプレートを作っていくことになります。

WordPressでのページ構成というのは、フロントページであったり、投稿記事のページであったり、検索結果の表示だったりする、場所というか表示モードのことです。

このページ自体はテンプレートの有無にかかわらずWordPressのシステム側で制御されていて、いま表示しているページに合わせて最も適切なテンプレートが自動的に選ばれる仕組みです。index.phpはその全てに属するテンプレートで、他に適したテンプレートがなければ最終的にindex.phpをテンプレートとして出力する、と言った形です。

このページ構成はなかなか複雑だったりするのですが、代表的なものをあげると

フロントページ

ブログを開いてまず表示されるページ。ドメイン直下(Wordpress直下)に来るページのことです。WordPressの設定でココに固定ページを表示することも出来ますがややこしいので「最新の投稿」という記事一覧表示をしているページという事で進めていきます。

投稿記事ページ

投稿記事単体のページ。フロントページの一覧や検索結果、リンクなどから直接投稿記事を開いた時に表示されるページの事。

固定記事ページ

プロフィールページや問い合わせフォームなど、一般の投稿とは区別したい記事用に用意されたページ。

アーカイブページ

カテゴリーや日付など、条件毎に一覧表示する用のページ。纏めてアーカイブテンプレートにすることも出来ますが個別に作ることも出来ます。似てるのに検索結果ページはなぜか別枠だったり。

404ページ

存在しない記事を開こうとした際等に表示されるエラーページ。

 

上でも書いたとおり、今どのページを表示しているのかはWordPressのシステム側で管理されているので、index.phpのみで条件分岐タグを使ってページに合わせた表示に切り替える、ということも出来なくは無いのですがコードが長々となってしまい管理も大変です。

そこでページに合わせたテンプレートを用意していくわけです。

パーツ構成とインクルード

ページごとのテンプレートを用意するとして、いくつか共通の部分が出てくるかと思います。ヘッダやフッタなど基本構成要素。これらの共通部分はパーツ化して複数のテンプレートで使用できるようにすることが出来ます。

サイドバー等がわかりやすいでしょうか。例えば最新記事の一覧を表示したりカテゴリリストを表示したりするウィジェットを好きに組み合わせて使うことが出来ます。テンプレートでもこういう感覚でパーツを貼り付けて行くことが出来るわけです。

そこで使うのがインクルードタグ。指定したPHPファイルをココに取り込んでください、というタグです。ヘッダやフッタなど主要なものは専用のタグが用意されていますが、指定したPHPファイルも読み込むことも出来ます。

まとめ?

ということで、まずはWordPressがどう動いているのか、どういう構造になっているのか把握出来てきました。次回からは実際にテーマを作りながら説明していきたいと思います(*”ー”)ゞ

この記事へのコメント

この記事へのコメントはありません

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です