登入/註冊

架站勤拿手

搜尋
Close this search box.

單頁加入jQuery語法(也可含CSS)

2023-02-14 尚無留言

前言

有些時候有些語法只須在某頁執行就可以了，我們就可以僅在該頁中加入jQuery語法，同時也是節省主機效能，CSS的置入也適用以下的方法。

方法

我列出我常用的方法，如下 :

1、用Elementor編輯的單頁

請直接參考此篇 : https://smallway.com.tw/wp/8373/

2、用區塊編輯器的單頁

若是用區塊編輯器來寫文章或編輯頁面，只要拉一個html工具，再配合此篇的語法，貼上即可。

單頁加入jQuery語法(也可含CSS)-1

3、用片段程式碼外掛來置入

外掛「Code Snippets」最主要用途是用來自訂function PHP，當然也可以用來置入jQuery與CSS。

以下列各例程式碼中，藍色數字指的是該篇的「id」。

單頁加入jQuery語法(也可含CSS)-2

■單篇頁面


function facy_hook_javascript() {
 if (is_page ('10')) {
   ?>
       <script>
        // your javscript code goes here
       </script>
      <style>
       /*CSS寫這裡*/
      </style>
   <?php
 }
}
add_action('wp_head', 'facy_hook_javascript');

■多篇頁面

//-----------------------------
指定多頁面
add_action( 'wp_head', function () {
 if ( is_page( array('3898','11723') ) ) {
?>
  <script>
   alert();
   // your javscript code goes here
 </script>

  <style>
    /*CSS寫這裡*/
  </style>
<?php
	 
 }	 
});

■單篇文章(或CPT)


function facy_hook_js() {
 if (is_single ('16')) {
   ?>
       <script type="text/javascript">
         // your javscript code goes here
       </script>

      <style>
       /*CSS寫這裡*/
      </style>

   <?php
 }
}
add_action('wp_head', 'facy_hook_js');

總結

會用何種方式我會視情況，不過我比較偏向1與2的方式。

[外掛]一鍵全站備份搬家與還原-Backup Migration

2023-02-14 尚無留言
免費版外掛一律免下載直接從網站後台搜尋安裝。

外掛資訊

  • 【外掛名稱】 : Backup Migration
  • 【費用】: 免費版
  • 【官方網址】: 點此
  • 【簡介】: 全站一鍵備份還原、搬家還原、定時備份。
  • 推薦指數 : ⭐⭐⭐

說明

免費版來備份還原有2G的限制，但對一般網站而言，已經非常足夠了!

另亡同時也有「跨站點對點」互傳的還原功能，也就是說不用先把備份檔下載再上傳至另一個網站，即能完成搬家，這可大大提升搬家速度與減少大網站搬家失敗的情形。

實際操作可以參考這一篇文章。

『Code Snippets』代碼有問題造成無法進入後台

2023-02-11 尚無留言

當使用『Code Snippets』來插入片段程式時，若不小心代碼有問題造成網站出現 「500 error」或是以下這種錯誤訊息 :

這個網站發生嚴重錯誤。請檢查網站管理員電子郵件收件匣以取得相關說明。

而且連後台也進不了，該怎麼辦？

『Code Snippets』代碼有問題造成無法進入後台-1

『Code Snippets』有提供了一個「安全模式」的解決方式，就是請你在後台網址的後面加上以下這樣文字，

?page=snippets&snippets-safe-mode=1

然後再按下Enter重整網頁，就可以進入後台了，此時趕快再把剛剛有問題的片段程式碼先用掉即可。

『Code Snippets』代碼有問題造成無法進入後台-2

參考來源 : https://help.codesnippets.pro/article/12-safe-mode

01_頁面規劃思考

2023-02-08 尚無留言

 

要思考什麼？

1、每一頁

每一頁的內容量多寡，『主選單』中若每一選項代表每一頁，而這每一頁中我所準備要用到的文案、圖片、素材的「量」，夠我單獨製成一頁而不空洞嗎？

2、首頁

首頁該放什麼？可以考慮放以下的內容 :

(1)標語(slogan) : 一般是在首頁剛載入時會呈現形象圖+標語。

(2)主選單中每一頁的「前幾個項目」置入首頁，再放個「更多」讓訪客連過去。

例如 :

  • 最新消息
  • 作品集
  • 服務項目

(3)把主選單中，文案、素材、內容量太少的頁面內容，都放到首頁去，並把該項目做成「選單錨點」置入主選單中即可。(選單錨點就是「空連結+id」的運用，也是一頁式網頁常用的方式)

文案、素材不多的頁面不一定要單獨設計一頁，都可以放在首頁來呈現就好，常見的有 :

  • 關於我們(品牌故事)
  • 服務項目
  • 心得見證、成功案例
  • 常見問題、QA

(4)首頁版型要切幾塊？

首頁要放啥，大概心裡有數後，就可以規劃要切出幾個大區，每個大區塊再按實際素材文案量再細切小區塊。

PS : 都學到此了，就別再想找套版主題來做了，想要放什麼資料就切什麼區塊，這樣才有效率。

總結

以上是初步可幫助思考的方向，也可以多觀察不同網站，參考他們選單架構的每一頁都是怎樣規劃、怎樣呈現的。

 

 

 

 

03_[實作]設計「首頁」版型與內容

2023-02-07 尚無留言

前言

學習頁面設計的最好方式，就是拿一個網站來「模仿」，有人手把手帶你從首頁開始，把每一頁都模仿做一遍，進步就很快，成效會很明顯且很有成就感。

首頁，有時候是最後才設計的，為何？因首頁一般會把其它各頁面的資料「摘要」一些置入首頁，以達到「入口頁」的作用，故有時候會等其它頁面完成後才來設計首頁。

模仿對象

準備工作

後台安裝免費圖庫外掛 : Instant Images

實作

第1區塊:Banner區 

03_[實作]設計「首頁」版型與內容-10

▍ 使用元素工具 :

標題、內容編輯器。

▍ 設計提示 :

  • 容器:外層全寬100%，並替容器設定適當高度。
  • 背景圖 :挑選可左右滿版的大圖背景的寬度至少要3000px以上為佳。
  • 替元素加上載入動畫。
  • 可加入按鈕錨點連到下方某一區塊。

第2區塊:最新消息 

03_[實作]設計「首頁」版型與內容-11

▍ 使用元素工具 :

標題、內容編輯器、分隔線、圖示列表。

▍ 設計提示 :

  • 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
  • 背景:大容器設定純白色背景。
  • 切版:從80%容器再切左右兩欄。
  • 最新消息標題:標題，用絕對定位讓它壓在框線上。
  • 最新消息內容:新手練習用純文字(內容編輯器)，進階學習時用Post載入列表標題。
  • 簡介標題:用分隔線做出標題+線條。
  • 簡介內容:用純文字(內容編輯器)。
  • 保證標題:用分隔線做出標題+線條。
  • 保證內容:用圖示列表。
  • 背景文字:標題填上Interior Design ，再用絕對定位(用%控制)、z-index調-1。(新手覺得太難可略過)

第3區塊:服務項目與流程

03_[實作]設計「首頁」版型與內容-12

▍ 使用元素工具 :

標題、分隔線、圖示、媒體輪播、內容編輯器、錨點。

▍ 設計提示 :

  • 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
  • 背景:大容器設定淺灰色背景。
  • 切版:80%容器再製一個，則會有2個80%容器上下垂直排列。
  • (上)主要服務內容:用水平排列數個小容器，再置入圖示與標題。
  • (下)細切:從下方80%容器中再切左右兩欄, 左30%右70%。
  • 服務流程步驟:右邊會有兩個區塊，兩個區塊中各自再切小容器並置入標題、內文編輯器(加上左框線)。
  • 主選單錨點:加上「服務項目」的錨點連至本區塊。

第4區塊:精選案例

03_[實作]設計「首頁」版型與內容-13

▍ 使用元素工具 :

標題、內容編輯器、媒體輪播、按鈕。

▍ 設計提示 :

  • 容器: 切版起手式，外層全寬100%，內層全寬80%，以做出左右留白。
  • 背景:大容器設定白色背景。
  • 置入2個媒體輪播。
  • 按鈕:連結至「作品集」之頁面;加上陰影效果。

第5區塊:影片動畫

03_[實作]設計「首頁」版型與內容-14

▍ 使用元素工具 :

內容編輯器、按鈕。

▍ 設計提示 :

  • 容器: 外層全寬100%，內層600px。
  • 外容器設「背景影片」(  youtube.com/watch?v=RkZSyUBu2xU  ) 。
  • 外容器設定垂直置底、水平靠右，即可把內容器置於右下角。
  • 內容器背景設置微透明黑色、弧角。
  • 內容器置入內容編輯器、按鈕。

第6區塊:心得見證

03_[實作]設計「首頁」版型與內容-15

▍ 使用元素工具 :

標題、評分、內容編輯器、見證輪播。

▍ 設計提示 :

  • 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
  • 內層容器置入標題、評分、內容編輯器、見證輪播等元素。

第7區塊:常見問題

03_[實作]設計「首頁」版型與內容-16

▍ 使用元素工具 :

標題、切換、按鈕。

▍ 設計提示 :

  • 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
  • 內層容器再切成左右兩欄。

總結

以上的實作，可以發現切版很重要，如果版型切不出想要的排列區塊，就無法置入元素，另也可以發現我們常用的元素工具就那幾個在交替，但只要運用得宜，就能排列出有質感、客製化的版型，就不必仰賴套版主題那種改不太動又不知怎麼改的瓶頸。

07_常用的元素工具介紹

2023-02-07 尚無留言

前言

元素工具有很多個，這邊僅列出常用的，像我接案七八年，真的很多冷門的元素工具我從來沒用過，這邊把較常用的用表格方式列出。

常用的元素工具

元素工具名稱 主要用途 備註
【基本】    
*Container 容器，用來做網頁區塊佈局，即切版。  
*標題 每頁都會用到。  
*圖片 每頁都會用到。  
*內容編輯器 每頁都會用到。  
影音 可插入Youtube影音、Vimeo影音、或站內影音。 常用在「首頁」。
*按鈕 每頁都會用到。  
*分隔線 就是分隔線，有許多樣式可選。  
Google地圖 常用來做在「聯絡我們」或「活動報名頁」、「頁尾(footer)」。  
*圖示 置入icon圖示，有數百種可選，常與標題、內容編輯器配合使用。  
【一般】    
圖片轉盤 用來做『圖片輪播』，沒買Pro版的只能用它做輪播的需求。  
圖示列表 用來製作條列項目。 常在頁尾(footer)。
分頁 頁籤切換內容。 #收合與展開資料
*收合容器、
切換		 用來做『問與答』，兩個功能差不多。 常用在「首頁」。
#收合與展開資料
社交網路服務圖示 不是分享功能，而是用來社群的連結而已。  
警告 用來寫一段區塊顏色分明的「文字段落」，用來講一段很重要的提醒的話。  
短代碼 有些外掛會提供短代碼，我們可以用短代碼來置入其它外掛的功能效果。 整合其它外掛功能，偏客製化。
Html 會寫語法的人可以在此寫語法來修改網頁。(CSS、jQuery)  
*選單錨點 常用來做一頁式網頁的「同頁內之連結」。 一頁式網頁範例
資訊欄 置入部落格之資訊欄。  
【專業版】    
文章 文章列表，可用來做『最新消息、作品集、成功案例、部落格』。 文章列表排除某分類:Ultimate Category Excluder
*藝廊 用來做「作品集」。 純圖片作品集，點開後沒有文字介紹那種。
表單 用來做「聯絡我們」。  
*幻燈片 用來做『大圖輪播』，圖上可以置入文字。  
導航選單 脫離「自訂」的單樣式，用來做新的『主選單』。 模版設計
*媒體輪播 用來做『圖片輪播』、可混搭『影片輪播』。  
見證輪播 客戶心得的輪播。常用在『成功案例』。 各產業都可運用。常用在「首頁」。
目錄 自動抓取同一頁中的標題形成小目錄。  
分享按鈕 替文章加入「分享此篇」的按鈕。  
段落引用 與「警告」類似，用來寫一段區塊顏色分明的「文字段落」，用來講一段很重要的提醒的話。  
Facebook粉絲專頁 用來崁入粉專的主頁。  
版型 把已存的小版型置入網頁呈現，常用來做『簽名檔』。 只要修改已存小版型，全站每一處有置入小版型的就會統一更新。

總結

1、想要做出精美的網頁，除了要熟知每種元素工具的用途之外，更要發揮創造力來思考一些用哪些元素工具可以更佳來呈現素材與文案。

2、另每個元素工具中都有「樣式」可以讓你配色、調整外觀，這也是讓網頁變得有美感、有質感的重點，例如光是一個「標題」，你好好研怎樣調製它的樣式，就可以有不同的風格，參考此篇!

3、更要多看多觀察一些不錯的網頁來思考，要想若是我，我會用什麼樣的元素工具來達成這樣的效果？我版型要怎麼切？久而久之，你所設計的網頁就會越來越有質感、越來越好看!

導讀(Cloudways主機)

2023-02-07 尚無留言

Cloudways的VPS主機，在WordPress領域中是市面上最多人使用的主機商之一，我大概用了近四年後，一直都覺得穩定、快，費用合理甚至划算，功能上也很彈性，所以我很推薦使用!

Cloudways官方其實也有很多主機的使用教學文章，只是都是英文的，所以我把常用的一些功能另整理成簡單的教學 ，以後就在這邊查閱就可以了。

Cloudways VPS主機特色

  • 效能比一般的虛擬主機好上許多。
  • 以小時計算，每月最低10美金即可租用一台主機，且規則未來可以隨需求往上調整更高階的計價方案。
  • 可試用3日。
  • 有網站「副本」功能(staging)，未來在做設計大改版、debug可在副本上做，都OK了再推送覆蓋至主網站(正本)。
  • 有點對點自動搬家工具。
  • 有免費SSL憑證。
  • 一台主機可架多個網站。
  • 有24小時線上客服。

申請主機的教學不另寫，因在基本架站篇有寫過了，可參考這篇 : https://smallway.com.tw/wp/8032/

Cloudways主機如何一鍵升級？

2023-02-07 尚無留言

前言

在Cloudways下的主機，都可以一鍵升級至下一個方案，當你網站規模變大、流量變高，就可能會有一日需要把主機規格做一個提升。

實作

1、切換至Server

Cloudways主機如何一鍵升級？-1

2、選擇適當的規格方案

按下去後，靜等幾分鐘就完成了。

Cloudways主機如何一鍵升級？-2

文章分類設置成上下層分類

2023-02-06 尚無留言

在部落格「側欄」的文章分類，是可以有「主從分類」或「上下層關係」的分類，如下圖 :

文章分類設置成上下層分類-1

此篇僅先建立文章標題或部分文字，教學內容待補上。

餘額 : 0

©2022 架站勤拿手 | [email protected] | 盜文必究

7 個使用者 正在線上。

章節

發問

幫助

聯絡

0
Mobile Menu
登入
個人專區
電腦版選單

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

Line的不良影響

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

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

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

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

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

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

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

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

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

以上。

我能體諒，改用Email
已了解，加 Line

目前線上有 7 個使用者: 1 個成員、3 個訪客及 3 個檢索機器人。

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

1 個成員 正在線上

#1 – Facy 於 2025-05-0302:02
singgle_post_7 – 架站勤拿手Direction ColumnDirection Row [網址] [參照連結網址]

3 個訪客 正在線上

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

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

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

3 個檢索機器人 正在線上

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

#2 – Ahrefs 於 2025-05-0302:01
架站勤拿手「9」的搜尋結果 - 第 9 頁 - 架站勤拿手 [網址]

#3 – Bing 於 2025-05-0302:01
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址]