ALL POST - 架站勤拿手

如何讓Elementor文章列表標題前面可以自動加上數字順序？

2022-08-02 尚無留言

簡介

Elementor Pro的文章工具可以用來製作部落格文章清單，但若文章列表改成無「精選圖片」的純標題，感覺上視覺有點單調，所以可以加一段小語法讓文章標題列表前面有1234的順序，讓視覺上比較有順暢感。

運用範圍

只要是Elementor Pro內建的Post文章工具所產生的文章列表都可以使用，一般會用在「最新公告」或「最新文章」之類的。

範例

文章標題前面都會自動加上數字的順序。

原理與思路

這個是利用CSS的一個計數功能，父元素用counter-reset聲明一個計數器，然後子元素通過content屬性和counter方法來使用這個計數器。

可以不懂沒關係，只要複製貼上就會有效果了。

實作

在Elementor 的文章先設定成沒有圖片的純標題。

在Post文章工具的進階/自訂CSS樣式或左下角齒輪設定中，貼上下列CSS語法即可。

				
					/* 文章標題前面可以自動加上數字順序 */
.counter{
    counter-reset:num;
}
.counter a::before{
  counter-increment:num; 
  content:counter(num) ;
  border:1px solid;
  padding:3px 5px;
  background:#009ee2;
  color:#ffffff;
}

你可以再自己修改CSS中的一些數值，例如背景色(background)，或border-radius(弧度100%)改成圓形、font-size等等。

影片

總結

這是比較粗淺的小技巧，所以如果文章多篇有分頁，點擊分頁後的文章列表仍是從1開始數喔，這一點要特別注意。

如何切版時切出無限的inner section(大段無限往下包小段)?

2022-08-02 尚無留言

簡介

Elementor的工具有一個叫「inner section」我在幫學員上課時，我自己給了個名稱叫「大段包小段」，它預設只能2層，也就是大段只能在它內部包一個小段，而小段裡面就不能再包更多層的小段了(inner section)，但我試出一個方法很有趣，如下面的範例圖，我可以包很多層的小段(inner section)，似乎可以無限下去。

運用範圍

複雜的切版，尤其是在首頁須放大量資訊時常會可能會有機會用到。

範例

原理與思路

略。

實作

文字說明可能不易表達，直接見影片。

影片

總結

這種更細的切版一般是不會用到，除非是同一頁中想把較大的資料量很精細的分配在不同的大小區塊，才比較有可能會用到，另也有其它擴充外掛可以做到同樣的效果，有機會再另寫一篇。

討論串

2022/8/2 補充 :

新版的Elementor已開放「Flexbox Container」的方式來排版(須在後台手動打開此設定 : Elementor/設定/Experiments)，在「Flexbox Container」的模式就沒有「段、欄」這種區塊，用「Flexbox Container」的方式來切版就可以在大容器中無限往下包小容器了!

不過「Flexbox Container」的排版模式比較進階，對新手恐不易上手，新手仍建議先以傳統的「段、欄」來排版就好!

如何點擊文章(post wiget)分頁時，網頁載入後可以自動滑動到該文章區塊的開始處呢？

2022-08-01 尚無留言

簡介 :

Elementor的 Post Wiget(文章列表)有時候是放在網頁比較中小的位置，所以當讀者點下分頁時，整個頁面會重新載入但載入完後會停留在頁面開始處，所以必須手動再把頁面往下捲動到Post Wiget(文章列表)處的區塊才看到的分頁資料，這在使用體驗上並不是很好的體驗。

運用範圍 :

只要是Elementor中的Post widget或是product list，具有分頁的元素工具，都適用。

範例 :

下列的文章列表的下方有分頁，可以試點看看，它會在頁面重新載入後自動把畫面定位在文章起始處的區塊。

如何取得「PayPal」的串接憑證給Woocommerce作為收款方式使用？

首先當然是得有PayPal帳號，然後按照下方流程即可取得PayPal的串接憑證給

[html]三種空白符號的用法

說明: WordPress中有時候需要用「空白」來讓某欄位或某區塊是無文字的狀態

如何限制文章重要內容讓有每月訂閱的會員才能閱讀？

這需求也常常在討論社團中有人發問，我也幫數個客戶做過這樣的功能，不過要寫成教學文

概說Woocommerce

什麼是Woocommerce ? 『Woocommerce』是一個購物商店的外掛

原理與思路 :

可以用「錨點」的方式，就可以讓頁面滑動到Post Wiget(文章列表)的區塊。

所以可寫一段jQuery在網頁載入時幫每個分頁的網址都加入一個錨點，例如幫每個分頁的網址加入「#list-top」，然後把那個post widget設一個ID叫「#list-top」，這樣有人點分頁時在網頁載入時之後就會自動滑到Post Wiget(文章列表)了。

實作 :

1、設定CSS ID

先幫Post Wiget工具設一個CSS ID，例如:「list-top」。

2、在此頁任意處拉一個html工具，或把html工具拖拉至該post widget的下方，再貼上下列語法即可。

				
					<script>
( function($) {
$(window).load(function() {
$(".page-numbers").each(function() {
 var h = $(this).attr("href");
 var h = h + "#list-top";
 $(this).attr("href",h);
});
}); 
})(jQuery);
</script>

總結 :

一般而言是用ajax的方式才會讓畫面不重新載入與移動可以獲得分頁的資料，但若沒有使用ajax或不會ajax的技術的話，這個方式就可以有類似效果了。

簡介 :

Elementor無法順利載入完成或出現一些錯誤警示，可能的原因滿多種的，就把遇過的記錄在此，供debug時有個參考方向。

可能原因 :

錯誤或警示	可能原因
一直呈現載入中	這是最最最常見的，一般都是「外掛衝突」，請配合「Health Check & Troubleshooting」外掛來停用所有外掛試試。
500 error	存檔時出現。一般是主機資源不足。一台主機下面架太多個網站，造成Elementor沒有足夠的資源可以使用。
403 error	防火牆「Wordfence」的影響。防火牆Wordfence的「學習模式」打開就好了，並可以設定讓他自動學習七日，在學習模式的七日內你再去做Elementor的存檔，它就會學起來知道你這是正常動作，就不會再擋你不讓你存檔了。
仍呈現載入中	「GTM] 代碼先停用，或改埋在「footer」中試試。

總結 :

老實說，可能的原因有很多種，我也是在遇上時剛好有機會可以順便記錄下來，如果網友們也有類似的情況與解決方式可以分享，歡迎在下方留言。

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

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

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

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

GO !

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

2022-07-19 尚無留言

前言

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

如何進入自訂？

方式有二，

方式1 : 從前台

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

方式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_建立主選單

2022-07-19 尚無留言

前言

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

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

1、建立主選單名稱

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

20_建立主選單-23

2、拖立頁面名稱至右側

20_建立主選單-22

3、排序選單

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

20_建立主選單-24

4、移除選單

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

20_建立主選單-27

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

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

自訂連結用法 :

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

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

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

20_建立主選單-26

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

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

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

6、完成後預覽

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

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

7、總結

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

考考你

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

Answer

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

2022-07-19 尚無留言

前言

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

安裝佈景主題Hello Elementor

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

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

安裝完後按下啟用。

後台版面

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

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

前台版面

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

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

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

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

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

2022-07-19 尚無留言

前言

佈景主題安裝至少有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_後台兩大資料區(頁面&文章)與使用時機

2022-07-19 尚無留言

前言

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

頁面vs文章

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

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

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

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

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

考考你

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

Answer

吸收更多

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

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

簡介

運用範圍

範例

原理與思路

實作

影片

總結

簡介

運用範圍

範例

原理與思路

實作

影片

總結

簡介 :

運用範圍 :

範例 :

原理與思路 :

實作 :

總結 :

簡介 :

可能原因 :

總結 :

前言

如何進入自訂？

方式1 : 從前台

方式2 : 從後台

常會設定的項目

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

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

前言

1、建立主選單名稱

2、拖立頁面名稱至右側

3、排序選單

4、移除選單

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

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

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

6、完成後預覽

7、總結

前言

安裝佈景主題Hello Elementor

後台版面

前台版面

前言

安裝佈景主題的方式

1、後台「搜尋」安裝

2、後台「上傳」安裝

3、從「FTP上傳」安裝

總結

前言

頁面vs文章

章節

5 個訪客 正在線上

7 個檢索機器人 正在線上

5 個訪客正在線上

7 個檢索機器人正在線上