kamenokoki.com

【182日目】自作ブログ投稿フォーム:リストをリスト形式で画面に表示させる

Posted:  Last Update:

しばらくお休みしていた「記事の投稿ページを作成する」プロジェクト。今日再開します!以前やったことを思い出しつつ、今日は「リストはリスト形式で表示させたい」という課題をこなしていこうと思います。

ここまでの成果

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

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

最後にやっていた作業を自分のブログで読み返しています。最後がこちらの記事のようですね。ご興味があったら一緒に読み返してください。

色々表示できるようになったらデザインが気になったので、デザインの修正をしていたようです。で、最終的に今の状態がこんな感じでした。

デザインをもう少し調整してみる

今日やること

前回の作業の最後にやりたいこともリストアップしていました!

  • コードを自動で色分けして表示させたい
  • リストはリスト形式で表示させたい
  • 画像のPHPがループしないように設定し、現在のPHPから余分を取り除きたい
  • 文章中のリンクをリンク表示させたい
  • 文章中の装飾をそのまま表示したい(太字や赤字など)

できそうなことからやりましょう。2番目の「リストはリスト形式で表示させたい」かな?。なんとかなりそうです。

リストはリスト形式で表示させる

先日書いたPHPを思い出すのに一苦労…。list形式の部分を検索して、編集画面にあうように書き換えていました。

今現在はリストの一番大きなくくり「ul」と「ol」を検索しています。「ul」と「ol」の中で、さらに「li」を検索して表示させるようにしていきましょう。

で、↑上の文章からだいぶ時間はかかりましたが、こんな感じにできました!

リストはリスト形式で表示させる

作業前のスクショを取っておけばよかったです…!どう変わったのかよくわからないですよね…。ちょっと画面のデザインが違いますが、以前は下のスクショの一番下のボックスのように表示されていました。

リストを読み込む

ご参考までにPHPはこのように書いています。

$ulset = '/<ul>(.*?)<\/ul>/s';
preg_match_all($ulset, $articlebody1, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $ullists){
$i++;
$id = 'ullist-' .$i;
$idwp = "'".$id."'";
$ullist = preg_replace( '/<ul>(.+?)<\/ul>/s',
'<div class="entry">ULリスト
$1
</div>', $ullists[0]);

$liset = '/<li>(.*?)<\/li>/s';
preg_match_all($liset, $ullist, $matches1, PREG_SET_ORDER);
$i = 0;
foreach($matches1 as $lilists){
$i++;
$id = 'lilist-' .$i;
$idwp = "'".$id."'";
$lilist = preg_replace( '/<li>(.+?)<\/li>/s',
'<label for="description">ul'.$i.'(<span id="'.$id.'">0</span>文字)</label>
<textarea type="text" id="small" name="'.$id.'" rows="4" cols="50" onkeyup="countLength(value, '.$idwp.');">$1</textarea>
', $lilists[0]);
$ullist = preg_replace($liset, $lilist, $ullist, 1);
}

$articlebody1 = preg_replace($ulset, $ullist, $articlebody1, 1);
}

今日はここまで

時間が来たので今日の作業はここまで!明日はまたリストの作業を進めていきたいです。

  • コードを自動で色分けして表示させたい
  • リストはリスト形式で表示させたい ←完了
  • 画像のPHPがループしないように設定し、現在のPHPから余分を取り除きたい
  • 文章中のリンクをリンク表示させたい
  • 文章中の装飾をそのまま表示したい(太字や赤字など)
記事をシェアする

亀の子に連絡

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

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

広告