2015年2月

WordPressでサイトを作成する際に、
「スマートフォンサイトは作らないけど、ちょっと意識したい。」
そんなときに活躍するコードを紹介します。

①モバイルの判定

まずは、phpで電話出来る端末かどうかの判定。ちょっと適当だけど・・・(^.^)

//モバイルの判定
function mobile() {
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'webOS') !== false)|| (strpos($ua, 'Windows Phone') !== false)|| (strpos($ua, 'BB') !== false)) {
    // スマートフォンからアクセスされた場合
	return 'mobile';
} elseif ((strpos($ua, 'Android') !== false)) {
    // タブレットからアクセスされた場合
	return 'tablet';
} elseif ((strpos($ua, 'iPad') !== false)) {
    // タブレットからアクセスされた場合
	return 'tablet_notphone';
} elseif ((strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) {
	return 'keitai';
} else {
    // その他（PC）からアクセスされた場合
	return 'pc';
}
}
 

②コンテンツ内の電話番号を電話できるショートコード

電話番号はテキストでも画像でも対応できる

//電話番号リンクにするショートコード
function tel_call($atts, $content = null){
$mobile = mobile();
if($mobile =='mobile' || mobile =='tablet'):
extract(shortcode_atts(array(
        'tel' => 0,
    ), $atts));
return ''.$content.'';
else:
return ''.$content.'';
endif;
}
add_shortcode('tel', 'tel_call');

これでショートコードとして使用可能

 

おまけ・・・モバイルだったら改行

//モバイル環境のときにとりあえず改行しちゃう
function mbr(){
$mobile = mobile();
if( $mobile == 'mobile'):
echo '
';
endif;
}

 

 

 

WordPressが4.0になった頃から、TinyMCE Advanced も新しくなり、挿入した画像にマージンや余白を入れると左右均等か、上下均等しか受け付けなくなっていたので、何かいい案はないかと色々探していたのですが、ようやく見つけました！

 Advanced Image Styles

このプラグインを導入すると、WordPress純正の画像編集画面に、マージン設定が出てきます。

 

次のお題は、

「WordPressが画像を挿入すると、<p>タグで囲われちゃう問題」

今のところ、<div>ダグで囲い直すと自動整形に影響しないことは分かってるので、function.phpでなんか対応できそうだと思っていますが・・・

 

facebookにサイトのURLをコピペすると勝手にサイトの写真が出てきますが、そのままURLが表示されたり、違う写真が表示されちゃうことがあります。

これは、facebookが、保持している情報（キャッシュ）が古い場合や、うまく連動できていない場合に起こります。

 解決するには以下のURLにアクセスして、サイトのアドレスやコピペしたいURLを入力して、ボタンを押せばキャッシュを確認したり、最新にしたりしてくれます。

https://developers.facebook.com/tools/debug/og/object/

Show existing scrape information

↑既存のキャッシュを表示

Fetch new scrape information

↑新しくキャッシュを作成する

 これでなおるはず。