HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

スマホからなのか、PCからなのか切り分ける

スポンサーリンク

メディアの切り替えは、基本レスポンシブに任せておけばいいんだけど、
場合によっては、チェックして、表示内容を変えたい場合があるよね?
その時どうするか。
 
function.php にでも以下をいれておく。
function is_mobile(){
	if (is_admin())return;
	
	// $MOBILE_FLAG;
	$MOBILE_FLAG = false;
	
	$arr_useragent = array(
		'iPhone', 			// iPhone
		'iPod', 			// iPod touch
		'Windows Phone',	// Windows Phone
		'dream', 			// Pre 1.5 Android
		'CUPCAKE', 			// 1.5+ Android
		'blackberry9500', 	// Storm
		'blackberry9530', 	// Storm
		'blackberry9520', 	// Storm v2
		'blackberry9550', 	// Storm v2
		'blackberry9800', 	// Torch
		'webOS', 			// Palm Pre Experimental
		'incognito', 		// Other iPhone browser
		'webmate' 			// Other iPhone browser
	);
	$pattern = '/'.implode('|', $arr_useragent).'/i';
	$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

	// Check Android device
	if (!$result) {
		// For Android mobile
		$arr_useragent = array('Android', 'Mobile');
		$pattern = '/^.*(?=.*'.implode(')(?=.*', $arr_useragent).').*$/i';
		$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
	}
	$MOBILE_FLAG = $result;
	return $MOBILE_FLAG;
}
?>

あとはいいよね?
一か所で聞くなら if の中できけばいいし、あちらこちらで聞くなら,
global $MOBILE_FLAG; とかを設定しといてそれに代入しておく。
例えば、一か所
<?php if( is_mobile() ){
    echo 'モバイルからだしぃ';
}else{
    echo 'モバイルからぢゃねーしぃ';
}
?>
 
グローバル変数で使いまわす。
function.php の function 群の外で、$MOBILE_FLAG; を宣言しておいて、
$MOBILE_FLAG=false;
function is_mobile(){
	if (is_admin())return;
	
	// $MOBILE_FLAG;
	global $MOBILE_FLAG;
	
	$arr_useragent = array(
		'iPhone', 			// iPhone
		'iPod', 			// iPod touch
		'Windows Phone',	// Windows Phone
		'dream', 			// Pre 1.5 Android
		'CUPCAKE', 			// 1.5+ Android
		'blackberry9500', 	// Storm
		'blackberry9530', 	// Storm
		'blackberry9520', 	// Storm v2
		'blackberry9550', 	// Storm v2
		'blackberry9800', 	// Torch
		'webOS', 			// Palm Pre Experimental
		'incognito', 		// Other iPhone browser
		'webmate' 			// Other iPhone browser
	);
	$pattern = '/'.implode('|', $arr_useragent).'/i';
	$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

	// Check Android device
	if (!$result) {
		// For Android mobile
		$arr_useragent = array('Android', 'Mobile');
		$pattern = '/^.*(?=.*'.implode(')(?=.*', $arr_useragent).').*$/i';
		$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
	}
	$MOBILE_FLAG = $result;
	return $MOBILE_FLAG;
}
?>
 
index.phpの頭辺りで is_mobile を呼んでおいて、
<?php if( $MOBILE_FLAG ){
    echo 'モバイルからだしぃ';
}else{
    echo 'モバイルからぢゃねーしぃ';
}
?>

関数の中で使う場合は、
function hoge()
{
    global $MOBILE_FLAG;
    if( $MOBILE_FLAG ){
        echo 'モバイルからだしぃ';
    }else{
        echo 'モバイルからぢゃねーしぃ';
    }
}
?>


WordPressのレスポンシブ対応のポイント


レスポンシブ(スマホ、ブラウザの自動切り替え)で一番悩むのがテーブル。
横に長い項目をもつテーブルはレスポンシブの画面幅の狭いモニターに表示させるのは案外面倒だ。
様々なグリッドモジュールが出ているが、以下のように横方向に項目が多いとタイトルブロックとデータブロックが分離してしまう。

ブラウザで見た時
項目名1項目名2項目名3
項目値1項目値2項目値3
項目値A項目値B項目値C
項目値イ項目値ロ項目値ハ

スマホで見た時
項目名1
項目名2
項目名3
項目値1
項目値2
項目値3
項目値A
項目値B
項目値C
項目値イ
項目値ロ
項目値ハ


せめてスマホで見た時以下のようなパターンにならないかな?

パターン1
項目名1項目値1
項目名2項目値2
項目名3項目値3
項目名1項目値A
項目名2項目値B
項目名3項目値C
項目名1項目値イ
項目名2項目値ロ
項目名3項目値ハ


パターン2
項目名1
項目値1
項目名2
項目値2
項目名3
項目値3
項目名1
項目値A
項目名2
項目値B
項目名3
項目値C
項目名1
項目値イ
項目名2
項目値ロ
項目名3
項目値ハ


パターン3
項目名1
項目名2
項目名3
項目値1
項目値2
項目値3
項目名1
項目名2
項目名3
項目値A
項目値B
項目値C
項目名1
項目名2
項目名3
項目値イ
項目値ロ
項目値ハ



パターン3が一番よさげな気がする。

テーブル部分だけをPHPで切り替えて表示するようにしてあげるという手があるかな?

例えば、
if(!is_mobile()){
echo '<table><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値1</td></tr><tr><td>項目値2</td></tr><tr><td>項目値3</td></tr><tr><td>項目値A</td></tr><tr><td>項目値B</td></tr><tr><td>項目値C</td></tr><tr><td>項目値イ</td></tr><tr><td>項目値ロ</td></tr><tr><td>項目値ハ</td></tr></table>';

}else{
echo '<table><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値1</td></tr><tr><td>項目値2</td></tr><tr><td>項目値3</td></tr><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値A</td></tr><tr><td>項目値B</td></tr><tr><td>項目値C</td></tr><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値イ</td></tr><tr><td>項目値ロ</td></tr><tr><td>項目値ハ</td></tr></table>';
}

もちろん、べたで2つ書くと項目を増やしたりするとき不便なので配列かなにかで処理させた方がいいけど、イメージとしてはこんな感じでしょう。

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ)

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルサーチコンソール。別にグーグルのサーチコンソールでなくてもいいんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せなくしたキーワ

FB 広告 最適化~グーグルのアクセス解析の基本

FB 広告 最適化~グーグルのアクセス解析の基本 FB広告を最適化するためには、アクセス解析が重要なカギを握ります。FB広告から当該ページに飛んでくるときURLにオプションを付けることができます。このURLにつけたオプションを使ってどの広告から、どん