WordPressのJQuery→CDN化とremove_action()ではまった話。

2019年2月9日

WordPressのJQuery→CDN化とremove_action()ではまった話というテーマで記事を書いていきたいと思います。この記事の対象読者はたぶんかなり限定される。下記のような困りごとがあるひとむけかと思います。

WordPressのJQueryをCDN化したい。
AmazonJSがぐるぐるなって動かないんだけど・・・
remove_actionって設定したはいいけど確認方法は？
そもそもwp_head();ってどこにあるんだよ

こんなかんじの困りごとで話をすすめていきたいと思います。

1 WordPressのJQueryをCDN化する
2 wp_head()で読み込まれる関数をremove_action()で無効化する

WordPressのJQueryをCDN化する

WordPressのJQuery→CDN化とは

WordPressは標準だとWordPressのJQueryを読みこむのだけれども、それを読みこまないようにして、外部のJQueryを読みこんだほうが（CDN化）負荷が分散されてページの読み込みがはやくよみこまれるようになるかもねというおはなし。CDNの詳しい情報はコンテンツデリバリネットワーク – Wikipediaあたりを見ておけばよいんではないかと。JQueryのCDNはGoogleとかマイクロソフトが提供している。

JQuery→CDN化のメリットとしてはさきほどもあげたようにページの読み込みがはやくなるってことだけど、これ実際どこに根拠があるのかわかんねえから結局自分でいろいろためすしかないよねというおはなし。

WordPressのJQueryをCDN化する方法

WordPressのJQueryをCDN化する方法は下記のとおり

WordPressのJQueryを読みこまないようにfnntion.phpにコードを記述
footer.phpにCDNのJQueryを読みこむためのコードを設置
要素の検証のカバレッジで本当に既存JQueryが読み込まれなくなったか確認

function.phpに記述するコード

function replace_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
  }
}
add_action('init', 'replace_jquery');

bodyの閉じたタグ直前あたりにCDNつかうためのコード設置

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ちゃんと読みこまれているかどうかはブラウザの要素の検証→coverageで確認できる。

AmazonJSプラグイン使っている人はCDNのJQueryを使うと動かなくなるので注意

WordPressのJQueryがCDN化できたはいいんだけどなぜかAmazonJSプラグインが動作しなくなる。ぐるぐるまわって画像とかテキストが表示されない状態。これの解決方法がしりたくていろいろ調べたけど、けっこうさがしても解決方法がでてこない。AmazonJS側のコードの問題っぽいけどコードとかまともによめないしお手上げという結果に、CDNのバージョンとかも変えてみたけどあいかわらず動かなかったので関係ないっぽい。ここ見てる人残念、解決方法なしです。

というか解決できるんだろうけど、コード読めないから無理というおはなし。

結論AmazonJS使っている人はJQueryをCDN化するとハマるぞってことは伝えたいかも
素人の個人的見解なんてどうでもいいとは思いますけど。

wp_head()で読み込まれる関数をremove_action()で無効化する

wp_head()の概要について

wp_head()関数はwordpressテーマのheader.phpのheadタグに書かれていることがたぶん多い。で、これはなにをするものなんやってことでWordPress標準のJQueryを読みこんだり、とにかくなんかいろいろな関数を読みこんどるというおはなし。でそのいろんな関数ってどこに記述されとるんやと困るわけですが

wp_includesディレクトリのdefalt-filters.phpというファイルにいろいろ記述されています。→でそのdefalt-fileters.phpってどこにあるんじゃって話なんだけどサーバーのFTPソフトとかでアクセスする必要があります。このあたりは環境によっていろいろことなると思うので割愛。defalt-filters.phpを見ればわかるけどwp-head()はいろんな関数を読みこんでいることがわかる。読み込みというとなにか語弊があるけど。

remove_action関数の概要について

remove_action()関数をfunction.phpに記述することによって、特定のアクションを無効化できるという話。wp_head()関数でheadタグにいらんものまで読みこんでるから読みこまんようにすりゃあええやろうが。というはなし。つかわないものは読み込まないようにしたほうがページの読み込みもはやくなるよねというおはなしなんですが、べつに根拠があるわけでもないので、ことはやってみないとわからないので実施することに。

どの関数にどんな効果があるのかの説明は割愛。とりあえずfunction.phpに以下記述。

function disable_emoji() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
     remove_action( 'wp_print_styles', 'print_emoji_styles' );
     remove_action( 'admin_print_styles', 'print_emoji_styles' );
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_emoji' );
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('template_redirect', 'rest_output_link_header', 11);
remove_action('wp_head', 'rest_output_link_wp_head', 10);
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');

どの関数にどんな効果があるかは、ネットで検索すればすぐ情報がでてくる。

remove_aciton()が効いているかどうかってどうやって確認すんの?

wp_head()のどの関数を消すか書いているサイトはいっぱいあるんだけど、remove_action()が実際に効いているか確認する方法を書いているサイトがなさすぎてはまった。いろいろためしていたら、ブラウザの要素の検証で普通に確認できることが判明。

要素の検証でheadタブの中を見れば違いがわかる。→わかるのだけど、たぶん普通はこういうやり方で確認はしない。素人なので致し方なし。要素の検証で確認はできるけどあんまり正確性がないきもするので、たぶんやり方が違う。

おまけコード↓function.phpに以下記述するとブラウザのコンソールでどんなアクションがよみこまれているかわかる。ただし、actionのどの関数が読み込まれているかまではわからないのであまり意味はない。こういうのもあったよってことで・・・。

add_action('shutdown', function() {
  global $wp_actions;
  echo '<script>';
  foreach($wp_actions as $action => $count) {
    echo "console.log('%s: %d', '{$action}', {$count});";
  }
  echo '</script>';
});

結論

WordPressのJQuery→CDN化もwp_head()関数の整理も素人はやらないほうがいい。はまっておわるのが関の山。読者の判断に任せます。では。