生暖かく千葉ロッテマリーンズを見守るそんなblog

どうも～。なんか超久しぶりにウェブ関連の記事を真面目に更新する管理人ぷしです（爆）ウェブの仕事してるのにサボりまくってましたわ（笑）

今回はwordpress改造のお話。ブログの簡単な仕様変更をするつもりがかなり大掛かりな修正へと発展してしまったので、その軌跡を簡単にまとめておこうかと。

※結構の長いので前後編に分けます。

prototype.jsとjQuery

事の発端がコレ。今もう設置してあるんで、右下の方に表示されてると思うんですが、ページを下にスクロールすると自動で「トップへ戻る」がにゅるっと出現するこのシステム！これを置きたかったんですわ。

で、ちょっと調べるとプラグイン【Scroll to Top】とか【WP To Top】があるんで、これを入れれば一発で出来るんです。んで最初これを落として入れて見たんですが…

動かない。

おや、これは困ったぞ？相性悪いのか？じゃぁ、自分でjQuery書き込むかぁと埋め込んで見たんですが…

動かない。

なんでやねん！って調べていくと原因が発覚。どうも【prototype.js】と【jQuery】がバッティングしていて動かない模様。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例（かちびと.net）→参考にさせていただきました！

【prototype.js】はこのブログを作る時に元にしたテンプレートに入っていたやつで、コメントをajaxで動かすために使っていたっぽい。なんで【prototype.js】を取るとコメントが動かなくなると。でもこれがあると、【jQuery】が動かない。うーむ、どうするか…。

コメントも【jQuery】で動作するように改造じゃぁ！

トップに戻るを自動で表示させる！

まずはトップに戻るをスクロールすると自動に表示するシステムを制作。
詳細は下記ページを参照して作りました（手抜き）

ページトップへスムースにスクロールさせる方法（WordPressでブログアフィリエイト）
【カスタマイズ】トップに戻るボタンをjQueryでニュルッと改造する（りくまろぐ）

ソースはこんな感じ。

header.phpに読み込むbacktotop.jsとjQueryを設定。wp_headの下に置いたほうがいいっぽい。

<!--?php wp_head(); ?-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/js/backtotop.js"></script>

footer.phpにトップへ戻るボタンを設置。別にフッターに置かなくても大丈夫。

<!-- 「トップへ戻る」ボタン -->
<p id="back-top"><a href="#"><span>topへ戻る</span></a></p>
<!-- 「トップへ戻る」ボタン ここまで -->

backtotop.jsのソース。4行目の数値はスクロール開始位置の設定値。13行目の数字はスクロールのスピードの設定値。

$(function(){
$("#back-top").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 200){
$("#back-top").fadeIn();
} else{
$("#back-top").fadeOut();
}
});
$("#back-top a").click(function(){
$("body,html").animate({
scrollTop:0
},700);
return false;
});
});

cssのソース。css3で通常時は半透明、マウスオーバーすると解除するようにしてみました。

#back-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
}

#back-top a {
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;

filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
#back-top a:hover {

filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

/* arrow icon (span tag) */
#back-top span {
text-indent:-9999px;
width: 32px;
height: 32px;
display: block;
margin-bottom: 7px;
background: url(images/btn_arrow_up.png) no-repeat center center;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

これでトップに戻るをスクロールすると自動に表示するシステムは完成！
次記事はコメント欄の構築です！

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) 西畑 一馬 アスキー・メディアワークス 2010-02-12 by G-Tools

千葉ロッテマリーンズブログランキング

↑ブログ村ランキング参加中…　クリックよろしゅうm(_ _)m

タグ: css, JavaScript, jQuery, php, WordPress