サイトのトップページなど、スライドバナーを設置しているサイトは多いかと思います。
WordPressでサイトを構築した際に、この部分もお客様が触りたいというご要望が多いです。
その場合の設定メモを残しておきます。
今回の前提・仕様は次の通りです。
前提
- バナー画像は、サイズ通りの画像を用意している
- バナー画像のアップロード、公開、非公開、並び替えを簡単に行いたい。
仕様
- カスタム投稿タイプとカスタムフィールドを活用して、１記事１バナー画像で投稿。
- カスタム投稿タイプの記事を並び替えることによって、バナーを並び替える。
- カスタム投稿タイプの記事の公開・非公開にて、バナーの公開・非公開を操作。
また、以下の３つのプラグインを使用しています。
使用プラグイン
- Custom Post Type UI ・・・ カスタム投稿タイプの作成・編集を簡単に行えるプラグインです。
- Advanced Custom Fields ・・・ カスタムフィールドの作成・編集を簡単に行えるプラグインです。
- CMS Tree Page View ・・・ 投稿、固定ページ、カスタム投稿タイプの記事の並び替えを行えるプラグインです。
手順
１）３つのプラグインをインストール
各プラグインをインストールします。
２）トップバナー用カスタム投稿タイプの作成
Custom Post Type UIを使用して、トップバナー用のカスタム投稿タイプを作成します。
（例：投稿タイプ名：「topbanner」、ラベル：「トップバナー」）
３）トップバナー画像アップロード用のカスタムフィールドを作成
Advanced Custom Fieldsを使用して、画像アップロード用のカスタムフィールドを作成します。
（例：フィールド名「top_bnr_img」）
カスタムフィールドの「位置」の「ルール」で、トップバナー用のカスタムフィールドのみ表示する用に設定します。
（例：「投稿タイプ、等しい、topbanner」に設定）
４）カスタム投稿タイプの記事の並び替えを行えるように設定
「設置」→「CMS Tree Page View」より、トップバナーのチェックボックスに必要に応じてチェックを入れます。
５）バナー画像を投稿する
カスタム投稿タイプ「トップバナー」にて、１記事あたり１画像で画像をアップロードします。
６）テンプレートに設定を記載する
<ul id="mainSlider">
<?php
$argstopbanner = array(
'post_type' => array('topbanner'),
'posts_per_page' => -1 ,
'post_status' => 'publish', //公開している記事のみ表示
'order' => 'ASC', // 新しい順から表示
'orderby' => 'menu_order'// CMS Tree View順に並び替え
);
$topbannerlist = get_posts($argstopbanner);
foreach ( $topbannerlist as $key => $post ) :
?>
<li>
<?php if(get_field('top_bnr_img')) :?>
<img src="<?php the_field( 'top_bnr_img',$post->ID); ?>" alt="">
<?php endif; ?>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>
上の設定は、画像はリサイズしない前提です。
７）画像の並び替え
必要に応じて、「ツリー」で並び替えをおこなします。
以上です。時間がある時にまたもうちょっときれいにメモを残したいと思います。
コメント