ヘルニアクソ野郎エンジニアblog

~ヘルニアでHell near~

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう!⑧公開用トップページ、各種テンプレートの作成

calendar

前回、CMSの作成が完了しました。↓

 

今回より、公開する動的ページの作成に入りたいと思います。

WordPressで言えば、「テーマ」にあたる部分ですね。

公開するページのファイル構成は下記の通りです。

公開ページファイル構成1

動的ページとなりますので、各ページのテンプレートを作成します。また、haderなどの使いまわしが出来る部分は「パーツ」としてテンプレートを作成します。各ページテンプレートに、テンプレートパーツを埋め込んで使いまわす感じですね。

動的ページの作成の流れとしては、まず「モック」(見本)として、静的なページを作成しておきます。

今回、下のようなモックをあらかじめ準備しました。↓

一部抜粋し、ソースを載せておきます↓

モックが準備できれば、あとは静的な部分を動的に変更していくだけです。つまり、上記であれば下部を記事一覧表示部分のつもりで作成したので、そこをデータベースに紐づけて表示させる仕組みに変更していけば、おのずと動的ページに仕上がっていく感じです。

モックがあれば、phpの埋め込み場所やどういった挙動にさせたいかをイメージしやすいですし、マークアップしているidやclassをそのまま使いまわせるので、スタイリングも後々楽になります。

それでは、今回はトップページとなる「index.php」と、テンプレートパーツ各種を作成したいと思います。

※モックに関しての詳細は割愛します。ここをこう変更した等の説明をすれば、長くなりますので。以後、変更済みのモックをベースに説明していきます。

 

スポンサーリンク

テンプレートパーツ

header.php

cmsディレクトリにheader.phpを作成します。

各種ページで使いまわせるheader部を、テンプレパーツとして作成しておきます。

idやclass等、各種マークアップが今後色々出てきますが、モックを基準として同じ個所に配置しているので、あまり気にしないでください。

他はとくに説明はいらないですね。

 

pankuzu.php

cmsディレクトリにpankuzu.phpを作成します。

これはパンくずリストのテンプレになります。

少々長いですので、簡潔にまとまめす。

「GETパラメータで現在の位置を表示させる」プログラムになります。

今回、各ページの識別として、

$nには記事のID

$cateにはカテゴリーID

$pにはページID

の3つの変数を利用しています。パンくずリストの表示は、

home < カテゴリ < 記事タイトル

としているので、いづれかのidが取得できれば、そこからデータベースを参照し、リストをリンク付きで表示さる事ができます。

少し話が脱線しますが、WEBページはDOMの仕組みに従って表示されます。

例えばトップページを表示させた場合、別のファイルであるテンプレートモジュールを埋め込んでいれば、それも含めて「1ページ」であるかのように振舞います。

したがって、ファイルは違えど、「変数の値は維持される」のです。

ですので、$data[] などのよく利用する変数があるならば、都度中身をarray()などで空にしておく事が重要です。

 

nav.php

cmsディレクトリにnav.phpを作成します。

ナビゲーションメニューのテンプレになります。

データベースを参照し、「親メニュー」があれば、for文で全ての親メニューを表示させ、付随する「子メニュー」があれば、その中でwhileループで子メニューを表示させています。

このナビゲーションメニューは、スマホ用の横からスライドで出てくるmenuになっているので、javascriptで操作できるようにしています。(スライドなどのクリックイベント)

そこで、各メニューにidを振っておき、それをjavascriptに伝えることが出来れば、javascript側で各メニューのidに合わせたクリックイベントを自動で生成する事が可能です。

しかし、phpの値をjavascriptにそのまま渡すことは出来ません。

そこで、「一旦JSON形式に変換する」方法を用います。

$maxval = json_encode($max); とありますが、ここでphp形式の$max(親メニューの数)をJSON形式にエンコードして、$maxvalの変数に格納しています。

これを、下部にあるjavascriptのスクリプトタグ内でパースし、javascriptとしてオブジェクトを生成します。

let maxval = JSON.parse(“<?php echo $maxval;?>”);

これで、javascriptの「maxval」変数に、phpの$maxの値が渡す事が出来ました。

今回、メインのjavascriptは、外部scriptとして別途作成していますが(読み出しはbody閉じタグ前に設置)、DOMの仕組みに従っているため、そこでもmaxvalの変数が利用可能です。

ちなみに、親メニューが無い場合、$maxval = json_encode(999)としていますが、これは後ほど説明します。

それでは一旦、外部scriptのjavascriptを作成します。

 

javascript

cmsディレクトリにmain.jsを作成します。

これは主にスマホ画面時のメニューの出し入れなどの操作を行うクリックイベントになります。

クリックイベントについては、割愛します。

また、アニメーション(スクロールトップのアニメーション)は、anime.min.jsのライブラリを使用しています。これは別途DLして下さい。

※過去記事でanime.jsについてまとめていますので、こちらからDL可能です。

 

ここでは、先頭のif文について触れておきます。

先ほどphpからjavascriptに値を渡した maxval の値が999以外ならtrueとしています。

999は、前途した通り親メニューが無い場合に格納した値になりますが、これが値を空にするとNGが出たため、とりあえず適当に数字を格納しました。。それが999なだけです、他に方法はあるんでしょうけど。。

親メニューがあった場合、親メニューの数がmaxvalに格納されているので、これを元にforで回します。

for文の中では、各id名にiを加えた変数を作成し、それにクリックイベントを付随させています。

つまり、cmsで追加した親メニューの数だけ、その親メニューに対するクリックイベントを自動で生成してくれるのです。

これは結構便利です。

 

side.php

cmsディレクトリにside.phpを作成します。

これはsideエリアのテンプレートになります。

今回はこの部分に、「PC画面のカテゴリ」「固定記事のリンク」「プロフィール」「スポンサーリンク」「最近の投稿」を設置しました。

全てcmsからデータベースへ登録した内容が反映される仕組みになっています。

特に説明はいりませんね。

ちなみに、スマホ版のカテゴリメニューと、PC版のカテゴリメニューは表示の仕方を変えているので、cssでレスポンシブに表示を変えさせています。

 

footer.php

cmsディレクトリにfooter.phpを作成します。

これはfooterのテンプレートになります。

これも特に説明はいらないですね。外部スクリプトとしてmain.jsとanime.min.jsを読み込ませています。

 

トップページのテンプレート

index.php

cmsディレクトリにindex.phpを作成します。

これは公開するWEBサイトのトップページのテンプレートになります。全ての投稿記事の一覧を、ページネーションを利用して、このテンプレート1つで実現させます。

動的ページですので、このページ1つで、複数のページを再現する事が可能なんです。

※動的ページと静的ページの違いについては、過去記事でまとめています↓

 

モックを参考に、適切な箇所に<?php require_once(“”);?>を埋め込み、先ほど作成したモジュールテンプレートを読み込んでいます。

このページでは、モジュールテンプレートの他に、「ページ毎の投稿記事の一覧」を表示させたいので、そのプログラムを記述しています。ページ毎とは、例えばトップページの記事一覧の上限を5とした場合、投稿記事が21あれば「5ページ」必要になります。

そして、それぞれのページに適した記事の一覧を表示させなければなりません。

まずはその仕組の部分から説明します。

ページネーション毎の記事表示

初めに、GETでpageの値を受け取っています。

この情報を元に、現在いるページ、表示させる記事、などを決める事が出来ます。

$page には、現在いるページ番号が代入されています。

$now には、現在のページ-1 が代入されています。

$card_max には、1ページで表示させる記事の上限を代入しています。

$card_all には、投稿記事のトータル数が代入されています。

$page_max には、ceil($card_all / $card_max); 、全投稿記事を1ページで表示させる記事の上限で割った数をceil(少数繰り上げ)した数、つまり全ページ数が代入されています。

pageが1の場合、投稿記事が保存されているblogテーブルから、LIMIT $now, $card_max の分だけ記事を選択します。

sqlのLIMITメソッドは、第1引数に開始位置、第2引数に欲しいレコードの数、を入力します。

つまり、この場合だと「blogテーブルの「0」番目から「5つ」の記事を選択する事になります。※LIMITの仕組み上、テーブルの初めのレコードが「0番目」と認識されます。

これがORDER BY code DESCとなっているので、取り出した記事はプライマリkeyの降順に、表示される事になります。

変わって、ページが1でない場合、$now = $now * $card_max; とありますが、これは例えば今2ページ目にいるとすれば、0~5つの記事は反映してはいけません。したがって、$nowには、「4」が入る事になります。

つまり、$now = $now * $card_max; は、ページに合った記事を反映させるため、テーブルから記事を選択する「開始位置」を決めている部分になります。

この仕組みによって、現在いるページが分かれば、ページ毎の記事一覧をうまく表示させる事ができます。

ページネーションの表示

続いてページネーションの表示に入ります。

for文でページの上限分ループさせます。

その中で、$iと$pageを比較し、一致すればリンク無しの$pageを表示させます。これは現在いるページになるためです。

一致しなければ、$iを表示させ、パラメータに$iを乗せたリンクを貼ります。

至って簡単ですね。

表示確認

スタイリング済みにしたいので、cssも乗っけておきます。これをsettingディレクトリにstyle.cssとして保存します。

※cssの説明はいらないと思うので割愛します。

それでは、ここで表示が確認出来るようになっているはずですので、一旦index.phpにアクセスしてみましょう。

すでにCMSでデータベースに各項目を保存していれば、下記のように、データが反映されているはずです。

まだsingle.phpなどを作成していないので、記事の詳細は確認できませんが、ページネーションの移動は可能です。

ちなみに、テーブルの情報を全て消した状態(デフォルト)であれば、下記のような画面になると思います。

この状態からだと、cmsからのデータ反映を1つ1つ確認する事が出来るので、一度試してみるのもいいと思います。

デフォルトのテーマ

次回は、single.php(投稿記事)のテンプレを作成しようと思います。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す