WordPressでショートコードを自作して商品レビューを簡単に作れるようにしてみた

↑こういうのを簡単に呼び出せるようにしてほしいと頼まれたのでショートコード実装で対応してみました。

ショートコード自作の手順は

  1. function.phpにショートコードの追記
  2. CSSでいい感じに調整
  3. AddQuickTagでビジュアルエディタから一発で呼び出せるように

といった感じですが、具体的に実装してみた例を備忘録として記録しておきます。

WordPressで簡単に商品レビューを挿入する自作ショートコード

 

使うショートコードは以下の通り

[review work=’職種・’ age=’◯歳・’ gender=’性別・’ income=’年収◯万円’ star=’★★★★★’ evaluate=’5.0′]ここにテキスト[/review]

ショートコード内のクォーテーションで囲まれた部分を編集するだけで完成します。レビューはテキスト部分に好きなように打ち込めます。

実際に同じようなのを作りたいという人は、html部分や引数(クォーテーションや$の部分)を用途に合せて変えれば使えると思います。

というか、引数で呼びだしたい項目の数がが一緒なら、ショートコード部分に代入する文字変えるだけでも使えますね()

あとはこのショートコードをAddQuickTagに追加するだけで、ビジュアルエディタから簡単に呼び出せます。

レビュー用ショートコードのCSSと実際のレイアウト

参考までにCSSと実際の見え方も載せておきます。

PCビュー

スマホビュー

レビュー用自作ショートコードまとめ

みんながみんなhtmlわかるならhtmlをクイックタグで呼び出して適当にいじってもらえばいいのですが、世の中にはテキストエディタでhtmlを見ただけで蕁麻疹が出る(自分もそうか)人も多いのでショートコードで対応してみました。

今回は男性女性それぞれ違うデザインがいいとのことだったので、画像とクラス違いで2パターン作っています。

本当は1つのショートコードで入力した性別によって出し分けできればいいんだけど、そんな難しいことはデキナカッタヨ…

まぁあれです、done is better than perfectってことで。

 

 

コメントを残す

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