【46日目】PHPで目次作成1-小見出しから目次を作る
Posted: Last Update:
サイトを作成し始めて46日。昨日は記事本文の見栄えを良くしようと奮闘しましたが、あまりに美的センスがなさ過ぎて、奮闘しただけに終りました…。無謀な戦いは一度脇に置いて、今日は記事に目次を入れたいと思います。
ロードマップ
ちなみに、ロードマップで進捗を見ると下記の通りです。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- コンテンツを充実させる（他の作業と同時進行）
- サイトを見てもらえるようにサーチエンジンに登録する
- sitemap.xmlとRSSを作成する
- コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
- お問い合わせページを作る
- 検索ボックスを作る
- サイトマップページを作る
- 個人情報に関するページを作る
- SEOとセキュリティについて調べ、対応する
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
今日やること
ロードマップの「コンテンツに合わせてサイトを修正」でやりたいことをリスト化しています。7つのうち4つは終わっていて、残りは3つなのです。ただ、昨日挑戦した「ブログ/記事ページの見栄えを整え」る作業は全く進まなかったです…。どんなデザインにすればいいのか、さっぱり分からなくて迷走しました。迷走しまくっている様子は昨日の日記を見ていただければ…。迷走しているだけで作業が進まないので、今日は「記事に目次を入れる」作業をしたいと思います！
ちなみにやることリストはこんな感じ- ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
- ブログと記事の、それぞれのトップページを作る ←完了
- サイトのトップページを作り直す ←完了
- ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする
- 日記の「何日目」を自動で入れられるようにする
- ファビコンを作る ←完了
- 記事に目次を入れる ←今日やりたいこと
記事に目次を入れる
これまで色々と検索してきた中で、「記事に目次があるとページ離脱率が下がるよ」という情報に出会いました。日本語ではPHPで目次を作る方法があまり紹介されていないのですが、英語で「how to create table of contents with PHP」と検索すると、方法がわんさか出てきます。今日はそれらのページを参考に、目次を入れていきたいです。
このサイトには、開発記事と日記がありますが、目次を入れるのは開発記事の方だけにします。だらだら書いているだけの日記に目次を入れても仕方ないし。
あらたにテスト用環境をつくって、そちらで作業しましょう。失敗しても本番用ファイルには影響が出ません！
小見出しを目次のリストに引っ張ってくる
いろいろと検索をしながら、まずは小見出しh2とh3を、目次に格納することに成功。「$articlebody」は記事の本文です。
$html_string = $articlebody;
$pattern = '/<h[2-3]*[^>]*>.*?<\/h[2-3]>/';
$whocares = preg_match_all($pattern,$html_string,$winners);
$heads = implode("\n",$winners[0]);
$heads = preg_replace('/<h([1-3])>/','<li class="toc$1">',$heads);
$heads = preg_replace('/<\/h[1-3]>/','</li>',$heads);
$contents = '<div>
<p>目次</p>
<ul>
'.$heads.'
</ul>
</div>';
echo $contents;
?>
実際の画像がこちら。(分かりやすいように背景をつけています。)
今日はここまで
作業を中断してギターの弦を張り替えていたらすっかり時間が経ってました…。クラシックギターをひくのですが、今回初めてダダリオというメーカーの「プロアルテ」という弦を使ってみました。楽器と相性なのか、弦本来の持ち味なのか、音が硬いのにこもってる。そして4番弦がやけにぼよんぼよんした音になる…。次は何を試してみようかな。今のところ、オーガスチンの黒が一番好きです。ギターに興味のない方からしたら、なんのこっちゃ、という話ですが。
明日は、目次にリンクをつけて読みたいところに飛べるようにするのと、小見出しの階層に合わせて目次も階層構造にしていきたいと思います。では、また明日。
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
