昨日WPBeginner Couponsをローンチした後、私たちはWPBeginnerのメインサイトのために、見栄えを保ちながらすべてを統合する最高のデザインを構築することに全力を注いでいます。サイトにスライダーを追加したかったのですが、どのスクリプトにも限界がありました。そこで、99designs、SitePoint、Flippaの素晴らしいMatt Mickiewicz氏（WPBeginnerでの彼のインタビューを参照）が、SlideDeck（ウェブ上で断然最高のスライダースクリプト）のクリエイターであるDigital Telepathyの人々を紹介してくれたことに感謝します。私たちはSlideDeckを使ってみて、感銘を受けました。スライダーを作成するために簡単なドラッグドロップインターフェースを使用できる完全なWordPressプラグインを提供しているので、初心者には最適です。しかし、jQueryバージョンもあり、開発者が自由にカスタマイズできるため、開発者にとっても素晴らしいプラグインです。この投稿では、SlideDeck WordPress プラグインを使ってコードを個別編集することなく WordPress でスライダーを作成する方法を紹介します。
このプラグインでどのようなものが作れるか見たい方は、こちらでライブデモをご覧ください。
ステップ 1.プラグインのダウンロードとインストール
SlideDeckのサイトへ行き、プラグインをダウンロードする。SlideDeckには無料版と、サポートとより多くの機能を提供するPRO版があります。私たちは新製品に取り組むときはいつもサポート版を入手しています。開発中に何度か先頭に固定表示されたことがありましたが、彼らのサポートは素晴らしく、私たちを助けてくれました。PROバージョンは以下のようなクールな機能が含まれているので、ぜひ入手することをお勧めします：垂直スライド、タッチスクリーンサポート、サポート、RSSフィードスマートSlideDecks、背景画像サポートなどなど。
プラグインをダウンロードしたら、プラグインをインストール/有効化してください。(WordPressプラグインをインストールするためのステップバイステップガイドに従ってください)
スライダーを作ろう
プラグインを有効化すると、SlideDeckという新しいタブが追加されます。新規スライドデッキを追加をクリックしてください。投稿書き込みパネルのような画面が表示されます。
スライドにコンテンツを追加し、タイトルを付けました。カスタムの背景画像（PRO機能）を使用することもできますが、シンプルにするため、ここでは使用しませんでした。私たちはこのプラグインが箱から出してすぐにできることを示したいのです。これが最初の標準スライドです。次に追加したのは縦スライド（PRO機能）です。縦スライドは基本的にスライドの中に複数のスライドがあるものです。上の画像を見ると、縦スライドに変換というボタンがあります。これが次のスライドのためにクリックしたボタンで、これが追加されたものです：
この作業を好きなだけ繰り返してください。スライドの作成が終わったら、スライドをサイトに公開するためのSlideDeckオプション設定を見てみましょう。スライド編集画面の右側にあります。
自動再生、キーボードナビゲーション、マウススクロールホイールナビゲーション、アニメーションスピードの設定、素晴らしいスキンの選択、どのスライドから始めるかの選択ができます。また、ドラッグドロップでスライドの順序を変更することもできます。あなたのテーマに含めるためのコードを持っているテーマのコードスニペットがあります。テーマの好きなところに追加してください。WordPressにSlideDeckを統合するために個別コードを編集する必要はないと言いませんでしたか？はい、このチュートリアルでは先頭に固定表示します。コードを一行も編集せずにWordPressに統合する方法をお見せしましょう。
WordPress投稿/ページにSlideDeckを統合する
新規投稿またはページを作成します。右側のサイドバーに新しいSlideDeckボックスが追加されます。
インサートSlideDeckボタンをクリックしてください。追加したいスライダーを選び、投稿を公開します。投稿を公開すると、スライダーはクラシックスキンでこのように表示されます：
このスライダーは、固定先頭表示、全幅ページテンプレート、その他お好きなものに使用できます。しかし、ここで終わりではありません。もう少し踏み込んでみましょう。
おすすめ投稿でスライダーを追加する
おすすめ投稿スライダーはブロガーのお気に入りです。私たちはこの機能を多くのブログで見かけますが、それらのスライダーのほとんどはテーマにハードコーディングされており、ユーザーのコントロールは限られています。では、SlideDeckでどれだけ簡単にできるか見てみましょう。Smart SlideDeck “と呼ばれるダイナミックなスライダーを追加することができ、最新投稿、人気投稿、おすすめ投稿（あなたが選んだもの）を表示したり、カテゴリー別に並べ替えたり、他のサイトからRSSフィードをインポートしてスライダーに追加することもできます。様々なスキンから選択し、異なるタイプのナビゲーションを選択し、5分もかからずにスライダーを準備することができます。その方法をお見せしましょう。チュートリアルでは、投稿からおすすめ投稿を表示します。
現在の投稿から5つの投稿を選び、Smart SlideDecksのボックスにチェックを入れて追加してください。
次に、SlideDeckパネルに移動し、スマートSlideDeckを追加をクリックします。スキンを選択します：
表示するスライドの数、再生オプション、コンテンツのタイプ（投稿タイプからおすすめ投稿を選択）を選択します。画像オプション、タイトルの長さ、抜粋の長さなどのコンテンツ設定を選択できます。ナビゲーションスタイルを選択し、公開するをクリックします。
コードを編集する必要があります。サイドバーのテーマスニペットコードからコードを取得し、テーマに貼り付けます。ほとんどの場合、index.phpの一番上にあります。コードの例は次のようになります：
[cbk1］
これはホームページにのみスライダーを表示します。
SlideDeckのクールなデモをご覧になりたい方は、SlideDeckのサイトをご覧ください。
プラグインを導入した感想をお聞かせください。
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
delpihero says
I put <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>
at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.
I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect
CaroletteGoodlowWright says
So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Thanks,
wpbeginner says
@CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.
web design thailand says
The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !
EnkShahbazMehdi says
Jason, you can search for “Sticky Trending Bar using JQuery” and u may find it.
Jason says
Great post! Funny how things just appear… I was looking for a good slider.
What is the BAR Plugin you use below?
Editorial Staff says
It’s not a plugin. It’s custom code that we added on our site.
管理者
Adriana says
My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.
I have to try in my posts so see exactly how it works before replacing my main slider – I guess.
Thank for the tutorial.
S says
Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?
I am trying to figure out how to do this but no luck!
Editorial Staff says
Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.
管理者
Michele Welch says
Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.
I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.
Thanks for sharing this application!