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

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

Posted:2020.11.04　 Last Update:2020.11.04

一昨日からサイトマップページの作成に取り掛かっています。記事をカテゴリーごとに分類しようとしていますが、一昨日は方針を決めるだけで終り、昨日は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番までは明日中に終わらせて、公開できるようにしたいです！

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

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

それでは、また明日！

おまけのロードマップ

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

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

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

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