広告&webデザイン
<b>作業メモ</b>

前回の記事でhtmlにはうまくjQueryが入りました。

で、肝心のWPへの導入です。

最初に言っておくと、私のWPサイトの作り方はまずhtmlでかっちり作ってから、そこにPHPを加えていくという、なんともイレギュラーなものなので、WPのみでサイトを作ってる方の参考になるかどうかは分かりません(汗)

 

html編でテストとしてつくったデータから、必要な内容をWP用のデータにコピペしていきました。

まずはhead。

<script type=”text/javascript” src=”js/jquery-1.10.1.min.js“></script>
<script type=”text/javascript” src=”js/jquery.nivo.slider.js”></script>

<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider(); });
</script>

をWP用のheader.phpにコピペ。

 

つぎにhtml。

任意の場所に

<div id=”slider” class=”nivoSlider”>
<img src=”画像パス” alt=”” title=”” />
<img src=”画像パス” alt=”” />
<img src=”画像パス” alt=”” title=”” />
<img src=”画像パス” alt=”” title=”” />
</div><!– /#slider –>

をコピペ。

 

ええ、もちろん賢明な方はお気づきでしょうが、これではまったく動きません(^^;)

超初心者の私がよくやっちゃうんですが、WP用にパスを書かないといけませんね。

なので、それぞれ、以下の書き方になります。

 

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’);?>/js/jquery-1.10.1.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’);?>/js/jquery.nivo.slider.js”></script>

<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider(); });
</script>

 

<div id=”slider” class=”nivoSlider”>
<img src=”<?php bloginfo(‘template_url’);?>/images/画像名” alt=”" title=”" />
<img src=”<?php bloginfo(‘template_url’);?>/images/画像名” alt=”" />
<img src=”<?php bloginfo(‘template_url’);?>/images/画像名” alt=”" title=”" />
<img src=”<?php bloginfo(‘template_url’);?>/images/画像名” alt=”" title=”" />
</div><!– /#slider –>

 

で、header.php、home.php(その他任意のページ)、style.css、jsフォルダをftpにアップ。

おばかな私は、これで動くかも〜と思ったのですが、そうは問屋が卸さない(古!)。

なんかもう、Webマスターの方の苦笑いが見えそうですが、WPなのでWP用のプラグインを入れないといけないんですね。

ええ〜〜〜、まさかここにきてこれまでの作業が全部無駄!?

とうんざりしたのですが、解決は簡単でした。

 

プラグインの新規追加で「NIVO slider light 」を検索。

インストールして有効化したら、すぐにスライドショーが見れました(^ー^)

ちょっとナビゲーションのデザインとかが変わってましたが、むしろこっちの方がいい感じなので放置。

で、テストしたのがこんな感じ。

http://komorebinomori.net

まだ写真も入ってないし、Winチェックもしてないぐだぐだ状態ですが、とりあえず忘れないうちに作業工程をばば〜〜っと書いてみました。

まあ、こんなのでもWebのお仕事してるってことで、誰かの勇気づけにでもなれば、と恥を忍んで・・・(笑)

 

▲top作業メモ|2013年6月27日|

コメントを残す