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

北京的201個藍天發表於2015-03-10

本文是《快速建立網站》系列的第8篇,如果你還沒有看過之前的內容,建議你點選以下目錄中的章節先閱讀其他內容再回到本文。

訪問本系列目錄,請點選:http://devopshub.cn/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 為啥造軟體不同於造汽車,為啥是軟體就一定會有Bug - 構建開發運維一體化(DevOps)(11分鐘視訊)
4.2 完結篇 – 應用運營vs.發射衛星,遙測(Telemetry) 技術 (13分鐘視訊)

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

請配合視訊閱讀本文

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裡面 的重要內容,我後面會有更加詳細專業的文章來介紹更多的細節。

相關文章