コピペで吹き出し、アイコン付きの吹き出しをショートコードで作ってみた

2017年9月17日

色々なブログやサイトを見ていると吹き出しを使って会話しているように見せてるページがあります。
やりたいと思っても、自分が使ってるテーマにはそんな機能付いてない。

そんな方々のために、アイコン付きで表示できる吹き出しをコピペで使えるショートコードを作りました。

アツシ
吹き出し作ってみた

目次

ショートコードを使えるようにfunctions.phpにコピペする

下記のコードをコピーしてfunctions.phpに貼り付けます。

PHP

  1. function fedw_balloon_area( $atts, $content = null) {
  2. extract(shortcode_atts(array(
  3. 'position' => 'l', 'url' => '', 'type' => 'basic', 'name' => ''
  4. ), $atts));
  5. return '
  6. <div class="fedw-balloonArea fedw-balloonArea--'.$position.' fedw-balloonArea--type-'.$type.'">
  7. <div class="fedw-balloonArea__icon">
  8. <img class="fedw-balloonArea__icon__img" src="'.$url.'" width="60" height="60">
  9. <div class="fedw-balloonArea__icon__name"> '.$name.' </div>
  10. </div>
  11. <div class="fedw-balloonArea__balloon">
  12. <div class="fedw-balloonArea__balloonInner"> '.$content.' </div>
  13. </div>
  14. </div>';
  15. }
  16. add_shortcode('the_balloon', 'fedw_balloon_area');

functions.phpに貼り付ける前にバックアップをとりましょう。

CSSをstyle.cssにコピペする

下記CSSをstyle.cssに貼り付けます。

CSS

  1. /* #edw-balloonArea */
  2. .fedw-balloonArea {
  3. display: -webkit-flex;
  4. display: flex;
  5. -wkit-align-items: flex-start;
  6. align-items: flex-start;
  7. }
  8. .fedw-balloonArea.fedw-balloonArea--r {
  9. -webkit-flex-direction: row-reverse;
  10. flex-direction: row-reverse;
  11. }
  12. .fedw-balloonArea__icon {
  13. width: 80px;
  14. box-sizing: border-box;
  15. padding: 0 5px;
  16. }
  17. .fedw-balloonArea__icon__img {
  18. width: 60px;
  19. border-radius: 50%;
  20. border: 5px solid;
  21. background-color: #f5f5f5;
  22. }
  23. .fedw-balloonArea__icon__name {
  24. text-align: center;
  25. }
  26. .fedw-balloonArea__balloon {
  27. width: calc(100% - 80px);
  28. box-sizing: border-box;
  29. padding: 10px;
  30. }
  31. .fedw-balloonArea__balloonInner {
  32. border-radius: 10px;
  33. padding: 1em;
  34. position: relative;
  35. }
  36. .fedw-balloonArea__balloonInner::after {
  37. content: '';
  38. display: block;
  39. position: absolute;
  40. top: 1em;
  41. border-top: 10px solid transparent;
  42. border-bottom: 10px solid transparent;
  43. }
  44. .fedw-balloonArea--r .fedw-balloonArea__balloonInner::after { right: -10px;}
  45. .fedw-balloonArea--l .fedw-balloonArea__balloonInner::after { left: -10px;}
  46. /* type別スタイル */
  47. /* basic */
  48. .fedw-balloonArea--type-basic .fedw-balloonArea__icon__img {
  49. border-color: #ccc; /* 画像の枠色 */
  50. }
  51. .fedw-balloonArea--type-basic .fedw-balloonArea__balloonInner {
  52. background-color: #ddd; /* 吹き出し背景色 */
  53. color: #555; /* 吹き出し文字色 */
  54. }
  55. .fedw-balloonArea--type-basic.fedw-balloonArea--r .fedw-balloonArea__balloonInner::after {
  56. border-left: 10px solid #ddd; /* 吹き出し背景色（アイコン右矢印） */
  57. }
  58. .fedw-balloonArea--type-basic.fedw-balloonArea--l .fedw-balloonArea__balloonInner::after {
  59. border-right: 10px solid #ddd; /* 吹き出し背景色（アイコン左矢印） */
  60. }
  61. /* red */
  62. .fedw-balloonArea--type-red .fedw-balloonArea__icon__img {
  63. border-color: red; /* 画像の枠色 */
  64. }
  65. .fedw-balloonArea--type-red .fedw-balloonArea__balloonInner {
  66. background-color: red; /* 吹き出し背景色 */
  67. color: #fff; /* 吹き出し文字色 */
  68. }
  69. .fedw-balloonArea--type-red.fedw-balloonArea--r .fedw-balloonArea__balloonInner::after {
  70. border-left: 10px solid red; /* 吹き出し背景色（アイコン右矢印） */
  71. }
  72. .fedw-balloonArea--type-red.fedw-balloonArea--l .fedw-balloonArea__balloonInner::after {
  73. border-right: 10px solid red; /* 吹き出し背景色（アイコン左矢印） */
  74. }

クイックタグにショートコードを追加する

下記のコードをコピーしてfunctions.phpに貼り付けます。

PHP

  1. //クイックタグ追加
  2. function fedw_add_quicktag(){
  3. ?>
  4. <script>
  5. QTags.addButton('the_balloon','the_balloon','[the_balloon position="l" type="basic" name="[表示名]" url="[アイコン画像url]"][/the_balloon]','');
  6. </script>
  7. <?php
  8. }
  9. add_action('admin_print_footer_scripts','fedw_add_quicktag');

CSSを編集する

ショートコード内のtypeごとにCSSを作成することで何パターンも用意することができます。
青色の部分を作成するtype名に置き換える
オレンジの部分を任意のカラーコードに変更する

CSS

  1. /* basic */
  2. .fedw-balloonArea--type-basic .fedw-balloonArea__icon__img {
  3. border-color: #ccc; /* 画像の枠色 */
  4. }
  5. .fedw-balloonArea--type-basic .fedw-balloonArea__balloonInner {
  6. background-color: #ddd; /* 吹き出し背景色 */
  7. color: #555; /* 吹き出し文字色 */
  8. }
  9. .fedw-balloonArea--type-basic.fedw-balloonArea--r .fedw-balloonArea__balloonInner::after {
  10. border-left: 10px solid #ddd; /* 吹き出し背景色（アイコン右矢印） */
  11. }
  12. .fedw-balloonArea--type-basic.fedw-balloonArea--l .fedw-balloonArea__balloonInner::after {
  13. border-right: 10px solid #ddd; /* 吹き出し背景色（アイコン左矢印） */
  14. }

まとめ

すべての手順が完了したら、投稿編集画面（テキスト）より「the_balloon」のボタンを押すことでショートコードを呼び出せます。
呼び出したら
position="l or r"
type="basic or red or CSSで用意したタイプ名"
name="表示したい名前"
url="アイコン画像のurl"
それぞれを編集して使用してください。

アツシ
よい吹き出しライフを！ではでは～

WordPressCSS3, PHP, WordPress, コーディング, 便利ツール, 効率化

Posted by アツシオクムラ