制作・管理ツールスマホPC・MacガジェットアプリMoneyOfficeLife#Amazon#Bluetooth#Composer#CSS#Docker#GAS#GoogleCloud#Googleマップ#Homebrew#HTML#JavaScript#Laravel#Node.js#PHP#ReactNative#SNS#SQL#Tasker#VSCode#WebAPI#Wi-Fi・LAN#WordPress#アクセス解析#サーバー#スプレッドシート#スマートホーム#スマホカメラ#データ通信#ネットショップ#ネット広告#ネット証券#ネット銀行#ファイル共有#ブラウザ#ポイント#不具合#動画アプリ#安い・お得#本・電子書籍#終了・廃止#購入アイテム#電子マネー・電子決済#電話・通話TwitterRSSFeedly2021/03/13Web・App制作#PHP#WordPress【WordPress・PHP】投稿ページの目次を自動で出力する例|プラグインなしWordPressでウェブサイトやブログを作成していると、ページ内に目次を作成したい場合があるかもしれませんが、毎回、自分自身で目次を作成するのは面倒だと思います。今回は、そのような場合に使用できるソースコードの例となり、プラグインを使わずPHPでページ内の目次を自動で作成し出力します。PHPではなく、jQueryを使い目次を出力することも可能です。詳しくは以下のリンク先を参考にしてみてください。今回の例では、投稿ページの本文内に、属性を持たないh2・h3要素が3つ以上ある場合、それらの要素から自動で目次を作成して出力します。目次の先頭の項目がh2要素となる場合のみに使用できます。目次として出力されるHTMLはol要素で出力され、目次の項目にはページ内のそれぞれの箇所へのアンカーリンクを追加します。ページ内でh2要素の次にh3要素がある場合には、目次が階層化されol要素がネスト(入れ子)として出力されます。以下がソースコード例となり、functions.phpに記述します。※次のループで<li>の直下に<ol>タグを出力する場合ががあるので、ここでは<li>タグを閉じていません。例のソースコードでは、投稿や固定ページの本文を扱えるフィルターフックのthe_contentを使用して目次を作成します。そのフィルターフックの関数内では、preg_match_allで検索したh2・h3要素を、foreachループで扱い目次を作成し、投稿ページの本文の直前に出力します。以下は、ソースコードのポイントとなる箇所の説明となります。以下の箇所では、投稿ページの本文内にあるh2・h3要素から目次を作成するため、まずはpreg_match_all()を使用して本文内にある属性を持たないh2・h3要素を検索します。);preg_match_all関数は、第2引数に指定した文字列から、第1引数にしていした正規表現のパターンを検索し、第3引数にマッチした文字列を格納します。第4引数は、取得する配列の順序を指定します。上記のpreg_match_all関数では引数は以下となります。第3引数は、$matchesとし、検索でマッチした「h2要素」「h3要素」と「h2要素の内容」「h3要素の内容」をすべてを多次元配列で格納。PREG_SET_ORDERを指定preg_match_all関数の詳細については、以下のリンク先を参考にしてみてください。以下の箇所では、ページ内のh2・h3要素が3つ以上の場合に、目次を出力する条件分岐を作成します。ループ内で使用する変数を定義します。作成する目次では、目次内の項目をクリックするとページ内のh2・h3要素の箇所へ移動させるため、ページ内のh2・h3タグにIDを追加します。そのため、以下の箇所では、ID属性を付与したh2・h3要素を、ページ内の属性を持たないh2・h3要素と置換します。中略}上記、foreachループで扱うpreg_match_all関数の引数$matchesは、検索してヒットした「要素」と「要素の内容」が格納されている多次元配列となります。$matches内の$element[0]には「要素」が格納され、$element[1]には「要素の内容」が格納されます。上記のforeachループ内の箇所では、preg_replaceを使い、$element[0]内のh2・h3要素に、id属性を付与したものを作成して$chapterに格納します。一度preg_replaceを使い、今度は本文内から$element[0]のh2・h3要素を検索して、id属性を付与したh2・h3要素に置換します。preg_replace関数については以下のリンク先を参考にしてみてください。以下の箇所では、現在のループで扱っている要素がh2かh3を判断して変数$levelの値を変更します。例では、foreachループでh2・h3要素を扱い目次を作成しますが、h2・h3要素の順番によって目次を入れ子にします。そのため、以下の箇所では、現在の目次の階層を判断し、目次で使用するHTMLタグや変数$hierarchyの値を変更しています。以下の箇所では、「要素の内容」が格納されている$element[1]から、目次の項目を作成します。次のループで扱う要素によっては、HTMLタグを変更し目次の入れ子の状態を変更したいため、ここでは<li>タグを閉じていません。※次のループで<li>の直下に<ol>タグを出力する場合ががあるので、ここでは<li>タグを閉じていません。'</a>';目次の最後の項目をどの要素から作成したかによりタグの閉じ方を変更foreachループから抜けると目次の項目はHTMLで作成された状態になりますが、目次の最後の項目をどの要素から作成したかによってHTMLタグの状態が変わります。そのため、以下の箇所では、条件分岐を使い最後に閉じるHTMLタグを変更します。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。