クラシックエディタのリンク挿入ボタンがうまく機能していない

公開から少し経ち、ブログを投稿する機会が増えるにつれ、気が付き始めたことがある。 クラシックエディタのリンク挿入機能がうまく機能していないという点が、その１つ。

調べてみるとクラシックエディタがうまく機能しなくなるバグはよくあることらしい。

プラグインが原因？

調査結果によると多くはプラグインを起因とするものらしく、特定のプラグインを無効化すれば直ったという声をよく見た。

しかし、こういう事態に備えて、プラグインを最小限に抑えている。 とは言え入れていないわけではないので、ひとつひとつ無効化してテストしてみた。

  1. Classic Editor 無効化したが効果が見られず。 というより、そもそもこのプラグインを無効化したら意味がない。
  2. Highlighting Code Block エンジニアの味方。 ブログでコードを簡単に見せることができるプラグイン。 無効化したが効果が見られず。
  3. XML Sitemaps 動的にサイトマップを作成してくれるプラグイン。 無効化したが効果が見られず。

結果、原因はプラグインではない。

functions.phpにいけない記述があるのかしら。

ということで、functions.phpをまるっと削除してみたところ、正常に稼働した。

細分化してエラーの原因を探すと、どうやらビジュアルエディターにcssを当てる記述が悪さをしているとのこと。

書かれたソースがこちら。

// 投稿ページにスタイルを充てる
function wpdocs_theme_add_editor_styles()
{
add_editor_style('パス');
}
add_action('admin_init', 'wpdocs_theme_add_editor_styles');

もしやエディタを読み込む関数が非推奨になったのかしらなんて思い、

add_editor_style('パス');

シンプルに記述方法を変えてみたが、変わらず正常に稼働しない。

ついに、原因解明

まさかと思いつつ、ということで読み込んでいるcssの内容をまるっと削除すると、正常に稼働。

そこでトライ＆エラーと消しては確認を繰り返すとついに発見。

原因はaタグに指定された「display: contents ;」…!

確かシンプルにリンクにアイコンをつけたくて記述した箇所だが、現状はもう使用してない不要な箇所。

自身が使うエディタのみだから削除を忘れていた。

そして原因はまさかのCSSだった。

無駄な記述は自身の首を絞める

今回の教訓として心に刻むことにした。

せっかくなので、

  1. display: contents ; 理解を深める
  2. 表示のスタイルとエディターのスタイルを一元管理する

上記２つを課題として自らに課すことにした。