吹き出しだけCocoonから乗り換える

WordPress

Cocoonの吹き出しが…何か…あの…ツライ

画像をWordPressのメディア管理でUPしなきゃだし
何か見た目アレだし…それはCSSを編集するとか方法はあるけど、めんどくさい。
でも結局作っちゃった

なので、手っ取り早く

別にプラグインを入れて使うことに

そこでオススメするプラグインを紹介いたし候。

試してみたよ

 

LIQUID SPEECH BALLOON

有名どころ。説明を見なくても使える。

LIQUID SPEECH BALLOON (吹き出し)
ブロックエディターで会話形式 (吹き出し) のデザインを作成。

画像はURL指定

使うタイミングでたくさん増やせる。
SNSアイコンとか使えるので非常に便利。

吹き出し使えるのは『ビジュアルリッチエディター』に【ほぼ】限定

基本的に標準の装備の『ビジュアルエディタ』じゃないと吹き出し追加できない

クラシックエディタプラグイン👇️使っていると吹き出しとかブロックなんて出ない

Classic Editor
Enables the previous "classic" editor and the old-style Edit Post screen with TinyMCE, Meta Boxes, etc. Supports all plu...

どころかユーザ設定で変えたクラシックエディタ(?)でも使えない

管理画面の『ユーザー』⇨『プロフィール』で
『ビジュアルリッチエディターを使用しない』にすると
『クラシックエディタ(?)』になる👇️

こうやって変える

「裏で何してる?」てくらい凄く重くて全然クラシックエディタではない。
ソース打てるだけの「HTMLコードエディター」ですな。

クラシックエディタでも使う方法はある

  1. 一度ビジュアルリッチエディタにする
  2. ブロックで吹き出しを追加した記事を書く
  3. クラシックに戻す

そうすると吹き出し追加された状態の記事になって使える訳ですよ。

ただ、変換後の記事はpタグだらけのクラシックエディタ(?)で書いた記事の扱いになる。
だからその後、クラシックエディタで編集するのであっても、pタグやbrタグなどの改行も自力で書かないといけない。
多分コード消せば戻ると思うけども。

『Notice: Undefined index: pagenow』エラー対応

Notice: Undefined index: pagenow in /wp-content/plugins/liquid-speech-balloon/inc/api.php on line 16

原因は『$GLOBALS['pagenow']』の空チェックしていないこと。

    if ( is_admin() && ( in_array($GLOBALS['pagenow'], ['index.php', 'themes.php', 'plugins.php', 'options-general.php']) || (isset($_GET['page']) && strpos($_GET['page'], 'liquid') !== false) ) ) {

    if ( is_admin() && ( 
        (!empty($GLOBALS['pagenow']) && in_array($GLOBALS['pagenow'], ['index.php', 'themes.php', 'plugins.php', 'options-general.php']))
        || (isset($_GET['page']) && strpos($_GET['page'], 'liquid') !== false) 
        ) ) {

にしたら消える。
『Notice』なので、無視しても良いっちゃあ良い。

Word Balloon

使える吹き出しの種類が多い。

Word Balloon
ブロックエディタ(Gutenberg)とクラシックエディタ両対応。かんたんに吹き出しを表示して会話している様に見せる。

アイコンはメディアファイルにUP

メディアファイルでUPすることでデータベースに登録した画像しか使えない。

ブロックエディタ(Gutenberg)とクラシックエディタ両対応

テキストエディタで指定できるのはありがたい。

WordPress✕SQLite環境では使えない

なので未テスト故に画像がないのです。
ごめんね。

自作したシンプルフキダシ(※プラグインではない)

アイコン

ぶっちゃけ複雑なDIV構造を吹き出しのために置くのもな…

って感じておりまして…結局作っちゃった!
※プラグインじゃないよ

CSSだけで作るシンプルな吹き出しバルーン|WordPress対応
吹き出しの構造をシンプルにしたい吹き出しのプラグイン使ってて思ったけど、HTML構造が複雑じゃない?正直もっとシンプルに使いたいそれなーというわけで作った。プラグインじゃないから、WordPressでもアメブロでも使えるよ

アイコンはURL指定

いちいちUPしたくないし、誰かを呼んだならSNSのアイコンとか取り込みたいよね

クラシックエディタでも使えるシンプルタグ

⇩シンプルにこれだけ

<div class="speech-balloon left">
  <img alt="アイコン" src="画像のURL">
  <div class="text">フキダシにだしたい内容</div>
</div>

フキダシ種類は少ない

後々、追加していければと。
色の種類は、簡単に増やせます。
増やし方も書いておいたよ⇩

CSSだけで作るシンプルな吹き出しバルーン|WordPress対応
吹き出しの構造をシンプルにしたい吹き出しのプラグイン使ってて思ったけど、HTML構造が複雑じゃない?正直もっとシンプルに使いたいそれなーというわけで作った。プラグインじゃないから、WordPressでもアメブロでも使えるよ

コメント

タイトルとURLをコピーしました