ALL POST - 架站勤拿手

19_建立想要的頁面

2023-01-24 尚無留言

前言

現在要來利用WordPress的後台資料區來開始建立「頁面」了，我們可以先想好要建立哪些頁面，然後再把這些頁面置入主選單中，這樣訪客就可以切換瀏覽不同頁面的介紹內容。

以簡單的形象網站而言(初學架構暫都不考慮電商功能)，一開始的規劃上可以考慮建立以下的頁面:

頁面名稱	說明
首頁	能放置多樣化的資料，可呈現標語、宣傳文案、近期動態、可摘要呈現其它頁面的內容、問與答等等，發揮巧思去設計。
關於我們	公司的起源、事績、理念、團隊等等的介紹。
服務介紹	公司的服務項目、說明，必要時也可以列出基本方案價。
作品案例	呈現以往服務過的案例照片，可以用純圖片或文章方式呈現。
聯絡我們	放置公司的聯繫方式、交通資訊、留言表單。

實作

開始建立上述表格中提到的頁面。

1、路徑 : 頁面/全部頁面

在此可以看到有預設二篇頁面，要先保留或刪除都可以。

請點「新增頁面」。

2、關掉全螢幕模式

19_建立想要的頁面-13

3、新增頁面:

輸入頁面名稱為「首頁」，右上要存草稿或點發佈，都可，不過稍候我們會把此頁面加入主選單中，所以此處須先點「發佈」(按2次)讓頁面先上線，這樣才能置入在主選單中。

19_建立想要的頁面-14

19_建立想要的頁面-15

3、修改此頁網址(slug)

由於頁面名稱剛剛是用中文「首頁」來當名稱，故頁面的「網址」後面的呈現預設就是以頁面名稱為主，此時我們可以如下圖，幫網址的呈現上做點修改，以小寫英文相近的單字來重新命名一下，可以適時搭配底線或橫線，不可有空白或特殊字元。

19_建立想要的頁面-16

19_建立想要的頁面-17

※頁面網址的修改，在WordPress中又可稱之為修改「slug」，有時候把網址slug用有意義或關鍵字來取名，可以小小有助於SEO排名的加分，也能增加能見度 ; 再者，~~網址若含有中文，當此網址被分享至FB或LINE時就會出現網址亂碼~~，所以把網址slug的中文名稱改掉就可避免此情形。

4、反覆建立其它名稱的頁面

按照上面方式，把其它頁面也一一建立起來。

總結

頁面建立好後，在前台時不會像文章那樣有「文章列表」可以直接被列出來，而是必須把頁面的連結置入「頁首的選單」中，才能被看到被點擊瀏覽喔，所以接下來，下一章節我們就來重新再微調一下主選單的連結。

[localwp]電腦本機站如何建立一個WordPress練習環境？

2023-01-21 6 則留言

前言

一般而言，如果已經決定好架設一個新網站並開始設計，就~~不建議用本篇教的「建立本機端」的網站~~，因為在本機端的WordPress網站與實際架在雲端上的主機的網站，在功能運作上仍會有所差異，例如有時候本機端會無法完全運作出來一些與SMTP收發信相關功能的效果，例如「填寫表單」(因本機端並沒有信件伺服器環境部署、網域也非正式網域)，也甚至本機端所架設好的網站實際上傳至雲端上主機後也可能會有相容性的問題發生，所以只有以下幾種情境您比較適合使用這種「本機端的WordPress網站」。

建議適用「本機端的WordPress網站」的情境 :

上課教學、學員練習使用。
設計師或工程師在測試一些個別功能或效果時使用。
在本機端製作網站並在上傳至正式主機後，若遇運作異常但有能力處理的人。

開始建立本機端的WordPress網站

1、下載「localwp」

至localwp官網下載「localwp」的安裝檔。

loclawp官網 : https://localwp.com/

2、安裝與勾選

請一直下一步的按，直至安裝完成為止。

然後如下面各圖逐一勾選一些無關緊要的選項。

★上圖，安裝路徑改成安裝在「文件」中，不要用它預設在C碟的路徑，比較不會有一些權限不足的問題。

4、建立一個新網站

5、登入網站

到了下圖時，①要先點擊，它會自動產生SSL憑證，也就是網址會變成「https」開頭的。

②是一鍵登入網站後台就不用打帳密，也可以先打開，這樣比較方便。

③因有勾②了，所以這裡的③一點擊就會自動進入網站後台了。

④是瀏覽整個網站前台，即首頁。

至此，整個本機端的WordPress環境就已架設完成了，至於如何開始設計一個新網站，就麻煩回到基本教學章節「12_WordPress後台快速說明」開始看了。

6、把本機端網站發佈正式主機

因一開始的架站並非直接從申請主機、網域開始著手，而是一開始就先走本機端架站的方式，所以若本機端的網站設計完成後真的想發佈到網路上讓大家看的見搜的到，就仍得去申請主機、網域，然後再用搬家的方式來把網站匯出並至正式的雲端上主機匯入，且須再設定網域對應、SMTP郵件發送等等的細項，並檢查功能、效果的相容性，這樣才能算完成從本地端發佈至雲端的流程。

06_網域的申請流程(Gandi)

2023-01-05 尚無留言

簡介 :

申請一個網域，是整個自架站的第一步。
如果你已經有網域了就不必再申請 !

準備 :

一張信用卡。

實作 :

1、選擇網域商

我推薦在「Gandi」或「Godaddy」買網域，這些國外網域商的網域，在購買後要與主機伺服器對應DNS的話，會在幾分鐘內立即生效，不用像國內一般的網域商的網域商在更新DNS後要等上24小時，例如中華電信、PChome、智邦等等。

這邊介紹「Gandi」網域商的申請方式。

2、前往Gandi申請

強調一下，Gandi只適合買網域，其它的服務都建議暫先不要買，包含主機服務。

前往Gandi買網域

https://gandi.link/f/079980a6

3、搜尋想要用的網域名稱

輸入想要的網域的ID，按下搜尋後，會出現「ID + 網域後綴」，如果被買走就回上一頁重新再搜一次不同的網域名稱，直至搜到想用且沒有被買走的網域為止。

ID + 網域後綴 = 你的網域名稱

06_網域的申請流程(Gandi)-12 — 選擇用什麼**網域後綴**名稱當域名的「結尾」，例如.com、.tw、.cc

網域名稱，就跟小孩取名字一樣，要好好思考喔，不要急，因網域一買就無法再修改，除非重新再買新的來替換但這樣要多花一次費用喔。

網域命名要點:

形音不混淆(例r+n 擇在一起變成「rn」會讓人混淆以為是「m」)
好記有含意
命名方向 : 品牌縮寫或雙單字或單字+數字
常以「.com.tw」、「.com」、「.tw」、「.cc」
例: mobile01.com、yes123.com

你可以把喜歡的網域名稱都先列出清單來，再好好選擇，不用馬上就定案!

4、加入購物車

如果沒有被買走的就可以直接加入購物車。(它下方其他加價的服務或項目都不要勾)

費用有時候是跳美金計價有時跳台幣計價，刷卡購買時都會自動換算回台幣。

5、加入會員才能結帳

第一次購買你可直接建立新帳戶。

如果是幫公司申請網域，建議另申請一組公司的公用Gmail信箱來使用，不要綁員工的私人信箱，以免以後離職時造成交接上的問題。

6、刷卡結帳

用信用卡結帳。

至刷卡這頁我就不再示範下去，因是在寫申請教學，故這邊就不真的刷卡下去了。

7、完成購買

刷卡成功就可以進入網域的設定後台了(後面章節另述)。

此時請先收信，信箱中會有一封信要做信箱驗證(一定要做)，收到信後點下驗證就可以了。

8、信用卡到期日加入Google行事曆

超級重要!!!

請立即打開你的Google行事曆，在信用卡到期日的前一個月提醒自己要進到網域商平台來更換卡片(延展)，否則會不小心讓自己的網域因未繳費而完全消失喔，這樣苦心設計經營的網域與流量就消失了也救不回了，這一點超重要!!!

其它說明 :

如果是幫公司申請網域，建議另申請一組公司的公司Gmail信箱來使用，不要綁員工的私人信箱，以免以後時離職造成交接上的問題與產生擁有權的問題。

[外掛]整合免費圖庫直接選圖-Instant Images

2022-12-20 尚無留言

外掛資訊

【外掛名稱】 : Instant Images
【費用】: 免費版
【官方網址】: 點此
【簡介】: 整合四大圖庫平台，讓文章的主圖、內文圖都可以從免費圖庫上搜尋圖片來插入使用，都是免費授權可安心使用。

外掛說明

後台搜尋安裝「Instant Images 」，再啟用即可。

安裝好後即可在 後台/媒體/Instant Images 搜尋相關關鍵字(須用英文搜尋)以導入圖片。

[外掛]讓網站進入維護模式-Maintenance

2022-12-09 尚無留言

外掛資訊

【外掛名稱】 : Maintenance
【費用】: 免費版
【官方網址】: 點此
【簡介】: 讓網站進入「維護中」，只有有權限的人才能瀏覽網頁。

外掛說明

新網站正在製作中或是購物網站正在進行搬家，不想讓訪客看到半成品或下單，可以使用「維護模式」讓訪客不管從哪一頁進來都只會導向至首頁並出現「維護中」相關圖字。(只有管理員不受限)

12_登入網站後的初始化設定-13 — 但WordPress內建並無這維護模式的功能，所以我們要自行安裝一支免費的外掛來處理。

如下圖搜尋「Maintenance」並點立即安裝，完成安裝後再點「啟用」即可。

再如下圖打開維護模式即可。

12_登入網站後的初始化設定-14 — 當然維護模式的字樣可以自行設定或把你的粉專、Email輸入，讓網友可以先瀏覽其他平台或聯絡你。

「維護模式」也可以延伸用來製作「公司內部網站」，只有成員才能瀏覽，這個有機會時會在後面Elementor進階的章節說明。

01_編輯器導讀

2022-09-25 尚無留言

前言

早期的網頁設計，需要學Html、CSS語法來一頁空白網頁做切版做區塊比例控制，而在WordPress世界中有一種工具叫「頁面編輯器」，可以讓我們不用學語法就可以做網頁切版排版。

在WordPress的「頁面編輯器」算是一種外掛，所以有很多軟體公司都有開發WordPress頁面編輯器來供使用者下載使用，所以「頁面編輯器」有很多款，而且彼此不相容也無法二度編輯其它編輯器所排版好的內容。

1、要用哪一款編輯器？

「頁面編輯器」有很多款，有些很冷門、有些很難用、有些客製化程度不高，所以要學就選好用、有前景的編輯器。

在本站中要教學的頁面編輯器叫「Elementor」，是目前整個WordPress世界中排名第一、功能最強大、客製化網頁程度最高的一款編輯器，

2、編輯器只要專精一款就夠了

「頁面編輯器」有很多款，學頁面編輯器只要專精一款即可，把它學深學廣，就可以越來越熟、越來越有心得、越來越控制自如。

3、編輯器外掛不能停用

剛說過，頁面編輯器是「外掛」，所以必須讓它常駐不能停用它，若隨意停用它，原本已做好的網頁會整個版本無法呈現原有的版型效果，甚至會有亂碼跑出來。

以上觀念請先建立再繼續下一篇。

—

其它參考 : Elementor官方教學文件

WordPress「.com租用站」真的沒有FTP可以用嗎？

2022-08-30 尚無留言

一般人以為WordPress如果不是使用「自架站」的方式就無法使用FTP或SFTP的服務，我也是這麼認為的，但後來因某客戶需求我上網查了一下，如果你是租用「商務版」以上的方案就有資格可以使用FTP或SFTP。

什麼是 SFTP？

SFTP 是一種讓你從本機電腦上，透過用戶端程式 (例如 Filezilla) 存取網站檔案和資料夾的方式。

SFTP 是安全檔案傳輸通訊協定 (或 SSH 檔案傳輸通訊協定) 的縮寫。同時也是 SSH (安全殼層) 通訊協定的延伸模組。名稱中有「安全」二字，是因為其透過安全通道 (意即 SSH) 來傳輸資料。

SFTP 與檔案傳輸通訊協定 (FTP) 類似，但 FTP 並不安全，兩者不應混為一談。SFTP 的安全性可確保你的檔案和網站安全無虞。

以上文謅謅的解說截自wordpre[.]com的官方，簡單說就是一種從個人電腦本機端利用檔案管理軟體連上網站管理資料夾的一種模式，只有在特殊需求才用的到，例如要大量上傳檔案、文件，或網站故障排除時。

WordPress 「.org自架站」的方式，也就是租主機的方式來架設WordPress網站就一定有這個服務可以用，而以WordPress 「.com租用站」的方式來租用WordPress網站的話，租用的方案較低階或使用免費版的人就無法使用FTP或SFTP的服務。

WordPress 「.org自架站」與 WordPress 「.com租用站」的差異，仍不了解的人可以參考這篇《WordPress 之org與com的差別》。

WordPress 「.com租用站」可以使用SFTP

此功能適用於 WordPress.com 商用版或電子商務版方案的網站。如果你的網站使用我們的任一舊版方案，則此功能可在專業版方案使用。

也就是 : 商務版才能係用SFTP功能。

取得SFTP帳密(登入資訊)

前往「我的網站」→「設定」→「主機設定」存取網站的 SFTP 選項。

你也可以點此前往對應的後台介面 : https://wordpress.com/hosting-config

依預設，系統不會建立 SFTP 使用者。第一次使用此功能時，需要按一下「啟用 SFTP」按鈕。

取得SFTP的登入資訊後，再配合電腦端安裝一套檔案管理軟體 (例如 Filezilla)，在軟體中貼上相關登入資訊即可連上你的網站的資料夾區了。

更詳細使用教學見官方文章。

全站式加入jQuery語法(可含CSS)

2022-08-20 尚無留言

在Elementor單頁加入jQuery語法的方法已經介紹過了，再來另一種需求就是想要在每一頁執行同一段jQuery程式的話，應怎樣來插入jQuery程式碼？

這邊就列出4個方式，一般會以方式4為主 :

方式1 : 在Elementor中的head或footer模版插入

如果你已經有用Elementor的模版設計來製作head與footer，因為head與footer裡面的內容本就是預套用到全站，所以在head或footer裡面拉一個html工具再置入jQuery語法，這樣就會讓jQuery效果自動在每一頁出現了。

這個方式就不再多截圖說明了，如果你仍不知怎樣用Elementor設計head與footer，請先去參考Elementor模版設計的單元。

方法2 : Elementor Pro版

Elementor Pro版本身就內建可以埋設全站式javacript或jQuery的功能。如下圖路徑 :

方法3 : 使用外掛「Header Footer Code Manager」

使用外掛「Header Footer Code Manager」

安裝後如下圖插入代碼 :

這個外掛還有一些選擇性功能，可以指定某些頁面或文章排除或單獨埋入程式碼。

另想埋入全站式的CSS，須將CSS用<style>…</style>包起來才行喔!

但是你若是網站新手或是代操廣告的投手，想純單埋入GA、FB廣告像素、Google廣告追蹤碼、GTM等等任何的javacript或jQuery代碼，就可以單純使用此外掛，以求簡易方便快速。

方法4 : 使用外掛「Code Snippets」(推薦)

使用外掛「Code Snippets」來埋設全站式代碼是最彈性也是我最推薦的方式，因為還可以順便埋入全站式的CSS，這樣就不用在「佈景主題/自訂」中寫CSS，這個外掛可以讓你統一管理全站式的自加語法，非常方便!

外掛「Code Snippets」最主要用途是用來自訂function PHP，但要順便用來埋設全站式的jQuery與CSS，也不成問題。

▼如下圖新增一個片段程式碼，再貼上範例程式碼即可自行修改。

▼把下面語法複製貼上

				
					add_action( 'wp_head', function () {
 ?>
<!-------------------------------------->
 
<script>
( function($) {
$(window).load(function() {
//======================================

//在這裡寫jquery語法....
	alert("HELLO smallway.com.twP");

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

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

//也可以放2次以上的javacript(jQuery)標籤區域
	alert("做網站請找小訣行銷工作室!");

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


<style>

	/* 在這裡撰寫網站專屬 CSS 程式碼 */
	div{
		font-size:28px;
	}

</style>


<style>

	/* CSS也可以用新的</style><style>來另產一個區，以做區隔*/
	h1{
		font-size:28px;
	}

</style>


<!-------------------------------------->
<?php
 } );

不要被我這串多行範例嚇到，我只是中間多複製了幾次，讓你知道中間是可以反覆用新的<javacript>或<style>來增加的，以便在幫不同地方寫語法時可以有一個區隔的作用，也可以適時加上註解。

你就複製下來貼上，然後在我有特別用線條包住的範圍中寫代碼即可，就絕對不會出問題!

埋好後，可以列表式管理自己加入的任何種類語法，在debug網站異常時也可以一鍵停用所選中的語法。

總結 :

以上的方式，任何一種都可以也用來埋設Adsense、GA、FB廣告像素、Google廣告追蹤碼、GTM等等任何的javacript或jQuery代碼，但習慣偏愛方法4，因可以連全站式CSS也順便埋入，而且很好管理。

WordPress jQuery起手式

2022-08-20 尚無留言

在WordPress或Elementor中，我對jQuery主要是求「應用」，所以在本站，不會花費太多間講求jQuery的原理，只求可以「速用」效果，或是以「趣味學習」的方式為主要精神!

在不講過多原理的前提，我直接把jQuery的起手式語法貼出來，以後在Elementor單頁加入jQuery語法或是全站式加入jQuery語法，都會用以下的「起手式」來寫入各種想要的效果程式。

jQuery起手式語法 :

在WordPress中，要用jQuery來控制頁面或修改外掛產生的頁面效果，都必須等待「頁面完全載入完畢」後才執行jQuery，所以以下的起手式中所寫的程式語法，一定都會在『頁面(含所有DOM元素、圖片)載入完才執行!』，如果不等頁面完就執行你寫的jQuery程式，有時候明明程式沒寫錯但偏偏就是沒產生執行效果(這在修改Elementor或Woocommerce時特別會發生)，這之前我閉門造車研究超久都找不出原因，原來就是「執行順序」的問題，所以以後在WordPress或Elementor中要寫jQuery時都使用下列的起手式語法就不會再產生上述的問題。

起手式語法範例

				
					



<script>
( function($) {
$(window).on('load', function(){ 
//======================================
setTimeout(function() {
//alert();
}, 1000);


//這裡開始寫jQuery程式   
//例如寫一些點擊事件...
alert("頁面(含所有DOM元素、圖片)都載入完畢!");



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

上面代碼有一行 setTimeout(function() {}, 1000); → 主要是用來延遲1秒執行，在WordPress中有時候有些元素它是動態載入或載入較慢完成，故有時會發生明明程式無錯誤卻執行時起不了作用，特別是在Woocommerce相關頁面時會發生，故會適時視需求加入延遲1秒執行。

起手式就先介紹到這裡，接下後面的文章將會教導一些在WordPress裡面常用到的「事件」效果!

[二包]接案時遇上別人二包過來的案子，該怎麼報價？

2022-08-18 尚無留言

這真是一個兩難的問題，對吧？想賺覺得自己合理工時的費用，但對方又是二包來的案子，他的預算一定不高，你開的合理價可能也會被要求再便宜點、再便宜點…

接案方

我們在接案，覺得這個案子我該收多少就報多少，

不會因對方是二包或三包而壓低報價，

若因對方是二包三包而壓低報價或接受對方的壓低價格，

最後因製作工時超乎預期的長，而自己覺得虧了而在那邊捶胸頓足，這並不是我想碰到的!

所以若二包的業主真的預算不足，接案人就不要勉強自己降低原本應得的合理報價，或是就放生本次的接案機會 !

但若只要自己能接受上述的可能性問題，面對二包業主，你還是可以考量到對方的利潤而降低報價，當然也未嘗不可啦!

二包業主

如果你是二包業主，也可能覺得我不壓低接案方的報價，我自己也是虧啊？

話是沒錯，但是否該從另一個角度思考，為何我會四處找二包？是自己的專業能力不足，還是人手不足？

如果真的是己方有明顯經營上的專業不夠或人才不夠的問題，是否應先暫停接案，先增強自己的能力或培養人才為第一要務呢？

前言

實作

1、路徑 : 頁面/全部頁面

2、關掉全螢幕模式

3、新增頁面:

3、修改此頁網址(slug)

4、反覆建立其它名稱的頁面

總結

前言

建議適用「本機端的WordPress網站」的情境 :

開始建立本機端的WordPress網站

1、下載「localwp」

2、安裝與勾選

4、建立一個新網站

5、登入網站

6、把本機端網站發佈正式主機

簡介 :

準備 :

實作 :

1、選擇網域商

2、前往Gandi申請

3、搜尋想要用的網域名稱

4、加入購物車

5、加入會員才能結帳

6、刷卡結帳

7、完成購買

8、信用卡到期日加入Google行事曆

其它說明 :

外掛資訊

外掛說明

外掛資訊

外掛說明

前言

1、要用哪一款編輯器？

2、編輯器只要專精一款就夠了

3、編輯器外掛不能停用

什麼是 SFTP？

WordPress 「.com租用站」可以使用SFTP

取得SFTP帳密(登入資訊)

方式1 : 在Elementor中的head或footer模版插入

方法2 : Elementor Pro版

方法3 : 使用外掛「Header Footer Code Manager」

方法4 : 使用外掛「Code Snippets」(推薦)

總結 :

jQuery起手式語法 :

起手式語法範例

接案方

二包業主

章節

1 個成員 正在線上

7 個訪客 正在線上

4 個檢索機器人 正在線上

1 個成員正在線上

7 個訪客正在線上

4 個檢索機器人正在線上