久しぶりに本ブログを更新して、ふと UA の Firefox Quantum でアクセスし、CTRL + U で HTML ソースを見たら、何じゃこりゃ～！？ とヘッダー部分に余計な汚らしい JavaScript が入っているではないか！

WordPress の余計な仕業

上記画像の水色で囲っている部分が WordPress が行っている余計な仕業です。で、最も簡単な解決方法は WordPress をインストールしているディレクトリにある wp-includes/default-filters.php を以下の行を見つけコメントアウトしてしまう事です

add_action( 'wp_head',             'rest_output_link_wp_head', 10, 0 );
add_action( 'wp_head',             'wp_resource_hints',               2     );
add_action( 'wp_head',             'print_emoji_detection_script',     7    );
add_action( 'wp_print_styles',     'print_emoji_styles'                     );

しかし、私の場合は WordPress 自体がバージョンアップする度にサーバー上に全上書きしているので、この方法だとバージョンアップの際にこの修正を忘れてしまうというヒューマンエラーを起こしてしまいます

そこで、WordPress 関数 remove_action を使います。変更対象はテンプレートの header.php を以下の様に wp_head 関数をコールされる前に記述しておきます。本ブログのテンプレートは自前で作成した物なので、WordPress バージョンアップ際にはテンプレートは更新対象外なので影響はありません

<?php
/* 2018/08/06 ヘッダーに余計なゴミ JavaScript 等を除去する */
remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
remove_action( 'wp_head', 'wp_resource_hints', 2 );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

wp_head();
?>

以上の変更を施し、サーバーにアップロードを行い、UA でリロード、ソースを見ると、下記画像の様にすっきりしました

WordPress の余計な仕業を除去してスッキリした HTML ヘッダー

hr 要素が未だに廃止予定にないので、たまに記事の中で使ってますが、align, noshade, size, width 属性が廃止予定なのと CSS の border 関係のプロパティと見た目が余りに違うので、統一して使用してます。この記事では、その見た目を同じにする CSS の小技を一つ…

1. hr
2. {
3.   padding: 0em;
4.   border-top: 1px solid #dcdcdc;
5.   border-left: none;
6.   border-bottom: none;
7.   border-right: none;
8.   color: #212121;
9.   background-color: #212121;
10. }

斜体部分の色指定はお好みで…因みにこんなのでもいいです

1. hr
2. {
3.   padding: 0em;
4.   border: none;
5.   border-top: 1px solid #dcdcdc;
6.   color: #212121;
7.   background-color: #212121;
8. }

参照

• hr 要素
• border