kamenokoki.com

【15日目】.htaccessの設定完了!ナビゲーションバーに取り掛かる

Posted:  Last Update:

お小遣いを稼げるサイトを目指して、15日目です。時間だけが順調に過ぎていきます。サイトの進み具合は亀の歩みです。

ロードマップ

全体の進捗をロードマップでみるとこんな感じ

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
    • 大枠の作成
    • ヘッダの作成
    • フッタの作成
    • メイン部分の構成を作成
    • リンクを開いた時の動きを作成 ← 今ここ
    • ナビゲーションバーの作成
    • メインコンテンツの作成
    • 関連情報エリアの作成
    • 公開
  • 収益化に最適なサイトにアップグレードする
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

昨日残した.htaccessの課題

昨日は.htaccessを使って短縮URLを設定しました。本来なら上のURLになるところを、下のURLで呼び出せるように設定できて満足です。
https://ドメイン名/index.html?category=blog&filenum=20200911
https://ドメイン名/blog/20200911

.htaccessで残っている課題は以下の通り
  1. index.phpに直接リンクすると、とっても時間がかかる
  2. 存在しないファイル名に接続してもページが表示されてしまう。エラーページに飛びたい
  3. txtファイルをブラウザでは呼び出せないようにしたい

元気なうちに.htaccessの設定について見ていきましょうか。昨日も.htaccessの設定に苦労して途中で何回も休憩を挟みました。今日は行き詰ったら次のことをやりたいと思います。

元気なうちに残しておいた課題を片付けよう

では、「1. index.phpに直接リンクすると、とっても時間がかかる」から。 検索したら、「RewriteRule ^index\.php$ - [L]」を.htaccessに追加することで回避できることが分かりました。これによってindex.phpに接続した場合には、その下の処理は行わないそうです。 いままでは「/blog/日付」というリンクを探しに行っていたのを、その前で動きを止めてしまうと言うことですね。最後の「[L]」かせ大事らしい。

次に「2. 存在しないファイル名に接続してもページが表示されてしまう。エラーページに飛びたい」。これは検索したところ、.htaccessではなく、ページのPHPで制御するらしいです。ということで、後回し。

「3. txtファイルをブラウザでは呼び出せないようにしたい。」に行きましょう。これも検索したらすぐに出てきました。こういうのを.htaccessにかき込むらしい。.htaccessも表示させたくないので、一緒に設定しました。

<Files ~ "(\.txt|\.htaccess)$">
deny from all
</Files>

しかし、入れて動かしてみたらどのページに行っても「Internal Server Error」が表示されてしまう。 でも、この数日で、賢くなりました。これはきっとApacheの仕様に違いない! C:\Apache24\conf\httpd.conf を開いて、「access」と検索。「LoadModule access_compat_module modules/mod_access_compat.so」が無効になっていたので、先頭の#を省いて有効化。 Apacheをいったん止めて再起動。 ドキドキしながらサイトを開く。Index.phpは問題なく動いています。 .txtファイルを開くと、きちんと404エラーのページに飛びました!

.htaccessの設定はこれでひとまず完了です。やったね! のちのち何か出てくるかもしれませんが、一安心です。

ナビゲーションバー作成の前に、表示しているページを明確化

では、次に進みましょう。ロードマップの次の項目、「ナビゲーションバーの作成」ですね。 その前に、ちょっと真ん中のページに仮のデータを入れたいと思います。これは、メインページの作成の際のたたき台にもなります。今日は、ページを移動すると異なるデータが表示されるようにしたいだけ。ナビゲーションバーはころころ変わらないので、真ん中のページで視覚的に捉えられるようにしたい。

test4.phpを作成して、まず、「index.php」に接続しているか、「blog/日付」に接続しているかの判定。大文字にしたり、という部分をちょっとはしょっていますが、コードはこんな感じです。

<?php
$path1 = $_SERVER["REQUEST_URI"]
if ($path1 == "/index.php") {
  echo "/index.phpを表示しています";
}
  else{
  if(isset($_GET['category'])) { $category = $_GET['category']; }
  if(isset($_GET['filenum'])) { $filenum = $_GET['filenum']; }
  echo $path1, "の日記を表示しています。</br></br></br>";
  include "./$category/$filenum.txt";
}
?>

表示させると、どのページを開いたよくわかります。
2020.09.14 ページごとに異なる文章が現れるようにした

ナビゲーションバーの作成方針をまず決めた

いよいよナビゲーションバーづくりに進みたいと思います。

必要なものをまず決めました。
  1. 広告エリア(これは契約できてから入れる)
  2. サイトの紹介3行くらい
  3. 最新記事5件
  4. 記事一覧へのリンク
  5. ショートコメントを送れる箱
ついでに、今まで余り気にしていなかったものも準備しないといけないことに気付いた。
  1. ヘッダのリンクづくり
  2. ヘッダに検索ボックスを入れる
  3. フッタリンクの作成

そして、お問い合わせページなどを作るために、メインコンテンツに加えなければいけないものも多数。ただ、公開してからでも遅くないものもあります。作り足せる柔軟性を持ったサイトにしなければいけないので、また.htaccessを弄らないといけないかも?

  1. お問い合わせページの作成
  2. ブログのフロントページ
  3. サイトポリシー
  4. 個人情報の取り扱い

どこにナビゲーション用のファイルを入れよう?

考えることは色々ありますが、ナビゲーションバー作りから始めましょうか。 とりあえず、ナビゲーションバーをテストする「test5.php」を作って、と思ったところで、このファイルをどこに格納するか迷う…。

今のフォルダ構成はこんな感じです。
  • index.php
  • .htaccess
  • 404error.php
  • partsフォルダ(トップページを構成するパーツを格納)
    • pcstyle.css
    • header.php
    • navigation.php
    • article.php
    • aside.php
    • footer.php
  • blogフォルダ(ブログを格納)
  • imagesフォルダ(画僧を格納)

partsの下にとりあえず格納するのが賢いのか、partsの下にさらにフォルダを作るのが賢いのか、はたまた、index.phpと同じ階層に、navigation用、article用、とフォルダを作っていくのがいいのか…。 迷った末に、index.phpと同じ階層に、それぞれのパーツごとのフォルダを作ることにしました。

変えた後はこんな感じ。
  • index.php
  • .htaccess
  • 404error.php
  • partsフォルダ(全てのページに共通するパーツを格納)
    • pcstyle.css
    • header.php
    • footer.php
    • ページに共通する画像も移してきた。
  • navigationフォルダ(ナビゲーションのパーツを格納)
    • navigation.php
  • mainフォルダ(メインコンテンツのパーツを格納)
    • article.php
  • asideフォルダ(関連情報のパーツを格納)
    • aside.php
  • blogフォルダ(ブログを格納しているフォルダ)
  • imagesフォルダ(画僧を格納しているフォルダ)

今日はここまで…

ファイルの設定に合わせてindex.phpの記述も変えたところで、ここで今日はタイムアップです。 明日はナビゲーションバーのこれを作っていきたいと思います。「1.広告エリア」と「5.ショートコメントを送れる箱」は公開してからでも遅くないので。

明日やること
  1. サイトの紹介3行くらい
  2. 最新記事5件
  3. 記事一覧へのリンク
記事をシェアする

亀の子に連絡

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

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

広告