リンク入力時、ブログカードに変換させず『URL』をそのまま表示させる方法｜WordPress Cocoon Tips

WordPress（ワードプレス）の無料テーマ「Cocoon」を使われている方は多いかと思います。
私もとてもありがたく様々な機能を使用させていただいていますが、機能の中に記事内にURLを入力するとブログカード化するという便利な機能が備わっています。

URLを入力するだけで、ブログカードにしてくれるという素晴らしい機能なのですが、
時としてブログカードではなく「URL文字列」としてURLを表示したいということがあります。

今回は、URLを入力や貼り付けしてもブログカード化されず、生のURLのまま表示させる方法についてご紹介します。

【環境】
WordPressバージョン：5.8.1
テーマ名：Cocoon
バージョン：2.3.6.2
エディタ：Gutenberg

ブログカード表示設定

Cocoonには、段落内にURLを貼り付けると、http～から始まるURL文字列のみはURLとして認識し、ブログカードとして表示する機能が備わっています。

これは通常、

設定画面：WordPress管理画面 > Cocoon 設定 > ブログカード　にて、

上記の2か所の「ブログカード表示を有効にする」がチェックされていれば有効です。

この状態で、新しい段落内にhttp～で始まるURL文字列のみを入力すると、システム側がURLだと認識して自動的にブログカードに変換して表示してくれるはずです。

ブログカード化の仕組み

先程記述した中で「新しい段落内にhttp～で始まるURL文字列のみ…」と記述しましたが、

ブログカードの生成条件は、
・新しい段落の先頭にhttpから始まるURLがあること
・文章内はURL以外のテキストがないこと

おそらく上記の様かと思われますので、これに当てはまらないようにすればブログカード化してくれないことになります。

ということは、つまり、段落の先頭ではなく文章中にhttp～から始まる文字列があったり、URLの後ろに日本語などの文章が続く場合（英語の場合URLと認識される可能性があります）ブログカードへの変換はしてくれないことになります。

確かめてみます。

解決案

解決案1：先頭か後ろにURLには使われない文字（記号）を入れる

[文字列] + URL
URL + [文字列]
⇒いずれもブログカードにはならず、URL文字列として表示されます

スペースなどを空けずに後ろに続けて英数字などを入れる場合は、URLとして認識されてしまうので注意してください。

解決案2：URLの前に半角スペースを1つ入れる

[半角スペース] + URL
⇒ブログカードにはならず、URL文字列として表示されます

超裏技ですが、文章内の先頭の半角スペースは除去するというプログラムになっているようなので、URLの先頭に半角スペースを入れると、ユーザーエンド側ページでは半角スペースは省いて表示してくれるようです。が、管理画面では先頭に半角スペースがあることで文章として認識しており、ブログカード化されないという仕組み。

※注意：こちらはプログラムのすきを突いたハックですので、アップデートなどで修正される可能性がありますから、使用には注意してください。

解決案3：URLの後に半角（全角）スペースを1つ入れる

URL + [半角（全角）スペース]
⇒ブログカードにはならず、URL文字列として表示されます

半角スペース、もしくは全角スペースが入っていればURLではなく文章として認識してくれる。なおかつ、ユーザーエンド画面ではURLの後に文字列が入っていたとしても、見た目は何も入っていないように見える。

※注意：こちらもプログラムのすきを突いたハックであることと、最終行のスペースを取り除くことはプログラムを作る際によく行うことですので、プログラムアップデートなどで修正される可能性がありますから、使用には注意してください。

さいごに

結果的に、見た目もよく、今後のプログラムアップデートの影響を受けず安心に使えるのは、URLの先頭に「>」や「・」の記号を書くことではないでしょうか。

それ以外でも、「●」や「⇒」やURLには使用されない文字（記号）を置くことが、見た目もよくブログカード化もされない最適な回避策かと思います。

また、今回はブログカード化させない方法を追ってきましたが、逆に言えばブログカード化したいけれどどうもできないという方は、おそらく「空白スペース」などの不必要なものが入っており、リンクが『URL』ではなく『文章』として認識されている可能性があります。

その場合は、URLの前後に不要な文字が無いことを確認すると良いかと思います。貼り付け（ペースト）を「Ctrl + V」やマウスのペーストで行う場合、コピー元の書式がくっついたままの状態で貼り付けている可能性もありますので、プレーンテキストで貼り付け「Ctrl + Shift + V」などを行ってみてください。

ここまで、ありがとうございました。