目次

1.E004のアップデートを行いました

以前に何件か「カテゴリー分けをしてランキングボックスを設置したい」というお話や、
「下層ページにランキングボックスを設置したい」というお話があったので、
それに対応するためにE004をアップデートしました。

今から書く方法で個別ページにランキングボックスを設置するにはE004のアップデートが必要です。
2015年の11月のバージョンアップ以降にご購入 or アップデートを行ってくださった方は大丈夫です。
※アップデートする前に、アップデート内容や注意事項を読んでからアップデートを行ってください。

この方法で個別ページにランキングボックスを設置できるのは、今のところE004だけになっております。
E002のランキングタイプは、ランキング部分がウィジェット化されていないので、できません。

2.個別ページにウィジェットを設置できる無料プラグイン

WEB制作などを行ってる人であれば、個別ページにランキングボックスをHTMLで設置したり、
PHPで読み込んだりすることはそれほど難しくないのですが、そういった知識がない方にとってはむずかしい・・・

かといって、弊社でお客様一人一人にHTMLやPHP、CSSやレスポンシブ化する方法などなどの
マンツーマン指導などは時間的にもいろいろとむずかしい。
なので、簡単にできる「何か」はないかと考えていたところ、良さそうなプラグインがあったので、
そのプラグインを使って個別ページにランキングボックスを設置する方法を考えました。

そんなようなプラグインがあったのはなんとなく知っていたのですが、使ったこともないし、
むしろ「これそんなに活用できるものなの？」って思っていたのですが、活用できそうなので、それを使ってみたいと思います。

そのプラグインというのが「Page Builder by SiteOrigin」というプラグインです。無料プラグインです。
このプラグインはけっこう前からあったものなので、知っている方はすでにどこかで使ったことがあるのではないでしょうか？
「Page Builder by SiteOrigin」を使うと、投稿や個別ページにもウィジェットを設置することができるようになります。
※E004で動作確認済みです

3.プラグインを使って個別ページにウィジェットを設置しよう

まずはこの「Page Builder by SiteOrigin」をインストールの後、有効化を行ってください。

プラグインの有効化を行うと、「投稿」や「固定ページ」の記事入力画面に新しいものが追加されます。
記事本文入力エリアの上にタブが増えてるのがわかりますか？

このタブをクリックすると・・・

上記のような画面になるので「+ Add Widget」をクリックします。
するとウィジェットが追加できるようになるんです。

先ほどのボタンをクリックすると、上記のような画面が現れ、
個別ページメインエリアに設置したいウィジェットを選択することができます。
※ 選択して設置するウィジェットは、メインエリアのサイズにあうウィジェット、
もしくはメインエリアでも対応できるウィジェッを選択してください。
E004のメインエリア用に作られたウィジェットや、
wordpressデフォルトにあるメインエリアでもOKのウィジェット
（テキストウィジェットやカテゴリーウィジェットなど）を設置してください。

例えば「ランキング」ウィジェットを設置すると、

次は上記のようになります。
設置したウィジェットの枠のようなものが表示されるので、枠の中の右上にでてくる「Edit」をクリック。

（※ 枠にマウスポインタを重ねると、「Edit」等の文字が出現します）

先ほどの「ランキング一覧」と書かれたウィジェットの枠の「Edit」をクリックすると、
上記のようなウィジェットの設定画面が開くので、
ここで設置する内容を設定してください。

ここでカテゴリーで分けたランキング一覧ウィジェットを設置すると、
そのカテゴリー別の商品などのランキングを作ることができます。

「Add Row」という機能もあるのですが、

これをクリックすると下記のようになります。

これはウィジェットをそのエリアに横幅50%で設置できるものなのですが、
ランキングウィジェットはメインエリア横幅100%で作ってあるので、50%設置はできません。

この機能を使うときは、50%のエリアに対応できるウィジェットを設置してください。
例えば、wordpressデフォルトにあるウィジェット（「テキスト」「カテゴリー」「最近の投稿」など）

4.E004とプラグインを使用した例

E004の固定ページにこのプラグインを使ってウィジェットを数種類設置してみました。

上記のように、「テキスト」「ランキング一覧」「商品一覧」の3つのウィジェットを設置しました。
結果は下記です。

1番目に「テキスト」ウィジェットを使って、
少しだけページの紹介文を入れました。

2番目は「ランキング一覧」ウィジェットを設置。
このページはリキッドファンデーションを
紹介するページにしてるので、
「ランキング」ウィジェットでは、
あらかじめ設定してある「リキッド」という
カテゴリーを指定しています。

※ カテゴリーを指定してランキングを設置する場合は、
ランキングアイコンを表示しないようにしてください。

アイコンを表示してもテーマが壊れることはありませんが、
カテゴリー別だときちんとアイコンが並びません。

詳細は こちら で確認してください。

3番目は、「商品一覧」ウィジェットです。
このウィジェットでも「リキッド」のカテゴリーを選択して、
「リキッド」に属する商品だけを表示させています。

▼「ランキング」や「商品一覧」ウィジェットの見出しについて

「テキスト」ウィジェットでは、ウィジェットのタイトルを入力しなくても問題ないのですが、
他のウィジェットだと見出しのリードが入ってしまう仕様になっています。

なので、「ランキング」などのウィジェットを設置するとき、タイトルを入力しないと下記のようになってしまします。

赤丸で囲った部分、見にくいのですが、
未入力の場合はリードの土台が表示されてしまいますので、ちゃんとタイトルを入力しましょう。
※ wordpressデフォルトのウィジェット（「カテゴリー」「最近の投稿」など）は、
未入力でも簡単なタイトルが入るようになっています。

このプラグイン（Page Builder by SiteOrigin）で個別ページにウィジェットを設置する場合は、
ウィジェットのタイトル部分がH3になる仕様になっているみたいです。

5.このプラグインを使ったページの編集時の注意点

「Page Builder by SiteOrigin」プラグインを使って作ったページを編集する際の注意点です。

このプラグインを使ってウィジェットを設置した後に、
再びテキストモードやビジュアルモードに戻して編集することができるのですが、
それはやめたほうがいいです。

一応は、「Switch to Editor」をクリックすると再びテキストモードやビジュアルモードに戻れる。

ビジュアルエディタに戻りますか？みたいなメッセージがポップアップででるので、「OK」をクリックすると・・・

上記のように、テキストモードやビジュアルモードに戻るのですが、「更新」ボタンを押してページを表示すると・・・

見事にレイアウトが崩れています・・・・・

これはたぶん、Wordpressデフォルトで備わってる機能が原因だと思います。
テキストモードでコードを見てみると、自分で入れたつもりがないコードが挿入されていたり、
せっかく入力したコードが削除されているときありますよね？勝手にPタグがはいっていたり・・・

みなさん、このデフォルト機能にイラついて、「コードの自動編集機能を停止する方法」などを
ネットで見つけて試した方もチラホラいるのではないかなって思います。
私も試したのですが、あまりうまくいきませんでした。

あとひとつ、こうなる原因として考えられるのは、
テキストモードやビジュアルモードに戻る際に、ウィジェットをHTML化してテキスト入力部分に反映させているので、
ウィジェットパーツとして機能できなくなる（？）ということが原因かもしれません。

なので、
「Page Builder by SiteOrigin」プラグインを使ってウィジェットを設置した場合は、
テキストモードやビジュアルモードに戻って編集をしないようにしましょう。
テキストを追加したい場合などは、「テキスト」ウィジェットなどで対応してください。

6.カテゴリー別でランキングの順位を変更する方法

今まで、カテゴリーわけをせず、「ランキング」というカスタム投稿タイプに投稿したひとつひとつを、
ランキングウィジェットで並べていたと思います。

そのときのランキング内の順位の並べ替えは管理画面の投稿一覧をドラック＆ドロップで並び替えをしていたと思います。
カテゴリー別の順位を変更するときも、ドラック＆ドロップで並び替えをするのですが、
いろいろなカテゴリーが混ざってると並び替えがしづらい・・・

このくらいの数ならまだいいのですが、大量な記事とたくさんのカテゴリーが混ざっていると
どうしていいかわからなくなります。。。

そんなときは、アップデートで追加したカテゴリーでの絞込みを使ってください。

絞込を行いたいカテゴリー名を指定して、「絞り込み検索」をクリック。

すると、指定したカテゴリーに属した記事だけが表示されます。

上記のように、カテゴリーで絞り込んでから順位をドラック＆ドロップで変更すれば、
そのカテゴリーだけの順番を入れ替えることができます。

「TOPページは「ランキング」というカスタム投稿タイプに投稿した商品などの全体でのランキングを設置したいが、
下層ページには、カテゴリー別のランキングを設置したい。」

上記のような場合には、まず管理画面で絞込検索をぜず、すべての記事を表示して、
全体での順位を決めてください。
そのあとにカテゴリーで絞り込んでから、そのカテゴリーの商品等の順位を決める、などするとやりやすいと思います。

7.できないこと

このページに書いた方法でできないこと。

できません。このページに書いてある方法はカテゴリーで分けてランキングウィジェットを設置する方法です。
テーマにカスタム投稿タイプを増やし、その中にいろいろな項目を記述する機能を追加するには、
PHPなどに詳しくないとできません。
弊社でその方法をサポートすることはできませんので、あらかじめご了承ください。
サポートするとなると、かなり膨大な内容になってしまいますのでサポート対象外になります。