wp-editor-toolsがうまく展開できない場合の対処

ブログ記事を書く場合に、seo対策として外部リンク/内部リンクを利用します。この場合、見かけを整えるためにCSSを書くことになりますが、Wordpress4.9.9では、リンクURLを書くだけで自動的に整形してくれます。wp-editor-toolsというIDをもつリンクは自動的に展開されます。なぜか自動で展開されない場合の対処方法です。

 

リンクを自動的に展開する様子(バナー画像)

リンクが自動的に展開されます

Initializing...

wp-editor-toolsは自動でリンクを展開してくれる

ある日、ビジュアルエディタで外部リンクを書いたら、しばらく経って上記のように自動的にかっこよく展開された。どういう仕組みが少し調べてみたら、wordpressのコアプログラムであるload-styles.phpでこの仕組みを実装しているようです。キーとなるのは、リンクがwp-content-editor-toolsまたはwp-editor-toolsというID属性が付与されています。このwp-editor-toolsというID属性をload-styles.phpが検知して、Javascriptで自動展開しているようです。

リンク先のイメージを取得し、タイトルと概要を一気に持ってきてくれて、上記のようなイメージに仕上げてくれます。

テキストエディタ画面でリンクは貼り付けてもリンクは展開されません。ビジュアルエディタ上でリンクをコピー&ペーストで貼り付けると自動的にリンクが展開されます。

自動展開してくれない場合

この展開機能は、wqospress4.9.9ですがもっと前のバージョンから実装されているのかもしれない。これを使えると結構作業をスピードアップできるのでぜひ使ってみたい!

ですが、なぜかブラウザで表示してみると、blockquoteで囲んだような表示しか出ない。面倒くさくてそのままにしておこうとも思ったのですが、ちょっと調べたら簡単に解決したのがこの記事の内容。
たいてこういったもので動作しない場合は、ブラウザが単に対応していないということも多いですが、だいたいこういう仕掛けはJavascriptで関係していて、Javascriptの実行時にエラーが発生していないか気になる。実際に確かめたところ案の定あるプラグインがエラーを吐きだしていた。

そのプラグインは、Autoptimizeプラグイン

Autoptimizeプラグインは、複数のCSSやJavaスクリプトファイルを単一のファイルにまとめ、不要な改行やスペースを取り除いて圧縮してくれるプラグインです。ブログを高速化するためにもちいる有効なプラグインのひとつです。

Autoptimizeプラグインの詳細は、

Autoptimize
Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.

addEventListenerエラー

もし私のようにビジュアルエディタで確認できてもブラウザで動かない場合は、ブラウザに実装されているデバッガ(F12で起動)で、Consoleタブを開いてみてください。下記のように赤色でエラーが発生していませんか?

 

addEventListerエラー

”Uncought TypeError: Cannot read property ‘addEventListener’ of null”

これが原因となっているエラーの正体です。上記の画像を見ると、autoptimizeというプラグインが関係していることもわかります。

エラーの回避方法

対象としては、単にプラグインをはずしてみてもいいのですが、バージョンの調整だけでうまくいきそうです。この記事の執筆時点のautoptimizeのバージョンは2.4.4で、これを2.1.0にロールバックするとこのエラーはうまく回避することが出来ました。しばらくのこのバージョンで我慢することになりそうです。

お役にたてたでしょうか? 自分でもうっかりしてバージョンアップしてしまってあれ!ということも多いので備忘録がてら、記事にしてみました。

コメント

タイトルとURLをコピーしました