jQuery よく使うスニペット

個人的によく使うスニペットなど。

ページの先頭へスムーススクロール

<div class="pagetop"><img src="images/common/pagetop.png" /></div>
$(function(){
	$('.pagetop img').click(function () {
		$('body, html').animate({scrollTop:0}, 500, 'easeOutExpo');
			return false;
	});	
});

スクロールで表示させるといった特殊な機能はありません。
easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ページ内リンクへスムーススクロール

$('a[href^=#]').click(function() {
	var speed = 500;
	var href= $(this).attr('href');
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top;
	$('body,html').animate({scrollTop:position}, speed, 'easeOutExpo');
		return false;
});

easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ブロック要素全体にリンク

リンク(アンカータグ)を含むブロック要素全体にリンクをはります。

$('.selector').hover(function(){
        $(this).stop().fadeTo(300,0.5).css('cursor','pointer');
    },function(){
        $(this).stop().fadeTo(300,1);
    }).click(function(){
        window.location = $(this).find('a').attr('href');
        return false;
});

2行目でブロック要素の背景色を50%フェード、
カーソルをポインタに変更し、4行目で戻します。
6行目で内部のリンクを探し、クリックでページを移動します。

ウィンドウサイズの取得と判定と処理

$(window).resize(function(){
    if ( $(window).width() <= 768) {
        $('#f-nav').css('text-align','left');
    } else {
        $('#f-nav').css('text-align','center');
    }
});

ウィンドウがリサイズされた時にウィンドウサイズを取得し、768px以下だった場合の処理と、条件に当てはまらなかった場合の処理。

liのdisplayをinline-blockに指定しておき、通常中央寄せ、2行になる場合左寄せにする時に使いました。
レスポンシブのサイトに幅広く利用できるかもー_( : 3 」∠)_

jQuery 特定の文字列に対しての動作

$(window).bind("load", function(){
    if(document.URL.indexOf("example.html")) {
		$('#gNav1').addClass('current');
    }
});
$(window).bind("load", function(){
    if(document.URL.match(/example/)) {
		$('#gNav1').addClass('current');
    }
});

ひとつ目がファイル名、ふたつ目がURL( ˘ω˘)
それぞれ特定の文字列が入っていた場合に”#gNav1″の要素に”current”というクラス属性を付与しています。

slideToggle

Q&Aでよく見かけるアコーディオンのdlを、ページ内リンクでも開くように変更しました。

$(function(){
	$('dd').css('display','none');
	$('dt').css('cursor','pointer').click(function(){
		$(this).next().slideToggle(500,'easeOutExpo');
	});
	$('#check').click(function(){
		$('html,body').animate({
			scrollTop: $('#receipt').offset().top}, {
			duration: 500,
			easing: "easeOutExpo",
			complete: function(){$('#receipt').next().slideDown(500,'easeOutExpo');}
		});
	});
});

■L5まで
ddを始め非表示にし、dtをクリック時にスライド表示させます。
jQuery.easing.jsを読み込んでいない場合には’easeOutExpo’を’linear’か’swing’に変更します。

■L6から
#checkのidを持つ要素をクリックすると、#receipt属性を持つdtへスムーススクロールし、その後ddをスライドします。

jQuery ui Tabs

いそぎメモ |∵|

$(function(){
	var pn = location.search.match(/(?|&)tab=(d+)(&|b)/)?RegExp.$2:'0';
	$("#tabs").tabs().tabs('select', parseInt(pn));
})

jQuery ui tabsで他ページからのリンクでも直接指定したタブへリンクが出来ます。
リンク先をhref=”xxx.html?tab=1″にします、この場合二番目のタブへリンクします。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

演算子

イベントまでの残り日数をカウントするjavascript

today = new Date();
count_day = new Date(2011,12,30)
x_day = (count_day.getTime()-today.getTime())/(24*60*60*1000)
tens = x_day / 10
ones = x_day % 10
$('#countdown').prepend('<img src="images/common/' + (parseInt(tens)) + '.gif"><img src="images/common/' + (Math.ceil(ones)) + '.gif">');

二桁表示にし、それぞれ数字の画像を当てはめて表示させます。
10の位は日数を10で割ったのち、小数点以下を切り捨てています。
1の位は日数を10で割ったあとの余りを表示させています。

参考にさせて頂いたサイト
演算子/JavaScriptリファレンス
javascriptの基本

Wilq32.RotateImage

Canvas機能を使用し、画像を回転表示させるスクリプト
jqueryrotate
なんでか動かない!ので、こっち使います。

$(function(){
	$('#rotate1').rotate(-25);
	var rotImage = $("#rotate2").rotate({
		bind :[
			{"mouseover":function(){rotImage[0].rotateAnimation(85);}},
			{"mouseout":function(){rotImage[0].rotateAnimation(-85);}}
		]
	});
});
<img src="images/common/sNav1.png" id="rotate1">
<img src="images/common/sNav1.png" id="rotate2">

1つ目(L2)が初めから傾いた状態で表示、
2つ目(L3~L8)がアニメーションで表示しています。

ロールオーバーに使うとおされ_( :3」∠)_

wordpressによるCMS

wordpressをCMSとして利用するときによく使う設定やコードなど。

パーマリンクの種類

wordpress管理画面、左カラムの「設定>パーマリンク設定」
カスタム構造のテキストボックス内に入力すると使用できます。
様々なサイトを巡ってみましたが、
「おすすめ!」は本当に人それぞれで一概にどれがいいとは言えません。
よく見られるのが「カテゴリ+投稿ID」や「日付+投稿ID」でしょうか。
下記のように記述しますが、勿論此れ以外にも自由に組み合わせて書き換える事もできます。

  1. 投稿ID:/%post_id%/
  2. 投稿名:/%postname%/
  3. 投稿名+.html:/%postname%.html:
  4. 日付+投稿名:/%year%/%monthnum%/%day%/%postname%/:
  5. カテゴリ+投稿ID:/%category%/%post_id%/
  6. カテゴリ+投稿名:/%category%/%postname%/
  7. 日付+カテゴリ+投稿名:/%category%/%postname%/

私は、投稿名を記事ごとにアルファベットとハイフンで置き換えています。
URLの一部が日本語になっても問題ない、若しくは記事ごとに入力するのが面倒じゃない方には「2」
クライアントのブログに利用する際には「1」を推します。

wordpressの埋め込み

<?php require './wp/wp-blog-header.php'; ?>

(埋め込むページからの相対パスを記述、この場合は同階層にwpというフォルダ名でwordpressを設置した際の記述です)
htmlファイルの1行目(DOCTYPEより上)に上記を記述後、拡張子をhtmlからphpに変更

wordpressをhtmlファイル内で動かす

.htaccessに下記内容を記述後、ルートフォルダへアップロードします。

AddType application/x-httpd-php .php .html

ロリポップサーバーをご使用の場合、上記記述では動作しませんので、
下記記述に書き換えてアップロードします。

AddHandler php5.2-script html

記事一覧に詳細ページの1枚目の画像を抽出

記事に含まれる1枚目の画像を抽出する│APPOFIT様

記事一覧の画像を非表示

<?php
  $my_content = get_the_content();
  $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
  echo $my_content;
?>

新着情報などに。

wordpress内でのjQueryの記述

下記コメント部分に記述すれば普段の「$」でも動作します。

jQuery(function($) {
	// foo
});

もしくは下記をheader.php内のwp_head();より前に記述する事でも普段通りに動作するようになります。

<?php
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
?>

googleにホスティングされているjQueryを読み込む際にはバージョンも確認してください。
https://developers.google.com/speed/libraries/#jquery

投稿、固定ページへのphpファイルの読み込み

下記をテーマファイル内functions.phpへ追記。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
} 

add_shortcode('myphp', 'Include_my_php');

投稿、固定ページの読み込みたい場所に下記コードを記述。
.phpは省略します。

[myphp file='example']

カテゴリ名の取得

<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
<?php $category = get_the_category(); echo $category[1]->cat_name; ?>

1行目 親カテゴリ名のみ取得
2行目 子カテゴリ名のみ取得

所属する全てのカテゴリのスラッグ名を取得

半角スペース区切り、最後のスペースは削除します。
クラス属性などに。

<?php
$cats = get_the_category();
$str = '';
foreach( ( array )$cats as $cat ) {
	if( !in_array( $cat->cat_ID, $exclude ) ) {
		$str .=  $cat->slug . ' ';
	}
}
echo rtrim( $str, ' ' );
?>">

尚、6行目「slug」を「cat_name」に変更すると配列の内容がスラッグからカテゴリ名になります。

子カテゴリのスラッグ名から画像を出力

<img src="<?php bloginfo('template_url'); ?>/images/<?php 
    $cats = get_the_category();
    foreach($cats as $cat):
    if($cat->parent)
    echo $cat->slug;
    endforeach;
;?>.png">
  • テーマフォルダ > images > 子カテゴリのスラッグ名.png

新着記事などのアイコンを表示させる時など。

singleページのbody_classにカテゴリ名を追加

singleページのbodyタグのクラス属性にカテゴリスラッグ名を追加します。
function.phpに下記を追記。

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
		if (is_single() ) {
				global $post;
				foreach((get_the_category($post->ID)) as $category) {
						$classes[] = 'category-'.$category->category_nicename;
				}
		}
		return $classes;
}

「category-カテゴリ名」が付与されます。
ここではカテゴリページでのクラス名と同じものにしていますが、6行目「category-」にて独自のものに変更可能です。

body_classの使い方

header.phpのbodyタグにbody_classを追記します。

<body <?php body_class(); ?>>

single カテゴリーごとにデザインを変更

single.phpをsingle-normal.phpにリネームし、新たに下記内容のsingle.phpを作成します。

<?php
if ( in_category(array('works')) ) {
   get_template_part( 'works' , false );
} elseif ( in_category( array('information') )  )  {
   get_template_part( 'information' , false );
} else {
    get_template_part( 'single' , 'normal');
}
?>

2行目「works」にカテゴリ名、3行目「works」に読み込むファイル名を記述します。
4行目「elseif~」から6行目「} 」までを増減する事で対応させたいカテゴリを増減できます。
カテゴリページのデザイン変更の場合は「category-カテゴリ名.php」のファイル名に変更するだけでオーケーです。
テーマファイルによってはcategory.phpが存在しないものもありますが、上記の通りで切り替え可能です。

ループ処理

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
記事を表示
<?php endwhile; ?><?php else : ?>
記事がない時の表示
<?php endif; ?>

新着情報などに使う時用

<dl>
<?php
	$posts = get_posts('numberposts=5&category=7');
	global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
  <dd><? the_time('Y年n月j日 H時i分');?><br><?php the_content(); ?></dd>
<?php endforeach; endif;?>
</dl>

dlの中にdt、ddを繰り返し展開していくので、スクリプトをdlで囲います
numberposts=5は表示させる記事数
category=7は表示させたいカテゴリのID
the_time(‘y年m月d日’)は年(year)/月(month)/日(day)の表示形式、順番や間のスラッシュの変更も自由です
日付フォーマットに関する詳しい情報は小粋空間さんの「5.フォーマット文字一覧」にて記載されています
↓以下引用させて頂いたフォーマット一覧↓

出力される日付文字列の書式
単位 フォーマット文字 意味 表示例
Y 4桁の数字 1999, 2003
y 2桁の数字 99, 03
m 2桁の数字 01 – 12
n 1桁または2桁の数字 1 – 12
F フルスペル January – December
M 3文字の省略形式 Jan – Dec
d 2桁の数字 01 – 31
j 1桁または2桁の数字 1 – 31
曜日 D 3文字の省略形式 Mon – Sun
l フルスペル Sunday – Saturday
午前/午後 a 小文字 am / pm
A 大文字 AM / PM
h 2桁の数字・12時間表示 01 – 12
g 1桁または2桁の数字
12時間表示
1 – 12
H 2桁の数字・24時間表示 00 – 23
G 1桁または2桁の数字
24時間表示
0 – 23
i 先頭にゼロをつける 00 – 59
s 先頭にゼロをつける 00 – 59

以下は年月日・時分秒の設定早見表です。

年月日の設定早見表
設定例 表示
4桁 Y 2桁 m 2桁 d Y/m/d 2007/01/01
0なし j Y/m/j 2007/01/1
0なし n 2桁 d Y/n/d 2007/1/01
0なし j Y/n/j 2007/1/1
2桁 y 2桁 m 2桁 d y/m/d 07/01/01
0なし j y/m/j 07/01/1
0なし n 2桁 d y/n/d 07/1/01
0なし j y/n/j 07/1/1
時分秒の設定早見表
設定例 表示
12時間表記・2桁 h 2桁 i 2桁 s h:i:s 01:02:03
12時間表記・0なし g g:i:s 1:02:03
24時間表記・2桁 H H:i:s 13:02:03(01:02:03)
24時間表記・0なし G G:i:s 13:02:03(1:02:03)

条件分岐

<?php if (is_home()) { ?>
 <body id="index" <?php body_class(); ?>>
<?php } elseif (is_search()) { ?>
 <body id="search" <?php body_class(); ?>>
<?php } elseif (is_archive()) { ?>
 <body id="archive" <?php body_class(); ?>>
<?php } elseif (is_category()) { ?>
 <body id="cat-<?php the_category_ID(); ?>" <?php body_class(); ?>>
<?php } elseif (is_page()) { ?>
 <body id="<?php function get_page_uri2($page_id) {$page = get_page($page_id); return $page->post_name;} ?><?php echo get_page_uri2($wp_query->post->ID);?>" <?php body_class(); ?>>
<?php } elseif ( is_single()) {?>
 <body id="single" <?php body_class(); ?>>
<?php } else { ?>
 <body <?php body_class(); ?>>
<?php } ?>

勿論bodyのIDを変更する以外にも使用できます。
TOPのヘッタのみにカルーセルいれたりとか。

自動改行を解除

wordpressにより自動で挿入される「p」「br」タグの解除

固定ページ

page.php内get_header直後に下記を挿入

<?
remove_filter('the_content', 'wpautop');
the_content();
?>

brBrbrプラグイン使用時には一行追加します。

<?
remove_filter('the_content', 'wpautop');
remove_filter('the_content','brBrbr');
the_content();
?>

Contact Form 7

config.php内に下記を記述します。

define ('WPCF7_AUTOP', false);

※require_once(ABSPATH . ‘wp-settings.php’);より上に記述します。

animateの例文

$(function(){
	$('#headerTab a').hover(
		function(){
			$(this).stop().animate({top : '0px'},'normal','easeOutBounce');
		},
		function(){
			$(this).stop().animate({top : '-5px'},'normal','swing');
		}
	);
});

予めhover後の長さの画像をtop:-5pxで絶対配置したものを、hoverで0pxまで戻します。
{top : ‘0px’}の部分はCSSでの指定になるので、たとえば画像置換のパディングで指定していた際にはtopをpaddingTopに変更。
‘normal’が入っている第二引数には’slow”normal”fast’や’ミリ秒指定’といった速度に関する記述を入れます。
‘3000’であれば3秒かけてアニメーションが行われます。
‘easeOutBounce’や’swing’が入っている第三引数にはeasing名を入れます。
jQuery単体だと’liner’か’swing’しか選択できませんが、別途jQuery Easing Pluginを導入すれば他にも多くの動きをつけることが可能です。
導入する際にはjQueryを読み込んでいるスクリプトタグより後に記述して下さい。

詳しい種類についてはjQuery Easing – jQuery 日本語リファレンスをご覧ください。
実際に動きを見ることができるので大変参考になります |’ω’|

mouseover例文

<ul class="photo"><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
  --><li><img src="images/shop/photo2.jpg"></li><!--
  --><li><img src="images/shop/photo3.jpg"></li><!--
--></ul>
$('.photo img').hover(function() {
	$(this).stop().fadeTo(330,0.7);
		}, function() {
	$(this).stop().fadeTo(330,1);
});
$('.photo li').mouseover(function(){
	$(this).closest('ul').css('backgroundImage','url(' + $(this).children('img').attr('src') + ')')
});

ulの背景画像として予めphoto1の画像をいれておき、それぞれのリストの画像はCSSで縮小しておきます。
マウスオーバーでリストの画像がulの背景画像と入れ替わります。
間違え易いのが、jQueryにてCSSを指定する際の記述方法。
background-imageがbackgroundImageとなるように、ハイフンの直後の文字列が大文字になり、ハイフン自体は消えます。
ラクダ記法とかキャメルケースとか。
.closestは直前の親要素、.childrenは子要素、attr(‘src’)は画像のソースURLです。
attr(‘src’)の時にはsrcの部分、画像のソースURLを抽出し、
attr(‘src’,’photo.jpg’)の時には画像のソースURLをphoto.jpgに書き換えます。

$(function(){
	$('#gallery .topImage').prepend($('#gallery li:first-child img').clone());
	$('#gallery .textarea').html($('#gallery li:first-child img').attr('alt'));
	$('#gallery li img').mouseover(function(){
		$('#gallery .topImage img').attr('src',$(this).attr('src'));
		$('#gallery .textarea').html($(this).attr('alt'));
	}).hover(
		function(){
			$(this).stop().fadeTo(250,0.7);
		},
		function(){
			$(this).stop().fadeTo(250,1);
		}
	).css('cursor','pointer');
});
<div id="gallery">
	<p class="topImage"></p>
	<ul><!--
		--><li><img src="images/construction/case1.jpg" alt="サンプル1"></li><!--
		--><li><img src="images/construction/case2.jpg" alt="サンプル2"></li><!--
		--><li><img src="images/construction/case3.jpg" alt="サンプル3"></li><!--
		--><li><img src="images/construction/case4.jpg" alt="サンプル4"></li><!--
		--><li><img src="images/construction/case5.jpg" alt="サンプル5"></li><!--
		--><li><img src="images/construction/case6.jpg" alt="サンプル6"></li><!--
		--><li><img src="images/construction/case7.jpg" alt="サンプル7"></li><!--
		--><li><img src="images/construction/case8.jpg" alt="サンプル8"></li><!--
		--><li><img src="images/construction/case9.jpg" alt="サンプル9"></li><!--
		--><li><img src="images/construction/case10.jpg" alt="サンプル10"></li><!--
		--><li><img src="images/construction/case11.jpg" alt="サンプル11"></li><!--
		--><li><img src="images/construction/case12.jpg" alt="サンプル12"></li><!--
	--></ul>
	<div class="textArea"></div>
</div>

マウスオーバーした画像をtopImage内に拡大表示し、textArea内をaltの内容に置き換えます
初期表示の画像やテキストは1枚目の画像を参照します

<ul id="gNav" class="clearfix"><!--
  --><li id="gNavLi1"><a href="#">リンク1</a></li><!--
  --><li id="gNavLi2"><a href="#">リンク2</a></li><!--
  --><li id="gNavLi3"><a href="#">リンク3</a></li><!--
  --><li id="gNavLi4"><a href="#">リンク4</a></li><!--
  --><li id="gNavLi5"><a href="#">リンク5</a></li><!--
  --><li id="gNavLi6"><a href="#">リンク6</a></li><!--
  --><li id="gNavLi7"><a href="#">リンク7</a></li><!--
  --><li id="gNavLi8"><a href="#">リンク8</a></li><!--
--></ul>
$(function(){
	$('#gNav li').append('<div class="tab"></div>');
	$('#gNav a').css('cursor','pointer').blend().mouseover(function() {
    $(this).siblings('div.tab').stop().animate({top : '5px'},'fast','linear').animate({top : '0px'},'normal','easeOutBounce');
	});
});

cssでliをrelativeにし、jsにて自動挿入されるdiv.tab及びaタグを絶対配置にします
2つをtop:5pxに配置し、z-indexにてaをdiv.tabの上に乗せます
hoverでaにblendの効果が出て、マウスオーバーでdiv.tabがぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります _(┐「ε:)_