会話のときのふきだしをプラグインなしで実装したいと思って、色々試したのでメモ。
初めは「Speech Bubble」というプラグインをダウンロードしてみたのですが、なぜか機能しませんでした。
テーマ内の何がしかのコードに競合してしまっているのかと思うのですが、プラグインの最終更新も3年前とかなので、それならCSSで実装してしまおう……ということで。
参考にしたページはこちら。
コード丸コピさせていただきました。ありがとうございます。
グレーベースでシャドウも何もかかっていない、シンプルな吹き出しにしたかったので、スタイルもすべてそのまま。
つまづいた点や、自分なりに少しアレンジを加えたところがあるので、そこを書きのこしておきます。
「AddQuicktag」に登録するときにコードをカスタマイズ
「AddQuicktag」は、コードを登録すれば、記事を書くときのエディタの上にある「b」「link」とかの並びにボタンがつくれて、それを押すだけでコードを呼び出せるという優れもの。これ超便利。
「コピペとクリックで簡単！WordPressでLINE風の吹き出し会話を作る方法」には、「画像のURLを記載」など書いてあるのですが、私の場合はキャラクターが二人いて、使う画像も決まっていたので、「AddQuicktag」に登録するときに画像URLも書いた状態で登録しました。
スタイルシート（CSS）へコードを追加。「追加CSS」or「子テーマ」どちらにすべき？
テーマのスタイルをいじるときに必ず出てくる「追加CSS」or「子テーマ」問題。
- 追加CSS：WordPress管理画面の外観＞カスタマイズで出てくるメニューのところにあるやつ
- 子テーマ：カスタマイズ用のテーマ。自作もできるが、子テーマが用意されているものもある
最初は、追加CSSで対応しようと思いましたが、
「Using width/height with border can sometimes make elements larger than you expect.」
というエラーメッセージが出てしまい、無視して保存しようとしても保存できず……。
おそらく、エラーがあると保存できない仕様になっているんでしょう。
エラーメッセージをググったところ、無料テーマ「Simplisity」のフォーラムで似たような事象についての質問がありました。
上記ページ内に
＞おそらく、W3CのCSSバリデーション結果が適用されているのだと思います。
とあり、おそらく今回のケースも同じ理由なのかな、と。なので無視しても問題はないのですが、いかんせん「追加CSS」では保存ができないので、子テーマを使うことにしました。
今回ふきだしを実装したサイトでは、「LION MEDIA」の無料テーマを使っているのですが、ダウンロードページに子テーマがあったのでそちらをダウンロード。
そして、外観＞テーマの「新規追加」＞テーマのアップロードの「ファイルを選択」で、子テーマのファイルを選択してインストール。
※子テーマは、Zipファイルのままアップロードします。解凍してしまうと、アップロードできません。
で、子テーマの設定をもろもろした上で「有効化」し、外観＞テーマの編集の「スタイルシート（style.css）」のところに、「参考ページ：コピペとクリックで簡単！WordPressでLINE風の吹き出し会話を作る方法」に記載があるスタイルを記述していきます。
「header.php」にスクリプトを記述したいけど、子テーマにファイルがないときの追加方法
画像下の空白を削除するためのスクリプトを「header.php」に書きたかったのですが、「LION MEDIA」の子テーマには、「header.php」が含まれていませんでした。
で、参考にしたのがこちらのページ。
FTPソフトを使って、親テーマのファイルをコピーして、子テーマにつっこめばいいだけ。簡単！
FTPソフト初めて使う方は、「使ってるサーバーの名前＋FTP」とかでググると多分サーバーのヘルプページが出てきて、設定方法とか載ってるので、そちら参考にするとよいかもです。
ロリポップの場合はこんな感じ。FTPソフトごとにマニュアルあります。
↓
各種FTPソフトの設定方法
ちなみに私が使ってるのは「Cyberduck」。
Macのdockに置いたときにあひるがかわいいから、という理由だけで使ってるので、ほかと比べて使いやすいかどうかはよくわかりません。
空白削除のスクリプト書いたけどなぜか空白があったので、CSSを修正
chromeのブラウザでしか確認してませんが、空白がなぜかある……。
スクリプトいじれないため、子テーマCSSに書いてあったスタイルを修正しました。
chromeのディベロッパーツールで見たときに、.voice-img-description（丸い画像の下のテキストについているクラス名）のpadding: 5px 0 0;のチェックをはずしたら空白がなくなったので、子テーマCSSの該当コードをコメントアウト/* */しときました。（上の画像はpaddingを無くした状態のキャプチャ）
と、こんな感じの流れで吹き出しを実装しました。
Speech Bubble以外のふきだしプラグイン、けっこう探したんですが見つからなくて。
でもプラグインはあまり入れすぎると他と干渉してしまったりするので、入れずに解決できてよかった！
参考にさせていただいたページの著者のみなさま、ありがとうございました！
実装おめでとうございます！参考にしていただきありがとうござました。
コメントありがとうございます！
とても参考になりました、ありがとうございました。