BizVektorで記事をグリッド表示できる拡張プラグイン「BizVektor Grid Unit」をカスタマイズする例を紹介します。たとえば、3列構成を4列に変更したり、記事の抜粋を表示したり、画像サイズを変更する方法などです。

BizVektor Grid Unitのカスタマイズ例（4列表示・抜粋追加・画像サイズ変更）

サンプルサイトはこちらです。

谷根千散歩.com

まだBizVektor Grid Unitをお持ちでない方は購入が必要です。
記事やページをグリッド表示したい方はお試しください。

以下、BizVektor Grid Unitバージョン 1.4.0で検証しています。

BizVektor Grid Unitの購入はこちらから

初期設定のBizVektor Grid Unit

初期設定のGrid Unitでは次のようにグリッド表示されます。

BizVektor Grid Unitの表示イメージ

3列から4列に変更

初期設定では3列構成です。グリッドの幅を狭くすることで4列に変更することができます。具体的には、現在のグリッド幅は31%（＋左右の余白が1%＝33%で全体の3分の1）になっています。この幅を狭く（たとえば23%に）すれば4列などに変更できます。

4列表示に変更するCSSの例を紹介します。「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力してください。

/* グリッド幅の調整（4列表示に） */
.bv-grid-unit-item {
    width: 23%;
}

これで、グリッドが4列表示になります。

グリッドが4カラムになる

グリッドに記事の抜粋を表示する

現在のグリッドには記事のタイトルが表示されています。その下に記事の抜粋を表示する方法を紹介します。

アーカイブや投稿トップに表示されるグリッドの修正

アーカイブや投稿トップに表示されるグリッドに記事のタイトルを表示している部分はbiz-vektor-grid-unit/views/loop.phpの50行目あたりです。

<p class="bv-grid-unit-title">…略…<?php the_title(); ?>…略…</p>

この下あたりで、抜粋を表示するthe_excerptを実行すれば大丈夫です。具体的には以下にハイライトしたような1行を追加します。

<p class="bv-grid-unit-title">…略…<?php the_title(); ?>…略…</p>
<p style="font-size:11px;"><?php the_excerpt(); ?></p>

これで、グリッドの記事タイトルの下に抜粋が表示されるようになります。

グリッドに記事の抜粋を追加

ウィジェット用グリッドの修正も忘れずに！

上記のグリッド表示はアーカイブや投稿のトップページに表示されるグリッド部分でしたが、必要に応じてウィジェット用のプログラムも修正する必要があります。

具体的には「外観」-「ウィジェット」メニューで「コンテンツエリア（トップページ）」などに組み込む「BizVektor_Grid Unit」ウィジェットに対応するプログラムです。

これはbiz-vektor-grid-unit/views/widget.phpで表示されています。40行目あたりに、グリッド表示のタイトル部分が見つかります。

<p class="bv-grid-unit-title">
    <a href="<?php echo get_permalink() ?>" …略…
        <?php the_title(); ?>
    </a>
</p>

この下あたりでthe_excerptを呼び出せばタイトルの下に抜粋が表示されます。

<p class="bv-grid-unit-title">
    <a href="<?php echo get_permalink() ?>"…略…
        <?php the_title(); ?>
    </a>
</p>
<p style="font-size:11px;"><?php the_excerpt(); ?></p>

コンテンツエリア（トップページ）のグリッドにも抜粋が追加されます。

トップページのグリッドにも抜粋が表示される

画像の表示サイズを変更する

上記のようにアーカイブとウィジェットで別のプログラムを使っていることを利用して、トップページとアーカイブでアイキャッチ画像のサイズを変えてみます。

アイキャッチ画像はthe_post_thumbnailという命令で表示されています。

アーカイブおよびウィジェットのプログラムでは次の場所で実行されています。

• アーカイブ：biz-vektor-grid-unit/views/loop.phpの38行目
• ウィジェット：biz-vektor-grid-unit/views/widget.phpの27行目

どちらも次のように画像サイズは「medium」（中サイズ画像）が指定されています。

the_post_thumbnail('medium');

この1行は実際にはPHPの終了タグ「?>」で終了しています。コードを修正するときは、この終了タグを消さないように注意してください。

the_post_thumbnail('medium'); ?>

この「medium」を「thumbnail」「large」「full」などに変更すれば、中サイズではなくサムネイル、大サイズ、フルサイズの画像を表示することができます。

その他、the_post_thumbnailについて詳しくは、以下のページをご覧ください。

the_post_thumbnail（WordPressリファレンス）

ここでは、「トップページはグリッドの画像をサムネイルにしてグリッドをコンパクトに表示したい」と考えたとします。

その場合、the_post_thumbnailの「medium」を「thumbnail」に変更します。コンテンツエリア（トップページ）のみを想定しているのでviews/widget.phpのみを修正します。

views/widget.phpの27行目は次のようになります。

the_post_thumbnail('thumbnail'); ?>

トップページのグリッドで画像サイズがサムネイルになります。

トップページのグリッドの画像サイズをサムネイルに

まとめ

以上、BizVektor Grid Unitのカスタマイズ例を紹介しました。プラグイン本体の修正について「お試し」は厳禁ですが、こんなこともできるのだとイメージできれば、いつか役立つかもしれません。お試しできる環境で修正してみてください。

1人で作業するのが不安な方はWordPress個別サポートをご利用ください。

BizVektorに親しんだ方にはおなじみのカスタマイズです。

BizVektorの画面右上の連絡先に画像を表示する

ヘッダーの電話番号周りのカスタマイズ方法にあるコードを子テーマのfunctions.phpに入力すれば連絡先に好きな画像や文章を表示することができます。

それで良ければ話は終わりです。

ただし、問題は「また画像を変更することになったらスムーズに作業できますか？」ということです。

functions.phpを修正するのは緊張しますよね。

それを、もう一度行うとすれば…

慣れていない方は気が重くなるかもしれませんね。

まして、お客様に納品するときに「画像を修正したければfunctions.phpというファイルを開いて…」とか「テーマの編集というメニューから直すときは注意してください」という説明で通用するのか微妙です。

そもそも、納品先のお客様がPHPの編集に慣れているのであればサイト制作を外部に発注しないかもしれませんね。BizVektorで簡単に組み立てられるはずなので。

そんなわけで、連絡先に表示した画像を変更するのに毎回、functions.phpを修正しないで済むように、連絡先をウィジェット（ウィジェットエリア）にしておくのはどうでしょうか、というのが今回の趣旨です。

仕上がりイメージは次のようになります。「外観」-「ウィジェット」メニューにオリジナルのウィジェットエリア「連絡先ウィジェット」が追加されます。

オリジナルのウィジェットエリアが追加される

以下、連絡先の部分をウィジェット対応にして、画像を表示するまでの手順を紹介します。

「連絡先ウィジェット」の作成

まずは、「外観」-「ウィジェット」メニューで使えるウィジェットエリア「連絡先ウィジェット」を作成します。名前は自由ですが、ひとまず「連絡先ウィジェット」にしておきます。

コードを紹介する前に少しまわりくどい話をします。

好きなウィジェットエリア（多くはサイドバー）を作成するにはregister_sidebarという命令を使います。BizVektorのfunctions.phpにもregister_sidebarを使ってサイドバーが作成されているので参考になると思います。

自分でオリジナルのウィジェットエリアを追加したければ、使用中のテーマの記述にならってregister_sidebarで作成すれば大丈夫です。

ここでは次のコードを作成しました。これを子テーマのfunctions.phpにペーストします。

/* 「連絡先ウィジェット」の作成 */
add_action('init', 'my_register_sidebar');
function my_register_sidebar() {
    register_sidebar(array(
        'name' => '連絡先ウィジェット',
        'id' => 'contact-widget-area',
        'description' => '画面右上に表示されるウィジェットです。',
    ));
}

register_sidebarの他にも命令が使われていますが、その目的はウィジェットの表示順を最後にすることです。

子テーマでウィジェットエリアを追加すると、最初から存在するウィジェットエリアより先に表示される場合があります。次のようなイメージです。

新たに追加したウィジェットが先に表示されてしまう

これにより、既存のウィジェットエリアの順番が変わってしまい問題が起きる場合があります。たとえば、テンプレートに「2番目のウィジェットの内容を表示してください」と書かれていた場合、ウィジェットの順番がずれることで間違った内容が表示されてしまいます。

BizVektorでは大丈夫なので単純に子テーマでregister_sidebarだけを使ってウィジェットを作成しても良いと思いますが、順番が変わることで不安になる方のために念のため最後にウィジェットが追加されるようにしています。

具体的にはinitフックを利用して、親テーマのウィジェット作成が終わってから子テーマのウィジェット作成を行うようにしています。

話が長くなりましたが、上記のコードを入力すればウィジェットエリアは完成です。「外観」-「ウィジェット」メニューを開くと、最後のウィジェットエリアとして「連絡先ウィジェット」が追加されているはずです。

「連絡先ウィジェット」が最後に追加される

ウィジェットは使用可能になっているので、「テキスト」ウィジェットを追加して、表示したい画像のURLを入力しておきましょう。

テキストウィジェットに画像のURLを入力する方法がわからなければ、以下のページも参考にしてください。

サイドバーに画像を追加する方法

連絡先のテキストウィジェットに画像を追加

続いて、この内容を画面に表示しましょう。

「連絡先」の代わりにウィジェットの内容を表示

作成したウィジェットをBizVektorの画面右上の「連絡先」に表示するため、次のようなコードを子テーマのfunctions.phpに入力します。

/* 連絡先にウィジェットを表示 */
add_filter('headContactCustom','my_headContactCustom');
function my_headContactCustom(){
    ob_start();
    echo '<div id="headContact"><div id="headContactInner">';

    if (is_active_sidebar('contact-widget-area')) {
        dynamic_sidebar('contact-widget-area');
    }

    echo '</div></div>';

    return ob_get_clean();
}

これで、画面右上に連絡先の代わりに「連絡先ウィジェット」の内容が表示されるようになります。

連絡先の代わりにウィジェットの内容が表示される

連絡先のウィジェット化は完了です。まだ使いやすくする方法もあるでしょうが、ここまで加工しておけば、「画像を変更しようと思ってfunctions.phpを間違って直して画面が真っ白に！」の恐れもなくなります。ここからの連絡先エリアのメンテナンスはメニューでウィジェットを操作するだけです。

あとは連絡先ウィジェットにいろいろとパーツを組み込んでみてください。

画像を表示する以外の使い方

サイズの都合で使えるパーツは限られるとは思いますが、実用性はともかくとして、次のようにMTS Simple Bookingの予約カレンダーも表示できます。

ウィジェットなので、こんな使い方もできます

BizVektor特有の「お問い合わせはこちら」ボタンもウィジェットパーツなので簡単に表示できます。

「お問い合わせはこちら」ボタンもウィジェットのドラッグアンドドロップで表示可能

おそらくCSSの修正が必要だと思いますが、話が長くなるのでここでは説明しません。興味がある方はWordPress個別サポートにご相談ください。

まとめ

このように、「ウィジェットの作成」と「ウィジェットの表示」という2種類のコードを記述すると、好きな場所にウィジェットを作成することができます。今回はBizVektorの画面右上の連絡先をウィジェットエリアに加工する例で紹介しましたが、フッターエリアや個別記事の本文下などにも同じ手法でウィジェットエリアを作成できます。

ウィジェットにしておけば、お客様に納品するサイトも簡単にメンテナンスしてもらうことができます。いろいろとお試しください。

WordPressに限りませんが次のようなdivブロックを中央寄せしたいこともあります。

<div class="center-block">
個別指導のWordPress講座です。
銀座またはスカイプで受講できます。
</div>

一般的には左寄せで表示されます。

左寄せのブロック（中央寄せにしたい）

このブロックを中央寄せするCSSとして「margin: 0 auto;」が有名ですが、うまくいかないこともあります。その原因と対策を紹介します。

原因1：ブロック幅が広すぎる

このブロックを中央寄せしたいので、次のようなCSSを記述します。

.center-block {
    margin: 0 auto;
}

このCSSでは、おそらくうまくいきません。

中央寄せがうまくいかない

原因はブロックの幅です。現在のブロック幅を確認するため、CSSに枠線（border）を付けてみましょう。

.center-block {
    margin: 0 auto;
    border:solid 1px #000;
}

ブロックの幅がコンテンツエリアいっぱいに広がっていることを確認できます。

枠線を付けてブロック幅を確認

ピンときたかもしれませんが、このブロックは幅の広い状態（幅100%）で“中央寄せ”になっているということです。

つまり、中央寄せは機能していますがブロック幅が広すぎるのです。

試しに適当なブロック幅（width）を指定してみましょう。

.center-block {
    margin: 0 auto;
    border:solid 1px #000;
    width: 250px;
}

今度は中央寄せがうまくいきます。確認できたら枠線（border）を消してください。

幅を狭くすれば中央寄せが機能する

原因2：インライン要素には「余白」がない

サービスページなどへのリンクを中央寄せしたいこともあります。

<a class="center-block" href="#">個別指導のWordPress講座</a>

次のようにリンクのaタグに対して中央寄せや幅指定をしてもうまくいきません。

.center-block {
    margin: 0 auto;
    width: 250px;
}

リンクは左寄せのままです。

リンクに中央寄せが反映されない

これはリンクのaタグがインライン要素（文章中にレイアウトされる要素）だからです。文章中に含まれるパーツなので余白の概念がありません。

この場合、リンクをブロック要素にする方法があります。具体的には次のように「display: block;」を追加します。

.center-block {
    margin: 0 auto;
    width: 250px;
    display: block;
}

これでリンクがブロック要素になるので、中央寄せが機能します。

中央寄せが機能する

<div class="center-block">
<a href="#">個別指導のWordPress講座</a>
</div>

原因3：画像もブロック要素ではない

バナーリンクなどの画像だけを中央寄せしたいこともあります。この場合もリンクと同じようにdivで囲めば解決です。imgタグに直接指定する場合、次の中央寄せは機能しません。

.center-block {
    margin: 0 auto;
    width: 250px;
}

HTMLは次のようになっています。

<img class="center-block" src="http://…略…contact.jpg" />

表示結果は次のようになります。

ブロック幅を指定しても中央寄せが機能しない

原因はリンクと同じように画像もブロック要素ではないためです。

少し詳しい方は「画像には余白を使える」ことをご存じかもしれませんが「margin: 0 auto;」はうまくいきません。この場合、リンクと同じように「display: block;」を指定してブロック要素にすれば中央寄せできます。

.center-block {
    margin: 0 auto;
    width: 250px;
    display: block;
}

今度は中央寄せがうまくいきます。

画像が中央寄せに

まとめ

CSSの中央寄せ「margin: 0 auto;」がうまくいかない場合は、そのブロックに適切なサイズが指定されているか、その要素がブロック要素で表示されているかを確認してみましょう。

よくいただく質問ですが答えは意外と難しいです。

なぜなら、

• 単純にWordPress全体をバックアップできれば良い
• 問題が起きたらすぐに復元できるようにしたい

では、事情がまったく異なるからです。

単純にバックアップしたいだけならBackWPupプラグインで十分ですが復元目的でバックアップする場合は他のプラグインの方が便利です。

また、「復元したい」についても、

• プチトラブル --- テンプレートの修正を少し間違えたときのために
• 大トラブル --- サーバー障害などでデータが消えたときのために

ではアプローチが異なるでしょう。

大トラブルのときはワンタッチでサイト全体を復元できれば便利ですが、プチトラブルのときはサイト全体を復元する必要もないでしょう。必要なテンプレートの旧バージョンを取り出せれば十分なので、BackWPupプラグインによる単純なバックアップの方が便利です。

そのようなわけで「このプラグインだけでWordPressのバックアップはバッチリ！」と考えるよりも、いくつかのプラグインを頭に入れておいて方が良いです。

具体的には次の3つです。

• BackWPupプラグイン --- 純粋なバックアップを自動作成・プチトラブルの対処に
• Duplicatorプラグイン --- インストーラでサイトを復元・WordPressが消えても大丈夫
• All-in-One WP Migrationプラグイン --- 超簡単！ファイルインポートでサイトを復元

以下、3つのプラグインの特徴を簡単にまとめておきます。

その1：BackWPupプラグイン

BackWPupプラグインはその名のとおり、WordPressをバックアップするプラグインです。

Dropboxにもバックアップを自動保存できるBackWPupプラグイン

BackWPupプラグインのメリット

「毎日3時にバックアップ」のように自動で定期的にサイトをバックアップできます。Dropboxなどに転送することもできます。「復元機能」などのない純粋なバックアップです。役立つのは「テーマの編集メニューからテンプレートを間違って修正してしまった！せめて、昨日の状態に戻したい！」ようなプチトラブルの対処です。

純粋なバックアップがあれば、解凍して必要なファイルを取り出してサーバーにある修正ミスしたファイルを上書きするだけです。

BackWPupプラグインのデメリット

サイト全体の復元が簡単ではありません。バックアップしたファイルを解凍してFTPでアップロード、データベースのインポートを手動で行う必要があります。

また、ドメインを変更した場合などは、URLの置き換えや設定ファイル（wp-config.php）の書き換えなども手動で行う必要があります。慣れない方は、おそらく何度か失敗するでしょう。WordPressの勉強にはなりますが。

こんな方におすすめ

• とりあえずサイトが消えたら困るので全体をバックアップしたい方
• テンプレートの修正ミスに対処できるように純粋なバックアップを取っておきたい方
• 復元が必要になったら詳しい人に頼めば良いという方

BackWPupプラグインについて詳しくは、以下のページをご覧ください。
BackWPupによるWordPressサイトのバックアップ方法

その2：Duplicatorプラグイン

Duplicatorプラグインもその名のとおりサイトをduplicate（複製）するためのプラグインです。実行時に作成されるインストーラとパッケージの2ファイルをアップロードしてインストーラを実行するスタイルでサイトを復元（複製）できます。

復元にも便利なインストーラとパッケージを作成できるDuplicatorプラグイン

「WordPress簡単インストール」のようなメニューのないサーバーに移転する場合でもインストーラを使って簡単にWordPressを設置できるので便利です。

ドメインが変更になった場合でも、URLの書き換えを自動で行ってくれます。

Duplicatorプラグインのメリット

バックアップ時に作成されたインストーラを実行してサーバーにWordPressを復元（旧サイトの複製）できます。サーバーにWordPressをインストールする必要がないので、「サーバーのHDDに障害が発生した！」のような大トラブルや、何らかの事情でWordPressをすべて消去してゼロから始めたいときに便利です。

Duplicatorプラグインのデメリット

レンタルサーバーによってはインストーラを実行できない場合があります。また、復元前に空のデータベースを準備する必要があるので作業に慣れていないと難しいかもしれません。

こんな方におすすめ

• 大トラブルに備えて復元可能なバックアップを保存したい方
• 簡単ではないレンタルサーバーに簡単に既存サイトをコピーしたい方

その3：All-in-One WP Migrationプラグイン

All-in-One WP Migrationプラグインはサイト移転が簡単にできるプラグインです。復元目的でのバックアップ作成に使えるという意味ではDuplicatorプラグインと同じです。

違う点はDuplicatorプラグインでは移転先にWordPressのインストールが不要でしたが、All-in-One WP Migrationプラグインは移転先にもWordPressをインストールしてAll-in-One WP Migrationプラグインを有効化しておく必要があります。

面倒に聞こえるかもしれませんが、作業は最も簡単です。既存サイトからエクスポートしたファイルを移転先でインポートするだけです。

インポートしてサイトを復元できるAll-in-One WP Migration

つまり、今のサイトが壊れたときは、そのサイトにファイルをインポートすれば復元できるということです。

All-in-One WP Migrationプラグインのメリット

とにかく簡単。サイトからエクスポートしたファイルをインポートすれば復元完了です。プラグインのメニューだけでサイトの移転が完了するので怖いくらい簡単です。

All-in-One WP Migrationプラグインのデメリット

簡単すぎて怖いAll-in-One WP Migrationプラグインですが、別の意味でも怖い点があります。

それは、現在のサイトで使用中のデータベースを初期化するので注意が必要だということです。つまり、同じデータベースに複数のサイトをインストールしている場合、このサイトを復元することで他のサイトが消えてしまう可能性があります。特にさくらインターネットのように同じデータベースに複数のサイトを作成するのが簡単な場合は要注意です。

こんな方におすすめ

• 簡単にサイトを復元できるようにバックアップしたい方
• 多くのサイトを作る予定がない方

まとめ

「WordPressサイトのバックアップしたい」の答えが1つではないのは、このような意味です。もちろん、BackWPupプラグインで純粋なバックアップを保持してあれば全てのケースに対応できますが、DuplicatorプラグインやAll-in-One WP Migrationプラグインのようにワンタッチで復元できるプラグインも頭に入れておくと、いつか役立つでしょう。

BizVektorで作成するスマホサイトのフッターにフローティングメニューを作るときに、右端は「上に戻る」ボタンにしたい場合があります。

スマホのフローティングメニュー（右端が「上に戻る」）

「TOP」のリンク先を「#」にすれば単純に画面の最上部に移動するリンクとして機能しますが、せっかくなので、BizVektorの「上に戻る」に相乗りさせてもらいましょう。クリック時にスムーズに上にスクロールされるようになります。

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」に相乗りするには次のように設定します。

• 「上に戻る」のリンク先を「#wrap」にする
• そのリンクを「id="back-top"」のdivタグで囲む

たとえば、次のようなHTMLになります。

<div id="back-top">
<a href="#wrap"><i class="fa fa-arrow-circle-o-up"></i><br />
TOP</a>
</div>

「fa-arrow-circle-o-up」はアイコンフォントFont Awesomeの上矢印アイコンです。

これをフローティングメニューの右端などに追加すれば、「上に戻る」アイコンが表示されます。クリックすると、スムーズに画面最上部までスクロールされるはずです。

ただし、スタイルを設定する必要があります。BizVektor組み込みの「上に戻る」ボタンには「position: fixed;」などが指定してあり、常に画面右下に固定表示されるようになっているからです。

フローティングメニューの「上に戻る」用のサンプルCSSを紹介します。

#back-top a {
    position: relative;
    bottom: 0;
    right: 0;
}

これで、「上に戻る」がフローティングメニューになじんで表示されるようになります。

フローティングメニューの右端に「上に戻る」を表示

あとはいろいろとお試しください。

ゼロからフローティングメニューの設置をご希望の方はWordPress個別サポートで承ります。

Stinger5に限りませんがフッターがシンプルなテーマを使っていると「フッターがウィジェット対応だったら」と思うことがあるかもしれません。

そこで、ここではStinger5を例に、フッターにウィジェットを追加する方法を紹介します。仕上がりのイメージは次のようになります。4列構成ですが3列などにもできます。

4列構成のフッターウィジェットの完成イメージ

検証したバージョンはstinger5ver20150505bですが、他のテーマでも考え方は同じです。自由にお試しください。

フッターウィジェットを使用可能に

「外観」-「ウィジェット」メニューに「サイドバー1」などのウィジェットエリアを追加するにはregister_sidebarまたはregister_sidebarsという命令を使います。ほとんどのテーマでfunctions.phpを見ると、この命令が使われているので、新たなウィジェットを追加するときの参考にできます。

Stinger5のfunctions.phpでもregister_sidebarsを使ってサイドバーウィジェットが定義されているので、参考にしながら次のようなコードを組み立てます。

子テーマのfunctions.phpにコピーペーストしてお使いください。

/* フッターウィジェットの作成 */
add_action('init', 'my_register_sidebar');
function my_register_sidebar() {
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット1',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット2',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット3',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット4',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
}

このようにregister_sidebarまたはregister_sidebarsを使えば好きな名前で好きな数だけウィジェットを追加できます。ここでは4つ追加しましたが、3つで十分な場合は「フッターウィジェット4」のregister_sidebarsのブロックを取り除いてください。

register_sidebarsの他に「function」や「add_action」を使っている理由は、これらのウィジェットを最後に追加するためです。普通にregister_sidebarsだけを使ってウィジェットを追加すると、子テーマが先に実行されるため、既存ウィジェットより先に登録されてしまいます。

フッターウィジェットが先に表示される

既存ウィジェットの順番がずれることでテーマに不具合が発生する場合があるので、できれば既存ウィジェットには影響しないように新たなウィジェットは最後に追加した方が無難です。

ここでは、「外観」-「ウィジェット」メニューの最後にフッターウィジェットが追加されます。

既存ウィジェットの後にフッターウィジェットが表示される

これで、「外観」-「ウィジェット」メニューでウィジェットが使用可能になります。テスト用に好きなパーツを追加してみてください。

ウィジェットに好きなパーツを追加

ウィジェットの内容を画面に表示する

続いて、作成したウィジェットの内容をフッターあたりに表示しましょう。それには、footer.phpに次のようなコードを入力します。

<div class="footer-block">
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット1'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット2'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット3'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット4'); ?>
</div>
</div>

このコードをfooter.phpの先頭にある「<footer id="footer">」の次の行に入力しましょう。コードは次のようなイメージになります。

「id="footer"」の下あたりにコードを入力

これで、ウィジェットの内容が画面に表示されるようになります。サイトを確認すると、フッターウィジェットに追加したパーツが表示されるはずです。ただし、スタイルを設定していないので、デザインは未完成で崩れた状態です。

フッターにウィジェットパーツが表示される（デザインは未完成の状態）

フッターウィジェットのスタイルを設定する

最後に、フッターウィジェットのスタイルを設定しましょう。たとえば、次のようなCSSを子テーマのstyle.cssに入力します。

.footer-block-in {
    width: 23%;
    padding: 10px 1%;
    float: left;
}

.footer-block-in > ul {
    padding: 5px;
    list-style-type: none;
    margin-bottom:20px;
}

.footer-block-in > ul ul {
    text-align: left;
    padding: 10px 12px;
    margin-left: 5px;
}

.footer-block:after{
	content: "";
	clear: both;
	display: block;
}

@media (max-width: 770px) {
    .footer-block-in {
        width: 98%;
        padding: 10px 1%;
        float: none;
    }
}

これで、4つのフッターウィジェットが横並びで表示されるようになります。

4列のフッターウィジェットの完成

おおざっぱな仕上げなので、自由にカスタマイズしてください。設置からのサポートをご希望の場合はWordPress個別サポートで承ります。

ホームページに追加できるギャラリーのパターンもさまざまですが、サムネイルをクリックするとメイン画像が切り替わるギャラリーはいかがでしょうか。

こんな感じです。下に並んだサムネイル画像をクリックするとメインの大きな画像が切り替わります。

以下のページのコードを使わせていただきました。ありがとうございます。

【jQuery】サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー

jQueryを使っているのでWordPressのプラグインを使わずに作成できます。純粋なギャラリーだけでなく商品紹介、作品集、制作事例などをきれいに見せたいときに役立つでしょう。

興味がある方はチャレンジしてみてください。

カテゴリーページに別々の画像を表示したいこともあります。次のようなイメージです。

カテゴリーごとに違う画像を表示したい

カテゴリーごとに異なるアイキャッチ画像を表示するでは、カスタムフィールドを使う方法を紹介しましたが、Categories Imagesプラグインを使うともう少し簡単にカテゴリーページに別々の画像を表示できるようになります。以下、手順を簡単に紹介します。

カテゴリー画像の登録

「プラグイン」‐「新規追加」メニューからCategories Imagesプラグインをインストール、有効化します。これで準備完了です。

続いて、カテゴリーページに表示する画像を登録しましょう。それには、「投稿」‐「カテゴリー」メニューから個々のカテゴリーの「編集」(1)をクリックして編集画面を開きます。ちなみに、画像未登録のカテゴリーにはサンプル画像(2)が表示されています。

カテゴリーの編集画面を開く

カテゴリーの編集画面を下にスクロールします。「Image」の「Upload/Add image」(1)をクリックして画像をアップロードしましょう。サイズはカテゴリーページの雰囲気を見てから考えても大丈夫です。ひとまず幅が700pxや1000pxなど大きめの画像をアップロードして様子を見ましょう。アップロードが完了したら「更新」ボタン(2)をクリックして設定を完了します。

カテゴリーページの画像をアップロード

カテゴリー一覧に戻ると、カテゴリーページに使う画像のサムネイルが表示されます。

カテゴリーページに使う画像が表示される

カテゴリー画像の表示

カテゴリー画像を表示するには、カテゴリーページ（アーカイブ）のテンプレートを修正する必要があります。編集するファイルや入力するコードはテーマによって異なる場合があります。

入力するコードについては「インストール済みプラグイン」‐「Categories Images」の「詳細を表示」を参考にしてください。「説明」タブを開くと、入力するコードの説明が書いてあります。

カテゴリーテンプレートに入力するコード

単純にカテゴリー画像を表示したいだけなら、次のコードをカテゴリーテンプレート（アーカイブテンプレート）に入力します。

<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

カテゴリーテンプレートは一般的にはcategory.phpですが、archive.phpやindex.phpが代用しているテーマも少なくありません。また、Categories Imagesプラグインはカテゴリーだけの画像を対象にしているわけではなくタグページやカスタムタクソノミーも画像の表示対象になっています。カスタムタクソノミーなどにも画像を表示する予定があるなら、カテゴリーページより広い範囲が含まれるアーカイブページにコードを入力しておいた方が良いでしょう。

BizVektorの例では、アーカイブのテンプレートとして使われているindex.phpの44行目と45行目の間あたりに入力します。入力したイメージは次のようになります。

    ?>
    <?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>
    <?php biz_vektor_archive_loop_before();?>
    <?php

厳密には別の場所にコードを入力した方が良い場合もありますが、簡単な方法を紹介しました。テンプレートを修正すると、そのカテゴリーに登録した画像が表示されるようになります。

カテゴリーごとに別の画像が表示される

タグアーカイブやカスタムタクソノミーアーカイブにも画像を表示できますが、それぞれ、どのテンプレートで表示しているのかはテーマによって異なる場合があるので慎重に見極めて作業してください。

上記の例はコンテンツエリアの記事タイトルの下に画像を表示する例ですが、ヘッダーテンプレート（一般的にはheader.php）にコードを入力すれば、カテゴリーのヘッダー画像として機能させることもできます。

カテゴリー画像をヘッダーに表示する

グローバルメニューの上に表示するか下に表示するかは自由です。

カテゴリー用のヘッダー画像の下にグローバルメニューを表示

あとはアイデア次第です。必要なテンプレートを修正して自由にカスタマイズしてください。

FAQ（よくある質問）に限りませんが、次のような開閉式のコンテンツ（いわゆるアコーディオン）を作りたいこともあります。

開閉式コンテンツ（アコーディオン）の例

jQueryやCSSを駆使して自作すれば勉強になりますが、WP Canvas - Shortcodesプラグインを使うと、簡単に開閉式のFAQを設置することができます。

以下、手順を簡単に紹介します。

開閉式（アコーディオン）コンテンツの作成

「プラグイン」‐「新規追加」メニューからWP Canvas - Shortcodesプラグインをインストール、有効化します。

インストールが完了したら、FAQを設置したい投稿または固定ページの編集画面をビジュアルエディタで開き、ツールバーに表示されたWP Canvasメニューから「jQuery 」‐「Accordion」をクリックします。

開閉式コンテンツの作成（「jQuery 」‐「Accordion」）

次のような開閉式コンテンツのテンプレートが作成されます。

開閉式コンテンツのテンプレート

「Section 1」「Section 2」が見出し（FAQの質問など）、「Sample Content」が内容（FAQの回答など）にあたります。表示してみるとピンとくるはずです。

サンプルFAQの表示結果

あとは「Section 1」「Section 2」や「Sample Content」を修正すればFAQを構築できそうですが、質問を増やしたり減らすときに、どのブロックを追加したり削除すればよいかわかるようにテンプレートの構造を以下にまとめておきます。

開閉式コンテンツのテンプレート構造

• wc_accordion(1) --- 全体のブロックです。
• wc_accordion_section(2)(3) --- 個別項目のブロックです。
• Section 1(4)／Section 2(5) --- 個別項目の見出しです。
• Sample Content(6)(7) --- 個別項目の内容です。

テンプレートには2項目が含まれていますが、wc_accordion_sectionブロックをコピーすれば項目を増やすことができます。

開閉式コンテンツの動作イメージ

作成した開閉式コンテンツは次のようなブロックとして動作します。見出しをクリックすると、内容を見ることができます。

あとは自由にカスタマイズしてFAQなどの開閉式コンテンツを作ってみてください。

WordPressでテンプレートのPHPファイルをカスタマイズしてページや投稿のレイアウトを変更したい場合、現在のページで使われているテンプレート名を知る必要があります。

投稿はsingle.phpで固定ページはpage.phpのように基本的なテンプレート構成を理解していても、それはあくまで一般的な話です。

固定ページのテンプレートは必ずしもpage.phpではなく、「company」というスラッグのページに「page-company.php」を使うこともできます。また、カスタムテンプレートとして「company.php」や「kaisha.php」のような自由なファイルをテンプレートとして使うこともできます。

つまり、現在表示中の画面をカスタマイズする場合、「このページで使われているテンプレートは？」で迷ってしまうこともあります。

そのようなときに役立つのがQuery Monitorプラグインです。現在のページで使われているテンプレートファイル名を調べることができます。以下、簡単に紹介します。

Query Monitorプラグインの使い方

まずは、「プラグイン」‐「新規追加」メニューからQuery Monitorプラグインをインストール、有効化します。

インストール後の特別な設定は必要なく、現在表示中のページに関する情報(1)がアドミンバーに表示されるようになります。わかりづらいかもしれませんが数字が列挙されたパーツです。

現在表示中のページで使われているテンプレート

このパーツ(1)にマウスオーバーすると現在のページに関する各種情報を参照できます。「Template」セクション(2)では、現在表示中のページで使われているテンプレートファイルを調べることができます。この例では「会社概要」という固定ページに「page-parent.php」というテンプレートが使われていることがわかります。

レイアウトをカスタマイズしたければ、「page-parent.php」を修正（できれば子テーマフォルダにコピーして）すれば良いということです。

このパーツ(1)にはデータベースなどに関する膨大な情報が表示されますが、関係ない部分は気にする必要はありません。

また、パーツが赤くなったり黒くなったり色が変わることがあります。これは速度の遅いページの警告です。

表示が遅いページは「赤」になることも

遅いページは警告の意味で赤くなりますが、何か悪いことが起きるわけではないので深刻に考える必要はありません。強いて言えば、ページの速度改善を少しずつ検討した方が良いかもしれない、というくらいです。

Query Monitorプラグインの使用中は、このような統計情報がアドミンバーに表示されたままになる（管理者しか見えませんが）ので、テンプレートファイルを調べる目的で使った場合は、調べ終わったらプラグインを停止しておいた方が良いかもしれません。

WordPressのカスタマイズ方法をインターネットで調べていると「このコードをコピーしてお使いください」というサイトが多く見つかります。自力でゼロから作ると時間がかかる場合もあるので、コピペさせてもらえるのは非常に助かります。

複雑なコードはコピペさせてもらえると助かる

コピペはコードをコピーして貼り付ける簡単な作業ですが、カスタマイズが一瞬で片付くお手軽な単純作業とは違います。

特にPHPの場合、大げさに言えば一部システムの改修と言っても良いくらい重大な作業になります。コードを貼り付けるだけでなく、コードに問題がないか吟味したり、コピペによってトラブルが起きていないかチェックする必要があります。そんなWordPressユーザーが守るべき「コピペの流儀」をまとめてみます。

「デザインが崩れた」の原因は「コピー漏れ」

「WordPressで制作しているページのデザインが崩れました！」という相談をよく受けます。原因はさまざまですが、難しい作業を間違えたというより単純なコピペのミスということが少なくありません。コピペをミスするだけで「divタグの閉じ忘れによるデザイン崩れ」のようなWordPressトラブルの原因になります。

当たり前すぎて笑われるかもしれませんが、コードは1行残らず、1文字残らずコピーしましょう。

たとえば、ホームページの管理を引き継ぐときに前任者や制作会社から「文章を枠線で囲みたいときは、このコードをコピペして使ってください」と言われることはよくあると思います。

<div style="border: solid 1px #900;padding:20px;">
ここに書いた文章が枠線で囲まれます。コピーしてお使いください。
</div>

これを投稿の編集画面に貼り付けるときに最後の「</div>」をコピーし忘れたとします。

divの閉じタグをコピーし忘れると…

このページを保存して確認するとデザインが崩れ、サイドバーが下に落ちてしまいます。

サイドバーが下に落ちてデザインが崩れる

この時点で気づけばセーフですが、確認を怠って数日後に気づくと「何もしていないのに突然、デザインが崩れた！」という“超常現象”を目の当たりにすることになります。

WordPressが突然暴走して超常現象を起こすことはありません。「突然起きたWordPressトラブル」の原因のほとんどは、作業ミスしたときの確認不足です。コピペという単純作業でも油断せずに1行残らずコピーして、完了後は問題が起きていないか十分に確認してください。

上記の例はコードも少ないので解決も難しくありませんが、実際は膨大なdivタグの中から開始・終了タグの不一致を見つける必要があり、非常に難解な作業になることもあります。解決できないときはWordPress個別サポートにご相談ください。

貼り付ける場所にも注意しましょう

「編集が必要なのはここまでです」＝「ここから下はコピペ禁止！」

指定されたコードをファイルにコピペする場合、ペーストする位置にも注意が必要です。たとえば、設定ファイル（wp-config.php）には最後の方に「編集が必要なのはここまでです」と書いてあります。これは、どういう意味でしょうか？

/* 編集が必要なのはここまでです ! … */

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

「編集が必要なのはここまでです!」は英語版では「stop editing!」と書いてあります。「ここから下の行は編集禁止！」と解釈できます。つまり、wp-config.phpにコードをコピペするときは「編集が必要なのはここまでです!」より上の行に貼り付ける必要があるということです。

単純に最後の行に貼り付けたコードが反映されない場合、コピペ場所の指示がないか調べてみましょう。

「functions.phpの最後にコピペ」にも注意

「このコードをfunctions.phpの最後（または先頭）に貼り付けてください」という単純な指示にも注意が必要です。一般的にfunctions.phpはPHPの開始タグ <?php で始まり、終了タグ ?> で終わります。
※終了タグが書かれていない場合もあります。

<?php
いろいろなコード
?>

「最後」とか「先頭」というのは文字通りのファイルの先頭や最後ではなくPHPの開始タグと終了タグの間で先頭や最後という意味です。

<?php
ここはペーストしても大丈夫
いろいろなコード
ここにペーストしても大丈夫
?>

functions.phpの「最後」や「先頭」を文字通りに解釈して開始・終了タグの外側に貼り付けるとプログラムが機能しないので注意してください。

ここはペースト禁止！
<?php
いろいろなコード
?>
ここもペースト禁止！

終了タグで閉じていないfunctions.phpの場合、開始タグの後に貼り付ければ大丈夫です。

<?php
ここはペーストしても大丈夫
いろいろなコード
ここにペーストしても大丈夫

慣れている方には目新しい情報ではありませんが、PHPの編集に慣れていない方は十分に注意してください。

コピペしたコードの「全角」に注意

HTML・CSS・PHP・ショートコードなどのコード（命令や記号など）は基本的に半角で入力する必要があります。コピーしたコードに全角の記号（例：’ ” ［）が混じっていないか注意してください。

たとえば、「次のコードをfunctions.phpにコピーペーストすればアドミンバーを消すことができます」と書いてあったとします。

add_filter(‘show_admin_bar’, ‘__return_false’);

このコードをfunctions.phpにコピペしてもうまくいきません。理由は「‘」や「’」が全角だからです。正しくは「'」です。

「’」と「'」の違いはパッと見ただけでは気づかないほど紛らわしいです。しかし、ちょっとした違いが原因で「コードが機能しない！」のような大問題の原因になります。実際、WordPress個別サポートに相談に来た方のトラブルが、ショートコードやCSSに全角が混じっていたのが原因だったことは一度や二度ではありません。

次のCSSは半角にすべき ; が全角の ； になっているため機能しません。これも紛らわしいですね。

a {
    color: #900；
}

実際は膨大なCSSに1箇所だけ全角が混じっていたりするため、さらに紛らわしいです。

重要なのでもう一度書きます。

HTML・CSS・PHP・ショートコードに全角の記号が混じっていないか注意！

なぜ要注意なのか。それは、「全角ですよ」というエラーメッセージが表示されないからです。一見、画面上では問題が起きていないように見えて、裏ではショートコードやCSSが機能しないという大問題が発生しています。

PHPは全角を入力すると文法エラーになって画面が真っ白になる場合があります。「画面が真っ白」と聞くとゾッとするかもしれませんが、実は「画面が真っ白になった！」よりも、エラーメッセージが表示されないような「エラーに見えないエラー」の方が怖いのです。

つまり、「本当のエラーは、エラーの顔をしていない」ということです。

画面が真っ白になればエラーだと気づくので実際は助かっているとも言えます。それに対して全角が原因で起きるエラーは「それは全角ですよ！」の警告もありません。

入念にチェックしないとエラーに気づかない要注意のエラーです。

重要なのでもう一度書きます。

HTML・CSS・PHP・ショートコードに全角の記号が混じっていないか注意！
本当に全角として使う場合は無理に半角に直す必要はありませんが。

冗談抜きで本当にやっかいな問題なので注意してください。何度も同じことを書くのは、痛い目にあった方からの相談が多いからです。コピペしたコードは " ' [ ; : などが全角になっていないか入念にチェックしてください。

紹介されているコードは「サンプル」です

ブログ記事で「コピーしてお使いください」と紹介されているコードはサンプルコードです。自分の環境に合わせて変更すべき箇所がないかチェックしましょう。たとえば、「wp-config.phpに次のコードをペーストしてください」と書かれていたとします。

define('WP_SITEURL', 'http://localhost/test');
define('WP_HOME', 'http://localhost/test');

こうしたコードをそのままコピペして「動かない！」と騒ぐ方がいます。「URLは各自の環境に合わせて変更してください」という説明がなかったり、説明がわかりづらいことに文句を言うのも自由ですが、この「http://localhost/test」は、あくまでサンプルのURLだと見極めるくらいの力は必要です。言うまでもなく「http://localhost/test」は自分のサイトのURLに変更する必要があります。

参考にさせていただくコードは、あくまでサンプルコードだと思って自分なりに吟味してからファイルを更新する習慣を身につけましょう。そのような地道な努力の積み重ねによってノウハウが蓄積され、レベルアップにもつながります。

親テーマのfunctions.phpはコピー禁止

「テーマをカスタマイズするときは親テーマのファイルを子テーマにコピーして直す」と聞いたことがあるかもしれません。たとえば、固定ページのレイアウトをカスタマイズする場合、親テーマのpage.phpを子テーマのフォルダにコピーして修正するでしょう。

ただし、functions.phpは要注意です。

親テーマのfunctions.phpを子テーマのフォルダにコピーしてはいけません！

うっかりコピーすると画面が真っ白になり、次のような「Fatal error: Cannot redeclare …」というエラーメッセージ(1)が表示されます。

functions.phpを子テーマにコピーしてエラーが発生！

エラーメッセージは深追いしないでください。とにかく、「親テーマのfunctions.phpを子テーマにコピーしたことが原因」だと早く気づいて子テーマのfunctions.phpを削除することです。

PHPの知識がある方のためにエラー原因を簡単に説明すると、これは関数の二重定義によるエラーです。親テーマのfunctions.phpには膨大なユーザー定義関数（functions）が定義されています。それを子テーマフォルダにコピーすることで、あらゆる関数が二重定義の状態になります。

同じ理由で、親テーマを丸ごと子テーマにコピーするのも厳禁です。

「子テーマのstyle.cssにコピペ」の落とし穴

CSSを使ってデザインをカスタマイズする場合、子テーマのstyle.cssにペーストするのが定番です。

ただし、この方法は万能ではないので注意しましょう。というのは、テーマによっては子テーマのstyle.cssを読み込んでいない場合があります。また、親テーマのstyle.cssよりも先に子テーマのstyle.cssを読み込んでいるテーマもあります。

そのようなテーマでは子テーマのstyle.cssにCSSをコピペしても反映されないので次のような工夫が必要です。

• 子テーマのstyle.cssを読み込むようにする --- header.phpやfunctions.phpで指定する
• 「CSS編集」や「CUSTOM CSS」などのメニューを使う --- 子テーマに依存しない
• コピペしたCSSに「!important」を付ける --- 親テーマより優先度の高いCSSを作る

よくわからない場合はWordPress個別サポートにご相談ください。

まとめ

コピペとは、言葉の響きは軽く聞こえますがコードをコピーして貼り付けるだけの単純作業ではありません。軽く考えるとデザインが崩れたり画面が真っ白になる原因になります。

「コピペ」という軽い響きに騙されず、慎重な作業を心がけましょう。

好きな固定ページの一覧をグリッドレイアウトで表示したり、いくつかの画像や文章を2列、3列で表示したい場合、「WP Canvas - Shortcodes」プラグインが役立ちます。手作業で作ると面倒なグリッドレイアウトをショートコードで制御できるので、非常に便利です。

WP Canvasプラグインで作成できるグリッドレイアウト

以下、「WP Canvas - Shortcodes」プラグインを使って固定ページをグリッドにレイアウトする方法を紹介します。

固定ページ一覧をグリッドレイアウトで表示

固定ページの一覧をグリッドレイアウトで表示すれば、サービス関連のページなどをスッキリと効率的に見せることができます。

固定ページの一覧をグリッド形式でレイアウトする

グリッド表示には「Posts」メニューを使います。

固定ページや投稿のグリッド表示

「Posts」メニューでは、グリッドのレイアウトスタイルを選択できます。Grid(2)は同じサイズのボックスに適したレイアウトです。Masonry(1)はサイズが異なるボックスの隙間を埋めるようにレイアウトしてくれます。

Grid Box（同じサイズのボックスに）

Masonry Box（隙間を埋める）

「Posts」メニューを選択すると、固定ページの一覧をグリッド表示するためのショートコードが挿入されます。

ページをグリッド表示するためのショートコード

表示するページ、件数、表示順など、次のような項目を設定できるので、アイデアに応じてカスタマイズしてみましょう。

▼「Posts」メニューのショートコードで指定できる項目の例

• 表示する固定ページ（または投稿）の番号
• 表示する投稿タイプ（post／pageなど）
• 表示する分類
• 表示順（並べ替える基準）
• 1ページの表示件数
• タイトルの表示／非表示
• 抜粋の表示／非表示
• 抜粋の文字数
• レイアウト（masonry／grid）
• メタ情報（投稿日時など）の表示／非表示
• 投稿日時のフォーマット
• ヘッダーのタグ（例：h2）

詳しくは、「wc-shortcodes/includes/shortcode-functions.php」の1100行目あたりから始まる「function wc_shortcodes_posts」のパラメータ定義も参考にしてください。

たとえば、任意の3ページをグリッド表示するには、次の項目を修正します。

1. 表示するページの番号を指定 --- （例：post__in="44,46,85"）
2. ページの表示順を「post__in」の順に --- 「order="" orderby="post__in"」
3. 投稿タイプを「page」に --- 「post_type="page"」
4. タイトルを任意のタグに --- （例：heading_type="h3"）
5. 投稿日時などを非表示に --- 「meta_all="no"」
6. ※抜粋を非表示にするなら --- 「content="no"」

ショートコードを修正したイメージは次のようになります。

修正したショートコード（任意の3ページを表示する例）

これで、指定した固定ページが指定順で表示されます。テーマによってはCSSの修正も必要です。必要に応じてカスタマイズしてください。

表示された固定ページ

ページの表示順を変えたければ、「post__in="44,46,85"」に指定する順番を変えれば大丈夫です。たとえば、「post__in="85,44,46,"」のように変更するだけで表示順が変わります。

固定ページの表示順は自由に変更できる

ショートコードなので、いろいろと試行錯誤してみてください。

ページの番号とは、固定ページに割り当てられた固有の番号です。固定ページの編集画面を開いてブラウザのURL「post=9999」で確認できます。次の例では、「お客様の声」のページ番号が「85」だということです。これを「post__in」で指定します。

ページの番号を確認する

BizVektorで「6PR」を作りたい方に

BizVektorで特徴的なパーツである「3PRエリア」を2つ作りたいという要望は多いです。実際に「テーマオプション」メニューと連動する6PRを作るのは非常に面倒ですが、WP Canvasを使って3列×2で6ページをまとめれば「6PR風」のグリッドレイアウトも作成できます。

3列×2行にまとめて6PR風グリッドに

あとは、みなさんのアイデアを形にしてみてください。

新着情報のグリッド表示

固定ページだけでなくブログ記事をグリッド表示することもできます。トップページ下で新着情報を一覧表示したい場合などに役立ちます。カテゴリーや表示件数の指定も可能なので、特定の固定ページで特定のカテゴリーのみを一覧表示することもできるでしょう。

新着情報やカテゴリー記事のグリッド表示も可能

マルチカラムコンテンツの作成

固定ページや投稿と連動したグリッドだけでなく、自由なマルチカラムコンテンツも作成できます。2列、3列、4列のマルチカラムのレイアウトを手作業で作るのは意外と面倒ですが、WP Canvasプラグインなら簡単に作成できます。

特にレスポンシブ対応なので安心です。手作業だと本当に大変ですね。

WP Canvasプラグインによるマルチカラムコンテンツの作成

マルチカラムコンテンツの作成には「Colmns」メニューを使います。「Colmns」メニューでは2列、3列、4列から選ぶことができます。「1/3 + 1/3 + 1/3」は1/3の列を3つ作成（つまり等幅の3列）するという意味です。

マルチカラムメニュー

作りたいコンテンツに合わせてパターンを選びましょう。

まとめ

「WP Canvas - Shortcodes」プラグインを使うと、投稿、固定ページ、自由なコンテンツをマルチカラムに整理してグリッドレイアウトで表示できるので便利です。気になる方はお試しください。

WordPressに限りませんがサイトに口コミ機能があると、商品やサービスの信頼性を示すのに役立ちます。WP Customer Reviewsプラグインを使うと、口コミ（カスタマーレビュー）を投稿したり表示できるようになります。

WP Customer Reviewsプラグインによる口コミ投稿フォーム

以下、WP Customer Reviewsプラグインの使い方を説明します。

WP Customer Reviewsプラグインの使い方

「プラグイン」‐「新規追加」メニューからWP Customer Reviewsプラグインをインストール、有効化します。

ひとまず初期設定の口コミ投稿フォームを表示してみましょう。それには、フォームを表示したい投稿や固定ページの編集画面を開き、本文入力エリアの下にあるWP Customer Reviewsの設定メニューで「Enable WP Customer Reviews for this page」をチェックします。

このページにレビューフォームを表示する設定

これにより、その投稿や固定ページで口コミ（レビュー）を投稿したり表示できるようになります。「Create your own review」ボタンをクリックすると投稿フォームが表示される仕組みです。

「Create your own review」をクリックして投稿フォームを開く

投稿フォームが開きます。

本文の下に口コミ投稿フォームが表示される

これで口コミを投稿できるようになりますが、初期設定のフォームには不要な項目があったり表記が英語だったりするので設定メニューなどを使ってカスタマイズしていきましょう。

設定メニューを有効にする

設定メニューを使用可能にするため、「Reviews」‐「Plugin Settings」メニューを開き、画面を下にスクロールして「Yes」または「No」をクリックします。

設定メニューを使用可能にする

「Yes」をクリックすると投稿フォームの下に「Powered by WP Customer Reviews」リンクが表示されます。リンクを表示したくない場合は「No」をクリックします。

「Powered by WP Customer Reviews」のリンク

完了後、設定メニューの各タブが表示されるようになります。

設定メニューが表示される

投稿フォームのカスタマイズ（日本語化）

初期設定の投稿フォームは次のような構成です。

初期設定の口コミ投稿フォーム

設定メニューの「Review Form Settings」タブを使うと、「Name」や「Email」などの英語表記を日本語にしたり、不要項目を非表示にすることができます。

入力項目の設定画面（Review Form Settings）

ここでは、名前(1)を日本語にして、その他の項目(2)のチェックを外して非表示にしました。オリジナルフィールドも追加できるようですが、ここでは説明を省略します。

投稿フォームの項目のカスタマイズ

これで投稿フォームの項目が整理されます。

投稿フォームのカスタマイズ後

テンプレートのカスタマイズ（日本語化）

メニューを使ってフォーム項目を日本語にできましたが、「Rating」や「Review」「Submit your review」など、英語が残っています。これらはwp-customer-reviews/include/templatesフォルダにあるテンプレートファイルに記述されています。面倒ですが、1つずつ日本語に直しましょう。

テンプレートの翻訳

以下、主なファイルに含まれる英語表記と訳の例を紹介します。すべて検証していないので他にも修正すべき点があるかもしれません。必要に応じて追加作業をお願いします。

▼frontend_review_form.html

• 「Create your own review」 --- 口コミを投稿する
• 「Submit your review」 --- 口コミ投稿フォーム
• 「Check this box to confirm you are human.」 --- スパムでなければチェックしてください
• 「Submit」 --- 送信する
• 「Cancel」 --- キャンセルする
• 「There are no reviews yet. Be the first to leave yours!」 --- レビューはありません。

▼frontend_review_form_review_field.html

• 「Review」 --- レビュー

▼frontend_review_form_rating_field.html

• 「Rating」 --- 評価

▼frontend_review_item_aggregate.html

• 「Average rating」 --- 平均
• 「reviews」 --- レビュー

テンプレートの再読み込み

テンプレートの修正が終わったら、「プラグイン」‐「インストール済みプラグイン」メニューから、いったんWP Customer Reviewsプラグインを停止し、もう一度有効化してください。これにより、カスタマイズしたテンプレートが読み込まれます。

あらためて口コミ投稿フォームを表示すると、日本語化したフォームが表示されるはずです。

テンプレートのカスタマイズ後

投稿後メッセージの日本語化

口コミを投稿すると、「ありがとうございました…」のメッセージが表示されますが初期設定では英語です。

投稿後のメッセージが英語で表示される

これは「wp-customer-reviews/js/wp-customer-reviews.js」に書かれています。

alert('Thank you! Your review has been received and will be posted soon.');

こんな感じに修正できます。思いきり省略していますが。

alert('投稿ありがとうございます！');

これで、メッセージが日本語で表示されるようになります。

投稿後のメッセージが日本語になる

その他にも英語のメッセージがありますが、必要に応じて日本語に直してください。

投稿された口コミの反映

投稿された口コミは管理者の承認後に画面に表示される仕組みです。「Reviews」‐「All Reviews」メニューを開いて投稿された口コミを確認しましょう。

口コミは「レビュー待ち」の状態で投稿されています。公開するため「クイック編集」（または「編集」）をクリックしましょう。

非公開になっている口コミを公開する

ステータスを「公開済み」にして「更新」ボタンをクリックすると、その口コミが画面に表示されるようになります。

投稿された口コミを公開

承認した口コミは投稿フォームの下に表示されます。

管理者が承認した口コミが表示される

まとめ

WP Customer Reviewsプラグインを使って口コミ機能を追加する方法を紹介してきました。日本語対応が少し面倒ですが、ワンタッチでフォームを作成できる点は非常に便利です。興味がある方はお試しください。

WP-Pollsプラグインを使うと、WordPressサイトで回答選択式のアンケートを実施することができます。

WP-Pollsで作成できるアンケート

以下、WP-Pollsプラグインを使ってアンケートを作成する方法を説明します。

WP-Pollsプラグインによるアンケートの作成

「プラグイン」‐「新規追加」メニューからWP-Pollsプラグインをインストール、有効化します。

WP-Pollsプラグインのインストール

設定メニューは「Polls」です。以下の「Polls」‐「Add Poll」メニューを開いてアンケートを追加しましょう。

アンケートの作成

「Question」(1)に質問を入力して、「Poll Answers」(2)に回答の選択肢を入力します。初期設定では2択ですが、「Add Answer」(3)をクリックして選択肢を増やすこともできます。

択一式ではなく複数選択を可能にする場合は「Allows Users To Select More Than One Answer?」(4)で「Yes」を選択します。

アンケートの開始・終了日時を設定するには「Poll Start/End Date」(5)を使います。

設定完了後、「Add Poll」ボタンをクリックするとアンケートが作成されます。

アンケートをサイドバーに表示

「外観」-「ウィジェット」メニューの「Poll」ウィジェットを任意のサイドバーに追加することで、サイドバーにアンケートを表示することができます。

サイドバーにアンケートを表示するPollウィジェット

「Title」(1)はアンケートのタイトルです。必須ではありません。自由に入力してください。表示するアンケートは「Poll To Display」(3)で選択します。特定のアンケートだけでなくランダム表示や最新のアンケートを表示することもできます。

「Display Polls Archive Link Below Poll? 」(2)で「Yes」を選択すると、アンケート一覧ページへのリンクが表示されますが、アンケート一覧ページは自力で作成する必要があるので、ひとまず「No」で非表示にしておいた方が無難です。

設定完了後、「保存」ボタンをクリックしてサイドバーを確認してみましょう。

表示されたアンケートフォーム

アンケートフォームが表示されますが、初期設定のデザインでは「Vote」ボタンが見えない状態なので、スタイルのカスタマイズは必須かもしれません。

ここではサイドバーにアンケートを表示する方法を紹介しましたが、次のショートコードを使うと、投稿や固定ページなど任意の場所にアンケートを表示することができます。

[poll id="9999"]

「9999」はアンケート番号です。個々のアンケートの番号は「Polls」‐「Manage Polls」メニューで参照することができます。

ショートコードに指定するアンケート番号

アンケートのデザイン設定

アンケートフォームや回答表示のテンプレートは「Polls」‐「Poll Templates」メニューから変更できます。ひとまず、「Voting Form Footer」セクションから「Vote」(1)や「View Results」(2)を日本語に変更してみましょう。

アンケートのテンプレート修正（Voting Form Footerセクション）

ついでに「Vote」ボタンのスタイル(3)も記述しています。サンプルなのでボタンのinputタグに直接CSSを指定していますが、本格的に作成する場合は子テーマのstyle.cssなどに次のようなCSSを入力した方が無難です。

.wp-polls .Buttons {
    border: 1px solid #C8C8C8;
    background-color: #900;
    color: #F3F6F8;
}

表示結果は次のようになります。

アンケートテンプレートの変更後

「結果を見る」（View Results）をクリックすると、アンケート結果を参照することができます。投票済みの場合は常にアンケート結果が表示されます。

アンケート結果を参照する

英語表記は上記の「Vote」ボタンと同じように「Polls」‐「Poll Templates」メニューから変更できます。また、バーのスタイルは「Polls」‐「Poll Options」メニューから設定できます。

アンケートの終了

アンケートを終了する場合は、「Polls」‐「Manage Polls」メニューから個別アンケートの「Edit」をクリックしてアンケートの編集画面を開き、画面最下部の「Close Poll」をクリックします。

アンケートの終了

アンケートを終了すると、常にアンケート結果が表示されるようになります。

終了後に「Open Poll」をクリックしてアンケートを再開することもできます。

アンケートの再開

まとめ

以上、WP-Pollsプラグインを使ってサイトにアンケートを設置する方法を説明してきました。ちょっとしたアンケートを簡単に実施できるので、商品やサービスのニーズを探るのに使っても面白いと思います。興味がある方はお試しください。

WordPressのテンプレートに関する素朴な疑問をまとめました。WordPress個別サポートでよくいただく質問をベースに細かい質問ばかりですが、これからテンプレートのカスタマイズにチャレンジしたい方は参考にしてください。

「テーマ」と「テンプレート」の違いは？

「テンプレート」はテーマを構成するファイルです。テーマはテンプレートを含めて主に3種類のファイルで構成されます。

• スタイルシート（例：style.css）
• テンプレートファイル（拡張子が「php」のファイル）
• 関数ファイル（functions.php）

具体的なテンプレートファイルの構成は「外観」‐「テーマの編集」メニューやFTPソフトで確認できます。

テーマとテンプレートの関係

テンプレートの保存場所は？

テンプレートはテーマを構成するファイルなので、そのテーマのフォルダに格納されています。

テンプレートの保存場所（wp-content/themesフォルダ）

たとえば、Twenty Fourteenのpage.phpというテンプレートはwp-content/themes/twentyfourteenフォルダにあるということです。

テーマに必須のテンプレートは？

必須という意味ではindex.phpだけです（子テーマには不要）。ただし、index.phpだけ作ってもテーマは機能しないでしょうから、実質的に「ほぼ必須」のテンプレートがいくつかあります。たとえば、投稿のsingle.php、固定ページのpage.phpなどです。

その他、ほぼ必須のテンプレートファイルについては後続の質問を参考にしてください。

テンプレートの役割は？

表示中のページのレイアウトを決めるのがテンプレートの役割です。たとえば、ヘッダー部分のレイアウトはheader.php、フッターのレイアウトはfooter.phpを使うイメージです。

表示中のページで使われているテンプレート

もちろん、header.phpやfooter.phpに限りません。表示中のページが投稿なのか、固定ページなのか、トップページなのか、タイミングに応じて別々のテンプレートが使われます。

いつ、どのテンプレートが使われる？

表示中のページに必要なテンプレートが読み込まれる仕組みです。一般的なイメージは次のようになります。

• ヘッダー --- header.php
• フッター --- footer.php
• サイドバー --- sidebar.php

• トップページ --- front-page.php／home.php／index.php
• 固定ページ --- page.php
• 単一記事 --- single.php
• 記事一覧（カテゴリーページ） --- category.php
• 記事一覧（アーカイブページ） --- archive.php

• コメント欄 --- comments.php
• 404ページ（ページが見つかりません） --- 404.php
• 検索結果ページ --- search.php

これらのファイル名は基本的にテーマが違っても共通ですが、テーマによって独自性を出せるので、名前の違うテンプレートが含まれる場合があります。

category.phpが存在しないのは、なぜ？

すべてのテーマに必ず定番のテンプレートが含まれるとは限りません。たとえば、カテゴリーページのcategory.phpが存在しないテーマもありますが、テンプレートは優先順位が決まっており、category.phpがなければarchive.phpが使われます。同じように、archive.phpがなければindex.phpで代用することができます。

その場合、index.phpがcategory.phpの機能を代行するため、そのテーマにはcategory.phpが存在しないことになります。

詳しくは、以下のページをご覧ください。

WordPressドキュメント（テンプレート階層）

front-page.php・home.php・index.phpの違いは？

いずれもトップページ（フロントページ）のテンプレートとして使うことができます。

最優先されるのはfront-page.phpです。

front-page.phpが存在しない場合、
トップページが
固定ページならばpage.phpが使われます。
ブログ記事ならばhome.phpが使われます。

トップページがブログ記事でhome.phpが存在しない場合は、
index.phpが使われます。

また、home.phpはトップページ以外で「投稿一覧」としても機能します。いわゆるカテゴリー不問の「ブログ」メニューで開くページのテンプレートです。

多くのテーマでは、トップページ用のテンプレートとしてfront-page.phpまたはhome.phpのどちらかが含まれているはずです。どちらも存在しなければ、トップページにはindex.phpが使われています。

page.phpとpage-company.phpの違いは？

固定ページのテンプレートは一般的にpage.phpが使われますが、これは全ページ共通のレイアウトです。特定のページのみに個別のレイアウトを適用したい場合、いくつかの方法があります。

たとえば、「会社概要」という固定ページのスラッグが「company」ならば、「page-company.php」というテンプレートを作っておけばpage.phpより優先されます。つまり、「page-スラッグ.php」というテンプレートを作成することで、そのページ専用のレイアウトを作成できるということです。

そのようなわけで、納品されたサイトにpage.phpと名前が似たテンプレート（例：page-company.phpやpage-service.php）がいくつか含まれる場合があります。

「page-スラッグ.php」以外にも、そのページ専用のテンプレートを作る方法はありますが、話が長くなるので省略します。

sidebar.phpとsidebar-top.phpの違いは？

どちらもサイドバーとして使うことができます。使い分ける仕組みは次のとおりです。

固定ページや投稿などでサイドバーを表示する場合は通常、get_sidebarという命令が実行され、sidebar.phpが読み込まれます。これが一般的なサイドバーの仕組みです。

<?php get_sidebar(); ?>

サイトによってはsidebar.php以外のテンプレートを読み込みたいこともあります。その場合、get_sidebarを呼び出すときに指定します。たとえば、「get_sidebar('top')」とすればsidebar.phpの代わりにsidebar-top.phpを読み込むことができます。

<?php get_sidebar('top'); ?>

ファイル名（例：sidebar-top.php）は自由ですが、sidebar.php以外に読み込みたいサイドバー用のテンプレートを準備して、get_sidebar('サイドバー名')で指定すれば、用途に応じて別のサイドバーテンプレートを読み込むことができます。

典型的な用途は

• トップページのサイドバーはsidebar-top.php
• 投稿のサイドバーはsidebar-post.php
• 固定ページのサイドバーはsidebar-page.php

などです。

サイドバーを切り替えたいだけならWooSidebarsプラグインなどを使う方法もあるので、このようなカスタマイズは必須ではありませんが、テーマをゼロから自作するときなどに参考にしてください。

single.phpの中に投稿のタイトルや本文が見当たりませんが？

単一記事（個別のブログ記事）のレイアウトに使われるsingle.phpを開くと、意外とシンプルなコードになっている場合があります。特に、記事のタイトルや本文を表示するコードが見当たらないために困惑する方もいるかもしれません。

single.phpの中に記事のタイトルや本文のレイアウトが含まれないのは、それらのレイアウトが別のファイルで定義されているためです。たとえば、Twenty Fourteenのsingle.phpを開くと、次のように書いてあります。

get_template_part( 'content', get_post_format() );

ここでは、get_template_partという命令を使って記事のレイアウトファイル（例：content.php）を読み込んでいます。つまり、記事のレイアウト部分をカスタマイズしたければ、content.phpを開いて修正（子テーマなどで）することになります。

投稿（single.php）や固定ページ（page.php）のイメージ

そのようなわけで、single.phpやpage.phpの中に投稿や固定ページに関するすべてのレイアウトが記述されていない場合があります。

テンプレートを修正する方法は？

「外観」‐「テーマの編集」メニューからもテンプレートファイルを開いて変更できますが、安全ではありません。「テーマの編集」メニューは「元に戻す」のような機能がなく、慣れていない方は修正がうまくいけばセーフ、問題が起きればアウトの「黒ひげ危機一髪」のようになってしまいます。

FTPソフトを使って自分のPCにダウンロードしてエディタで編集してからサーバーにアップロードするのが無難です。

細かい話ですが、エディタで編集する場合は文字コードに注意が必要です。テンプレートファイルの文字コードは「UTF-8」（BOMなし）です。Windowsでは標準の文字コードが「Shift-JIS」になっているエディタがあります。Shift-JISで保存したテンプレートをアップロードすると画面が文字化けする場合があります。ご注意ください。

そのような理由でWindowsのメモ帳はテンプレートファイルやwp-config.phpの編集に適しません。将来的にテンプレートのカスタマイズを続けていく予定の方は使いやすそうなエディタを見つけてインストールしておきましょう。

ちなみに、私は「秀丸（ひでまる）エディタ」を使っています。

http://hide.maruo.co.jp/software/hidemaru.html

テンプレートファイルは単純なHTMLファイルではなくプログラムファイルです。慣れていない方が「テーマの編集」メニューでテンプレートを修正して問題を起こす事例が多発しています。ご注意ください。

固定ページの「テンプレート」メニューの仕組みは？

固定ページを作成するときに「テンプレート」メニューからテンプレートを選べるようになっているテーマもあります。非常に便利です。

そのページに適用するテンプレートを選択

任意のテンプレートを「テンプレート」メニューから選べるようにするには、テンプレートファイルの先頭に「Template Name:」を追加します。このテンプレートのファイル名は自由です。sample.phpなどでも大丈夫です。

テンプレートに「Template Name:」を追加したイメージ

基本的にはこれだけで、「テンプレート」メニューから選べるようになります。

「テンプレート」メニューから選択可能に

「テンプレート」メニューで選択したテンプレートは前述の「page-スラッグ.php」より優先されます。

ただし、「Template Name:」はPHPのコード（コメント）です。既存のテンプレートに追加する場合はPHPの開始・終了タグがきちんと入力されているか注意が必要です。たとえば、既存のテンプレートが次のように始まっているとします。

<?php get_header(); ?>
<!-- [ #container ] -->

ここにTemplate Nameを追加する場合、次のように入力する必要があります。

<?php
/*
 * Template Name: サンプル
 */
?>
<?php get_header(); ?>
<!-- [ #container ] -->

または次のようにも記述できます。

<?php
/*
 * Template Name: サンプル
 */
get_header(); ?>
<!-- [ #container ] -->

既存のテンプレートがPHPで始まっている場合、「Template Name:」を追加したことでPHPの開始・終了タグの関係がおかしくなっていないか確認しましょう。

追加で読み込みたいCSSはheader.phpで追加すれば良いですか？

テーマで読み込むCSSやJavaScriptライブラリを追加したい場合、header.phpを修正する方法を思い付きます。それでも大丈夫ですが、functions.phpに次のようなコードを記述することでCSSファイルを読み込むことができます。

wp_enqueue_style('style1', get_stylesheet_directory_uri() . '/sample.css');

これにより、header.phpに記述されたwp_headという命令によってsample.cssを読み込むHTMLタグがheadタグに追加されます。header.phpを直接修正しないで済みます。

典型的な活用例は外部ネットワークからのライブラリ読み込みです。以下はBootstrapをCDNから読み込むコードの例です。パッケージファイルをダウンロード・アップロードせずにBootstrapが使用可能になります。

wp_enqueue_script( 'script1', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_style( 'style1', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

functions.phpに入力すれば良いので、HTMLタグとPHPが混在したheader.phpをかき分けてheadタイトルを編集する必要がなく安全です。

コピーライトを消すにはfooter.phpを編集すれば良いですか？

footer.phpからコピーライトを記述しているHTMLタグや命令を見つけて削除すれば大丈夫ですが、親切なテーマでは、footer.phpを修正せずにコピーライトを削除できるように「フック」という仕組みが組み込まれている場合があります。具体例は省略します。

テンプレートの修正が反映されません

キャッシュ系プラグインが有効になっていないか確認しましょう。テンプレートを修正しても反映されない場合があります。サイト制作中やカスタマイズ時はキャッシュ系プラグインを停止した方が良いです。

修正を間違えてサイトの動きがおかしくなりました

オリジナルのテーマをダウンロードして、修正を間違えたテンプレートのみを上書きすれば元に戻るはずです。ただし、ここまでカスタマイズしてきた内容は消えます。それでは困るなら、上書きする前に、壊してしまったテンプレートをダウンロードしておけば良いでしょう。いつかカスタマイズ内容を復旧できるかもしれません。

どのテンプレートを壊したのか記憶がない方は、FTPソフトなどでテンプレートの最終更新日時を調べてください。テンプレートを一覧表示して更新日時の新しい順に並べ替えれば、最近編集したファイルがわかるはずです。

壊したテンプレートだけ更新日時が新しいはず

テンプレートをゼロから作成するには？

single.php、page.php、archive.php、category.php、index.phpなど膨大なテンプレートを作るのを想像すると面倒に思えるかもしれませんが、多くのテンプレートの内部構造は似ています。WordPressの教科書を読むとわかりますが、元になるテンプレートを1つ作成して、コピーして他のテンプレートを作っていけば効率的です。

たとえば、index.phpの内部ロジックを固めて、それをコピーしてcategory.php、archive.php、single.php、page.phpなどのたたき台にすることができます。それでも大変な作業と言えば大変ですが。。。

デザイン済みのHTMLをテンプレートに加工するには？

HTMLベースでデザインしたファイルをテーマに変換したい場合は、「WordPressの教科書」と少し異なるアプローチで進めた方が楽です。少し前に書いたように、company.htmlやservice.htmlなど、作成済みのHTMLファイルの名前をpage-company.phpやpage-service.phpとすれば、そのまま固定ページのテンプレートとして使えます。

完全に実用的なテーマとは言えませんが、てっとり早くデザイン済みのHTMLを活用してテーマを作成するための現実的な方法です。いろいろと試行錯誤してみてください。

WordPressのテンプレートをカスタマイズするときは、既存の命令を削除することもあります。どの命令を消すかは自由ですが、削除するとトラブルが起きる命令もあります。

ここでは、テンプレートから消すとトラブルが起きる3つの命令wp_head・wp_footer・the_postを紹介します。うっかり消してしまったり、自作テーマで書き忘れることがあります。注意しましょう。

wp_headを消すとデザインが崩れる！

wp_headという命令は、header.phpのheadタグの内側に記述されています。サイトで必要なCSSやJavaScriptファイルの読み込みなどを行います。

<?php wp_head(); ?>

このwp_headを削除するとテーマのスタイルシートなどが読み込まれないため、デザインがガタガタに崩れます。プラグインでも使っているので、削除すると一部のプラグインが動作しなくなります。

wp_headを削除するとデザインが崩れる

お試しで消すことはないと思いますが、header.phpの編集後にデザインが崩れたときはwp_headを削除していないか確認しましょう。

wp_footerを消すとアドミンバーが消える！

wp_footerという命令は、footer.phpに記述されています。bodyの終了タグあたりに書かれています。wp_headと同じようにライブラリの読み込みやフッター周辺のパーツ制御などに使われます。

<?php wp_footer();?>

削除するとアドミンバーが消えたりタップメニューが反応しなくなります。

wp_footerを削除するとアドミンバーが消える

wp_headと同じように、あえて消すことはないと思いますが、テーマを自作するときに書き忘れることはあります。自作テーマの動作がおかしいときは、wp_headやwp_footerを書き忘れていないかチェックしましょう。

the_postを消すと表示が止まらなくなる！

投稿のsingle.phpや固定ページのpage.phpを開くと必ず書いてあるのがwhile文です。そのwhile文と必ず一緒に使われているのが「the_post」です。

<?php while ( have_posts() ) : the_post(); ?>
…略…
<?php endwhile; ?>

<?php
while ( have_posts() ) :
the_post();
?>
…略…
<?php endwhile; ?>

パターン1もパターン2も機能は同じです。「while」～「endwhile」に囲まれた部分を繰り返し行う仕組みです。WordPressでは「1件の投稿表示を10回繰り返す」のような動作を行うことでページに必要な投稿や固定ページが表示される仕組みになっています。

この「while」で重要なのは、「繰り返しを終了する」ということです。1件の表示をいつまでも繰り返していては、画面に無限の投稿が表示されてしまいます。

繰り返しを終了するには、「次の投稿を読む」ことが必要です。1件目の投稿を表示したら、その次の2件目を取り出して表示、その次の3件目を取り出して表示、という具合で10件目を取り出すと、その次は何もないので終了する仕組みです。

この「次の投稿を取り出す」のがthe_postです。つまり、the_postを消すと、1件目の投稿を表示した後、2件目を読み込まずにまた1件目の投稿を表示、その次も1件目の投稿を表示、その次も1件目、、のように延々と同じ投稿の表示が続き、終わらなくなります。

これを「無限ループ」といいます。プログラミングを学び始めたばかりの方が、うっかりミスで体験してしまう冷や汗をかく現象です。

そのようなわけで「the_post();」は絶対に消してはいけません！

たとえば、こんな感じに。

<?php while ( have_posts() ) : ?>
…略…
<?php endwhile; ?>

見本を見せてから言うのも変ですが、絶対禁止です！

どうなるのか興味を持ったとしても決して気軽に試してはいけません。レンタルサーバーで試した場合、そのサーバーを共有する他のユーザーに迷惑をかけることになります。ご注意ください！

ローカル環境で試す場合は、set_time_limitなどを使ってwp-config.phpに時間制限を追加して、WP_DEBUG定数をtrueに設定（エラーメッセージを確認するため）してから試してみましょう。修正したwp-config.phpは次のようになります。

set_time_limit(1);
define('WP_DEBUG', true);

「set_time_limit(1)」は時間制限を1秒に設定するコードです。これで、「the_post();」を削除したテンプレート（single.phpなら投稿、page.phpなら固定ページ）を表示したとしても、制限時間（1秒）に達すると次のようなエラーメッセージが表示されて止まります。

制限時間オーバーで表示が終了する

「set_time_limit(1)」は1秒で表示を止めるという意味です。たった1秒でも、相当に長いページが表示されることを実感できるはずです。もしも時間制限なしに表示が続くとすれば、、、考えただけで怖いです。私は新入社員のころ何度かやりましたが。。。

WordPressのテンプレートタグbloginfoは、サイト名やキャッチフレーズの表示など、あちこちのテンプレートでサイト情報を表示するときに使われています。

bloginfoの使用例（サイト名・キャッチフレーズの表示）

テーマをカスタマイズしたり自作するときも役立つ命令ですが、使い間違えると意図しない結果になります。たとえば、サイトのURLを取得するため、bloginfo('URL')と呼び出すとURLが表示されずに、なぜかサイト名が表示されます。

ここでは、「bloginfo('URL')」を実行するとサイト名が表示されてしまう仕組みを説明します。同じような問題が起きたときの参考にしてください。

bloginfoの仕組み

WordPressのソースコードからbloginfoの仕組みを見てみましょう。bloginfoのベースになる命令は、get_bloginfo関数です。WordPressインストール先の「wp-includes/general-template.php」の628行目あたり（WordPress 4.4.1の場合）に書かれています。

以下は、get_bloginfo関数の条件分岐に関するコードを抜粋したものです。「条件分岐」という仕組みによって、bloginfo('設定')で指定された設定に応じて各種サイト情報の表示が可能になります。

switch( $show ) {
    case 'home' : // DEPRECATED
    case 'siteurl' : // DEPRECATED
        …略…
    case 'url' :
        $output = home_url();
        break;
    case 'wpurl' :
        $output = site_url();
        break;
    case 'description':
        $output = get_option('blogdescription');
        break;
    case 'rdf_url':
        $output = get_feed_link('rdf');
        break;
    case 'rss_url':
        $output = get_feed_link('rss');
        break;
    case 'rss2_url':
        $output = get_feed_link('rss2');
        break;
    case 'atom_url':
        $output = get_feed_link('atom');
        break;
    case 'comments_atom_url':
        $output = get_feed_link('comments_atom');
        break;
    case 'comments_rss2_url':
        $output = get_feed_link('comments_rss2');
        break;
    case 'pingback_url':
        $output = site_url( 'xmlrpc.php' );
        break;
    case 'stylesheet_url':
        $output = get_stylesheet_uri();
        break;
    case 'stylesheet_directory':
        $output = get_stylesheet_directory_uri();
        break;
    case 'template_directory':
    case 'template_url':
        $output = get_template_directory_uri();
        break;
    case 'admin_email':
        $output = get_option('admin_email');
        break;
    case 'charset':
        $output = get_option('blog_charset');
        if ('' == $output) $output = 'UTF-8';
        break;
    case 'html_type' :
        $output = get_option('html_type');
        break;
    case 'version':
        global $wp_version;
        $output = $wp_version;
        break;
    case 'language':
        $output = get_locale();
        $output = str_replace('_', '-', $output);
        break;
    case 'text_direction':
        …略…
        if ( function_exists( 'is_rtl' ) ) {
            $output = is_rtl() ? 'rtl' : 'ltr';
        } else {
            $output = 'ltr';
        }
        break;
    case 'name':
    default:
        $output = get_option('blogname');
        break;
}

※「wp-includes/general-template.php」より抜粋

「switch」は条件分岐を記述するPHPの構文です。たとえば、

    case 'url' :
        $output = home_url();

によって「bloginfo('url')」を実行するとサイトのURLが表示される仕組みです。

同じように

    case 'name':
    default:
        $output = get_option('blogname');

によって、「bloginfo('name')」を実行するとサイト名が表示されます。

bloginfoの「その他」とは？

上記の条件分岐のポイントは最後の「default:」です。条件分岐の「それ以外は」を処理する部分です。

この部分では、「case 'name':」と同じように、サイト名が表示される仕組みになっています。つまり、「bloginfo('設定')」の設定がどれにも当てはまらない場合（その他の場合）はbloginfo('name')と同じようにサイト名が表示されます。

• bloginfo('url') → サイトURLを表示
• bloginfo('description') → キャッチフレーズを表示
• bloginfo('name') → サイト名を表示
• bloginfo(その他の設定) → サイト名を表示

「その他の場合」とは、指定した文字が「url」でもなければ「description」でもない。「template_url」でもなければ「admin_email」でもない。どれにも当てはまらないということです。

たとえば、「description」とすべきなのに「discription」と入力ミスした場合などに「その他」に振り分けられてサイト名が表示されてしまいます。

問題の原因は「大文字と小文字の区別」

では、bloginfo('URL')はどうでしょうか。入力ミスには見えませんが、「url」だとは判断されず、「その他」に分類されてしまいます。それは、大文字と小文字が区別されるためです。

プログラミングでは一般的に大文字と小文字が区別され、「URL」と「url」は違う文字だと判断されることが多いです。

話が長くなりましたが、このような仕組みでbloginfo('URL')とすると、bloginfo('url')とは違い、どれにも当てはまらない「その他」だと判断されてサイト名が表示されるということです。思い当たる方はご注意ください。

投稿や固定ページの本文に入力した文章の一部を隠しておきたいこともあります。本文が長い場合や、クイズ、ドラマや映画のあらすじを掲載する場合などです。そのようなコンテンツでは、途中の文章まで見せておき「続きを読む」をクリックして先を読んでもらう方法があります。

「続きを読む」をクリックして内容を見る

Expanderプラグインを使うと、この仕組みを組み込むことができます。以下、Expanderプラグインの使い方を説明します。

Expanderプラグインのインストール

「プラグイン」‐「新規追加」メニューからExpanderプラグインをインストール、有効化します。

Expanderプラグインのインストール

その他、特別な設定は不要です。

投稿本文に「続きを読む」を組み込む

投稿本文（テキストエディタ）に入力する文章のうち、隠したい部分をwpexショートコードで囲みます。ショートコードのテンプレートは「プラグイン」‐「インストール済みプラグイン」メニューの「Expander」で「詳細を表示」をクリックして確認できます。

Expanderプラグインのサンプルショートコード

「続きを読む」や「閉じる」をクリックして隠れている部分の表示／非表示を切り替えるショートコードの例は次のようになります。

[wpex more="続きを読む" less="閉じる"]隠しておく部分[/wpex]

これを投稿や固定ページの本文に使えば、一部の文章を隠しておいて「続きを読む」をクリックして表示させる仕組みができます。テキストエディタに文章を入力した例は次のようになります。

最初から表示する部分(1)と隠しておく部分(2)

最初から表示する部分(1)は通常通りに入力します。隠しておきたい部分(2)だけショートコードで囲みます。「more」にはクリックして開くときの文字、「less」には閉じるときの文字を入力できます。クイズの答えを隠す場合は「答えを見る」「答えを隠す」などに変更すれば良いでしょう。

表示結果は次のようになります。

「続きを読む」をクリックして内容を見る

「続きを読む」にアイコンを付けるには

「続きを読む」も「閉じる」も同じ「wpex-link」というクラス名なのでCSSで別々のアイコンを付けるのは難しいです。やっつけですが、ショートコードで「続きを読む」や「閉じる」の前に記号を付ける方法があります。

「続きを読む」や「閉じる」の前にマークを付加

表示結果は次のようになります。

「続きを読む」にマークを付けたイメージ

リンクの下線を削除するCSSの例は次のようになります。

/* 「続きを読む」「閉じる」の下線を削除 */
a.wpex-link {
    text-decoration: none;
}

表示結果は次のようになります。

「続きを読む」や「閉じる」の下線を削除

開くときも閉じるときも同じアイコンで良ければ次のようなCSSで付加できます。

/* 「続きを読む」「閉じる」に同じアイコンを付加 */
a.wpex-link:before {
    content: '\f0a4 ';
    font-family: FontAwesome;
    padding-right: 5px;
}

ここではアイコンフォントFont Awesomeを使っています。使ったことがない方は以下のページも参考にしてください。

TwitterやFacebookなどのリンクアイコンを手軽に表示できる「Font Awesome」

表示結果は次のようになります。

「続きを読む」や「閉じる」に同じアイコンを付加する

BizVektorの拡張デザインスキン「BizVektor Attract」は画面幅いっぱいに広がるヘッダー画像が特徴的です。その他、フッターなどの色を細かく設定できたり、ページタイトルに背景画像を表示できるなど、無料版のBizVektorにはない機能が組み込まれています。

BizVektor Attractの画面イメージ

なにより、パッと見てわかるようにベージュ系のデザインで幅広い業種のサイトですぐに使えそうな仕上がりです。カスタマイズせず初期設定のままでも十分に雰囲気のあるサイトが立ち上がりそうな点がおすすめポイントです。

ここでは、BizVektor Attract固有の機能（「外観」-「カスタマイズ」メニュー）を中心に、カスタマイズに役立つCSSを合わせて紹介します。BizVektorでサイトを作っている方は参考にしてください。

画面いっぱいに広がるヘッダー画像

BizVektor Attractで特徴的なのが画面いっぱいに広がるヘッダー画像です。サイトの雰囲気を伝えるには十分の効果があると思います。

画面いっぱいのヘッダー画像でサイトを印象づけましょう

ヘッダー画像の推奨サイズは幅2000px、高さ680pxです。これでも十分な高さですが、さらに高さのある画像を使いたい場合は、幅2000pxの画像（例：幅2000px、高さ1500px）をアップロードしてみましょう。「切り抜かない」メニューが現れ、そのままのサイズでヘッダー画像を使うことができます。

幅2000pxの画像をアップロードすれば切り抜かないオプションも選択可能

背景画像（ページおよびサイト全体）

ページタイトルの背景画像

「外観」-「カスタマイズ」メニューの「Attract設定」にある「ページタイトル背景画像URL」からページタイトルの背景に画像を入れることができます。

ページタイトルの背景画像

この画像はサイト全体で共通ですが、どうしてもページごとに背景画像を切り替えたければ、そのページのbodyタグに付加されたクラス名を活用しましょう。以下、ページIDが8のページの背景画像を変えるCSSの例を紹介します。

/* 個別ページのタイトルの背景画像 */
.page-id-8 #pageTitBnr #pageTitInner {
    background: transparent url("http://…略….jpg") no-repeat scroll left 50%;
}

表示結果は次のようになります。

特定のページのみ背景画像を変える

サイト全体の背景画像

「外観」-「背景」メニューからサイト全体に背景画像を入れる場合は、初期設定のベージュの背景色を透明にする必要があります。たとえば、次のようなCSSを使います。

/* 背景色を透明に（背景画像を使うため） */
#header, #gMenu, #main, #panList, #pagetop {
    background-color: transparent;
}

背景画像が使えるようになります。

背景画像が使えるようになる

ついでに、ページタイトルの背景色も透過すると次のようなイメージになります。

ページタイトルの背景色を透明に

使ったCSSは次のとおりです。

/* ページタイトルの背景色を透明に */
#pageTitBnr {
    background-color: transparent;
    box-shadow: none;
}

ページタイトルの背景画像の幅を画面いっぱいに広げると次のようなイメージになります。

ページタイトルの幅を画面いっぱいに広げたイメージ

使ったCSSは次のとおりです。

/* ページタイトルの背景画像を幅100%に */
#pageTitBnr .innerBox {
    width: 100%;
}

ヘッダーロゴと連絡先

従来のデザインスキンではヘッダーロゴと連絡先が横並びのパターンが多かったため、ヘッダーロゴのサイズが微妙な感じだったかもしれませんが、BizVektor Attractでは電話アイコンをクリックして連絡先を開くようになっています。そのため、ロゴブロックの幅が広くなり、横長のロゴを使えるようになっています。

横長のヘッダーロゴも表示可能に

ヘッダーロゴを表示しない場合は次のようにサイト名が表示されます。

ヘッダーロゴを表示しない場合

ヘッダーロゴの高さは60pxですが、CSSをカスタマイズすればもう少し高さのあるロゴも表示できるようになります。

CSSをカスタマイズすれば高さ60pxを超えるロゴも表示可能

使ったCSSは次のとおりです。

@media (min-width: 950px) {
    /* ヘッダーロゴの高さ調整 */
    #header #site-title a img {
        max-height: 250px;
    }
}

連絡先は電話アイコンをクリックすると表示されます。

電話アイコンをクリックすると連絡先が表示される仕組みに

電話アイコンを表示せずにヘッダーロゴとグローバルメニューをスッキリ見せたい場合は、「外観」-「テーマオプション」メニューの「連絡先」で電話番号を消せば大丈夫です。

電話番号が未入力の場合は電話アイコンは非表示に

ロゴを透過画像にすると次のようなイメージになります。

ロゴを透過画像にしたイメージ

色の設定

BizVektor Attractのサイト全体の配色はカスタマイズしなくても十分なくらいに仕上がっていますが、カスタマイズしたい場合は「外観」-「カスタマイズ」メニューの「Attract設定」から各種パーツの色を設定することができます。

BizVektor Attractの色設定（Attract設定）

以下、それぞれの色が使われている場所を簡単にまとめておきます。

• キーカラー（初期設定：#3f3d22） --- フッター、メニュータイトル、サイドバーのウィジェットタイトル、カテゴリーリンクのマウスオーバー時など
  

  フッターの色は「キーカラー」で変更可能

• キーカラー(明)（初期設定：#AFAE8D） --- 横の罫線、カテゴリーリンク背景色、RSSボタン背景色など

  カテゴリーリンクの背景色は「キーカラー（明）」で変更可能

• キーカラー(薄)（初期設定：#e6e5c1） --- 投稿、固定ページ、トップページの「ブログ」「お知らせ」のタイトル、メニューのマウスオーバー時、ページタイトルの背景色など

  「キーカラー（薄）」の例

• メニューのボーダーカラー（初期設定：#D1D0A6） --- グローバルメニューの縦の罫線

  メニューのボーダーカラー

• アクセントカラー（初期設定：#c11313） --- 「お問い合わせはこちら」、フォームの送信ボタン、リンクのマウスオーバー時、「詳しくはこちら」のアイコン、トップページ投稿一覧の投稿日時など

  「お問い合わせはこちら」はアクセントカラーとアクセントカラー（明）でグラデーション

• アクセントカラー(明)（初期設定：#cd3f3f） --- アクセントカラーと合わせてボタンのグラデーションに
• 背景色（初期設定：#fefcf2） --- 文字通りサイト全体の背景色

  背景色は幅広い業種に合うベージュ系です

まとめ

以上、BizVektor Attractで使える機能を紹介してきました。画像でサイトを印象づけたり細かく色設定できるのもうれしいですが、初期設定で仕上がっている印象なので、カスタマイズしなくても雰囲気のあるサイトを立ち上げられそうな点もうれしいですね。

BizVektorで雰囲気のあるサイト作りを目指す方に、BizVektor Attractをおすすめします！

WordPressで投稿の関連記事を表示するプラグイン（例：WordPress Related PostsやYet Another Related Posts Pluginなど）は初期設定ではカスタム投稿の関連記事が表示されません。たとえば、Yet Another Related Posts Pluginのインストール直後は次のように「投稿」のみが表示対象になっています。カスタム投稿は関連記事の表示対象外だということです。

初期設定では「投稿」のみに関連記事が表示される

以下、Yet Another Related Posts Pluginでカスタム投稿に関連記事を表示する方法を紹介します。WordPress Related Postsプラグインの修正は簡単ではないので説明しません。

カスタム投稿タイプを関連記事プラグインに対応させる

カスタム投稿タイプで関連記事を表示するには、そのカスタム投稿タイプをYet Another Related Posts Pluginに対応させる必要があります。それには、カスタム投稿タイプの定義部に「'yarpp_support' => true」を追加します。

ここでは、BizVektorのカスタム投稿タイプである「お知らせ」（info）を例に説明しますが、その他のテーマでも考え方は同じです。

カスタム投稿タイプの定義部を探す

まずは、カスタム投稿タイプが定義されている部分を探します。一般的にはfunctions.phpに「register_post_type」という命令で定義されていますが、BizVektorではbiz-vektor/plugins/add_post_type/add_post_type.phpの31行目あたりに記述されています（BizVektorバージョン1.8.13の場合）。

register_post_type( 'info', /* post-type */
array(
	'labels' => array(
	'name' => $infoLabelName,
	'singular_name' => $infoLabelName
),
'public' => true,
'menu_position' =>5,
'has_archive' => true,

「'public' => true,」の上あたりに「'yarpp_support' => true,」を追加します。

register_post_type( 'info', /* post-type */
array(
	'labels' => array(
	'name' => $infoLabelName,
	'singular_name' => $infoLabelName
),
'yarpp_support' => true,
'public' => true,
'menu_position' =>5,
'has_archive' => true,

関連記事の表示設定

続いて、「設定」‐「YARPP」メニューを開いて「表示設定」でカスタム投稿タイプを関連記事の表示対象に追加します。

カスタム投稿タイプを関連記事の表示対象に

また、必要に応じて関連記事の表示にカスタムタクソノミーを考慮するのか設定できます。

関連スコアの算出にカスタムタクソノミーを使うか設定

関連記事の表示対象にカスタム投稿タイプを追加できたら、「変更を保存」ボタンをクリックして設定完了です。

カスタム投稿の関連記事を確認

カスタム投稿を確認すると、関連記事が表示されるようになります。

カスタム投稿に関連記事が表示される