target _blankとrel noopener

管理しているサイト（tm106.jp）ではFluidaというテーマを使用しており、メニューの中にSNSのアイコン（awesomeタイプ）を下記のように表示することが可能です。場所はウィジェットの右カラムの一番上です。

これでリンクは付けられましたが、新たにLighthouseの”Links to cross-origin destinations are unsafe"の問題が発生しました。要するにfacebookとtwitterのリンクアイコンに、target="_blank"のコードは付与されていますが、rel="noopener"か"noreferrer"のコードを伴っていないというイエローカードで、リンク設定をする前はBest Practicesで１００満点を維持していましたが、その問題点だけでマイナス７点の９３点まで下がることになりました。

こりゃいかんということで、最初に行ったことはJqueryによるrel="noopener"の追加ですが、これが大失敗。失敗の内容ですが、childのファイルに、jsのフォルダーを作成し、その中にaddnoopner.jsというjqueryのファイルを作成して、founction.phpのファイルからaddnoopner.jsを読みに行かせる設定をしました。結果は画面真っ白で、最初は管理画面にもアクセス可能で慌ててなかったのですが、追加した部分を全部削除しても真っ白状態が続き、結局３日間ほどメンテナンス表示し、空いた時間で復旧作業をしておりました。追加ファイルを削除してもサイトの復旧ができなかったのは、OMGF | Host Google Fonts Locallyというプラグインに不具合が生じ、サイト表示が不能になっており、これを削除することでようやく復旧しました。

jqueryは手に負えないということで、filter hookに方針変更（初めからこっちにすれば良かった。）。ネット上をググると、add_filter( 'the_content', 'wp_targeted_link_rel' );でできるとの記事があり、フックをそのままでfounction.phpに書き込むと、何も起こらず。フックをフィルターフックの一覧からdynamic_sidebar_params にすると全部のウィジェットのテキストがエラーに。そういえばこれはウィジェットの位置にあるけどメニューだったことを思い出して、フックを'wp_nav_menu_items'に書き換えてサイトを表示させたところ、遂に１００点満点を回復しました。成功したフィルターフックの記述は次のとおりの１行です。

//target blank noopener addition　⇐コメントです。
add_filter( 'wp_nav_menu_items', 'wp_targeted_link_rel' );

サイトの閲覧も復旧していたので、何よりです。