nivoSliderをWordPressに実装

themeのフォルダー内にアップロード

• FTPでアップロード

header.phpを編集

• 以下の記述を追加する
• <?php wp_head(); ?>の上に挿入

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/style.css" type="text/css" media="screen" />

footer.phpを編集

• 以下の記述を追加する
• <?php wp_footer(); ?>の上に挿入

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/nivoSlider/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/nivoSlider/scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

表示する

• CSSファイル内の「セレクタ」のパスの書き替えが重要

ビルボードに挿入

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="<?php bloginfo('template_url'); ?>/nivoSlider/images/01.jpg" alt="" title="Miles Davis 1" />
<img src="<?php bloginfo('template_url'); ?>/nivoSlider/images/02.jpg" alt="" title="Miles Davis 2" />
<img src="<?php bloginfo('template_url'); ?>/nivoSlider/images/03.jpg" alt="" title="Miles Davis 3" data-transition="slideInLeft" />
<img src="<?php bloginfo('template_url'); ?>/nivoSlider/images/04.jpg" alt="" title="#htmlcaption1" />
<img src="<?php bloginfo('template_url'); ?>/nivoSlider/images/05.jpg" alt="" title="#htmlcaption2" />
</div>
<div id="htmlcaption1" class="nivo-html-caption">
<a href="http://milesdavis-japan.com/">Kind Of Blue</a>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
<a href="http://milesdavis-japan.com/">Sketches Of Spain</a>
</div>
</div>

記事内に挿入

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="ドメインURL/nivoSlider/images/01.jpg" alt="" title="Miles Davis 1" />
<img src="ドメインURL/nivoSlider/images/02.jpg" alt="" title="Miles Davis 2" />
<img src="ドメインURL/nivoSlider/images/03.jpg" alt="" title="Miles Davis 3" data-transition="slideInLeft" />
<img src="ドメインURL/nivoSlider/images/04.jpg" alt="" title="#htmlcaption1" />
<img src="ドメインURL/nivoSlider/images/05.jpg" alt="" title="#htmlcaption2" />
</div>
<div id="htmlcaption1" class="nivo-html-caption">
<a href="http://milesdavis-japan.com/">Kind Of Blue</a>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
<a href="http://milesdavis-japan.com/">Sketches Of Spain</a>
</div>
</div>

CSSの変更

• bodyに影響のある設定は削除する

《style.css》

.theme-default #slider {
    margin:10px auto 0 auto;  /* 上から10px空き */
    width:550px;
    height:366px;
}

《default.css》

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-32px;  /* bulletsの上からの空き */
    margin-left:-50px;  /* bulletsの左からの位置決め */
}