プラグイン 2015-04-05

WordPressコンテンツスライダーSmooth Slider使い方

smoothslider

今回は、WordPressコンテンツスライダー【Smooth Slider】プラグインの使い方のご紹介です。

こちらのスライダープラグインは、【レスポンシブ】に対応しており、投稿した記事の画像と本文付きのコンテンツスライダーを簡単に実装出来るプラグインとなっています。
その他にもカテゴリー別・画像のみのスライドも管理なども出来ます。

スライドショーの設定も管理画面から細かく出来ますので、自分好みのスライド作成だって出来ます。

WordPressでプラグインを使わず一からスライドショーの作成する場合は、とても面倒ですし、HTML・CSSの知識があまりない方にとっては、敷居が高いと思います。
そんな方や、サクッとオススメ記事なんかをスライドショーで表示したいんだよねー。という方にオススメのWordPressコンテンツスライダープラグインです。

また、管理画面でスライダーを作成中もプレビュー表示が出来ますし、表示に関しては、【ショートコード】【テンプレートタグ】【ウィジェット】で作成したスライダーが表示可能です。

Smooth Slider インストール

まずこちらのWordPressスライダープラグインを利用するために、【Smooth Slider】をインストールしていきたいと思います。

smoothslider1

まずは、管理画面から プラグイン > 新規追加で【Smooth Slider】と入力し検索します。

検索をしますと上記画像のように【Smooth Slider】プラグインが検索結果として表示されますので、【今すぐインストール】をクリックして下さい。

インストール後は、プラグインの有効を忘れないようにして下さい。 また、ご自身でプラグインをダウンロードしてFTPなどでアップロードされる場合は、こちらからダウンロードして下さい。

設定・使い方

プラグインを有効にしたら、管理画面からSmooth Slider > settingページを開きスライダーの設定をしていきます。
また、こちらのページ上部にスライダーのプレビュー表示がされていると思いますが、こちらが現在のスライダーレイアウト状況となります。

Basic Controls

smoothslider2

Basic Controlsでは、スライダーのアニメーションから幅・高さなどの設定を行います。
また、オリジナルのCSSを追加する場合は、【Custom Styles】で追加が出来ます。

Slides Panel

smoothslider3

Slides Panelでは、スライダーで表示される記事や画像の設定を行っています。
また、【Thumbnail Image】のサムネイルの設定では、デフォルトの状態で特に問題ないないです。

Preview on Settings Panel

smoothslider4

Preview on Settings Panelでは、プレビュー表示の有無やショートコードの確認が行えます。

表示方法

それでは、上記で設定したWordPressで投稿した最新記事順に表示されるスライダーを表示させてみます。

ショートコード

投稿記事内や固定ページ内に表示させる場合は、ショートコードで下記のように記述します。

[smoothrecent]

テンプレートタグ

テンプレートファイル内の任意の場所に表示させる場合は、下記のように記述します。

<?php if(function_exists("get_smooth_slider_recent")){get_smooth_slider_recent();}?>

任意の記事をピックアップしてスライド表示

上記スライダーように最新記事を表示させてもいいのですが、任意の記事をオススメ記事みたいに表示させたい場合があると思いますので、その方法もご説明します。

新しくスライダーを作成

今回は、任意の記事をピックアップとして、スライド表示させたいと思いますので、管理画面から Smooth Slider > Slidersで新しくスライダーを作成していきます。

smoothslider5

Slidersのページを開いたら【Create New Slider】で任意の文字を入力して【Create New】ボタンをクリックして新しくスライダーを作成します。

smoothslider6

次に上記で作成したスライダーに表示させたい投稿記事の編集画面ページに移動します。
そうしますと、ページ下部にSmooth Sliderのメタボックスが表示されていますので、【Add this post/page to】にチェックをし上記で作成した【Pickup Slider】を選択し、記事を更新します。

他の表示させたい記事も上記と同じように行っていきます。

smoothslider7

先ほど作成した【Pickup slider】を表示させると、上記で選択した記事が表示されていると思います。
また、こちらのページで記事の表示順の変更できます。
順番等の決まったらショートコードが表示されていると思いますので、コードをコピーしてペーストすれば、表示されます。
テンプレートタグで表示させる場合は、下記のように記述します。
今回作成した【Pickup Slider】はIDが【3】だったので、slider_id="3"と記述しています。

<?php if(function_exists("get_smooth_slider")){get_smooth_slider($slider_id="3");}?>

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS pure-drawer

CSSだけで作るドロワーメニュー【Pure Drawer】使い方

NEXT slidebars

スマホのドロワーメニューに使える【Slidebars】使い方