WordPressをスマートフォンに対応にするおススメの方法

WordPressで構築しているサイトをスマートフォンからのアクセスに対応させる方法として、phpのテーマファイル内で判別して出力する方法、javascriptで判別してそれぞれに最適化したスタイルシートを読み込む方法、レスポンシブルなテーマを利用して1ソースで済ませる方法。
1ソースは最近の流行でもあるが、パソコンからのアクセスに合わせたレイアウトとスマートフォンからのアクセスでそれぞれに最適なレイアウトで自由にレイアウトしたい場合は、プラグインを使う方法もおススメ。

代表的なWordpressのスマートフォン対応プラグインは

  • MobilePress
  • WordPress Mobile Pack
  • WPtouch
  • WordPress PDA & iPhone

などがあり、どのプラグインも独自のスマートフォン用レイアウトが表示されるようになる。

HTMLのコーディングに詳しくない人はそのまま使えるプラグインをおススメするが、オリジナルのデザイン・レイアウトにしたい場合は、カスタマイズされたレイアウトが逆に邪魔になることもある。

なるべく自分でデザインを設定したい人は、WordPress PDA & iPhoneをおススメする。
実はこのプラグイン、最終更新が2011年で停止しており、開発が終了している様子。ただし現在のアンドロイドやiPhone、その他スマートフォンからのアクセスを振り分ける機能としては問題なく作動するのでベースにこれを使う。

プラグインを導入すると、プラグインフォルダの中に以下のディレクトリが作られる

/wp-content/plugins/wp-pda/jqmobile-theme
/wp-content/plugins/wp-pda/pda-theme

カスタマイズするのは

/jqmobile-theme

フォルダ内の各ファイル
ファイルリストを見ると、通常のテーマファイルと同様にheaderやfooterをはじめとする各ファイルが存在することが分かるだろう。
この中のファイルはスマートフォンのアクセス時だけに呼ばれるから、この中の一式はパソコンからのアクセスには影響しないから、独立したテーマファイルとして作っていけばいい。

実際に、このサイトでもWordPress PDA & iPhoneを使った振り分け後にカスタマイズしたテーマファイルで構築している。
パソコンからアクセスしている人は是非、スマートフォンからアクセスしてもらいたい。

http://www.digital-gate.com/

カスタマイズすればここまでデフォルトとは違うレイアウトデザインが可能となるということが分かるはず。
デフォルトのjqueryは古いままなので、

jquery.mobile-1.3.2.min.css
jquery-1.9.1.min.js

を使用するようにしてある他、facebook風のメニュー等、オリジナルには無い機能も追加している。

jQuery Mobile 1.4のタブをカスタマイズしてタブらしいデザインにする方法

jQuery Mobile 1.4の新機能として追加されたタブ表示のための data-role=”tabs” は簡単なコーディングでタブレイアウトを実装出来るが、デフォルトのスタイルシートでの表示は、タブとしての機能にはなっていても、見た目としてはタブとイメージできない。

デフォルトCSSを使ったのサンプルページ

せっかくjQuery Mobile 1.4を導入してタブ仕様にするなら、スタイルシートをカスタマイズして「タブらしい」レイアウトにしたい。
jQuery Mobileへの指定の追加と少しのカスタムスタイルシートを追加することでサンプルのようなタブスタイルにすることが可能。

カスタマイズしたサンプルページ

設定方法

まずはベースとなるjquery mobile 1.4のスタイルシートを読み込む

CSS

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>

javascriptを読み込む
スマートフォンやタブレットなどの新しいモバイル端末がターゲットならjquery 1.11よりも軽量のjquery 2.1がおススメ
jquery mobile は最新版の1.4.2

JAVASCRIPT

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

タブの実装部分は以下

HTML

<div data-role="page" id="page1">
<div role="main" class="ui-content">
	<div data-role="tabs">
		<div data-role="navbar">
			<ul>
				<li><a href="#fragment-1">タブ1</a></li>
				<li><a href="#fragment-2">タブ2</a></li>
				<li><a href="#fragment-3">タブ3</a></li>
			</ul>
		</div><!-- navbar -->
		<div id="fragment-1">本文1</div>
		<div id="fragment-2">本文2</div>
		<div id="fragment-3">本文3</div>
	</div><!-- tabs -->
</div><!-- main -->
</div><!-- page -->

デフォルト状態でのタブならこれで完成。

ここからがカスタマイズ

まず、デザインをカスタマイズするため、data-role=”page” に data-theme=”none” を指定する。

HTML

<div data-role="page" id="page1" data-theme="none">

次にスタイルシート
jquery.mobile-1.4.2.min.css の後に読み込む

CSS

<style>
div[data-role=navbar] ul li a {
	color:#000;
	border-color:#ccc;
	border-width: 1px 1px 0px 1px;
}
li[aria-selected=false] {
	background-color: #eee;
	border-bottom:1px solid #ccc;
}
#fragment-3,#fragment-2,#fragment-1 {
	margin:-1px 3px 0px 0px;
	padding:11px 10px 10px 10px;
	border:1px solid #ccc;
	border-width: 0px 1px 1px 1px;
}
@media screen and (min-width: 321px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 2px 0px 0px;
	}
}
@media screen and (min-width: 641px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 0px 0px 0px;
	}
}
</style>

これだけで、タブらしいデザインにカスタマイズ出来る

補足説明

#fragment-3,#fragment-2,#fragment-1の指定にある

margin:-1px 3px 0px 0px;

は本文ボックスの右の縦罫線を揃えるためのおまじない

ウィンドウサイズによってズレの幅が違うからmin-widthで振り分け調整している。

@media screen and (min-width: 321px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 2px 0px 0px;
	}
}
@media screen and (min-width: 641px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 0px 0px 0px;
	}
}

スマートに出来る方法があったらコメントして貰えると嬉しい

わずが2KBのJQUERYモーダルウィンドウ実装スクリプト

Pop EasyはRemodalよりもさらに軽量。jqueryでモーダルウィンドウを実装するためのスクリプト。

通常版
jquery.modal.js → 5キロバイト

min版はさらに軽量で
jquery.modal.min.js → 2キロバイト

Remodalと違いデフォルトではスマートフォンには対応していないため、スマートフォン向けサイトで使用する場合はスタイルシートでポップアップウィンドウのサイズを設定する等の必要があるが、エフェクトの指定等も簡単に出来るからサイトの高速化を考えている人にはおススメなスクリプトと言えよう。

設置は簡単。

まずは最小限のスタイルシート

CSS

<style>
.modal p {
	font-size: 14px;
	text-align: left;
	margin: 10px 0 0;
}
.modal p:hover {
	cursor: pointer;
}
.overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}
.modal {
	display: none;
	background: #eee;
	padding: 0 20px 20px;
	overflow: auto;
	z-index: 1001;
	position: absolute;
	width: 500px;
	min-height: 300px;
}
</style>

javascriptはbody閉じタグの直前に

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type='text/javascript' src='./js/jquery.modal.js'></script>

オプションの設定のjavascriptを読み込む

JAVASCRIPT

<script type='text/javascript'>
$(document).ready(function(){
	$('.modalLink').modal({
		trigger: '.modalLink',
		olay:'div.overlay',
		modals:'div.modal',
		animationEffect: 'fadeIn',
		animationSpeed: 400,
		moveModalSpeed: 'fast',
		background: '000000',
		opacity: 0.5,
		openOnLoad: false,
		docClose: true,
		closeByEscape: true,
		moveOnScroll: true,
		resizeWindow: true,
		videoClass:'video',
		close:'.closeBtn'
	});
});
</script>

オプションの一部を説明すると

animationEffect
スライドインまたはフェードイン

animationSpeed
moveModalSpeed
表示速度

background
オーバーレイの背景色

opacity
オーバーレイの透明度

HTML

呼び出しボタン(リンク)

<a class="modalLink" href="#modal1">Click</a>

オーバーレイのためのタグが別途必要

<div class="overlay"></div>

ポップアップするモーダルウィンドウはこんな感じ

<div id="modal1" class="modal">
	<p class="closeBtn">Close</p>
	<h2>モーダルウィンドウのサンプル</h2>
</div>

サンプルページ

ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

ダウンロードはこちら
http://thomasgrauer.com/popeasy/

軽量簡単でシンプルなjqueryモーダルウィンドウならこれがおススメ

Remodalは軽量で簡単設置、スマートフォンにも対応している、jqueryでモーダルウィンドウを実装するためのスクリプト。

どれくらい軽量かと言うと、例えば多機能で多くのサイトで使われているfancyboxを例にあげると、

jquery.fancybox.js → 49キロバイト

それに比べて

jquery.remodal.js → 9キロバイト

min版はさらに軽量で

jquery.remodal.min.js → 4キロバイト

もちろん、fancyboxとの機能差はあるが、コールバックも受けられ、ちょっとしたモーダルウィンドウには十分な機能がある。
特に、スマートフォン向けサイトのような場合は、回線速度を考え少しでも軽くすることがユーザーエクスペリエンスの向上に繋がることから導入することをおススメする。

設置は簡単。

まずはスタイルシートを読み込む

CSS

<link rel="stylesheet" href="./css/jquery.remodal.css">

javascriptはbody閉じタグの直前に

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.remodal.min.js"></script>

呼び出しボタン(リンク)

HTML

<a href="#modal">Click</a>

ポップアップするモーダルウィンドウはこんな感じ

HTML

<div class="remodal-bg">
	<div class="remodal" data-remodal-id="modal">
		<h1>Remodal</h1>
		<p>モーダルウィンドウのサンプル</p>
	</div>
</div>

サンプルページ

ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

ダウンロードはこちら
https://github.com/VodkaBears/Remodal

プラグイン不要のjquery簡単スクロールトップ

jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

サンプルページ

まずはjqueryを読み込む

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

JAVASCRIPT

<script type="text/javascript">
$(function(){
	$('#top-link').hide();
	$(window).scroll(function(){
		if($(this).scrollTop() > 50){
			$('#top-link').fadeIn(1000);
		}else{
			$('#top-link').fadeOut(500);
		}
	});
	$("#top-link").click(function(){
		$('html, body').animate({scrollTop:0},300);
	});
});
</script>

解説

スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
スクリプト内の数字「1000」はボタンがフェードインする速度
スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
スクリプト内の数字「300」はスクロールする速度

ボタンを表示させたままで構わなければもっと簡単

<script type="text/javascript">
$("#top-link").click(function(){
	$('html, body').animate({scrollTop:0},500);
});
</script>

スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

CSS

<style>
#top-link{
	position:fixed;
	right: 10px;
	bottom: 30px;
	padding:10px 0px;
	width: 100px;
	text-align:center;
	color:#fff;
	cursor:pointer;
	cursor:hand;
	background-color:#ccc;
}
</style>

ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

HTML

<div id="top-link">Page Top</div>

 

2行目から1字下げしたい時のCSSはこれ

注意書きや補足説明などを記載する際に、文章の頭に「※」「・」「●」「■」などを使うことはよくある。
1行で終わる場合は問題無いが、長文で複数行に折り返す場合、2行目以降は1字下げ、文章のラインを揃えると見やすくなる。

2行目から1字下げしたい時のスタイルシートはこの方法

HTML

字下げしたい行をdivで囲う
任意の場所で改行したい時は途中に<br />を入れても構わない。

<div class="ind1">※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。<br />暗証番号をご存知でないとカードはご利用いただけません。</div>

CSS

.ind1 {
	padding-left: 1em;
	text-indent: -1em;
}

2文字下げたい場合

HTML

<div class="ind2">※※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。暗証番号をご存知でないとカードはご利用いただけません。</div>

CSS

.ind2 {
	padding-left: 2em;
	text-indent: -2em;
}

なお、UTF-8を使用し文章の頭に「●」「■」「○」「×」といった記号を使った時、ブラウザで表示するとほかの文字小さくなることがある。
文字幅が1文字分にならず、せっかく綺麗に1文字下げているのに揃わない。

記号が小さく表示されてしまう時はスタイルシートで以下のfont-familyを指定するといい。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;

フォントを全体に影響させたくない場合は、上記の「ind1」や「ind2」の中に指定しても良い。

.ind1 {
	padding-left: 1em;
	text-indent: -1em;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}