SlideDeck を使用して WordPress でスライダーを作成するステップバイステップガイド

昨日、WPBeginnerクーポンをローンチした後、私たちは、すべてを統合しながらも見た目が良いメインのWPBeginnerサイトの最高のデザイン構築に完全に焦点を当てています。私たちはサイトにスライダーを追加したかったのですが、すべてのスクリプトには制限がありました。そして、99designs、SitePoint、Flippaの素晴らしいマット・ミクiewicz氏（WPBeginnerでの彼のインタビューを見る）のおかげで、SlideDeck（これまでのところウェブ上で最高のスライダー スクリプト）の作成者であるDigital Telepathyの皆さんに紹介してもらいました。私たちはそれを試してみて、感銘を受けました。それは、スライダーを作成するための簡単なドラッグ＆ドロップインターフェイスを提供する完全なWordPressプラグインを提供するため、初心者にとって素晴らしいです。しかし、jQueryバージョンがあり、開発者にニーズに合わせてカスタマイズするための追加の自由を提供するため、開発者にとっても素晴らしいです。この記事では、SlideDeck WordPressプラグインを使用して、コードを一行も編集せずにWordPressでスライダーを作成する方法を説明します。

このプラグインで何が作成できるかを確認したい場合は、ライブデモをご覧ください。

ステップ 1. プラグインのダウンロードとインストール

SlideDeckのウェブサイトにアクセスしてプラグインをダウンロードしてください。無料バージョンと、サポートやさらに多くの機能を提供するPROバージョンがあります。新しい製品を扱うときは、常にサポートバージョンを入手します。開発中に数回行き詰まりましたが、彼らのサポートは素晴らしく、私たちを助けてくれました。PROバージョンには、垂直スライド、タッチスクリーンサポート、サポート、RSSフィードスマートスライドデッキ、背景画像サポートなど、クールな機能が含まれているため、強くお勧めします。

プラグインをダウンロードしたら、プラグインをインストール/アクティブ化してください。（WordPressプラグインのインストール手順に従ってください）

スライダーを作成しましょう

プラグインを有効化すると、SlideDeckという新しいタブが表示されます。では、Add New SlideDeckをクリックしましょう。投稿作成パネルのような画面が表示されます。

そこで、スライドにコンテンツを追加し、タイトルを付けました。カスタム背景画像（PRO機能）を使用することもできましたが、簡単にするために今回は行いませんでした。このプラグインがそのまま何ができるかを示したかったのです。これが最初の標準スライドです。デモに追加した次のスライドは、縦スライド（PRO機能）でした。縦スライドは基本的に、スライド内の複数のスライドです。上の画像を見ると、「縦スライドに変換」というボタンがあります。次のスライドでクリックしたのがそのボタンで、追加されたのがこれです。

同様の手順を、希望するスライドの数だけ繰り返してください。スライドの作成が完了したら、サイトにスライドを公開するためのSlideDeckオプションを見てみましょう。これは、スライド編集画面の右側に表示されます。

自動再生、キーボードナビゲーションの許可、マウスのホイールスクロールナビゲーションの許可、アニメーション速度の設定、素晴らしいスキンの中から1つを選択、開始したいスライドの選択ができます。ドラッグ＆ドロップでスライドの順序を変更することもできます。テーマに含めるコードが含まれたテーマコードスニペットが表示されます。テーマ内の好きな場所に追加できます。おっと、SlideDeckをWordPressに統合するためにコードを1行も編集する必要がないと言いませんでしたか？はい、このチュートリアルではその言葉を守ります。コードを1行も編集せずにWordPressに統合する方法をご紹介します。

SlideDeck を WordPress の投稿/ページに統合する

新しい投稿またはページを作成します。右側のサイドバーに新しい SlideDeck ボックスが追加されているのがわかります。

スライドデッキ挿入ボタンをクリックします。追加したいスライダーを選択し、投稿を公開します。投稿を公開すると、スライダーはクラシックスキンで次のようになります。

固定投稿、全幅ページテンプレート、またはお好みのものに使用できます。しかし、それだけではありません。もう少し進んでみましょう。

おすすめ投稿でスライダーを追加

おすすめ投稿スライダーはブロガーのお気に入りです。多くのブログでこの機能を見かけますが、ほとんどのスライダーはテーマにハードコーディングされており、ユーザーの制御が限られています。さて、SlideDeckでどれだけ簡単にできるか見てみましょう。最近の投稿、人気の投稿、おすすめの投稿（あなたが選んだもの）のいずれかを表示できる「スマートスライドデッキ」と呼ばれる動的なスライダーを追加できます。これをカテゴリで並べ替えたり、別のサイトからRSSフィードをインポートしてスライダーに追加したりすることもできます。さまざまなスキンから選択し、さまざまなナビゲーションタイプを選択して、5分以内にスライダーを準備できます。方法を説明しましょう。チュートリアルでは、投稿からのおすすめエントリを表示します。

現在の投稿に移動し、5つの投稿を選択して、チェックボックスをオンにしてSmart SlideDecksに追加してください。

次に、SlideDeck パネルに移動し、[スマート SlideDeck を追加] をクリックします。スキンを選択してください:

表示したいスライドの数、再生オプション、コンテンツの種類（[注目の投稿] から取得している様子をご覧ください）を選択します。画像オプション、タイトルの長さ、抜粋の長さなどのコンテンツ設定を選択できます。ナビゲーションスタイルを選択し、[公開] をクリックします。

この部分ではコードを編集する必要があります。サイドバーの「テーマスニペットコード」からコードを取得し、テーマに貼り付けます。おそらくindex.phpの先頭でしょう。コード例は以下のようになります。

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

これにより、ホームページにのみスライダーが表示されます。

SlideDeckの実際のクールなデモを見たい場合は、SlideDeckのウェブサイトにアクセスして確認してください。

実装する際に、プラグインに関するご意見をお聞かせください。