4改進WordPress主題的移動版本的方法

文章撰寫者:
  • WordPress
  • 更新:Jul 29,2013

手機版WordPress

讓我們面對現實,移動設備越來越受歡迎。 桌面瀏覽不再增長,實際上正在減少,而移動設備正在快速增長,所有那些非常棒的智能手機和桌面都在那裡。

根據Net MarketShare,移動設備佔網絡總流量的10%。 這是一個很大的數字,在一些利基和國家甚至更大。 但重要的是移動設備需要特別注意,因為屏幕空間有限以及移動連接通常比桌面連接慢。

很多WordPress主題都有響應,但你知道,我們總是有改進的餘地。 因此,我們將在此處看到4技術及其使用方法,以改善用戶的移動體驗。

#1 Ol'媒體類型

幾年前,當IE5.5和IE6被認為是活著的時候,移動瀏覽器剛剛開始出現(Opera是迄今為止最好的瀏覽器),人們開始意識到事情剛剛破滅,因為當時的手機不能處理簡單的事情,如CSS(更不用說JS,flash等)。

因此,當媒體類型來拯救我們時,做一個完全分離的移動網站是唯一的選擇。 這個想法很簡單,您可以告訴瀏覽器您提供的文件是“高級”CSS規則(用於桌面)還是簡單的CSS規則(用於手持或打印)。 語法很簡單:

<link rel =“stylesheet”href =“handheld.css”type =“text / css”media =“handheld”/>

這可以為您的移動網站創建完全不同的設計。 但你不應該使用它。

媒體類型起初可能聽起來不錯,但現代智能手機帶來了一個簡單的問題:缺乏瀏覽器支持。 那裡的大多數主要玩家都忽略了這種功能(比如蘋果)
然後媒體查詢來拯救我們。

#2媒體查詢以及如何真正改善移動體驗

這是創建網站移動版本的最流行方式。

您可以根據瀏覽器大小,設備屏幕大小,像素密度(是的,視網膜!),甚至媒體類型的範圍來定位某些點。

這是一個簡單的媒體查詢:

@media(max-width:700px){body {background:red; }}

這與編程幾乎相同。 IF “瀏覽器寬度為700或更低”, THEN “應用以下CSS代碼”。

子主題

讓我們在/ themes中創建一個新文件夾,並將其命名為twentyMobile。 我知道,二十二點已經使用了媒體查詢,但我們在這裡學習,不是嗎?

因此,創建一個style.css文件並添加以下內容:

/ *主題名稱:手機主題模板:twentytwelve * / @import url(“../ twentytwelve / style.css”); @media掌上電腦,只有屏幕和(最大寬度:767px){nav ul {display:none;} nav select {display:block}}

上面我們創建了子主題CSS,並且我們還添加了一個僅針對移動設備的規則,它將隱藏主菜單並顯示選擇。 因此,如果您在選擇中有菜單,則可以節省大量空間,而不是將其顯示為ul / li項目

使用jQuery Mobile進行#3極致改造

jQuery mobile是一個非常棒的框架,它使用jQuery功能來改善移動體驗,優化的小部件和UI元素。

使其工作的HTML非常簡單,只需使用HTML數據屬性和JS來檢測和創建UI小部件。

但是為了使jQuery Mobile在你的WordPress博客中正常工作,你需要先調用jQuery移動腳本。 回到我們的子主題,複製主題的header.php文件並在head標籤中添加以下行:

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

我應該提一下,對於商業建議,你應該使用wp_enqueue _script,這樣你就可以避免在你的網站中復制庫。
現在我們可以使用您想要的任何UI元素。 jQuery mobile有很多可以在主題中使用的UI小部件,但是讓我們應用頁面和可折疊面板。
這是基本的HTML語法:

<div data-role =“page”> <div data-role =“header”> </ div> <div data-role =“content”> </ div> <div data-role =“footer”> </ div> </ div>

使用此代碼,您將創建一個新的“頁面”以及頁眉,內容和頁腳區域。 頁眉和頁腳是固定的,內容將根據當前頁面進行更改,因此您可以加載多個頁面,只需通過分配不同的ID來隱藏它們。
這是可折疊面板的基本HTML:

<div data-role =“collapsible-set”> <div data-role =“collapsible-set”data-collapsed =“true”> <p>可折疊區域內容</ p> </ div> </ div>

在那裡實現循環非常簡單,不是嗎? 好吧,你的代碼看起來像這樣:

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

修改了選擇菜單

使用我們上面看到的代碼(在媒體查詢部分),您可以隱藏常用菜單並顯示特殊的選擇菜單。 jQuery允許你在沒有太多PHP代碼的情況下添加它(說實話,我們根本不需要PHP)。 讓我們創建一個新文件並在其中添加以下代碼:

jQuery(function($){//當DOM準備就緒時$(document).ready(function(){//讓我們創建select元素$(“<select />").appendTo("nav”); / /使用新選項,轉到... $(“<option />”,{“value”:“”,“text”:“轉到...”})。appendTo(“nav select”);}); / /現在我們有選擇創建的let填充它:$(“nav .menu a”)。each(function(){//你在菜單中找到的每個LINK var aux = $(this); $(“<option />“,{”value“:aux.attr(”href“),”html“:aux.text();})。appendTo(”nav select“); //將新項目附加到select)} ; //然後我們將下拉功能設置為在我們選擇新項目時重定向$(“nav select”)。change(function(){window.location = $(this).find(“option:selected”)。val ();});});

這樣做會創建一個新的移動菜單,但問題是,即使在網站的“正常”版本中,我們也在加載jquery mobile。 這就是為什麼我們也可以使用一些插件來幫助我們改進我們的網站。

#4 - 使用Mobile Detector解決所有問題

這個很棒的插件創建了一個新功能,允許我們根據用戶設備有條件地加載主題。 它適用於簡單的條件規則,如下所示:

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

MobileDTS方法檢查當前設備然後返回一個簡單的真/假。 然後我們可以使用一個名為switch_theme()的魔術函數來設置一個新的主題,例如,你可以使用像MobileDTS :: is_switcher_enabled()這樣的插件條件來創建一個指向桌面版本的鏈接。

結論

那麼,你有沒有在WordPress主題中使用過移動插件或功能? 你更喜歡哪種方法? 不要害羞,分享你的想法!

羅切斯特奧利維拉的文章

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: