ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【47日目】PHPで目次作成2-目次から記事へリンクさせる

Posted:2020.10.16　 Last Update:2020.10.21

サイトを作成し始めて47日。昨日は記事にPHPで目次を入れる作業を開始しました。なんとか小見出しの情報を呼び出すことには成功。しかし、途中で現実逃避気味にギターの弦を張り替えている間に、昨日は時間がなくなってしまいました。今日は昨日の続きから作業をしたいと思います。

ロードマップ

ちなみに、ロードマップで進捗を見ると下記の通りです。

準備 - サイトの全体像を決める
使用するプログラミング言語を決めて環境を整える
サイトの基本構造を作って公開する
収益化に最適なサイトにアップグレードする

コンテンツを充実させる（他の作業と同時進行）
サイトを見てもらえるようにサーチエンジンに登録する
sitemap.xmlとRSSを作成する
コンテンツに合わせてサイトを修正、スマホにも対応する　←今ここ
お問い合わせページを作る
検索ボックスを作る
サイトマップページを作る
個人情報に関するページを作る
SEOとセキュリティについて調べ、対応する

GoogleアドセンスとAmazonアソシエイトの申し込みをする
ローカルで簡単に入力ができるようにフォームを作る
フォローアップ - より収益化に向いたサイト構造に変更する

今日やること

昨日は、記事本文の小見出しを目次部分に呼び出してくるPHPを完成させました。昨日の成果を画像で確認するとこんな感じです。 2020.10.15 目次の下地ができた

今日は、目次部分から小見出し部分にハイパーリンクできるようにするのと、目次部分を小見出しの階層に合わせた階層構造にすることが目標です。両方できるでしょうか。昨日の作業から引き続き、テスト環境で試験しています。

ハイパーリンクを目次に入れたい

まずは「目次部分から小見出し部分にハイパーリンク」する作業から取り掛かりたいと思います。実は昨日、この件について色々調べているうちに、思考停止に陥って、クラシックギターの弦の張り変えに逃げたんですよね。

ページ内のハイパーリンクを機能させるためには、クリックするリンク側に「a href="#ID"」というリンクをつけて、リンクされる側に「id="ID"」というタグが必要になります。しかも、リンクごとに違うIDが必要です。記事を書き始めたときには小見出しにリンクさせようとは思っていなかった私。当然、小見出しには「id="ID"」というタグはつけていません！

なんとか自動で設置できないものかと検索しまくりました。英語で解読が難しいんだけどこんな記事に出会った。さっそく使ってみます。

小見出しにIDをつける-失敗

検索して出会ったこの記事を必死に解読して、自分なりに小見出しにIDをつけてみました。PHPはこんな感じ。（$articlebodyは記事本文です）

<?php
$articlebody = preg_replace_callback( '/(\<h[2-3](.*?))\>(.*)(<\/h[2-3]>)/i', function( $matches ) {

if ( ! stripos( $matches[0], 'id=' ) ) :
$matches[0] = $matches[1] . $matches[2] . ' id="' . $matches[3] . '">' . $matches[3] . $matches[4];
endif;
return $matches[0];
}, $articlebody );

echo '<div id="maincontents">'.$articlebody.'</div>';
?>

一応IDはついたのですが…。これだと、IDが小見出しの日本語になってしまいます。出力されたソースを見ると下記のような、長いIDがついてしまう。なんとか短いIDをつけられないものでしょうか…。

<h2 id="自作サイト作成者に必要なローカル環境とは">自作サイト作成者に必要なローカル環境とは</h2>

小見出しにIDをつける-成功

また色々と検索して、「preg_replace」をループ処理できる可能性に出会いました。「preg_match_all」で文書内の条件に当てはまる文字列を「PREG_SET_ORDER」で配列に格納できるらしい。早速やってみます。

<?php
$headingset = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
foreach( $matches as $heading ){

$i++;
$id = 'heading-' . $i;
$chapter = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', '<$1 id ="' . $id . '">$2</$3>', $heading[0]);
$articlebody = preg_replace( $headingset, $chapter, $articlebody, 1);

}
echo '<div id="maincontents">'.$articlebody.'</div>';
?>

できた！本文の小見出しに、無事に短いIDが付きました！先ほどの、日本語の長いIDとは大違い。

<h2 id ="heading-1">自作サイト作成者に必要なローカル環境とは</h2>

目次に小見出しへのリンクをつける

昨日、目次を作るのにいちおうは成功してました。でも、昨日のコードは今日のID付の失敗と同様に、一気に書き出しをしています。一気に書き出ししていると、番号順のリンクがつけられません。小見出しにIDをつけたときと同様に、「PREG_SET_ORDER」で配列を作って、foreachで順番に処理するように書き直していきたいと思います。

先ほど勉強したばかりだったので意外と簡単にできた！嬉しい！下記にコードをご紹介。

<?php
echo '<div><p>目次</p><ul>';
$headingset = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
foreach( $matches as $heading ){

$i++;
$id = 'heading-' . $i;
$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);
echo $TOC;

}
echo "\n".'</ul></div>';
?>

今のところの画像がこちら。見た目では昨日と代り映えしませんが、機能はパワーアップしてます！目次内の文字が緑色でリンクになっているのが、…画像だと分かりにくいですね。文字が緑色でリンクになっているのに注目してほしい…。 2020.10.16 目次にリンクを入れた

今日はここまで

さくさく進んでいるつもりでしたが、意外と時間を食っていました。今日の作業はここまで。

明日やりたいことを書き出しておきます。3つ終われば、目次は完成です。明日全部終わらせたい！

目次を階層構造にする
目次をおしゃれにする
記事にのみ目次を入れて、日記には入れないようにする