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

（１）カスタム投稿タイプの追加

functions.phpにコードを追加
投稿タイプ名を、slickスライダーに使うclass名と同じにする
ここでは、[slider]
[php]
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’ );
[/php]

（２）カスタム投稿記事を作成

登録する内容

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

（３）slickスライダーを利用する（任意のプラグインでOK）

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

利用方法：省略

（４）テンプレートに追加

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

[html]
<div id="slider-wrap">
<div class="slider">

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

</div>
</div>
[/html]

[php]
$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;
[/php]

（５）追加するCSS

[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;
}
[/css]

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

（６）カスタム投稿にカスタムフィールドを追加

（プラグイン：カスタムフィールドテンプレート利用）

デジタルポケット