バズ部テーマ　 ‎Xeory　base　にカルーセルで記事を表示する

今回はワードプレスにてテーマはバズ部Xeoryのbaseに記事をカルーセルで表示したいと思います。
カルーセルのプラグインはよくショップなどのサイトで画像が左から右へ流れていくタイプのものです。
スライドは画像が入れ換わるものですね。

またワードプレスのプラグインのカルーセルにも色々あるのですが
記事のタイトル　アイキャッチ　本文　日付　カテゴリ　などが表示されるものは少ないのです。
今回はそれを叶えてくれる
WP Posts Carousel
を利用したものです。

index.phpで記事一覧の一番上に表示されるようにしたいのです。

ダウンロードや使い方は
ちょうどいいカルーセル
を参考にされると良いと思います。

早速設定していきます！
このカルーセルは新たに記事を作成してその記事にショートコードが吐きだされます。
このショートコードを表示したい箇所に貼りつけたり、このページ自体をphpで読み込んだりして使います。

私はカルーセルを作成する設定では以下のようにしました。
Template:default.css
Post types:投稿
Category IDs:　自分の表示したいカテゴリのID番号
Show title:yes
Show created date:yes
Show description:NO
Show category:yes
Show featured image:yes
モバイルでは2つ表示
タブレットでは3つ
PCでは4つ表示する設定にしました。
それ以外の部分は好みで変えますが私は変えませんでした。

保存するとコードが吐きだされます。↓こんな感じです。

[wp_posts_carousel template=”default.css” post_types=”post” all_items=”10″ show_only=”id” exclude=”” posts=”” ordering=”asc” categories=”14″ tags=”” show_title=”true” show_created_date=”true” show_description=”false” allow_shortcodes=”false” show_category=”true” show_tags=”false” show_more_button=”true” show_featured_image=”true” image_source=”thumbnail” image_height=”100″ image_width=”100″ items_to_show_mobiles=”1″ items_to_show_tablets=”2″ items_to_show=”4″ slide_by=”1″ margin=”5″ loop=”true” stop_on_hover=”true” auto_play=”true” auto_play_timeout=”1200″ auto_play_speed=”800″ nav=”true” nav_speed=”800″ dots=”true” dots_speed=”800″ lazy_load=”true” mouse_drag=”true” mouse_wheel=”true” touch_drag=”true” easing=”linear” auto_height=”true” custom_breakpoints=””]

ちなみにデモサイトでの表示は

これだと記事の高さが可変になっていて、一覧の一番上に表示するにはちょっと不格好なのです。
そのためcssを調整する必要があります。
こんなCSSを調整してこんな感じにします。

ちなみにカルーセルを作成した記事を表示した時はこんな感じで切れて表示されてしまいますが、トップページの記事一覧で表示した時にちゃんと表示されたようにcssを調整してあるのでOKです。

記事を表示した時

作成したカルーセルをトップページの記事の一覧ページの先頭に表示するには

1　カルーセルを記事で作成してコードを吐き出させる
2　子テーマのindex.phpにコードを貼り付ける
表示したい箇所にコードは貼り付けますが、私はタイトルの下　記事一覧の一番上に設置しました。
吐き出されたコードをそのまま貼りつけても表示されません。
コードを

<?php echo do_shortcode('コード'); ?>

のようにします。

↓サンプルコード

 <header class="cat-header">

          <h1 class="post-title" ><?php bzb_title(); ?></h1>

        </header>

      </section>

      

    <?php } ?>
<?php echo do_shortcode('[wp_posts_carousel template="default.css" post_types="post" all_items="10" show_only="id" exclude="" posts="" ordering="asc" categories="" tags="osusume" show_title="true" show_created_date="true" show_description="false" allow_shortcodes="false" show_category="true" show_tags="false" show_more_button="false" show_featured_image="true" image_source="thumbnail" image_height="100" image_width="100" items_to_show_mobiles="2" items_to_show_tablets="3" items_to_show="4" slide_by="1" margin="5" loop="true" stop_on_hover="true" auto_play="true" auto_play_timeout="1200" auto_play_speed="800" nav="true" nav_speed="800" dots="true" dots_speed="800" lazy_load="true" mouse_drag="true" mouse_wheel="true" touch_drag="true" easing="linear" auto_height="true" custom_breakpoints=""]'); ?>

cssはそれぞれご自身のサイトにあったcssに調整されると良いかと思います。
ちなみに私はアイキャッチの大きさによって記事の縦のサイズがばらばらになって欲しくなかったので
・ひとつの記事の枠の大きさを固定

.default-theme.wp-posts-carousel .wp-posts-carousel-container {
    box-shadow: 0px 1px 2px #CCC;
    background: none repeat scroll 0% 0% #FFF;
    padding: 0.5em;
    transition: all 0.3s ease 0s;
    height: 210px;

・アイキャッチの高さをmax-height: 120pxに

.default-theme.wp-posts-carousel .wp-posts-carousel-image {
    text-align: center;
    vertical-align: central;
    overflow: hidden;
    padding-top: 0.2em;
    max-height: 120px;

あとはh3でタイトルが指定されているのでh3のフォントサイズの変更とボーダーを消したのと、表示領域のpaddinngなどを好みで変更しています。

ちょっと急ぎ足で雑な説明ですみません。
今回ちょっと時間がなかったのでbaseのcss変更以外は子テーマにではなく、プラグインのcssを直接書き換えたためcssの説明が中途半端です。

ちなみに私はFFでページを表示し、要素の調査で見た目を見ながらcssは調整しました。

しかし他のカルーセルと違って、タブレット・スマホで表示する列数も変えられるので本当に楽でした。