↑こういうのを簡単に呼び出せるようにしてほしいと頼まれたのでショートコード実装で対応してみました。
ショートコード自作の手順は
- function.phpにショートコードの追記
- CSSでいい感じに調整
- AddQuickTagでビジュアルエディタから一発で呼び出せるように
といった感じですが、具体的に実装してみた例を備忘録として記録しておきます。
目次
WordPressで簡単に商品レビューを挿入する自作ショートコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function reviewFunc($atts, $text) { extract(shortcode_atts(array( 'work' => '職種', 'age' => 30, 'gender' => '男', 'income' => 500, 'star' => '★', 'evaluate' => '4', ), $atts)); return '<div class="comment">' '<div class="comment-heading"><span style="font-size: 10pt;"><img class="comment-image" src="https://画像URL" width="150" height="150" /></span> <div class="comment-username"><strong>'; $work . $age . $gender . $income .' 万円</strong></div>' '<div class="comment-highlight"><strong>評価：<span style="color: #ff9900;">'; $star. $evaluate.'</span></strong></div></div>' '<div class="comment-body"><span style="font-size: 10pt;"><span style="font-size: 10pt;">' . $content . '</span></div></div>'; } add_shortcode('review', 'reviewFunc'); |
使うショートコードは以下の通り
[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ってことで。
コメントを残す