Highlife.Tokyo

  • Affiliate
  • Web
  • Business
  • LifeStyle
  • Other

Speech BubbleのショートコードがTwitterカードでそのまま表示される症状と対応策

      2016/03/20

Speech Bubbleのショートコードがtwitterカードでそのまま表示される症状と対応策

こんにちは!今回はWordPressの吹き出しプラグイン「Speech Bubble」に関連する記事です。

前回の記事から「Speech Bubble」というマンガのような吹き出し(冒頭の↑です)が書けるWordPressのプラグインを使い始めたのですが、Twitterカードにショートコードがそのまま表示されるという不具合が生じてしまいました。

検索したところ具体的な改善策が見つかりませんでしたので記事にしてみたいと思います。同じ症状で悩んでいる誰かのお役に立てたら嬉しいです。

Speech BubbleとTwitterカードについて

Speech BubbleとTwitterカードを初めて知る方のために簡単に説明します。

Speech Bubbleとは

ブログを書いていると会話形式で話を進めたい時ってありますよね。そんな時に便利なのが「Speech Bubble」です。

例えば、「Speech Bubble」を使うと↓こんな事が簡単に出来ちゃいます。

ボク
Speech Bubbleってとっても便利だね!
ネコ
にゃー

吹き出しはLINE風やフェイスブック風に設定出来たり、もちろんキャラ画像も差し替える事ができるので、ブログにもうひと工夫加えたい方にはおすすめのプラグインです。

「Speech Bubble」についての詳しい説明や設定などはこちらの記事が分かりやすかったので参考にしてみて下さい。

Twitterカードとは

TwitterカードとはTwitterのOGP設定の事です。

OGPはページ情報を自動で取得するための機能で、例えばブログ更新時にURLをツイートすると、画像や説明文などを勝手に表示してくれます。

▼いわゆるこれがTwitterカード
Speech BubbleのショートコードがTwitterカードでそのまま表示される症状と対応策

twitterカードの不具合について

不具合の状況

TwitterカードにSpeech Bubble部分が含まれると、Speech Bubbleを呼び出すショートコードがそのまま表示されてしまう。

▼説明文が表示される箇所にショートコードが表示されてしまっている
Speech BubbleのショートコードがTwitterカードでそのまま表示される症状と対応策

理想の形 ) Speech Bubble部分を除いた説明分をTwitterカードに表示させたい

不具合が発生した条件

  1. ワードプレスを利用している
  2. header.phpにtwitterカードを設定している

対応策

twitterカードの修正

header.php(外観 > テーマの編集)に記述してあったTwitterカードの設定を以下のように変更しました。

修正前

修正箇所(19行目)

修正後

修正後、Twitterカードで説明文がキチンと表示されるようになりました。

Speech BubbleのショートコードがTwitterカードでそのまま表示される症状と対応策

もともとstrip_tagsでHTMLのタグが除外されていたので、strip_shortcodesを追記してショートコードも除外しました。

Speech Bubble以外でもショートコードで同じ症状が出てしまっている方は是非試してみて下さいね。

・修正を行う場合は自己責任でお願いします。
・修正前に必ずバックアップを取り、復元できる環境で作業して下さい。

ちなみにTwitterカードの設定はこちらの記事を参考にさせていただきました。

また、Twitterカードのプレビューはこちらでチェックできます(ログインが必要です)

併せてご確認ください。

参考にさせて頂いたサイト

アフィリエイト ブログランキングへ

  こちらの記事も人気です