今回は自分でお知らせ機能一覧表示を実装してみたのでそれについて振り返っていきます。
自分用メモです。
目次
作ったきっかけ
作ったきっかけは”記事以外にもお知らせしたいことあるんだよな〜“っと思ってたところです。
記事にする必要はないけど、お知らせのリンクだけを貼ったりするとか言ったイメージです。今まで直接htmlに書いていたのでかっこ良くないな〜とも思っていました。
よく調べてないので分かりませんが、もしかしたらプラグインとかでも実装できるのかなと思ったりしてます。(ありそう)
そんなところで自分で作ってみることにしました。
作りたい機能
記事の新着！みたいなのと別でお知らせ機能を追加出来る。
見た目のカスタマイズ、中身の修正、追加が出来る。
実装の中身(流れ)
functions.phpで関数を作りその中で生成された、htmlをviewページで呼び出して表示させる。と言った流れになります。
コード
functions.php
function get_news() {
// ['日付', 'タイトル', 'リンク'],
// 上記のように埋めていく
// ['2020/08/14', 'Instagramの映像を投稿しました!', 'リンク'],
$news = [
['2020/08/13', 'Noteの記事を更新しました!', 'https://note.com/tenlife/n/n6f658b5228d2'],
['2020/08/08', 'Noteの記事を更新しました!','https://note.com/tenlife/n/n47f97febb564'],
['2020/05/28', ' Instagramの写真を投稿しました!','https://www.instagram.com/p/CAuxGPUF8OW/'],
['2020/05/21', 'Vue.jsで個人開発してみた!', 'https://note.com/tenlife/n/nf5dd3e1870e9'],
];
$parents = '<div class="col-lg-10 col-md-12 offset-lg-1 h-5 news">';
foreach ($news as $v) {
$parents .= '<div class="row news-box col-md-12 py-3 ml-0">';
$parents .= '<p class="text-white col-md-3 col-sm-3 news-date">'. $v[0] .'</p>';
$parents .= '<p class="text-white col-md-9 col-sm-9 news-content"><a href='.$v[2].' class="text-white">'. $v[1] .'</a></p>';
$parents .= '</div>';
}
$parents .= '</div>';
return $parents;
}get_newsという関数を設定。
$newsの中に使用する情報を書いていく。
$parentsで表示する部分を作成。ここがスクロールされるようになる。
$parents内でforeachを回し、1レコードを作成していく。(bootstrapを使用しています)
$vから配列番号を指定して中身を取得、表示していく。シングルクオーテーションとかドットが必要になるので注意。(syntaxのエラーめっちゃ出た。。)
.=で要素の範囲指定をしないとこれもエラーになるので注意です。(ここら辺はよくわかっていないので何か参考になるようなサイトがあれば教えていただきたいです。)
最後にreturnで$parentsを返す。
<?php
get_news();
?>表示したいページの部分に上記のコードを貼り付ける。
やっている事は単純で、関数を呼び出しているだけ。
コードのまとめをすると以下のようになります。
表示する情報の配列を作成
html要素を作り、その中でforeachをして情報を追加していく
returnで作成したhtml要素を返し、viewページで関数を呼び出す
まとめ
記事と関連しない、お知らせ情報を表示出来る。
html,cssを追加できる。今回はbootstrapを使用しました。
コードで書いていることは簡単。
今回はキャンプに来ていたのですが、雨が降ってしまいテントの中での作業でしたw
意外と集中出来て、すんなり実装できました。キャンプ最強。
そんな感じで今回は
以上！
