WordPressにスライダーを実装する

2024-09-16

Swiperを使って実現

WordPressなので、プラグインもあるらしいのですが、私はSwiperを使って実現する方法がいいなーとも思いました。私、WrodPressのプラグインってあんまり好きじゃないんですよね…。中にはいいプラグインもあるとおもうんですけど、どんどん重くなって、依存度が高くなって、気軽にサイト移植もできなくなるのでは…と思ってむやみやたらにプラグインは入れない派です。

Swiperのサイトはこちら

Swiperを使うために修正したファイル

私は最低限の機能が使えればいいと思っていたのと、あんまりファイルを増やして管理したくなかったので（もしこういうツールを他にも使うことがあれば、ファイルを増やして管理するかもしれないけれど）、もともと存在するファイルに対して修正をしました。

• add-head.php　←　SwiperのCSSファイルのCDNを記載
• add-footer.php　←　SwiperのjsファイルのCDNを記載
• luxech.js　←　利用しているテーマのjsファイル　Swiperの初期設定スクリプトを記載
• style.css　←　自サイトでの色合い、表示枚数などをカスタマイズするCSSを記載

上の４ファイルは利用しているテーマの子テーマに用意されているファイルです。Swiperについて調べていると、jsファイルとcssファイルを別ファイル（Swiper用として）を用意しているところもありましたが、私はもともと子テーマのstyle.cssやluxech.jsを利用していなかったので、ここに書いちゃえばいっかってことで書いちゃいました。移植性を考えるなら別ファイルにしておいたほうがいいとは思っています。

しかし、こういう新しい事を勉強し始めた時というのは、まず実装することが大事、と思っています。移植性も考えながらごちゃごちゃやっていると、何がクリティカルな作業で、何が移植性の作業なのかがわからなくなって、移植性が本来の作業を邪魔してくることもあります。新しい事を勉強するときはシンプルな環境でやったほうがいいです。

add-head.php

SwiperのサイトのCDNのところからコピーしました。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

add-footer.php

SwiperのサイトのCDNのところからコピーしました。

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

luxech.js

こちらのサイトのをコピーして、slidesPerViewを追加しました。

jQuery(function(){
  const mySwiper = new Swiper('.swiper', {
    // Optional parameters
    autoplay: true,
    loop: true,
	slidesPerView: 4,
  
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
});

style.css

こちらのサイトのをコピーして、heightやbackground-colorなど自分のサイトに会うように修正しました。

.swiper {
  width: 100%;
  height: 150px;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  background-color: #ffffff;
}

ある程度の技術力が必要

プラグインを使わないので、そりゃそうでしょ、という話かもしれませんが、やっぱりプラグインを使わないってなるとある程度の技術力が必要ですね。どういう技術力かっていったらこのレベルです。

• WordPressの親子テーマの仕組み
• CSSファイルが何なのか
• jsファイルが何なのか
• CSSファイルやjsファイルのサイトへのアップロード方法

これが分からないなら、プラグインを使った方がいいと思います。「WordPress Swiper」でググると、説明してくれているサイトがたくさんみつかるけれども、私のいま書いている記事もそうですが、初心者向けではないんですよね。そのブログの人がやりたかったことを実現した結果を書いているので、単純にスライダーを設定するわけではなく、中には複雑な記事になっているものもあるので、「この情報はいるいらない」を取捨選択する能力も必要になってきます。

世の中便利になってきているけれど、技術を学んでツールは使った方がいいと思うんですけど、世の中のスピードについていくためには勉強はそこそこに実践で成果を出すことが正義とされています。そりゃそうなんですけど、その出された成果を保守する人間もいるんですよ。理解していない人間がつくったプログラムってほんと最低なんですよね。保守しづらいっていったらありゃしない。

おっと、日ごろの仕事へのうっぷんが出てきてしまいました。とりあえずSwiperというツールでシュッシュッていうのを実現できました。このブログでは実現してないですけどね…だってこのブログであれを使って読者を誘導したい記事っていまのところないので…。ブログってどんなにいいツールを使ったとしても結局記事内容がよくないと、ですからね🙄