(視頻) 《快速建立網站》 3.2 WordPress多站點及Azure在線代碼編輯器 － 扔掉你的ftp工具吧，修改代碼所有云端搞定

時間  2019-11-21
標籤 視頻 快速建立網站 3.2 wordpress 站點 azure 在線 代碼 編輯器 扔掉 ftp 工具 修改 所有 雲端 搞定 欄目 Wordpress 简体版
原文   原文鏈接

本文是《快速建立網站》系列的第6篇，若是你尚未看過以前的內容，建議你點擊如下目錄中的章節先閱讀其餘內容再回到本文。php

訪問本系列目錄，請點擊：http://devopshub.cn/tag/wordpress-on-azure/html

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分鐘視頻）web

在上一節（3.1）中，咱們已經完成了數據導入。在這一節（3.2）中，我將對WordPress進行多站點升級，讓個人中文內容放置在http://anb.io/ 這個主站上，同時在http://anb.io/en/ 上放置英文的內容。至關於在咱們的網站中建立了一個子站點，並且這個子站點具有和主站一樣的功能，後續咱們添加了多語言切換插件後，就能夠在主站上啓用中文，在/en的子站上啓用英文，造成一個多語言的站點羣。sql

這部分的內容對於不具有開發經驗的用戶可能稍顯複雜，由於咱們須要手動更新WordPress後臺的代碼。可是沒必要擔憂，在整個操做過程當中我不會使用任何的開發工具，全部的操做都在瀏覽器中完成。瀏覽器

請配合視頻閱讀本文

微軟Visual Studio Online在線編輯器

爲了可以完成WordPress多語言模式的升級，咱們須要對WordPress後臺的代碼文件進行簡單修改。通常來講，對網站後臺文件進行修改須要通過下載－更新－上傳的過程，可是藉助微軟Azure雲計算中集成的Visual Studio Online的在線編輯器，咱們能夠輕鬆的使用瀏覽器完成全部操做。服務器

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

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

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

圖：在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的演示視頻：

注：這段視頻中使用的一個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，每週推送內容，有技術也有生活，一塊兒作個有情懷的程序猿。

圖片：掃一掃微信訂閱號，和你一塊兒作一個有情懷的程序猿。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程