4 Cara Meningkatkan Versi Ponsel Tema WordPress Anda

Artikel ditulis oleh:
  • WordPress
  • Diperbarui: Jul 29, 2013

Versi Mobile WordPress

Mari kita hadapi kebenaran, perangkat seluler semakin populer. Penjelajahan desktop tidak berkembang lagi, itu benar-benar menurun, sementara seluler berkembang pesat dengan semua ponsel pintar dan tabel luar biasa di luar sana.

Menurut Net MarketShare, perangkat seluler mewakili 10% dari total lalu lintas web. Ini angka yang besar, dan bahkan lebih besar di beberapa ceruk dan negara. Tetapi yang penting di sini adalah perhatian khusus yang diperlukan perangkat seluler, karena ruang layar yang terbatas dan fakta bahwa koneksi seluler biasanya lebih lambat daripada koneksi desktop.

Banyak tema WordPress yang responsif tetapi Anda tahu, kami akan selalu memiliki ruang untuk perbaikan. Jadi di sini kita akan melihat teknologi 4 dan cara menggunakannya untuk meningkatkan pengalaman seluler bagi pengguna Anda.

#1 Ol 'Jenis Media

Beberapa tahun yang lalu, ketika IE5.5 dan IE6 dianggap hidup, browser seluler baru saja mulai bermunculan (dan Opera adalah yang terbaik), dan orang-orang mulai menyadari bahwa ada hal-hal yang rusak sejak ponsel saat itu hanya tidak bisa memproses hal-hal sederhana seperti CSS (belum lagi JS, flash, dan sebagainya).

Jadi, melakukan situs seluler yang benar-benar terpisah adalah satu-satunya pilihan ketika jenis media datang untuk menyelamatkan kita. Gagasannya sederhana, Anda dapat memberi tahu browser jika file yang Anda sediakan adalah aturan CSS “lanjut” (untuk desktop) atau aturan CSS sederhana (untuk handheld atau cetak). Sintaksnya sesederhana ini:

<link rel = "stylesheet" href = "handheld.css" ketik = "text / css" media = "handheld" />

Ini bisa menjadi opsi yang baik untuk membuat desain yang sama sekali berbeda untuk situs seluler Anda. Tetapi Anda tidak seharusnya menggunakannya.

Jenis media mungkin terdengar bagus pada awalnya tetapi masalah sederhana datang dengan ponsel pintar modern: kurangnya dukungan browser. Sebagian besar pemain utama di luar sana hanya mengabaikan fungsi semacam ini (seperti apel)
Lalu pertanyaan media datang untuk menyelamatkan kita.

#2 Pertanyaan Media dan bagaimana benar-benar meningkatkan pengalaman seluler

Ini adalah cara paling populer untuk membuat versi seluler situs Anda.

Anda dapat menargetkan titik-titik tertentu berdasarkan kemarahan ukuran browser, ukuran layar perangkat, kerapatan piksel (ya, retina!), Dan bahkan jenis media.

Berikut ini adalah kueri media sederhana:

@ media (lebar maks: 700px) {body {background: red; }}

Ini hampir sama dengan pemrograman. IF "Lebar browser adalah 700 atau lebih rendah", KEMUDIAN "Terapkan kode CSS berikut".

Tema anak

Mari kita buat folder baru di / tema Anda dan beri nama twentyMobile. Saya tahu, dua puluh dua belas sudah menggunakan pertanyaan media, tapi kami di sini untuk belajar, bukan?

Jadi, buat file style.css dan tambahkan konten ini:

/ * Nama Tema: Templat tema seluler: twentytwelve * / @import url ("../ twentytwelve / style.css"); @media genggam, hanya layar dan (lebar maks: 767px) {nav ul {display: none;} nav pilih {display: block}}

Di atas kami membuat CSS tema anak dan kami juga menambahkan aturan yang hanya akan menargetkan perangkat seluler, yang akan menyembunyikan menu utama dan menampilkan pilihan. Jadi, jika Anda memiliki menu dalam pilihan, Anda bisa menghemat banyak ruang alih-alih menampilkannya sebagai item ul / li

#3 Makeover ekstrim dengan jQuery Mobile

jQuery mobile adalah kerangka kerja mengagumkan yang menggunakan fungsi jQuery untuk meningkatkan pengalaman seluler, dengan widget yang dioptimalkan dan elemen UI.

HTML yang diperlukan untuk membuatnya cukup sederhana, hanya menggunakan atribut data HTML dan JS untuk mendeteksi dan membuat widget UI.

Tetapi untuk membuat jQuery Mobile berfungsi dengan baik di blog WordPress Anda, Anda harus memanggil skrip seluler jQuery terlebih dahulu. Kembali ke tema anak kami, gandakan file header.php tema utama dan tambahkan baris ini di tag kepala:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </script>

Saya harus menyebutkan bahwa untuk proposal komersial Anda harus menggunakan wp_enqueue _script, jadi Anda akan menghindari duplikasi pustaka di situs Anda.
Sekarang kita bisa bermain-main dengan hampir semua elemen UI yang Anda inginkan. jQuery mobile memiliki banyak widget UI yang dapat Anda gunakan dalam sebuah tema, tetapi mari kita menerapkan halaman dan panel yang bisa dilipat.
Ini adalah sintaks HTML dasar:

<div data-role = "halaman"> <div data-role = "header"> </div> <div data-role = "content"> </div> <div data-role = "footer"> </ div> </div>

Dengan kode ini Anda akan membuat "halaman" baru dan area header, konten, dan footer. Header dan footer adalah tetap, dan konten akan berubah berdasarkan halaman saat ini, sehingga Anda dapat memuat beberapa halaman sekaligus dan hanya menyembunyikannya dengan menetapkan ID yang berbeda.
Ini adalah HTML dasar untuk panel yang bisa diciutkan:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data-collapsed = "true"> <p> Konten area yang dapat dilipat </p> </div> </div>

Cukup sederhana untuk mengimplementasikan loop di sana, bukan? Nah, kode Anda akan terlihat seperti ini:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </div> <? ...}?> </div>

Menu pilih direvisi

Dengan kode yang telah kita lihat di atas (di bagian kueri media) Anda dapat menyembunyikan menu Anda yang biasa dan menunjukkan menu pilih khusus. jQuery memungkinkan Anda untuk menambahkannya tanpa banyak kode PHP (sejujurnya kami tidak membutuhkan PHP sama sekali). Mari kita buat file baru dan tambahkan kode ini di sana:

jQuery (fungsi ($) {// ketika DOM siap $ (dokumen). Sudah (function () {// mari kita buat elemen pilih $ ("<select />").appendTo("nav"); / / Dengan opsi baru, buka ... $ ("<option />", {"value": "", "text": "Pergi ke ..."}) appendTo ("nav select");}); / / Sekarang kita memiliki pilih yang dibuat, mari kita isi: $ ("nav .menu a"). Masing-masing (function () {// untuk setiap LINK yang Anda temukan di menu var aux = $ (this); $ ("<option /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}) appendTo (" nav select "); // tambahkan item baru ke pilih)} ; // maka kita mengatur fungsionalitas dropdown untuk mengalihkan ketika kita memilih item baru $ ("nav select"). ubah (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Melakukan hal ini akan membuat menu seluler baru, TAPI masalahnya adalah, kami memuat jquery seluler bahkan dalam versi "normal" dari situs tersebut. Itulah mengapa kami dapat menggunakan juga beberapa plugin untuk membantu kami meningkatkan situs kami.

#4 - Membungkus semuanya dengan Detektor Ponsel

Plugin mengagumkan ini menciptakan fungsionalitas baru yang memungkinkan kita untuk memuat tema secara bersyarat tergantung pada perangkat pengguna. Dan ini bekerja dengan aturan bersyarat sederhana, seperti ini:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

Metode MobileDTS memeriksa perangkat saat ini, lalu mengembalikan nilai true / false yang sederhana. Kemudian kita dapat menggunakan fungsi ajaib yang disebut switch_theme () untuk menetapkan tema baru, dan Anda dapat menggunakan kondisional plugin seperti MobileDTS :: is_switcher_enabled () untuk membuat tautan ke versi desktop saat menggunakan ponsel, misalnya.

Kesimpulan

Jadi, apakah Anda pernah menggunakan plugin atau fungsi seluler di tema WordPress Anda? Metode mana yang Anda sukai? Jangan malu dan sampaikan pendapat Anda!

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.