【2020年7月新】WordPress Elementor WPML 仿多語(yǔ)言企業(yè)站點(diǎn)超詳細(xì)教程

時(shí)間：2023-04-23 23:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-23 23:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【2020年7月新】WordPress Elementor WPML 仿多語(yǔ)言企業(yè)站點(diǎn)超詳細(xì)教程：

這段時(shí)間用WordPress + Elementor + WPML 仿了一個(gè)多語(yǔ)言企業(yè)站。

下面這張圖就是要仿的站點(diǎn)：https://www.micro-mechanics.com/

最后仿站呈現(xiàn)的效果：http://www.sz-accurate.com.cn/

下面就介紹一下整個(gè)過(guò)程：

1. 基礎(chǔ)環(huán)境安裝（寶塔）
2. WordPress安裝（一鍵部署）
3. 插件安裝
4. 網(wǎng)站內(nèi)容上傳（Elementor）
5. 多語(yǔ)言部署（WPML）
6. 切換域名上線，優(yōu)化加速

1、基礎(chǔ)環(huán)境安裝（寶塔）

服務(wù)器已經(jīng)準(zhǔn)備Centos，直接SSH root登錄即可

如果你是他服務(wù)器，請(qǐng)查看 寶塔linux面板，一鍵安裝LAMP/LNMP/SSL/Tomcat

登錄后下面的命令進(jìn)行寶塔安裝

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh安裝過(guò)程大概2min左右吧，等待就好，安裝成功之后會(huì)顯示如下界面：

接下來(lái)確認(rèn)一下端口的開(kāi)放，寶塔后臺(tái)面板的默認(rèn)端口是8888，需要開(kāi)放改端口。

登錄寶塔面板

同意用戶(hù)協(xié)議

根據(jù)提示，一鍵安裝推薦的LNMP

安裝需要時(shí)間，耐心等待即可

安裝完成后會(huì)提示你修改默認(rèn)端口

這里建議在SSH中安裝，執(zhí)行下面的命令，強(qiáng)制修改默認(rèn)端口，并重啟面板，我這里改的8882端口（同時(shí)服務(wù)器防火墻要確認(rèn)已開(kāi)放該端口）

echo '8882' > /www/server/panel/data/port.pl && /etc/init.d/bt restart如果修改端口發(fā)現(xiàn)無(wú)法登錄，執(zhí)行下面的命令

iptables -I INPUT -p tcp -m state --state NEW -m tcp --dport 8882 -j ACCEPT重啟一下寶塔面板

/etc/init.d/bt restart至此，寶塔環(huán)境已經(jīng)安裝完成。

（記得查看一下PHP版本，如果是5的版本最好升級(jí)到7）

2、一鍵部署WordPress

到寶塔的軟件應(yīng)用商店，搜索WordPress，點(diǎn)擊一鍵部署

一鍵部署很快就會(huì)部署好，記錄下這里提示的的數(shù)據(jù)庫(kù)信息，后邊注冊(cè)WordPress的時(shí)候需要用到。

點(diǎn)擊訪問(wèn)站點(diǎn)后面的連接訪問(wèn)，這里連接也可以直接用IP地址，在網(wǎng)站完成之后進(jìn)行域名的切換。點(diǎn)擊開(kāi)始安裝。

輸入剛剛記錄的數(shù)據(jù)庫(kù)信息

沒(méi)有報(bào)錯(cuò)，繼續(xù)

輸入網(wǎng)站基礎(chǔ)信息，隨便填，后面可以改，但要記住用戶(hù)名密碼。

成功，登錄WordPress網(wǎng)站。

到這里WordPress安裝已經(jīng)完成

3、插件安裝

網(wǎng)站用到的查看清單如下，想起的功能及費(fèi)用我整理表格，在圖片下方。

付費(fèi)插件我基本都是上傳安裝，免費(fèi)插件直接在線安裝即可。

插件功能清單

4、Elementor 搭建模板和頁(yè)面

1）模板搭建

我用Elementor的Theme Builder功能創(chuàng)建了如下模板：

• 新聞列表--single：新聞詳情頁(yè)模板
• 新聞列表--archive：這個(gè)不需要，我這里沒(méi)有刪除
• 產(chǎn)品列表--archive：產(chǎn)品列表詳情頁(yè)
• 搜素--archive：搜索頁(yè)模板
• Product--single：產(chǎn)品詳情頁(yè)模板
• Footer--Footer：頁(yè)腳模板
• Header--Hearder：頁(yè)頭模板

以上的模板是整站套用的，類(lèi)似自定義了一個(gè)主題。

PS：在保存模板的時(shí)候一定要選擇模板應(yīng)用，如下圖，新聞詳情頁(yè)模板就要選擇應(yīng)用到所有的新聞分類(lèi)下的文章。




2）頁(yè)面搭建

頁(yè)面就直接新建，寫(xiě)好標(biāo)題后，使用Elementor編輯即可。




3）產(chǎn)品上傳

由于產(chǎn)品內(nèi)容不多以圖文為主，我在這里用文章來(lái)更新產(chǎn)品，只需要在文章分了下面新建一個(gè)產(chǎn)品分類(lèi)，然后把所有產(chǎn)品信息都更新到這個(gè)分類(lèi)下即可。

更新好產(chǎn)品后，在產(chǎn)品中心頁(yè)面的Elementor編輯添加元素【post】元素，設(shè)置layout展示樣式，提示一下這里需要在query中設(shè)置一下分類(lèi)，不然新聞也會(huì)被展示出來(lái)。

4）新聞上傳

新聞的上傳方法同產(chǎn)品，在新聞中心頁(yè)面的Elementor編輯添加元素【post】元素，在query中設(shè)置一下分類(lèi)，選擇新聞這個(gè)分類(lèi)即可。

5）菜單制作

網(wǎng)站制作了4個(gè)菜單，一個(gè)主菜單，一個(gè)頁(yè)腳菜單，還有產(chǎn)品側(cè)邊和頁(yè)面?zhèn)冗叢藛巍Ｔ诓藛巫髠?cè)選的對(duì)應(yīng)的內(nèi)容添加到菜單，然后拖拽順序即可。

制作好菜單后，我們?cè)谀０逯刑砑痈牟藛渭纯桑肏eader舉例：

添加一個(gè)Nav Menu元素，在menu中選擇對(duì)應(yīng)的菜單即可。

5、多語(yǔ)言部署（WPML）

多語(yǔ)言的插件安裝了2個(gè)

• WPML Multilingual CMS 多語(yǔ)言主插件實(shí)現(xiàn)多語(yǔ)言站點(diǎn)
• WPML String Translation 字符串翻譯插件，實(shí)現(xiàn)Elementor的內(nèi)容模板翻譯，如果不安裝這個(gè)插件，Elementor的模板無(wú)法被翻譯。

1）配置多語(yǔ)言環(huán)境

網(wǎng)站主語(yǔ)言為中文，在WPML的語(yǔ)言中添加一個(gè)中文語(yǔ)言

不同語(yǔ)言采用不同的目錄

語(yǔ)言切換器選項(xiàng)設(shè)置，缺少翻譯就跳轉(zhuǎn)到首頁(yè)，這樣，我們?cè)谀硞€(gè)頁(yè)面點(diǎn)擊語(yǔ)言切換器的時(shí)候，切換的語(yǔ)言沒(méi)有該同樣的頁(yè)面，就會(huì)自動(dòng)跳轉(zhuǎn)到切換的語(yǔ)言首頁(yè)。

在Header模板中添加語(yǔ)言切換器，我這里使用簡(jiǎn)碼來(lái)添加，拖一個(gè)簡(jiǎn)碼元素到Header模板中，并將[wpml_language_selector_widget]粘貼到文本框中，保存Header模板。

2)為頁(yè)面和模板添加翻譯

在后臺(tái)頁(yè)面列表中點(diǎn)擊“+”翻譯頁(yè)面。

按照需要翻譯的內(nèi)容逐條翻譯，翻譯完成每項(xiàng)下面的勾勾上，幫助檢查翻譯進(jìn)度。

完成后點(diǎn)擊保存退出，切換頂部的語(yǔ)言，可以看到英文下會(huì)有對(duì)應(yīng)語(yǔ)言頁(yè)面。

4）文章及產(chǎn)品的翻譯

文章和產(chǎn)品翻譯，操作和頁(yè)面一樣，還是在后臺(tái)的文章列表，點(diǎn)擊語(yǔ)言+好添加對(duì)應(yīng)的語(yǔ)言，這個(gè)站點(diǎn)英文站沒(méi)有新聞，中英文產(chǎn)品也不一樣，就沒(méi)有做翻譯。

英文的產(chǎn)品直接切換到英文下，進(jìn)行更新錄入的。




4）菜單翻譯

在后臺(tái)外觀-菜單中選擇對(duì)應(yīng)的菜單，點(diǎn)擊右上角的語(yǔ)言+號(hào)，添加這個(gè)菜單的翻譯。

點(diǎn)擊之后會(huì)切換到英文，這時(shí)候?yàn)檫@個(gè)菜單添加選項(xiàng)即可，還是從左側(cè)進(jìn)行添加，完成之后點(diǎn)擊發(fā)布。

6、切換域名上線，網(wǎng)站優(yōu)化加速

首先需要確認(rèn)切換域名已經(jīng)做好解析，指向當(dāng)前網(wǎng)站服務(wù)器IP地址了。不然做了切換也無(wú)法訪問(wèn)。

可以通ping這個(gè)域名來(lái)確認(rèn)一下。

1)切換域名

登錄寶塔面板，打開(kāi)站點(diǎn)管理，新建站點(diǎn)，按照下圖提示填寫(xiě)，提交。

提交之后站點(diǎn)管理中會(huì)出現(xiàn)2個(gè)站點(diǎn)，都能訪問(wèn)到網(wǎng)站，清楚一下瀏覽器緩存，用心的域名訪問(wèn)站點(diǎn)。并嘗試登錄后臺(tái)。

如果發(fā)現(xiàn)無(wú)法登錄后臺(tái)，有可能是修改域名數(shù)據(jù)中還是老域名，這時(shí)候2個(gè)方法解決：

一、用老域名登錄網(wǎng)站后臺(tái)，在設(shè)置-常規(guī)中修改域名為新的域名URL，點(diǎn)擊提交。

二、直接修改數(shù)據(jù)庫(kù)

寶塔面板的數(shù)據(jù)庫(kù)管理，進(jìn)入phpMyAdmin，數(shù)據(jù)庫(kù)管理面板

找到對(duì)應(yīng)的數(shù)據(jù)庫(kù)下面的數(shù)據(jù)表 wp_options 修改表中 siteurl和home字段值，修改成新域名的URL。

修改之后，重新訪問(wèn)后臺(tái)，可以直接進(jìn)入。

進(jìn)入之后需要在Elementor的【工具】選項(xiàng)中更新一下CSS樣式，以防部分內(nèi)容因?yàn)榍袚Q域名而加載不到。

2)優(yōu)化加速

一、圖片壓縮（免費(fèi)插件）

圖片大小會(huì)影響網(wǎng)站的加載速度，我們除了在上傳到網(wǎng)站之前需要進(jìn)行壓縮，使圖片維持在200KB一下的標(biāo)準(zhǔn)，整體做好之后，可以通過(guò)插件再進(jìn)行一次壓縮。

安裝EWWW Image Optimizer插件，安裝后掃描，對(duì)掃描結(jié)果進(jìn)行批量壓縮即可，壓縮前設(shè)置好你要壓縮的尺寸，有三個(gè)選項(xiàng)可以選擇。

也可以在媒體庫(kù)中對(duì)單個(gè)文件進(jìn)行壓縮。

二、文件壓縮及緩存（付費(fèi)插件rocket）

安裝插件并設(shè)置如下：

緩存設(shè)置

文件優(yōu)化，所有都勾選即可

媒體設(shè)置，根據(jù)自己的需求，我這里沒(méi)有內(nèi)嵌和視頻，所以主要是圖片和emoji勾選。

其他都默認(rèn)就可，設(shè)置好后會(huì)進(jìn)行預(yù)緩存，預(yù)緩存之后建議重新生關(guān)鍵路勁CSS

重新生成CCS之后，在清楚一下緩存即可

至此網(wǎng)站就完成了！







以上內(nèi)容如有侵權(quán)，請(qǐng)及時(shí)聯(lián)系我，我會(huì)盡快處理！