Smart Custom Fields

手軽にカスタムフィールドを導入できるプラグイン「Smart Custom Fields」の使い方など。

導入方法

プラグインの新規追加から「Smart Custom Fields」を検索するか、下記URLよりダウンロードします。
https://ja.wordpress.org/plugins/smart-custom-fields/

  • 「Smart Custom Fields > 新規追加」から、タイトルを入力。
    「フィールド追加」を選択します。
  • 「繰り返し」にチェックを入れると繰り返し機能が使えます。
    その際ボックス最下部の「サブフィールドを追加」から繰り返すカスタムフィールドを追加できます。
  • 「名前」欄にはカスタムフィールドを出力する際のキーを入力します。
    分かりやすい半角英数字の名前がよいかもめ。

簡単な動画投稿フォームの作成例

グループ名
「グループ名」=video
ひとつめ
「タイプ」=テキスト、「名前」=url
ふたつめ
「タイプ」=テキスト、「名前」=title
みっつめ
「タイプ」=テキストエリア、「名前」=description
<?php $repeat_group = SCF::get('video');
	foreach ( $repeat_group as $fields ) {
    	echo '<div class="video">';
		echo '<iframe width="320" height="240" src="' . $fields['url'] . '" frameborder="0"></iframe>';
		echo '<h2>' . $fields['title'] . '</h2>';
		echo '<div class="description">' . nl2br($fields['description']) . '</div>';
    	echo '</div>';
	}
?>

▲カスタムフィールドの内容を取得するコード。
6行目のnl2br()によりテキストエリアの改行を取得します。

作者様サイト→http://2inc.org/blog/2014/10/09/4426/

CSS3 アニメーション効果

マウスオーバーで透過させる場合。

.site-title a {
	display: block;
	background-image: url(images/site-title.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 200px;
	text-indent: -9999px;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}
.site-title a:hover { opacity: 0.5; }

8~12行目でフェードにかかる時間を指定します。

  • .2s…2秒間かけてフェードします。
  • linear…一定のスピードでフェードします、プロパティは下記の通りです。
    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier

14行目で:hover時の最終透過値を指定します。

:hover時の指定がCSSスプライトなど背景位置変更であれば:hover時の指定位置までスライドアニメーションします。
background-imageはアニメーションに対応していませんが、:hover用の画像をulの背景等に指定し、opacityを0にすることで完全透過させフェード切替えしているように表示させる事が可能です。

.pagetop {
	text-align: right;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pagetop img {
	cursor: pointer;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
	margin-top: 5px;
	margin-bottom: 5px;
}
.pagetop img:hover {
	margin-top: 0px;
	margin-bottom: 10px;
}

13、14行目のmarginを17、18行目の:hoverで上下5pxずつ調整。
.page-top imgをマウスオーバーするとちょこっと上に動き、カーソルを外すと戻ります。

CSS3 メディアクエリ

<link rel="stylesheet" href="sp.css" type="text/css"
	media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" type="text/css"
	media="screen and (min-width: 769px)">

スタイルシートを切り替える場合。
max-width: 480px…表示領域が480px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

@media screen and (max-width: 320px) {
   div { width: 100%; }
}
@media screen and (min-width: 769px) {
   div { width: 480px }
}

直接CSSに記述する場合。
max-width: 320px…表示領域が320px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

適用させたいコンテンツの、見せ方次第で適宜変更します。

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行目で内部のリンクを探し、クリックでページを移動します。

タグクラウドのカスタマイズ

function theme_new_tag_cloud($args) {
	$myargs = array(
		'smallest' => 12, 
		'largest' => 12, 
		'unit' => 'px',
		'number' => 0,  
		'order' => 'ASC',
		'separator' => ''
	);
	return $myargs;
}
add_filter('widget_tag_cloud_args', 'theme_new_tag_cloud');

上記コードをfunction.phpへ追加、すでにある場合は編集します。
それぞれのパラメータは下記の通りです。

  • smallest → 最小サイズ
  • largest → 最大サイズ
  • unit → フォントサイズの単位
  • number → 表示数(0で無制限)
  • order → 並び順
  • separator → タグとタグの繋ぎ目

詳細はテンプレートタグ/wp tag cloud – WordPress Codex 日本語版にてご確認ください。

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

$(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をスライドします。

カスタムフィールドの住所からgooglemapへのリンクを生成

[map]のキーを持つフィールドに住所を入力し、その住所からGoogle mapへのリンクを生成します。

<?php 
  $address = post_custom('map');
  $address_encode = urlencode($address);
  $zoom = 14;
            
  $gmap = "http://maps.google.co.jp/maps?q=".$address_encode."&z=".$zoom;
?>
<a href="<?=$gmap;?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/estate/maps.jpg"></a>