방문자가 iPhone, Android 등과 같은 휴대용 장치에서 사이트를 방문하고 있음을 감지하면 방문자에게 제공 할 테마의 새로운 수정 버전 (필요한 경우 내 프로필 확인)을 만들고 싶습니다.
추가 정보 : 내 테마가 유동적이지 않습니다. 너비는 약 976px (676px 콘텐츠 + 나머지는 왼쪽 사이드 바)입니다. 테마에 혁명을 일으키고 싶지 않지만 320x480 및 800x480 전화의 경우에는 크게 느껴집니다. 아마도 사이드 바를 제거하거나 적어도 오른쪽으로 이동하고 다른 작은 조정을 수행 할 것입니다.
답변:
다른 대부분과 마찬가지로 WPTouch를 사용하는 것이 좋습니다. 그러나 다른 웹 사이트 형식보다 블로그를 지원하기 위해 더 많이 구축되었으므로 모바일 솔루션의 만병 통치약이 아니라는 것을 알고 있습니다 (저는 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 는 광범위한 Wireless Universal Resource File 데이터베이스를 사용합니다. 이 지속적으로 업데이트되는 모바일 장치 데이터베이스에는 많은 기능 정보 가 포함되어 있으므로 Flash를 지원하는지 여부에 관계없이 서버 쪽 장치의 화면 해상도를 알고 있습니다.
template_redirect액션 후크가 종종 포함 된 실제 템플릿 파일 전에 마지막 순간 거의 한, 사용자 정의 테마를로드하는 데 사용 (IS template_include마지막 후크하지만, 그 필터입니다).
질문에 대답하지 않을 위험이 있으므로 그렇게하지 않는 것이 좋습니다.
나는 몇 달 동안 iOS 장치를 사용해 왔으며, iPad를 구입할 때 처음으로했던 것 중 하나는 사용 된 장치 (그리고 원래는 화면 방향에 따라 동작이 바뀌는 CSS 레이아웃을 생각해내는 것입니다) ).
작성 당시 내 개발자 사이트 (http://dev.semiologic.com/)에서 실행 중입니다. iOS 기기에서 테스트하면 레이아웃이 iPad의 사이드 바가있는 열에서 iPhone을 기반으로하는 단일 열이있는 열로 바뀝니다. (사이드 바는 두 개의 열로 배치되고 하단 상자는 아래의 두 개의 열로 배치됩니다.) 브라우저의 너비를 줄여 Safari를 사용하여 효과를 재현 할 수 있습니다.
어쨌든, 프로그래밍하는 것만 큼 재미 있지만 결국 iOS 기기에서는 모바일 최적화 레이아웃으로 인해 상황이 나빠지지는 않았습니다. Safari 모바일의 기본 확대 / 축소 기능은 기본 열의 너비가 480 픽셀 인 한 사이트가 이미 모바일 용으로 최적화되어 있습니다. 720px 너비의 레이아웃에 240px 너비의 사이드 바를 추가하면 사이트가 모두 잘 어울립니다.
500px + 250px는 Safari 모바일의 내장 확대를 고려하면 총 750px의 무언가를 원할 경우에도 작동합니다. 이 사이트는 여전히 가로 방향과 세로 모드 모두에서 iPhone에서 잘 보이고 완벽하게 읽을 수 있습니다.
여하튼, 당신의 질문으로 돌아가서, 테스트는 당신이하지 말아야 할 한 가지는 유연한 너비의 레이아웃을 사용하는 것으로 나타났습니다. (실수로, WP-touch는 내가 착각하지 않는 한 그렇게 할 것입니다.) 그렇게하면 최적의 확대 / 축소로 이어집니다. iPad에서는 너비가 480 픽셀 인 열로 제한된 항목을 확대하여 더 큰 텍스트 크기를 허용 할 수 있습니다. 화면 너비에 "조정"되는 내용은 작은 텍스트를 읽거나 너무 작아서 편안하게 읽을 수없는 경우 가로 스크롤을 강제로 실행합니다.
단순 : wp_is_mobile()테스트를 사용하여 모든 휴대 기기 (스마트 폰, 태블릿 등)에 true대해 트리거 합니다 .
제발 하지 않는 그렇게. 안정적으로 작동하지 않습니다.
당신이 그것을 사용자 정의하고 워드 프레스에 쉽게 통합하려는 경우 이것은 정말 좋은 스크립트입니다. http://detectmobilebrowsers.mobi/
주목할 점은 기본 브라우저를 지원하는 대부분의 iPhone, andriod 또는 휴대폰 사용자는 자동으로 리디렉션되지 않기를 원한다는 것입니다!
이것은 나쁜 습관입니다. 모바일 버전에 대한 링크를 통해 옵션을 제공하고 모바일 버전에서 원래 사이트로 돌아갈 수있는 옵션을 제공하십시오.
모바일 전용의 건물을 만들거나 기본 브라우저를 지원하지 않는 구형 전화의 트래픽이 없을 경우를 제외하고는 사용자를 자동으로 리디렉션하지 않습니다.
다른 접근법을 추가하겠습니다.
매우 구체적인 요구에 따라 모든 스타일과 행동을 수공예품으로 조정하고 싶을 수도 있습니다.
나는 최근에 IE9 한 가지, iPhone 두 번째 경우, iPad 세 번째 경우 등 ... 그리고 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";