栃木,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 を通してコメントをフォローする。 コメントを残すか、ご自分のサイトからトラックバックできます。 |