MotoPress スライダーで美しいスライドを追加

MotoPress は、ページ構築コンテンツエディターの WordPress プラグインで WordPress コミュニティでよく知られています。昨年の立ち上げ以来、MotoPress はプラグインアドオンや WordPress テーマなど、さらに多くの製品をポートフォリオに追加してきました。

今年 2 月に彼らは MotoPress Slider をリリースしました。 2 番目の主要な WordPress プラグインです。このプラグインは応答性が高いため、作成に役立つスライドはどのデバイスでも見栄えがよくなります。 MotoPress Slider で何ができるかを詳しく見てみましょう。

新しい MotoPress スライダーの構成

MotoPress Slider のセットアップは驚くほど簡単です。新しいスライダーの作成を選択すると、3 つの短い設定ページが表示されます。スライダー設定、コントロール、外観のタブがあります。

スライダー設定タブでは、スライダーとスライダーのショートコードに使用されるエイリアスに名前を付けることができます。スライダーを全幅にすることも、グリッドのデフォルトサイズを定義することもできます。スライドショーの遅延もこの領域で設定できます。必要に応じて、スライドショーを無効にすることもできます。

次のタブで 9 つのスライダーコントロールを有効または無効にできます。矢印、再生ボタン、カウンターなどのコントロールを構成できます。

[外観] タブでは、携帯電話、タブレット、デスクトップのディスプレイのデフォルトのピクセルサイズを定義できます。元の設定では、767 ピクセルまでは電話レイアウトを使用して表示され、768 から 991 ピクセルまではタブレットレイアウトを使用し、992 ピクセルを超えるものはデスクトップディスプレイを使用します。

カスタム CSS クラスをスライダーに適用できます。カスタム CSS コードを追加できるボックスもあります。

MotoPress Slider 管理メニューには別の設定ページがあり、特定のユーザーグループに対してスライダーを無効にすることができます。

スライダー設定についてはあまり心配しないでください。ほとんどの人にとってデフォルト値で問題ありません。スライダー作成領域の下部には、いつでも設定に戻ったり変更したりできるボタンがあります。

新しい MotoPress スライダーにスライドを追加する

次の領域では、スライダーにスライドを追加できます。この領域のスクリーンショットを以下に示します。一見すると少し難しそうに見えますが、どこに何があるか分かれば非常に簡単に理解できます。

上部には、「一般」、「色」、「画像」、「ビデオ」、「リンク」、「表示設定」、「その他」の 7 つのタブがあります。スライダーのプレビューがページの中心を占め、その下にはテキスト、画像、ボタン、ビデオを追加するためのオプションがあります。コンテンツの各タイプはレイヤーとして知られており、これらのレイヤーはページの右側に表示されます。

ドラッグアンドドロップを使用してレイヤーの順序を並べ替えることができます。レイヤーの配置は、Photoshop などのグラフィカルアプリケーションと同じように機能し、一番上のレイヤーが優先されます。上の例では、画像とテキストの 2 つのレイヤーがあります。 HTML レイヤーを画像の後に配置する必要がある場合、テキストは表示されません。

インターフェースは非常にうまく機能します。メインのキャンバス領域でレイヤーを選択すると、そのレイヤーの設定がその下に表示されます。キーボードの「削除」をクリックすると、スライドからレイヤーが削除されます。 2 つの削除ボタンも使用できます。1 つは選択したレイヤーを削除し、もう 1 つはすべてのレイヤーを削除します。

レイヤーはキャンバス領域内でドラッグできます。これを実行すると、X 座標と Y 座標が変化することがわかります。これは、複数のスライドにわたってレイヤーをまったく同じ位置に配置できることを意味するため便利です (テキストなどのコンテンツを配置する場合に非常に便利です)。 9 ボックスグリッドを使用してレイヤーを配置することもできます。左上、中央、右下など。

レイヤーのフェードインおよびフェードアウトに数十のアニメーションを使用できます。これには、フェード、ズーム、フリップ、バウンスが含まれます。レイヤーは、特定の時点 (ミリ秒単位) で表示または非表示にすることができます。私の謙虚な意見では、これは、表示したいときにレイヤーを正確に表示できるため、このプラグインの最も優れた機能の 1 つです。

事前定義されたスタイルも使用できますが、必要に応じて、特定のレイヤーにカスタム CSS クラスを定義できます。

[全般] タブでは、スライドに名前を付け、スライドを公開するか下書きとして保存するかを選択できます。こうすることで、創造性を発揮し、ライブで使用する前にスライドを保存できます。

[カラー] タブでは、スライドの背景の色またはグラデーションを選択できます。気になったのは、色を選択するためのカラーホイールがないことです。 16 進コードを手動で入力する必要があります。これがプラグインの将来のバージョンで対処されることを願っています。グラデーションオプションを使用すると、2 つの色とグラデーションを適用する角度を定義できます。

単色またはグラデーションの背景が不要な場合は、画像を使用できます。 WordPress メディアライブラリから画像を選択することも、外部画像 URL を定義することもできます。サイズ、繰り返し、位置の属性はすべて定義できます。

MotoPress Slider はビデオ背景もサポートしています。必要に応じて、レイヤーを使用してビデオをスライドに挿入できます。 YouTube、Vimeo、メディアライブラリ、または外部 URL からビデオを表示できます。

スライドはリンク可能にすることができます。リンク ID、class、rel、title 属性を設定できます。訪問者が該当のスライドをクリックすると、定義した URL に移動します。リンクはスライドごとに設定されるため、一部のスライドを外部 Web サイトにリンクし、他のスライドをリンクしないようにすることができます。

スライドはログインユーザーに制限できます。これは、登録ユーザーにのみスライドを表示するために使用できます。特定の期間にスライドをアクティブにすることもできます。これなら色々な用途に使えそうですね。たとえば、12 月の第 1 週にコンテストを宣伝するスライドを作成できます。

最後のタブでは、スライドの CSS クラス名と ID を定義できます。前に述べたように、カスタム CSS クラスを使用して、スライド内の個々のレイヤーのスタイルを設定することもできます。

スライドを作成したら、ページの下部にある保存ボタンを使用してスライドを保存できます。閉じるボタンをクリックすると、スライドリスト、つまり、その特定のスライダー用に作成したすべてのスライドが表示されます。

既存のスライドを編集、複製、または削除できます。スライドの複製は、同様のスライドを作成する場合に便利なオプションです。そうでない場合は、新しいスライドを最初から作成できます。

最後に、スライダーに定義したショートコードエイリアスを使用して、完成したスライダーを Web サイトに挿入できます。

MotoPress スライダー

美しさは見る人の目で決まると言われますが、私は MotoPress Slider の機能に非常に感銘を受けました。カスタムの背景、テキスト、画像、ボタン、ビデオを挿入するのに時間はかかりません。

MotoPress Slider のメイン情報ページにアクセスすると、プラグインを使用して何が実現できるかを示す優れた例が表示されます。レイヤーとレイヤーの読み込みの遅延を使用して、プロフェッショナルなスライダーを数分で作成する方法を強調しています。スライド中にレイヤーが時間の経過とともに表示される様子は、(ビデオが使用されていない場合でも) ビデオプレゼンテーションを見ているような印象を与えます。スライドを本当に変えるシンプルなエフェクトです。

価格設定

MotoPress は、スライダープラグインに公正な価格設定スキームを採用しています。個人ライセンスの小売価格は 19 ドルで、1 つの Web サイトに対して 1 年間のサポートとアップデートが提供されます。小売価格は 49 ドルで、このビジネスライセンスにより、Web サイトの制限が 1 つから 5 つに増加します。

開発者ライセンスの小売価格は 99 ドルです。優先開発者サポートを提供し、1 年間のサポートと無制限の数の Web サイトの更新を提供します。 MotoPress Slider を独自の製品にパッケージ化したい場合は、ボリュームライセンスも利用できます。

MotoPress Slider は 100% GPL です。プラグインの自動更新とサポートを取得するにはライセンスが必要ですが、このライセンスキーが入力されていなくてもプラグインは引き続き完全に使用できます。

最終的な考え

すべての WordPress スライダープラグインには学習曲線があり、MotoPress Slider も例外ではありません。プラグインの機能を理解し始めるまで、少なくとも 20 ～ 30 分はスライドをいじってみる必要があります。

このプラグインを短期間使用した後、すべてがどのように機能するかを理解し始めたとき、「なるほど」と思う瞬間がいくつかありました。 1 つ目は、レイヤーを最大限に活用する方法を理解したときです。 2 つ目は、アニメーションを使用してテキスト、ボタン、画像をフェードインおよびフェードアウトする方法を学んだときです。しかし、MotoPress スライダーの可能性を私に本当に理解させた機能は、レイヤーの表示を遅らせるオプションでした。これにより、Web サイト訪問者にテキストをドリップフィードしたり、スライドの重要なポイントで画像やボタンをポップアップしたりするなど、多くの優れたプレゼンテーショントリックを使用できるようになります。

これらの簡単なテクニックをマスターすれば、MotoPress Slider を使用して本格的なスライドを作成できるようになると確信しています。インスピレーションが必要な場合は、MotoPress に表示されるスライダーをチェックすることをお勧めします。これは、単純なテキストと画像レイヤーを使用して何が達成できるかを強調しているからです。

MotoPress Slider の外観を楽しんでいただければ幸いです。その場合は、WPExplorer ニュースレターを購読して、最新記事や WordPress に関する優れたヒント、コツ、オファーの無料アップデートを受け取ることをお勧めします。

読んでくれてありがとう。

ケビン