思いますね。
プラグイン使えばできるって聞きました。
プラグイン使えばできるって聞きました。
もちろんプラグインでお手軽にできちゃったりするみたいだけど
今回はプラグインなしでやっちゃいましょう
そのプラグインがずっと使えるなんて保証はねぇ！
今回はプラグインなしでやっちゃいましょう
そのプラグインがずっと使えるなんて保証はねぇ！
でも難しいんでしょう？
だからここでコピペで済むように
紹介するんじゃい！
紹介するんじゃい！
ではやってみよう
まずは function.php に以下のコードをコピペしよう。
//**************************************************************
// チャット風の会話形式ショートコード設定
//**************************************************************
function balloon_shortcode($atts, $content = null) {
extract(shortcode_atts(array(
'commenter' => 'staff', //ショートコードを省略した場合の値
'guest_image' => '',
'commenter_image' => 'staff', //ショートコードを省略した場合の値
'name' => 'スタッフ', //ショートコードを省略した場合の値
'align' => 'end' //ショートコードを省略した場合の値
), $atts));
switch ($commenter) {
case 'guest':
$commenter_image = get_template_directory_uri() . '/assets/image/' . $guest_image . '.png'; //guest_imageアイコンの場所
break;
case 'staff':
$commenter_image = get_template_directory_uri() . '/assets/image/' . $commenter_image . '.png'; //commenter_imageアイコンの場所
break;
default:
$commenter_image = get_template_directory_uri() . '/assets/image/xxxxxx.png'; //デフォルト（指定しなかった場合）アイコンの場所
break;
}
return '<div class="comment-' . $commenter . ' balloon-' . $align . ' text-' . $align . ' d-flex mt-5">' .
'<div class="balloon-icon">' .
'<img src="' . $commenter_image . '" alt="' . $name . '">' .
'<span>' . $name . '</span>' .
'</div>' .
'<div class="comment-balloon"><div class="comment-text-' . $align . ' ">' . $content . '</div></div>' .
'</div>';
}
add_shortcode('chat', 'balloon_shortcode');変数は好きに変えてもらってOK。気にならないならそのままどうぞ！
次に switch( ) 部分のアイコンのディレクトリ名は適宣合わせること。
これでショートコードの設定はOK。
※ただし今回はBootstrapを使ってレイアウトを左右寄せにしてるから
使ってない人はそのままコピペじゃなく少しコードを変えないと上手く表示されないよ。
見た目を整える
次はcssで吹き出しの見た目を整えよう
/* ### チャット風
--------------------------------------------*/
.comment-guest span {
color: #696969;
} //吹き出しテキストの色（guest）
.comment-staff span {
color: #6FBA2C;
} //吹き出しテキストの色（staff）
.balloon-end {
flex-direction: row-reverse;
}
.balloon-icon {
width: 90px;
text-align: center;
line-height: 1rem;
img {
width: 90px;
height: auto;
} //アイコンサイズ
span {
top: 0;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
} //アイコン下の表示名
}
//guest吹き出し
.comment-guest .comment-balloon {
margin: 0 3rem;
position: relative;
.comment-text-start {
font-size: 16px;
background: rgb(215, 215, 215); //吹き出しの色
padding: 1rem 1.2rem;
border-radius: 8px;
&:before {
position: absolute;
content: "";
top: 50%;
left: -15px;
margin-top: -25px;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: transparent rgb(215, 215, 215) transparent transparent; //吹き出しのくちばし色
z-index: 1;
}
}
.comment-text-end {
font-size: 16px;
background: rgb(215, 215, 215); //吹き出しの色
padding: 1rem 1.2rem;
border-radius: 8px;
&::after {
position: absolute;
content: "";
top: 50%;
right: -15px;
margin-top: -25px;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent rgb(215, 215, 215); //吹き出しのくちばし色
z-index: 1;
}
}
}
//staff吹き出し
.comment-staff .comment-balloon {
margin: 0 3rem;
position: relative;
.comment-text-start {
font-size: 16px;
background: rgb(250, 237, 210); //吹き出しの色
padding: 1rem 1.2rem;
border-radius: 8px;
&:before {
position: absolute;
content: "";
top: 50%;
left: -15px;
margin-top: -25px;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: transparent rgb(250, 237, 210) transparent transparent; //吹き出しのくちばし色
z-index: 1;
}
}
.comment-text-end {
font-size: 16px;
background: rgb(250, 237, 210); //吹き出しの色
padding: 1rem 1.2rem;
border-radius: 8px;
&::after {
position: absolute;
content: "";
top: 50%;
right: -15px;
margin-top: -25px;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent rgb(250, 237, 210); //吹き出しのくちばし色
z-index: 1;
}
}
}これをベースに色は好きに変えてくれ！
ちょこちょこいじればなんか色々自由にできるぞ（自己責任で）
あとはアイコンを必要な分だけ準備すればできあがりだ！
ショートコードはどう書けばよろし？
スタッフ側（省略した場合）
右寄せ
スタッフここにテキスト
[chat commenter="staff"]ここにテキスト[/chat]左寄せ
スタッフここにテキスト
[chat commenter="staff" align="start"]ここにテキスト[/chat]ゲスト側
右寄せ
ゲストここにテキスト
[chat commenter="guest" guest_image="登録アイコンのファイル名（拡張子なし）" name="表示させたい名前" align="end"]ここにテキスト[/chat]左寄せ
ゲストここにテキスト
[chat commenter="guest" guest_image="登録アイコンのファイル名（拡張子なし）" name="表示させたい名前" align="start"]ここにテキスト[/chat]こんな感じでショートコードを書いてくれればいけるぞ。
あとは好きにおもしろ記事書いてくれよな！
こんな風に吹き出しでしゃべってるような感じにしたいと
思わないかい？