栃木,Web,WordPress,スマートフォン,野球,ラグビーなど
WordPressの投稿記事に、jQueryでかっこいいイメージスライダー「Coin Slider」を組み込む方法
WordPressの投稿記事に組む込める、良いイメージギャラリーはないだろーか?
というわけで探してみたところ「Coin Slider」のエフェクトが気に入ったので実装。
こんな風にイメージギャラリーがWordPress(3.0.3)に組み込めました。
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_01.jpg)
マンホールカープ仕様
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_02.jpg)
赤ローソンカープ仕様
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_03.jpg)
コンビニ店員さんカープ仕様
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_04.jpg)
めちゃめちゃ綺麗なzoom zoomスタジアム
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_05.jpg)
めちゃめちゃ綺麗なzoom zoomスタジアム
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_06.jpg)
めちゃめちゃ綺麗なzoom zoomスタジアム
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_07.jpg)
スタジアム内カープ達磨とカープ鯛
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_08.jpg)
7回裏ラッキーセブン
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_09.jpg)
もう生で見られないであろう、巨人相手にスミ1勝利!!!
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_10.jpg)
篠田ヒーローインタビュー
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_11.jpg)
スタジアムで購入した丸Tシャツ
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_12.jpg)
初・厳島神社。猛暑のため、シカもバテてます。
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_13.jpg)
初・厳島神社。大鳥居
![hiroshima](/wordpress/wp-content/uploads/coin-slider/images/20111009/hiroshima_14.jpg)
ひろしまお好み物語・駅前ひろば BOSSにて。
—以下設定方法—
(1)coin-sliderのサイトから、cssとjsをダウンロード
(2)フォルダごと、/wordpress/wp-content/uploads にアップロード
(3)画像ファイルをアップロード
※ディレクトリ構成はこんなかんじ
/wordpress/wp-content/uploads
└ coin-slider
├ images
│ ├ image_1.jpg (スライダーに入れたい画像1)
│ ├ image_2.jpg (スライダーに入れたい画像2)
│ └ image_3.jpg (スライダーに入れたい画像3)
├ coin-slider.js (coin-sliderのサイトから)
├ coin-slider.min.js (coin-sliderのサイトから)
└ coin-slider-styles.css (coin-sliderのサイトから)
(4)coin-slider-styles.cssに、下記1行を追加
#coin-slider-coin-slider {width:600px;}
—ここからWordPress側の設定—
(5)となりのソフト屋さんからプラグインをダウンロード
(6)(5)を解凍し、/wordpress/wp-content/pluginsに保存
(7)管理画面のプラグインから、’add css js’を有効化
(8)管理画面の投稿から、カスタムフィールドを追加。追加内容は以下の通り。
名前:cssfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider-styles.css
名前:js
値:$j = jQuery;
$j(document).ready(function() {
$j(‘#coin-slider’).coinslider({
width: 600, //画像幅
height: 400, //画像高
spw: 7, //画像切替時の横四角数
sph: 5, //画像切替時の縦四角数
});
});
名前:jsfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider.js
名前:jsfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider.min.js
(9)htmlを書く。
<div id=”coin-slider”>
<!– 画像ファイルの設定 ここから–>
<a href=”#” target=”_blank”><img src=”/wordpress/wp-content/uploads/coin-slider/images/image_1.jpg” alt=”画像1″ /><span><strong>画像1</strong>コメント1</span></a>
<!– ここまで 画像数分以降繰り返し–>
</div>
設定は以上。ナイススライダー!!
印刷 | この記事は ohsexybaby によって 2011/10/10 1:34 AM に投稿されました, Web, WordPress 以下に保存されています。 RSS 2.0 を通してコメントをフォローする。 コメントを残すか、ご自分のサイトからトラックバックできます。 |