イーグリット

EAGLET「むつかしいことはわからんよ、どうせあんたもわかっとらんやろ。」 アリス・イン・ワンダーランド

スポンサードリンク

【EAGLET-FAQ】WordPressトラブル解決記録!ブログカード(記事中のサムネイルURL)が消えてクリックできない!

物忘れが多いタチなので備忘録を作ることにした。
自分用ではあるが、お役立ていただけたら嬉しく思います。

【Q】記事中に貼り付けたブログカードが消えた!!!

URLを編集中の記事にコピペするだけで、サムネイル画像と説明が付いたカード形式で表示する「ブログカード」。新機能だ。

カードにして貼り付けられるのは、WordPressの記事に限定されるという制約はある。

だけとカッコいいし、はてなブログみたいだし、ペーストするだけで完了という超便利機能なので気に入っている。こんなやつだ。

中野優理香(JAXA)の経歴や彼氏はいる?出身高校や大学は慶應?

 

しかし最近、編集画面ではちゃんとブログカードとして表示されているのに、公開すると、ただのURL文字になってしまうトラブルが発生して悩んでいた。

こんなふうになっちゃうのだ(スマホの例)。

リンクも体裁も消えたブログカード

リンクも体裁も消えたブログカード

 

カードが消えるだけならまだいい。リンクごとなくなくなってしまうので、せっかく誘導したいと思っていた動線がブチ切れになってしまう。

詳細は以下に述べるが、原因と対策がわかったので、報告します。

 

【A】TinyMCE Advancedの設定変更と問題記事を更新しなおせ!

WordPressプラグインの「TinyMCE  Advanced」という高機能版テキストエディタを使っていて、「代替リンクダイアログ」のチェックがオンになっていたら、ほぼ原因はそれだ!

早速修正しましょう。

(1) TinyMCE Advanced の設定変更

最初に、プラグイン「TinyMCE Advanced」の設定変更をする。

WordPressの「設定」メニューから「TinyMCE Advanced」を選択して「エディター設定」という画面を表示する。
なお、本稿執筆時点のWordPressは「4.5.3-ja」、TinyMCE Advancedは「4.3.10.1」だった。

「エディター設定」の画面を開くと、下の方の「高度なオプション」という囲いの中に「段落タグの保持」というチェックがあるはずだ。このチェックを外して、【変更を保存】ボタンを押して確定しよう。

 

「段落タグの保持」チェックを外す

「段落タグの保持」チェックを外す

 

(2) リンクが消えてしまった記事を公開し直す

次は記事ごとに作業を行なう。ブログカードのリンクがなくなってしまった問題の記事だけでいいので、公開しなおすのだ。

WordPressの「投稿」メニューから「投稿一覧」を選択して問題が発生した投稿を「編集」する。

上記(1)の設定変更の後なら、ブログカードは編集画面がもう一度表示されているはずだ。

そのまま【公開】ボタンを押せば修正完了だ。念のためサイトを確認しよう。

【公開】ボタンを押して公開する

【公開】ボタンを押して公開する

 

【発生条件】WordPress4.5.3 + TinyMCE Advanced + 段落タグの保持

 

ここから先は、興味のある方だけが読んでください。

今回のブログカードがリンクごと消えてしまう問題が発生する条件は、以下のとおりである。

  • WordPressが4.5.3-ja
  • TiniMCE Advancedプラグインをインストール
  • TiniMCE Advancedの「段落タグの保持」設定を有効(チェックがオン)

ブログカードは、WordPressは4.5系の新機能であり、4.5.3だけに限定したものではあるまい。
利用しているプロバイダは、WordPressを自動で新しくしてくれるので、こだわっていても始まらない。

 

【解説】不要な<p>タグが残って公開時にブログカードが抜け落ちる

「段落タグの保持」とは何か?以下に説明を引用する。

保存時に <p> と <br /> タグを削除せず、テキストエディタ上に表示する テキストエディターの自動補完を停止し、より高度なコーディングが可能です。
しかしながら、まれに予想外の振る舞いをすることがあるため、常用前に十分テストを行ってください。
なおテキストエディター内での改行は出力に含まれます。このため空の行や HTML タグ内の改行、複数の <br /> タグは使用しないでください。

重要なところを赤文字にしておいた。

平たく言うとこうだ。
「空欄の段落や改行が続いた部分は、ブラウザによっては意図しない表示結果になるので、エディターがHTMLを補完する標準機能をカットする」

HTMLやJavascriptにこだわる人や、大量の広告タグを本文中に挿入する人は、この機能をオフにしたほうが無難かもしれない。

ということで、ブロガーたちの間では、「TinyMCE Advanced」プラグインのオススメと同時に、「段落タグの保持」をチェックする指導がなされている場合が多い。

実際のところはどうなんだろう。HTMLをしっかり確認すれば、さほど問題はないはず。

僕も、そう思ってチェックしていたが、リンクが消える原因になっては、来訪者をナビゲーションできず、本末転倒だ。

 

では、なぜブログカードが公開時に表示されなくなるのか。

原因のタイミングは、WordPress標準の「保存時の<p>タグの削除」にあると見ていいだろう。

WordPressの内部を見ることはできないが、外部動作により窺い知る限り、以下のメカニズムだと思われる。

  1. ブログカード化したいURL文字列を、編集中の空欄の画面にペーストする
    例:https://eaglet.com/470.html
  2. ブログ編集機能により単独の段落として<p>タグが付与される
    例:<p>https://eaglet.com/470.html</p>
  3. 下書きとして保存・プレビュー・公開のボタンを押す
    本来はURL前後の<p>タグに対して、ブログボックス機能が動作して<div class="blogbox">が適用される
  4. 今回の問題は「保存時の<p>タグの削除」のチェックにより、置き換える<p>タグの目印が狂ってしまったのではないかと思われる。
    試しに問題が起こったHTMLソースを見ると「<p>https://eaglet.com/470.html</p>」のままだ。

【再発防止策】ピンバックの通知を活用する

自分の過去記事をリンクすると、WordPressからピンバック通知が来ることはご存知だろうか。

これを活用して、確実にリンクされたことを確認するといい。

もちろん公開後に実機で表示確認はするとしてだ。

1つのチェックよりも、2つのチェックははるかに有効なのだから。

 

スポンサードリンク

-技術, 話題