リンクが自動的に展開されます
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
addEventListenerエラー
もし私のようにビジュアルエディタで確認できてもブラウザで動かない場合は、ブラウザに実装されているデバッガ（F12で起動）で、Consoleタブを開いてみてください。下記のように赤色でエラーが発生していませんか？
”Uncought TypeError: Cannot read property ‘addEventListener’ of null”
これが原因となっているエラーの正体です。上記の画像を見ると、autoptimizeというプラグインが関係していることもわかります。
