BizVektorのカスタマイズに関する記事を当サイトに掲載してきましたが、この記事にまとめておきます。CSSのカスタマイズが中心ですが、実際に西沢直木のIT講座でも要望の多い相談がベースになっています。参考にしてください。

BizVektorカスタマイズの基礎（CSS）

BizVektorのデザイン（テーマオプションで対応できない部分）を微調整するにはCSSのカスタマイズが必要です。といっても、親テーマのCSSファイルを直すのは間違いです。もっと効率的な方法があります。それは、最優先されているスタイルを調べて上書きする方法です。「BizVektorのCSSの直し方」を読んで、効率的にCSSをカスタマイズする方法をマスターしましょう。

• BizVektorのCSSの直し方　【電子書籍版（Amazon読み放題対応）はこちら】
• CSSの変更が反映されないときはセレクタの優先順位をチェック

今後、BizVektorに限らずWordPressのCSSを自由にカスタマイズできるようになりたい場合は、「BizVektorのCSSの直し方」は必修です。理解できなければWordPress個別サポートをご利用ください。1時間くらいでCSSカスタマイズの基礎を説明します。

ヘッダー画像のカスタマイズ

ヘッダー画像については、初期設定のサイズ（幅950px、高さ250px）を変更したり、画面幅いっぱいに広げたいという要望が人気です。また、ヘッダー画像の上にバナーを乗せたり、グローバルメニューとヘッダー画像の上下関係を入れ替えたいという要望もたまにあります。記述するCSSは少し複雑になりますが、興味がある方はチャレンジしてみてください。

• BizVektorのヘッダー画像のサイズを変更する
• BizVektorのヘッダー画像を画面の横幅いっぱいに広げる
• BizVektorのヘッダー画像の上にリンクボタンやバナーを重ねて表示する
• BizVektorのグローバルメニューとヘッダー画像の位置を入れ替える

ヘッダー画像を画面の横幅いっぱいに広げたイメージは次のようになります。

ヘッダー画像を画面幅いっぱいに広げる

連絡先のカスタマイズ

BizVektorの象徴ともいえる画面右上の連絡先。定番の要件は「連絡先を画像に置き換えたい」ですが、そのためのコードはBizVektorのサイト（電話番号のカスタマイズ）に掲載されています。当サイトでは一歩進んで、連絡先エリアをウィジェット化する方法を紹介しました。参考にしてください。

• BizVektorの「連絡先」をウィジェット化する
• BizVektorの「連絡先」のスタイルを変更する

ウィジェットに「連絡先」を追加したイメージ

連絡先のウィジェット化はPHPの変更が必要です。難しそうであれば、CSSを使ったスタイル変更に取り組んでみてください。

フッターのカスタマイズ

BizVektorのフッターはデザインスキンによっては黒塗りだったりするので、色を変えたいとか、画像を表示したいという要望をいただきます。意外と難しいかもしれませんが、少し難しい課題に取り組みたい方はチャレンジしてみてください。

画面を下にスクロールしたときに表示されるフッターのフローティングメニューも人気の要件です。

• BizVektorのフッターに背景画像を表示する
• BizVektorのフッターの色やメニューアイコンを変更する
• BizVektorに標準装備されたFont Awesomeを使ってあちこちにアイコンを表示する
• フローティングメニューをフッターに表示する

スマホに便利！フッターに表示できるフローティングメニュー

BizVektorではアイコンフォントのFont Awesomeが使用可能なので、フッターやヘッダーで少しずつアイコンを使ってみるとカスタマイズしている感じがでてきますよ。

3PRエリアのカスタマイズ

BizVektor定番パーツの「3PRエリア」は、数を増やして「4PR」や「6PR」にしたいという要望が多いです。「テーマオプション」メニュー自体をカスタマイズするのは危険なので、代替手段としてPage Builderプラグインを使って3列、4列のレイアウトを組み立てる方法を覚えると便利です。

• 「BizVektorの3PRエリアの数を増やしたい」の解決策
• BizVektorの3PRエリアのフォントサイズや色を変更する
• BizVektorの3PRエリアの画像を丸くする

オリジナルの「6PRエリア」の完成イメージ

言うまでもありませんが3PRエリアのフォントサイズや色はCSSで変更可能です。カスタマイズしてみるとオリジナルパーツのように加工できて面白いですよ。以下は3PRエリアの画像を丸くしたイメージです。

3PRエリアの画像を丸くする

コードを書くのが面倒なら「拡張プラグイン」

ここまで定番のカスタマイズを紹介しました。CSSやPHPを直せば自由にカスタマイズできるといっても、慣れていないと面倒ですよね。そんな方もガッカリすることはありません。BizVektorでは「拡張プラグイン」が提供されているので、自分の要望にピッタリのプラグインがあれば、簡単に解決することができます。

たとえば、フッターのコピーライト（Powered by WordPress & BizVektor …）を消す「BizVektor FooterPoweredDelete」や投稿をグリッド表示する「BizVektor Grid Unit」などです。

• フッターコピーライトを削除する「FooterPoweredDelete」プラグイン
• BizVektorの投稿をグリッド表示できる「Grid Unit」プラグイン

投稿をグリッド表示できる「Grid Unit」

BizVektorっぽくなく仕上がる「拡張デザインスキン」

コアなBizVektorファンになると、「BizVektorらしくないデザインに仕上げたい」という贅沢な悩みが出てくることもあります。そんな方はBizVektorの「拡張デザインスキン」を探してみましょう。たとえば、「BizVektor Attract」を使うと次のように仕上げることができます。

BizVektor Attractの使用例

BizVektor Attractのサンプルサイト

どうですか？初期設定のBizVektorらしくないですよね。あとは、あなたのアイデアで、より洗練されたデザインに仕上がると思います。BizVektor Attractについて詳しくは、以下のページをご覧ください。

• 幅広い業種で使えるおすすめのデザインスキン「BizVektor Attract」

ベースの機能はBizVektorのまま。見た目は変わってもテーマはBizVektorなので安心です。気に入らないときは元に戻せば良いので。

まとめ

以上、当サイトで紹介してきたBizVektorのカスタマイズパターンをまとめました。私が無理に考えたパターンではなく実際に相談の多い要望がベースになっています。CSSやPHPの修正が必要になりますが、カスタマイズの構想を練るときの参考にしてください。作業のサポートや詳しい説明はWordPress個別サポートで対応します。気軽にご相談ください。

SEOに強いと評判のWordPressテーマ「賢威」ですが、2万円を超える金額なので、なかなか手が出ないかもしれません。そこで、賢威を少しでも安く購入する方法を紹介します。

賢威を安く購入できる「お名前.com」

少しでも安く賢威を購入したい場合、お名前.comで購入する方法があります。

賢威7パッケージプランでは、21%OFFの18,000円（税込19,440円）になります。従来の24,800円からおよそ5,000円の割引です。

• 賢威7は買い取りです。月額ではなく初回に全額支払って購入完了です。
• サイト制作に役立つ賢威のサポートフォーラムも使用可能になります。
• さらに、サーバー初期費用無料＋月額最大2ヶ月分無料です。

購入したテーマは他のレンタルサーバーでも使えます。裏技ではありませんが、参考までに。たとえば、しばらくお名前.comのレンタルサーバーを使ってみて、他社に乗り換えたとしても賢威7はそのまま使用可能です。

これは執筆時点の情報なのでサービス内容や料金は変更される可能性があります。「賢威を安く買いたい！」と思っていた方、今がチャンスです。

21%OFFの賢威の購入はこちらから

Googleが「モバイルファーストインデックス」に移行予定だという発表があったようなので概要をお伝えします。

検索結果のベースは「モバイルファースト」に

Googleでの検索結果を作る「Googleインデックス」は基本的にPCサイトの評価がベースになっています。モバイルサイトの検索結果にも適用されているため、いわゆる「PCファーストインデックス」と表現できます。

ところが現在、米国や日本などではすでにモバイル検索のボリュームがPC検索を上回る状況です。そこで、Googleは検索のベースとなるインデックスの軸足をPCではなくモバイルに移行することを決定したようです。

2016年10月13日、GoogleのGary Illyes氏がPubCon Las Vegas 2016で言及しています。詳しい時期は未定ながら、今後数ヶ月以内に導入予定とのことです。

モバイルサイトの評価がベースになる「モバイルファーストインデックス」です。

モバイルファースト移行後の影響

「モバイルフレンドリー」というキーワードが使われるようになって時間がたつので、多くのサイトでレスポンシブ対応が進んでいると思います。PCでもモバイル端末でも正しく表示されるように対策されているサイトはモバイルファーストインデックスとなっても大きな問題はないと思います。むしろモバイルフレンドリーじゃないサイトの検索順位が下がることで、相対的に順位が上がることが期待できます。

一方、モバイルフレンドリーじゃないサイトについては確実に検索順位に影響が出ることが予想されます。現在はレスポンシブではなくても順位に大きな影響は出ていないように感じますが、今後は次のようなサイトは対策が必要でしょう。

• PCでの表示を前提にサイトを作っている（スマホ対応ではない）
• PCサイトとは別のURLにスマホ用サイトを作っている
• PCサイトとモバイルサイトで違う内容になっている
• スマホ表示のときに文章などを短縮して表示している

多くのサイトがPC表示に軸足を置いて制作されているのが実情かもしれませんが、今後はモバイルサイトが評価のベースになると思って、自分のモバイルサイトをもう一度チェックしてみましょう。

まだスマホ対応が済んでいない方は、今度こそ待ったなしです。次のような方法でサイトのモバイルフレンドリー化を進めましょう。

• 現状のテーマでモバイル端末用のスタイルを定義する
• サイトをレスポンシブ対応のテーマに切り替える

モバイルファーストインデックスへの移行時期などについて詳しい発表はこれからです。わかりましたら当サイトでも報告します。

【参考にしたサイト】
Google Search Switching to Mobile First Index from Desktop Index
Googleがモバイル ファースト インデックスを導入予定、影響は？対応は？
Google、モバイル向けページを主要インデックス基準に移行計画発表

さくらインターネットでWordPressを始める方が多いようですね。関連記事をまとめておきます。WordPressのインストールからホームページ作成、ドメイン設定など、さくらインターネットでWordPressサイトを作るための基本手順です。参考にしてください。

さくらインターネットの申し込み

さくらインターネットでWordPressサイトを作るには、サーバーの契約が必要です。最安コースは月額129円のライトコースですが、WordPressを使うには月額500円のスタンダードコース以上が必要です。

まだ契約していない方は、以下のバナーからお申し込みできます。2週間お試し可能です。

WordPressのインストール

WordPressをインストールするには、さくらインターネットの「サーバコントロールパネル」にログインする必要があります。詳しくは、以下のページをご覧ください。

• さくらインターネットでWordPressをインストールする

ホームページ作成

ホームページの作成手順は、さくらインターネット以外のレンタルサーバーでも同じです。手順が多いので、先に説明を聞きたい方はホームページ作成講座をご利用ください。

• WordPressでホームページを作る手順

ドメイン設定

ドメイン設定のパターンはいくつかありますが、「ユーザー名.sakura.ne.jp/フォルダ名」にインストールしたWordPressを「http://example.com/」のような独自ドメインで表示するパターンが多いです。

ここで焦って「設定」‐「一般」メニューの「WordPressアドレス」や「サイトアドレス」を修正してはいけません。最終的には修正することになりますが、お試しで修正すると画面が真っ白になる場合があります。

• 「ユーザー名.sakura.ne.jp/フォルダ名」のWordPressを独自ドメインで表示する
• ムームードメインで取得したドメインをさくらインターネットで使う方法
• サブディレクトリにインストールしたWordPressをルートディレクトリ表示に変更
• さくらインターネットの初期ドメイン名を変更したいとき

ちょっと困った

単純な問題ですが、たまに、サーバコントロールパネルにログインできない方がいます。ちょっとした勘違いなので落ち着いて作業しましょう。

• さくらインターネットのコントロールパネルにログインできないとき
• 「サーバが見つかりませんでした」を回避する裏技

その他、困ったときはWordPress個別サポートにご相談ください。

Bootstrap対応のWordPressテーマ「Lightning」を使うなら拡張プラグイン「Lightning Variety」は必携かもしれません。有料ですが、トップページやアーカイブに複数カテゴリーの新着情報をギッシリ詰め込めるので便利です。メディアサイトのように仕上げることができます。こんな感じです。

Lightning Varietyの使用例

好きなカテゴリーの新着情報をパーツとして埋め込むイメージです。複数の表示パターンが用意されているので、あなたのアイデア次第で変化に富んだ魅力的なトップページを演出できるでしょう。さまざまなカテゴリーで書いた記事をできるだけ多く目にしてもらいたい方には特におすすめです。

カスタム投稿、カテゴリー、タグ、カスタム分類での投稿表示にも対応しています。

以下、Lightning Varietyで使用可能なレイアウトパターンをいくつか紹介します。

Lightning Varietyを使うメリット

Lightning Varietyのメリットはサイトを簡単にメディアサイトのように変えられる点です。好きなカテゴリーの投稿をさまざまな表示パターンでレイアウトできます。たとえば、こんな感じです。

Lightning Varietyを使った新着情報のレイアウト例

こんなレイアウトを自力で作るのは面倒ですが、Lightning Varietyなら、Media Postsウィジェットを使って「外観」-「ウィジェット」メニューで設定するだけです。

難しそうなレイアウトも新着情報の表示形式を選ぶだけ

グリッドレイアウトやアイキャッチ画像付のリストなど何パターンもの表示形式を選べるので、トップページの中に全幅の投稿一覧やマルチカラムのカテゴリー一覧などを効果的に混ぜることができます。ちなみに、上記の表示形式は「Image card 1st feature」です。

「Vertical card 3 column」を指定すると、グリッド表示できます。

新着情報をグリッド表示

「Oblong card 1 column」を選択すると、記事タイトルと画像1列で一覧表示することができます。左右に並んだトップページコンテンツエリア左・右を使って複数カテゴリーの新着情報を横並びにすることもできます。

複数カテゴリーの新着情報を横並びに

Lightningテーマのトップページのウィジェットエリアは豊富すぎるくらいなので、次のように複数カテゴリーの新着情報をさまざまなレイアウトで表示することができます。

トップページのレイアウトはアイデア次第！

こんなレイアウトのトップページもメニュー選択によって簡単に作成できます。さまざまなパターンの投稿一覧をちりばめた複雑なレイアウトのトップページも簡単です。あとは、あなたのアイデア次第で魅力的なサイトを演出できるでしょう！

他にも機能がありますが、これだけでも購入する価値はあると思います。興味のある方はLightning Varietyをお試しください。

少しだけCSSカスタマイズ

実際にLightning Varietyを使う前に1つだけ書いておきます。LTG Media Postsウィジェットでは、記事タイトルなどの見出し色は黒になっています。マウスオーバー時は赤です。

初期設定の色

初期設定の色でも動作に問題はありませんが、これらの色を変更するにはCSSカスタマイズが必要です。この記事ではCSSをカスタマイズしてブルー系にしています。参考までにCSSを掲載するのでご自由にお使いください。

/* 記事タイトルの色 */
.media_post.image_card .media_post_text {
    background-color: #337ab7;
}

/* セクションタイトル（例：新着情報）の色 */
.home h1.mainSection-title {
    background-color: #337ab7;
    border: none;
}

/* マウスオーバー時のタイトルの色 */
.home .media_post.image_card:hover .media_post_text {
    background-color: #0095d9;
}

CSSカスタマイズするには、「VK ExUnit」‐「CSSカスタマイズ」メニューなどを使う方法があります。

VK All in one Expansion Unitプラグインの「CSSカスタマイズ」メニュー

VK All in One Expansion UnitプラグインはLightningのカスタマイズに役立つプラグインです。Lightning Varietyと共にインストールしておきましょう。

2016年9月末に実施されたペンギンアップデート 4.0の後、日々の検索順位の変動が大きく、順位が不安定な日々が続いています。みなさんのサイトは大丈夫でしょうか？

Google順位変動幅（namaz.jp）を見ると、9月末から断続的に変動幅が大きくなっています。グラフが赤い日は変動幅が大きいことを示しています。

Google順位変動幅（namaz.jpより）

真面目なサイトがペンギンアップデートに巻き込まれることも

以前は3位とか5位で安定していたページが11位とか15位に下がってしまったり、アクセスが右下がりの状況になっていないでしょうか。

ペンギンアップデートは基本的に過剰なSEOをかけているような質の低いサイトの順位を下げることが目的ですが、まれに、真面目に作っているサイトが巻き込まれることもあります。

ここ最近、なぜか検索順位が下がってきているとか、アクセス数が徐々に減ってきているような方は、もう一度チェックしてみましょう。特に、真面目な対策であっても過剰な施策を実施していないかチェックです。

たとえば、必ずしもペナルティになるとは限りませんが、次のような行為に注意です。

• キーワードの詰め込みすぎ（記事本文など）
• 太字の使いすぎ（strongタグ）
• 画像の入れすぎ（文章がない）
• 自作自演の外部リンクの張りすぎ
• アフィリエイトタグの入れすぎ

日々の検索順位のチェックには「GRC」

日々の検索順位を手動でチェックするのは面倒です。毎日膨大なキーワードを入力して1つずつ結果をチェックするには非効率ですし、過去からの変動を把握しづらいです。

そんなときは検索順位チェックツールGRCがおすすめです。現在の順位や過去からの順位変動をまとめてチェックできるので、ペンギンアップデートなどの影響を受けていないか目を光らせることができます。

検索順位チェックツール「GRC」

アクセス数や検索順位が成約の増減に影響するようなビジネスサイトを管理する場合は必須ツールだと思います。無料版もあるので、ぜひ、お試しください。

検索順位を調べるなら、検索順位チェックツールGRC

WordPressでビジュアルエディタとテキストエディタの切り替えができない場合があります。その原因と対策を説明します。また、合わせて行っておいた方が良い作業も紹介します。

エディタが切り替わらないときはプラグインをチェック

ビジュアルエディタとテキストエディタが切り替わらない場合、プラグインが原因になっていることが多いです。特にWP Multibyte Patchプラグインが有効化されているかチェックしてください。このプラグインについて「更新してください」と表示されている場合は、「更新」をクリックしてアップデートしましょう。

WP Multibyte Patchプラグインは常に最新に

WP Multibyte Patchプラグインが無効だったり最新ではない場合、エディタの切り替え以外にも問題が起きる場合があります。このプラグインだけは必ず最新版にアップデートしましょう。

エディタを切り替える前に

ビジュアルエディタとテキストエディタを切り替えたら改行が消えて文章のレイアウトが崩れてしまったときは、そのページを更新せずに別のメニューに逃げてTinyMCE Advancedプラグインをインストールしてみましょう。

「設定」‐「TinyMCE Advanced」メニューで「段落タグの保持」をチェックすることで、エディタを切り替えたときに段落タグや改行タグが保持されます。

段落タグの保持設定（TinyMCE Advancedプラグイン）

これにより、エディタを切り替えても、ビジュアルエディタで行を空けた部分や、テキストエディタに入力した段落タグなどが保持されます。

WordPress関数のbody_classが出力するクラス名にページのスラッグを追加する方法を紹介します。ページごとにスタイルを変更するときに役立ちます。body_classが出力するページIDを使ってカスタマイズするのが不安なときなどに参考にしてください。

クラス名を自動生成するbody_class

body_classは表示中のページに応じてクラス名を自動生成するWordPress関数で、多くのテーマで使われています。典型的な使用例はheader.phpに記述されたbodyタグです。次のような記述があるはずです。

<body <?php body_class(); ?>>

これにより、現在表示中のページに合わせてクラス名が自動で付加される仕組みです。たとえば、トップページには「home」が追加されます。

<body class="home blog …略…">

固定ページや投稿にはページ番号（記事ID）が付加されます。以下はページ番号が「42」の固定ページのクラス名です。

<body class="page page-id-42 …略…">

このページ番号はページごとにスタイルを変えたいときに役立ちます。たとえば、IDが42のページだけ背景画像を変えたい場合、次のようなCSSで実現できます。

/* ページごとに背景画像を変える */
body.page-id-42 {
    background: url('http:// …略… .gif');
}

ページのスラッグをクラス名に付加する

上記のCSSでも問題ありませんが、次のような疑問もあります。

• サイト移転などでページ番号が変わったらどうするのか
• どのページのスタイルなのかわかりづらい

ページIDではなくスラッグでスタイルを制御できれば便利かもしれません。その場合、クラス名を動的に生成するbody_classの動作をカスタマイズして、固定ページのスラッグをクラス名に付加する方法があります。

具体的には、次のようなコードを子テーマのfunctions.phpなどに入力すれば、固定ページのスラッグがクラス名に追加されます。

/* 固定ページのスラッグをクラス名に追加 */
function my_body_class($classes) {
    if (is_page()) {
        $page = get_post();
        $classes[] = $page->post_name;
    }
    return $classes;
}
add_filter('body_class', 'my_body_class');

これにより、固定ページに設定されたスラッグがbodyタグのクラス名に追加されます。たとえば、会社概要ページのスラッグが「company」の場合、bodyタグのクラス名に「company」が追加されます。

固定ページのスラッグがクラス名に追加される

ページごとにスタイルを変えたいときに、そのページのスラッグを指定することができます。たとえば、ページごとに背景画像を切り替えるCSSの例は次のようになります。

/* ページごとに背景画像を変える */
body.company {
    background: url('http:// …略… .gif');
}

ページIDでCSSを記述しても動作に問題はありませんが、スラッグで指定できた方が便利かもしれません。ソースコードもわかりやすくなります。

まとめ

このように、body_classの動作をカスタマイズすることで、bodyタグのクラス名にページのスラッグを追加することができます。ページごとにスタイルを変更するときの参考にしてください。

【参考にしたページ】
WordPressの body_class()にページスラッグの決定版
WordPress：body_classに独自のクラスを追加する方法

テーマのindex.phpはインデックスファイルではない

WordPressテーマのindex.phpとは、一般的なWebサイトに含まれるindex.phpやindex.htmlのようなインデックスファイルとは違います。

名前はindex.phpですが、サイトを表示したときにテーマのindex.phpが最初に表示されるわけではないということです。

ただし、基本的にはindex.phpにトップページのレイアウトが記述してあったり他のテンプレートを代用できるように投稿を一覧するPHPのコードが書いてあったりするので、結果として、一般的なWebサイトのインデックスファイルと同じような機能に見える場合もあります。

そのため、index.phpがインデックスファイルだと勘違いしてしまうかもしれませんが、実際は違うので注意が必要です。

本当の意味でのインデックスファイルはWordPressをインストールしたフォルダにあるindex.phpです。興味がある方は、index.phpから読み込んでいるファイルを追いかけてみてください。

テーマの必須ファイルとしてのindex.php

index.phpはテーマにとって必須ファイルです。内容はともかく、テーマフォルダには必ずindex.phpを含める必要があります。ちなみに、WordPressテーマの必須ファイルは次の2つです。

• index.php
• style.css

もちろん、この2つのファイルだけが存在していても実用的ではないので、構成ファイルが2つというテーマはほとんどないと思いますが、仕組みとしては上記の2ファイルがあればテーマは作成可能です。

index.phpが必須というのは、他のテンプレートの代用をするということです。

たとえば、トップページのレイアウトにはfront-page.phpが使われますが、存在しない場合はhome.phpが使われます。home.phpも存在しない場合などは、最終的にindex.phpが使われます。

この、あらゆる種類のテンプレートが存在しなかった場合に「最終的に使われる」テンプレートがindex.phpです。

固定ページのpage.phpや個別記事のsingle.phpなどのように用途が決まっているわけではありませんが、最後の最後に表示されるテンプレートがindex.phpです。ですから、実用的かどうかはともかくとして、index.phpだけはテーマに必ず含める必要があるのです。

archive.phpやcategory.phpが存在しないテーマも

index.phpが他のテンプレートを代用してくれることを利用して、いくつかのテンプレートを作らないという効率的な制作手法もあります。たとえば、index.phpに最新記事を一覧するコードを書いておけば次のようなページの代用として機能するかもしれません。

• トップページ
• 投稿ページ
• アーカイブページ
• 検索結果ページ

そんなわけで、アーカイブページのarchive.phpやcategory.phpが存在しないテーマはよくあります。それらのレイアウトはindex.phpが代用しているということです。

より実用的なテーマではindex.phpの中で上記のページタイプごとにレイアウトを切り替えているため、複雑なコードが記述されている場合があります。

実用的なテーマでindex.phpの解読が難しく感じるのはそのためです。

そのようなindex.phpを解読するには「if」という構文の理解が必須です。条件に応じて別々のレイアウトを定義したり、表示する文字を切り替えるときに使われます。

よくあるパターンでは、「カテゴリーアーカイブの場合はA、タグページの場合はB」のように条件に応じて別々のレイアウトが定義されています。PHPに慣れていない方は、次のような本を参考に、ifの仕組みから理解しましょう。

当サイトで実施してきたWordPressテーマのシェア調査ですが、100人ほどの方から回答いただき、結果は次のようになりました。

WordPressテーマのシェア調査結果

1位がBizVektorでシェアは60%、少し極端な数字になりましたが、当サイトにはBizVektor関連記事が100本以上あるので、あまり参考にならないかもしれませんね。

2位以下は、Simplicity、TCD、賢威が10%前後のシェアで続きます。

ご回答いただいた方々、ありがとうございました。今後のサイト制作の参考にしてください。

スマホ用のメニューを親子レベルで開閉式にする方法を紹介します。開閉式メニューとは、親項目をタップしたときに子要素が表示されるメニューです。

スマホに便利な開閉式メニュー

WordPressで使用中のテーマによっては必ずしもスマホメニューが開閉式ではなく、タップしたときに全項目が表示される場合があります。以下はBizVektorと賢威 7の例です。

全項目が表示されるスマホメニュー（BizVektorと賢威 7の例）

これでも動作上の問題はありませんが、メニュー項目が膨大になると下に長くなって見づらくなります。その場合、次のように開閉式にした方が閲覧がスムーズです。

開閉式でコンパクトなメニュー

必要に応じて子要素が表示される仕組みです。これなら、最初に表示されるのは数項目なのでユーザーも快適です。

「しまった！開閉式メニューのテーマにすればよかった！」と焦る必要はありません。使用中のテーマのスマホメニューを開閉式にすることもできるからです。

ここでは、jQueryライブラリ「slicknav」を使って、既存のサイトのスマホメニューを開閉式にする方法を紹介します。テーマによってコードが異なるので、ひとまずBizVektorと賢威 7の例で説明しますが、他のテーマでも参考にしてください。

slicknavのインストール

以下のサイトからjQueryライブラリの「slicknav」をダウンロードします。

SlickNav - Responsive Mobile Menu Plugin for jQuery

画面右上の「Download Now」をクリックしてzipファイルをダウンロードします。

slicknavのダウンロード

zipファイルを解凍して、distフォルダを開きます。

distフォルダを開く

このフォルダにある以下の2ファイルをテーマフォルダ（親テーマでも子テーマでも）にコピーします。

• slicknav.css
• jquery.slicknav.min.js

ここでは、次のようにBizVektorの子テーマフォルダ（biz-vektor-child）にコピーしました。

ライブラリをテーマフォルダにコピー

他のテーマでも同じです。使用中のテーマのフォルダにコピーしてください。また、「css」や「js」など種類別のサブフォルダに保存しても大丈夫ですが、その場合、後で紹介するコードのパスを修正してください。

開閉式メニューの表示

開閉式メニューを表示するコードを追加します。いくつかの方法がありますが、たとえば、次のようなコードをfunctions.php（親テーマでも子テーマでも）に追加します。

/* slicknavライブラリの読み込み */
function my_wp_enqueue_scripts() {
    wp_enqueue_style('style-slicknav', get_stylesheet_directory_uri() . '/slicknav.css');
    wp_enqueue_script('script-slicknav', get_stylesheet_directory_uri() . '/jquery.slicknav.min.js');
}

add_action('wp_enqueue_scripts', 'my_wp_enqueue_scripts');

/* 開閉式メニューの表示 */
function my_wp_footer(){
echo <<<EOM
<script>
    jQuery(function(){
        jQuery('#menu-main').slicknav({
            closedSymbol:'&#62;',
            openedSymbol:'&#60;',
            allowParentLinks:true,
            brand:'サンプルPC教室',
            label:'メニュー',
        });
    });
</script>
EOM;
}
add_action('wp_footer', 'my_wp_footer');

詳しい説明は省略しますが、上記のコードは次の2つのブロックで構成されています。

• 前半：ライブラリの読み込み
• 後半：開閉式メニューの表示

修正が必要かもしれない部分

後半の開閉式メニューの表示部分にある14行目に注意してください。

        jQuery('#menu-main').slicknav({

この「#menu-main」は既存のグローバルメニューのulを指定します。使用中のテーマやサイト状況によって異なるため修正が必要です。

グローバルメニューのulはブラウザのインスペクタやソース表示メニューなどで調べることができます。

グローバルメニューのulのIDやクラス名を調べる

この例ではIDが「menu-main」になっているため、上記のコードの14行目に「#menu-main」と指定すれば開閉式メニューが表示されます。同じような要領でコードを修正すれば大丈夫ですが、よくわからない場合は次の情報も参考にしてください。

このグローバルメニューのulはテーマによって構成が異なります。

• BizVektor --- #menu-メニュー名（例：#menu-main）
• 賢威 7 --- #menu

グローバルメニューのメニュー名前

つまり、上記のコードの14行目には、賢威 7では「#menu」と指定すれば大丈夫ですが、BizVektorでは「#menu-main」のような文字を指定することになります。

うまく設定できれば、とりあえず開閉式メニューが表示されるようになります。

開閉式メニューが表示される

色などはスタイルを設定してカスタマイズすることができます。

メニューのオプション設定

また、必須ではありませんが、15行目から19行目まで次のようなオプションを指定しています。

            closedSymbol:'>',
            openedSymbol:'<',
            allowParentLinks:true,
            brand:'サンプルPC教室',
            label:'メニュー',

これらのオプションは次のような内容です。必要に応じて修正または削除してください。

• 15行目（closedSymbol） --- メニューが閉じているときのマーク（例：>）
• 16行目（openedSymbol） --- メニューが開いているときのマーク（例：<）
• 17行目（allowParentLinks） --- 親メニューをクリック可能にするか
• 18行目（brand） --- メニュータイトル（例：サンプルPC教室）
• 19行目（label） --- メニューラベル（例：メニュー）

その他、使用可能なオプションについて詳しくは以下ページの「Available Options」を参考にしてください。

SlickNav

話が長くなるので役立つオプションについて詳しくは説明しませんが、たとえば、任意の場所にメニューを表示できる「appendTo」があります。上記の例では画面の最上部に開閉式メニューを表示していますが、appendToを使うと次のようにロゴの下などに移動できます。

メニューの表示位置は設定可能

開閉式メニューのスタイル設定

続いてメニューのスタイルを設定します。テーマによって記述するCSSは異なる場合があります。以下、BizVektorと賢威 7の例を紹介しますが、他のテーマでも必要に応じて修正してお使いください。

BizVektorの例

次のようなコードを子テーマのstyle.cssまたは「外観」-「CSSカスタマイズ」などのメニューに入力します。

/* 開閉式メニューの制御 */
.slicknav_menu {
    display:none;
}
 
@media screen and (max-width: 769px) {
    #gMenu {
        display:none !important;
    }
     
    .slicknav_menu {
        display:block;
    }
}
 
/* 開閉マークのサイズと余白 */
.slicknav_nav .slicknav_arrow {
    font-size: 1.3em;
    margin: 0 0 0 0.8em;
}
 
/* メニュー2行目の英語表記を消す */
.slicknav_nav li strong + span {
    display: none !important;
}
 
/* 開閉式メニューの色・左寄せ */
.slicknav_menu {
    background: #060;
    text-align: left;
}

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

開閉式メニューのスタイル設定後

スマホとPCでメニュー表示を切り替える場合は2行目から14行目あたりは必須です。それ以降のスタイルは必須ではありません。自由にカスタマイズしてください。

賢威 7の例

次のようなコードを子テーマのstyle.cssまたは親テーマのrwd.cssなどに入力します。

/* 開閉式メニューの制御 */
.slicknav_menu {
    display:none;
}

@media screen and (max-width: 736px) {
    .global-nav {
        display:none !important;
    }

    .slicknav_menu {
        display:block;
    }
}

/* 開閉マークのサイズと余白 */
.slicknav_nav .slicknav_arrow {
    font-size: 1.3em !important;
    margin: 0 0 0 0.8em !important;
}

/* 開閉式メニューの色・左寄せ */
.slicknav_menu {
    background: navy !important;
    text-align: left;
}

/* ロゴ画像の位置調整 */
@media screen and (max-width: 736px) {
    .site-header-conts {
        padding-top: 10px;
    }
}

BizVektorの例と同じように2行目から14行目あたりは必須です。それ以降のスタイルは必須ではありません。自由にカスタマイズしてください。

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

メニューのスタイル設定後（賢威 7）

うまくいかない場合、functions.phpに入力したコードのメニューIDを見直してください。賢威 7の場合、グローバルメニューのulは「#menu」なので、冒頭に紹介したコードの14行目は次のようになります。

        jQuery('#menu').slicknav({

まとめ

スマホメニューに便利な開閉式メニューを表示する手順を簡単に紹介しました。使用中のテーマやサイトの状況によって微妙にコードが異なるため、うまくいかない場合がありますが、どうしても完成できない場合はWordPress個別サポートにご相談ください。

WordPressサイトの中で親子ページを設定することはありますが、親ページを開いたときに子ページが自動で一覧表示されると便利です。

親ページを開いたときに子テーマを自動で一覧表示

Child Pages Shortcodeプラグインを使うと、そのような子ページ一覧を作成することができます。以下、親ページの中で自動で子ページを一覧表示する手順を説明します。

Child Pages Shortcodeプラグインの使い方

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

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

Child Pages Shortcodeプラグインのインストール

親ページにショートコードを入力

「固定ページ」‐「固定ページ一覧」メニューから、親ページにするページの編集画面を開いて、次のショートコードを入力します。

[child_pages]

ここでは「ご利用案内」を親ページにするため、編集画面を開いてショートコードを入力しました。

Child Pages Shortcodeのショートコードを親ページに入力

完了後、「更新」ボタン（または「公開」ボタン）をクリックすると設定完了です。

子ページで親を選ぶ

この親ページの下に子ページをぶら下げます。それには、「固定ページ」‐「固定ページ一覧」メニューで子ページにしたいページの「クイック編集」をクリックします。

子ページにするページの「クイック編集」をクリック

「親」(1)で親ページ（ここでは「ご利用案内」）を選びます。

子ページの「親」を選ぶ

「更新」ボタン(2)をクリックすると設定完了です。

他の子ページも同じように「クイック編集」を使って「親」を選びましょう。

終わったら、もう一度「固定ページ」‐「固定ページ一覧」メニューを開いてみましょう。親ページに子ページをぶら下げたイメージを確認できます。

親ページと子ページを確認

これで、親ページを開くと子ページが自動で一覧表示されるはずです。

親ページを開くと子ページが一覧表示される

このようなレイアウトを親ページに手動で作るのは面倒ですが、親ページと子ページを設定するだけで自動で完成するのがメリットです。

子ページ一覧のカスタマイズ

ショートコードのオプションを設定することで、表示形式をカスタマイズできます。

幅（列数）を設定する

初期設定では2列ごとの表示になっていますが、個々のブロックの幅を設定することで、列数を増やすことができます。次の例では、「width="33%"」を指定しています。1列の幅が全体の33%になるので結果として3列で表示されます。

[child_pages width="33%"]

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

子ページを3列で表示する

画像のサイズを設定する

初期設定ではアイキャッチ画像のサイズはサムネイルになっているので、正方形の画像が表示されるかもしれません。画像サイズはsizeオプションを使って次のようなサイズを指定できます。

• thumbnail（既定） --- サムネイル
• medium --- 中サイズ
• large ---大サイズ
• full --- フルサイズ

以下は中サイズ画像（medium）を表示する例です。

[child_pages size="medium"]

合わせて3列表示にしてみます。

[child_pages size="medium" width="33%"]

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

子ページの画像を中サイズに

任意の親ページの子ページを一覧する

初期設定では現在の親ページの子ページが一覧表示されますが、ページIDを指定して任意の固定ページの子ページを一覧表示することもできます。

[child_pages id="10"]

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

任意の親ページの子ページを一覧する

スマホ対応（マルチカラムの解除）

モバイル端末など幅が狭くなったときにマルチカラムを解除して1列で表示するCSSの例は次のようになります。

/* スマホなどでは1列表示に */
@media (max-width: 480px) {
    .child_pages .child_page {
        float: none;
        width: 100% !important;
    }
}

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

スマホなどでは1列表示に

子ページの表示順を変更する

一覧表示される子ページの表示順を変更するにはIntuitive Custom Post Orderプラグインを使う方法があります。以下、使い方を簡単に説明します。

Intuitive Custom Post Orderプラグインのインストール

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

Intuitive Custom Post Orderプラグインのインストール

固定ページを並べ替え可能に

「設定」‐「並び替え設定」メニューを開いて、「固定ページ」をチェックして「更新」ボタンをクリックします。

固定ページを並べ替え可能に

固定ページを並べ替える

「固定ページ」‐「固定ページ一覧」メニューで並べ替えたい固定ページにマウスオーバーすると、カーソルが十字に変わります。この状態で固定ページを上下にドラッグアンドドロップすると、表示順を変更することができます。

固定ページを並べ替える

たとえば、次のように並べ替えたとします。

固定ページを並べ替えた例

この順番が子ページ一覧にも反映されます。

並べ替えた順番が子ページの表示順にも反映される

まとめ

親ページの中に子ページのリストを手動で作成するのは面倒ですよね。そんなときはChild Pages Shortcodeプラグインを使えば、自動で子ページを一覧表示できます。親ページにはショートコードを1行入力しただけです。その親ページに子ページをぶら下げるだけで、このように子ページ（タイトル・アイキャッチ画像・記事抜粋）を表示できるということです。便利ですよね。

ぜひ、使い方をマスターしましょう。よくわからないときはWordPress個別サポートでサポートします。

念のため確認ですが、BizVektorには親子ページ一覧機能があります。Child Pages Shortcodeプラグインを使わなくても子ページ一覧は表示できます。

WP Mail SMTPプラグインを使うとGmailなどのメールサーバーを使ってWordPressからメールを送信できます。ローカル環境では便利なプラグインですが、「SMTP Error: Could not authenticate.」のようなエラーでメールを送信できない場合があります。以下、対策を紹介します。

メール送信できない原因はGoogleのアカウント設定かも

Googleのアカウント設定が原因で、メールが送信できない場合があります。Googleのアカウント設定画面を開いて確認しましょう。

Googleのアカウント設定画面を開く

「ログインとセキュリティ」をクリックします。

「ログインとセキュリティ」をクリック

画面下の「安全性の低いアプリの許可」が無効になっていると「SMTP Error: Could not authenticate」のようなエラーでメールが送信できないので、クリックして有効にします。

「安全性の低いアプリの許可」を有効にする

「安全性の低いアプリの許可」が有効になります。

「安全性の低いアプリの許可」が有効になる

これで、Gmail経由でメール送信できるようになります。

WP Mail SMTPプラグインの設定例

WP Mail SMTPプラグインを使ってGmailのSMTP経由でメール送信するときの設定例は次のようになります。

WP Mail SMTPの設定例（Gmail経由でメール送信）

• From Email --- 送信元のメールアドレスを入力
• From Name --- 送信者名を入力
• メーラー --- 「WordPressの全てのメールをSMTP経由で送信する。」を選択
• SMTP Host --- 「smtp.gmail.com」と入力
• SMTP Port --- 「465」と入力
• Encryption --- 「SSLを使用する。」を選択
• Authentication --- 「はい: SMTP認証を使用します。」を選択
• Username --- Gmailのメールアドレスを入力
• Password --- メールアドレスのパスワードを入力

GmailのSMTP経由でメール送信するときの参考にしてください。

条件分岐タグis_pageは表示中のページが特定のページかどうか調べる命令ですが、複数ページを指定する場合は注意が必要です。よくある書き間違いの例に注意しながら、is_pageで複数ページを指定するコードを紹介します。

条件分岐タグis_pageの使用例

条件分岐タグis_pageを使うと、特定のページのみで処理を実行することができます。次の例では、特定のページのみで表示されるパーツを作成しています。

<?php if(is_page(8)) : ?>
特定のページだけに表示されるパーツ
<?php endif; ?>

is_page(8)によってページIDが「8」のページのみが表示対象になります。

ページIDではなくスラッグで指定することもできます。

<?php if(is_page('company')) : ?>
特定のページだけに表示されるパーツ
<?php endif; ?>

スラッグが「company」のページのみに、このパーツが表示されます。

スラッグが「company」のページのみに表示されるパーツ

is_pageで複数ページを指定する場合

複数ページを表示対象にしたい場合は、is_pageで複数ページを指定することができます。カンマで区切って指定しますが、次のような記述は間違いです。うまくいかないので注意してください。

<?php if(is_page('company', 'service', 'contact')) : ?>
特定のページだけに表示されるパーツ
<?php endif; ?>

スラッグやページIDを単純にカンマで区切るのではなく「array」という命令で囲む必要があります。これにより、スラッグが「company」「service」「contact」のページが表示対象になります。具体的には次のようなコードになります。

<?php if(is_page(array('company', 'service', 'contact'))) : ?>
特定のページだけに表示されるパーツ
<?php endif; ?>

arrayとは複数の値を指定するときに使うPHPの構文です。わかりづらいかもしれないので、arrayの部分だけ抜き出しておきます。

array('company', 'service', 'contact')

条件分岐タグis_pageで複数のページを指定する場合は、このように記述する必要があります。

ちなみに、個別記事を対象にするis_singleでも同じです。

「指定ページ以外」の書き方

ここまでに紹介したコードは指定したページのみに表示したいパーツでしたが、逆に指定したページ以外にパーツを表示したい場合は、is_pageの前に「!」を付加します。半角なので注意してください。

<?php if(!is_page('company', 'service', 'contact')) : ?>
指定ページ以外に表示されるパーツ
<?php endif; ?>

この例ではスラッグが「company」「service」「contact」のページ以外が表示対象になります。

BizVektorで制作中のWordPressサイトでtitleタグを自由に変更する方法を紹介します。投稿や固定ページの「タイトル」として入力した文字とは別の文字をtitleタグに設定することで、SEO対策などにも役立つでしょう。

ブラウザのタイトルバー（titleタグ）(1)とページのタイトル(2)を違う内容にしたい

タイトルを入力するフィールドの作成

個々の投稿や固定ページの編集画面でタイトルとは別のカスタマイズ用タイトルを入力できるように、カスタムフィールドを作ります。

Advanced Custom Fieldsプラグインのインストール

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

Advanced Custom Fieldsプラグインのインストール

カスタムフィールドの作成

「カスタムフィールド」メニューを開いて「フィールドグループ」‐「新規追加」メニューをクリックします。

「フィールドグループ」‐「新規追加」メニューをクリック

任意のタイトル(1)（例：タイトルカスタマイズ用）を入力して、「フィールドを追加」ボタン(2)をクリックします。

カスタムフィールドを追加

開いた画面で次のように設定します。

• フィールドラベル(1) --- 編集画面に表示する項目名を入力（例：SEOタイトル）
• フィールド名(2) --- 任意のフィールド名を英数字で入力（例：seo_title）
• フィールドタイプ(3) --- 「テキスト」を選択

フィールドラベル・フィールド名・フィールドタイプの設定

画面を下にスクロールして「ルール」を設定します。これは、カスタムフィールドを表示する条件の設定です。タイトルのカスタマイズを投稿のみで行う場合は「投稿タイプ・等しい・post」に設定します。

投稿のみでタイトルのカスタマイズを行う場合

固定ページでもタイトルをカスタマイズする場合は、「Add rule group」をクリックします。

「Add rule group」をクリックして条件を追加

2つ目の条件に「投稿タイプ・等しい・page」を追加します。

「投稿タイプ・等しい・page」を追加

条件は「投稿タイプ・等しい・post」または「投稿タイプ・等しい・page」になります。このカスタムフィールドを投稿または固定ページで使用可能にするということです。うまくいかないときは条件を見直してみましょう。

これで投稿と固定ページのタイトルをカスタマイズできるようになります。画面を上にスクロールして、「公開」ボタンをクリックすると設定完了です。

カスタマイズ用タイトルの入力

投稿または固定ページの編集画面を開いて画面を下にスクロールすると、「SEOタイトル」が入力できるようになっています。試しにtitleタグに表示したい内容を入力してみましょう。

titleタグに設定するタイトルを入力

「更新」ボタンをクリックすると設定完了です。これで、ページのタイトル(1)とは異なるカスタマイズ用のタイトル(2)を入力できました。

タイトル(1)とは別のカスタマイズ用タイトル(2)を入力できた

あとは、カスタマイズ用に入力したタイトル（SEOタイトル）をブラウザのタイトルバー（titleタグ）に反映すれば完了です。

titleタグのカスタマイズ

BizVektorではtitleCustomフックを使うことで、titleタグをカスタマイズすることができます。それには、次のようなコードを子テーマのfunctions.phpなどに入力します。

/* titleタグのカスタマイズ */
function my_titleCustom($value) {
    if (get_field('seo_title')) {
        $value = get_field('seo_title');
    }

    return $value;
}
add_filter('titleCustom', 'my_titleCustom');

「seo_title」は、作成したカスタムフィールドの名前に合わせて変更してください。

これにより、カスタムフィールド「SEOタイトル」に何か入力されている投稿や固定ページでは、その文字がtitleタグ(1)に設定されます。ページのタイトル(2)とは違った内容になります。

ページタイトルとtitleタグが違う内容になる

何も入力されていない場合は通常通り投稿や固定ページのタイトルがtitleタグに反映されます。

カスタマイズ用のタイトルを設定していない場合は変化なし

まとめ

このように、カスタムフィールドとtitleCustomフックを使うと、BizVektorで投稿や固定ページのtitleタグを自由に変更することができます。ページのタイトルとブラウザのタイトルを変えたい方は参考にしてください。

なぜか、自分のWordPressサイトに限って、重要なメニューが表示されないとか、制作を依頼した業者から納品されたサイトのメニューが極端に少ないことがあります。WordPressの入門書で見たメニュー構成と全く異なるため「このサイト、壊れてる？」と不安になるかもしれません。

自分のサイトで表示されないメニューがあるのは、なぜ？

メニューが表示されないのは管理者ではないから

考えられる原因は、ログイン中のユーザーが管理者ではないということです。たとえば、編集者や投稿者の場合、「設定」や「外観」メニューは表示されません。

サイトの管理者や制作者から「このユーザー名とパスワードを使ってログインしてください」と指示されたユーザーの種類が編集者や投稿者だと、上記のような極端に少ないメニュー構成になる場合があります。

これは、管理者以外のユーザーでは使用可能な機能が制限されるためです。管理者以外のユーザーが間違って重要な設定を変更しないための安全策に役立ちます。多くのユーザーでサイトを管理するときは特に便利です。

「誰も管理者のパスワードを知らない」になるかも

このようなユーザー権限の使い分けは便利な反面、「誰も管理者のユーザー名やパスワードがわからない」という状態になる場合があります。

たとえば、WordPressサイトの管理を1人で担当していた社員が退職したり、制作を依頼していた業者と連絡がつかなくなってしまったときです。

重要な設定を変更したいと思っても誰も管理者のパスワードがわからず、WordPressの管理画面から重要な作業が何もできないという状態が続いてしまいます。

データベースの中身をのぞいてみれば解決

そのような場合、WordPressデータベースの中身をのぞいてみれば、管理者のユーザー名などを調べることができます。WordPressのユーザー情報はwp_usersというテーブルに保存されています。

管理者のユーザー名を調べる

パスワードは暗号化されているので元の文字はわかりませんが、変更できるので問題ありません。ただし、パスワードの変更には注意が必要なため、実際に管理者のパスワードを変更する場合は以下のページなどで詳細手順を確認してください。

phpMyAdminでWordPressユーザーのパスワードをリセットする方法

誰が管理者かわからないときは

wp_usersテーブルに多くのユーザーが保存されていて、誰が管理者かわからないときは、wp_usermetaテーブルを見てみましょう。

wp_user_levelフィールドが「10」（権限レベルが10）のユーザーが管理者です。

管理者（権限レベルが10）を調べる

そのユーザーのID（user_id）をメモしてもう一度wp_usersテーブルをチェックしましょう。この例ではユーザーIDが1のユーザーが管理者なので、「wpmaster」が管理者だとわかります。

ユーザーIDが1のユーザーを調べる

見積もりフォームのような計算系のフォームをWordPressサイトに追加したい場合、Jazzy Formsプラグインが役立ちます。診断系のコンテンツにも活用できますが、ここでは選択内容に応じて合計金額が切り替わる見積もりフォームを例に使い方を説明します。

Jazzy Formsで作る見積もりフォームの例

Jazzy Formsのインストール

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

Jazzy Formsプラグインのインストール

見積もりフォームの作成

続いて、見積もりフォームを作成します。いきなり複雑なフォームを作るのも大変なので、ひとまず次のような単純な見積もりフォームとします。パソコン教室の料金見積もりです。

Jazzy Formsで作る見積もりフォームの例

機能は次のようになります。

• 受講するコースを選択する（ラジオボタン：択一式）
• 追加オプションを選択する（チェックボックス）
• それぞれの料金を合計して表示する

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

新規フォームの作成

「Forms」メニューを開き、「New Form Title:」にフォーム名（例：見積もりフォーム）を入力します。

フォーム名の入力

画面下の「Save」ボタンをクリックすると保存されます。

続いて、見積もりフォームに必要な項目を追加します。

コース選択（ラジオボタン）の作成

画面左側のフォーム要素を右側にドラッグアンドドロップしてフォームを組み立てます。ここでは、コースを選ぶためのラジオボタンを使います。

コース選択に使うラジオボタンをドラッグアンドドロップ

開いた画面でタイトル(1)とID(2)を入力します。IDは料金計算に使うので固有の名前をアルファベットで入力しておきましょう。個々の選択肢(3)と料金(4)も入力します。「Add」(5)をクリックすると、新たな選択肢を追加することができます。

ラジオボタンの設定

「Value」の使い道は料金とは限りません。診断系コンテンツでは質問ごとのポイントを設定することもできるでしょう。回答に応じてマイナスの数字も設定できます。あとはアイデア次第です。

診断系コンテンツの選択肢のvalue設定例

オプション選択（チェックボックス）の作成

続いて、オプション選択に使うチェックボックスをドラッグアンドドロップします。

チェックボックスをドラッグアンドドロップ

ラジオボタンと同じようにタイトル(1)とID(2)を入力します。さらに、チェックされたときの料金(3)と、チェックされなかったときの料金(4)を入力します。

チェックボックスの設定

合計金額の出力エリア（Output）の作成

合計金額を表示するため、「Output」をドラッグアンドドロップします。

出力エリアのドラッグアンドドロップ

ここまでと同じようにタイトル(1)とID(2)を入力します。

合計金額の設定

その他の項目は次のように設定することができます。

• Formula --- 計算式を入力します。ここではコース（course）とオプション（pc）の合計です。すべて半角で入力（例：course + pc）しましょう。
• Number format --- 金額の前後に付けるマークです。「Unit before number」には数字の前に付けるマーク（例：￥）、「Unit after number」には後に付けるマーク（例：「円」）を指定します。
• Leading zeros --- 前に付けるゼロの桁数を選択します。
• Decimals --- 小数点以下の桁数を選択します。
• Thousands separator --- 3けた桁ごとの区切り文字を選択します。
• Decimal point --- 小数点以下を区切る文字を選択します。

作成したフォームの表示

作成したフォームを保存して「General」タブからショートコードをコピーします。

見積もりフォームのショートコードをコピー

コピーしたショートコードを任意の固定ページにペーストして見積もりフォームの表示を確認しましょう。

見積もりフォームの表示結果

見積もりフォームのカスタマイズ

あとはJazzy Formsのメニューやフォーム要素を試しながら試行錯誤していただければと思いますが、カスタマイズ例をいくつか紹介します。

小計の表示

コースの隣に「コース料金」を表示するなど、小計を表示したい場合は、ラジオボタンと出力エリアを左右に並べる方法があります。

小計を表示する

それには、左側に表示する項目の「Appearance」を開いて、「Width」で「1/2」を選択します。

左側の項目の幅を1/2に

さらに右側に表示する項目（出力エリア：Output）を追加して、同じように「Width」で「1/2」を選択します。このとき、「Start new row」のチェックは外しましょう。

右側の項目の幅も1/2に

これで、選択肢と小計などの項目を左右に並べて表示することができます。

選択肢に商品画像を表示

商品やサービスの画像を選択するスタイルにしたければ、CSSをカスタマイズする方法があります。

商品やサービスの画像を選択してもらうイメージ

たとえば、次のようにラジオボタンの箇条書きについて:after擬似要素に画像を指定します。

/* コース1の画像 */
#jzzf_2_course li:nth-of-type(1):after {
    content: url(http://…略….png);
}

これで、選択肢のラジオボタンに画像が表示されるようになります。商品画像を選ぶ形にできます。

具体的なCSSは細かすぎるので掲載しませんが、興味がある方はWordPress個別サポートにご相談ください。

さらにCSSをカスタマイズすれば、こんな感じに仕上げることもできます。

見積もりフォームの仕上がり例

デジカメやスマホで撮影した画像をWordPressのメディアライブラリにアップロードすると、画像の向きが変わってしまうことがあります。

アップロードした画像の向きが変わってしまう

これは、撮影した画像に含まれる「向き」などの情報（Exif）がWordPressで反映されないためです。

Image Rotation Repairプラグインで解決

Image Rotation Repairプラグインを使うと、この問題を解決して正しい向きで画像を表示することができます。

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

Image Rotation Repairプラグインのインストール

特別な設定は必要なく、画像をもう一度アップロードすると正しい向きで表示されます。

正しい向きで表示される

Contact Form 7で作成する問い合わせフォームをサイドバーに表示する方法を紹介します。

Contact Form 7の問い合わせフォームをサイドバーに設置

基本的には、ショートコードをウィジェットにコピーペーストするだけです。

問い合わせフォームをサイドバーに設置する

「お問い合わせ」‐「コンタクトフォーム」メニューから問い合わせフォームのショートコードをコピーします。

問い合わせフォームのショートコードをコピー

「外観」-「ウィジェット」メニューでテキストウィジェットを任意のサイドバーに設置します。

テキストウィジェットを任意のサイドバーに設置

「お問い合わせ」‐「コンタクトフォーム」メニューでコピーしたショートコードをペースト(1)して「保存」ボタンをクリックします。タイトル(2)の入力は任意です。

Contact Form 7のショートコードをペースト

これで、サイドバーに問い合わせフォームが表示されます。

フォームの右端が切れてしまう

デザインの微調整

ただし、テーマによってはデザイン調整が必要です。上記の例でも右端が切れているので、はみ出したフォームをサイドバーに収める必要があるでしょう。

対策はいくつかありますが、たとえば、次のようなCSSを使えば、フォーム要素をサイドバーに収めることができます。

/* フォーム要素をサイドバー内に収める */
#sideTower input[type="text"],
#sideTower input[type="email"],
#sideTower input[type="number"],
#sideTower input[type="tel"],
#sideTower textarea {
    width: 95%;
}

フォーム要素の右端まで表示されるようになります。

フォーム要素の右端まで表示される

さくらインターネットでWordPressサイトをSSL化すると、「ページの自動転送設定が正しくありません。このアドレスへのリクエストに対するサーバの自動転送設定がループしています。」のようなエラーメッセージが表示されてうまくいかない場合があります。こんな画面です。

さくらインターネットでWordPressをSSL化したらエラーに

これは「www.example.com」のようなwww付きのドメインと「example.com」のようなwwwなしのドメインを行ったり来たりのリダイレクトが果てしなく行われるためです。

さくらインターネットでwww付きのURLをSSL化すると発生する問題です。
対処するにはwp-config.phpや.htaccessにコードを入力する必要があります。

詳しくは、以下のページをご覧ください。大変参考になります。

さくらSNI 独自SSLでドメイン全体をHTTPS化する