妙高市や上越市に縁のある新潟県民がホームページ制作に関してつぶやくサイト

MENU [+]閉じる [×]
wp_head()の出力内容からCSSやjQueryを削除する方法【WordPressをカスタマイズ】

皆さんこんにちは(*^▽^*)

私がこの記事を書いているのはまさに年度末のころ、まもなく上越市の高田公園では毎年恒例の観桜会が始まろうとしています。

皆さんは、年度末の繁忙期は無事に乗り切れましたか?

さて、今回のテーマは「WordPressのwp_head()関数の出力内容を整理する方法」です。

この記事の目次

そもそも[wp_head()]とは?

WordPressのテーマファイルを編集していると、様々な記述がありますが、その中で、

「あれっ、このスクリプトを読み込むような記述がheader.phpの中に見当たらないなぁ…」

という箇所があるかと思います。

表示されているページのヘッダー部分で[…….css]のようなファイルが読み込まれていても、それを直接的に記述している部分がheader.phpの中に見当たらず、最初のうちは困ってしまうこともあります(^^;)

「この行の記述より後で、これよりは前、そうなると…」

「んっ!?」

そのときに行き着くのが、おそらくこの[wp_head()]という記述のハズです(^^)

今回の記事は、その[wp_head()]という関数で出力される内容を編集するためのものです。

ページの先頭へ戻る

注意点:wp_head()関数の出力内容の編集にあたって

では、実際のPHPの編集方法をご紹介する前に、注意点をいくつか挙げておきます。

まずは、作業前に必ず!他を忘れても必ず![functions.php]のバックアップをとるようにしてください。

そして、自己責任で編集してください。

みなさんが試してみるWordPressのサイトで、すべて同じ結果になるとは限りません。

当サイトではいっさいの責任を負えませんので、予めご了承くださいm(__)m

この記事では、あえて各用語の説明を最小限にして進めていきます、そのため「これよく分からない」というものは、編集をオススメしませんので、ご了承ください。

なお、wp_head()の関数は[wp-includes]というフォルダの[default-filters.php]というPHPファイルで制御されているかと思います。

バージョンにより異なる可能性も否定できませんので、あくまで参考程度としてください。

また、もしも[default-filters.php]を編集したいという場合も[functions.php]同様、事前にバックアップを取った上で自己責任でお願いします。

色々注文ばっかりでゴメンなさいm(__)m

では、次から具体的な方法をご紹介します(*^▽^*)

ページの先頭へ戻る

その1:わりと全般的な記述(jQuery、CSSなど)

まずは、わりと全般的なページに関連性のある記述の編集方法からご紹介します。

wp_head()関数はデフォルトの状態では、jQueryやCSSのファイルが読み込まれるかと思います。

[jquery-x.x.x.js]みたいなファイルや[… style.css]のようなファイルが自動的に読み込まれてはいませんか(^^)?

それを消す方法を順にご紹介します!

まずはjQueryからです、[functions.php]に下記の記述を追加してください。

function my_delete_local_jquery() {wp_deregister_script('jquery');}
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );

続いては、テーマ固有のCSSです、[functions.php]内にある下記の記述をコメントアウトしてください。

wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );

テーマ固有の[style.css]は、もしも上記の方法で記述を消すことができなければ、WordPressの管理画面の[外観]−[テーマの編集]を選択した先の画面で選択できる[custom: スタイルシート (style.css)]というファイルの中身をごっそり消すという豪快な方法もあります(^^;)

「カラのファイルをhttp通信で読み込む」という処理が常に加わるので効率的に最善とは言えませんが、カラである以上は他のスタイルシートに影響を及ぼす心配は無くなるので、

「制作の初期段階で、とりあえず」

という場合には[style.css]の中身前消しという方法も否定はしません。

さて、テーマ固有のCSSの次は、プラグインによって生成されるCSSの記述です。

例えばですが、妙高Web屋のサイトを始め個人的に様々なサイトで[WP-pagenavi]のプラグインを使うこともありますが、その場合は[functions.php]にこの記述を追加してください。

function my_delete_plugin_files() {wp_dequeue_style('wp-pagenavi');}
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_files' );

ページの表示関係のプラグインを有効化した場合、Webページのソースをのぞいてみると、ヘッダー部分にこのようなCSS読み込み用のHTMLタグが自動的に出力されている場合があります。

[<link rel=’stylesheet’ id=’wp-pagenavi-css’ …]

この[id]の値のうち末尾の[-css]を除いたものを[wp_dequeue_style(‘xxxxx’)]のxxxxxの部分に入れてあげると、該当するCSSの読み込みが消えているはずです。

念のためですが、CSSの読み込みを消すと言うことは、ほぼ間違いなくレイアウト崩れが発生しますのでご了承くださいm(__)m

次はcanonicalタグです。

canonicalタグを消したい場合や、消して独自の設定で行きたい場合は、[functions.php]内の下記の記述をコメントアウトしてください。

remove_action('wp_head', 'rel_canonical');

canonicalタグは記述が重複していると、どちらの記述もGoogleなどの検索エンジンに評価されない可能性がありますので、ご自身の独自の設定で行かれるのであれば、デフォルトのものは消しておく必要があるでしょう。

全般的なもの、最後は、デフォルトの場合ヘッダー内に記述されるWordPressのバージョンです。

[functions.php]に下記を追加してください。

remove_action('wp_head', 'wp_generator');

私の周囲ではあまり事例を聞きませんが、WordPressのバージョンの表示を残したままにしておくということは、すなわちWordPressのどのバージョンで作られたサイトか明示しているということになりますよね(^^;)

ということは、特に最新でないバージョンを使用されている場合はWordPressの特定のバージョン固有の「セキュリティの脆弱性をついた攻撃」を受けてしまうという可能性も、ゼロではありません。

私がこの記事を書いている2017年2月〜3月の時点でも、WordPress4.7やWordPress4.7.1のセキュリティに問題が発覚したというケースがありました。

万全を期したい方は、WordPressのバージョンを消しておいた方が良いかもしれません。

ページの先頭へ戻る

その2:バージョンに応じて適用される記述(JS、CSSなど)

さてと(^^;)「その1」だけでずいぶん長くなっちゃいましたね…(笑)

ここからはサクサク行きます!

テーマは[TwentySeventeen]を想定していますが、ie9用&ie8用のCSSが必要ない!もしくは自分でやる!という場合は、[functions.php]内の下記の記述をコメントアウトしてください。

wp_enqueue_style( 'twentyseventeen-ie9', get_theme_file_uri( '/assets/css/ie9.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie9', 'conditional', 'IE 9' );
wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

そして、IE8にもHTML5のマークアップの定義を反映させるJSを読み込ませなくて良いならコチラも(^^)

wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );
wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );

「その1」「その2」を一通りやると主要なスクリプトの相当数の記述を削除できているので、ここまででもビフォーアフターで違いを感じる場合もあるかも知れません(^^)b

ページの先頭へ戻る

その3:投稿の個別ページ&一覧ページに関する記述

さあ、「その3」では投稿の個別ページや、数件ごとにまとめた一覧ページに関する記述をご紹介します。

記事のフィードとコメントフィードの記述を消す場合は[functions.php]内の下記の記述をコメントアウトしてください。

add_theme_support( 'automatic-feed-links' );

「add_なんとか」の関数だと、記事のフィードとコメントフィード、両方一度に消す方法しか見当たりませんでした(^^;)

片方だけ消したい場合は、お使いのWordPressのPHPファイルから[general-template.php]を探して編集していただくことになるかと思いますが、そのうえでの注意点は、何だかお分かりですか…(^^)?

そうです!

「バックアップを取った上で、自己責任で!」です!!

次は、投稿に関するツール用のタグです。

特に必須でないならば、消してしまっても良いかも知れません。

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

そして[rel=”prev”]と[rel=”next”]という2種類の記述を削除したい場合は、こちらを[functions.php]に追加してください。

remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

ここまでで、ヘッダーの記述の量もずいぶんスッキリしてきたと思います(^^)

ページの先頭へ戻る

その4:ほか様々な記述

最後に、様々な記述を消す方法をご紹介していきます。

まずは、絵文字用のスタイル定義を消したい場合はこちらを追加です。

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

つづきまして、DNSプリフェッチがこちら。

function remove_dns_prefetch( $hints, $relation_type ) {if ( 'dns-prefetch' === $relation_type ) {return array_diff( wp_dependencies_unique_hosts(), $hints );}return $hints;}
add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );

こちらは、追加することで[.recentcomments a]というクラス構成のaタグに関するスタイルの記述(WordPress3.0〜)を削除するものです。

function remove_recent_comments_style() { global $wp_widget_factory; remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) ); } add_action( 'widgets_init', 'remove_recent_comments_style' );

さらに[<link rel=’https://api.w.org/’ href=’https://xxxxx/wp-json/’ />]という記述(WordPress4.4〜)の削除です。

remove_action('wp_head','rest_output_link_wp_head');

そして[function(html){html.className = … ]という記述のあるscriptタグを削除するには、[functions.php]内の下記の記述をコメントアウトしてください。

function twentyseventeen_javascript_detection() {
	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}

ページの先頭へ戻る

こちらの記事でご紹介した記述は、仮に失敗したり、思わしくない動きになったとしても、一部は上記と逆の設定(コメントアウトを外したり、追記した記述を消したりなど)にすれば、元に戻すことができます。

また、バックアップさえ取っていれば、システム全体がおかしくなるという可能性も最小限に抑えられます。

それでも不安だったら、テストサイトを用意して、そこで作業してから本番反映させましょう(^-^)

テストサイトがダウンしただけだったら、社内やチーム内に「ゴメンなさい」って言えば済みますからね…たぶん(笑)

スッキリした記述で、みなさんの作ったWebページがサクサクと読み込まれることを祈っています(*^▽^*)

いいね!と思っていただけたらSNSでシェアしてください♪

感想などあればコメントください♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ