脚注ブロックがWordPressの標準機能として組み込まれた話やカスタマイズの解説

WordPress6.3から、脚注ブロックが追加されて簡単に文章コンテンツを制作する中で脚注を入れる事ができるようになりました。

ブロックエディター内に文章を書いていく場合、脚注を入れるには主に

1. カスタムHTMLブロックでベタ打ちする
2. WordPressプラグインで機能追加
3. WordPressテーマに実装されている脚注機能

上記の3つくらいしか選択肢がなかったのですが、今回、WordPress6.3から脚注ブロックが追加されたことで、文章を書きながら一次情報などの参照元を本文の最下部に補足情報として、参照のために外部リンク先を記載することが気軽に出来るようになります。

WordPressテーマや外部プラグインなどに依存することなく、文章の流れを邪魔せずにユーザーが気軽に関連情報にアクセスできる構成を組める環境は素敵だと考えています。

今回は、WordPressで脚注ブロックを使う方法や、その他にもカスタムHTMLブロックを使って、カスタマイズした自分で脚注をコーディングする方法に付いて解説していきます。

脚注について

脚注（きゃくちゅう）とは、Webサイトの文章コンテンツにおいて、Webページの下部や文末、または別のセクションやカラム等^*1に配置することができる注釈や参考情報のことです。

脚注の使い分けと種類

脚注は、主に以下のような4つの種類に分けることが可能です。

1. 説明や補足などのページ本文で触れた内容について、詳細な説明や補足情報を提供します。
2. 出典や引用として使用した情報源や引用した文献や研究論文などの一次情報などを明示してリンク等をします。
3. 関連情報として、本文の内容と関連しているが、その本文中に書いていく文章の流れで直接触れるほどではない情報をについて補足します。
4. 専門用語や単語の定義を記載するときに、脚注部分に用語の意味や略語等について、定義する時に利用します。

脚注は、文章を読んでいる人が必要に応じてすぐに補足情報にアクセスできる特徴をもっています。

読者にとって追加情報を容易に参照できるようにするため、また、執筆者が書いた文章内にある情報の信憑性を照明する手段として多く用いられています。

Webサイトにおける脚注の重要性

Webサイトでコンテンツを閲覧して情報を取得することにおいて、Webページに脚注機能が実装されていることはスゴく重要です。

例えば、文章を読んでいて情報の参照元や参考文献、補足情報、単語の意味など、より深い情報を知りたい時に、アンカーリンク（ページ内リンク）で情報に素早くたどり着けます。

そして、Webサイトの脚注にはナンバリングがされているため、所定の場所へすぐに戻れるようにもなっているため、読者の読み進め方を邪魔しないようにする仕組みを実現することが可能になっています。

また、Wikipediaなどでは、脚注ツールチップといって、脚注部分にマウスカーソルを移動させると、ポップアップで脚注を表示させることも可能になっています。

個人的には、ここまで標準で実装してくれたら嬉しいなと待ちつつ、標準搭載されたWordPressの脚注を使っていきます。

WordPressに脚注ブロックが標準実装されたバージョンは？

WordPressに脚注ブロックが標準実装されたのは、WordPress6.3^*2からです。

それまでは、自分でブロックエディタ上でカスタムHTMLブロックでベタ打ちしたり、WordPressプラグインを用いて脚注機能を作成していました。

これからは標準搭載されているので、場合によってはプラグインを減らすことも出来るし、WordPressテーマの制約を受けることもなくなるので、Webサイトのデザインテーマを変えることが、また少し簡単になりました。

関連記事：WordPressテーマでおすすめできる有料版と無料版を比較しながら実例を用いて紹介

脚注ブロックの使い方

標準機能になっただけあって、脚注の使い方はスゴく簡単になりました。

脚注ブロックを使う手順

いくつか方法はありますが、簡単な手順は以下の通りです。

1. WordPressのエディタワークスペース（文章を入力する場所）内をクリック
2. テキストを入力する
3. 脚注と関連付けしたいテキスト部分を選択する
4. ブロックリスト（例えばリストの『ｖ（下矢印）』でもOK）
5. 脚注を選択する

この手順で進めると、脚注の設定が可能です。

脚注部分に情報を追加する

脚注ブロックを設定すると、通常は文章コンテンツの最下部にナンバリングで割り当てられた脚注の内容が入力できる部分が作成されています。

その部分に補足情報や必要な参照元リンクなどを入力していきましょう。

WordPress内で脚注をカスタマイズしたい

WordPressの脚注機能をカスタマイズするには、「追加CSS」などでのCSSカスタマイズや、WordPressテーマ内にあるPHPコードを編集することで実現が出来ますが、これからもWordPressの脚注機能は多機能化していきそうなので、あまりおすすめはしていません。

カスタムTHMLブロックで脚注を作成する

HTMLのベタ打ちは手間がかかりますが、基本的なHTMLで記述されている部分は、様々なアップデートの影響を受けにくいこともあるので、コーディングでのカスタマイズを習得しておくと便利です。

下記が脚注のナンバリングと脚注エリアを作る時のHTMLの一例になります。

ただ、脚注はWordpressの標準機能になっているので使うことはないかも知れません。

あくまでも、参考程度にHTMLコードサンプルを記載しておきます。

まずは、脚注にナンバリングするためのHTMLを「カスタムHTML」で入力します。

「<!–」と「–>」の部分は、コメントアウトの記述なのでコピペしないでください。

<!--
<p>これは脚注部分を作成するサンプルコードです<sup><a href="#footnotes" id="reference-noot">1</a></sup>。</p>
-->

表示例
これは脚注部分を作成するサンプルコードです1。

続いて、上記でナンバリングされた該当テキストの脚注に、情報を補足出来るエリアを作ります。

<!--
<ol>
  <li id="footnotes">これは脚注表示部分を作成するサンプルコードです。<a href="#reference-noot">↩</a></li>
</ol>
-->

表示例
1.これは脚注表示部分を作成するサンプルコードです↩

上記の表記で脚注としての補足情報を連ねていくことも可能です。

複数の脚注表記をしていこうとするとコードサンプルが複雑^*3になっていくため省略しています。

今後もWordPressの脚注機能追加に期待

脚注機能は、その装飾、脚注情報のポップアップ表示など、まだまだ多くの機能を実装することが出来ます。

WordPressの標準に機能になった脚注ブロックに、今後も機能が追加されていき、補足情報の扱いやすさが向上していくと嬉しいです。

最後まで読んでいただきありがとうございました。

WordPressの脚注ブロック実装に関する脚注

1. セクションとはカラムを入れるレイアウトの入れ物になるようなイメージのWeb用語です。関連記事：カラムとは？Webサイトの構成で重要なカラム数について分かりやすく解説｜ユニコブログ®︎
   ↩︎
2. WordPress 6.3 “Lionel”（英語）August 8, 2023.｜WordPress.org 公式サイト ↩︎
3. HTMLLiving Standard｜4.14.4 Footnotes｜HTML Living Standard  ↩︎