シェアする

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

シェアする


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

スドー
なにこれ

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

アリイズミ
ほーん

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

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

スポンサーリンク




吹き出しを作った経緯

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

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

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

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

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

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

作成したプログラム

function.phpに追加をします。

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

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

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

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

使い方

初期設定

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

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

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

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

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

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


オーカワ
leftが左側

オーカワ
rightが右側

基本の使い方

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

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


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


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


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


スドー
へけっ

応用の使い方

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


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


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

ボタン化すると便利

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

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

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

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

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

wordpressの投稿編集画面でテキストエディタを使っている場合、入力補助ボタン(quicktag:クイックタグ)をうまく使うと作業効率が大幅UPします。ボタンの追加や削除で投稿画面をカスタマイズする手順をまとめました。

感想

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

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


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

スドー
できた

オサダ
できたよ

アリイズミ
できたぜ

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

参考

吹き出しプラグイン Speech Bubble を使っていましたが、画像を大きくできず挫折。@web_shufuです。いっそのこと、プラグインを卒業して自前CSSでセリフを吹き出しで描くことにしました。まずまず上首尾だと思うので、ノウハウをシェアしたいと思います。

The following two tabs change content below.

オーカワ

ロボット勉強中の大学4年生!!いつもはTwitterにいるよ。フォローちてね♪
詳しいプロフィールは こちらから
スポンサーリンク







シェアする

フォローする