【js】「ページトップへ戻る」ボタンをwordpressに実装する

最近のサイトに多い、下方にスクロールすると「ページトップへ戻る」ボタンが出現するスクリプト。

ここを参考に実装した。

*いくつか変更点あり。


【javascript】

jQuery(function() {
		
	//「topへ戻る」ボタンの設置
	var topBtn = jQuery('#pageTop');
	topBtn.hide();
	jQuery(window).scroll(function () {
		//画面上部から700スクロールした場合
		if (jQuery(this).scrollTop() > 700) {
			topBtn.fadeIn();
			
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function () {
		jQuery('body , html').animate({
			scrollTop: 0
		}, 50);
		return false;
	});
});

*1:
wordpressの場合、jQueryの他にprototype.jsも使用している。
そのため「$」は「jquery」に置き換なければならない。(コンフリクト回避) -> 参考


【css】
#pageTop{
	display:none;
	padding:0px;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:100;
}

*2:
display:none;を追加した。
これがないとDOM構築時に一瞬アイコンが表示されてしまうため。

【html】
<a id="pageTop" href="#page"><img src="./wp-content/themes/twentyeleven/images/icn_pagetop.png" alt="ページtopへ" width="32" height="32" /></a>



– – – – – – – – – – –
2013/06/06追記

wordpressプラグインがありました。
WordPress”トップに戻る”プラグインScroll to Top


【js】SyntaxHighlighterのコード対応一覧

SyntaxHighlighterのコード対応一覧
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

v3.0.83の対応一覧(2013/06/01現在)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


【WS】wordpress用プラグイン「simple-lightbox」の表示を調整したい

このブログはwordpressで作成していて、
lightboxプラグインとして「simple-lightbox」を入れている。

プラグインとして導入することで、簡単に各種設定できるのはありがたい。
(調整画面は、wordpressの編集画面 -> 外観 -> lightbox)


しかし突っ込んだ調整には、ソースを触る必要がでてくる。


今回、lightboxで表示した際に、
画像の下にタイトル等が出てしまうので、それらを非表示にしようと思った。

/blog/wp-content/plugins/simple-lightbox/themes/default/layout.html

上記ファイルの24行目、「slb_details」クラスのdivをコメントアウト。
(*実際は「slb_group_status」だけは表示できるように調整した)


ただそれだけなのだけど、
注意してほしいのは、設定でUI「Dark」を選択していた場合も、上記ファイルを触る必要があること。
themesディレクトリには「default」の他に「black」フォルダも存在するが、そちらには該当するファイルはない。

simple_lightbox

よくよく見ると、ちゃんと「Defalt(Dark)」って書いてあるので、間違えないかと思うけど、念のため…。


【jQuery】Firefox(osx)でthickboxの背景画像を表示したい

thickboxといえばlightbox風の表現として定着したライブラリかと思いますが、

今回導入したところ、
Firefox(osx)のみ、thickboxの背景画像(モーダル以外のグレー透過のやつ)が表示されなかった。
※chrome(osx)、safari(osx)、IE7~9(win)は問題なさそう。


下記を参考に対応した。
Mac版FirefoxでThickBoxの背景画像が表示されないトラブル

手順は以下の通り。

  • 1:ここここで、How to Implement ThickBox:にある macFFBgHack.png をダウンロードする。
  • 2:macFFBgHack.png をサーバーの任意の場所にアップロードする。
  • 3:thickbox.css 「.TB_overlayMacFFBGHack」クラスセレクタを探す。背景画像のパスをアップロードしたファイルのパスに合わせる。