「BizVektorの3PRエリアの数を増やしたい」の解決策
BizVektorのトップページで使える「3PRエリア」は自由な内容を3つの列に並べられるので非常に便利です。便利すぎて、「3PRエリアをもっと増やせませんか?」というご相談を多くいただきます。たとえば、4PRエリアや6PRエリアを作りたい方が多いようです。
3PRエリア自体を拡張するのはPHPの修正が必要で非常に危険なのでおすすめしませんが、プラグインを使えば、同じようなことができます。仕上がりイメージは次のようになります。
![6PRエリアの完成イメージ](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-19-21-07.jpg)
プラグインを使えば安全に、4PRや6PR、8PRなど好きな数だけ、好きな内容のブロックを作成できます。以下、手順を紹介します。
この記事の内容
プラグインのインストール
当サイトでも何度か紹介した非常に役立つプラグイン「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」を「プラグイン」‐「新規追加」メニューからインストール、有効化します。
![Page Builder by SiteOriginプラグインのインストール](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-16-55-46.jpg)
![SiteOrigin Widgets Bundleプラグインのインストール](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-16-57-51.jpg)
トップページにLayout builderを追加
続いて、トップページに6PRエリアや4PRエリアを作成します。そのため、「外観」-「ウィジェット」メニューを開いて画面左側の「Layout builder」ウィジェットを「コンテンツエリア(トップページ)」に追加します。
![Layout Builderをコンテンツエリア(トップページ)に追加](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-14-31.jpg)
3列や4列のレイアウトを作成するため、「Open Builder」をクリックしてLayout builderを開きます。
![Layout Builderを開く](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-17-36.jpg)
オリジナル3PRエリアの作成
3PRエリアを作る「行」(row)を追加
まずは、1行を追加して3列や4列のブロックを作成します。それがオリジナルの3PRエリアや4PRエリアになります。そのため、「Add Row」または「Row」をクリックします。
![「Add Row」または「Row」をクリック](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-19-48.jpg)
作成する列の数(Set row layout)から、4PRを作成する場合は「4」を選択し、3PRや6PR(3PR×2)を作成する場合は「3」を選択します。
![追加する列数を選択](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-21-21.jpg)
列のイメージを確認して「Insert」をクリックします。
![列を追加](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-23-59.jpg)
Page Builder画面に3列または4列(または2列など)が追加されます。6PRエリアや4PRエリアを作っていくベースのイメージはできたでしょうか。
![空の3列が追加される](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-25-18.jpg)
3PRエリアの最初の列の作成
1列ずつ作成していけば、この行に3PRエリアや4PRエリアが完成します。列にパーツを追加するため、左端の列(1)をクリックして「Add Widget」(2)を選択します。
![左端の列にパーツを追加](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-28-40.jpg)
選択可能なウィジェットの中から「SiteOrigin Editor」を選択します。
![「SiteOrigin Editor」を選択](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-31-24.jpg)
Page Builder画面に「SiteOrigin Editor」が追加されます。
![「SiteOrigin Editor」が追加される](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-33-07.jpg)
列の内容を編集するため、「SiteOrigin Editor」にマウスオーバーして「Edit」をクリックします。
![「SiteOrigin Editor」の「Edit」をクリック](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-35-31.jpg)
見慣れたビジュアルエディタ(またはテキストエディタ)が開きます。列ブロックの内容をエディタで編集できるということです。
![ビジュアルエディタ(またはテキストエディタ)が開く](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-37-21.jpg)
あとは、エディタを使って6PRエリアや4PRエリアの1項目をレイアウトすれば良いです。いつも投稿や固定ページの本文をレイアウトしている作業と同じです。ここでは表示確認のつもりで「見出し+画像」(+説明文)など、テスト用のレイアウト(1)を簡単に作成しておきましょう。完成後、右下の「Done」ボタン(2)をクリックしてPage Builder画面に戻ります。
![1列分のレイアウトを作成](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-40-56.jpg)
パーツをコピーしてたたき台レイアウトを作成
まずは1列のレイアウトができました。作成したパーツをコピーして3列や4列のたたき台を作りましょう。それには、パーツにマウスオーバーして「Duplicate」をクリックします。
![パーツのコピー](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-43-59.jpg)
コピーしたパーツをドラッグアンドドロップして隣の列に移動します。
![パーツを隣の列に移動](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-47-15.jpg)
同じように右端の列にもパーツを埋めるため、「Duplicate」をクリックします。
![もう一度パーツをコピー](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-49-12.jpg)
コピーしたパーツを右端の列にドラッグアンドドロップします。
![コピーしたパーツを右端の列に移動](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-50-50.jpg)
3列や4列がパーツで埋まって、6PRエリアや4PRエリアのたたき台が完成しつつあります。
![3列がパーツで埋まる](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-52-33.jpg)
3PRエリアの行をコピーして6PRに
4PRを作成する場合は、この1行の4列をパーツで埋めれば完成です。3列×2行の6PRの場合は、行もコピーして2行にしましょう。それには、列のツールメニューにマウスオーバーして「Duplicate Row」をクリックします。
![行をコピー](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-55-24.jpg)
3PRエリアの列がコピーされて「6PR」になります。完成イメージが見えてきたでしょうか。4列×2行の8PRでも同じ考え方です。
![6PRのベースが完成](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-56-24.jpg)
画面右下の「Done」をクリックして「外観」-「ウィジェット」メニューに戻ります。
![作業を完了して「外観」-「ウィジェット」メニューに戻る](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-57-43.jpg)
Layout Builderの「保存」をクリックします。
![Layout Builderの保存](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-17-59-16.jpg)
サイトを確認すると、トップページに6PRのたたき台が表示されているはずです。
![6PRエリアのたたき台が表示される](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-18-00-41.jpg)
6PRエリアの完成
あとは、個々のパーツを1つずつ編集していけば、4PRや6PR、8PRエリアの完成です。
![完成した6PRエリア](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-28-19-21-07.jpg)
行や列の削除
個別の列のレイアウトを変更したい場合は、行や個別のパーツを削除して1列のレイアウトからやり直した方が早いです。
行の削除
行を削除するには、行ツールメニューの「Delete Row」をクリックします。
![行の削除](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-29-10-28-22.jpg)
確認メッセージ「Are you sure?」(本当に削除して良いですか?)をクリックすると、その行が削除されます。
![行の削除確認](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-29-10-29-22.jpg)
個別パーツの削除
個別パーツを削除するには、パーツにマウスオーバーして「Delete」をクリックします。確認メッセージは表示されないのでお試し厳禁です。
![個別パーツの削除](http://www.nishi2002.com/wp-content/uploads/2016/04/2016-04-29-10-31-05.jpg)
まとめ
このように、Page Builder by SiteOriginプラグインとSiteOrigin Widgets Bundleプラグインを使うと、BizVektorにオリジナルの4PRエリアや6PRエリアを作成することができます。もちろん、BizVektor以外のテーマでも大丈夫です。あとは、あなたのアイデア次第です。いろいろと試行錯誤してみましょう。
作業がうまくいかないときはWordPress個別サポートにご相談ください。