(視頻) 《快速創建網站》 3.2 WordPress多站點及Azure在線編輯器 - 扔掉你的ftp工具吧,修改代碼全部雲端搞定

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

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.1)中,我們已經完成了數據導入。在這一節(3.2)中,我將對WordPress進行多站點升級,讓我的中文內容放置在http://anb.io/ 這個主站上,同時在http://anb.io/en/ 上放置英文的內容。相當於在我們的網站中創建了一個子站點,而且這個子站點具備和主站同樣的功能,後續我們添加了多語言切換插件後,就可以在主站上啓用中文,在/en的子站上啓用英文,形成一個多語言的站點羣。

這部分的內容對於不具備開發經驗的用戶可能稍顯複雜,因爲我們需要手動更新WordPress後臺的代碼。但是不必擔心,在整個操作過程中我不會使用任何的開發工具,所有的操作都在瀏覽器中完成。

請配合視頻閱讀本文

http://v.qq.com/page/h/o/b/h0147djt7ob.html

微軟Visual Studio Online在線編輯器

爲了能夠完成WordPress多語言模式的升級,我們需要對WordPress後臺的代碼文件進行簡單修改。一般來說,對網站後臺文件進行修改需要經過下載-更新-上傳的過程,但是藉助微軟Azure雲計算中集成的Visual Studio Online的在線編輯器,我們可以輕鬆的使用瀏覽器完成所有操作。

啓用Visual Studio Online在線編輯器:在Azure門戶的網站儀表板上點擊 配置

圖:在Azure中切換到網站配置頁面

在配置頁面中找到 EDIT IN VISUAL STUDIO ONLINE 這個選項,點擊打開,並保存配置

圖:在Azure中啓用Edit in Visual Studio Online功能

回到 儀表板 頁面,在右側的 速覽 中找到 在Visual Studio Online中編輯 鏈接,點擊進入編輯器

圖:在Azure中進入Visual Studio Online "Monaco"在線編輯器

進入編輯器後,可以看到WordPress網站的文件列表會在左側顯示。
圖:Azure上的Visual Studio Online "Monaco"在線編輯器

這裏,我們看到的是一個全功能的在線IDE(集成開發環境),不僅僅支持對文件的簡單編輯,也支持代碼的智能分析和開發輔助。Visual Studio Online 在線編輯器的CodeName是”Monaco”,當前對Web開發所使用的語言環境支持很好,具體請參考以下視頻和鏈接。

我在MVP ComCamp2015上的主題演講中關於Monaco的演示視頻:
http://v.qq.com/page/y/i/s/y0147bi71is.html


注:這段視頻中使用的一個Node.JS應用程序。視頻的前半部分是對Visual Studio Online的開發平臺部分進行介紹,後半部分纔是對在線編輯器的介紹,同時也有和GitHub集成的演示。

預告:在本系列的最後部分(4.1)中,我還會介紹如何使用Visual Studio Online和Azure集成進行WordPress的代碼管理及本地開發環境的構建。

MSDN Channel 9上的Monaco視頻彙總
http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco

Monaco開發團隊的博客
http://blogs.msdn.com/b/monaco/

WordPress多站點模式升級操作

WordPress多站點模式屬於WordPress的高級功能,在界面上沒有直接配置的選項,必須通過修改後臺代碼激活。對於運營網站的同學來說,這是一個非常有價值的功能。

在我們常用的各種網站上,我們會經常看到多站點模式的應用,比如:新浪的多站點

http://www.sina.com.cn/ :這是主站,作爲整個網站的第一入口
http://news.sina.com.cn/ :這是新聞子站
http://tech.sina.com.cn/ :這是科技子站

以上的多站點模式叫做:子域名方式,對於內容比較多的站點,我們可以使用子域名(也就是域名中的第一部分)來區分不同的功能/內容區域。

再看下面新浪對於科技子站內的分類:

http://tech.sina.com.cn/internet/ :科技子站中的互聯網內容
http://tech.sina.com.cn/tele/ : 科技子站中的電信類內容
http://tech.sina.com.cn/discovery/ :科技子站中的科普內容

以上這種多站點模式叫做:子目錄模式,對於同一個大分類下面的小分類,就可以使用子目錄的方式來進一步劃分。

當然,以上兩種模式我們既可以只使用其中一種,也可以混合使用。根據你的站點規模和工作模式自己選擇。多站點模式不僅僅影響你的用戶如何消費內容,對於網站後臺的工作模式也同樣有影響,不同類別的內容一般由不同部門/專業的人員進行管理,對這些用戶我們需要進行權限的控制。使用多站點模式,我們就可以很容易根據不同部門/專業對不同的用戶進行管理,並進行逐級授權。所以,WordPress完全可以作爲企業門戶的解決方案來使用。

多站點規劃

從上面的例子可以看出,多站點是需要一定規劃的,而且一旦啓用多站點,其結構就難以調整,需要預先進行的計劃纔可以。

圖:anb.io多站點多語言規劃

按照我的規劃,用戶將以http://anb.io 作爲統一入口,按照客戶端所使用的不同語言分別進入中文或英文的子站,中間使用多語言切換插件進行連接,形成以下的訪問體驗。

圖:anb.io博客站點多語言切換效果

上圖可以看到,同一片文章的兩個不同語言版本使用頁面右側的多語言切換工具進行鏈接,用戶可以通過點擊其中的語言選項跳轉到相應的語言版本,WordPress也會根據用戶所使用的瀏覽器的語言設置自動將第一次進入站點的用戶直接定位到不同語言的首頁上。

注意兩篇文章的url雖然不同,但是可以很輕易的分別他們是屬於不同語言的,這樣的格式也將對搜索引擎優化有所幫助。
http://anb.io/blog/opensource-freetools-crossplatform-mvp-comcamp2015-keynote/
http://anb.io/en/opensource-freetools-crossplatform-mvp-comcamp2015-keynote/

由於沒有必要對所有的內容都提供2種語言的版本,相應語言的博客首頁只會顯示那些已經提供了當前語言的文章鏈接,如下圖:

圖:anb.io多站點首頁可以根據語言顯示不同內容

WordPress多站點升級操作

首先,你可以通過WordPress的官方文檔瞭解一下WordPress的多站點功能,裏面列出了各種前提條件和主要操作步驟。但是因爲WordPress的文章主要是針對Linux/Apache/Mysql環境寫的,在Azure所使用的WordPress上進行操作的時候略有差異,對於本系列的所涉及的操作請看下文。

WordPress多站點模式文檔:http://codex.wordpress.org/Create_A_Network

操作步驟

  1. 編輯wp-config.php文件,激活多站點升級模式使用之前打開的在線編輯器,在wp-config.php這個文件中找到以下代碼/* That's all, stop editing! Happy blogging. */

    並在這行代碼下面添加以下代碼define( 'WP_ALLOW_MULTISITE', true ); 

    意思就是告訴WordPress:請激活多站點升級模式。如下圖圖:在WordPress中編輯wp-config.php文件激活多站點升級模式

    注意:Monaco中進行編輯時不需要保存的,它會自動完成保存操作。

  2. 修改完成後,切換回到你的WordPress的控制檯首頁,在Tools菜單下會出現Network Setup這個選項

    圖:在WordPress中進入Tools | Network Setup頁面
    選中這個選項即可進入多站點升級引導頁面,引導程序首先會提示你需要將站點中的插件暫時關閉,才能完成升級。點擊 deactivate your plugin鏈接,並將所有的插件deactivate,再回到這個引導頁面。

    圖:WordPress多站點升級需要deactivate所有插件
    這時,WordPress就可以進行多站點升級了,再以下頁面中直接點擊 install即可。

    圖:啓動WordPress多站點升級
    然後WordPress會提示你再次修改配置文件,這次需要修改的分別是wp-config.php和web.config文件。wp-config.php的修改如下:將之前我們添加的那行代碼替換成以下代碼
    注:一定要替換,而不是保留原來的代碼,之前那行代碼只是激活升級模式,現在已經完成了升級,我們需要對多站點模式進行配置。

    define('MULTISITE', true);
    define('SUBDOMAIN_INSTALL', false);
    define('DOMAIN_CURRENT_SITE', 'www.anblogs.net');
    define('PATH_CURRENT_SITE', '/');
    define('SITE_ID_CURRENT_SITE', 1);
    define('BLOG_ID_CURRENT_SITE', 1);

    注意以上define(‘SUBDOMAIN_INSTALL’, false),這裏要使用false。因爲我們是使用子目錄模式的多站點,而不是子域名方式的多站點。

    Web.config的修改如下:
    注:WordPress直接給出的配置文件是有錯的,請使用以下配置完成修改。

    <rewrite>
    <rules>
    <rule name="WordPress Rule 1" stopProcessing="true">
    <match url="^index\.php$" ignoreCase="false" />
    <action type="None" />
    </rule>
    <rule name="WordPress Rule 2" stopProcessing="true">
    <match url="^([_0-9a-zA-Z-]+/)?files/(.+)" ignoreCase="false" />
    <action type="Rewrite" url="wp-includes/ms-files.php?file={R:2}" appendQueryString="false" />
    </rule>
    <rule name="WordPress Rule 3" stopProcessing="true">
    <match url="^([_0-9a-zA-Z-]+/)?wp-admin$" ignoreCase="false" />
    <action type="Redirect" url="{R:1}wp-admin/" redirectType="Permanent" />
    </rule>
    <rule name="WordPress Rule 4" stopProcessing="true">
    <match url="^" ignoreCase="false" />
    <conditions logicalGrouping="MatchAny">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" />
    </conditions>
    <action type="None" />
    </rule>
    <rule name="WordPress Rule 5" stopProcessing="true">
    <match url="(^[_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*)" ignoreCase="false" />
    <action type="Rewrite" url="{R:2}" />
    </rule>
    <rule name="WordPress Rule 6" stopProcessing="true">
    <match url="^([_0-9a-zA-Z-]+/)?(.*\.php)$" ignoreCase="false" />
    <action type="Rewrite" url="{R:2}" />
    </rule>
    <rule name="WordPress Rule 7" stopProcessing="true">
    <match url="." ignoreCase="false" />
    <action type="Rewrite" url="index.php" />
    </rule>
    </rules>
    </rewrite>

    對web.config的修改是針對託管WordPress的Azure網站服務器進行的,以上的內容都是一些url重寫規則,WordPress給出的配置在使用目錄模式的時候無法正常工作,所以請一定使用本文給出的代碼。

    注意:你需要修改的僅僅是配置節的內容,請保留其他內容,如下圖

    圖:WordPress多站點升級中對web.config的重定向模塊進行配置

  3. 進行多站點配置,完成以上配置後,並從新登錄。你會注意到頂部的菜單發生了變化,請點擊 My Sites | Network Admin | Dashboard進入到多站點管理控制檯。

    圖:進入WordPress多站點管理控制檯
    多站點管理控制檯從邏輯上看,是位於你所有子站點之上的根控制檯,今後所有的插件/外觀(主題)安裝都需要使用這個控制檯完成,而文章/內容的管理則要使用相應站點的控制檯完成。現在讓我們添加我們的英文站點,點擊Sites | All Sites菜單,並在Sites頁面中點擊 Add New按鈕

    圖:WordPress中添加新的子站點
    在Add New Site頁面中填寫新站點的信息,Site Address就是你的新站點所處於的目錄位置,後面就是站點名稱和管理員郵箱。點擊 Add Site 按鈕,完成操作。

    圖:WordPress子站點創建


    完成後再回到 Sites | All Sites 頁面,你會看到現在有兩個站點了。

  4. 前臺分別打開這兩個站點的地址,你會看到主站上因爲之前導入了數據,所以文章會多一些,而新建的子站上只有Hello World這一片文章

    圖:WordPress多站點升級效果


到這裏,我們就完成了多站點升級的操作。在下一節(3.2)中,我們將對2個站點進行不同的語言配置,並安裝多語言切換插件將兩個站點鏈接到一起。

請關注微信公衆號anb-io,每週推送內容,有技術也有生活,一起做個有情懷的程序猿。

圖片:掃一掃微信訂閱號,和你一起做一個有情懷的程序猿。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章