iPhone、Androidなどの携帯デバイスからサイトにアクセスしていることが検出された場合、訪問者に提示するテーマの新しい修正バージョンを作成します（必要に応じてプロファイルを確認します）。
詳細：私のテーマは流動的ではありません。幅は約976pxに固定されています（676pxコンテンツ+残りは左側のサイドバーです）。テーマに革命をもたらしたくはありませんが、320x480および800x480の携帯電話には大きすぎると感じています。おそらく、サイドバーを削除するか、少なくとも右に移動して他の小さな調整を行います。
回答:
他のほとんどの場合と同様に、WPTouchを使用することを強くお勧めします。ただし、他のWebサイト形式よりもブログをサポートするために構築されているため、モバイルソリューションの万能薬ではないことがわかります（WordPressとブログでポートフォリオを実行し、ポートフォリオ****はWPTouchのように見えます）。
そのため、モバイルブラウザの検出を複製するために使用する必要がある関連部分を見つけるために、コードを調べました。まず、Jan Fabryが述べたように、モバイルブラウザユーザーエージェントのリストです。WPTouchにはデフォルトのリストが含まれていますが、次の設定またはフィルターを使用してカスタムユーザーエージェントを追加することもできますwptouch_user_agents。
function bnc_wptouch_get_user_agents() {
$useragents = array(
"iPhone", // Apple iPhone
"iPod", // Apple iPod touch
"Android", // 1.5+ Android
"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
"s8000", // Samsung Dolphin browser
"bada" // Samsung Dolphin browser
);
$settings = bnc_wptouch_get_settings();
if ( isset( $settings['custom-user-agents'] ) ) {
foreach( $settings['custom-user-agents'] as $agent ) {
if ( !strlen( $agent ) ) continue;
$useragents[] = $agent;
}
}
asort( $useragents );
// WPtouch User Agent Filter
$useragents = apply_filters( 'wptouch_user_agents', $useragents );
return $useragents;
}
ただし、プラグインの中核はクラスです：
class WPtouchPlugin {
var $applemobile;
var $desired_view;
var $output_started;
var $prowl_output;
var $prowl_success;
...
プラグインのコンストラクター（function WPtouchPlugin()）は、最初にアクションをplugins_loadedフックに追加してモバイルブラウザーのユーザーエージェントを検出し、$applemobiletrueに設定します。具体的な機能は次のとおりです。
function detectAppleMobile($query = '') {
$container = $_SERVER['HTTP_USER_AGENT'];
$this->applemobile = false;
$useragents = bnc_wptouch_get_user_agents();
$devfile = compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
foreach ( $useragents as $useragent ) {
if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
$this->applemobile = true;
}
}
}
これで、プラグインは、モバイルブラウザを使用していることを認識します（ブラウザのユーザーエージェントによる）。プラグインの次の肉の部分はフィルターのセットです：
if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
add_filter( 'theme_root', array(&$this, 'theme_root') );
add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
add_filter( 'template', array(&$this, 'get_template') );
}
これらの各フィルターは、$applemobletrueに設定されているかどうかを確認するメソッドを呼び出します。そうである場合、WordPressはテーマのデフォルトのテンプレートではなく、モバイルスタイルシート、モバイルテーマ、およびモバイルの投稿/ページテンプレートを使用します。基本的に、使用しているブラウザに「モバイルブラウザ」のリストに一致するユーザーエージェントがあるかどうかに基づいて、WordPressのデフォルトの動作をオーバーライドします。
WPTouchにはモバイルテーマをオフにする機能も含まれています。iPhoneのWPTouchサイトにアクセスすると、下部にボタンがあり、サイトを通常どおり表示できます。独自のソリューションを構築する際に、これを検討することもできます。
免責事項： 上記のコードはすべて、WPTouchバージョン1.9.19.4のソースからコピーされ、GPLで保護されています。コードを再利用する場合、システムはGPLの条件にも準拠する必要があります。 私はこのコードを書きませんでした。
非常に人気のあるWPtouchプラグインがこれをどのように行うかを見るとよいでしょう。「iPhone、iPod touch、Android、Opera Mini、Palm Pre、Samsung touch、BlackBerry Storm / Torchモバイルデバイス」に異なるテーマを提供します。なるほど彼らのソースコードにユーザエージェントのリストを、おそらくキーです。
別のプラグインWP-Wurfledは、広範なワイヤレスユニバーサルリソースファイルデータベースを使用します。このモバイルデバイスの絶えず更新されるデータベースには、多くの機能情報も含まれているため、デバイスのサーバー側の画面解像度、Flashをサポートしているかどうか、...
template_redirectアクションフックはそれがほぼリアルタイムテンプレートファイルの前に最後の瞬間が含まれているとして、多くの場合、負荷のカスタムテーマに使用されている（template_include最後のフックですが、それはフィルタです）。
質問に答えないリスクがあるので、そうしないことをお勧めします。
私は数か月間iOSデバイスを使用してきましたが、iPadを購入したときに最初にしたことの1つは、使用するデバイス（および元々、画面の向き）に基づいて動作を変更するCSSレイアウトを考え出すことでした）。
執筆時点では、私の開発サイト（http://dev.semiologic.com/）で実行されています。iOSデバイスでテストすると、iPadのサイドバーがある列から、iPhoneに基づく単一の列を持つレイアウトにレイアウトが切り替わることに注意してください。（サイドバーは2列に配置され、下部のボックスは2列に配置されます。）ブラウザの幅を小さくすることで、Safariを使用して効果を再現できます。
とにかく、プログラムするのと同じくらい面白かったのですが、少なくともiOSデバイスでは、モバイル向けに最適化されたレイアウトが事態を悪化させ、改善するわけではないということが最終的に思い浮かびました。Safariモバイルの組み込みズームにより、メインコラムの幅が480pxである限り、サイトは既にモバイル用に最適化されています。幅720ピクセルのレイアウト用に幅240ピクセルのサイドバーを追加すると、サイトがすべてにフィットし、見栄えが良くなります。
Safariモバイルの組み込みズームを考慮に入れた場合、合計で750ピクセルの何かが必要な場合も、500ピクセル+ 250ピクセルが機能します。このサイトは、iPhoneでランドスケープモードとポートレートモードの両方で見栄えが良く、完全に読み取り可能です。
とにかく、あなたの質問に戻って、テストでは、やるべきでないことの1つは、柔軟な幅のレイアウトを使用することであることが明らかになりました。（ちなみに、WP-touchは、私が間違えない限り、まさにそれを行います。）そうすると、次善のズームにつながります。iPadでは、幅が480pxの列に制約されているものにズームインして、テキストサイズを大きくすることができます。画面の幅に「調整」するものは、小さなテキストを読むことを強制します。または、小さすぎて快適に読むことができない場合は水平スクロールします...
シンプル：を使用しwp_is_mobile()てテストします- すべてのモバイルデバイス（スマートフォン、タブレットなど）trueに対してトリガーされます。
しないでください。信頼性がありません。
これは、カスタマイズしたい場合に非常に優れたスクリプトであり、簡単にワードプレスに統合できます。 http://detectmobilebrowsers.mobi/
注意すべきことの1つは、ネイティブブラウザをサポートしているほとんどのiphone、andriod、または携帯電話ユーザーは、自動的にリダイレクトされることを望まないということです。
これは悪い習慣です。モバイル版へのリンクを介してオプションを提供し、モバイル版では元のサイトに戻るオプションを提供します。
モバイル向けの非常に具体的な何かを構築するか、ネイティブブラウザをサポートしない古い携帯電話からのトラフィックがない場合を除き、ユーザーを自動的にリダイレクトしないことを繰り返します。
別のアプローチを追加します。
非常に特定のニーズに応じて、すべてのスタイルと動作を手作業で細かく調整したい場合があります。
IE9の場合は1つ、iPhoneの場合は2つ目、iPadの場合は3つ目、などなど...そして、Chris SchuldのBrowser.phpクラスを使用して素晴らしい結果を得ました。
私が思いついた機能と使用例：
require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();
function browser_check($what) {
global $browser_agent, $browser_version;
switch ($what) {
case 'version':
return $browser_version;
break;
case 'ie':
if ($browser_agent==Browser::BROWSER_IE) return true;
else return false;
break;
case 'mobile':
if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
else return false;
break;
case 'ipad':
if ($browser_agent==Browser::BROWSER_IPAD) return true;
else return false;
break;
default:
return false;
break;
}
}
echo "Browser Version: " . browser_check('version');
if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";
if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";
if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";