kamenokoki.com

【66日目】サイトマップページを作成してみた-2

Posted:  Last Update:

一昨日からサイトマップページの作成に取り掛かっています。記事をカテゴリーごとに分類しようとしていますが、一昨日は方針を決めるだけで終り、昨日はPHPの使い方を研究して終りました。今日は何とかカテゴリーページの完成までこぎつけたいです。

昨日立てた今日の目標

昨日はPHPを使って、記事カテゴリーの詳細をWEBサイトに書き出す所までこぎつけました。.htaccessなども変更して、「https://kamenokoki.com/article/welcome/CATEGORY」という「CATEGORY」つきのURLのページも表示できるようになりました。表示できるようになっただけで、まだページ内容がないのですが…(汗)

昨日はそこまでで作業時間タイムアップになってしまったので、今日やりたいことをまとめて昨日は終了。昨日立てた予定にそって、今日は作業をしていきます!

  • カテゴリーごとのイメージ画像を作成する
  • カテゴリーごとにイメージ画像入りのカードを作る
  • カテゴリーごとのページを作り、記事を表示する
  • 存在しないカテゴリーは404ページに飛ばすように処理する

カテゴリーごとのイメージ画像を作成する

最初は「カテゴリーごとのイメージ画像を作成」します。「作成」と言いつつ、無料で画像を配布してくれている所から拝借しているだけです!

今日もODANにお世話になろうと思います。

拾ってくるだけ、なのですが、適した画像を探したり、大きさを変えたり、webpに変換したり、合計で30分ほどかかってしまいました…。どんな画像を拾ってきたかは後ほど、ページに表示できるようになったらスクショを貼ります。

カテゴリーごとにイメージ画像入りのカードを作る

ここからは「亀の工期(開発記事)」のページにアクセスしたときの見栄えを整える作業です。カテゴリーごとに、画像付きのカード(おしゃれなリンク)を作ります。

既にカード(箱)は「最新投稿」の箱があるので、こちらを流用しました。PHPを少し書き換えて…。少し、

…けっこう時間がかかりましたが、完成です!

カテゴリーごとにイメージ画像入りのカードを作る

こうやって見ると、画像に統一感がないですね…。画像については後でゆっくり考えます。説明文も適当に書き過ぎました。もう少し練らないと…。こちらも改めて時間をとって検討しましょう。

こちらがPHP。変数だらけです(笑)。 divの「id="latestchild"」にCSSの「grid」を適用して箱を作っています。

<h3>カテゴリー別</h3>
<div id="latestparent">
    <?php
    require ("$mypath/top/category.txt");
    foreach($scategory as $shortcategory){
        echo '
        <a href='
, "$myurl/article/welcome/$shortcategory", '>
            <div id="latestchild">
                <div id="latestcimg"><img src="'
,$scategoryimages[$shortcategory],'" alt="',$scategoryname[$shortcategory],'の記事のイメージ画像"></div>
                <div id="latestctitle"><b> '
,$scategoryname[$shortcategory], '</b></div>
                <div id="latestcdescription">'
,$scategorydescription[$shortcategory], '</div>
            </div>
        </a>'
;
    }        
    ?>

</div>

カテゴリーごとのページを作り、記事を表示する

次に、「https://kamenokoki.com/article/welcome/CATEGORY」の「CATEGORY」が設定されていた場合に、カテゴリーごとのページに飛ばす、という作業をしていきます。

PHPで制御します。いろいろ調べました!時間がかかりました!でも完成です。

「rsort」という新たなPHPの配列を並び替える構文も学びました!格納した数値を、大きい順に並べてくれる便利な構文です。「rsort」を使うことで、カテゴリーに記事を随時追加して行っても、新しい記事から順番に表示することができます。

「カテゴリー:PHP」のページがこんな感じです。

カテゴリーごとのページを作り、記事を表示する

そして、書いたPHPはこのような感じになっています。「if(isset($smallcat))」で「CATEGORY」が設定されていたら、カテゴリーページに飛ばしています。この後に、elseで「CATEGORY」が設定されていない場合の処理をしています。elseの内容は前の章のコードです。あまりコードが美しくないので、また整理したいのですが、今日はこれが限界だ!

<?php
if(isset($smallcat)){
?>

<div id="maintoplink">
    <a href="<?php echo $myurl;?>">ホーム</a> > <a href="<?php echo $myurl.'/'.$urlfolder.'/welcome';?>">
        <?php require("$mypath/$filefolder/welcome.txt"); echo $wtitle."</a>> "; ?>
</div>
<?php
$shortcategory = $smallcat;
require ("$mypath/top/category.txt");
    echo "<h1>カテゴリー : $scategoryname[$shortcategory]</h2>";
    echo "<h3>記事一覧</h3>";
    echo '<div id="latestparent">';
        rsort($scategoryarticle[$shortcategory]);
        foreach($scategoryarticle[$shortcategory] as $value){
            $filename = "$mypath/articles/$value.txt";
            if (file_exists($filename)) {
                require($filename);
                $date = new datetime($value);
                echo '
                <a href='
, "$myurl/article/$value", '>
                    <div id="latestchild">
                        <div id="latestcimg"><img src="'
,$articletimg,'" alt="',$date->format('Y.m.d'),'記事のイメージ画像"></div>
                        <div id="latestctitle"><b> '
,$articletitle, '</b></div>
                        <div id="latestcdescription">'
,$articledescription, '</div>
                        <div id="indexlinktime">'
, $date->format('Y.m.d') ,'</div>
                 </div>
                </a>'
;
            }
        }
    echo '</div>';
}

今日はここまで

今日はサイトマップ、というかカテゴリーページの作成を完了させたかったのですが、時間が来たのでここまでにします。明日はもう少し進めたい。明日以降の計画です。4番までは明日中に終わらせて、公開できるようにしたいです!

  1. 存在しないカテゴリーは404ページに飛ばすように処理する
  2. トップページ、記事ページの「最新投稿」を開発記事3件に変更する
  3. トップページの「開発記事」は記事ではなくカテゴリーを表示する
  4. カテゴリーページの画像に統一感を出し、案内文をよく吟味する
  5. カテゴリーも含めたサイトマップページを作る

そういえば、姉妹サイト「亀のチャレンジ」では、100日で漢検一級合格を目指すチャレンジを2020年11月6日から開始予定です。そちらもよろしくお願いします。

それでは、また明日!

おまけのロードマップ

サイト作成がどのくらい進んでいるかロードマップで進捗を見ると、こんな感じになっています。

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る ←今ここ
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする

亀の子に連絡

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

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

広告