【16日目】ナビゲーションバーに取り掛かるも別件で悪戦苦闘
Posted: Last Update:
お小遣いを稼げるサイトを目指して、16日目です。
ロードマップ
現在の進捗をロードマップで見ると、こんな感じです。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メイン部分の構成を作成
- リンクを開いた時の動きを作成
- ナビゲーションバーの作成←今ここ
- メインコンテンツの作成
- 関連情報エリアの作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
今日はナビゲーションバーの作成にとりかかりたい
少しずつですが、サイトの公開が近くなっていてワクワクしています。昨日は.htaccessの設定がやっと終わって、ナビゲーションバーの作成に取り掛かったところで時間切れになってしまいました。
ナビゲーションバーの設定で今日入れ込みたいものは、以下の通りです。- サイトの紹介3行くらい
- 最新記事5件
- 記事一覧へのリンク
ナビゲーションバーの前にリンクの書き方を確認
しかし！ナビゲーションバーの前に気になっていたことがあるので解決したいと思います。それは、絶対リンクと相対リンク。PHPの「include」で相対パスを指定していると、同じ階層にまずファイルを見に行って、ファイルがなければ上の階層に見に行って、という規則性があるらしいのです。しかも、ファイルの置き場所ではなく、呼び出したPHPの階層に従います。ひとつひとつ頭をひねって設定すればいいのかもしれませんが、「やっぱりファイルの置き場所を変えたい」なんて、昨日のように思いついたら、PHPまでいちいち書き換えなくてはいけません。そんな面倒なことにならないように、最初から絶対パスを使ってしまえば便利かな、と思うのです。
検索したところ、結構簡単に答えが見つかりました。「$_SERVER['HTTP_HOST']」でドメインを、「dirname(__FILE__)」でファイルの置き場所を取得してくれるそうです。実際に書いたコードが下記。&myurlがサイト上にリンクを乗せたいとき用、$mypathはファイルを指定したいとき用です。これをIndex.phpに置いておくと、一番上の階層にあるindex.phpを基準にデータを取得してくれます。
$myurl = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'];
?>
<?php
$mypath = dirname(__FILE__);
?>
リンクを置きたいときは「$myurl/blog/20200915」と書くと「https://独自ドメイン/blog/20200915」というリンクが得られます。ファイルパスは「$mypath/blog/20200915.txt」で「ファイル置き場/blog/20200915.txt」という結果が得られます。なんて便利なんでしょう。ファイルの場所を移したときも、ほんの少しの修正で済みますね。せっかくコードを変えたので、今ある設定をちょっと変えてきます。
15分ほどかかりましたが、無事完了しました。リンクもきちんと動いています。
ナビゲーションバーにサイトの紹介を添える
懸念事項を解消できたので、ナビゲーションバーの作業に取り掛かりましょう。まずは「1.サイトの紹介3行くらい」から。この辺りはただの文章なので、迷わずにできました。でも、見栄えが悪い…。小見出しに装飾をつけてみます。
HTMLブログを作成してお小遣い稼ぎを目指す日記。ど素人でもネット検索だけでサイトの構築はできるのか！？
color:#008000;
font-family:sans-serif,sans-serif;
font-size: small;
font-weight:bolder;
margin: 0em 0em 0em 0em ;
padding: 0.3em 0.3em 0.3em 0.3em ;
}
画面を表示するとなんだかいまいちでした…。他の部分も作って全体のバランスを見てから修正しましょうか。
ナビゲーションバーに最新記事5件を書き出す
次の「2.最新記事5件」に取り掛かります。リンクのテストの際に最新投稿を5件呼び出すPHPを作っていたので、それをちまちま書き直してみました。
if(isset($_GET['category'])) { $category = $_GET['category']; }
if(isset($_GET['filenum'])) { $filenum = $_GET['filenum']; }
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$Oldest=20200801;
$i = 1;
do {
$date = new datetime($today);
$filename = "./$category/$today.txt";
if (file_exists($filename)) {
echo "<a href=/$category/$today>" , $date->format('Y年m月d日') , "の日記</a></br>";
$i = $i+1;
}
$date->sub(new DateInterval('P0Y0M1D'));
$today = $date->format('Ymd');
} while ($i < 6);
?>
ついでに全体を見ながら小見出しとかのバランスも変えてみました。実際の画面がこんな感じ。個人的にシンプルな物は好きですが、あまりにそっけないですね…。
日付だけではなく、日記の内容も表示したい
そもそもリンクに表示するのが日付だけ、というのがなんともそっけないですよね。日付は小さく、日記に見出しを入れたい。PHPでファイルの内容を読み込むのが正しい処理だと思うのですが、それには、今テキストでベタ打ちしている日記を修正しなくてはいけません。この作業は最後にしようと思っていましたが、今やらないと駄目みたいです。なにより、今やらないとナビゲーションバーの配置が決まらない…。
急遽、日記にPHP文を入れ込む作業を行いたいと思います。まずは何が必要か決めましょう。計画大事です。
情報として欲しいのは次の項目- 日付
- 更新日時（誤字脱字を変えたとか）
- タイトル
- 本文
- 日記内の箇条書きの見出し（亀！）
- 日記内で紹介しているPHPとかの構文をベタ打ちする機能
テキストファイル内の変数をPHPで呼び出す
これまでPHPでファイル全体を呼び出すことはありましたが、ファイルの一部を読み出すのは初めてです。いろいろ検索して、まず「ファイルで変数を指定」した後に、呼び出す方のPHPで「ファイルをRequire」し「変数を呼び出す」といいらしいことが分かりました。テスト用にtest4.phpというファイルを作って、コードを書いてみました。
日記側に入れたPHP$articledate = 20200914;
$articleeditdate = 20200914;
$articletitle = "【Day14】.htaccessの設定完了！ナビゲーションバーに取り掛かる";
$articlebody = "本文（略）"
?>
require_once("$mypath/$category/$filenum.txt");
echo "<h1>",$articletitle."</h1>";
echo "投稿日:",$articledate,"</br>";
echo "最終更新:",$articleeditdate,"</br>";
echo $articlebody;
?>
動かすと、こんな感じ。欲しいものの「1. 日付」から「4. 本文」項目は全て入れることができました。
ついでに日記の本文も呼び出したい
ここまでやったので、日記の本文も呼び出してしまいたい！本文に「こんな構文を書きました」とPHPを書いているので、今のままで呼び出すとそのPHPが動いてしまうんですよね。紹介しているPHPの内容によってはエラーが返されてページ自体が表示できなかったりします。回避するためには、PHP構文を「PHP構文ではない」とサーバーを騙さなくてはいけない。つまり、「6. 日記内で紹介しているPHPとかの構文をベタ打ちする機能」がないと本文表示ができません。
ここから検索で悪銭苦闘しました…。検索しても、検索しても、正解に行きつかない…。とりあえず、PHPの解説に「Nowdoc」構文なるものがあったので使ってみることにしました。
「Nowdoc」構文を使ったら、文字が全て文字として認識されるのでエラーが起きなくなりました！それでも、なぜかPHP構文として認識されてしまうところがたまにあるのですが、詳しく読み込まないと分からなそうなのでひとまず後回しにします。メインパーツを作るときにまた詳しく調べないといけないので。
まずは、ナビゲーションの作成に必要な日記5日分だけ変更しておきます。それでもけっこう重労働…。そして表示がおかしいけれど、今は気にしないことにします。ナビゲーションバーを今日中に形にしたい！
ナビゲーションバー、なかなか完成しません
今日中に形にしたかった…。リンクをああでもないこうでもないと弄っているうちに時間が来てしまいました。もう少しやりたいけど、けじめ大事です。明日はナビゲーションバーのブログへのリンクをもう少しおしゃれにしたいです。やることをメモしておきます。
- なんとなくおしゃれなボックスでリンクを囲む
- 日付は薄い字で小さく表示(PHPで記事から持ってくる)
- タイトルを表示(PHPで記事から持ってくる)
- 亀入れる？（←どうなの？）
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
