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