超詳細(xì)10000+字的外貿(mào)建站教程，圖文、視頻兼?zhèn)洹３?a target="_blank">域名和主機(jī)，WordPress主題、插件通通是免費(fèi)版，零經(jīng)驗(yàn)的你也能建個(gè)靠譜的外貿(mào)網(wǎng)站，只要肯花點(diǎn)時(shí)間照著步驟做就能行，我選用了大牌的Astra主題，速度快、質(zhì)量有保證，配套的功能插件也都是選擇了用戶多、評(píng)價(jià)好的插件，對(duì)起步階段的Soho外貿(mào)人很有幫助~
原文首發(fā)于：https://loyseo.com/create-business-website-with-astra/
本教程的外貿(mào)建站要花多少錢？
域名費(fèi)用：20~30元/首年，次年起50-60元/年
主機(jī)費(fèi)用：400~900/年
主題費(fèi)用：0
插件費(fèi)用：0
教程費(fèi)用：0
建站基礎(chǔ) – 選購域名和主機(jī)
在用Astra主題建外貿(mào)站之前，先按照如下步驟逐一操作，點(diǎn)擊鏈接可以查看對(duì)應(yīng)教程。
購買WordPress托管主機(jī)，在下面兩篇文章中，我只選擇了有服務(wù)器緩存配置的套餐，因?yàn)檫@會(huì)提升網(wǎng)站速度，而網(wǎng)站的速度對(duì)用戶的流失率有很大影響。
Siteground是WordPress官方推薦主機(jī)之一，品牌和用戶規(guī)模比Fastcomet大，兩者的五星好評(píng)都是90%+，但FastComet比Siteground便宜，Siteground的管理工具更易用一些。
具體選誰？看你的預(yù)算啦，我一般選購1-2年，買太久若是主機(jī)表現(xiàn)變差了，也不好退費(fèi)，嫌續(xù)費(fèi)太貴我就給網(wǎng)站換個(gè)主機(jī)ヾ(o′?｀o)?，換新主機(jī)前看下是否提供免費(fèi)搬家服務(wù)或搬家插件哦，通常至少是提供一個(gè)網(wǎng)站免費(fèi)搬家的
值得一提的是，F(xiàn)astComet比Siteground在網(wǎng)站速度評(píng)測時(shí)還略勝一籌。我將我做的外貿(mào)模板站分別放到兩臺(tái)服務(wù)器上，都開啟了CDN以及WP Rocket，然后用Fastorslow分別測試，數(shù)據(jù)如下：
下圖是Fastcomet的Fastorslow評(píng)測數(shù)據(jù)
下圖是Siteground的Fastorslow評(píng)測數(shù)據(jù)
- 買完主機(jī)后，去主機(jī)上安裝WordPress和SSL證書，教程如下
Siteground主機(jī)
WordPress安裝完成后，你可以用賬號(hào)密碼登錄網(wǎng)站后臺(tái)，這里還有登錄網(wǎng)站后臺(tái)的4種方法
安裝完SSL后，還需要檢查下url是否都改為了https，請(qǐng)看：將網(wǎng)站中的http改為https（2種方法）
在網(wǎng)站完成以前，設(shè)置“建議搜索引擎不收錄”。
好啦接下來我們便可以開始安裝Astra主題，開始搗鼓網(wǎng)頁啦
安裝Astra主題免費(fèi)版
Astra主題是知名的輕量主題，也就是說它的體積小、網(wǎng)站打開會(huì)比較快。網(wǎng)站打開速度慢，用戶就都溜了溜了~
1.進(jìn)入WordPress后臺(tái)的Appearance 》themes頁面，點(diǎn)擊Add New按鈕
2.在添加主題頁面中，搜索Astra，找到對(duì)應(yīng)主題后，點(diǎn)擊Install按鈕
3.安裝完astra后，點(diǎn)擊Activate激活主題，接下來我們導(dǎo)入網(wǎng)站模板
相關(guān)教程：如何安裝wordpress主題（3種方法）
Astra免費(fèi)版主題如何一鍵導(dǎo)入網(wǎng)站模板
Astra免費(fèi)版依舊提供了50+套免費(fèi)的網(wǎng)站模板（真良心！），網(wǎng)站模板里會(huì)包含一個(gè)網(wǎng)站常用的必要頁面。
進(jìn)入Appearance 》 Astra option頁面，找到右側(cè)的install importer plugin，點(diǎn)它安裝導(dǎo)入模板的插件
安裝完成后，我們將看到如下界面，讓我們選擇網(wǎng)站模板的頁面編輯器，這里我們選擇Elementor，因?yàn)樗菚r(shí)下最熱門最好用的Wordpress page builder（頁面編輯器）。
接下來我們看到了模板列表，篩選出免費(fèi)的模板列表，請(qǐng)根據(jù)你的喜好選擇模板，我們以下圖中的organic store為講解示例，這是一個(gè)電商的網(wǎng)站模板，我們會(huì)將它改造為B2B的網(wǎng)站。
選中模板后，我們可以去預(yù)覽一下，也可以直接點(diǎn)擊import complete site按鈕導(dǎo)入所有頁面及內(nèi)容
在導(dǎo)入設(shè)置中，默認(rèn)會(huì)自動(dòng)安裝必要的插件，你可以不導(dǎo)入樣式設(shè)置（customizer setting）、widgets（小工具，通常用于側(cè)邊欄）、content（內(nèi)容，譬如文章、產(chǎn)品），但對(duì)新手而言，我的建議是保持默認(rèn)設(shè)置，點(diǎn)擊Import。
若是你想更換模板，為了不引起內(nèi)容混亂，再次導(dǎo)入時(shí)，記得勾選下圖中的delete previously imported site，以便刪除已有模板的內(nèi)容和設(shè)置。
接下來我們靜靜等待網(wǎng)站導(dǎo)入，不要關(guān)閉頁面，導(dǎo)入完成后將看到下圖。
若是導(dǎo)入失敗，系統(tǒng)會(huì)給與原因提示及解決辦法。
若是導(dǎo)入成功，但網(wǎng)站依舊不是模板的樣子，那么請(qǐng)二次導(dǎo)入試一試。
此外，部分服務(wù)器（譬如WPXhosting）因?yàn)榘踩呗栽颍辉试S做導(dǎo)入動(dòng)作，或是導(dǎo)入完成后，依舊還是導(dǎo)入前的老樣子，此時(shí)，你就需要聯(lián)系主機(jī)商的客服來解決了。
導(dǎo)入完成后，我們查看一下網(wǎng)站，大功告成。
由于過多的插件會(huì)影響網(wǎng)站的速度和安全，所以用不上的插件就禁用并刪除掉。見下圖標(biāo)紅的插件：
CartFlows和Woocommerce Cart abandonment recovery插件是隨模板安裝的B2C所需的插件，如果你是制作B2B站點(diǎn)，可以將他們禁用后刪除。
Starter Templates是導(dǎo)入網(wǎng)站模板時(shí)用到的，如果你不需要再導(dǎo)入模板了，也將它禁用并刪除。
設(shè)置網(wǎng)站Logo、Icon、名稱
網(wǎng)站模板導(dǎo)入完成后，我們開始設(shè)置網(wǎng)站的logo、icon（顯示在瀏覽器頁卡中的小圖標(biāo)）、網(wǎng)站名稱（site title）及標(biāo)語（tagline）。
如下圖所示，在appearance 》 astra option頁面中，點(diǎn)擊upload logo進(jìn)入
進(jìn)入后將看到左圖，我們依次：
上傳logo，最好用透明的png格式圖片，不超過20K。
設(shè)置logo的寬度，在圖中我們能看到一個(gè)小電腦圖標(biāo)，點(diǎn)擊它可以切換到平板、手機(jī)設(shè)備上的logo寬度設(shè)置
上傳網(wǎng)站圖標(biāo)，要求正方形512px，5K左右
我們繼續(xù)設(shè)置網(wǎng)站的標(biāo)題和標(biāo)語
網(wǎng)站標(biāo)題一般會(huì)展示在每個(gè)頁面的標(biāo)題中，而tagline一般展示在首頁的頁面標(biāo)題中。
當(dāng)你打開網(wǎng)站，把鼠標(biāo)放在瀏覽器標(biāo)簽頁中時(shí)，就能看到它們，具體如下圖所示。
1是之前上傳的site icon
2是網(wǎng)站名稱（site title）
3是tagline
相關(guān)教程：WordPress安裝后必須要做的10件事
修改導(dǎo)航菜單
相關(guān)教程：如何在WordPress中制作導(dǎo)航菜單（7個(gè)功能點(diǎn)），你可以按照這個(gè)片教程給菜單內(nèi)容進(jìn)行增加、修改、刪除、排序。
去掉菜單中的無用頁面
去掉我們用不上的頁面，譬如下圖中的Account、My account、Cart。
去掉購物車圖標(biāo)
進(jìn)入Appearance 》Customize 》 Header 》 Primary menu頁面中，將last item in menu從woocommerce（購物圖標(biāo)）設(shè)置為seach（搜索圖標(biāo)）。
安裝必要的插件
此時(shí)網(wǎng)站還是缺少不少功能的，譬如詢盤表單、詢盤郵件通知等等，請(qǐng)?jiān)赪ordPress后臺(tái)直接安裝這些免費(fèi)插件，相關(guān)教程：如何安裝wordpress插件（3種方法），安裝完成后記得active激活他們。
Essential Addons for Elementor：Elementor的元素?cái)U(kuò)展包，包含了產(chǎn)品、文章、Ninjaforms表單等元素塊，Astra免費(fèi)版和Elementor免費(fèi)版都不提供這類元素塊，網(wǎng)站模板里是使用Woocommerce簡碼實(shí)現(xiàn)的產(chǎn)品展示，不利于我們?cè)O(shè)置。
Elementor – Header, Footer & Blocks：用它能用Elementor免費(fèi)版制作網(wǎng)站的頁頭、頁腳，這個(gè)插件在導(dǎo)入模板時(shí)已經(jīng)自動(dòng)安裝了
Ninja forms：實(shí)現(xiàn)詢盤表單
Post SMTP：實(shí)現(xiàn)詢盤郵件通知
Custom Product Tabs for WooCommerce：實(shí)現(xiàn)產(chǎn)品頁面詢盤表單標(biāo)簽頁
Code snippets：可安裝功能短代碼，譬如：安裝google analytics跟蹤代碼、更換站點(diǎn)管理員地址
Wordfence：實(shí)現(xiàn)網(wǎng)站安全防護(hù)
WPS Hide Login：自定義網(wǎng)站登錄地址
部分插件此處未提及，在下文中介紹到對(duì)應(yīng)功能，再安裝即可。下文我們會(huì)逐一介紹這些插件的使用教程以及用處。
網(wǎng)站安全防護(hù)
插件安裝完成后，按如下兩篇教程給網(wǎng)站增加安全防護(hù)。
修改聯(lián)系我們頁面
本教程選的模板中缺少了聯(lián)系表單，我們要將它補(bǔ)充完整，請(qǐng)按下面的教程逐步完成操作。
接下來，我們將表單放入到聯(lián)系我們頁面中
在網(wǎng)站all pages頁面中，找到contact頁面，點(diǎn)擊edit with elementor。
在頁面左側(cè)的工具欄中，輸入ninja搜索，將圖中標(biāo)記有EA的ninja forms元素塊，左鍵按住拖拽到右側(cè)頁面中的目標(biāo)位置。（如果你沒安裝Essential Addons for Elementor插件，是看不到這個(gè)元素塊的）
然后在左側(cè)選擇之前制作的表單，Ninja forms元素塊在Elementor中編輯時(shí)會(huì)出現(xiàn)一直在加載的情況，我目前也還沒找到解決方案，但實(shí)際他在前臺(tái)是能夠正常顯示的，所以此問題暫時(shí)擱置。
我們點(diǎn)擊頁面左下角的update的發(fā)布頁面，并預(yù)覽它，如下圖所示，表單已經(jīng)成功顯示。
我們接下要修改表單的樣式，譬如：隱藏表單標(biāo)題，修改字段標(biāo)題的粗細(xì)，修改輸入框內(nèi)部的顏色、修改提交按鈕的樣式。
表單樣式修改完之后是下圖所示效果，接下來我們逐一操作。
隱藏Ninjaforms表格標(biāo)題
我們依舊還在Elementor編輯聯(lián)系我們頁面中，左鍵點(diǎn)選剛才在頁面中添加的ninja froms表單，如下圖所示，在左側(cè)的工具欄中，將Title開關(guān)關(guān)閉，保存一下頁面去預(yù)覽一下標(biāo)題是否隱藏成功，如果失敗，那么繼續(xù)下一步。
去編輯這個(gè)Ninja forms，在Advanced – display settings中，將display form title關(guān)閉，保存表單后，再去預(yù)覽聯(lián)系我們頁面，標(biāo)題會(huì)成功隱藏。
隱藏Ninjaforms表單的標(biāo)*字段必填的提示文案
在表單標(biāo)題的下方有一段話：“Fields marked with an * are required”，這個(gè)可以說是常識(shí)了，無需贅述，所以我們將這段話隱藏，需要用到自定義CSS功能。
1.進(jìn)入appearance 》 customize頁面
2.點(diǎn)擊底部的additional css
3.添加如下代碼后，點(diǎn)擊右上角的publish按鈕即可。
.nf-form-fields-required {
display: none;
}
調(diào)整Ninjaforms字段輸入框的填充顏色
接著用Elementor編輯聯(lián)系我們頁面的Ninja forms元素，在左側(cè)工具欄的Style中，找到input & textarea，將background color設(shè)置為白色#ffffff，這樣輸入框內(nèi)的填充顏色就變成了白色。
調(diào)整Ninjaforms字段標(biāo)題的粗細(xì)
繼續(xù)，在Style標(biāo)簽頁中，找到Lables設(shè)置字段標(biāo)題的字體粗細(xì)（weight）為400，原來的字體比較粗，改為400會(huì)細(xì)一些。
調(diào)整Ninjaforms提交按鈕的樣式
繼續(xù)，在Style標(biāo)簽頁中，找到submit button按鈕，開始設(shè)置
將寬度（width）設(shè)置為全寬，也就是寬度會(huì)鋪滿。
在normal狀態(tài)下，將background color設(shè)置為你想要的顏色
繼續(xù)選擇hover標(biāo)簽，設(shè)置鼠標(biāo)懸停于按鈕時(shí)的文本顏色（text color）與按鈕背景顏色（background color）
此時(shí)，樣式修改已完成，我們預(yù)覽一下頁面，由于預(yù)覽時(shí)是在管理員已登錄狀態(tài)下查看到的樣子，并不是用戶真正看到的樣子，我們還需要更換一個(gè)瀏覽器或無痕狀態(tài)下去查看網(wǎng)頁是否如意，結(jié)果我便發(fā)現(xiàn)按鈕的異常，在管理員預(yù)覽模式下是正常的，而換個(gè)瀏覽器時(shí)，按鈕就變成了圓角，并且不是全寬。（如下圖所示）
于是，我又重新修改了一下按鈕的設(shè)置，如下圖所示，改完后保存、換個(gè)未登陸后臺(tái)的瀏覽器查看，一切正常了。
將width改為custom，100%
將border radius（按鈕的角半徑）改為0，這下就會(huì)變成直角。
添加博客頁面
這套網(wǎng)站模板缺少了博客頁面，博客頁面可以用于發(fā)布產(chǎn)品相關(guān)的知識(shí)文章、公司動(dòng)態(tài)等，如果不想寫博客，emm，那網(wǎng)站收獲詢盤的可能性就低了許多，你看我們平常買一些大件，也會(huì)多方看評(píng)測、知識(shí)型文章，而這些文章就在潛移默化中決定著我們的購買意愿。
接下來進(jìn)入具體操作，提供兩種解決方案，一種是用Elementor制作博客頁面，這種方法復(fù)雜一些，不過能學(xué)到元素的使用方法；另一種是用主題自帶的博客列表模板，這種方法簡單，這兩種方法你都看一下，因?yàn)樵诘诙N方法里介紹了博客詳情頁的顯示項(xiàng)與側(cè)邊欄的配置。
用Elementor制作博客頁面
在后臺(tái)，找到菜單pages》add new，點(diǎn)擊進(jìn)入
輸入頁面標(biāo)題Blog，點(diǎn)擊Edit with elementor
為了保持設(shè)計(jì)的一致性，我們從about us頁面復(fù)制標(biāo)題模塊到Blog中
請(qǐng)使用Elementor編輯about us頁面，如下圖所示，郵件點(diǎn)選模塊，再點(diǎn)擊copy復(fù)制標(biāo)題模塊
然后回到博客頁面右鍵粘貼這個(gè)模塊，復(fù)制完成后，我們發(fā)現(xiàn)跟about頁面不一樣，用elementor編輯about頁面時(shí)，頂部未顯示導(dǎo)航，因?yàn)閍bout頁面設(shè)置的是透明導(dǎo)航，我們也將blog頁面同樣設(shè)置一下。
進(jìn)入后臺(tái)的all pages頁面，找到blog，點(diǎn)擊Edit。
在右下角找到transparent header設(shè)置，選擇Enabled，然后update頁面即可。
接下來繼續(xù)用Elementor編輯Blog頁面，你可以保存后刷新一下頁面，頂部的導(dǎo)航將消失，這表示透明導(dǎo)航生效了。
先修改一下標(biāo)題，改為Blog，左鍵點(diǎn)選元素后，在左側(cè)工具欄中將出現(xiàn)這個(gè)元素的設(shè)置項(xiàng)，如下圖所示。
然后我們向頁面中添加文章元素塊，在左側(cè)元素欄中，點(diǎn)擊右上方的九宮格就能回到元素選擇面板，輸入post搜索，找到標(biāo)記有EA的post grid元素，左鍵點(diǎn)選并拖拽它到右側(cè)頁面中。
如下圖所示，目前只能看到一篇博客文章，這是因?yàn)樵蹅冞€沒添加文章呢，你可以按照教程《如何在WordPress中發(fā)布和管理文章？》去添加一篇測試用的示例文章，文章要包含封面圖片、摘要、分類、標(biāo)簽、正文，然后在文章列表中用EA Duplicator快速復(fù)制幾篇文章。
在上圖中箭頭指向位置，是每頁文章數(shù)量，默認(rèn)是4，有點(diǎn)少，可以改為8。
下圖是我快速復(fù)制制作的9篇文章。
然后我們繼續(xù)用Elementor編輯Blog頁面，刷新一下頁面獲取這9篇文章數(shù)據(jù)。
如下圖所示，這個(gè)文章元素有很多的配置項(xiàng)，我在下圖中用數(shù)字標(biāo)注了常用配置項(xiàng)的對(duì)應(yīng)關(guān)系。
如果你要改文章日期的格式，你要在WordPress后臺(tái)設(shè)置。
astra tutorial
我把作者頭像與名字都隱藏起來了，然后將日期挪到了標(biāo)題下方，同時(shí)顯示了文章的分類（在鼠標(biāo)懸停于圖片時(shí)才會(huì)顯示分類），如下圖所示。
你可以嘗試一下每個(gè)配置的功能，其中若看到配置項(xiàng)名稱右側(cè)顯示了電腦圖標(biāo)，說明它可以在不同設(shè)備上選擇不同的設(shè)置，這是為了讓網(wǎng)站能夠靈活的適應(yīng)電腦、平板、手機(jī)設(shè)備，也就是響應(yīng)式設(shè)計(jì)。
最后我們調(diào)整一下文章元素塊的上下間距，在元素的advanced標(biāo)簽頁設(shè)置margin top和bottom的數(shù)值，如下圖所示，記得鎖鏈圖標(biāo)要解鎖，不然margin的每個(gè)值都是同一數(shù)值。
最終，你會(huì)得到下圖這樣的博客頁面。
相關(guān)教程：
用Astra默認(rèn)的博客頁面
免費(fèi)版的Astra也提供了基礎(chǔ)的博客頁面設(shè)置功能的
在后臺(tái)，找到菜單pages》add new，點(diǎn)擊進(jìn)入
輸入頁面標(biāo)題Blog，然后直接發(fā)布保存
進(jìn)入Setting》reading頁面，設(shè)置posts page為剛才添加的blog頁面（如下圖所示），然后保存即可。
接下來我們?nèi)ピO(shè)置一下博客頁面，從appearance》astra options頁面的blog layouts進(jìn)入
進(jìn)入后，我們能看到兩個(gè)選項(xiàng)，1.用于設(shè)置博客頁面和文章歸檔頁面的；2.用于設(shè)置博客詳情頁面。
這是博客頁面的設(shè)置，請(qǐng)按圖配好，圖中的眼睛是內(nèi)容顯示的開關(guān)，也可以拖拽內(nèi)容進(jìn)行排序
這是博客詳情頁的配置，設(shè)置完成后記得點(diǎn)擊右上角的publish按鈕保存。
接下來我們?cè)偃ピO(shè)置一下博客頁面和博客詳情頁面的側(cè)邊欄，側(cè)邊欄一般放博客的分類、搜索框、最新博客文章等等，方便用戶使用。
我們依舊在appearance》customize頁面，找到sidebar，點(diǎn)擊進(jìn)入，在Blog posts和archives欄，都選擇Right sidebar，這表示側(cè)邊欄將展示在頁面右側(cè)。然后點(diǎn)擊publish保存。
然后我們?nèi)ピO(shè)置sidebar的內(nèi)容，在appearance》widget中找到main sidebar，如下圖所示，我們能看到里頭有search（搜索）、recent post（最新文章）等內(nèi)容了，你可以點(diǎn)擊內(nèi)容右側(cè)的三角箭頭展開查看，對(duì)不必要的內(nèi)容進(jìn)行delete刪除。
譬如Meta通常是不必要的，里頭會(huì)放置網(wǎng)站的登錄地址等功能入口。一般情況下，要保留的內(nèi)容是搜索、分類、最新文章，是否保留最新評(píng)論，看你的需求，譬如你的網(wǎng)站沒開放評(píng)論，那么也就不必要放這個(gè)模塊了。
你還可以對(duì)側(cè)邊欄的內(nèi)容進(jìn)行拖拽排序。
我們還需要設(shè)置一下博客頁面的面包屑，這是SEO的基礎(chǔ)技術(shù)之一。
還是在appearance》customize頁面，找到breadcrumb，點(diǎn)擊進(jìn)入，如下圖所示設(shè)置位置和不需要展示面包屑的頁面。
astra tutorial
然后我們來看下博客頁面和博客詳情頁的樣子。
博客（列表）頁面
博客詳情頁面
記得將博客頁面添加到網(wǎng)站菜單中哦~
修改產(chǎn)品頁面
給產(chǎn)品頁面添加側(cè)邊欄
這個(gè)模板本身已經(jīng)提供了產(chǎn)品列表和產(chǎn)品詳情頁，我們先參照博客側(cè)邊欄的配置方法，給產(chǎn)品列表頁與產(chǎn)品詳情頁添加右側(cè)側(cè)邊欄。
我們依舊在appearance》customize頁面，找到sidebar，點(diǎn)擊進(jìn)入，如下圖所示，將woocommerce和single product設(shè)置right sidebar，點(diǎn)擊右上角publish保存。
然后我們?nèi)ピO(shè)置sidebar的內(nèi)容，如下圖所示，在appearance》widget中找到woocommerce sidebar和product sidebar，目前能看到里頭沒有任何內(nèi)容
我們?cè)陧撁孀髠?cè)的available widgets中找到產(chǎn)品相關(guān)的小工具（widget），將它添加進(jìn)去就可以了。如下圖所示，點(diǎn)擊小工具的右側(cè)三角箭頭，在下拉選項(xiàng)中找到woocommerce sidebar或product sidebar，點(diǎn)選中它，然后點(diǎn)擊add widget，即可將這個(gè)小工具添加到對(duì)應(yīng)的側(cè)邊欄中。
下圖是我加完小工具的側(cè)邊欄，分別是產(chǎn)品搜索、產(chǎn)品類目、產(chǎn)品標(biāo)簽。
隱藏產(chǎn)品的價(jià)格和加入購物車按鈕
作為B2B外貿(mào)網(wǎng)站，是不需要展示價(jià)格和加入購物車按鈕的，我們只需要在發(fā)布產(chǎn)品時(shí)不填寫價(jià)格即可，這樣加入購物車按鈕也不會(huì)出現(xiàn)。
給產(chǎn)品頁面添加詢盤表單標(biāo)簽頁
目前產(chǎn)品頁面沒有詢盤聯(lián)系表單，我們需要借助插件Custom Product Tabs for WooCommerce，先用它添加一個(gè)標(biāo)簽頁，放入之前在Ninja forms制作的聯(lián)系表單的短代碼（shortcode），然后在添加產(chǎn)品時(shí)加入這個(gè)標(biāo)簽頁即可，具體操作步驟如下：
1.在網(wǎng)站后臺(tái)找到custom product tabs菜單，進(jìn)入后點(diǎn)擊add tab
如下圖所示，依次輸入標(biāo)題、名稱，然后切換內(nèi)容框到text模式，從ninja forms的dashboard頁面獲取表單的shortcode，黏貼到tab content中，最后點(diǎn)擊save tab即可。
然后我們?nèi)ゾ庉嬕粋€(gè)示例的產(chǎn)品，給它添加這個(gè)詢盤標(biāo)簽頁。
進(jìn)入網(wǎng)站后臺(tái)，在all products頁面任意選一個(gè)產(chǎn)品，點(diǎn)擊edit按鈕進(jìn)入編輯
在編輯產(chǎn)品頁面時(shí)，滾動(dòng)頁面到下圖所示位置，進(jìn)入custom tabs標(biāo)簽頁，點(diǎn)擊add a saved tab
然后選擇剛才添加的標(biāo)簽頁即可。
如下圖所示，標(biāo)簽頁已經(jīng)成功加到這個(gè)產(chǎn)品里了，我們?cè)陧撁嬗疑戏秸业絬pdate按鈕，點(diǎn)它發(fā)布產(chǎn)品。
然后我們查看一下這個(gè)產(chǎn)品，能看到Enquiry詢盤標(biāo)簽頁已經(jīng)成功加入了。
emm(??ˇ?ˇ??)這個(gè)插件的免費(fèi)版只能一個(gè)個(gè)給產(chǎn)品添加詢盤標(biāo)簽頁，但咱們可以用復(fù)制產(chǎn)品功能省點(diǎn)力氣，所以不買付費(fèi)版也是可以的，既然走免費(fèi)這條路子，那就貫徹到底吧，如果想便利一些，那不如買個(gè)Elementor Pro，能夠自定義產(chǎn)品頁模板，靈活度更高，當(dāng)然學(xué)習(xí)難度也比較大一些。
去掉產(chǎn)品列表頁面的多余面包屑
由于上文中開啟了astra主題的面包屑功能，但是它不能配置產(chǎn)品列表頁面是否展示面包屑，如下圖所示，出現(xiàn)了兩個(gè)面包屑，于是我們用短代碼的方式，將woocommerce自帶的面包屑去掉。
有個(gè)隱藏問題：頁面標(biāo)題與導(dǎo)航上的標(biāo)題不一樣啊！
此時(shí)我們要用到code snippets插件，請(qǐng)先學(xué)習(xí)一下如何添加短代碼，然后添加一個(gè)新的短代碼去掉woocommerce產(chǎn)品列表頁自帶的面包屑，代碼內(nèi)容如下：
/**
* Remove the breadcrumbs
*/
add\_action( 'init', 'woo\_remove\_wc\_breadcrumbs' );
function woo\_remove\_wc_breadcrumbs() {
remove\_action( 'woocommerce\_before\_main\_content', 'woocommerce_breadcrumb', 20, 0 );
}
去掉產(chǎn)品詳情頁面的多余面包屑
產(chǎn)品詳情頁也多了一個(gè)面包屑，但這個(gè)可以在后臺(tái)配置，不需要添加短代碼。
進(jìn)入后臺(tái)appearance 》customize，然后按照下圖所示操作，進(jìn)入woocommerce》 single product，選中disable breadcrumb，點(diǎn)擊publish保存即可。
修改產(chǎn)品首頁的標(biāo)題和Slug
上文提到的隱藏問題：產(chǎn)品首頁的頁面標(biāo)題和導(dǎo)航菜單里的標(biāo)題不一樣，那是因?yàn)樵谠O(shè)置菜單時(shí)，是可以修改標(biāo)題的；但頁面實(shí)際名稱還是Shop。
我們進(jìn)入all pages頁面，找到shop頁面，點(diǎn)擊其下方的quick edit，可以快速修改頁面的標(biāo)題以及slug，都改為Products吧，保持一致。注：slug，你可以當(dāng)做是url。
至此，一個(gè)滿足常規(guī)使用的產(chǎn)品頁面就完工啦，包括產(chǎn)品列表頁、產(chǎn)品詳情頁。
產(chǎn)品列表頁
產(chǎn)品詳情頁
細(xì)心的你可能發(fā)現(xiàn)我的頁面上是有product tags，而你那兒可能沒有，那你去修改一下幾個(gè)產(chǎn)品，在快速編輯或者編輯產(chǎn)品頁面的右側(cè)都能找到標(biāo)簽。
添加、編輯產(chǎn)品等產(chǎn)品管理功能
添加產(chǎn)品功能與添加博客文章的功能是類似的，我就不寫圖文教程了，附一個(gè)視頻教程吧。
<iframe frameborder="0" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=t315323dr96" allowfullscreen="true"></iframe>
修改頁面內(nèi)容
請(qǐng)進(jìn)入后臺(tái)的all pages頁面，如下圖所示的情況，帶有elementor標(biāo)記的，都可以用elementor編輯頁面，也就是能夠可視化編輯頁面內(nèi)容。
用Elementor編輯頁面的方法：點(diǎn)選要修改的內(nèi)容，然后在左側(cè)工具欄中設(shè)置內(nèi)容、樣式以及高級(jí)配置。我們依舊用一個(gè)視頻來講解頁面內(nèi)容編輯功能，視頻中的模板與本文中的模板不一樣，但方法是一樣的。
<iframe frameborder="0" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=l3153330m0n" allowfullscreen="true"></iframe>
你還可以看下方的Elementor編輯器的教程，了解更多細(xì)致的操作。
查看更多Elementor教程，其中有部分教程是針對(duì)Elementor Pro的，若是在使用免費(fèi)版的Elementor時(shí)提示你升級(jí)Pro或未顯示視頻中的操作的功能，就表示是Elementor Pro的功能，需要付費(fèi)購買。
編輯頁腳
Astra的這套模板的頁腳是用插件Elementor – Header, Footer & Blocks制作的，頁頭是用的Astra本身自帶的功能。頁腳的編輯方法與頁面編輯方法無差異，詳見下方視頻。
<iframe frameborder="0" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=w315397ymqt" allowfullscreen="true"></iframe>
給網(wǎng)站添加返回頂部按鈕
在免費(fèi)版的Astra里是不提供頁面上的返回頂部按鈕的，有如下兩種方法：
用Elementor制作WordPress網(wǎng)站的返回頂部按鈕（3分鐘解決），這個(gè)方法比下面的方法復(fù)雜一些， 但可以少裝一個(gè)插件。
安裝插件：WPFront Scroll Top，然后如下圖所示enabled啟用即可，你還可以自行配置按鈕的樣式。
網(wǎng)站內(nèi)容發(fā)布要點(diǎn)
至此，頁面修改就差不多告一段落了，接下來就是往網(wǎng)站上發(fā)產(chǎn)品、發(fā)博客，這些內(nèi)容的發(fā)布有一些注意事項(xiàng)，我在另一篇基于Elementor Pro的建站教程中有詳細(xì)的描述，請(qǐng)點(diǎn)擊《B2B外貿(mào)建站教程》前往查看。
站內(nèi)SEO
請(qǐng)按照如下教程逐步操作
站點(diǎn)速度優(yōu)化
我們需要用工具Gtmetrix測試站點(diǎn)的速度，并進(jìn)行速度優(yōu)化，盡量優(yōu)化到加載時(shí)間在3S以內(nèi)，優(yōu)化教程請(qǐng)按如下子教程逐一實(shí)施
優(yōu)化圖片，在上文中已經(jīng)介紹了圖片的優(yōu)化辦法，此教程中做了一些補(bǔ)充擴(kuò)展
針對(duì)使用Siteground建站的情況，可以使用SG Optimizer加速網(wǎng)站，我實(shí)測后，發(fā)現(xiàn)效果不理想（優(yōu)化前后差距很小），我覺著最好用易用的還是付費(fèi)使用WP Rocket加速網(wǎng)站，如果你不想購買這個(gè)插件，也可以微信聯(lián)系我獲取正版分享。
實(shí)施CDN，每個(gè)主機(jī)的CDN不盡相同，大多用的是免費(fèi)的Cloudflare。
如果在Sitegroun建站，請(qǐng)看：在Siteground給網(wǎng)站啟用Cloudflare CDN
如果你的主機(jī)用的是Cpanel主機(jī)面板，譬如FastComet，可以參考這篇文章：如何在GreenGeeks給網(wǎng)站開啟Cloudflare CDN，如果開啟過程中遇到問題，咨詢主機(jī)客服即可。
開放收錄，站點(diǎn)上線
完成上述內(nèi)容后，站點(diǎn)可上線，開放收錄吧、
進(jìn)入設(shè)置》閱讀（setting》reading），將建議搜索引擎不索引本站點(diǎn)去掉勾選，保存更改
然后進(jìn)入Google Search Console，提交站點(diǎn)地圖地址以助于加快收錄。
本文原文由LOYSEO 發(fā)布，LOYSEO專注于WordPress、Elementor、外貿(mào)建站教程。
推薦閱讀
2020年B2B外貿(mào)建站的終極教程
2020年外貿(mào)建站需要注意什么？（4300字經(jīng)驗(yàn)談）
