SWELLで使われている主な技術を、カスタマイズ向けに書いていきます。
この記事は、この先も色々と深堀りして更新予定です。お楽しみに。
SWELLのキャッシュ機能(Transients API)
SWELLには「データベースへのキャッシュ」機能が予め備わっていますが、それは具体的にはどういったものか?というのが公式サイトで解説されています。WordPressに元々備わっている、Transients APIというものが使われているそうです。
スライダー(Swiper.js)
SWELLではスライダー(スライドショー)にjQueryに依存しないSwiper(Swiper.js
)が使われています。主に使用されている箇所は以下の通りです。
- メインビジュアル
- 記事スライダー
- スマホ用ヘッダーメニュー(ループ時のみSwiperが読み込まれる)
Swiperのカスタマイズ例
任意の場所にSwiperを挿入する
たとえば、固定ページや投稿記事内に複数の画像のスライドショーとして、Swiperを用いたい場合は、私の以下の記事を参考にしてください。応用していただくと、ウィジェットなどにも挿入することができるようになります。
記事スライダーを下層ページにも表示されるようにする
かんたさんが、SWELLの記事スライダーを下層ページにも表示されるようにするカスタマイズ記事を公開されています。
画像クリックで拡大画像をポップアップ表示する(Luminous.js)
画像をクリックしたときに、拡大画像をポップアップ表示するために、jQueryに依存しないLuminous Lightbox(Luminous.js
)が使われています。Luminousは、とても軽量でシンプルな画像用ライトボックスプラグイン(JavaScript)です。