kamenokoki.com

【160日目】自作ブログ投稿フォーム:本文の見出しを読み込む

Posted:  Last Update:

「記事の投稿ページを作成する」プロジェクト。編集ページのブログの基本情報部分のデザインを整え、ブログ本文部分もデザインを完了できました。今日は本文の小見出しの読み込みに挑戦したいと思います

ここまでの成果

今手打ちでタグとかも書いている入力を、フォームで簡単にできるようにするのが目標。一大プロジェクト「記事の投稿ページを作成する」!ここまでの作業で完了したことは大きく次の4つです。

  1. フォームのデザインを整えた
  2. ページ左側のMenuからサイトを選ぶと、真ん中に記事一覧ページを表示させられるようになった
  3. 記事のクリックで編集ページに遷移できるようになった
  4. 編集ページに記事の一部を表示できるようになった

で、今現在読み込めている「記事の一部」がスクリーンショットのような状態です。一昨日はjavascriptを使って、文字数をカウント指せたりもしました。

ブログ本文呼び出し

小見出しを読み込みたい

今日は、小見出しを読み込むPHPを書いていきたいと思います。h2-h5までを読み込んで、代入していきます。

過去に記事に目次をつけるのに、h2-h3を抽出して書き出すPHPを作ったことがあるので使いまわします!

いろいろいじくって、無事呼び出せました!画像の通り、目次の深さによる違いなどを作っていないので、本当に呼び出しただけになってしまいました…。ちょっと工夫が必要ですね。

小見出しを読み込みたい

ちなみに書いたPHPはこんな感じです。

<?php
$headingset = '/<h[2-5]>(.*?)<\/h[2-5]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $heading){
$i++;
$id = 'heading-' . $i;
$mylevel = substr( $heading[0] , 2 ,1);
$headings = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', '<label for="description">小見出し「$1」</label><br><input type="text" id="h2" name="h2" value="$2"><br>', $heading[0]);
echo $headings;
}
?>

今日はここまで

なかなか進みませんが、今日はここまで!PHPを書くのに時間がかかって、今日は時間切れになってしまいました。

読み込みがうまくいっているので、明日は本文のパラグラフを読み込んでみようかと思います。形式を整えるのはその後にしよう!では、また明日です!

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告