wordpress標準テーマTwenty Fifteenをカスタマイズ

このブログは開設当初からwordpressで動いているのだが、そろそろテーマを見直そうと思い色々物色してみた。

因みにテーマ変更前はこんな感じ

 

無料で利用していたテーマで、ありがたく長年使わせてもらっていたが、時代と共に少し不満な点が出て来たのでテーマを見直すことにした。

以下、不満点など

• スマホ対応出来てない
  他のプラグインなど入れれば出来たのかもしれないが、そこまで本気で調べなかった。昨今無視できないほどのユーザー数となったスマホを意識せずにPC版と同じ表示ではさすがにまずい
• 横幅がちょっと狭い
  最近のPCはほとんどワイド液晶になっているので
• フォントが小さい
• 見出しが分かりづらい

スマホ対応以外はちょっと手直しすれば直せそうではあったが完全に放置状態。

色々とテーマを探そうかと思ったけど、結局標準テーマのTwenty Fifteenに落ち着いた。Twenty FifteenはリリースされたばかりのWordpress 4.1の標準テーマでカスタマイズしたくてもネットに全く情報が無いので、一個前のTwenty Fourteenにしようかと思ったけど折角なんで新しいものに飛びついてみた。

 Twenty Fifteenの特徴

• レスポンシブデザイン
  もうすべてはこれのため。PCで見ても、スマホで見てもよろしくやってくれます。
• シンプル
  どシンプルです。前は色々テーマ一覧とかみておしゃれなやつとか探してたけど、なんだかんだシンプルが一番じゃねって思ってたのでちょうどよかった。
• 左側にサイドバー
  前右だったんでちょっと違和感
• ヘッダーが無い
  厳密にはサイドバー内に入っているっぽい

こんな感じでしょうか

Twenty Fifteenのカスタマイズ

そんな凝ったことはやってない(というか出来ない) が自分用のメモとして。

子テーマの作成

wordpressのテーマを編集するための常套手段として、子テーマの作成をする。偉そうに書いてますがまったく知らなかった。。。

子テーマを作る利点としては、元のテーマがアップデートされても子テーマ側で影響を受けないこと。実は前のテーマの時は子テーマの存在を知らなくて、元のテーマのフォントサイズを直接編集していたのだが、アップデートの度に元に戻ってしまって結構困っていた。

子テーマの作成は、非常に簡単で、wordpressのテーマディレクトリに任意の名前でディレクトリを作成します。

wordpressのテーマディレクトリは、

<wordpressをインストールした場所>/wp-content/themes

です。

作ったディレクトリに、1つだけstyle.cssってファイルを作って、中身をこんな感じにする。

@import で元のテーマのスタイルシートを読み込んでます。

これだけで子テーマの完成、@import以下に自分で定義したいスタイルシートを書いて行けば、見た目の変更は可能です。簡単簡単

 見出しのデザイン変更

前のテーマでも課題だった、見出し(H2,H3,H4とか)のデザイン、Twenty Fifteenでも特にデザインされてません。普通にH2は太字程度だったと思う。標準テーマなのでベースは用意するから見た目は自分で変えなさいよ的なスタンスなんだと思う。

デザインとしてはさほどこだわらないが、記事作成時に折角見出しを付けても見た目で区別がつかないともったいない。

ということで、ネットで情報をあさり、スタイルシートだけで出来る見出しに落ち着いた。

左側に縦棒で文字下に線っていう簡単なやつ。色はなぜかオレンジ系にした。以下は実際のスタイルシート

上で作った、style.cssの@import より下に書けばいいだけ。h3だけだが一応h1からh6まで作ってある。border-leftとborder-bottomの色を変えたりすれば、各見出しで変化がつくはず。

フォントの変更

ubuntu環境から見ると特に気にならないのだが、Windowsで見るとフォントが汚い。昔はLinuxの方がフォントが汚くて使用に耐えられない感じだったのに、IPAフォントや、Takaoフォントへ移植してくれた方々のおかげでいつの間にか逆転した感じ。メイリオとかにすればいいの？Windowsよくわからん。

 

とりあえずスタイルシート。またstyle.cssの下に追加。

 

最初にgoogleさんが提供しているNotoフォントってやつを使ってみることを試みている。

WEB Fontって効いてるのかよくわからん。普通にメイリオの方が効いてるのかもしれないがとりあえずWindowsでもマシになった気がする。

ウィジェットの下のマージンを調整

サイドメニューに、最近の投稿やらカテゴリやらウィジェットを配置しているのだが、ウィジェットの間のマージンがあれだったのでちょっと修正。

またstyle.cssの下に追加。

ちょっとマシになった。

Google アナリティクス設定

プラグインでやったほうが簡単かもしれないけど、自分で理解してた方がよいので子テーマ側でやります。

今まではstyle.cssの編集のみでしたが、今度はテーマのphpファイルを編集します。

アナリティクスはヘッダーに入れたいので、header.phpを編集します。(テンプレートファイルって言うらしい)

テンプレートファイルの編集は、style.cssと違って、元のファイルを子テーマにコピーしてから編集を行います。

コピー

</head>の直前にアナリティクスのコードを挿入します。

<!– google_analytics –>で囲まれた部分だけ追加です。<?php wp_head(); ?>とか、</head>とかは元のファイルにある部分です。

テンプレートファイルの場合は、style.cssと違って元のファイルをコピーして編集している。これだともし元のファイルになんか重大な問題があって、修正が行われても、テーマのアップデートでは反映されない。子テーマ側に直書きされているため。

アップデートを反映させるには、子テーマ側で元テーマのテンプレートを読み込んで指定箇所に追加したいコードを挿入するようなことをプログラム的にやるしかなさそう。

まー。そこまではいいや。っていうかたぶん自分の自力では出来ない。

他にも細々とした修正はしたけど、だいたいこんな感じ。

タイトルをTwenty Fifteenのカスタマイズと豪勢なものにしたけど、内容薄くて恐縮です。