【WordPress】HTMLアンカーの自動生成機能を有効にする方法

2022年4月23日ブログ

WordPressのアイコン

この記事では、WordPress5.9で実装されて、早くも5.9.1で廃止されてしまったHTMLアンカーの自動設定を再び有効(オン)にする方法について書きます。

【WordPress】HTMLアンカーの自動生成機能を有効にする方法

「functions.php」に、本記事で紹介するコードを記述することで、ブロックのHTMLアンカーの自動生成機能を再び有効にできます。

WordPress5.9(2022年3月11日公開)で、見出しのHTMLアンカーの自動生成機能が実装されました。いちいちHTMLアンカーを自分で作成しなくても、勝手に作成してくれる機能です。例えば、「テスト」という見出し2を作成したら、自動的に「テスト」というアンカーが付与されます。

この機能は、色々と批判が多かったようです。2022年2月22日に公開されたWordPress 5.9.1にて、廃止されてしまいました。正確には、廃止ではなく、デフォルトの状態が有効→無効になりました。

WordPress5.9.1のリリースノート画像
参考:Version 5.9.1 – WordPress.org Forums

つまり、有効にするコード(PHP)を書けば、5.9と同じように5.9.1以降でもHTMLアンカーの自動生成機能を利用できます。元に戻すのも簡単です。

「あの機能、めっちゃ便利だったのに、早々に廃止されて自動生成されなくなった!やっぱりほしい!」という方、ぜひ試してみてください。

「そもそも、HTMLアンカー(ページジャンプ)機能って何?」って方は、公式サイトが参考になるかと思います。リンクをクリックしたら、任意の場所に飛んでくれる機能です。いわゆる目次です。

記事執筆時のWordPressバージョン:WordPress 6.0.1(2022年8月5日)
使っているテーマ:Luxeritas

HTMLアンカーの自動生成を有効にする手順

大体3分もあれば、有効にできます。

「functions.php」にコードを記述する

WordPress管理画面にアクセスします。左側にあるお使いのテーマ名(僕の場合、Luxeritas)→子テーマの編集をクリックします。

Luxeritas→子テーマの編集

「functions.php」タブをクリックします。

「functions.php」をクリック

コードを書き込む画面が表示されるので記述していきます。既に書かれているコードは消さずに、改行して新しい行に書きます。コードは、以下になっています。

//5.9.1で廃止されたHTMLアンカーの自動生成を有効にするコード
add_filter( 'block_editor_settings_all', function( $editor_settings, $editor_context ) {
	$editor_settings['generateAnchors'] = true;
	return $editor_settings;
}, 10, 2 );
//5.9.1で廃止されたHTMLアンカーの自動生成を有効にするコード終了
WordPress6.0以前を利用している方へ

WordPress5.9.〇系を使っている方は、上記コードが使えないと思います。代わりに下記コードを使ってみてください。

2022年5月くらいに、予告なしに「__experimentalGenerateAnchors」という文字列が「generateAnchors」に変更されました。最近のWordPressバージョンを使っている方は、上記コードでOKです。

//5.9.1で廃止されたHTMLアンカーの自動生成を有効にするコード
add_filter(
	'block_editor_settings_all',
	static function( $settings ) {
		$settings['__experimentalGenerateAnchors'] = true;
		return $settings;
	}
);
//5.9.1で廃止されたHTMLアンカーの自動生成を有効にするコード終了

書き込めたら、「保存」をクリックします。

子テーマの編集の「functions.php」に、「5.9.1で廃止されたHTMLアンカーの自動生成を有効にするコード」を記述する

保存する時に、ブラウザによっては「このサイトを離れますか?」とダイアログが表示されます。「このページを離れる」をクリックします。ページがリロードして、「変更を反映しました」と表示されればOKです。

このサイトを離れますか? 変更を反映しました

自動生成されるようになったか確認する

記事編集画面を開きます。既に開いていた場合は、一旦下書き保存して、ページをリロード(F5)します。

見出しを挿入して、適当にテキストを入力します。

ブロックエディターの編集画面 見出しを挿入する

右側サイドバーの「ブロック」タブ→高度な設定→HTMLアンカーを確認してみます。WordPress5.9と同じように、入力した文字でHTMLアンカーが自動生成されています。「テスト」と入力したので、アンカーも「テスト」になっています。

高度な設定 HTMLアンカーが自動生成されている

一連の動画も撮影したので、良かったら見てみてください。

【注意点】見出しのコピペには注意

WordPress5.9の時もそうだったのですが、本機能を有効にした状態で、見出しのコピペには注意です。

良くも悪くも自動的にアンカーが生成されてしまうので、既にある見出しをコピペ(CtrlCCtrlV)すると、全く同じアンカーが2つ存在することになります。

HTMLアンカーの自動生成機能の注意点

全く同じアンカーが2つ存在していると、どちらかが無視されます。実際の動画を貼っておきます。1つ目の「ナポリタン寿司」という見出しはスルーされて、2つ目の「ナポリタン寿司」の見出しに飛んでいます。

こうならないために、以下の2点に気を付けましょう。

  • そもそも既に作成した見出しをコピペしない
  • コピペしたら、見出しを編集する

とりあえず、2番目を徹底しましょう。そもそも見出しをコピペしたままで公開する方はいないと思うので、実質そこまで気にする必要はないのかなと思います。

WordPress5.9.3では、コピペした後に見出しの中身を編集すると、自動的にアンカーの方も変更されるようになっています。コピペした後に、見出しさえ変えればOKということです。

見出しの中身を編集すると、自動的にアンカー内容も変化する

確か5.9で登場した初期の時は、変更されないままだった気がします。改善されたんですかね。

感想

以上、WordPress5.9.1で廃止されてしまった見出しのHTMLアンカーの自動生成機能を復活させる方法についてでした。

再び無効にしたい場合は、「functions.php」に書き込んだ該当のコードを削除します。

本記事は、下記サイトを参考にさせていただきました。感謝です。

参考:Block Editor: Add settings to enable/disable auto anchor generation by Mamaduka · Pull Request #38780 · WordPress/gutenberg

Posted by ナポリタン寿司