WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

簡単にスライドショーが作れるjQeuryスライダー「bxslider」をWordPressに導入してみた。

この記事は約2分18秒で読めます

bxslider
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

仕事でスライドショーの機能を付けたいという要望があったので
bxsliderというjQueryスライドショーを使うことになりました。

実際に使ってみて、とても便利だったのでWordPressに簡単に導入する方法をご紹介します。
ちなみに今回の導入時のbxsliderのバージョンは4.1.2です。

bxsliderのデモサイトもあります。

bxslider ダウンロード

公式サイトの右上の「Download」ボタンからダウンロードします。

「jquery.bxslider.zip」というファイルがダウンロードされます。

  • jquery.bxslider.js
  • jquery.bxslider.min.js
  • jquery.bxslider.css
  • bower.json
  • readme.md
  • images
  • plugins

上記のファイルが入っていますが、必要なファイルは
「jquery.bxslider.min.js」「jquery.bxslider.css」「images」ファイルだけです。

「bxslider」というフォルダを作成してその中に3つのファイル・フォルダを入れました。

bxslider

サーバー内に設置する

「wp-content」→「themes」→「n1-child(子テーマフォルダ)」→「js」→「bxslider」

「js」フォルダはなかったので、新たにフォルダを新規作成して配置しました。
配置場所がわかっていればどこでも問題なしです。

WordPressでbxsliderを使用する場合

使用しているテーマフォルダ内の「header.php」に下記のコードを追加します。

<head></head>内に記述してください。
テーマオプションでhead内にHTMLコードを埋め込めるテーマの場合はそちらに追記しましょう。

bxsliderで使用するクラスを指定するところで様々なオプションを指定することができます。

今回はデフォルトのまま使ってみたいと思います。
ちなみにWordPressは標準でjQueryが読み込まれているのでjQueryファイルは読み込まなくていいです。

header.phpに実際に挿入したコード

私の場合は子テーマフォルダの下にjsフォルダ、bxsliderフォルダを作ったので
上記のコードを追加しました。

bxsliderの使い方

こんな感じでul li タグで囲えばokです。

divタグで囲ってもok!お好みでどうぞ

試しにbxsliderでスライドショーを表示してみた!

剣と魔法のログレス いにしえの女神
logres_02
logres_03
logres_04
logres_05

リストタグはCSSで手を加えていることもあって表示が崩れてしまいました。
なので、divタグで囲ってます!

レスポンシブに対応されてるはずなので、スマートフォンからもちゃんと表示されているはずです。
あとで確認してみようと思います。

今回はデフォルトのまま使ってみましたが、
様々なオプション設定ができるので次の記事で紹介していきたいと思います。

剣と魔法のログレス いにしえの女神

今回使わせてもらった画像は私がいまもっともハマっているアプリ
「剣と魔法のログレス いにしえの女神」です。

ブログも書いています。
→ スマホログレス攻略指南書

関連記事

  1. WordPress SNS連携 プラグイン SNAP
  2. クリップアート, 鳥, 動物 / 生き物, 青い鳥, Twitter / ツイッター, EPS
  3. アクセサリー ビーチ 青 女性 フリップフ ロップ 帽子 休日 レジャー 海 砂 サンダル
  4. WordPressコメント メールアドレス任意入力
  5. WordPress Table of Contents Plus
  6. WordPress Crayon Syntax Highlighter

PR

カテゴリー