WordPress『ストーク』でランキング機能をカスタマイズ

私はWordPressのテーマ『STORK』を使用しています。

とっても使い勝手がよくてオシャレなSTORKなのですが、このテーマには商品を紹介するランキング機能が実装されていません。

そこで中に入っているデフォルトの機能だけで商品を紹介するページを作ることができたので、その方法をご紹介します。


使用するショートコード

まず使用するショートコードを説明します。

まず使用するショートコードは画像などを2カラムで表示できる便利なショートコードです。

このような感じで表示されるやつですね。

この化粧水は天然成分を配合したオーガニックの化粧水で、50年以上も前から女性に愛され続けています。

白色のクリームで天然成分が配合されていて、保湿力が抜群です。人気女優もこちらのクリームをよく使われています。

注意点

スマートフォンで見られている方は1カラムで表示されています。

ちなみにこちらのショートコードは、

[colwrap] [col2](画像)ここに内容を[/col2] [col2](画像)ここに内容を[/col2] [/colwrap]

と記載すれば使用することができます。

その他に使用するショートコード

そのほかに使用するショートコードは、

このようなボタンを使うショートコード

[btn class="rich_pink"]ここにリンクを貼り付け[/btn]

というボタンや、

[btn class="rich_yellow"]ここにリンクを貼り付け[/btn]

というボタンを使用します。

それでは早速商品紹介の見本をお見せします。

このような感じで商品を紹介することができます。

第1位 オーガニック化粧水

この化粧水は天然成分を配合したオーガニックの化粧水で、50年以上も前から女性に愛され続けています。天然成分だから肌にも安心で、赤ちゃんの敏感肌にも使えるくらい安全な化粧水です。お風呂上がりの顔に塗るだけで、朝起きたときのスベスベ、モチモチの肌を約束します。
価格 3,000円 ポイント オーガニック
満足度 ★★★★★ 仕上がり スベスベ、モチモチ

 

第2位 保湿クリーム

白色のクリームで天然成分が配合されていて、保湿力が抜群です。あの人気女優もこちらのクリームをよく使われていて寝る前に肌になじませるだけで、抜群の保水力をお約束いたします。化粧水と合わせて使用していただくことでさらなる保湿をお約束します。

価格 2,800円 ポイント オーガニック
満足度 ★★★★☆ 仕上がり スベスベ、モチモチ

 

このような感じで紹介することができます。いかがでしょうか結構サマになっていませんか(*´∀`*)

こちらのショートコードは、

h2~4でタイトルを書く
[colwrap]
[col2]画像(『配置なし』もしくは『中央揃え』)[/col2]
[col2]説明文[/col2]
[/colwrap]
表(テーブルを作る)
[colwrap]
[col2][btn class="rich_pink"]この化粧品の詳細を見てみる(リンク)[/btn][/col2]
[col2][btn class="rich_yellow"]ご購入はこちらのページから(リンク)[/btn][/col2]
[/colwrap]

を書けば作れます。

出来上がった最後に、テーブルの1×1のマスを1つ出して、その中に出来上がった商品紹介を切り取って貼り付けると四角の線で囲まれます。

ここで注意するポイントとしては

ポイント

・画像は必ず『配置なし』から『中央揃え』で貼り付ける
(スマホ表示のときに画像が自動で小さくなってしまうため)

・ボタンのショートコードはリンクを貼り付けないと表示されない

・『ビジュアル』ではなく『テキスト』に貼り付ける

という点をご注意ください。

ちなみに表にある星マークについては、『ほし』という字を変換して出て来る図形の『★』と『☆』の文字色を黄色に変えただけです。

是非やってみてください(*´ω`*)

配置を変えればこんな感じにもできます。

ご紹介した他にも配置を変えたり他のショートコードを使うとこのようなこともできます。

ボタンを右側に上下2つ並べるパターン

第1位 オーガニック化粧水

この化粧水は天然成分を配合したオーガニックの化粧水で、50年以上も前から女性に愛され続けています。天然成分だから肌にも安心で、赤ちゃんの敏感肌にも使えるくらい安全な化粧水です。お風呂上がりの顔に塗るだけで、朝起きたときのスベスベ、モチモチの肌を約束します。

価格 3,000円 ポイント オーガニック
満足度 ★★★★★ 仕上がり スベスベ、モチモチ

こちらのショートコードはこのようになります。

h2~4タグでタイトルを作成
[colwrap]
[col2]画像[/col2]
[col2][btn class="rich_pink"]この化粧品の詳細を見てみる(リンク)[/btn]
[btn class="rich_yellow"]ご購入はこちらのページから(リンク)[/btn]
[/col2]
[/colwrap]
説明文章
表(テーブルを作る)

さらに別バージョン

その他にもストークのボックスも配置することができます。

青色ボックスを配置したパターン

第1位 オーガニック化粧水

ポイント

・保湿力抜群

・天然成分配合

・新生児から使える

・大容量

この化粧水は天然成分を配合したオーガニックの化粧水で、50年以上も前から女性に愛され続けています。天然成分だから肌にも安心で、赤ちゃんの敏感肌にも使えるくらい安全な化粧水です。お風呂上がりの顔に塗るだけで、朝起きたときのスベスベ、モチモチの肌を約束します。

価格 3,000円 ポイント オーガニック
満足度 ★★★★★ 仕上がり スベスベ、モチモチ

ショートコードはこちら

h2~h4タグでタイトルをつける
[colwrap]
[col2]画像[/col2]
[col2][box class="blue_box" title="ここにボックスタイトル"]ここにボックス内容[/box][/col2]
[/colwrap]
[colwrap] [col2][btn class="rich_pink"]この化粧品の詳細を見てみる(リンク)[/btn][/col2][col2][btn class="rich_yellow"]ご購入はこちらのページから(リンク)[/btn][/col2] [/colwrap]
説明文章
表(テーブルを作る)

おわりに

いかがだったでしょうか。ショートコードを貼り付けるだけで結構簡単にできなのではないでしょうか?今回ご紹介した方法意外にも、配置を変えるだけで色々とできますので、オリジナルのボタン配置などやってみてください。

私も使っているこのWordPressのテーマ『ストーク』とっても使いやすくてオススメです。


最後までお読みくださりありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です