搜尋
Close this search box.

概說Elementor情境題

Elementor雖是很方便可以讓我們快速完成頁面佈局、切版,並且有許多現成元素工具可以拖拉至網頁中使用,故大部分的需求都是可以用此方式得到效果,但有時候為了滿足老闆、業主、客戶的更高客製化的要求,有時候Elementor編輯器中現有的功能無法百分百達成,此時有時候還稍微需求一點程式能力輔助,例如常前的前端程式語法 : jQuery、CSS,透過一點點程式語法可以讓我們的Elementor更加千變萬化,有更高的彈性應付各種客製化的需求。

本分類命名為「Elementor實戰情境題」,就是把我在接案這幾年應付業主不同需求時而研究出來的實戰作法的筆記,或許我的方式並不一定是最佳的,也可能讓一些工程師前輩們見笑了,但至少「效果」是達到了,凡先求有再求好嘛!

Elementor實戰情境題」主要都是以前端程式「jQuery」、「CSS」為主,有些很簡單只需一兩行就可達到想要的效果,如果真的看不懂程式語法的原理也沒關係,直接複製貼上,效果就會出來了!

Elementor實戰情境題」比較偏單一情境式的教學,所以不用從第01開始看,只要選自己需要的情境的那篇來讀就可了!

GO !

佈景主題(Blocksy)的自訂設定可以調整哪些?

前言

很多免費主題的「自訂」都很陽春,控制力不高,而Blocksy這套主題的自訂,不但是中文介面,而且可以讓你僅靠設定,就設定出一個能立即上線的套版文章型的網站。

如何進入自訂?

方式有二,

方式1 : 從前台

從前台任一頁面點上方的「自訂」

佈景主題(Blocksy)的自訂設定可以調整哪些?-1

方式2 : 從後台

從後台的外觀進入自訂

佈景主題(Blocksy)的自訂設定可以調整哪些?-2

常會設定的項目

「自訂」中可設定的項目非常多,一般我們只會設定一些常用的,有許多看不懂可暫不理會,有空再自行玩玩看。

下表概說之:

表1.頁首區(head)、頁尾區(footer)的設定調整

名稱說明
一般選項/頁首/選單1/設計調整選單1號字體大小、顏色。
一般選項/頁首/選單2/設計調整選單2號字體大小、顏色。(有需求時可加放第2組次選單)
一般選項/顏色全站主色之配色。(調色盤)
一般選項/排版樣式全站之預設字體大小調整。可先都預設值就好,有需要再來調。
一般選項/頁首/社群拖拉加入社群圖示。
一般選項/一般/社群媒體帳號填入自己的社群帳號的主頁網址。
一般選項/頁首/標誌頁首的Logo圖。(Demo Logo圖下載)
一般選項/頁首/標誌/切換手機狀態調整手機選單的樣式。
核心/網站識別瀏覽器列上的網址小圖示,可以與Logo用同一張圖或另製圖也可。
一般選項/頁尾(footer)修改版權資訊(可任意修改)。
或再加入一些小工具或資訊。(下一章節講解小工具)

表2.Body區(部落格版面)之設定調整

名稱說明
內容類型/網誌文章(1)調整→「首頁」文章列表的「版型」。
(2)視需求勾選「頁面元件/資訊欄」(點小箭頭設定左或右)。
(3)卡片提示效果→列表載入時會由下往上切入。
內容類型/分類(1)調整→分類文章列表的「版型」,即點某一分類後的版型
(2)視需求勾選「分類元件/資訊欄」(練習時都先打開)。
(3)卡片選項→可點進去視需求勾選。
內容類型/單篇文篇(1)調整→單篇文篇的「版型」,即點開某篇文章之全文版型
(2)視需求勾選「文章結構/資訊欄」(練習時都先打開)。
(3)文章元件、頁面元素裡面的選項可先全都打開。

在目前尚未脫離套版的狀態,這裡務必動手做看看

「資訊欄」裡面的設定,下一篇再介紹。

(以上待補上影片做示範)

註 : 如果不會設計Logo,也一時無預算找人設計,可以參考此篇

20_建立主選單

前言

建立好「頁面」之後,在首頁仍然無法切換點擊我們建立的頁面,故仍要透選「選單」讓每一個頁面都進入到選單才能在首頁上方的選單區被看到每一頁面的名稱。

WordPress網站的主選單,是整個網站架構建立的第一步,為了方便一開始有基本選單可以切換瀏覽,我們把剛剛建立好的頁面拖拉至「選單」中。

 

1、建立主選單名稱

如下圖,在「外觀/選單」中,先建一個叫「選單01」的選單,以後可以視情況建立不同的選單名稱以便直接切換套用。

20_建立主選單-23

2、拖立頁面名稱至右側

20_建立主選單-22

 

3、排序選單

右邊的選項可以上下拖動,排出想要的順序再按下儲存選單。

20_建立主選單-24

4、移除選單

每個選項右邊有個小箭頭,可點開做編輯或刪除這一個選項。

20_建立主選單-27

5、建立「自訂連結」選項

除了我們站內的頁面,你也可以讓選單的選項也可以出現一些外部的連結。

自訂連結用法 :

輸入什麼 效果
輸入「/」 代表是根目錄,點擊後會連往首頁。
輸入「#」
  1. 代表是空連結,點擊下去則不會跳轉網頁(停留在原頁上方)。
  2. 另可以用來當成下拉選單的上層名稱。
輸入任意網址 代表是有效的連結,可以連往所指定的網址。

(1)建立一個連往外部平台的連結

這邊以蝦皮賣場( https://shopee.tw/ )為例:

20_建立主選單-26

 

(2)外部連結設成「另開分頁」

另外,因我的賣場是會連往外部的網頁,所以我們會比較希望用「另開分頁」的方式來打開此連結,所以你可以參考下方設定來達到另開分頁的需求,請拉至頁面最上方點擊「顯示項目設定」。

20_建立主選單-8

▼「我的賣場」選項右邊有個小箭頭,可點開做編輯。

20_建立主選單-19

6、完成後預覽

透過另開新分頁的方式來「造訪網站」,來預覽一下我們的前台是否有主選單的出現。

17_安裝免費主題&版面三大區初步解說-8

 

你可把每個選項都點看看,是否有發生什麼變化?

7、總結

以上就完成了初期的選單建立,當選單裡面的項目較多時,我們也可以再透過拖拉排序方式另組成「下拉式選單」。

 

考考你

  1. 在「自訂連結」中,輸入「#」代表什麼? →  空連結,點擊下去則不會跳轉網頁(停留在原頁上方)。
  2. 在「自訂連結」中,輸入「#」可以用來當成下拉選單的上層名稱。

Answer

17_安裝免費主題&版面三大區初步解說

前言

我們不管要設計什麼樣的網站,我們一律安裝一套純框架式、無任何內建功能的佈景主題,一來可讓整個網站乾淨單純且有利後期設計,二來不會讓網站有過多的效能消耗。

安裝佈景主題Hello Elementor

外觀/佈景主題 / 安裝佈景主題,鍵入搜尋安裝免費主題。

搜尋本次教學要用的佈景主題的名稱「Hello Elementor」,並按下安裝,安裝完成後再按下啟用,這樣就輕易完成了。

17_安裝免費主題&版面三大區初步解說-4
17_安裝免費主題&版面三大區初步解說-6

安裝完後按下啟用。

後台版面

初安裝好Hello Elementor佈景主題後,後台不會有啥大變化,但可以在下圖看到目前已確定套用了新安裝的佈景主題為Hello Elementor。

17_安裝免費主題&版面三大區初步解說-7

 

再次提醒一下觀念,後期想要增加網站的功能,都會採用「外掛」的方式來擴充,所以不需要仰賴付費版主題的內建功能,且付費版主題的功能不一定實用也不一定有辦法駕御它,故我們需要什麼功能再安裝相對應的外掛就好了,這也是一種「堆積木」的模式。

前台版面

透過另開新分頁的方式來預覽一下我們的前台版本

17_安裝免費主題&版面三大區初步解說-8

前台版面沒啥大變化,主要是我們還沒填充內容進來,但是需要先了解一下,一個網站的前台版面有分成「頁首(head)主內容區(body)頁尾(footer)」等三大區域,如下表下圖所示。

區域說明備註
頁首(head)網站名稱、Logo、主選單(網站名稱與Logo可二擇一出現)
主內容區(body)①首頁(預設是文章列表)、
②單一頁面展開之全文、
③單一文章展開之全文、
④單一分類展開之列表。
(版型變化主要以此區為主)
頁尾(footer)版權宣告、其它資訊。
17_安裝免費主題&版面三大區初步解說-2

後面我們會學習如何替這三大區進行設計。

 

16_如何安裝佈景主題(3種方式)

前言

佈景主題安裝至少有3種方式,只有第1種是最常用的,新手教學為了快速學習故只要了解第1種即可,餘兩種可先跳過或未來再回來當作延伸的知識學習即可。

安裝佈景主題的方式

1、後台「搜尋」安裝

路徑 : 外觀 / 佈景主題 / 安裝佈景主題

這是最最最常見的方式,會從後台搜尋安裝的主題,一般就是「免費」版的主題,可以直接從後台搜尋後點擊安裝就完成了,非常簡單。

你可以在此搜尋本次教學要用的佈景主題的名稱「Hello Elementor」,並按下安裝,安裝完成後再按下啟用,這樣就輕易完成了。

 

(實作時再練習)

2、後台「上傳」安裝

路徑 :
外觀 / 佈景主題 / 安裝佈景主題 / 上傳佈景主題

會從後台「上傳」安裝的,一般就是有買了付費版的佈景主題,在付費後下載佈景主題回自己的電腦,會是一個zip的壓縮檔,再從WordPress網站後台來瀏覽此壓縮檔來上傳,即可完成安裝。

這邊要注意,此下載回來的佈景主題是一個zip的壓縮檔,不可預先解壓縮,不然會無法上傳。

3、從「FTP上傳」安裝

路徑 : /public_html/wp-content/themes

不管是免費或付費版主題,只要你先把主題的zip的原始檔下載至本機電腦後,也可以利用FTP連線到主機,直接上傳到對應的資料夾。

這個安裝主題方式極少機會用的到上,一般是在除錯或是網站後台有問題時,才可能會使用FTP的方式來做上傳主題的操作。

在初始階段不會碰到FTP,新手們可以先略過。

總結

我對第2、第3很少用,一般都是用到第1而已,所以先懂得操作1即可,第2、第3先了解就可以了。

18_後台兩大資料區(頁面&文章)與使用時機

前言

WordPress內建兩大資料區為「頁面」與「文章」,會因應不同需求而有不同的應用, 我們在開始設計網頁之前,須先把這兩大資料區的型態、特性、運用方式先了解清楚。

 

頁面vs文章

基本識別,頁面的英文是 Page,文章的英文是 Post,兩者在後台的主要識別是依靠英文上有這樣的區別,網址的格式上也會有所區別,其它請參考以下表格的說明。

以下為頁面與文章的區別與使用時機:

頁面 文章
頁面的英文是 Page 文章的英文是 Post
每一頁皆各自獨立,沒有分類、標籤的限制。 每一頁都須收納分類、標籤中。
預設不會在前台自動出現,除非手動把指定的頁面加入「上方選單」才會出現。 預設會在前台以文章列表方式呈現,且在文章分類中就可以找得到每一篇文章。如果上方選單太空洞,也可以把某分類或單篇文章另加在上方選單中讓人點選。
主要用途 : 用來做自製首頁客製部落格主頁、形象官網、銷售頁、活動頁、到達頁、一頁式網站、購物商店,例如關於我、服務介紹、收費方案、經銷據點、聯絡我…(自行延伸) 主要用途 : 做內容行銷以增加搜尋引擎的收錄,例如寫開箱文、分享文、教學文、案例文……(自行延伸)
把每一頁面用「選單」組合起來並呈現在網站上方,做為網站導引或單一專頁的說明。 把所有寫好的文章以自動列表方式展示在前台,即成為「部落格」,創造實用優質內容以吸引客戶、增加SEO曝光效果。
頁面→搭配選單 文章→搭配分類、標籤、選單
版型 : 每一頁均需要獨立設計。 版型 : 只需設立好模版之後,未來在後台一直寫新的文章發佈後,每一篇新文章會自動套用設計好的模版之版型。

 

以上表而言,若你網站是形象網站,會選用頁面來製作,例如做『首頁、關於我們、服務項目、聯絡我』這四頁,其實就不須用到「文章」。

若網站中會有製作「最新消息、知識專欄、…」等等這類不定時更新或上架寫內容的需求,就會使用到文章來處理這樣的需求。

 

考考你

  1. 「頁面」與「文章」最大的區別是什麼? →  頁面沒有分類與標籤文章則具有分類與標籤。
  2. 寫部落格時應該使用「頁面」還是「文章」? →文章
  3. 在WordPress中,「頁面」的英文代稱是page,「文章」的英文代稱是 post
  4. 如果要設計一頁「關於公司」的網頁,一般應用「頁面」或「文章」哪個來寫比較適當呢? →頁面
  5. 如果新增一個「頁面」並發佈後,在前台為何看不到這一頁呢? →因為須把頁面加至選單中,才能讓人點擊與瀏覽。

Answer

 

吸收更多

頁面與文章是WordPress兩大資料區,未來也可以再擴充出新的資料區,例如製作房地產物件的展示功能,就可以再擴充一個「物件」區,但新手階段先把兩大資料區先學好即可,未來視情況再進階學習運用。

18_後台兩大資料區(頁面&文章)與使用時機-1

15_我應該選擇哪一套佈景主題

簡介

選到對的主題,是學習WordPress最重要的第一步,須慎重思考。

說明

接下來會介紹幾套我列為可選用清單之「免費」佈景主題,列出的項目我只會選用一套作為後續章節的教學用途,所以如果你安裝的主題與本課程選用的主題是不同套的,後續的章節有些在「自訂」設定的地方可能就無法完全參考,你須自己摸索一下每套主題自帶的「自訂」設定。

主題名稱 費用 用途 說明 官方Demo 實際案例
OceanWP 僅使用免費版 主要用來作為較客製化不同各種網站類型的基本框架。

亦可純套版部落格。
僅作為框架用,透過頁面編輯器與其它外掛可設計出部落格購物商店官網一頁式等類型網站。 點此 點此
點此
Blocksy 僅使用免費版 主要用來作為較客製化不同各種網站類型的基本框架。

亦可純套版部落格。
僅作為框架用,透過頁面編輯器與其它外掛可設計出部落格購物商店官網一頁式等類型網站。 點此 點此
點此
VT Blogging 僅使用免費版 套版部落格 簡單素雅,色塊分明。 點此 點此
Kokoro Rose 僅使用免費版 套版部落格 偏少女風,女生大都會喜歡。 點此 點此
Makenzie Lite 僅使用免費版 套版部落格 偏華麗的主題,一安裝好就可以擁有滿有質感的首頁。 點此  
Blogito 僅使用免費版 套版部落格 簡單素雅 點此  
WP Diary 僅使用免費版 套版部落格 稍嫌華麗 點此  
Hello  Elementor 免費版 純框架主題 無法任何內建功能或Demo,專用用來設計網頁。    
「實際案例」都是我經手的作品

注意 : 在表中「OceanWP」、「Blocksy」的「實際案例」你所看到的「首頁」(甚至每一頁)都不是佈景主題提供的,而是我們透過「頁面編輯器」外掛來自己設計排版的,也就是說自己客製化自己的每一頁。

 

進階說明

如果你只是要純寫部落格,那麼找「部格式主題」來套版,並①把該套主題的「自訂」摸熟,還有②WordPress原生後台功能也摸熟,這樣子就不用走客製化設計網站的學習路線,可以在2天之內就開始當部落客寫文章了。(當然如果想增加一些小功能例如社群分享、置入廣告…仍得繼續往下面章節學習並安裝適當的外掛)

15_我應該選擇哪一套佈景主題-1

後面章節主要會不以「套版」來教學,當然若你純是為了當部落客,只要選則一套喜歡的部落格主題來「純套版」即可, 如果你想學的是「網頁排版」,做出比較客製化的網頁,那就不能只滿足於套版,應把基本課程學完上手後,後面另有教學來教怎樣使用編輯器來「設計網頁」。

14_對佈景主題基本認知

簡介:

佈景主題是整個網站的基本框架、基本外觀、樣式,是必須安裝的,或稱「套版」,但若學習正確的方式,可以打造想要出的網頁或功能,擺脫套版的框架。

說明 :

這個章節非常重要,會先說明許多觀念再繼續後面的章節,請務必耐心把本章節所說明的觀念與方向弄懂再往下學習,很多學習WordPress的新手的「誤入歧途」都是源自一開始對佈景主題錯誤的認知與無知。

很多人在學習WordPress架站的初始階段,被錯誤的資訊或網路廣告所影響對佈景主題產生錯誤的謎思或依賴,造成後續過度購買、無法駕御、反覆重新開始等等的情形。

觀念1:佈景主題有99%都是英文

WordPress源自國外,雖目前後台已有繁體中文介面,但額外加裝的佈景主題仍在「設定」上仍大多數是英文,我們須有基本英文閱讀能力或靠Google瀏覽器按右鍵翻譯中文來閱讀(我都這樣做的)。

雖設定上大都是英文,但我們在設計網頁或寫文章時仍是以中文來編寫,所以訪客瀏覽網頁時所看到的仍是你所編寫的中文內容,只會有少數的功能標題在前台呈現時會是簡短英文,但這個我們後面可以有方式把這些片段英文也翻成中文,讓訪客看到的是全中文的網頁。

觀念2:免費與付費的差異

不管是免費主題或付費主題,都是「套版」,套了之後再做設定與修改。

Ф免費主題

WordPress本身就有提供數以千計的免費式佈景主題,可以在後台直接搜尋安裝,不過絕大部分的主題都有許多限制,很多的「設定」都要付費版的才會開放。

另大部分的免費主題,其實並不好用,只能靠有經驗或用過的人才能告知你哪幾套免費佈景主題是較好用、較好上手的、較好操作的。

但也有一些免費式的佈景主題,在免費版時的就沒有過多的限制,是值得我們列為「愛用」清單之一的。

Ф付費主題

付費主題主要是在「主題市集」(我比喻的稱呼)可以購買,那邊也有數以千計的付費主題可以選購,每一套大約50~60美金不等。

會購買付費式主題的原因不外有二,一是它內建許多功能,二是可以直接匯入它做好的美美的Demo。但這二點卻也是新手最大的盲點與浪費學習時間、繞遠路的主因。(後面另詳述)

(比較簡表) 免費主題 付費主題
優點 免費、簡單 多功能、有Demo可匯入
缺點 ● 功能少,無Demo可匯入。
● 在「設定」上有所限制。
●未來如果更換主題,不太會痛,沒有較大的過度期。
● 可「設定」的地方較多,但也可能偏複雜,不知怎麼設。
● 太多功能用不到,可能也不懂怎麼關掉,影響網頁載入速度。
● 匯入的Demo會自帶外掛,而自己又安裝外掛,可能會造成功能重覆。
●未來如果更換主題,在設定與風格上,一切得重來。
改善方式 靠適當的外掛來打造想要的功能。 內建的功能可能是不符合實際需求的功能,所以仍得靠其它外掛來補足想要的功能。

 

觀念3:每一套主題的「自訂」的範圍都不一樣

「自訂」的意思,是指佈景主題可以「自己設定」的地方,例如可以設定全站的主要風格、配色、幾欄式、選單數量、字體大小等等。

重點來了,不管是免費或付費主題,每一套的可「自訂」範圍與內容完全都不一樣,免費的主題提供的「自訂」比較少,付費式的主題提供的「自訂」較多,甚至有些偏向複雜、有難度,須仔細研究、閱讀官方教學,付費式主題的官方教學甚至太冗長且過多英文篇幅易造成閱讀上的門檻。

也正因「每一套主題的「自訂」的範圍都不一樣,所以如果你把網站的主題做更換,你就得重新去研究這些新的自訂項目,所以沒事就不要亂更換主題,選好一套用到底就是了。

更換主題並不會造原所編寫的內容消失,更換主題只會造成網站樣式或外貌上的改變。

觀念4:安裝後無法與主題展現的Demo呈現一模一樣

14_對佈景主題基本認知-1
免費主題的安裝前預覽

這個情形一般常發生在免費主題身上,因為免費主題一般沒有提供Demo可匯入,所以在安裝前的預覽雖看來美美的,實際上安裝後只是一個空的框架與少數部分會一樣(如上圖),這些預覽其實大都只是「示意」畫面而已。

觀念5:佈景主題的Demo修改問題

付費主題一般都會提供Demo讓你匯入,就可以馬上讓你的網站跟它的Demo站完全一模一樣,很棒吧?才不是呢,後面你就知道苦在哪裡了!

美美的Demo是糖衣毒藥

例如這個付費主題「Flatsome」的Demo站,看上去每個可匯入的Demo是非常棒,好像匯入後網站就可以直接上線了,對吧?

實際上你會遇到的問題有很多:

問題(1):Demo數量

匯入的Demo有太多頁了(有些會有30幾頁以上),你必須思考如何選擇性的刪除與保留,也包含主選單或相關連結。

問題(2):切版問題

你網站實際上的資料量,例如文案、圖片,一定要在Demo頁上去替換成你的圖文,而Demo網頁上有幾張圖,你就得準備幾張圖去替換,Demo網頁上有幾個段落的文字,你就得硬生出那樣數量的文字去替換,所以對Demo頁的修改,你新手能做的只是換圖換字而已。

另外,想進入一步修改,會發現Demo網頁上切割好的版位可能太多或太少 ,你還得學習研究它自帶的編輯器來摸索怎樣「切版」,才能增加或刪除每一網頁上的版位區塊。(自帶的編輯器大都很難用)

問題(3):自帶編輯器的問題

每個佈景主題大都有自帶編輯器,每個佈景主題都各自為政,而且未來一更換主題,不僅須得重新學習新的編輯器怎樣用,而原主題編輯器所製作的內容很可能就會變成「原始亂碼」的狀態。(後面會教怎樣才能避免此情形)

問題(4):自帶外掛的連動關係

Demo匯入時也會同時匯入很多外掛,這些外掛可能有互相搭配的效應,所以你必須研究出哪支外掛用在哪裡、控制了哪裡,與哪一支外掛做了連動控制,對新手而言要搞清楚這些「因果關係」其實有很多的門檻。

有些匯入的外掛其實很難用很複雜,同樣的功能我們可以透過前人的經驗來安裝更適當更好上手的外掛。

 

觀念4:佈景主題只要「慣用一套」就好了

為了增加你對佈景主題的「自訂」熟悉度與了解它的極限在哪,強烈建議只要慣用1~2套主題就好了,所以要慎選主題,這很重要!

如何選擇適當的佈景主題?

1、不需要內建多功能的佈景主題

一開始功能就是歸0,學習上才會沒有過大的阻礙。

2、不需匯入Demo網頁

以後想要設計出美美的網頁,我們可以靠「頁面編輯器」外掛來設計製作,不須靠修改Demo頁,也不需要另學習Demo頁的自帶編輯器,重點是以後就算換主題也不會讓我們製作的頁面效果消失不見。

3、以輕盈簡單、純框架式的主題就好

主要是為了減少學習複雜度與避免內建太多東西而影響網頁效能速度。

4、不足的功能怎麼辦?

以後會以「外掛」為導向,用「堆積木」的概念把想要的功能慢慢堆疊出來,想要什麼功能再裝外掛就好,不需一開始就內建或匯入一堆功能之後才來苦思怎樣關掉或刪掉。

如果你真的很想試試買了付費版型好不好用,那也可以買來親身體驗看看囉!

 

13_WordPress後台快速說明

前言

剛安裝好WordPress時,如上圖,這是一個最原始最乾淨的WordPress後台,左邊的功能選項也僅短短數個,隨著未來慢慢安裝擴充外掛,這些左側選項也會慢慢變多變長。

介紹

控制台/首頁 :主要呈現一些此站的相關資訊、或未來有裝擴充外掛時,有些外掛會有些資訊也會呈現在這裡。

控制台/更新 : 這個頁面會顯示更新、設定自動更新及哪些外掛或佈景主題需要更新的相關資訊。

文章頁面媒體 : 為預設的可新增資料的資料區,這容後面再述。

留言 : 文章或頁面有開放留言時,後台會統一在此頁可見所有所有留言與管理留言。

*外觀 : 安裝佈景主題、設定選單的地方。

*外掛 : 安裝擴充外掛的地方。

使用者 : 新增或管理所有不同權限使用者的地方,包含一般訂閱文章的網友名單也會在此呈現。

工具 : 此區比較少用,但有些外掛安裝後的設定頁面會落在此處。

設定 : 網站初始設定的地方,有些外掛安裝後的設定頁面也會落在此處。容後面再述。

以上僅須先基本了解即可,而且有些後台頁面其實很少會用到,故初期不必過度探索。

12_登入網站後的初始化設定

簡介 :

一個全新的網站須先做點基本設定,就跟新手機剛入手時也須做點基本設定,以利後續的運作。

實作開始 :

1、路徑 : 設定/一般

對照下圖與說明自行調整,這個以後可以隨時更動。

網站標題 : 幫自己網站想一個名字,品牌名、公司名都可。

網站說明 : 此網站的簡短說明,大概10~20字即可。

網站圖示 : 不是Logo,可以當它是「網址圖示」,在瀏覽器頁籤會出現的識別小圖示。(下載Demo圖來上傳練習)

*WordPress位址 : 此處不要亂動,除非會造成網站無法登入。

*網站位址 :此處不要亂動,除非會造成網站無法登入。

會員資格 : 不要勾,勾了會一堆機器人來註冊。(如果以後需要有加入會員功能,會用外掛方式來做,故此可以安心先不要勾)

網站介面語言 : 繁體中文或隨你高興。

日期格式 : 如圖即可。

時間格式 : 如圖即可。

完成後按下存檔即可。


2、設定/媒體

設定WordPress網站會自動產生的的圖尺寸。

WordPress都會預設幫我們產生不同尺寸的縮圖,這有利於網頁載入的速度,這是一種貼心,但這樣子每上傳一張圖就會多產生3種尺寸,比較浪費空間。

而後面會安裝佈景主題後,佈景主題也有它自行要用的縮圖尺寸,佈景主題不一定會吃以上3種內建的縮圖,不同的佈景主題可能會自己產生要用的縮圖尺寸,這樣你又會再多3張縮圖,所以每上傳1張圖就得多產生6張縮圖,為了節省空間,我們讓佈景主題自己去產生縮圖就好,故如上圖把內建的縮圖功能關掉。

當然你不關也可以的。


 

3、設定/永久連結

永久連結 : 指的是網址的架構或稱為格式,指的是每頁網頁或每篇文章在主網址 abc.com後面的名稱或代號,例如「 https://smallway.com.tw/網頁設計/ 」,主網址後面那串就是每一頁網頁的代稱或名稱。

一般預設是「postname」,即主網址後面就是你該網頁或文章的標題,可自行修改成中文、英文、數字或英數混合,新手架站暫以此「postname」為設定即可。

以下為「永久連結」的補充說明,若覺得太複雜可先略過:

吸收更多

我們可以在自訂結構中,刪掉postname後重新點選下方不同的格式,也可以同時選擇多種格式並透過斜線區隔來拼湊出想要的格式,例如新聞網站常用的是「年月日+post_id」來作為每篇文章的網址格式,這樣易於一眼判別是何時的新聞文章。

不過,這邊我們就統一『post_id』就好,這樣你寫文章時就不用篇篇去把把網址後面(slug)名稱都手動改成英文。

以「postname」而言 以「post_id」而言
頁面文章都可以自由修改網址後面的名稱或代稱。 頁面可以自由修改網址後面的名稱或代稱,但文章不行,文章網址會自動套上流水id當文章網址。
https://smallway.com.tw/關於我們 → 可以再自改成 https://smallway.com.tw/about
如果網站會寫大量文章,我習慣用這樣的格式。

注意1 :
有些新網站在永久連結中的格式沒設定好,會造成每篇文章點進去就404找不到網頁。

注意2 :
永久連結(即網址格式)一開始定好後,以後就不要亂改,以免網址已經被google收錄一段時間後有人搜尋點進來會找不到網頁。
如果一段時間真的有必要性要調整,就得另做好「301轉址」的對應設定,才會讓舊格式網址自動跳轉至新網址的格式。

4、設定/討論

4.1 關閉留言審核

這樣訪客的留言就會不用經批准就會出現留言區。

4.2 設定訪客留言者的頭貼

設定成自動產生。

以上是我覺得最基本的初始化設定,請務必先完成。

維護模式:

如果網站暫時不想被搜尋引擎收錄,也不想讓別人看到製作中的半成品,可以考慮先使用「維護模式」的外掛來讓網站每一頁都變成「維護中」的字樣。

每日登入可以累積學習幣!

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 9 個使用者: 1 個成員5 個訪客3 個檢索機器人

線上同時最多使用者人數為 121 個使用者,發生於 2024-05-1419:40

1 個成員 正在線上

#1 – Facy 於 2025-05-0300:53
WordPress教學問答大全 – 架站勤拿手 [網址] [參照連結網址]

5 個訪客 正在線上

#1 – 訪客 於 2025-05-0300:55
post-tree – 架站勤拿手 [網址] [參照連結網址]

#2 – 訪客 於 2025-05-0300:53
post-tree – 架站勤拿手 [網址] [參照連結網址]

#3 – 訪客 於 2025-05-0300:53
post-tree – 架站勤拿手 [網址] [參照連結網址]

#4 – 訪客 於 2025-05-0300:51
post-tree – 架站勤拿手 [網址] [參照連結網址]

#5 – 訪客 於 2025-05-0300:51
post-tree – 架站勤拿手 [網址] [參照連結網址]

3 個檢索機器人 正在線上

#1 – ClaudeBot 於 2025-05-0300:55
架站勤拿手 » ALL POST - 架站勤拿手 [網址]

#2 – Ahrefs 於 2025-05-0300:53
架站勤拿手 » post-tree - 架站勤拿手 [網址]

#3 – PetalBot 於 2025-05-0300:51
架站勤拿手「安裝」的搜尋結果 - 第 7 頁 - 架站勤拿手 [網址] [參照連結網址]