整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
案例和由此案例重點講解的知識點介紹
案例代碼實現
行內標簽知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現解析：
所有元素在統一行顯示的時候，需要使用到行內標簽img 和 a來實現
此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：
行內標簽
第一步：書寫導航條的html代碼
第二步：定義導航的css樣式
行內元素
-行內元素：
在html中<a>、<span>、<br>、<i>、<em>、<strong>、<label>等等屬于行內元素
-行內元素三大特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變（廢話）。
案例：
a{
background-color: PowderBlue;
width: 500px;
height: 300px;
//元素的高度、寬度、行高及頂部和底部邊距不可設置
}
觸外貿的朋友肯定都聽說過Dropshipping（代發貨）這個模式，今天奶爸給大家介紹如何自己使用WordPress和AliDropship來搭建一個代發貨銷售網站。低成本運營，現在就跟著學起來吧。
來自百度百科的解釋：Drop shipping，外貿術語，是供應鏈管理中的一種方法。零售商不需商品庫存，而是把客戶訂單和裝運細節給供應商，供貨商將貨物直接發送給最終客戶。而零售商賺取批發和零售價格之間的差價。
如果你正在做阿里，那么你詢盤里面咨詢一件代發貨的應該會有不少，而且有增多的趨勢，因為一件代發貨啟動難度真的是挺低的，很多人用Shopify做，其實WordPress也可以做，而且成本更低，靈活度更高。
WordPress是一套開源的內容管理系統，你看到的奶爸建站筆記這個網站，他用的程序就是WordPress，國外很多企業網站和電商網站，也有使用WordPress做的。
WordPress是最適合外貿建站使用的程序，全球有超過35%的網站由WordPress驅動，通過WordPress你幾乎可以制作各種類型的網站，外貿建站來說，使用WordPress做2B網站的效果，比Shopify、WIX這些平臺效果要好得多；用WordPress做2C在線銷售電商網站也可以，只不過比Shopify上手難度要復雜點，不過勝在規矩由自己定，不用擔心封店。
AliDropship是WordPress上面最著名的一款Drop Shipping插件，奶爸的一個群里面看到一些外貿人4月份就在討論這個插件，而且部分人還用的盜版AliDropship開展業務，所以說這個插件是經過同行驗證過的項目，可行度高。
AliDropship可以幫你自動處理代發貨時一切銷售相關的內容，例如自動抓取商品到你網站數據庫，自動修改價格，自動去速賣通下單，自動獲取物流信息，基本上你只需要負責搭建一個網站然后推廣就行了。
關鍵的是AliDropship的價格便宜，是一次性付費，正常價格只需要89美元。
AliDropship分為插件（Plugin）和自定義商店（Custom Store）、高級商店（Premium Dropshipping Store）三種。
AliDropship插件分為單純的AliDropship和WooCommerce插件兩種，兩款插件是打包銷售，89美元終身。
AliDropship插件和AliDropship WooCommerce插件怎么選擇？
首先，這兩個插件都是基于WordPress網站的，如果你還沒有WordPress網站，那么請先參照WordPress教程一文，去搭建一個WordPress網站。
AliDropship plugin for WordPress就是單純的一個WordPress插件，不需要你單獨安裝WooCommerce，就可以實現在線Dropshipping商品。
AliDropship plugin for WooCommerce是針對你自己對WooCommerce比較熟悉，或者你已經安裝了WooCommerce這個電商插件的情況下，幫你為WooCommerce實現Dropshipping的功能。
另外一個區別就是，安裝AliDropship plugin for WordPress的話，網站主題只能選擇支持AliDropship特定主題，而如果你安裝AliDropship plugin for WooCommerce的話，那么你主題可以選擇任何支持WooCommerce的主題。
便于大家理解，不搞那么復雜，本文中奶爸將以AliDropship plugin for WordPress為例給大家介紹如何搭建Dropshipping網站。
AliDropship Custom Store是奶爸更加推薦給新手朋友們的一個套餐選擇，簡單來說就是花錢省事套餐，最低套餐299美元，如果沒有服務器的話，可以選擇他們的服務器，48美元/年。
也就是，你可以直接花299（Custom Store）+48（服務器）=347美元，買一個搭建好了的AliDropship網站。
AliDropship官方的工作人員會跟你聯系，了解你運營的產品，幫你挑選出50個高質量的商品上傳到網站上，然后告訴你網站賬號密碼。類似于拎包入住，打開門就可以營業的感覺。
AliDropship Custom Store成本比自己用插件版自己裝網站只貴了1000元左右，對于新手或者時間比較值錢的朋友來說，真的是個不錯的選擇。
這個Premium Dropshipping Store套餐比較適合財大氣粗的老板。
AliDropship官方提供了9個已經正式上線運營并且每個月有固定收入的網站，你可以花錢直接買一個和他們一模一樣的網站，除了網站LOGO、名字、聯系方式、付款方式之外，其他內容都是和你選擇的網站一模一樣。
不過這種網站看著雖好，但也意味著購買這個套餐的用戶和你的選品都一樣，這樣就增加了競爭難度，奶爸推薦選擇自定義商店，然后自己選品讓他們給你傳部分，自己后面再繼續更新，性價比更高。
AliDropship Custom Store是奶爸建議不會自己建網站的朋友選擇的套餐，省時間，價格不到2500元人民幣，性價比真的很高，你自己跟著教程搭建到摸索熟悉，絕大多數人應該要花1周以上的時間，還不一定有官方的網站做的好。
首先，點擊下面按鈕進入購買鏈接。
https://alidropship.com/start-new-business/?via=14733
點擊查看套餐按鈕。
可以看到，默認的支持3個等級的套餐，分別是299美元、499美元和899美元。
如果你沒有購買服務器的話，也可以直接添加一個48美元的服務器（Add hosting – /year），如果你已經買了服務器，那么到時候把服務器管理網站，賬號和密碼告訴他們客服就可以了。
這3個服務套餐最大的區別就是默認給你商店導入的產品數量不同，BASIC套餐只有50款，不過可以后面自己導入，問題不大。
然后就是SEO和社交平臺這些內容，雖然奶爸沒購買他們這個套餐，不過考慮到底層代碼還是WordPress，所以這些內容后期完全可以自己做，不需要額外花錢。
所以，直接購買299美元的BASIC套餐就可以了。
輸入你的郵箱，填寫信用卡，然后選擇是否購買主機，輸入優惠碼GETSTORE15，然后付款。
付款成功后，會給你郵箱發送郵件，并且指示你怎么和客戶聯系，提供你域名、服務器、選品等內容。
下訂單到最后移交網站給你，時間需要12-15個工作日，這期間你可以思考下網站搭建完畢后怎么推廣，做一些前期準備。
AliDropship plugin的價格更便宜，適用于已經購買了主機和域名，自己對WordPress有一定了解，或者自學能力不是那么弱的朋友購買。
https://alidropship.com/plugin/?via=14733
可以使用GETPLUGIN25獲得25%的優惠。
點擊BUY NOW FOR ONLY 按鈕進入購買頁面。
輸入郵箱、信用卡、結賬。
關于服務器，這里可以根據自己情況考慮，如果你已經購買了服務器就不需要購買了，如果你沒購買服務器，那么可以順便買一個，48美元一年價格合理。
想要自己買其他家的服務器也是完全沒問題的，例如SiteGrond、GreenGeeks、Hostinger，或者VPS.
除了服務器，還需要有域名，如果你沒有域名的話，可以去namesilo購買一個。
付款完畢后，你郵箱里面會收到AliDropship發給你的插件信息。
自己把key保存好，然后下載AliDropship Plugin到本地。AliDropship WOO Plugin 是裝了WooCommerce的網站用的，鑒于我們是從零開始，所以推薦安裝不用WooCommerce的版本，簡單點，而且性能更高一些。（如果想要更多的自定義功能，請安裝WooCommerce版本）
然后去AliDropship and WOO Themes下載一個免費的主題模板。（你要購買付費的也可以）
因為我們是準備使用AliDropship Plugin，所以主題要選用AliDropship Original Plugin下面的，不然沒辦法使用。
進入我們的WordPress網站后臺，如果你還沒有WordPress網站，參照WordPress教程去安裝一個。
選擇后臺菜單的Appearance – Themes – Add New
然后上傳我們前面下載的主題文件進行安裝。
安裝完畢后激活主題。
接著繼續點擊菜單里面的Plugins – Add New，上傳我們下載的AliDropship Plugin插件文件。
安裝完畢后激活插件。
如果激活插件后提示AliDropship plugin alert: Error! ionCube Loader Loader not found. Alidropship plugin can’t be activated. Please check instructions .
那么是因為你服務器沒有安裝ionCube組件，虛擬主機的話請聯系服務商進行處理，自己的VPS的話，可以自行安裝。
如果你VPS使用的寶塔面板安裝的環境，那么可以進入應用商店，找到你安裝的php版本后的設置，然后選擇安裝擴展。
安裝ionCube即可。
安裝完畢再次刷新WordPress插件頁面，就不會出現報錯了。
在進行AliDropship插件設置前，我們需要先激活插件的授權。
在左上角可以看到AliDropship的插件設置菜單。
進入License菜單，輸入你的激活碼進行激活。
激活完畢后，進入Settings菜單，把每一項設置界面都打開看一看，需要修改的就修改一下。
這里主要需要設置的地方有：
最后，也別忘了去給產品設置一下產品分類。
插件設置完畢后，就可以開始導入商品了，導入商品我們需要借助AliDropship Chrome插件。
打開Chrome瀏覽器，然后點擊https://chrome.google.com/webstore/detail/alidropship/jlnhdnbbikjkdejminhdpmejldiapdgn安裝插件。
安裝完畢之后，點擊右上角的插件圖標，添加你網站網址進去。
網址添加后，點擊后面的Log in進行授權，出現下圖。
點擊Authorize進行授權。
然后進入速賣通網站，搜索你想要銷售的商品，挑選合適的供貨商，點擊商品圖片上面的AliDropship圖標，如下圖：
當圖標上面的加號變成勾后，就代表導入完畢，我們進入WordPress網站后臺。
進入Products，All Items，可以看到剛才導入的商品，點擊Edit進行編輯。
右側選擇商品分類。
下面的Featured image如果你不滿意也可以重新替換其他的。
商品標題、網址、詳情這些你都可以二次編輯。
最底下的Product Options里面，也已經給你設置好了，不滿意的話同樣可以自行設置。
一切修改完畢后，點擊發布按鈕。
點擊商品網址，我們就可以看到商品前臺頁面，如下圖：
點擊購買按鈕，自己把整個流程走一遍，看是否有錯。
付款過后，AliDropship會自動幫你去速賣通下單，下單地址會自動留你網站客戶填寫的地址，然后速賣通商家給你發貨到客戶地址，并且同步輸出物流信息到你網站上面。
就這樣，Dropshipping的整個流程就跑通了。
如果你覺得用插件手動導入太麻煩了，也可以直接在AliDropship后臺批量導入，方法如下：
在Import Products界面可以搜索AliDropship官方整理的產品庫里面的商品，然后選擇批量導入。
導入完畢后同樣進入商品列表進行編輯后發布即可。
光禿禿的商品介紹頁有點單調，加點Reviews好看，而且有助于轉化，進入AliDropship菜單，找到Import，選擇Import Reviews，進行導入。
導入完畢后，網站前臺就可以看到效果了。
如果這些評論你覺得有些內容不適合那么展示，也可以自己進入產品編輯界面對評論進行修改。
前面安裝好主題后我們還沒有對主題進行自定義修改，所以默認的網站LOGO還是主題自帶的，我們通過下面的方法進行修改。
WordPress后臺，Customization菜單下面，找到Header，就可以看到修改lOGO的位置。
其他的一些設置選項也可以自行根據需要進行調整，這里不過多介紹。
在WordPress后臺菜單選擇Appearance，然后選擇Menus，新建一個菜單。
然后根據自己網站需要添加菜單內容，然后勾選Display location的位置為Main Menu，保存菜單。
電商網站通常都包含about us、Refunds & Returns Policy、Payment Methods、Shipping & Delivery、Terms & Conditions、Privacy Policy等頁面，我們需要自己新建。方法如下：
WordPress后臺菜單，選擇Pages，然后Add New添加。
這些頁面通常不需要怎么特別設計，直接按照Word那樣排版就OK了。
頁面新建完畢后記得添加到網站導航菜單或者頁腳菜單里面。
如果想要自己做SEO，那么博客文章是必不可少的一部分。
WP后臺選擇Posts，然后Add New即可。
Categories是文章分類，可以自行規劃。
通過這篇AliDropship教程可以看到使用WordPress配合AliDropship做Dropshipping代發貨業務是非常簡單的，你只需要負責好選品和推廣，后面的銷售和發貨等一系列流程AliDropship都會幫你做好。
AliDropship插件89美元，服務器一年算60美元，域名8美元，總共89+60+8=157美元，×7=1099元人民幣。
只需要1000多元的啟動資金，你就可以開始自己的外貿代發貨業務，敢問還有什么項目的啟動資金和投資風險比這個低？
航條效果圖：
我們先來看一下，首先這個整體我們可以看成一個大盒子，盒子的背景顏色為白色。
然后看一下整體的話是占到整個導航條的80%左右，上圖紅色框圈出的范圍。
這個盒子又分為兩個部分，左側的logo部分，右側的導航部分。
整個布局用到的是flex布局：
大家可以去看一下阮一峰老師的教程：
阮一峰flex布局
左側logo部分我們用到的標簽有：
1、h3標簽：
<h3><a href="index.html">多多魚網頁</a></h3>h3是一對有開始有閉合的標簽組合。以<h3>開始，以</h3>結束。
html h3標簽主要用于布局標題、欄目類內容，h3與h1最大標題標簽相比，h1標簽一般一個網頁中使用一次，而h3標簽可以在一個網頁中多次使用。默認CSS h3又比h2文字大小小一點。
html h3標簽常見應用地方：
欄目標題可以使用h3標簽
文章標題可以使用h3標簽
文章標題列表可以使用h3標簽（一般圖文列表中，圖片使用img引入，文章標題文字使用h3標簽）
2、a標簽：
<a href="index.html">多多魚網頁</a><a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀是：
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的
右側的導航部分我們用到的標簽有：
一、無序列表簡介
無序列表，很好理解，有序列表的列表項是有一定順序的，而無序列表的列表項是沒有順序的。默認情況下，無序列表的項目符號是●，不過可以通過無序列表type屬性來改變無序列表的列表項符號。
語法：
<ul>
<li>無序列表項</li>
<li>無序列表項</li>
<li>無序列表項</li>
</ul>說明：
<ul>，即“unordered list（無序列表）”。<li>，即“list（列表項）”。理解標簽語義更有利于你記憶，而記憶HTML標簽的語義是HTML的基礎。
在該語法中，使用<ul></ul>標簽表示一個無序列表的開始和結束，<li>表示這是一個列表項。在一個無序列表中可以包含多個列表項。
注意，<ul>標簽和<li>標簽也是配合使用，沒有單獨使用，而且<ul>標簽內部不能存在任何其他標簽，一般情況下只能存在<li>標簽（對于初學者，我們忽略嵌套列表）。這個概念要非常清楚，在網站開發后期很容易犯錯。（這個情況跟有序列表一樣）。
右側導航代碼：
<ul>
<li class="active">
<a href="index.html">首頁</a>
</li>
<li>
<a href="">網頁模板</a>
</li>
<li>
<a href="">學習資料</a>
</li>
<li>
<a href="">常見問題</a>
</li>
<li>
<a href="">網頁作業</a>
</li>
<li>
<a href="">聯系我們</a>
</li>
</ul>視屏教程：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
