WordPress覚え書き（Bonesテーマの導入編）

オープンソースのブログ／CMSプラットフォームであるWordPressには、「テーマ」と呼ばれているテンプレートがある。WordPressのテーマは、下記のWordPressのサイトから無料でダウンロードすることができる。
https://wordpress.org/themes/

これらのテーマは、ユーザが洗練されたデザインで簡単にブログを始めることができるというeasy operationのメリットがある一方、簡単には自分の独自のデザイン取り入れることができないというデメリットがある。それだったら気に入ったテーマのデザインに少し手を入れればいいんじゃないの？と思う人もいるかもしれないが、ある程度作りこまれた複雑なテーマに手を入れるのは中々大変なのである。また、一からテーマを作るのも並大抵のことではない。

このようなトレードオフの問題を解決してくれるのが「Bones」というテーマである。「Bones」は名前の通り骨組みだけのデザインになっていて、ユーザが比較的簡単に手を入れることできる。

まず、http://themble.com/bones/の「Download For Free」をクリックして、Bonesテーマ一式をダウンロードする。ダウンロードしたファイル（eddiemachado-bones-v1.06-710-g22dbfcb.zip）を適当な名前に変更する（今回は、original.zipに変更した。)。

WordPressの管理画面で、外観->テーマ->新規追加->テーマのアップロードを選択し、original.zipをアップロードする。

次に、外観->テーマ->Bonesを選択して、「有効化」ボタンを押す。

これで、Bonesテーマが適用されるが、このままでは、味気の無いデザインなので、いろいろ手を入れてみる。

1) ヘッダーにロゴ画像を表示する
最初に、WordPressのインストール先の「wp-admin/library/images」にロゴ画像（logo.jpg）をアップロードする。そして、WordPressの管理画面の外観->エディタでheader.phpを次のように編集する。

【編集前】

<?php // to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> ?>
<p id="logo" class="h1" itemscope itemtype="http://schema.org/Organization"><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></p>

さすが、Bonesは手を入れることを前提にしているだけあって、ロゴ画像を表示するためには、bloginfo('name')をimg srcに置き換えて、pタグを削除しろと親切に説明が書いてある。

// to use a image just replace the bloginfo('name') with your img src and remove the surrounding

【編集後】

<?php // to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> ?>
<a href="<?php echo home_url(); ?>" rel="nofollow"><img src="<?php echo home_url(); ?>/wp-content/themes/original/library/images/logo.jpg"></a></div>

2) ヘッダーの背景を、画像に変更してみる。
デフォルトでは、ヘッダーの背景は#323944の一色になっているが、ロゴ画像に合わせて背景も画像にしたい場合がある。そのためには、WordPressの管理画面の外観->エディタにて、library/css/style.cssを次のように編集する。

【編集前】

/*********************
HEADER STYLES
*********************/
.header {
  background-color: #323944; }

#logo {
  margin: 0.75em 0; }
  #logo a {
    color: white; }

【編集後】

/*********************
HEADER STYLES
*********************/
.header {
  background: url(../images/head_bg.jpg) 0 0 repeat-x; }

#logo {
  margin: 0 0; }
  #logo a {
    color: white; }

これで、head_bg.jpgという縦長の画像を水平方向に繰り返す背景を表示することができる。