Jizo Games
WordPress

自動で出力される不要なHTMLを削除する

はじめに

これまで何度か、ブラウザの開発者ツールを使ってWordPressで出力されるHTMLを確認してきましたが、いろいろなクラスや属性などが設定されていることに気づいたでしょうか。

もちろん中には有用なものもありますが、サイトの用途によっては使用しないものもあります。

不要なものはないに越したことはありません。消してしまいましょう。

head内の不要な要素を削除する

ブラウザの開発者ツールを開いたときに一番目につくのは、head内に出力されたHTMLでしょう。すべてとは言いませんが、なくても機能や見た目に影響しないものもありますので、サイトのコンセプトや使用している機能に合わせて取捨選択して削除しておきましょう。

functions.phpのafter_setup_themeフックに、以下のコードを追記します。ついでに、同じ部分にadd_theme_support()関数でhtml5を指定しておくとさらによいでしょう。

function jizoasis_setup() {
    // テーマ機能をサポートする.
    add_theme_support( 'html5', array( 'caption', 'comment-form', 'comment-list', 'gallery', 'search-form', 'script', 'style' ) );

    // カスタムメニューを登録する.
    （...省略...）

    // head内の不要な要素を削除する.
    remove_action( 'wp_head', 'wp_generator' );                              // WordPressのバージョン.
    remove_action( 'wp_head', 'feed_links', 2 );                             // RSSフィード.
    remove_action( 'wp_head', 'feed_links_extra', 3 );                       // コメントのRSSフィード.
    remove_action( 'wp_head', 'rsd_link' );                                  // XML-RPCのエンドポイントを含むリンク.
    remove_action( 'wp_head', 'wlwmanifest_link' );                          // Windows Live Writer.
    remove_action( 'wp_head', 'index_rel_link' );                            // indexへのリンク.
    remove_action( 'wp_head', 'wp_shortlink_wp_head' );                      // 短縮URL.
    remove_action( 'wp_head', 'parent_post_rel_link' );                      // 親ページへのリンク.
    remove_action( 'wp_head', 'start_post_rel_link' );                       // 分割ページの、最初のページへのリンク.
    remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10 );       // 前後のページへのリンク.
    remove_action( 'wp_head', 'rest_output_link_wp_head' );                  // REST API.
    remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );             // oEmbed.
    remove_action( 'wp_head', 'wp_oembed_add_host_js' );                     // oEmbed.
    remove_action( 'wp_head', 'rel_canonical' );                             // 正規化URL.
    remove_action( 'wp_head', 'wp_resources_hints', 2 );                     // 外部リソースへのアクセス.
    remove_action( 'wp_head', '_admin_bar_bump_cb' );                        // インラインスタイル.
    remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );    // インラインスタイル.
    remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );       // 検索結果の画像プレビュー.
}

多いですね。

まずadd_theme_support( ‘html5’, array(…) )は、指定した要素にHTML5マークアップを適用させるというものです。”type=text/javascript”のような不要な属性が出力されなくなります。

大量のremove_actionで削除しているものの内容はコメントで示してありますが、分からないものがあれば調べてみるとよいでしょう。もちろん、ここにあるものがすべてではありません。

絵文字機能を無効化する

WordPressでは絵文字が使えますが、テキスト部分で絵文字を使う場面はそう多くはないはずです。装飾目的であればCSSを使うほうがいいかと思いますので、よほど強いこだわりがなければ絵文字機能も無効化してしまいましょう。

こちらはinitアクションフックを使います。

initアクションフックでは、絵文字機能の無効化のほか、カスタム投稿タイプやカスタムタクソノミーの設定などがこのタイミングで行われることが多いようです。functions.phpに追記します。

function jizoasis_init() {
    // 絵文字機能を無効化する.
    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', 'jizoasis_init' );

これで、絵文字機能に関係するスクリプトやスタイルが読み込まれなくなります。

デフォルトのスクリプトやインラインスタイルを読み込まないようにする

WordPressでは、デフォルトのjQueryが読み込まれていたりインラインスタイルが設定されていたりします。

あらかじめ用意されていることで助かる場面もありますが、自前で用意したものを使いたい場面もあります。そういった場合は、それらを最初から読み込まないように設定することができます。

「最近のコメント」ウィジェット用のスタイルを削除する

文字どおり、「最近のコメント」ウィジェット用のスタイルを削除します。このウィジェットを使う予定のある方は削除しないほうがいいかもしれません。

/**
* 「最近のコメント」ウィジェット用のスタイルを削除する.
*/
function remove_recent_comments_styles() {
    global $wp_widget_factory;
    remove_action( 'wp_head', array(
        $wp_widget_factory -> widgets[ 'WP_Widget_Recent_Comments' ],
        'recent_comment_style'
    ) );
}
add_action( 'widgets_init', 'remove_recent_comments_styles' );

使用するアクションフックはwidgets_initフックです。initフックの中で一番最初に実行されるフックらしいです。名前のとおり、このタイミングでウィジェットエリアの設定がされることが多いようです。

デフォルトのjQuery、スタイルを読み込まない

すでに定義しているjizoasis_scripts()に追記して、デフォルトのjQueryやスタイルを読み込まないように設定していきます。

/**
 * CSS・JavaScriptの設定を行う.
 */

function jizoasis_scripts() {
    // 使用しないスタイル・jQueryを読み込まない.
    if ( ! is_admin() ) {
        wp_deregister_script( 'jquery' );
    }
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'global-styles' );
    wp_dequeue_style( 'classic-theme-styles' );

    // CSSファイルを読み込む.
    （...省略...）

    // JavaScriptをヘッダーで読み込む.
    （...省略...）
}
add_action( 'wp_enqueue_scripts', 'jizoasis_scripts' );

管理画面ではjQueryを読み込まないとエラーが出るような話を聞いたので、一応条件を追加しています。

wp-block-libraryは、その名のとおりブロックエディタ用のスタイルなので「すべてのスタイルを1から設定したい！」という人でなければ残しておいてもいいかもしれません。

XML-RPCを無効化する

これについては、ほぼ知識がありませんが調べた結果、うまく使えないのであれば無効化しておいた安全っぽいということだけが分かりました。

なにやら脆弱性があるらしいのですが、詳しいことは調べてみてください。

すでにremove_actionで、XML-RPCのエンドポイントを含むリンク（このコメントの意味すらぼんやりとしか分かりません）は削除していますが、以下のコードで機能自体も無効化しておきます。

// XML-RPCを無効化する.
add_filter( 'xmlrpc-enabled', '__return_false' );

おわりに

けっこうゴッソリ削除しましたので、今回はここらで勘弁してやりましょう。

HTMLというソースコードに関係するカスタマイズだったので、画像もなくコードばかりで読みにくかったかもしれません。しかも、見た目には変化なし……。

こうみるとWordPressはフルコースの全部もりもりで提供してくれているのだなぁと感じますね。だからこそ初心者でも簡単に記事の投稿や管理ができるのだと思います。

更新でインラインスタイルが追加されることもあるので、たまにソースコードを確認してみるのもいいかもしれませんね。

X Facebook LINE Pocket