栃木,Web,WordPress,スマートフォン,野球,ラグビーなど
WordPressの投稿記事に、jQueryでかっこいいイメージスライダー「Coin Slider」を組み込む方法
WordPressの投稿記事に組む込める、良いイメージギャラリーはないだろーか?
というわけで探してみたところ「Coin Slider」のエフェクトが気に入ったので実装。
こんな風にイメージギャラリーがWordPress(3.0.3)に組み込めました。

マンホールカープ仕様

赤ローソンカープ仕様

コンビニ店員さんカープ仕様

めちゃめちゃ綺麗なzoom zoomスタジアム

めちゃめちゃ綺麗なzoom zoomスタジアム

めちゃめちゃ綺麗なzoom zoomスタジアム

スタジアム内カープ達磨とカープ鯛

7回裏ラッキーセブン

もう生で見られないであろう、巨人相手にスミ1勝利!!!

篠田ヒーローインタビュー

スタジアムで購入した丸Tシャツ

初・厳島神社。猛暑のため、シカもバテてます。

初・厳島神社。大鳥居

ひろしまお好み物語・駅前ひろば 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 を通してコメントをフォローする。 コメントを残すか、ご自分のサイトからトラックバックできます。 |