レスポンシブなコンテンツスライダー/WPプラグイン「Smooth Slider」

Smooth Slider」のタイトル画像


WordPressプラグイン「Smooth Slider」とは

投稿した記事やページに対して、画像と文章付きのコンテンツスライダーにできるプラグイン。おすすめ記事などPRしたい場合には最適です。レスポンシブデザインの今時なトレンドもおさえてます。一部バージョンの問題からか不備な部分もありますが、管理画面から設定できますので、0から構築するよりは比較的に管理画面で設定できます。

<主な特徴>

  • レスポンシブデザイン
  • 6つのアニメーション効果
  • テンプレートタグ、ショートコード、ウイジェットで利用
  • 管理画面でプレビューが確認できる
  • 管理画面で設定できる
  • HTMLやCSSの知識はあまり必要ない

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

ブログサイトや情報サイトなどで画像付きのコンテンツスライダーを見かけると、やはり目に止まります。

こんなやつです。ありますよね。

Smooth Slider」の設定その1

公式デモ

 この場合だと4つの投稿記事がループしてスライドしてます。特にピックアップしたい記事とかをこれで使うと効果的かと思います。

どうやんの?って話ですが。

jqueryのコンテンツスライダーのプラグインを使って、ああだ、こうだとカリカリとすれば出来ると思いますが、けっこうメンドイです。

それでいいプラグインないのといつも思っていたのですが、いいかもと思えるやつに出会いました。(他にあるかもしれませんが・・・今のところ)

ちょっと更新がされてなくてある点でマイナスポイントではあります(後にご説明)が、比較的管理画面で設定できる点は0から構築するよりは楽でした。

完成系したやつは、こんな感じです。

「Smooth

これを目指して設定を説明します。

作成したデモサイト

有効化後の設定、使い方

この説明はバージョン3.4.2です。

サイドバーの「Smooth Slider」の「Settings」をクリックします。

「Basic Controls」で、スライダーのアニメ効果の選択や、スライダーの大きさや幅、そしてナビゲーションについて設定します。
「Smooth Slider」の設定その3

その下にある「Miscellaneous」で、その他の詳細設定をします。
「Smooth Slider」の設定その4

次に、設定のタブパネル「Basic Controls」の右となりの「Sliders Panel」をクリックします。

その「Slider Title」でスライドのタイトルの色や大きさなどを設定をします。
「Smooth Slider」の設定その5

「Slider Title」の下の「Post Title」で記事の見出しの大きさや色などを設定します。
「Smooth Slider」の設定その6

「Post Title」の下の「Thumbnail Image」で画像のサイズなどを設定します。
「Smooth Slider」の設定その7

「Thumbnail Image」の下の「Slider Content」で本文の大きさなどを設定します。
「Smooth

※「Pick content From」の所で不具合。
投稿記事の本文(content)から自動的に呼び出すと思われる便利な「From Content」を選択すると、最大文字数は少なくしたのに、テーマによって全文表示されたりしてうまく動作しませんでした。ですので、「Post Except」を選択し記事の抜粋を利用して文字数を調整する方法にしました。

レスポンシブ対応にしたい場合は。タブパネルの「Responsiveness」をクリックし、チェックします。
「Smooth

CSSのデザインに関してはこのタブパネルの「Responsiveness」の隣の「Generated CSS」をクリックすれば記述されます。カスタマイズしたい場合はこれをコピーして利用できます。
「Smooth Slider」の設定その12

これでスライダーのデザインの設定は完了しました。

次は公開方法です。

公開方法

コンテンツスライダーの設定は、投稿や固定ページごとに表示させる場合、特定カテゴリーを表示させる場合、最新投稿を表示させる場合などのパターンがあります。

個別の投稿や固定ページを表示する場合

スライダーにしたい投稿ページや固定ページの編集画面を開きます。

前述で「Post Except」にしましたので、「抜粋」にスライドさせる文章を本文からコンパクトにして貼付けます。

次に「smooth slider」の設定項目が増えてますので、「Add this post/page to Smooth Slider」にチェックする。

「Smooth Slider」の設定その9

「Sliders」で確認すると、チェックした投稿記事のリストが表示されています。

Smooth-Slider-Settings14

次にスライダーを設置したい場所に、投稿や固定ページのショートコード、もしくは直接テンプレートにテンプレートタグを入力します。

ショートコード

[smoothslider]

テンプレートタグ

<?php if ( function_exists( 'get_smooth_slider' ) ) { get_smooth_slider(); } ?>

これで始めにみせたスライダーが表示されます。

「Smooth

作成したデモサイト

特定カテゴリーを表示する場合

 個別の投稿ごとでなく、特定カテゴリー、例えばmovieなどスラッッグを利用してカテゴリーごとの表示が可能になります。表示されるのは、スライダーの記事数に対して、最新記事順に呼び出しています。
 

今回は抜粋に入力しなければ空白となりますのでご注意ください

ショートコード

[smoothcategory catg_slug='social-media']

カテゴリーごとに表示するテンプレートタグ

<?php if ( function_exists( 'get_smooth_slider_category' ) ) { get_smooth_slider_category('social-media'); } ?>
※social-mediaはスラッグ名

最新投稿を表示させる場合

 スライダーの記事数に応じた、最新記事を表示させることもできます。

今回は抜粋に入力しなければ空白となりますのでご注意ください

ショートコード

[smoothrecent]

テンプレートタグ

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

まとめ

 まだまだ完璧に把握しきれてませんが、なんとなくイメージしていたコンテンツスライダーを設置することができました。ある程度、スライダーの大きさなどイメージして設定してからやれば、公開までたどり着けます。
 レスポンシブデザインなので実際幅が変化して対応したのでその点は今のトレンドをおさえているなと思います。
 ただ、バージョンが古いためか、コンテンツ部分から自動的に引っ張ってくることが出来ない状態だったので不満もあります。
 それでも、Oから設定するよりは楽に設定できます。特に画像の部分は公開の表示を確認しながらデザインを決められ、管理画面でなんとなく出来てしまう点はありがたいなと思いました。

LINEで送る
Pocket

タグ:,

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す