ALL POST - 架站勤拿手

型錄式購物商店概略製作流程(可詢價用、可外連賣場)

2025-01-02 尚無留言

前言

『型錄式』購物商店，主要用來純做大量的商品展示與每一商品的全文介紹，在展示中與一般的正式商店沒兩樣，只差在它「無站內購物、無會員註冊登入、無付款方式無物流方式」，但可以讓每個商品連結至外部賣場或是連結至指定網址，當然可以設定#空連結來不外連。

用途

純展示詢價用(例如家具、大型機台、儀器設備)。

或

連到其它平台賣場做交易。

型錄式購物商店概略製作流程(可詢價用、可外連賣場)-1

操作步驟

1、安裝Woocommerce

後台搜尋安裝外掛「Woocommerce」，安裝後啟動。

型錄式購物商店概略製作流程(可詢價用、可外連賣場)-6

2、先略過設定精靈

因目的是僅做為「型錄式」商店，不必做過多設定，一切保留預設即可，故可略過。

(如果沒跳出引導精靈，則直接進行商品上架)

3、商品上架(每一商品設定外部/加盟商品)

Demo商品匯入檔 : 按右鍵下載

直接把想要「純展示不開放站內購物」的商品做商品上架。

至後台新增商品，填入商品名稱、價錢、分類、商品網址。

型錄式購物商店概略製作流程(可詢價用、可外連賣場)-2

「商品網址」的填入是必須的，可填入外部賣場網址(或其它連結)或#字號(空連結)。

型錄式購物商店概略製作流程(可詢價用、可外連賣場)-5

型錄式購物商店概略製作流程(可詢價用、可外連賣場)-4

4、把商店入口頁(商品列表)置入選單中

至後台外觀/選單，把Woocommerce所產生的「商店」頁(或shop頁)置入選單中。

此頁是「商品列表」用來列出所有已上架之商品清單。

6、用Elementor美化商店頁

Woocommerce所產生的「商店」頁可以用Elementor做基本的美化，或是再進階一點可以把列表的每一格也進行模版設計以套用所有的列表格。

5、停用我的帳號頁

至後台/頁面，把Woocommerce所產生的「我的帳號」頁面暫時設成草稿，以免有人從此頁進行購買卻失敗。

總結

以上完成後，就可以讓形象官網可以展示商品做為詢價用、也可以讓每一商品的購買按鈕可以對應外部賣場的連結。

[字型]Elementor常見字型的選擇

2024-12-22 尚無留言

簡介

在Elementor中，不管是標題、內容編輯器、按鈕…都可自由選擇字體，這邊把覺得不錯的字體記錄在此，以便設計網頁時可選擇。

範例

以下範例文字中有中文也有英文，但有些字體可能僅支援中文或僅支援英文，請自行觀看範例中的文字的字型是否有所變化即知。

字型 : Noto Serif TC

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Caveat

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Caudex

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Zen Loop

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

先整理這些，再慢慢補上。

總結

有時候選用不同的字型，會讓網頁呈現不同的感覺，特別是在網頁文字中有「英文」時，建議可另選其它英文字型來比較看看。

[空白間隔]可用做不同的變化，例如點綴背景

2024-12-22 尚無留言

「空白間隔」，一般只被用來做一個元素與元素之間的間隔，實際上它也可以多種延伸變化的。

[空白間隔]可用做不同的變化，例如點綴背景-1

一、用途1:做成點綴背景

如下圖，可以利用空白間隔做出一個小純素背景，然後點綴在區塊容器的四周，或微微去壓到文字，製造出立體感。

[空白間隔]可用做不同的變化，例如點綴背景-2

作法提示:

1、在要製作點綴背景的容器中，拉一空白間隔，並調整適當寬度。

2、替空白間隔設一純素背景。

3、把空白間隔設定「寬度為○○px」。(進階/寬度/自訂)

4、把空白間隔設定「絕對定位」。(進階/位置/絕對)。

二、用途2:做成幾何圖形

可製出大小不同的幾何圖形，例如圓形，製完後亦可與用途1一樣來當綴網頁。

[空白間隔]可用做不同的變化，例如點綴背景-3

作法提示:

1、在要製作點綴背景的容器中，拉一空白間隔，並調整適當寬度(控制圖形大小)。

2、替空白間隔設一純素背景。

3、替空白間院設定「Mask」，選擇圖形。(進階/Mask/形狀)

4、把空白間隔設定「絕對定位」。(進階/位置/絕對)。

5、或是把空白間隔設定「固定定位」，把圖形製小比例後固定在整個視窗的邊緣適當處。(進階/位置/固定)。

—

空白間隔尚可做出其它圖形:

請在『transform」中自行變化。

[空白間隔]可用做不同的變化，例如點綴背景-4

是否有「Figma匯入WordPress或Elementor」的方式呢？

2024-12-22 尚無留言

有些人會想問是否有「Figma匯入WordPress或Elementor」的方式呢？

初期我是回答「沒有」，但想不到在國外外掛商有開發出來，可參考:

https://uichemy.com/help/figma-to-elementor/

是否有「Figma匯入WordPress或Elementor」的方式呢？-1

這是一支付費外掛，我尚未有使用過的經驗，也不知匯入後真的無縫接軌，或是有許多細節仍得再一一重製過？推測應不太可能無縫接軌，這種從另一平台導出再匯入另一平台的未知變數太多了，例如WordPress常常在更新改版，有時候版本不一樣在從Figma匯入後或許就會有新的落差。

再來，若是在Figma上設計複雜的排版或繁多的元素，在使用Figma匯入WordPress或Elementor時，可能會有更大的落差，目前網路上文章很少人介紹這類的用法，可能真的沒那麼好用吧!?

我個人是不偏向在Figma直接設計網頁再導入WordPress的作法，我偏向把Figma當作是「設計初稿」與客戶溝通視覺版面，在版面定案後再正式從WordPress中使用Elementor編輯器去按照Figma的稿圖來切版，我也問過資深有在使用Figma的同行，他也是如我上面所說，僅用來當作是「設計初稿」使用而已。

08_原本正常卻突然在某一日頁面版型全跑版走鐘

2024-12-20 尚無留言

用Elementor做的網頁，每一日原本都很正常呈現但卻在某一日突然每一頁版面都走鐘了、區塊元素都跑出原本的位置、甚至連色彩也都變成不是原本所設計的顏色了，這個情況出現機率不高，但出現時我們可以先做2個動作，若這2個動作仍無法恢復正常，再來尋其它原因。

1、重新產生Elementor樣式檔案

如下圖點擊，讓Elementor編輯器重新產生樣式檔案。

08_原本正常卻突然在某一日頁面版型全跑版走鐘-1

2、關閉Elementor的內建快取

用WordPress架站幾乎每個站都會安裝快取功能以提升網頁速度，但Elementor也有自己內建快取，故若兩種快取功能若同時啟動，有時候就會造成版面異常，故快取功能僅能保留一種即可。

以下圖方式，即可關閉Elementor的內建快取。

08_原本正常卻突然在某一日頁面版型全跑版走鐘-2

若以上兩個動作完成後版面仍異常，此時再來思考是否其它因素造成，例如最常見的就是近期可能更新某某外掛後所引起、或是有自行插入自訂程式碼之類的原因。

WordPress的五種角色預設權限

2024-08-29 尚無留言

這是WordPress預設的五種角色權限，若有替網站後台設多個使用者，請給予「適當的角色」，不要清一色都給「管理員」權限喔，特別是公司給予員工新創帳號時，不要一下子就給到「管理員」的權限。

另基於資安考量，也不要把管理員權限給予太多人，避免有人在不同電腦或家裡電腦中毒時造成管理員的密碼外洩。

角色權限名稱	預設權限	備註
訂閱者	只有閱讀權限，可以修改自己的個人資料，例如暱稱、聯繫信息、密碼等。	如果是電商網站，會再多一個「客戶」的權限，而客戶的權限與訂閱者基本上是一樣的，只是名稱不同。
寫手	具有訂閱者的所有權限。可以發表文章，但需要經過管理員審核後才能在前台上顯示出來；對待審核中的文章可以編輯，但對已通過審核的文章不能編輯。
作者	具有投稿者的所有權限。發布文章不需要審核，並且可以編輯已通過審核的文章，還可以上傳文件和使用媒體庫。
編輯	具有作者的所有權限。可以對文章標籤、分類進行管理，可以添加或編輯頁面、可以上傳文件等等。編輯擁有除系統功能設置外的所有權限。
管理員	可以控制用戶寫文章、創建頁面、管理插件、管理主題，以及管理其他用戶的權限。管理員可以通過後天分配用戶權限。另外，管理員還可以刪除管理員！所以這個權限的角色務必要保護好！

一般公司給員工的權限，若不知該如何選，就給到「編輯」就好，這樣讓他寫文章、做文章分類、上傳圖檔等，應就很夠了。

以上是預設權限，除非經過「客製化」設計，不然一般就以上述為主，經過客製化設計就可以把權限精密的分級與套用，但一般性網站以上述權限分級就很夠用了。

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因

2024-08-10 尚無留言

前言

多國語系外掛，有好多種選擇，每一套都有優劣之處，但這套『Translate Multilingual sites – TranslatePress』我使用了2次在客戶網站上，有點心得讓我覺得不再使用，也不推薦。

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因-2

不推薦原因

這套『Translate Multilingual sites – TranslatePress』看上去很直覺，直接對照原文並輸入譯文即可，一開始會覺得翻多國語系超方便!

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因-5

但實際使用與後續管理上有一些原因讓人覺得很不方便 :

以Elementor製作中文版網頁再加製英文語系來說明，如下:

1、版型

這套『Translate Multilingual sites – TranslatePress』的多國語系的架構處理上，它雖可呈現多語系但同一頁面或同一文章的id都不變，也就是在同一網頁上去輸入譯文，故版型上也是同一個，~~無法讓你在英文版型上來個別調整英文版的版型~~。

這會造成，若英文版的有些區塊不想呈現，只能寫jQuery去判斷當下這頁是英文版然後再把想隱藏的區塊隱藏。

或是英文版的因英文單字過多過長，造成版型排列上想做一下不同排列方式(例如左右並排改成上下排列))，很抱歉也無法，因它與中文版共用版型，故不支援單獨調整英文版頁面的版型。

2、修改中文會讓英文的譯文消失

假設中、英文已完成翻譯，但中文字句原有10個字，在中文字句第2個字後面再加上一個字，則此段中文字在已翻好的英文字句上，整段英文字句會消失，須再進入英文頁再把譯文重新輸入，這一點我覺得很不方便。

原因也是與第1點所述有關，它中文與英文並非是獨立的2頁。

3、點閱統計

如第1點所述，它中文與英文並非是各自獨立的1頁，故點閱統計的外掛無法個別統計中文、英文的瀏覽數。

總結

綜合以上幾點，下次製作多國語系時我不再考慮使用這一套。

在Elementor中自動播放音樂

2024-07-30 尚無留言

簡介

想在Elementor中插入一段自動播放音樂的語法，但是現在主流的瀏覽器都禁止自動播放了，但我們仍可透過jQuery來間接達成。

範例

下列播放器會自動播放 :

(先靜等幾秒讓音樂載入才有「自動播放」的聲音!)

原理與思路

用html原始語法，再用jQuery偵側當網頁的「body」(網頁任何一處)被點擊時，就連帶觸發自動點擊播放。

實作

拉html元素工具，再貼上下列語法即可。

				
					<audio class="myaudio" controls  loop>

        <source src="https://0800happy.com/wp-content/uploads/2023/07/%E9%99%B8%E8%BB%8D%E8%BB%8D%E6%AD%8C-%E6%BC%94%E5%A5%8F%E6%9B%B2.mp3" type="audio/mpeg"/>
        Your browser does not support the audio element.
</audio>

<script>
( function($) {
$(window).load(function() {
//======================================

 $("body").one("click", function() {
                console.log("Auto play");
                var audioElement = $(".myaudio")[0];
                audioElement.play();
                $(".myaudio").click();
            });
   

//======================================
}); //end load
})(jQuery);
</script>

以上的程式碼，只會讓body被點擊的第一次觸發自動播放，不會連續觸發。

總結

自動播放有時候很擾民，並不是友善的作法，建議三思!!!

現在進場的是，陸軍586旅砲兵營營部連…

[切版]容器水平排列時之高度不等高的解法

2024-07-16 尚無留言

前言

有時候會把容器做水平排列的區塊，而每個區塊中有一些文字，當文字長度不一樣時就會造成「容器不等高」，嚴格說不是不等高，而是容器的高度沒有剛好被資料填滿，造成視覺上好像不一樣高。

範例

▼調整前

[切版]容器水平排列時之高度不等高的解法-2

▼調整後

[切版]容器水平排列時之高度不等高的解法-4

實作

更改主管理員Email的二個方式

2024-06-27 尚無留言

當網站初建立時的「第一個管理員」的Email會被當成是「主要管理員的Email」，網站各式通知信主要都會通知給這個信箱，若您想更換主管理員的信箱，有以下二個方式，可二選一:

方式一、建立一個新的管理員

1.創立新管理員(用您的信箱)

更改主管理員Email的二個方式-2

2.把原本主管理員刪除或降級

再進後台/全部使用者，找到原本的主管理員，可以把它刪除，或是點編輯，把它的角色改成較低權限(只要非網站管理員即可)，如下圖:

更改主管理員Email的二個方式-4

建議是先「降級」至最低「訂閱者」即可，這樣它就無法進後台了，也失去管理員功能，未來有必要再整個刪除它。

方式二:使用更改管理員信箱之外掛

如果沒有先照下方流程事先安裝一個「Change Admin Email」外掛，就直接修改主管理員的Email，那麼就會遇上需要驗證信箱的狀況，但若網站還沒有加入相關SMTP的發信服務驗證是無法寄出通知信的，故就會如下圖一直卡在那邊無法驗證，所以我們就可以透過「Change Admin Email」外掛來繞過驗證信箱這環節。

更改主管理員Email的二個方式-10

1、安裝外掛

後台安裝搜尋「Change Admin Email」，安裝成功後並啟用。

更改主管理員Email的二個方式-6

2、直接修改主管理員Email

外掛安裝好之後，才能進行這個步驟。

至後台/設定/一般，如下圖，直接輸入你想要的信箱，再點「Test」即可取代之，就不用像之前那樣尚須做Email驗證。

更改主管理員Email的二個方式-7

前言

用途

操作步驟

1、安裝Woocommerce

2、先略過設定精靈

3、商品上架(每一商品設定外部/加盟商品)

4、把商店入口頁(商品列表)置入選單中

6、用Elementor美化商店頁

5、停用我的帳號頁

總結

簡介

範例

總結

一、用途1:做成點綴背景

二、用途2:做成幾何圖形

—

1、重新產生Elementor樣式檔案

2、關閉Elementor的內建快取

前言

不推薦原因

1、版型

2、修改中文會讓英文的譯文消失

3、點閱統計

總結

簡介

範例

原理與思路

實作

總結

前言

範例

實作

方式一、建立一個新的管理員

1.創立新管理員(用您的信箱)

2.把原本主管理員刪除或降級

方式二:使用更改管理員信箱之外掛

1、安裝外掛

2、直接修改主管理員Email

章節

1 個成員 正在線上

10 個訪客 正在線上

1 個檢索機器人 正在線上

1 個成員正在線上

10 個訪客正在線上

1 個檢索機器人正在線上