未分類

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

絶賛愛用中のGeneraterPress、新着記事をカテゴリー別に表示する機能はあるのですが、これを動かしたい!

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

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

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

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

no image
固定ページに新着情報を表示させる
ワードプレスの固定ページをTOPページ(フロントページ)に指定している場合の PHPの埋め込み方/PHPの呼び出しの仕方。 プラグインを使う PHPを呼び出すショートコードを自分で作る まずはFunc ...

続きを見る

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

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' ); ?> 

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

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

そして、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>

-未分類

© 2022 Web集客の方法がわかる Wecona Powered by AFFINGER5