PHPの知識の薄い僕がWordPressのテーマをゼロから自作してる

Theme, Wordpress


php_css_html_code

サイトに適用して運用開始したけど、まだまだ未完成・道半ば
新たな技を入手したら、逐次このコンテンツを更新していく


 

前置き:既成品に満足できないなら自分で作ってしまえ

wordpress-multisiteサイトのCMSをWordpressにしてからかれこれ4年くらいになるだろうか。
これまで有料無料含めていろんなテーマを使ってきた。

が、どれにも満足することはできなかった。

過剰すぎる装飾がついていたり。
アホみたいにカスタムフィールドを使ってデータベースを肥大化させるものであったり。

既成のものは不特定多数のユーザー個々のニーズにできるだけ対応するためにオプションやテンプレートを大量に含んでいるケースが多い。
でも僕が使ってるのはそのうちのごくわずか。

細かい部分で気になるところを治そうと思ってソースを開くと構成ファイルがたくさんあったり条件分岐とかがわんさと書いてあったり
もうね、複雑すぎてわけがわからない。

だったら自分で作ってしまったらどうだろう。

WordPressのテーマはPHPで構築する。
HTMLとCSSの知識は多少持ち合わせているつもりだけれど、肝心のPHPの知識は薄い。

この記事は、そんな僕がゼロからテーマ(らしきもの)を作ることにチャレンジしている中での覚書あれこれ。

最低限のところまでは作って適用しているけれどもまだまだ完成したわけじゃない。
新しい機能とかTipsとかを追加したらその都度この記事を更新していくつもり。

能書きは極力排除して、かいつまんで。
かいつまみすぎて間違ってることもあるかもしれないけれども。

要素の意味とか使い方の詳細は、本家のcodexのページを参照してくださいませ。

それとあらかじめ断っておくと、これは僕自身が満足できればそれでいいという低いレベルでやってることなので

  • テーマメニューでのカスタマイズの自由度とか考えない
  • SEOなんてどうでもいい
  • 技量が及ばない部分は躊躇せずにプラグインに頼る

 
よって企業用のサイトとか本気で作ってる人向けの話ではないです。

あしからず。

 

chapter 1:レイアウトを考える

画面いっぱいに記事が表示される1カラムとか、片側にサイドバーのある2カラムとか。
ヘッダーとメニューをどう置くか、とか。
そういう大きなレイアウト(構成)を考える。
今回僕が作ろうとしたのはこういう画面構成。

sitelayout_plan
レイアウトを考えるときはそれぞれのエリアに”main”とか”container”とか名前を付ける。
で、後々CSSで記述する。
 

chapter 2:ファイルを用意する

まずはローカルで次の構成を作る。

  • theme_folder (フォルダ名=テーマの名前にしておく)
    • style.css
    • index.php
    • header.php
    • single.php
    • page.php
    • sidebar.php
    • footer.php
    • page.php
    • functions.php

ファイルの文字コードはutf-8、改行コードはLFに設定しておく。
特に改行コードは注意。おかしな設定にすると後でtheme checkをかけた時に余計なnoticeが吐き出されてしまう。
 

chapter 3:style.cssを作る

最低限記述しなければならない項目。
結構いっぱいある。

  • コメントアウト:Theme Name
    テーマの名前。
  • コメントアウト:Theme URI
    テーマのURI。とりあえず自サイトのトップ指定しておいた。
  • コメントアウト:Version
    テーマのバージョン。最初は1.0。
  • コメントアウト:Author
    テーマ作った人。
  • コメントアウト:Author URI
    テーマ作った人のURI。これもとりあえず自サイトのトップ指定で。
  • コメントアウト:Licence
    GNUとかCCとか。配布するつもりじゃないので根拠なくGNUを選択。
  • コメントアウト:Licence URI
    licence.txtとか書いてみる。実態はないんだけどね。
  • クラス:aligncenter
    中寄せの書式。
  • クラス:alignleft
    左寄せの書式。
  • クラス:alignright
    右寄せの書式。
  • クラス:wp-caption
    画像キャプションの書式。
  • クラス:gallery-caption
    ギャラリーキャプションの書式。
  • クラス:sticky
    なんだこれ?
  • クラス:bypostauthor
    コメント欄でauthorがコメントした時の書式。

おまじない。
書かなくてもテーマチェックはパスするけど大丈夫だけど書いておくといいかも、的な要素。

  • img.centered
    画像中寄せ。
  • img.alignleft
    画像左寄せでテキスト回り込み。
  • img.alignright
    画像右寄せでテキスト回り込み。
  • .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail
    画像サイズの基本指定クラス。width:100%; height:autoを指定してレスポンシブデザイン的にする。
  • img[class*=”wp-image-“], img[class*=”attachment-“]
    添付画像のクラス。やはりレスポンシブ的にwidth:100%; height:autoを指定しておく。

以上全てを記述するとstyle.cssはとりあえずこんな感じ。

 

chapter 4:index.phpを作る

index.phpはサイトのトップページにあたる部分。
ここには「記事一覧」を表示させる。

  • ヘッダーとフッターはそれぞれheader.php、footer.phpから読み込み。
  • コンテンツエリアに”main”というidを付与。clearfixで回りこみ解除。
  • ループで記事を呼び出し。表示数はwordpress本体の「設定」→「表示設定」に従うのでここでは指定しない。
  • 各記事に”postlist”というクラスを付与。
  • 各記事ごとにタイトルと抜粋を表示。
  • サイドバーは表示させない。

これに関係する項目をCSSに追記 (値はお好みで調整を)。

#mainの上側に150pxのマージンをとったのは、後でヘッダーを固定メニューにするつもりなので、その分の余白。
 

chapter 5:header.phpを作る

サイト共通のヘッダー部分。
サイトのタイトルや概要を書いたり、メニューを置いたりする場所。

  • 最初に”!DOCTYPE html”を宣言。
  • language_attributes();で言語を指定。
  • 文字コード”utf-8″指定。
  • ページのタイトルを”wp_title();”にする。
  • get_stylesheet_uri();でスタイルシートの場所を指定。
  • シングルページの時はwp_enqueue_script( “comment-reply” );でコメント欄を呼ぶ。
  • ヘッダー部分の最後に”wp_head();”を記述。
  • bodyタグで本文開始。body_class();でクラスを指定する。
  • ヘッダーエリア全体のクラスを”fixed-header”に指定。
  • ヘッダー内にコンテンツを記述するエリアをクラス”site-info”で指定。これはヘッダー帯を画面全体に広げてコンテンツは記事本文の幅に合わせたレイアウトにしたいから。
  • “container”で記事本文のクラス指定。

これに関係する項目をCSSに追記 (値はお好みで調整を)。

 

chapter 6:footer.phpを作る

サイト共通のフッター部分。
コピーライトや、あとアナリティクスのコードを書く場所。

  • フッターエリア全体のクラスを”footer”で指定。
  • フッター内にコンテンツを記述するエリアをクラス”footer-content”で指定。これはフッター帯を画面全体に広げてコンテンツは記事本文の幅に合わせたレイアウトにしたいから。

これに関係する項目をCSSに追記 (値はお好みで調整を)。

 

chapter 7:single.phpを作る

投稿記事のページ。

  • “header.php”を読み込む
  • コンテンツエリアに”main”というidを付与。clearfixで回りこみ解除。
  • ループで記事を読み込み。
  • “article”で記事を囲む。この時にpost-IDとpost-classも読み込む。
  • “the_title()”で記事のタイトルを読み込む。ここには”post_title”というidを付与する。
  • “the_date()”、”the_category”、”the_tag”でそれぞれ記事の投稿日、カテゴリー、タグを読み込む。ここには”post_info”というidを付与する。とりあえずリストで配置して、後でCSSで横並びにする。
  • “the_content()”で記事本文を表示する。ここに”content”というidを付与する。
  • “sidebar.php”と”footer.php”を読み込む。

これに関係する項目をCSSに追記 (値はお好みで調整を)。

 

chapter 8:page.phpを作る

固定ページ。
single.phpから投稿日とカテゴリーとタグを抜いたものを書く。

 

chapter 9:sidebar.phpを作る

記事の横に表示されるウィジェット。
「外観」→「ウィジェット」で作るカスタムウィジェットを有効にするにはfunctions.phpに構文が必要なのだがこれは後述。

短い。
これに関係する項目をCSSに追記 (値はお好みで調整を)。
sidebarの幅(margin含む)+contentの幅(margin含む)がcontainerの幅を超えないように注意。

 

chapter 10:functions.phpを作る

functions.phpはテーマにいろんな機能を追加するためのファイル。
Wordpressのコアに用意されている機能から自分にとって必要なものを記述する場所。
PHPなので、ファイル全体を

で囲う。

最低限必要と思われる項目は次の通り。

  • RSSフィードのリンクを作る(必須)
  • content_widthを定義する(必須)
    値はメディアの最大幅に設定してみた。
  • アイキャッチ画像(post_thumbnail)を使えるようにする
  • カスタムウィジェットを使ってsidebarを構成できるようにする

上記を全部記述すると…

 

chapter 11:読みやすいフォントは?

さて、基本設定が終わったのでここからはちょっと細かい話を。

まずは「フォントをどうするか?」。

日本語を含むフォントセットというのはちょっと面倒。
基本的に明朝かゴシックかという好みの問題がある。
僕はゴシック派。でもMS Pゴシックを指定するのはイヤだ。

Macならヒラギノ、Windowsならメイリオが読みやすいんじゃないかな?
font-familyはどう記述するのがいいんだろう?

…と思ってあれこれググっていたら、「小塚ゴシック」なるものの存在を知った。
これがすごくいい。Adobe Readerに付属してるんだそうで、結構いろんな環境で対応できるかも。

そんなこんなで採用したのがこのセット。CSSに追記。

 

chapter 12:ヘッダーの「サイト名」を「アイコン」に入れ替え

goldmine1969.comヘッダーにサイト名を出すのはやめて、これをアイコンに置き換えることにした。

header.phpの

にある”<?php bloginfo(‘name’); ?>”を自分で用意したアイコンのURIに差し替え。

それだけ。

なんかこの方がスッキリしていて好きなのだ。
 

chapter 13:カスタムメニューを使う

「外観」→「メニュー」で作った「カスタムメニュー」をサイトに組み込む。

表示させたい場所に

を書くだけ。実に簡単である。

ところがどっこい。
これ、ul-liの「リスト表示」なのだ。
だから縦置きになる。

いくらなんでもあんまりなので、装飾する。

  • トップメニューを横並びにする
  • hoverした時に背景の色を変える
  • 階層メニューはドロップダウン形式

CSSで定義するためにまずここに”header-nav”というidを付与する。

で、CSS。このサイトの記事を参考に…というか、色を変えた以外はほぼ丸写しである。

wp_nav_menu の出力をドロップダウンメニューで表示

するとこんな感じでできあがり。
navimenu

 

chapter 14:ヘッダーを固定する

メニューの部分までを固定表示させて、記事を下にスクロールてもいつも同じ位置に表示されるようにする。
この前まで使っていたテーマで採用されていたUIで、ページ遷移がたやすいという点でナビゲーションとしてはいい感じだなぁと思ったので今回も取り入れることにした。
固定して、更に軽く透過させてスクロールしたコンテンツがうっすら見えたらオサレなんじゃなかろうか!

ってことで、やってみる。

“posotion: fixed”というプロパティを使うとエリアを「固定」させることができる。
“fixed-header”で定義した部分を「固定」させてさらに「うっすら透過させる」には、CSSに次のように書く。

これは「背景が白」の時ね。
 

chapter 15:index.phpでサムネイル付き記事一覧を表示させる

index.phpを作るで既にトップページに「記事の一覧」は表示されている。
これにアイキャッチ画像(thumbnail)をつけるとちょっと賑やかになって楽しい。

そこで

の部分に”the_post_thumbnail()”を追加して

と書き換える。
“list_image”というクラスを追加したのはCSSであんなことやこんなことをするため。むふふ。

とりあえず左寄せにして記事のタイトルと並べる。

で、さらに…。
 

chapter 16:記事一覧のサムネイルを円形にトリミングする

先ほど配置したサムネイルを円形にトリミングしてみる。
これもCSSを使う。

因みに、これは「設定」→「メディア」でサムネイルのサイズを「150×150」で、かつ「実寸法でトリミング」にチェックを入れている場合のコード。

上記のコードだけで円形にトリミングすると縦横比がぐちゃぐちゃになってしまうのだ。
だからあらかじめ「正方形にトリミングされた画像」を用意しなくちゃいけないんだけど、既存の画像を正方形にトリムするのってかなり面倒。そこでシステムに「実寸法でトリミング」させて、これを使ってしまおうというわけ。
 

chapter 17:記事一覧に目立つカレンダーを付ける

さて。トップページでもうひとつやりたいことがある。
これも固定ヘッダーと同様にこれまで使っていたテーマに実装されていたもの。

それは「大きくて目立つ日付表示」。

トップページは昔でいうところの”What’s New”的な意味を持たせているので、日付表示は欠かせない。
表示するなら大きいほうがわかりやすい。

というわけで、これもCSSで実装した。

この2つのクラスで定義した「日付表示」を、一覧表示された各記事の左端に表示させる。
index.phpでの”postlist”の部分の記述を

とした。

これで各項目の左から
「日付」→「円形サムネイル」→「記事タイトルと概要」
と並べることができた。
indeximage
 

chapter 18:コメント欄を追加する

僕のサイトにコメントを貰うことはほぼ皆無なので優先順位は最下層なのだが、一応付けておく。

必要なのは

この2つ。
コメント本体と、コメント数が多くなった時にページ送りするためのナビゲーション。
<?php the_content(); ?>の後ろに置くのが一般的。
 

chapter 19:固定ページにFull Widthのテンプレートを追加する

page.phpを作るで作った固定ページはsidebarのあるレイアウトだったが、sidebarのないレイアウトのページが欲しい場合があるかもしれない、というか、実はすでに欲しい。
なので、それ用の「テンプレート」を用意する。

新たに”page_fullwidth.php”という名前(任意)のファイルを用意する。

  • まず”Template Name”を定義する。ここで定義した名前が固定ページの編集画面でのテンプレート選択項目に出てくる。
  • 全幅表示でsidebarを読み込まないので”content”のクラスは呼んでこない。

作ったファイルをテーマフォルダにアップロードすれば固定ページのテンプレートが追加される。
 

chapter 20:hoverでリンク付きのイメージの透明度を変える

リンク付きの画像は、hoverした時にちょっと透過させてやるとオサレかも。

ってことで、CSS。

↓ normal ↓
imgnomal

↓ hover ↓
imghover

うん、いいかも。
 

chapter 21:ページナビゲーションを実装する

インデックスページやアーカイブページで、記事が多くて一覧に表示できない時に表示されるナビゲーションを実装する。
標準のものだといささか味気ないので、ちょっと装飾してみた。

index.php: footer読み込みの前

style.css

pagenavi

うん、いい感じ。
 

chapter 22:ページタイトルにサイト名を追加する

ページのタイトルはヘッダー内の

で定義する。

“wp_title()”は現在表示している投稿のタイトル。
これだけじゃなんなので、末尾にサイトの名前をくっつけたい。

サイトの名前は”bloginfo(‘name’)”で取得できるので

とやれば一件落着

と思ったら。

この状態でテーマチェック(後述)をかけると、

「<title>の記述にwp_title();以外を使うな。
 何か書きたいならwp_title();の引数で定義しろ」

って言われてしまう。

なので、functions.phpでwp_title();のパラメーターについてちょっと定義してやることにする。

functions.php

これでbloginfo(‘name’);をページタイトルの一要素として取り込んでしまう。
「ページタイトル | サイト名」
という表示にするために、header.phpに

と記述すればOK。
 

chapter 23:プラグインTheme-Checkでテーマをチェックする

さて、もうほぼ完成。
正式に運用を開始する前にプラグイン”Theme-Check”で作ったテーマにエラーがないかチェックする。
このプラグイン、wordpressのテーマレビューチームでも使用されているとのことで、信頼性は折り紙つき。

インストールして早速チェックを…
しかし、怒られる。

enable_wpdebug

「wp_debugを有効にしなさい!」

なるほど。

有効化するには本体のconfig.phpにある”define(‘WP_DEBUG’, false);”を”define(‘WP_DEBUG’, true);”に書き換えるだけ。

気を取り直して再度チェック。

ここまでやってきたことを全て記述していればエラーを返されることはないと思う。
RECCOMENDはいくつか返されるが、いずれも必須ではない。
内容を読んで、必要だと思ったら足していけばいい。

もしエラーが出てしまったら…

参照:
作成したテーマをチェックしてくれるプラグイン Theme-Check

エラーを潰したらテーマを適用していよいよ運用開始だ!
 

chapter 24:Socialボタンを追加する

昨今どこのサイトにもくっついてるSNS向けのシェアボタン。
twitter、facebook、google+、はてブ、pocket用のボタンを設置する。

single.phpなど。ボタンを挿入したい箇所に

ボタンを横一列に並べるために、

style.css

socialbutton
 

chapter 25:投稿フォーマットを追加する

記事ごとにそれが「どんなタイプなのか」を定義できる「投稿フォーマット」。
うまく使えばフォーマット毎にページのテンプレートを変えたりすることができる。

まだそこまでしないけど。

functions.php

引数は自分が必要な物だけ定義すればいい。
 


参考にさせてもらったwordpressやphpやcssのえらい人達

HTML,CSSができる人向けのWordPress自作テーマの作り方
WordPress テーマ作成時には必ず指定しておきたいネイティブCSS
wp_nav_menu の出力をドロップダウンメニューで表示< CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法
プラグインを使わないでWordPressにページナビを実装してみる
作成したテーマをチェックしてくれるプラグイン Theme-Check