Meta Sliderを採用し、PHPカスタマイズしてやっと実装できた

Meta Sliderを実装したら、4種類のスライダーに切り替えできた。

WordPressのプラグインにMeta Sliderがあります。

このスライダーは実装が簡単な事に加え、4種類のスライダーを切り替えて使うことができ
使えるプラグインです。その4種類のスライダーとは、下記「保存してプレビュー」の下の欄に
記載されている、4つのスライダーはこちらです。

Flex Slider、R. Slides、Nivo Slider、Coin Slider

Meta Sliderを採用し、PHPカスタマイズしてやっと実装できた

上記設定画面で右上から選択できるこの4つのスライダー、
Flex Slider、R. Slides、Nivo Slider、Coin Sliderは単体使用もできます。

いずれも上記設定画面のように、幅や高さのみならず、効果、テーマ、ナビゲーションの
表示か非表示かまで設定でき、大変パーフォーマンスがいいスライダーです。

特にこのうち、Flex Slider、R. Slides、Nivo Sliderの3つは、

レスポンシブにも対応しているので、スマホ表示が可能です。

よってレスポンシブテーマを活かすには、全てをレスポンシブ対応にします。
スライダーも上記3つから選んだ方がいい事になります。

そういうわけで今回はこの3つのうちから、Nivo Sliderを採用する事にしました。
効果も右下から左上へ、スクエア形状で、徐々に、変化していく感じに設定できました。

Meta Slider実装の時に間違いやすいポイント一つ目。

実装してみると、間違いやすいポイントがありました。

実際にやってみないと気づけない、クリアしなくてはいけないポイントが2つあったので備忘録しておきます。
ここ重要です。

スライドに用意する画像は実寸で4枚用意しておく。
もしサイズがあっていないと、スライドショーの画像がリピートになってしまいます。

Meta Slider実装の時に間違いやすいポイント二つ目。

スライドショーを適用させるショートコードはPHP。

二つ目、もうひとつもっと重要なポイントがかなり難解です。

ここ重要です。

設定が終わってから、Meta Sliderを、phpにコード貼る時、ワードプレスの場合は、
ショートコード(上の設定画面で、右下の「使い方」欄で、左タブのショートコードに記載のソースではなく、

ワードプレスはphpですから、右タブの「テンプレートに含める」に記載されている、
phpコードを、phpファイルの表示させたい箇所に、貼り付けます

もし右タブのPHPコードを貼らず、左タブのコードを貼ると、スライドショーが表示されません。

Meta Sliderの間違った左側のショートコードを貼ると成功しないから注意する。

下のbefore/afterのようにphpをカスタマイズします。

実際にやってここでつまづき、気づいたからよかったのですが、
表示させるのに時間がかかりましたので、ここが成功するかどうかのポイントです。

ショートコードのソースは、ウェブサイトがHTML&CSSの場合に、実装するコードで、
動的サイトではショートコードが別になるわけです。
そういうわけで、下記にて成功しました。

index.php BEFORE:

index.php AFTER:

結果このようなカバーをスライドショーにできました。

Meta Sliderを採用し、PHPカスタマイズしてやっと実装できた

Meta Sliderを採用し、PHPカスタマイズしてやっと実装できた

Meta Sliderを採用し、PHPカスタマイズしてやっと実装できた

実際の動きはこちら

ピックアップ記事

  1. 個人と大企業が互角の舞台はWebだけ
    ・ 個人と大企業が互角の舞台はWebだけ ・ 齋藤天津子のビジョン ・ 齋藤天津子…
  2. ・ UXデザインって何ですか? ・ なぜUXデザイナーが注目されているのですか? …
  3. ・ 大事な履歴書用写真なのに、その辺にある適当な写真を使ってませんか? ・ 履歴書用写…
PAGE TOP