クラシックエディタでリンク挿入ボタンがうまく機能していなかったので、原因を調査した

公開から1週間ほどたって、いろいろと微調整、機能追加をしている。その段階でクラシックエディタの不具合について気が付いたので原因究明と解決をしてみた。

目次

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

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

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

プラグインが原因?

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

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

  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. 表示のスタイルとエディターのスタイルを一元管理する

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

次に読むおすすめ記事

カスタムフィールドで改行が適用されないので、無理やり改行できるようにした。

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です