Generater Pressで新着情報をスライダーさせる。

絶賛愛用中のGeneraterPress、新着記事をカテゴリー別に表示する機能はデフォルトで、あるのですが、これをスライダーで動かしたい！

しかし、現在 WP ShowPOSTの有料版で可能だったのですが、Generater Press　ブロックに合併される・・・

そのために開発中とのことで、受け付けられていません。

そんなわけで、今すぐ実装できるスライド　JS　ライブラリ、Slickをカスタマイズして、新着情報を自動で表示させるコーディングを試みました。

先に新着情報を読み込む仕組みを作っておいてください。

まずは必要なファイルをダウンロードもしくは呼び込みます。

Slickのダウンロード先

ココでダウンロードが必要なのは

slick.min.css

slick-theme.min.css

slick.min.js

このファイルを集めたら Jsファイル、CSSファイルを収めてあるフォルダにアップロードさせます。

私の場合　Theme ＞ Assets ＞　CSS と

　　　　　Theme ＞ Assets ＞ JS　でした。

そしてそのファイルをヘッダーに呼び込みます。　このファイルの前に必ず、Jqueryを読み込んでいくように。

J Queryについては、ワードプレス本体自体も元々呼び込んでいます。しかし、

<?php wp_deregister_script( 'jquery' ); ?> 

↑これをヘッダーが呼び込まれる前に記入するか、

＄の記号ではなく、ｊQueryに置き換えてコーディングするか。の処理が必要です。

そして、HTMLに動かしたい部分の親に、クラスを振り

私の場合は前の記事で、新着情報を吐き出すコードを作ってあったので、それをカスタマイズしました。

<div class="post-carousel">[myphp file='whatsnew']</div>

PHPの中はこう。

<?php
$news_query = new WP_Query(
  array(
'post_type' => 'post',
'category_name' => 'webconsulting',
'posts_per_page' =>  '12'
 
  )
);
?>

<?php if ( $news_query->have_posts() ) : ?>

  <?php while ( $news_query->have_posts() ) : ?>
    <?php $news_query->the_post(); ?>
  <div> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(250, 150)); ?></a><br />
<?php the_time('Y/m/d') ?> <br />
<a href="<?php the_permalink(); ?>">
<?php 
if ( mb_strlen( $post->post_title, 'UTF-8' ) > 30 ) {
  $title = mb_substr( $post->post_title, 0, 30, 'UTF-8' );
  echo $title . '...';
} else {
  echo $post->post_title;
}
 ?>

</a></div>
  <?php endwhile; ?>
<?php endif; ?>


<?php wp_reset_postdata(); ?>

POST 投稿の カテゴリーを　○○表示する。というコードです。

ちなみに新規のポストをすべて表示したい場合はこんな感じ

<?php
$news_query = new WP_Query(
  array(
'post_type' => 'post',
'posts_per_page' =>  '12'
 
  )
);
?>

そしてここまで用意したら、JSで指令を記入します。

<script>　
$(document).ready(function(){
 　$('.post-carousel').slick({
 　　autoplay: true,
 　　adaptiveHeight:true,
 　　arrows:true,
	
	slidesToShow:4,
 　　prevArrow:'<div class="prev"><img src="https://webmarketm.com/wp-content/uploads/2021/12/back1.jpg"></div>',
 　　nextArrow:'<div class="next"><img src="https://webmarketm.com/wp-content/uploads/2021/12/next1.jpg"></div>',

	responsive: [
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 4,
                slidesToScroll: 3,
                infinite: true,
                dots: false,
                mobileFirst: true,
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                mobileFirst: true,
            }
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                mobileFirst: true,
            }
        }

    ]  
	  
	  
	  
 　});
 });
	

</script>