(視頻) 《快速創建網站》3.4 網站改版3分鐘搞定 - WordPress主題安裝和備份

本文是《快速創建網站》系列的第8篇,如果你還沒有看過之前的內容,建議你點擊以下目錄中的章節先閱讀其他內容再回到本文。訪問本系列目錄,請點擊:http://anb.io/blog/tag/wordpress-on-azure/

1. 網站管理平臺WordPress和雲計算平臺Azure簡介 (6分鐘視頻 )
2.1 在Azure上創建網站及網站運行機制 (13分鐘視頻)
2.2 域名綁定操作和Azure負載均衡機制 (12分鐘視頻)
2.3 WordPress 初始化和網站管理功能 (11分鐘視頻)
3.1 WordPress 數據導入 (12分鐘視頻)
3.2 WordPress 多站點支持和Azure在線代碼編輯器 (14分鐘視頻)
3.3 WordPress 多語言支持 Multisite Language Switcher (15分鐘視頻)
3.4 WordPress 主題安裝和配置,美化你的網站 (15分鐘視頻)
4.1 Visual Studio Online (VSO)在線開發平臺 (11分鐘)
4.2 使用 Visual Studio Online 和 Azure 構建 DevOps環境 (13分鐘)

上一節(3.3)中我們完成了WordPress的多語言配置,讓我們可以爲同一篇文章提供多種不同語言的版本。在這一節(3.4),我們將對站點進行美化,讓我們的站點不僅僅在功能上高大上,看上去也要高大上。

請配合視頻閱讀本文

http://v.qq.com/page/o/l/v/o0147yj0olv.html

WordPress 外觀(主題)插件安裝

外觀(主題)是WordPress上用來對頁面佈局進行美化和調整的方式,這個功能通過插件方式提供,由全世界的開發人員提供,可以很方便的加載到你自己的站點上,快速完成網站的改版。

WordPress官網主題庫:https://wordpress.org/themes/

而且,不僅僅WordPress官網提供各種主題插件,還有很多第三方的網站也提供免費或商用的WordPress主題,這裏列出一些供大家參考

– ThemeForest.net: 當前有超過18,000個各類模版和主題可以選擇
– New WordPress Themes: https://newwpthemes.com/
– 其他第三方WordPress主題製作公司:http://thereisathemeforthat.com/the-list-of-wordpress-theme-designers-developers-and-companies/

有這麼多的主題資源意味着你可以根據自己的喜好和針對用戶的類型,更加自由的選擇頁面的展現方式。我們都知道在網站製作過程中有大量的精力需要花在外觀的製作和設計上,使用WordPress你可以大大解決這方面的成本,而且有更大的自由度。

響應式佈局 Responsive Design

說到網頁的外觀設計就不得不提到響應式佈局(Responsive Design),這種佈局方式的好處是可以適應不同的屏幕尺寸和設備類型。這些年手持設備的流行使得用戶在大多數的時間是使用手機/Pad一類的設備來訪問你的網站的,如果讓我們的網站在不同的設備上都已最佳的方式顯示就是響應式佈局要解決的問題。

知乎上的這段解釋很有意思:

很久很久很久以前,每個人都只有一件衣服( Website ),不管你有錢沒錢大家每天都只穿這一件。

後來有人發明了舞會(移動互聯網),大家都爭先恐後地想要參加,於是一個做「開發」的裁縫忽悠人們說進舞會最好訂做一件專門的禮服( Mobile Site ),大家想想也對,上班和出去哈皮都穿同一件衣服多無聊啊,舞會就要有舞會的樣子。於是乎只要有點閒錢的人都做了禮服,他和原來那件叫做 Website 的衣服是完全不一樣的,面子不一樣,裏子也不一樣。

後來舞會的種類越來越多了,很多人被迫做了好多好多件禮服,於是又有一個叫做「前端」的裁縫站出來說你們每年要新做那麼多衣服,多費錢啊,而且一出門鑰匙啊皮夾子啊名片都要在不同衣服裏換來換去多麻煩。你看,我們新發明了一個手藝叫做「Responsive Design」,只要把你原來那件衣服稍微那麼一改,以後去哪個舞會都可以只穿這一件衣服,衣服的裏子永遠都差不多,但面子可以按照要求自適應不同的舞會。

於是所有人都開始換上這種響應式的衣服了。。。

以下是通過Azure的Application Insight分析功能數據統計

瀏覽器

操作系統

屏幕分辨率

從以上的數據可以看出,移動設備佔有相當的比例。當然,因爲博主的站點主要針對開發人員,而內容又和工作相關,所以pc端在裏面佔有相當大的比例。如果你的目標用戶是普通用戶,那麼移動端的比例已定會更高。

另外,我們可以看到各種不同分辨率的設備對網站都有訪問,如何保證你的站點可以在不同的分辨率上都有最佳表現時考驗你的網頁設計師和前端開發人員 的一個重要標準。而對使用WordPress的網站來說,你只要確保使用了響應式佈局的主題一切就都Ok了。

PC/Pad 端全屏效果

手機豎屏效果

希望瞭解更多關於響應式佈局的同學可以參考以下文��
http://baike.baidu.com/view/8539585.htm
http://www.zhihu.com/question/20976405
http://www.w3cschool.cc/bootstrap/bootstrap-v2-responsive-design.html

添加插件的方法(WordPress多站點模式)

多站點模式的WordPress主題,需要通過Network Admin的管理控制檯來完成。在Network Admin控制檯的菜單中找到 主題 | 添加主題 菜單,點擊進入

在 添加主題 頁面上,點擊 特性篩選,確保你選中 響應式佈局 選項,然後就可以找到所有滿足響應式佈局的頁面主題了。

安裝主題的方式非常簡單,和之前演示過的插件安裝一樣,安裝完成之後需要在整個網絡啓用,以保證多站點模式下的所有子站點都可以使用新安裝的主題。

博主的站點當前使用的是叫做Tempera的主題,你可以根據自己的喜好使用自己喜歡的主題。

WordPress外觀小工具使用

網站後臺所提供的功能需要提供給前臺的用戶使用就需要使用頁面元素來提供這些功能,這就是外觀小工具的作用。如下圖,通過小工具,我們可以講多語言切換工具顯示在文章的右側供用戶切換語言使用。

WordPress備份

之前在介紹Azure網站機制的時候我曾經介紹過,Azure會給每個放置在Azure上的網站進行3份備份,那爲啥我們仍然需要備份呢?首先,備份就是以防不測的,就算Azure提供了這樣的保障,就算東西找不回來你可以告微軟,但是數據丟了就是丟了,沒有辦法。所以,我們永遠需要做好數據備份。而且這裏的備份一定要是離線備份(Offsite Backup)。

所謂的離線備份,就是在生產系統以外進行的備份,而且這一備份最好與生產系統處於不同的地理位置,確保就算遇到火山碰發,地震,洪水等不可抗力仍然可以保證數據安裝。對博主這樣的網站好像沒啥必要哈,但是好習慣是需要保持的麼。

在“一個博客”中,我使用的是WordPress的Backup Scheduler這個插件完成的備份,並且配置了自動ftp上傳到另外一臺雲虛擬機中。

第三部分結束語

到這裏,《快速創建網站》系列的第三部分就結束了。大家現在所看到的這個博客站點就是按照以上的步驟創建出來的,整個過程中我沒有使用任何的專業開發工具,所有的操作都通過瀏覽器完成。而且,我們的網站簡單易用,功能豐富而且性能,擴展性都極強。希望這些內容可以幫到你。

在第四部分中,我將對之前介紹過的Visual Studio Online進行進一步的介紹。如果你的開發人員,而且正好使用php/mysql進行開發,那麼這段視頻應該可以幫到你。我將使用Visual Studio Online所提供的在線開發平臺,在線IDE和Azure所提供的集成能力構建一個開發運維一體化的環境。開發運維一體化(DevOps)是近幾年軟件開發行業非常火熱的話題,這裏我不想過多的介紹概念,而希望通過這個簡單的網站實例讓大家對DevOps的基本概念有一定的瞭解。當然,DevOps是我的老本行ALM裏面 的重要內容,我後面會有更加詳細專業的文章來介紹更多的細節。

世界上不是所有的東西都是用直接經濟契約來維繫的,比如:陽光,空氣,愛情和開源軟件。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章