フッターを下部に固定するfooterFixed.jsを、メインエリアの背景が切れないように改造してみた

MITライセンスのfooterFixed.js
http://blog.webcreativepark.net/2007/11/16-012253.html
すご~く便利なのだけど、メインエリアの背景が切れてしまうので、改造してみた。
要jQuery
JavaScriptだけで改造できるとかっこいいんだろうな……。

HTML(だいたい。)footerがfooterWrapに直してないのはちょっと恥ずかしいかなと思いつつ、そのまま公開。
気になるようなら個人的に直すといいんだろうな。

<div id="#headerWrap">
</div>
<div id="#mainWrap">
</div>
<div id="footer">
</div>

footerFixed.jsの改造部分。
30行目付近から。

		if(ft+fh<wh){
//追記部分開始
			var mainH = wh - fh - $('#headerWrap').height();
//追記終了
//記述変更
//			document.getElementById(footerId).style.position = "relative";
//			document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
			document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
//追記部分開始
			$('#mainWrap').css({height:mainH});
//追記終了
		}

youtubeのコード二種類(140328現在)

jQueryとかで表示をいじった時
youtubeで不都合が起きたらコードの種類を変えてみるというアプローチもありかもしれない。
二種類のコードをメモしておく。

<iframe width="560" height="315" src="//www.youtube.com/embed/nwWm3om-gSw?rel=0" frameborder="0" allowfullscreen></iframe>
<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/nwWm3om-gSw?version=3&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/nwWm3om-gSw?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Multi Device Switcherとfunction.phpのウィジェット周りの挙動

WordPressの、
Multi Device Switcherとfunction.phpのウィジェット周りの挙動。
PCで使うウィジェットとSPで使うウィジェットを使い分けたい場合。
PC用のウィジェットはPC用のfunction.phpに普通に書けばいいのだけど
SP用のウィジェットはPC用のfunction.phpとSP用のfunction.php、両方に書かないと動作しない。

この実装方法、
重複するソースが重なってしまって美しくはないけど
・ウィジェットにしたい点数が少ない
・PCにウィジェットで実装してる部分が既にある
・管理画面的にはウィジェットページだけで管理できたほうがスマート
という場合には検討してもいいかも。

それ以外の方法なら
・がっつりカスタムフィールド作り込み
・固定ページかカスタム投稿で入力画面をカスタマイズ
・いらない入力欄をあの手この手で不可視化

その際は
Advanced Custom Fields
というプラグインが現状いちばん使い勝手がいいみたいです。

プラグインのウィジェットを管理画面から削除する方法

プラグインフォルダからこの文字列を検索

register

プラグインフォルダからこのような感じの文字列をコピーして
function.phpにペースト
(example_widget_initやexample_Widgetの部分はプラグインによってちがいます)

function example_widget_init() {
    register_widget('example_Widget');
}
add_action('widgets_init', 'example_widget_init');

関数名を適当に書き換える
example_widget_initをexample_widget_init_deleteにする
関数名がかぶらなければどんなものでもいいみたいです。

register_widgetを
unregister_widgetに書き換える

できあがりはこんな感じ。

function example_widget_init_delete() {
    unregister_widget('example_Widget');
}
add_action('widgets_init', 'example_widget_init_delete');

WordPress標準のウィジェットの場合はこちらがとても参考になりました。
お手軽WordPress Tips:管理画面で追加できるウィジェットで不要のコンテンツを削除する
http://kachibito.net/wordpress/remove-admin-widget.html

ソーシャルボタンが配置されているページの描画の高速化

非同期通信を有効化することで、ソーシャルボタンが配置されているページの描画を高速化できるみたい。
本当に描画が早くなった!!

facebook

<script type="text/javascript">// <![CDATA[(略)

の部分に変更

変更前の行

js = d.createElement(s); js.id = id;

変更後の行

js = d.createElement(s); js.id = id; js.async = true;

twitter

!function(d,s,id)(略)

の部分に変更

変更前の行

js=d.createElement(s);js.id=id;

変更後の行

js=d.createElement(s);js.id=id;js.async = true;

google+

window.___gcfg = {lang: 'ja'};
(function() {(略)

の部分に変更

変更前の行

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

変更後の行

var po = document.createElement('script'); po.type = 'text/javascript';

参考サイト様

http://ora.geo.jp/?p=474

ページネーションが効かない原因とquery_posts

WordPressのページ送りが個人的に難所だったのでとっても助かった。

諦めないで…!WordPressでページ送りがうまく行かない時の3つの対処法+究極奥義
http://webimemo.com/wordpress/1813

表示設定を1件にする
下記の記述を試してみる

<?php if (have_posts()) : query_posts($query_string . '&posts_per_page=4&cat=3&paged='.$paged); ?>

これで解決したのだけど、
query_postsという記述方法は問題が多いので推奨されていないらしい。
下記がとてもわかり易かった。

query_postsを捨てよ、pre_get_postsを使おう
http://notnil-creative.com/blog/archives/1688

WordPressでページ送りが動かないのはどう考えてもquery_postsが悪い!【pre_get_posts、WordPressループまとめ】
http://notnil-creative.com/blog/archives/1996

基本文法

function 関数( $query ) {
    if ( is_admin() || ! $query->is_main_query() )
        return;
 
    if ( クエリーの改変を適用する条件 ) {
        $query->set( 'パラメーター', '値' );
        return;
    }
}
add_action( 'pre_get_posts', '関数名' );

例えばこんな記述をしてみたり

global $post;
$args = array( 'posts_per_page' => 5, 'cat' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) {
    setup_postdata($post);
    ?>
    <h1><?php the_title(); ?></h1>
    <?php
}
wp_reset_postdata();

jQueryでタブ切り替え。バグるコードとバグらないコードを比較してみた。

タブ切り替え的なUIを作った。
バグるコードとバグらないコードをメモしておく。

バグるコード。
chrome33で、
素早くタブ切り替えをするとバグる。
フラグで切り替えたりしてても時々バグる。
処理中に別の処理が並行して走るからバグってしまうみたい。
比較的処理がゆっくりなIE8とかだとバグらない。
具体的にどこでエラーを起こしてるのかはよくわからなかった。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		var onName = '_on';
		var offName = '_off';
		var selectedName = '_selected';	
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//サムネイルクリック時の挙動
		
		var changeflag = true;
		
		function changeImg() {
			$('#packageWrap li img').each(function(){
				var	thisattr = $(this).attr('src').replace(selectedName, offName).replace(onName, offName);
				$(this).attr('src',thisattr);
			});
		};
		
		$('#packageWrap li img').on({
			'click':function(){
				if(changeflag = true){
					changeflag = false;
					$('#packageWrap li img').removeClass('selected');
					$(this).addClass('selected');
					changeImg();
					$('#detailBox>div').hide();
					openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
					$(openDiv).show();
					this.setAttribute('src', this.getAttribute('src').replace(offName, selectedName).replace(onName, selectedName));
					changeflag = true;
				}else{
					return false;
				};
			},
			'mouseenter':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute('src').replace(offName, onName));
				}
			},
			'mouseleave':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute("src").replace(onName, offName));				
				}
			}
		});
	});
});

バグらないコード。
ひとつひとつif文で分岐しているからバグらない。
手抜きしないで丁寧に分岐させてあげるのが大事みたい。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		pageTab();
	});
	
	function pageTab() {
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//クリックの処理
		$('#packageWrap li img').click(function(){
			$('#packageWrap li img').each(function(){
			if(String($(this).attr('src')).match(/_selected\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_selected','_off'));
			}
			});

			if(String($(this).attr('src')).match(/_off\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_off','_selected'));
			}else
	
			if(String($(this).attr('src')).match(/_on\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_on','_selected'));
			}
			
			$('#detailBox>div').hide();
			openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
			$(openDiv).show();
		});
	
	
		//ボタンのロールオーバー
		$('#packageWrap li img').hover(function(){
			$(this).attr('src',$(this).attr('src').replace('_off','_on'));
		},function(){
			$(this).attr('src',$(this).attr('src').replace('_on','_off'));
		});
	};
});

表示タイミングの制御

低速回線対策。
同時に表示されないと変な表示になる要素に対して指定してあげるといいかもしれない。

$(function(){
	//表示タイミングの制御
	$('.kodawarianime02').css('display','none');
	$('.kodawarianime03').css('display','none');
	$(window).load(function(){
		$('.kodawarianime02').css('display','block');
		$('.kodawarianime03').css('display','block');
	});
});

webkit系のborder-radiusバグのメモ

webkit系でborder-radiusプロパティを使いスライドをした場合バグる。
http://webpad.felicyle.com/coding/webkit-border-radius/

webkit border-radiusとposition absoluteを組み合わせると不具合
http://hai3.net/blog/2012/07/31/webkit-border-radius%E3%81%A8position-absolute%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/

percentage値は
・古い Chrome と Safariでサポートされていません(2010 年 9月に修正されました)
・Opera 11.50 以前ではバグがあります
・Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
・古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

う~ん。なんということだろう。
アニメーションしたりするとハマるよね。
初めから対応機種ほうがいいかもね。
情報提供していただいた上記サイトに感謝です。