Bagaimana cara mendeteksi perangkat seluler dan menyajikannya tema tertentu?

Saya ingin membuat versi modifikasi baru dari tema saya (periksa profil saya jika perlu) untuk disajikan kepada pengunjung jika saya mendeteksi bahwa mereka mengunjungi situs dari perangkat genggam, seperti iPhone, Android, dll.

1. Bagaimana cara mendeteksi jika permintaan datang dari perangkat / browser seluler?
2. Bagaimana saya dapat memuat dan menyajikan tema khusus untuk mereka?

Info Lebih Lanjut : Tema saya tidak cair. Ini memiliki lebar tetap sekitar 976px (676px konten + sisanya adalah sidebar kiri). Saya tidak ingin merevolusi tema tapi saya merasa itu terlalu besar untuk ponsel 320x480 dan 800x480. Mungkin saya akan menghapus sidebar atau setidaknya memindahkannya ke kanan dan melakukan penyesuaian kecil lainnya.

Seperti kebanyakan orang lain, saya sangat merekomendasikan menggunakan WPTouch. Namun, ini dibangun lebih untuk mendukung blog daripada format situs web lain, jadi saya tahu itu bukan obat mujarab dari solusi seluler (saya menjalankan portofolio saya di WordPress dan juga blog saya, dan portofolio saya seperti ****di WPTouch).

Jadi saya memang melihat kode untuk menemukan bagian yang relevan yang perlu Anda gunakan untuk meniru deteksi browser seluler. Pertama, sebagaimana disebutkan oleh Jan Fabry, adalah daftar agen pengguna peramban seluler. WPTouch menyertakan daftar default, tetapi juga memungkinkan Anda untuk menambahkan agen pengguna khusus dengan pengaturan atau dengan filter yang disebut 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;
}

Daging plugin adalah kelas:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

Konstruktor plugin ( function WPtouchPlugin()) pertama-tama menambahkan aksi ke plugins_loadedhook untuk mendeteksi agen pengguna peramban seluler dan disetel $applemobileke true. Inilah fungsi spesifiknya:

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;
        }       
    }
}

Sekarang plugin tahu Anda menggunakan peramban seluler (sesuai dengan agen pengguna peramban). Bagian gemuk berikutnya dari plugin adalah seperangkat filter:

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') );       
}

Setiap filter ini memanggil metode yang memeriksa apakah $applemobledisetel ke true atau tidak . Jika ya, maka WordPress akan menggunakan stylesheet seluler Anda, tema seluler Anda, dan templat pos / halaman seluler alih-alih yang default untuk tema Anda. Pada dasarnya, Anda mengabaikan perilaku default WordPress berdasarkan apakah browser yang digunakan memiliki agen pengguna yang cocok dengan daftar "browser seluler" Anda.

WPTouch juga mencakup kemampuan untuk mematikan tema seluler - ketika Anda mengunjungi situs WPTouch di iPhone, ada tombol di bagian bawah yang memungkinkan Anda untuk melihat situs secara normal. Anda mungkin ingin mempertimbangkan ini ketika Anda membangun solusi Anda sendiri.

Penafian: Semua kode di atas disalin dari sumber untuk WPTouch versi 1.9.19.4 dan dilindungi oleh GPL. Jika Anda menggunakan kembali kode tersebut, sistem Anda juga harus mematuhi ketentuan GPL. Saya tidak menulis kode ini.

Anda mungkin ingin melihat bagaimana plugin WPtouch yang sangat populer melakukan ini. Ini memberikan tema yang berbeda untuk "iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch dan perangkat mobile BlackBerry Storm / Torch" . Saya melihat daftar agen pengguna dalam kode sumber mereka , itu mungkin kuncinya.

Plugin lain, WP-Wurfled , menggunakan basis data Wireless Universal Resource File yang luas . Basis data perangkat seluler yang terus diperbarui ini juga mengandung banyak info kemampuan , sehingga Anda tahu sisi server resolusi layar perangkat, apakah itu mendukung Flash, ...

The template_redirecttindakan kait sering digunakan untuk memuat tema kustom, karena hampir saat terakhir sebelum file template nyata disertakan ( template_includeyang hook lalu, tapi itu filter).

Dengan risiko tidak menjawab pertanyaan, saya sarankan untuk tidak melakukannya.

Saya telah menggunakan perangkat iOS selama berbulan-bulan, dan salah satu hal pertama yang saya lakukan ketika saya membeli iPad adalah mencoba membuat tata letak CSS yang mengubah perilakunya berdasarkan perangkat yang digunakan (dan, awalnya, orientasi layar ).

Pada saat penulisan, ini berjalan di situs dev saya (http://dev.semiologic.com/). Jika Anda mengujinya di perangkat iOS, Anda akan perhatikan bahwa tata letak beralih dari kolom dengan sidebars di iPad, ke tata letak dengan kolom tunggal berdasarkan iPhone. (Bilah samping diletakkan dalam dua kolom, dan kotak bagian bawah diletakkan dalam dua kolom di bawahnya.) Anda dapat mereproduksi efek menggunakan Safari, dengan mengurangi lebar browser.

Ngomong-ngomong, sama asyiknya dengan program, akhirnya terlintas dalam benak saya bahwa, setidaknya pada perangkat iOS, tata letak yang dioptimalkan untuk seluler memperburuk keadaan, bukan lebih baik. Zoom built-in Safari mobile adalah agar, selama kolom utama Anda selebar 480px, situs Anda sudah dioptimalkan untuk penggunaan seluler. Tambahkan sidebar lebar 240px untuk tata letak lebar 720px, dan situs Anda cocok dan tampak hebat di semua:

• 1024x768 (lanskap iPad)
• 768x1024 (Potret iPad)
• 800x600 (pengguna dengan penglihatan buruk)
• 480x320 (lanskap iPhone)
• 320x480 (Potret iPhone, dengan zoom otomatis dimulai)

500px + 250px juga berfungsi jika Anda lebih suka memiliki sesuatu yang totalnya 750px, jika Anda mempertimbangkan zoom bawaan built-in Safari mobile. Situs ini akan tetap terlihat bagus dan dapat dibaca dengan sempurna di iPhone baik dalam mode landscape maupun portrait.

Bagaimanapun, kembali ke pertanyaan Anda, pengujian mengungkapkan bahwa satu hal yang TIDAK boleh Anda lakukan, adalah menggunakan tata letak dengan lebar yang fleksibel. (Kebetulan, WP-touch akan melakukan hal itu kecuali saya salah.) Melakukan hal itu mengarah ke pembesaran yang kurang optimal. Di iPad, Anda dapat memperbesar sesuatu yang dibatasi dalam kolom lebar 480px, memungkinkan ukuran teks lebih besar; sesuatu yang "menyesuaikan" dengan lebar layar Anda memaksa Anda membaca teks kecil, atau pengguliran horizontal jika terlalu kecil untuk dibaca dengan nyaman ...

Sederhana: Gunakan wp_is_mobile()untuk menguji - itu akan memicu trueuntuk semua perangkat seluler (ponsel pintar, tablet, dll.).

Memperbarui

Tolong jangan lakukan itu. Itu tidak bisa diandalkan.

Ini adalah skrip yang sangat bagus jika Anda ingin menyesuaikannya, mudah diintegrasikan ke dalam wordpress. http://detectmobilebrowsers.mobi/

Satu hal yang perlu diperhatikan adalah bahwa sebagian besar pengguna iphone, andriod, atau ponsel dengan dukungan browser asli tidak ingin diarahkan ulang secara otomatis!

Ini adalah praktik buruk, beri mereka opsi melalui tautan ke versi seluler DAN di versi seluler beri mereka opsi untuk kembali ke situs asli.

Saya ulangi tidak secara otomatis mengarahkan ulang pengguna Anda kecuali jika Anda membangun sesuatu yang sangat spesifik untuk seluler, atau Anda memiliki lalu lintas dari ponsel lama tanpa dukungan browser asli (tidak mungkin).

• Ingin menambahkan, satu cara mudah untuk mengetahui betapa pentingnya hal ini adalah melalui log server Anda.

Saya akan menambahkan pendekatan alternatif.

Mungkin Anda ingin kerajinan tangan dan memperbaiki semua gaya dan perilaku sesuai dengan kebutuhan yang sangat spesifik.

Saya baru-baru harus: jika IE9 satu hal, jika iPhone yang kedua, jika iPad yang ketiga dan seterusnya ... Dan digunakan Chris Schuld ini Browser.php kelas dengan hasil yang bagus.

Fungsi saya muncul dan contoh penggunaan:

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";