2018/04/01 ブログのテーマをcocoonに変更しました。
スポンサーリンク

【プラグインなし】 WordPress 吹き出しが激しく面白すぎる件

スポンサーリンク

 

 


オーカワ
今日はいつもと違った感じでお送りします。

スドー
なにこれ

オサダ
オーカワがまた変なの作ったらしい

アリイズミ
ほーん

オーカワ
いつものごとく冷たいなぁ(全部僕ですが)

てなわけで、吹き出しを作ってみましたー

吹き出しを作った経緯

このブログはメンバーが4人いて、メンバーとのやり取りも吹き出しがあると便利かと。

使う使わないにしろ、作っておいて損はないと思いまして。

吹き出しには有名なプラグイン、Speech Bubbleがありますが、プラグインはあまり使いたくないというか、コンパス(当ブログ)専用の吹き出しを作りたかったんです。

プラグイン(他)とここが違う!!

実際プラグインを使ったことないのでわかりませんが...いろいろ紹介記事は目を通しました。

  • 原則画像いらない(投稿者のアバターを使います。)
    • てかなんで、アバター使わないんだろうか
  • カスタマイズし放題(一番のメリット)

作成したプログラム

function.phpに追加をします。

//吹き出し
function bubble_left_img($atts, $content = null ) 
{
//初期設定
extract(shortcode_atts(array(
'id' =>'3',
'align' =>'left',
'imgurl' =>'none',
'speaker' =>'none'
), $atts));
//違う画像を表示したかったら
if ($imgurl == 'none'){
$img =  get_avatar_url($id);
}
else {
$img = $imgurl;
}
//メンバー以外の名前を表示したかったら
if($speaker == 'none'){
$author = get_the_author_meta('nickname', $id);
}
else {
$author = $speaker;
}
//無理やりhtmlを生成
$bubble_html='<div class="balloon-box balloon-'.$align.' clrfix">
<div class="balloon-icon"><img src="'. $img .'"><br><span>'. $author .'</span></div>
<div class="balloon-serif"><div class="balloon-content">'. $content .'</div></div>
</div>';
return $bubble_html;
}
add_shortcode('bubble', 'bubble_left_img');

cssはこちらのサイトに紹介されてあるものを使わせていただきました。

当サイトでは少しパラメータをいじっています。(トーク幅など)

いつもお世話になっています。

チャット風の会話形式コンテンツをプラグインなしで実装する方法
WordPressの記事中でチャットのような会話形式のコンテンツを、プラグインを使わずに実装する方法です。functions.phpに記述することで、サクッとショートコードで記事に挿入することができます。

使い方

初期設定

function.phpにコードを貼り付けたら、6行目、7行目の初期設定をします。

このプログラムは投稿者idを指定して、投稿者名と投稿者アバターを表示します。

ですから何も設定しなかった場合の設定が必要です。なので表示したいidを設定してください。

コンパスの場合、何も設定をしなかったら、僕が表示されるようにしました。作成者僕だしね。つまり僕のidが3番だとバレる訳だ

 

alignはコメント欄の向きになります。

特に気にならなければ、いじらなくて大丈夫です。デフォルトは左側ですね。


オーカワ
leftが左側

オーカワ
rightが右側

基本の使い方

吹き出しの挿入にはショートコードを使います。

ビジュアルエディタ、テキストエディタどちらでも大丈夫です。


オーカワ
基本の使い方になります。

オーカワ
基本の使い方になります。

オーカワ
右側指定も簡単ね

オーカワ
右側指定も簡単ね

オサダ
おい!勝手に俺様を使うんじゃねぇ

オサダ
おい!勝手に俺様を使うんじゃねぇ

スドー
へけっ

スドー
へけっ

応用の使い方

あまり使わないと思ったので、応用という形で...


うんこ大魔王
投稿者名も変えれるよーん

うんこ大魔王
投稿者名も変えれるよーん

うんこ大魔王
画像だって(横長の画像だとこうなる)

うんこ大魔王
画像だって(横長の画像だとこうなる)

ボタン化すると便利

ショートコード名はすぐに忘れてしまうので、コンパスではボタン化をしてます。

ボタン化にはAddQuicktagというプラグインを使用しました。

コンパスではこのような設定で登録しています。ボタン化してしまえば楽ですね。

ボタンを押すだけで、ショートコードが挿入されて便利です。

 

AddQuicktagを気になった方は以下のリンクをおすすめします。(外部リンクです。)

http://webshufu.com/edit-quicktags/

感想

ブログの幅が広がりましたねー

皆様も是非吹き出しを作って見てください!!


オーカワ
お前ら理解出来たか~?

スドー
できた

オサダ
できたよ

アリイズミ
できたぜ

オーカワ
是非自分の記事でも使ってください

参考

http://webshufu.com/draw-bubbles-without-plugins-in-wordpress/

 

The following two tabs change content below.

オーカワ

GCPばっか触ってるにゃーんエンジニア こちらのブログでも活躍中

コメント