Astra主題免費版建外貿網站教程

時間 2020-11-22

標籤 css web 瀏覽器緩存安全服務器微信 app dom 編輯器欄目網站開發简体版

原文原文鏈接

超詳細10000+字的外貿建站教程，圖文、視頻兼備。除了域名和主機，WordPress主題、插件統統是免費版，零經驗的你也能建個靠譜的外貿網站，只要肯花點時間照着步驟作就能行，我選用了大牌的Astra主題，速度快、質量有保證，配套的功能插件也都是選擇了用戶多、評價好的插件，對起步階段的Soho外貿人頗有幫助~
原文首發於：https://loyseo.com/create-business-website-with-astra/css

本教程的外貿建站要花多少錢？

域名費用：20~30元/首年，次年起50-60元/年web
主機費用：400~900/年瀏覽器
主題費用：0緩存
插件費用：0安全
教程費用：0服務器

建站基礎 – 選購域名和主機

在用Astra主題建外貿站以前，先按照以下步驟逐一操做，點擊連接能夠查看對應教程。微信

註冊域名app
購買WordPress託管主機，在下面兩篇文章中，我只選擇了有服務器緩存配置的套餐，由於這會提高網站速度，而網站的速度對用戶的流失率有很大影響。dom
購買Siteground的WordPress主機的注意事項編輯器
FastComet主機介紹、優惠券、測評

Siteground是WordPress官方推薦主機之一，品牌和用戶規模比Fastcomet大，二者的五星好評都是90%+，但FastComet比Siteground便宜，Siteground的管理工具更易用一些。

具體選誰？看你的預算啦，我通常選購1-2年，買過久如果主機表現變差了，也很差退費，嫌續費太貴我就給網站換個主機ヾ(o´∀｀o)ﾉ，換新主機前看下是否提供免費搬家服務或搬家插件哦，一般至少是提供一個網站免費搬家的

值得一提的是，FastComet比Siteground在網站速度評測時還略勝一籌。我將我作的外貿模板站分別放到兩臺服務器上，都開啓了CDN以及WP Rocket，而後用Fastorslow分別測試，數據以下：

下圖是Fastcomet的Fastorslow評測數據

下圖是Siteground的Fastorslow評測數據

前往Fastcomet

前往Siteground

買完主機後，去主機上安裝WordPress和SSL證書，教程以下
如何在Siteground中建立Wordpress網站
如何在Siteground中給WordPress網站安裝SSL證書
Siteground主機
Fastcomet主機建站教程
WordPress安裝完成後，你能夠用帳號密碼登陸網站後臺，這裏還有登陸網站後臺的4種方法
安裝完SSL後，還須要檢查下url是否都改成了https，請看：將網站中的http改成https（2種方法）
在網站完成之前，設置「建議搜索引擎不收錄」。

好啦_{接下來咱們即可以開始安裝Astra主題，開始搗鼓網頁啦}

安裝Astra主題免費版

Astra主題是知名的輕量主題，也就是說它的體積小、網站打開會比較快。網站打開速度慢，用戶就都溜了溜了~

1.進入WordPress後臺的Appearance 》themes頁面，點擊Add New按鈕

2.在添加主題頁面中，搜索Astra，找到對應主題後，點擊Install按鈕

3.安裝完astra後，點擊Activate激活主題，接下來咱們導入網站模板

相關教程：如何安裝wordpress主題（3種方法）

Astra免費版主題如何一鍵導入網站模板

Astra免費版依舊提供了50+套免費的網站模板（真良心！），網站模板裏會包含一個網站經常使用的必要頁面。

進入Appearance 》 Astra option頁面，找到右側的install importer plugin，點它安裝導入模板的插件

安裝完成後，咱們將看到以下界面，讓咱們選擇網站模板的頁面編輯器，這裏咱們選擇Elementor，由於它是時下最熱門最好用的Wordpress page builder（頁面編輯器）。

接下來咱們看到了模板列表，篩選出免費的模板列表，請根據你的喜愛選擇模板，咱們如下圖中的organic store爲講解示例，這是一個電商的網站模板，咱們會將它改造爲B2B的網站。

選中模板後，咱們能夠去預覽一下，也能夠直接點擊import complete site按鈕導入全部頁面及內容

在導入設置中，默認會自動安裝必要的插件，你能夠不導入樣式設置（customizer setting）、widgets（小工具，一般用於側邊欄）、content（內容，譬如文章、產品），但對新手而言，個人建議是保持默認設置，點擊Import。

如果你想更換模板，爲了避免引發內容混亂，再次導入時，記得勾選下圖中的delete previously imported site，以便刪除已有模板的內容和設置。

接下來咱們靜靜等待網站導入，不要關閉頁面，導入完成後將看到下圖。

如果導入失敗，系統會給與緣由提示及解決辦法。

如果導入成功，但網站依舊不是模板的樣子，那麼請二次導入試一試。

此外，部分服務器（譬如WPXhosting）由於安全策略緣由，不容許作導入動做，或是導入完成後，依舊仍是導入前的老樣子，此時，你就須要聯繫主機商的客服來解決了。

導入完成後，咱們查看一下網站，大功告成。

因爲過多的插件會影響網站的速度和安全，因此用不上的插件就禁用並刪除掉。見下圖標紅的插件：

CartFlows和Woocommerce Cart abandonment recovery插件是隨模板安裝的B2C所需的插件，若是你是製做B2B站點，能夠將他們禁用後刪除。
Starter Templates是導入網站模板時用到的，若是你不須要再導入模板了，也將它禁用並刪除。

設置網站Logo、Icon、名稱

網站模板導入完成後，咱們開始設置網站的logo、icon（顯示在瀏覽器頁卡中的小圖標）、網站名稱（site title）及標語（tagline）。

以下圖所示，在appearance 》 astra option頁面中，點擊upload logo進入

進入後將看到左圖，咱們依次：

上傳logo，最好用透明的png格式圖片，不超過20K。
設置logo的寬度，在圖中咱們能看到一個小電腦圖標，點擊它能夠切換到平板、手機設備上的logo寬度設置
上傳網站圖標，要求正方形512px，5K左右

咱們繼續設置網站的標題和標語

網站標題通常會展現在每一個頁面的標題中，而tagline通常展現在首頁的頁面標題中。

當你打開網站，把鼠標放在瀏覽器標籤頁中時，就能看到它們，具體以下圖所示。

1是以前上傳的site icon
2是網站名稱（site title）
3是tagline

相關教程：WordPress安裝後必需要作的10件事

修改導航菜單

相關教程：如何在WordPress中製做導航菜單（7個功能點），你能夠按照這個片教程給菜單內容進行增長、修改、刪除、排序。

去掉菜單中的無用頁面

去掉咱們用不上的頁面，譬以下圖中的Account、My account、Cart。

去掉購物車圖標

進入Appearance 》Customize 》 Header 》 Primary menu頁面中，將last item in menu從woocommerce（購物圖標）設置爲seach（搜索圖標）。

安裝必要的插件

此時網站仍是缺乏很多功能的，譬如詢盤表單、詢盤郵件通知等等，請在WordPress後臺直接安裝這些免費插件，相關教程：如何安裝wordpress插件（3種方法），安裝完成後記得active激活他們。

Essential Addons for Elementor：Elementor的元素擴展包，包含了產品、文章、Ninjaforms表單等元素塊，Astra免費版和Elementor免費版都不提供這類元素塊，網站模板裏是使用Woocommerce簡碼實現的產品展現，不利於咱們設置。
Elementor – Header, Footer & Blocks：用它能用Elementor免費版製做網站的頁頭、頁腳，這個插件在導入模板時已經自動安裝了
Ninja forms：實現詢盤表單
Post SMTP：實現詢盤郵件通知
Custom Product Tabs for WooCommerce：實現產品頁面詢盤表單標籤頁
Code snippets：可安裝功能短代碼，譬如：安裝google analytics跟蹤代碼、更換站點管理員地址
Wordfence：實現網站安全防禦
WPS Hide Login：自定義網站登陸地址

部分插件此處未說起，在下文中介紹到對應功能，再安裝便可。下文咱們會逐一介紹這些插件的使用教程以及用處。

網站安全防禦

插件安裝完成後，按以下兩篇教程給網站增長安全防禦。

修改聯繫咱們頁面

本教程選的模板中缺乏了聯繫表單，咱們要將它補充完整，請按下面的教程逐步完成操做。

接下來，咱們將表單放入到聯繫咱們頁面中

在網站all pages頁面中，找到contact頁面，點擊edit with elementor。

在頁面左側的工具欄中，輸入ninja搜索，將圖中標記有EA的ninja forms元素塊，左鍵按住拖拽到右側頁面中的目標位置。（若是你沒安裝Essential Addons for Elementor插件，是看不到這個元素塊的）

而後在左側選擇以前製做的表單，Ninja forms元素塊在Elementor中編輯時會出現一直在加載的狀況，我目前也還沒找到解決方案，但實際他在前臺是可以正常顯示的，因此此問題暫時擱置。

咱們點擊頁面左下角的update的發佈頁面，並預覽它，以下圖所示，表單已經成功顯示。

咱們接下要修改表單的樣式，譬如：隱藏表單標題，修改字段標題的粗細，修改輸入框內部的顏色、修改提交按鈕的樣式。

表單樣式修改完以後是下圖所示效果，接下來咱們逐一操做。

隱藏Ninjaforms表格標題

咱們依舊還在Elementor編輯聯繫咱們頁面中，左鍵點選剛纔在頁面中添加的ninja froms表單，以下圖所示，在左側的工具欄中，將Title開關關閉，保存一下頁面去預覽一下標題是否隱藏成功，若是失敗，那麼繼續下一步。

去編輯這個Ninja forms，在Advanced – display settings中，將display form title關閉，保存表單後，再去預覽聯繫咱們頁面，標題會成功隱藏。

隱藏Ninjaforms表單的標*字段必填的提示文案

在表單標題的下方有一段話：「Fields marked with an * are required」，這個能夠說是常識了，無需贅述，因此咱們將這段話隱藏，須要用到自定義CSS功能。

1.進入appearance 》 customize頁面

2.點擊底部的additional css

3.添加以下代碼後，點擊右上角的publish按鈕便可。

.nf-form-fields-required {
  display: none;
}

調整Ninjaforms字段輸入框的填充顏色

接着用Elementor編輯聯繫咱們頁面的Ninja forms元素，在左側工具欄的Style中，找到input & textarea，將background color設置爲白色#ffffff，這樣輸入框內的填充顏色就變成了白色。

調整Ninjaforms字段標題的粗細

繼續，在Style標籤頁中，找到Lables設置字段標題的字體粗細（weight）爲400，原來的字體比較粗，改成400會細一些。

調整Ninjaforms提交按鈕的樣式

繼續，在Style標籤頁中，找到submit button按鈕，開始設置

將寬度（width）設置爲全寬，也就是寬度會鋪滿。
在normal狀態下，將background color設置爲你想要的顏色

繼續選擇hover標籤，設置鼠標懸停於按鈕時的文本顏色（text color）與按鈕背景顏色（background color）

此時，樣式修改已完成，咱們預覽一下頁面，因爲預覽時是在管理員已登陸狀態下查看到的樣子，並非用戶真正看到的樣子，咱們還須要更換一個瀏覽器或無痕狀態下去查看網頁是否如意，結果我便發現按鈕的異常，在管理員預覽模式下是正常的，而換個瀏覽器時，按鈕就變成了圓角，而且不是全寬。（以下圖所示）

因而，我又從新修改了一下按鈕的設置，以下圖所示，改完後保存、換個未登錄後臺的瀏覽器查看，一切正常了。

將width改成custom，100%
將border radius（按鈕的角半徑）改成0，這下就會變成直角。

添加博客頁面

這套網站模板缺乏了博客頁面，博客頁面能夠用於發佈產品相關的知識文章、公司動態等，若是不想寫博客，emm，那網站收穫詢盤的可能性就低了許多，你看咱們日常買一些大件，也會多方看評測、知識型文章，而這些文章就在潛移默化中決定着咱們的購買意願。

接下來進入具體操做，提供兩種解決方案，一種是用Elementor製做博客頁面，這種方法複雜一些，不過能學到元素的使用方法；另外一種是用主題自帶的博客列表模板，這種方法簡單，這兩種方法你都看一下，由於在第二種方法裏介紹了博客詳情頁的顯示項與側邊欄的配置。

用Elementor製做博客頁面

在後臺，找到菜單pages》add new，點擊進入
輸入頁面標題Blog，點擊Edit with elementor

爲了保持設計的一致性，咱們從about us頁面複製標題模塊到Blog中

請使用Elementor編輯about us頁面，以下圖所示，郵件點選模塊，再點擊copy複製標題模塊

而後回到博客頁面右鍵粘貼這個模塊，複製完成後，咱們發現跟about頁面不同，用elementor編輯about頁面時，頂部未顯示導航，由於about頁面設置的是透明導航，咱們也將blog頁面一樣設置一下。

進入後臺的all pages頁面，找到blog，點擊Edit。

在右下角找到transparent header設置，選擇Enabled，而後update頁面便可。

接下來繼續用Elementor編輯Blog頁面，你能夠保存後刷新一下頁面，頂部的導航將消失，這表示透明導航生效了。

先修改一下標題，改成Blog，左鍵點選元素後，在左側工具欄中將出現這個元素的設置項，以下圖所示。

而後咱們向頁面中添加文章元素塊，在左側元素欄中，點擊右上方的九宮格就能回到元素選擇面板，輸入post搜索，找到標記有EA的post grid元素，左鍵點選並拖拽它到右側頁面中。

以下圖所示，目前只能看到一篇博客文章，這是由於我們還沒添加文章呢，你能夠按照教程《如何在WordPress中發佈和管理文章？》去添加一篇測試用的示例文章，文章要包含封面圖片、摘要、分類、標籤、正文，而後在文章列表中用EA Duplicator快速複製幾篇文章。

在上圖中箭頭指向位置，是每頁文章數量，默認是4，有點少，能夠改成8。

下圖是我快速複製製做的9篇文章。

而後咱們繼續用Elementor編輯Blog頁面，刷新一下頁面獲取這9篇文章數據。

以下圖所示，這個文章元素有不少的配置項，我在下圖中用數字標註了經常使用配置項的對應關係。

若是你要改文章日期的格式，你要在WordPress後臺設置。

astra tutorial

我把做者頭像與名字都隱藏起來了，而後將日期挪到了標題下方，同時顯示了文章的分類（在鼠標懸停於圖片時纔會顯示分類），以下圖所示。

你能夠嘗試一下每一個配置的功能，其中若看到配置項名稱右側顯示了電腦圖標，說明它能夠在不一樣設備上選擇不一樣的設置，這是爲了讓網站可以靈活的適應電腦、平板、手機設備，也就是響應式設計。

最後咱們調整一下文章元素塊的上下間距，在元素的advanced標籤頁設置margin top和bottom的數值，以下圖所示，記得鎖鏈圖標要解鎖，否則margin的每一個值都是同一數值。

最終，你會獲得下圖這樣的博客頁面。

相關教程：

用Astra默認的博客頁面

免費版的Astra也提供了基礎的博客頁面設置功能的

在後臺，找到菜單pages》add new，點擊進入
輸入頁面標題Blog，而後直接發佈保存
進入Setting》reading頁面，設置posts page爲剛纔添加的blog頁面（以下圖所示），而後保存便可。

接下來咱們去設置一下博客頁面，從appearance》astra options頁面的blog layouts進入

進入後，咱們能看到兩個選項，1.用於設置博客頁面和文章歸檔頁面的；2.用於設置博客詳情頁面。

這是博客頁面的設置，請按圖配好，圖中的眼睛是內容顯示的開關，也能夠拖拽內容進行排序

這是博客詳情頁的配置，設置完成後記得點擊右上角的publish按鈕保存。

接下來咱們再去設置一下博客頁面和博客詳情頁面的側邊欄，側邊欄通常放博客的分類、搜索框、最新博客文章等等，方便用戶使用。

咱們依舊在appearance》customize頁面，找到sidebar，點擊進入，在Blog posts和archives欄，都選擇Right sidebar，這表示側邊欄將展現在頁面右側。而後點擊publish保存。

而後咱們去設置sidebar的內容，在appearance》widget中找到main sidebar，以下圖所示，咱們能看到裏頭有search（搜索）、recent post（最新文章）等內容了，你能夠點擊內容右側的三角箭頭展開查看，對沒必要要的內容進行delete刪除。

譬如Meta一般是沒必要要的，裏頭會放置網站的登陸地址等功能入口。通常狀況下，要保留的內容是搜索、分類、最新文章，是否保留最新評論，看你的需求，譬如你的網站沒開放評論，那麼也就沒必要要放這個模塊了。

你還能夠對側邊欄的內容進行拖拽排序。

咱們還須要設置一下博客頁面的麪包屑，這是SEO的基礎技術之一。

仍是在appearance》customize頁面，找到breadcrumb，點擊進入，以下圖所示設置位置和不須要展現麪包屑的頁面。

astra tutorial

而後咱們來看下博客頁面和博客詳情頁的樣子。

博客（列表）頁面

博客詳情頁面

記得將博客頁面添加到網站菜單中哦~

修改產品頁面

給產品頁面添加側邊欄

這個模板自己已經提供了產品列表和產品詳情頁，咱們先參照博客側邊欄的配置方法，給產品列表頁與產品詳情頁添加右側側邊欄。

咱們依舊在appearance》customize頁面，找到sidebar，點擊進入，以下圖所示，將woocommerce和single product設置right sidebar，點擊右上角publish保存。

而後咱們去設置sidebar的內容，以下圖所示，在appearance》widget中找到woocommerce sidebar和product sidebar，目前能看到裏頭沒有任何內容

咱們在頁面左側的available widgets中找到產品相關的小工具（widget），將它添加進去就能夠了。以下圖所示，點擊小工具的右側三角箭頭，在下拉選項中找到woocommerce sidebar或product sidebar，點選中它，而後點擊add widget，便可將這個小工具添加到對應的側邊欄中。

下圖是我加完小工具的側邊欄，分別是產品搜索、產品類目、產品標籤。

隱藏產品的價格和加入購物車按鈕

做爲B2B外貿網站，是不須要展現價格和加入購物車按鈕的，咱們只須要在發佈產品時不填寫價格便可，這樣加入購物車按鈕也不會出現。

給產品頁面添加詢盤表單標籤頁

目前產品頁面沒有詢盤聯繫表單，咱們須要藉助插件Custom Product Tabs for WooCommerce，先用它添加一個標籤頁，放入以前在Ninja forms製做的聯繫表單的短代碼（shortcode），而後在添加產品時加入這個標籤頁便可，具體操做步驟以下：

1.在網站後臺找到custom product tabs菜單，進入後點擊add tab

以下圖所示，依次輸入標題、名稱，而後切換內容框到text模式，從ninja forms的dashboard頁面獲取表單的shortcode，黏貼到tab content中，最後點擊save tab便可。

而後咱們去編輯一個示例的產品，給它添加這個詢盤標籤頁。

進入網站後臺，在all products頁面任意選一個產品，點擊edit按鈕進入編輯

在編輯產品頁面時，滾動頁面到下圖所示位置，進入custom tabs標籤頁，點擊add a saved tab

而後選擇剛纔添加的標籤頁便可。

以下圖所示，標籤頁已經成功加到這個產品裏了，咱們在頁面右上方找到update按鈕，點它發佈產品。

而後咱們查看一下這個產品，能看到Enquiry詢盤標籤頁已經成功加入了。

emm(｡•ˇ‸ˇ•｡)這個插件的免費版只能一個個給產品添加詢盤標籤頁，但我們能夠用複製產品功能省點力氣，因此不買付費版也是能夠的，既然走免費這條路子，那就貫徹到底吧，若是想便利一些，那不如買個Elementor Pro，可以自定義產品頁模板，靈活度更高，固然學習難度也比較大一些。

去掉產品列表頁面的多餘麪包屑

因爲上文中開啓了astra主題的麪包屑功能，可是它不能配置產品列表頁面是否展現麪包屑，以下圖所示，出現了兩個麪包屑，因而咱們用短代碼的方式，將woocommerce自帶的麪包屑去掉。

有個隱藏問題：頁面標題與導航上的標題不同啊！

此時咱們要用到code snippets插件，請先學習一下如何添加短代碼，而後添加一個新的短代碼去掉woocommerce產品列表頁自帶的麪包屑，代碼內容以下：

/**
 * 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 );
}

去掉產品詳情頁面的多餘麪包屑

產品詳情頁也多了一個麪包屑，但這個能夠在後臺配置，不須要添加短代碼。

進入後臺appearance 》customize，而後按照下圖所示操做，進入woocommerce》 single product，選中disable breadcrumb，點擊publish保存便可。

修改產品首頁的標題和Slug

上文提到的隱藏問題：產品首頁的頁面標題和導航菜單裏的標題不同，那是由於在設置菜單時，是能夠修改標題的；但頁面實際名稱仍是Shop。

咱們進入all pages頁面，找到shop頁面，點擊其下方的quick edit，能夠快速修改頁面的標題以及slug，都改成Products吧，保持一致。注：slug，你能夠當作是url。

至此，一個知足常規使用的產品頁面就完工啦，包括產品列表頁、產品詳情頁。

產品列表頁

產品詳情頁

細心的你可能發現個人頁面上是有product tags，而你那兒可能沒有，那你去修改一下幾個產品，在快速編輯或者編輯產品頁面的右側都能找到標籤。

添加、編輯產品等產品管理功能

添加產品功能與添加博客文章的功能是相似的，我就不寫圖文教程了，附一個視頻教程吧。

修改頁面內容

請進入後臺的all pages頁面，以下圖所示的狀況，帶有elementor標記的，均可以用elementor編輯頁面，也就是可以可視化編輯頁面內容。

用Elementor編輯頁面的方法：點選要修改的內容，而後在左側工具欄中設置內容、樣式以及高級配置。咱們依舊用一個視頻來說解頁面內容編輯功能，視頻中的模板與本文中的模板不同，但方法是同樣的。

你還能夠看下方的Elementor編輯器的教程，瞭解更多細緻的操做。

查看更多Elementor教程，其中有部分教程是針對Elementor Pro的，如果在使用免費版的Elementor時提示你升級Pro或未顯示視頻中的操做的功能，就表示是Elementor Pro的功能，須要付費購買。

編輯頁腳

Astra的這套模板的頁腳是用插件Elementor – Header, Footer & Blocks製做的，頁頭是用的Astra自己自帶的功能。頁腳的編輯方法與頁面編輯方法無差別，詳見下方視頻。

給網站添加返回頂部按鈕

在免費版的Astra裏是不提供頁面上的返回頂部按鈕的，有以下兩種方法：

用Elementor製做WordPress網站的返回頂部按鈕（3分鐘解決），這個方法比下面的方法複雜一些，但能夠少裝一個插件。
安裝插件：WPFront Scroll Top，而後以下圖所示enabled啓用便可，你還能夠自行配置按鈕的樣式。

網站內容發佈要點

至此，頁面修改就差很少告一段落了，接下來就是往網站上發產品、發博客，這些內容的發佈有一些注意事項，我在另外一篇基於Elementor Pro的建站教程中有詳細的描述，請點擊《B2B外貿建站教程》前往查看。

站內SEO

請按照以下教程逐步操做

站點速度優化

咱們須要用工具Gtmetrix測試站點的速度，並進行速度優化，儘可能優化到加載時間在3S之內，優化教程請按以下子教程逐一實施

優化圖片，在上文中已經介紹了圖片的優化辦法，此教程中作了一些補充擴展
針對使用Siteground建站的狀況，能夠使用SG Optimizer加速網站，我實測後，發現效果不理想（優化先後差距很小），我覺着最好用易用的仍是付費使用WP Rocket加速網站，若是你不想購買這個插件，也能夠微信聯繫我獲取正版分享。
實施CDN，每一個主機的CDN不盡相同，大多用的是免費的Cloudflare。
若是在Sitegroun建站，請看：在Siteground給網站啓用Cloudflare CDN
若是你的主機用的是Cpanel主機面板，譬如FastComet，能夠參考這篇文章：如何在GreenGeeks給網站開啓Cloudflare CDN，若是開啓過程當中遇到問題，諮詢主機客服便可。

開放收錄，站點上線

完成上述內容後，站點可上線，開放收錄吧、

進入設置》閱讀（setting》reading），將建議搜索引擎不索引本站點去掉勾選，保存更改

而後進入Google Search Console，提交站點地圖地址以助於加快收錄。

本文原文由LOYSEO 發佈，LOYSEO專一於WordPress、Elementor、外貿建站教程。