Orange 主題安裝前的準備工作

1、安裝nicetheme提供的最新版「積木箱子」插件:http://www.thecomfytraveler.com/jimu,并按照教程完成操作:http://www.thecomfytraveler.com/nicetheme-jimu-set.html

2、主題需要使用 WordPress 自帶縮略圖功能,請如下圖進行設置:

  • 在「設置」-「媒體」- 設置大小,縮略圖大小,寬度填450,高度填0 (因為瀑布流圖片高度需要按照圖片尺寸進行裁剪,因此高度為0 )。其他的尺寸按下圖進行設置即可。
  • 如果你之前縮略圖生成了是正方形的,需要重新上傳圖片,或者使用第三方插件重新生成縮略圖。插件比如:Regenerate Thumbnails (插件市場搜索或者在搜索引擎搜索下載使用。)
Orange 主題 v1.0 設置教程-nicetheme_奈思主題

3、安裝「積木箱子」后即可安裝 Orange 主題,所有的主題設置項均在 wordpress 儀表盤“積木”下的“Orange 主題設置”,如圖1。

4、首次安裝主題,首頁可能空白,請先補充文章內容,按主題教程配置主題功能。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

一、基礎設置

因為v1.1版本新增延遲加載,請務必設置好以下三個圖片。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

1、網站logo:比例大致為4:1 。

2、文章縮略圖:當文章中暫時沒有圖片的時候,作為占位圖顯示。

3、默認分類封面圖:文章列表頂部的封面。

布局設置

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

1、首頁公告:顯示在首頁頂部,藍色色塊。見下圖

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

2、首頁幻燈片板塊:一共有2個樣式,一個默認寬度、一個100%寬度。

3、首頁板塊:一共有11個板塊,根據需求添加板塊內容,對應設置好圖片、文字即可。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

 

二、拓展設置

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

1、首頁滾動元素動畫:首頁板塊,可以隨著向下滾動,板塊內容會有一個進場動畫。

2、常駐邊欄:現在在右側,可設置3個常規圖標。分別是在線咨詢鏈接、微信咨詢、電話咨詢。不填則不顯示。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

三、文章設置

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

1、產品詳情頁通用描述:可以在產品文章中,顯示通用標識。如下圖。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

五、廣告設置

預留4種廣告位,首頁文章列表下的長幅廣告、其他歸檔頁文章列表下的廣告以及文章頁內容下方的廣告位。

六、底部設置

社交信息:可設置在線客服、客戶服務熱線、官方微博、微信公眾號、郵箱。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

七、分類模版

文章的分類模版有3個,除了原來的「網格視圖」,v1.1版本新增了「列表視圖」「案例視圖」。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

7.1 案例視圖

和網格視圖區別是除了縮略圖和標題外,顯示分類名稱,不顯示文章其他信息(瀏覽量等)

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

上圖中間的導航,則是通過自定義菜單方式來設置,如下圖,設置好菜單。然后在分類拓展中設置好「分類導航」。

八、產品錄入

Orange 主題 v1.0 設置教程-nicetheme_奈思主題
Orange 主題 v1.0 設置教程-nicetheme_奈思主題

錄入產品時,在產品內容編輯下「產品拓展」,可根據需求,進行設置:產品圖片、特點、售價、優惠價、產品狀態可影響下方的購買按鈕的狀態。

默認下,按鈕可正常跳轉。售罄則無法跳轉。表單咨詢則可彈出表單,讓用戶進行回復,如下圖。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

九、頁面模版

1、關于我們頁面:新建頁面 - 選擇頁面模版「關于我們」。設置方面參考首頁板塊設置。

2、聯系我們頁面:新建頁面 - 選擇頁面模版「聯系我們」。即可在頁面編輯封面、聯系方式等。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

如下圖。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

用戶在留言表單中提交表單后,在后臺,可以看到留言聯系列表。如果在產品中留言,則會顯示詳細的產品名稱??舍槍τ脩粜枨?,進行聯系。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題
Orange 主題 v1.0 設置教程-nicetheme_奈思主題

十、友情鏈接頁面

頁面模版,可選擇鏈接分類顯示鏈接,logo比例3:1,鏈接設置教程:具體教程

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

十一、其他

10.1 咨詢彈窗信息

設置:「主題設置」-「底部設置」-「咨詢彈窗信息

會在網站右下角顯示一個彈窗,打開網站后5秒顯示。用戶點擊關閉,后會短時間內不顯示。

10.2 手機端網站底部導航欄

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

設置:「主題設置」-「拓展設置」-「手機端網站底部導航欄

注意:因為手機端寬度有限,請最多設置4個一級菜單,支持彈出二級菜單。菜單字數請控制在4-5個字,超過字體會錯位不美觀。在一級菜單的文字前可插入字體圖標。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

注意:設置菜單時,最多設置2級菜單,如下圖。在第一級菜單的導航標簽中,加入圖標字體。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

圖標字體可在主題目錄中看到,路徑:wp-content/themes/orange/plugins/iconfont

打開用瀏覽器打開下圖中的demo_index.html,即可看到主題可使用的字體圖標。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

圖標字體代碼參考:

<i class="iconfont icon-shouye_home"></i>

點擊下圖的 Font class,即可看到字體圖標的代碼,修改上文中的icon-shouye_home。

Orange 主題 v1.0 設置教程-nicetheme_奈思主題

如果你網站是新站,沒有文章數據,可使用我們的文章數據,使用wordpress自帶導入工具,導入即可。

數據壓縮包:憑訂單號建議客服獲取。

壓縮包解壓后,導入到導入工具中。具體教程請看:http://www.thecomfytraveler.com/wordpress-dao-ru-shu-ju-xml.html

注意??:導入到數據不含圖片,可能會提示圖片不存在,或者演示中文章、列表沒有圖片。