【wordpress】投稿記事(カスタム投稿)のアイキャッチ画像をスライドショー(slickスライダー)

公開日:2020年7月11日

(1)カスタム投稿タイプの追加

functions.phpにコードを追加
投稿タイプ名を、slickスライダーに使うclass名と同じにする
ここでは、[slider]

function create_post_type() {
  register_post_type( 'slider', // 投稿タイプ名(スライダーに使うclass名)
        array(
             'label' => 'PICKUP',	// 管理画面上で表示する投稿タイプ名
             'public' => true,	        // 投稿タイプをpublicにするか
             'has_archive' => true,	// アーカイブ機能ON/OFF
             'menu_position' => 5,	// 管理画面上での配置場所
             'show_in_rest' => true,    // 5系から出てきた新エディタ「Gutenberg」の有効・無効
	     'supports' => array('title','editor','thumbnail','excerpt','custom-fields')   // 記事編集画面に表示する項目を配列で指定
        )
  );
}
add_action( 'init', 'create_post_type' );

 
 

(2)カスタム投稿記事を作成

登録する内容

  • 記事タイトル
  • 抜粋
  • アイキャッチ画像 (スライドショーの画像)
  • 本文
  • カスタムフィールド(投稿ページのレイアウトをテンプレート化する場合に利用)

 
 

(3)slickスライダーを利用する(任意のプラグインでOK)

http://kenwheeler.github.io/slick/

利用方法:省略

 
 

(4)テンプレートに追加

(今回はTOPページにPICKUP記事(カスタム投稿)をスライドショーで表示)

<div id="slider-wrap">
<div class="slider">

<?php
~ここに以下のphpコードを書く~
?>

</div>
</div>

 

$posts = get_posts( $arg );
    $posts = get_posts( array( 
	'posts_per_page' => 16, // 表示する件数
    	'orderby'        => 'date', // 日付でソート
    	'order'          => 'DESC', // DESCで最新から表示、ASCで最古から表示
    	'post_type'      => 'slider' // 表示したい投稿タイプ
    ) );
    if ( $posts ) :
        foreach ( $posts as $post ) :
    if ( has_post_thumbnail( $post->ID ) ) {
		// アイキャッチ画像を取得
		$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
		// 元画像にリンクする場合
		//echo '<a href="' . $full_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" target="_blank">';
		// カスタム投稿の記事にリンクする場合
		echo '<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '" target="_blank">';
		// アイキャッチ画像を表示
		echo get_the_post_thumbnail($post->ID, 'full');
		// 記事タイトルを表示
		echo '<h3>' . get_the_title() . '</h3>';
		// カスタム投稿の抜粋を取得
	    $my_excerpt = get_the_excerpt();
		if ( $my_excerpt != '' ) {
		}
		// 抜粋を表示
		echo '<p>' .$my_excerpt .'</p>';
		echo '</a>';
		echo "\n";
		}
    endforeach;
	endif;

 
 

(5)追加するCSS

#slider-wrap {
	position:relative;
	height:auto;
	margin:0;
	z-index:9998;
	overflow:hidden;
}
.slider {
	position:absolute;
	top:0;
	left:0;
	margin:0 auto;
	padding: 0;
}

/* 画像 */
.slider img {
	width:92%;
	height:auto;
}
.slider > a {
	float:left;
	list-style-type:none;
}

 
 

以下は、私的作業手順メモ

(6)カスタム投稿にカスタムフィールドを追加

(プラグイン:カスタムフィールドテンプレート利用)

(7)カスタム投稿のシングルページ作成



参考ページ:WordPressスライドショープラグイン「Meteor Slides」をカスタム投稿として使ってみる
サイト名:株式会社 ヴィンテージ