記事スライドを簡単設置！WordPressプラグイン、Advanced post sliderの使い方。

記事スライドを導入するなら、Advanced post sliderがオススメ。

ブログメディアにありがちなトップページの記事スライド（もしくは大きなビジュアル）。
無ければ無いでいいのですが、やはりファーストビューに大きなビジュアルがあると”らしく”なるもんです。というわけでこのブログのトップにも設置してみた。その際に利用したプラグイン「Advanced post slider」が便利だったので、使い方の解説を兼ねてご紹介します。

Advanced post sliderの紹介。

このスタッフブログはミニマルテーマ：Bonesをベースに、記事を書きつつ少しづつちまちまと改修を加えていて、トップにメインビジュアル的なものをそろそろ設置したいなぁと思っていたんですが、なかなか手が回らず積んだままにしていました。当初はテンプレートに組み込んで設置しようと思っていましたが、偉大な方々が作成されたプラグインのほうが便利！ということでプラグイン「Advanced post slider」を利用して設置しました。管理画面は英語ですが、難解な部分はないので自分でやるより簡単・便利です！

テンプレートは3種10パターンほど（デモページのサイドナビからテンプレート切り替えできます）スライドが用意されているため、サイトに適したものを見つけやすいです。
触ってみるとカスタマイズもしやすく、jQueryプラグインのbxSliderが使われているため、最初からレスポンシブ対応されていて楽チンです（細かい部分はスタイル書かないとですが）。

プラグインの導入。

以下の公式ページからダウンロードするか、管理画面から「Advanced post slider」で検索してください。
なお記事作成時点でのバージョンは2.3.4 です。
Advanced post slider – WordPress › 日本語

プラグインを有効化すればナビにメニューが追加されます。

細かな設定・項目の解説。

設定画面を開くとテンプレート別にメニューが分かれています。
ここからスライドを複数追加することもできます。

以下、Template One での場合。

実際に設定したキャプチャを元に解説していきます。
これから利用される際は参考にしてみてください。

Slider 1 を開くと、スライド名とショートコードが表示されています。
このショートコードをスライドを設置したい部分に記述して使用します。

<?php echo do_shortcode('[ShortCode]'); ?>

※テーマ内でショートコードを使用する際は上記記述。

スライド表示する記事は、クエリで出力するかリストから個別に指定するかを選べます。
Post Typeは一種類しか選べず、カスタム投稿タイプや固定ページと混ぜて表示することはできません。

スライダーのタイプやエフェクトの種類など、細かな設定をすることができます。
スライダータイプはそれぞれ、Carousel、Ticker のような動きなります。
Transitions type は特別な理由がない限り、CSSアニメーションにしておくといいかと。
※設定画面のN.B. は注記の意。

調べてみるとCSSアニメーションのほうがモバイルフレンドリーなようです。

簡単に言えば animate は CPU 処理、transition は GPU 併用の処理になります。PC だと見た目にもあまり差はないかもしれませんが、比較的 CPU 性能の劣るスマホ（それもちと古めの）だと、この差がバッチリでそう。グラフィックチップを併用することで非力なCPU環境でもスムーズなアニメーション処理が実現できます。また見た目に差がなくてもCPUの負荷を軽減することにもなります。jQuery.animate vs CSS.transition

一画面に表示するスライドの数や幅、サムネイル関係の設定をすることができます。
Default image url は、表示する画像が何も無い場合のブランク画像を指定します。

項目が多いですが、タイトルや要約文を表示する際の背景色（オーバーレイ）や透過度、表示タイミングや位置・大きさなど、かなり細かく設定できます。要約文の文字数をいじると、スライド以降のループも影響を受けたので注意してください。

最後はナビゲーション関係の設定が並びます。ページャーは数字とサムネ、Bullet（●○○のようなナビ）から選べます。そのほかにスライド左右の送り・戻しアローやページャーの位置、再生・停止ボタンの表示設定など。

各グループ項目ごとにSave changes で保存しつつ確認して完了です。簡単ですね！
かなり細かく設定できますが、それでも気になる部分は別途スタイルを上書きして使用すればいいかと思います。
このプラグインの残念な点は、head要素に埋め込みでスタイル記述が追加されるのでソースが少し汚れます。

まとめ

というわけで簡単にではありますが、記事スライド作成に便利なプラグイン「Advanced post slider」をご紹介しました。
jQueryのスライダーを利用して自力で組めばより柔軟に対応できますが、イチからとなるとなかなか大変です。こういったプラグインを利用して、簡単に自社メディア”らしさ”を出していきましょう！ではまた！

自社メディアを簡単構築！国産無料でレスポンシブなWordPressテーマ12選。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧