お知らせやブログの最新の投稿を目立たせたいという要望が最近立て続けにあり、下記二つの方法で対応したので共有いたします。

①モーダルウィンドウで表示（https://okada-cc.com/）
②MVにテロップ表示（https://scg-fmc.com/）

モーダルウインドウで表示する

参考　https://okada-cc.com/

※こちらMPクラウドが入っていますが、入っていなくても作業方法は同じです。

1. モーダルウインドウを設置

設置方法の詳細は割愛します。
参考サイトをご参照ください。

2. 既存のnews.php等を元にphpファイルを作成

※トップページに表示しているものと全く同じ内容を表示するなら、新たに作成する必要はありません。

news.php、top.php、もしくはindex.php、MPクラウドが入ってるとnews01.phpなどを複製します。
生成される項目が必要十分であればどれを元にしても恐らく大丈夫です。

複製したファイルの名前を適当に変更してから、表示件数や生成する項目などを編集します。
カテゴリやお知らせ本文など、要らない項目や足りない項目がある場合は適宜削除・追加してください。

参考：表示件数を制御したい場合に追加する記述

①追加する記述： $display_count = 0;
記述場所：『foreach ($news_list as $key => $row) {』のような記述があるはずなので（変数名は全く同じではないかもです。「foreach」ではじまる部分を探してください）これの直前に挿入します。

②追加する記述：

<?php
$display_count++;
if ($display_count > 0) {
break;
}
} ?>

記述場所：①で探した『foreach ($news_list as $key => $row) {』の最後の『 {』と対になる『}』を選択して、下記コードをペーストしてください（『}』と置き換える形です）。
if ($display_count > 0)部分の「0」を増やすと、表示件数が増えます。（0なら最新1件のみ、1なら2件目まで）

3. 手順1で設置したモーダルの中に、手順2のphpで生成される記事を読み込む

<script>
$(function(){
$(".modalContents").load("mpcloud/news/news03.php");
});
</script>

クラス名がmodalContentsになっている要素に、news03.phpで生成したコードが読み込まれます。
loadのあとのファイル名部分は、手順2で作成したphpファイルの名前に変更してください。

あとはcssでデザイン調整すれば完成です。

テロップで表示する

参考：https://scg-fmc.com/

※上記参考サイトでは、お知らせの一番新しい投稿→お知らせの二番目に新しい投稿→ブログの一番新しい投稿、の順番でループするように設定しています。

1.  テロップを表示する枠を設置

テロップ表示は下記URL先で紹介されているものを使用しています。
https://on-ze.com/archives/618

テロップの動きは、右からスライドインのほかに、上や下からフェイドインにもできます。
詳細な使用方法は上記URLに記載されていますが、簡単にまとめると、jsを読み込んで、必要なcssをコピペして、htmlに下記のコードを書きます。

<div class=”ticker” rel=”表示方法”>
<ul>
<li>テロップ１</li>
<li>テロップ2</li>
<li>テロップ3</li>
</ul>
</div>

<li></li>部分にテロップ（今回ならお知らせの記事とブログの記事）を読み込みます。

2. phpファイルを作成または編集

お知らせの場合

お知らせについては、モーダルの時と同じです。

お知らせのみ表示する場合や、お知らせとブログの最新の投稿のみを表示する場合は、お知らせ用のphpはファイル一つで大丈夫なのですが、参考サイトではお知らせ二つ＋ブログの最新記事という仕様だったので、お知らせ用のphpファイルを二つ（下記①②）作成しています。

①mv.php…お知らせの一番新しい投稿のコードを生成
②mv02.php…お知らせの二番目に新しい投稿のコードを生成

ブログの場合

ブログについては、ブログのインデックスページ（index.php）にコードを追加して生成します。
生成されたコードはホームページにのみ表示し、ブログページでは忘れずに非表示（display: none;）にします。

ブログのindex.php

<?php if (have_posts()) : ?>
<?php
$category = get_the_category();
$cat_id = $category[0]->cat_ID;
$cat_name = $category[0]->cat_name;
$cat_slug = $category[0]->category_nicename;
?>
<div class="blog_mv"><a class="cate" href="/blog/category/<?php echo $cat_slug; ?>"><?php echo $cat_name; ?></a> <span class="date"><?php echo get_the_date('Y.m.d'); ?></span><br class="sp_inline"> <a href="<?php the_permalink(); ?>" class="mv_news_tit">
<?php the_title(); ?>
</a> </div>
<?php endif; ?>

※生成されるコード（<div></div>部分）は適宜修正してください。

3. 手順1で設置したテロップ枠の中に、手順2のphpで生成される記事を読み込む

参考サイトでは、下記の組み合わせになっています。

• .mv_news_textにmv.php
• .mv_news_text02にmv02.php
• .mv_blog_textにブログのトップページの.blog_mv

index.htmlに読み込みコードを追加

<script>
$(function(){
$(".mv_news_text").load("news/mv.php");
$(".mv_news_text02").load("news/mv02.php");
$(".mv_blog_text").load("/blog/ .blog_mv");
})
</script>

テロップ部分にクラス名追加

<div class="ticker" rel="slide">
<ul>
<li class="mv_news_text"></li>
<li class="mv_news_text02"></li>
<li class="mv_blog_text"></li>
</ul>
</div>

cssでデザイン調整して完成です。