WordPressサイトの<head>内の整理

以下、詳細な説明は追って追加していきますが、テーマのフロントエンドの <head> に出力されるもので、これは不要かな、と思うものをザクザクと削除するスクリプト一式です。
functions.php に書きます。

//絵文字使わない
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
add_filter( 'emoji_svg_url', '__return_false' );

//generatorは削除
remove_action('wp_head', 'wp_generator'); 

//wlwmanifestをトル
remove_action('wp_head', 'wlwmanifest_link');

//フィードを消す
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);

//xmlrpcは要らない
remove_action('wp_head', 'rsd_link');

//ショートリンクの表示を削除
remove_action('wp_head', 'wp_shortlink_wp_head');

//<link>の前ページ、次ページをトル
remove_action('wp_head','adjacent_posts_rel_link_wp_head',10);

//srcsetは削除
add_filter( 'wp_calculate_image_srcset', '__return_false' );

//canonical は削除
remove_action( 'wp_head', 'rel_canonical' );

//Embed系のタグを削除
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');
remove_action('template_redirect', 'rest_output_link_header', 11 );

//DNS プリフェッチのタグを削除
function remove_dns_prefetch( $hints, $relation_type ) {
	if ( 'dns-prefetch' === $relation_type ) {
		return array_diff( wp_dependencies_unique_hosts(), $hints );
	}
	return $hints;
}

昔から繰り返し使っているもので、エラーは特に出てないと思いますが、未検証のものも多いので、追々、確認していこうと思っています。

2021-11-23 に大幅加筆修正

WordPress 5.0以降で追加された、ブロックエディタ関連のインラインスクリプトを消す方法は、以下に案内しています。

wp-block-library-theme-inline-css を削除

WordPress 5.8.2 現在、フロントに下記のようなインラインCSSが読み込まれていることに気が付きました。

<style id='wp-block-library-theme-inline-css'>
    #start-resizable-editor-section {
        display:none
    }

    .wp-block-audio figcaption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .wp-block-audio figcaption {
        color:hsla(0, 0%, 100%, .65)
    }

    .wp-block-code {
        font-family: Menlo, Consolas, monaco, monospace;
        color: #1e1e1e;
        padding: .8em 1em;
        border: 1px solid #ddd;
        border-radius:4px
    }

    .wp-block-embed figcaption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .wp-block-embed figcaption {
        color:hsla(0, 0%, 100%, .65)
    }

    .blocks-gallery-caption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .blocks-gallery-caption {
        color:hsla(0, 0%, 100%, .65)
    }

    .wp-block-image figcaption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .wp-block-image figcaption {
        color:hsla(0, 0%, 100%, .65)
    }

    .wp-block-pullquote {
        border-top: 4px solid;
        border-bottom: 4px solid;
        margin-bottom: 1.75em;
        color:currentColor
    }

    .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
        color: currentColor;
        text-transform: uppercase;
        font-size: .8125em;
        font-style:normal
    }

    .wp-block-quote {
        border-left: .25em solid;
        margin: 0 0 1.75em;
        padding-left:1em
    }

    .wp-block-quote cite, .wp-block-quote footer {
        color: currentColor;
        font-size: .8125em;
        position: relative;
        font-style:normal
    }

    .wp-block-quote.has-text-align-right {
        border-left: none;
        border-right: .25em solid;
        padding-left: 0;
        padding-right:1em
    }

    .wp-block-quote.has-text-align-center {
        border: none;
        padding-left:0
    }

    .wp-block-quote.is-large, .wp-block-quote.is-style-large {
        border:none
    }

    .wp-block-search .wp-block-search__label {
        font-weight:700
    }

    .wp-block-group.has-background {
        padding: 1.25em 2.375em;
        margin-top: 0;
        margin-bottom:0
    }

    .wp-block-separator {
        border: none;
        border-bottom: 2px solid;
        margin-left: auto;
        margin-right: auto;
        opacity:.4
    }

    .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
        width:100px
    }

    .wp-block-separator.has-background:not(.is-style-dots) {
        border-bottom: none;
        height:1px
    }

    .wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
        height:2px
    }

    .wp-block-table thead {
        border-bottom:3px solid
    }

    .wp-block-table tfoot {
        border-top:3px solid
    }

    .wp-block-table td, .wp-block-table th {
        padding: .5em;
        border: 1px solid;
        word-break:normal
    }

    .wp-block-table figcaption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .wp-block-table figcaption {
        color:hsla(0, 0%, 100%, .65)
    }

    .wp-block-video figcaption {
        color: #555;
        font-size: 13px;
        text-align:center
    }

    .is-dark-theme .wp-block-video figcaption {
        color:hsla(0, 0%, 100%, .65)
    }

    .wp-block-template-part.has-background {
        padding: 1.25em 2.375em;
        margin-top: 0;
        margin-bottom:0
    }

    #end-resizable-editor-section {
        display: none
    }
    </style>

調べてみたところ、
wp_common_block_scripts_and_styles()
という関数の中に

if ( current_theme_supports( 'wp-block-styles' ) ) {
	wp_enqueue_style( 'wp-block-library-theme' );
}

と書いてあり、おそらくこの 'wp-block-library-theme' というキーで読み込まれているスタイルのようだぞ、と。
前後の if 文を見ると、テーマで 'wp-block-styles' をサポートしている場合と読めるので、ブロックスタイルをサポートしていたら、上記のインラインスタイルを読み込むというような仕組みらしい。5.0 から、設置されているようですね。

調べたら、当該のテーマでは、ばっちり、add_theme_support( 'wp-block-styles' ) してました。

とは言え、邪魔なので、フロントからは削除

テーマの functions.php に下記のように書きます。

function ccc_theme_scripts() {
	
	//そのほか
	
	/**
	 * wp_common_block_scripts_and_styles() 経由で
	 * ブロックスタイルサポート時に読み込まれているインラインCSSをフロントからは削除
	 * 
	 * @url https://developer.wordpress.org/reference/functions/wp_common_block_scripts_and_styles/
	 */
	wp_dequeue_style( 'wp-block-library-theme' );
	
	//そのほか
}
add_action( 'wp_enqueue_scripts', 'ccc_theme_scripts' );

'wp-block-library-theme' というキーで読み込まれているスタイルなので、同じキー名で否定する、、、という感じです、
wp_dequeue_style( 'wp-block-library-theme' )
が、その部分です。
テーマでフロントに読み込むスクリプトやスタイルをまとめて読み込んでいる部分に一緒に書いています。たぶん、そうじゃないと動かないはず(試してないですが)。

あくまで、フロントだけ削除してます。管理画面でも読み込まれているんですけど、そっちは、まあ、いいかな、、、と思って、、、。フロントエンドの <head> の中をスッキリさせたい、スタイルの衝突を防ぎたいのが目的です。(仕方ないのかもしれないけど、まじ、インラインCSSはやめてくれ!て思う・・・)

下記の記事を参考にしました。

リビジョンの制御

リビジョン、便利な機能なのですが、開発中にリビジョンが「かさむ」のが少し、嫌で。
需要はあるかわかりませんが、リビジョンを停止、もしくは上限を設ける方法のご案内です。

下記のコードを、wp-config.php に書きます。

/**
 * リビジョンを制御
 * リビジョンを保存しない
 * @url https://ja.wordpress.org/support/article/revisions/#%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E8%A8%AD%E5%AE%9A
 */
define( 'WP_POST_REVISIONS', false );

/**
 * リビジョンを制御
 * リビジョンを3件保存(プラス自動保存1つ)
 */
define( 'WP_POST_REVISIONS', 3 );

/**
 * リビジョンを制御
 * リビジョンを全て保存(デフォルト)
 */
define( 'WP_POST_REVISIONS', true );

参考にしたのは下記のページ。

リビジョンの削除

ざっと調べたところ、プラグインを使うというのが優勢でした。DBから直接削除も可能です。いずれも、実施の際はバックアップを取ってから!というのが重要かと。

いずれ、WP-CLI とかで、できるようになったらいいなあ・・・・。

ブロックの「ツールバー」

コレ↓なんて名前??

ブロックツールバー

ブロックを選択した時に、ブロックの左上に表示されて様々な操作を可能にするものを「ブロックツールバー」と呼ぶようです。例示したツールバーは「段落」ブロックのものです。
ツールバーの中身は2〜5つほどのグループに分けられています。
グループは、左から「種類・移動」「整列・揃え」「文字装飾」「オプション」の順に並びます。ブロックによって使える機能が違うため、ツールバーの様子も異なります。

最も左のグループにある、一番左のアイコンはブロックの種類を表します。
その右隣は、ドラッグ&ドロップでブロックの並び替えをする時につかむ対象です。
さらに右隣はブロックを上下に移動させるボタンです。移動できない方向のボタンが薄い色になります。

左から2つ目のグループの一番左のアイコンは、段落ブロックの場合、水平方向の「揃える位置」を変更できるアイコンです。左、中央、右が選べます。

左から3つ目のグループのアイコンは、左から「太字」「イタリック(斜体)」「リンク」「そのほか」の意味で、これまでがブロック全体の動きや装飾に関するものである一方、このグループのアイコンは、ブロック内で選択した特定の文字列に対して設定が可能なものになります。なので、マウスでテキストを選択した状態で、アイコンをクリックします。

「そのほか」のアイコンをクリックすると、「インラインコード」「インライン画像」「キーボード入力」「テキスト色」「上付き」「下付き」「打ち消し線」が表示されて設定が可能になります。使い所が少ないので詳細な使い方については別の機会に。

一番右端のグループにある、縦に3つ並んだ点のアイコンは「オプション」です。ブロックによって内容が違いますが、よく使うのは「複製」「ブロックを削除」かなと思います。
他にも「HTMLで編集(戻す時は ビジュアル編集)」、「再利用ブロックに追加」「グループ化」などがあります。


親ブロックを選択する「おまけ」が表示される場合

いくつかのブロックは、ひとつのブロックの中に入れ子でブロックを持つものがあります。「ボタン」「カラム」などです。また、複数の要素をひとつのグループにまとめる場合はいろいろなブロックが入れ子状態になります。

入子になっている、何かの中身となっているブロックを選択した場合、ツールバーの左に正方形の追加領域が表示されて、そこに直近の親ブロックのアイコンが表示されるようになります。

親ブロック表示の例(カラムブロック)

この時、親ブロックのアイコンをクリックすると、親ブロックを選択することができ、オプションや追加設定を変更したりが可能になります。親ブロック自体をクリックだけで選択するのは難しいので、適当に入れ子のブロックを選んでおいて、親へさかのぼるのが楽だと思います。

または、「ブロックの並び替え」の余談で紹介した「リスト表示」からブロックを選択する方法が使いやすいかもしれません。

ブロックの並び替え ブロック選択方法の「リスト表示」解説

クリックすれば現れて、フォーカスが外れると消える「ツールバー」なのでちょっと面食らう時もありますが、慣れです、慣れれば、怖くなくなります。何かまずい操作をしたぞ!と思った時は、慌てず「⌘+Z」で戻していけます。
ブロックは慣れれば怖くないので、使い倒していきましょう!

ブロックの並び替え

ブロックは並び替えが簡単・・・・少なくとも、ソースコード書き換えるよりは楽に、並び替えすることが可能です。

方法1 ドラッグ&ドロップ

動かしたいブロックを選択した時に、選択したブロックの上に「ツールボックス」が表示されます。ツールボックス内の最も左のアイコンは、ブロックの種類を表すアイコンです。その右隣に、サイコロの6の目のようなマークがあります。

ドラッグ アイコン

画像の赤丸に示した部分を、クリックし続けたまま動かす(ドラッグする)と、ブロックを移動させることができます。目的の場所までドラッグして、ドロップ(クリックし続けた状態のマウスから指を離す)します。はい簡単!
簡単で直感的ですが、狙ったところにうまく動かせない場合もあります。特に狭い画面だと大変・・・・。
そういう時は、次の方法の方が便利な場合もあります。

方法2 上下矢印ボタンを押して並べ替える

動かしたいブロックを選択した時に、ブロックの種類を表す「サイコロの6の目のようなマーク」の右隣に上下の矢印があります。

上に移動ボタンと下に移動ボタン

上下の矢印アイコンはボタンになっていて、押した方向へひとつ分ブロックが移動します。
方法1では精緻な動作でブロックを移動することが難しい場合があるので、ドラッグで大雑把に場所を移動して、ひとつか2つずらす時は矢印の方がやりすいかなー、と個人的には思っています。

余談:ブロックの「選択」方法

表示されている画像なり文字なりを狙ってクリックすれば、その動作だけでブロックを選ぶことができます。編集中のブロックの近くにあるブロックであれば、その選択方法で良いのですが、ページの上の方を選択中の時に、ひと飛びに下の方を見たい時もあります。スクロールしても、良いのですが、別の方法をひとつ、ご紹介。
編集画面の上の方にあるツールバーの中に、階段のようなアイコンがあります。

リスト表示

「リスト表示」のボタンです。これを押すと、エディタ内のブロックが一覧できます。

リスト表示を開いたところ

今編集中でフォーカスされているブロックは、ブルーの背景がついているところです。マウスオーバーしている(=ブルーの枠線で囲まれている)のは、最初の段落ですが、クリックすると、ひと飛びにそこへ移動します。

ブロックは種類によって「入れ子(ネスト)」になっているものもあるので、子要素や親要素をワンクリックで選択するのにも便利かなと思います。

WPの投稿でブロックエディタを使わないようにする方法

便利なブロックエディタですが、WordPressをCMSとして使う際などに、クライアントが操作するにはハードルが高い…ということもあるあるです。クライアントが更新するのは「投稿」だけなので、ここだけブロックエディタを使わないようにしたい、というような状況で使えるチップスです。

投稿タイプごとにブロックエディタを使うかどうかを判断する use_block_editor_for_post_type()という関数があり、そこへフィルターフックで条件を追加します。

下記の例は投稿タイプが「投稿(post)」だったら、ブロックエディタを「使わない」場合のサンプルコードです。

function hide_block_editor( $use_block_editor, $post_type ) {
	if ( $post_type === 'post' ) {
		return false;
	}
	return $use_block_editor;
}
add_filter( 'use_block_editor_for_post_type', 'hide_block_editor', 10, 2 );

use_block_editor_for_post_type() の概要にも記載がありますが、

The block editor depends on the REST API, and if the post type is not shown in the REST API, then it won’t work with the block editor.

https://developer.wordpress.org/reference/functions/use_block_editor_for_post_type/#description

ブロックエディタは REST API に依存しているので投稿タイプ REST API に含まない場合はブロックエディタが働かないです。カスタム投稿を追加して使う際などに、'show_in_rest' をうっかり false に設定していたり、

余談 プラグイン「Classic Editor」を使う

「Classic Editor」プラグインは、サイト内でブロックエディタを無効化するだけではなく、デフォルトでどちらのエディタを使うかや、ユーザごとにどちらを使うか、記事ごとにブロックエディタを使うか従来のエディタを使うか選択することができます。ブロックエディタを全く切り捨ててしまうより、少しずつでもブロックエディタの画面に慣れてもらう方がメリットが大きいと思う場合は、このプラグインを使う手もあるかな、と思います。

WPのリビジョン制御

運用中には大変便利な理事ビジョン機能だが、開発中は眠らせておきたい時に、wp-config.php に書くやつ。

define( 'WP_POST_REVISIONS', false );

3つまでなど、リビジョンをキープする数の制限をしたい場合は下記のように。

define( 'WP_POST_REVISIONS', 3 );

運用段階でこれをコメントにするのを忘れてしまったりするのも地味に課題・・・。