文章區塊 / 小說記錄

  • 日期:
  • 留言數:0
  • 標籤:

a:7:{s:8:”location”;a:1:{i:0;a:1:{i:0;a:3:{s:5:”param”;s:5:”block”;s:8:”operator”;s:2:”==”;s:5:”value”;s:9:”acf/novel”;}}}s:8:”position”;s:6:”normal”;s:5:”style”;s:7:”default”;s:15:”label_placement”;s:3:”top”;s:21:”instruction_placement”;s:5:”label”;s:14:”hide_on_screen”;s:0:””;s:11:”description”;s:0:””;}

讓 WordPress 內建的分隔符號(HR)區塊可以完整顯示樣式

有在用 Gutenberg HR Blocks (分隔符號) 的朋友,不知是否會發現,這個 Blocks 的預覽和實際顯示的效果不一樣。

三種 Blocks 樣式

該 Blocks 總共有三種樣式:

  • default / 預設
  • wide / 長線段
  • dot / 點狀線段

而我實際使用的結果,只有點狀線段的樣式會完美呈現,也就是你在後台設定的樣式與顏色,在前台都可以顯示,而其他兩個的顏色樣式都會消失。

在後台編輯文章時顯示的樣式
在前台顯示的樣式

可以看到幾個不同的點:

  • default / 預設樣式的顏色,以及寬度都不一樣
  • wide / 長線段的顏色不見了 (我在後台設定的是紅色)
  • 區塊彼此沒有間距,在編輯文章時是有上下的間距

官網缺少的樣式文件

扒了一下官方的 wp-includes/css/dist/block-library/style.min.css,發現根本沒有 is-style-default 的樣式,然後 is-style-wide 的樣式也是半殘;而且 Github 在 2018 年就有人說過類似的事情,到現在都還沒有發 PR 解決,究竟是 … QQ

於是乎,我只好自己把樣式補回去,如果你也想要官方內建的 HR Blocks,可以試著把以下的樣式語法加到你的佈景樣式裡。

CSS
wp-content/themes/{佈景主題}/style.css

存檔後重新整理,再回到前台確認一下,就會發現之前消失的樣式都出現囉!

消失的樣式都出現了

利用 SVN 更新 WordPress 外掛

這篇純粹是一個小筆記,因為久久才會用到一次 SVN,然後每次都要去 WordPress 官方查資料真的覺得很麻煩,所以決定把指令記錄在部落格里。

更新外掛

⚒ cd Folder 後,輸入 svn up

Shell

⚒ 接著輸入 svn stat 確認哪些檔案需要 add 或 modify

Shell

⚒ 最後就是輸入 commit 的文字啦

Shell

以上是更新的步驟。

更新版本號

接下來還要將版本號更新到 WordPress 上面,讓大家可以後台收到通知,並自動更新外掛:

⚒ 先將 trunk 的檔案複製到版本號裡面

Shell

⚒ 接下來發送 commit 訊息即可

Shell

正常來說,做完這些步驟再回到官網重新整理就能看到成果了。

漂亮的 WordPress 標籤雲外掛 : Muki Tag Cloud

2020.06.24 更新

因為 jqcloud 的作者已沒有在維護這個效果,所以該外掛已無法使用,也不會再更新囉。

將將,人生的第一支 WordPress plugin 誕生了,因為我很喜歡這種不規則形狀的標籤雲,所以當我確定他可以順利在 WordPress 使用後,下一步就是決定將它做成外掛跟大家分享。

當然,憑我一人之力是絕對無法完成外掛的,畢竟我的 php 爛到一個炸掉 XD,所以很感謝 Mesak 的幫助,兩個人合力做出了這支外掛,如果大家喜歡可以試用看看,也歡迎幫忙找 bug 🙂

Muki Tag Cloud 外掛資訊

  • 名稱:Muki Tag Cloud
  • 版本:1.2.1.1 (2013-11-11更新)
  • 作者:Mesak Chuang (http://mesak.tw)、Muki Wu (https://muki.tw/wordpress)
  • 說明:可以在側邊欄或是支援小工具的位置加入這個標籤雲外掛。他跟一般標籤雲最大的差別是不規則的排列形狀,而且顏色豐富多彩,非常的有質感
  • 下載:請至WordPress.org 下載 Muki Tag Cloud 外掛
  • 範例:總共有 7 種樣式可選擇,包含 3 種繽紛色彩,以及 4 種配合部落格常見色調 (紅、藍、綠、灰)
    ▼ 預設樣式 (fresh)

    ▼ light style
  • 語系:英文、正體中文

Muki Tag Cloud 安裝步驟

  • 步驟一:安裝 Muki Tag Cloud 外掛 (可以解壓縮後上傳至您的 WordPress 網站,或是透過後台安裝)
  • 步驟二:到 WordPress 控制台 ➡️「外掛」 ➡️ 「已安裝外掛」,找到Muki Tag Cloud ➡️ 「啟用」
  • 步驟三:「外觀」➡️ 「小工具」找到Muki Tag Cloud工具,將它拖曳到側邊欄或任何你想出現的地方即可。

Muki Tag Cloud 外掛功能

  • Tag Cloud Random Order:可以選擇標籤的排序方式,是要以 article(文章數)或 random(隨機)排序
  • 小工具寬度 / 高度:小工具的整體寬 / 高度,可以填px%,但記得一定要填入單位
  • 色彩風格:選擇喜歡的色彩風格檔,預設是 fresh style,目前有 7 種風格可以選擇。

有任何問題都歡迎回報,Mesak 跟我會努力把這個外掛做到做好,有任何想要的功能也歡迎提出來 🙂

讓 WordPress 的 RSS Feed 也能讀到自訂的文章類型 (post type)

如果你有使用 WordPress 的自訂文章類型 (custom post type),應該會發現預設的 RSS Feed 是讀不到該內容的,那是因為 WordPress 的 RSS,預設只會讀到「post type = post」的文章,也就是我們後台系統的「文章」。

因此我們可以在 functions.php 加入一些語法,就可以讓 RSS Feed 讀到自訂文章類型:

PHP
functions.php

以上這段語法會顯示所有的自訂文章類型,但如果你不希望顯示所有文章類型的話,只要將語法稍作修改即可:

PHP
functions.php

在第 4 行修改你要放到 RSS Feed 的 post type 即可,如此一來你就可以自由決定要出現與消失的文章類型囉!

✏️ 以上語法參考來源:http://www.wpbeginner.com/

WooCommerce 系列教學 (3/3):串接第三方金流

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

WooCommerce 是很熱門的購物車系統,所以有很多的第三方金流服務,都有提供相關的 plugin 或 API 讓我們可以與 WooCommere 完整串接,今天要介紹的這個第三方金流服務是歐付寶,老實說我已經忘記選擇它的原因,但用了 4 個月還算不錯,而且安裝非常方便,客服回應也很快,所以分享給各位。

▼ 這是歐付寶手續費的明細,詳細的內容可到金流收費總覽觀看

大家應該有發現超商付款的手續費非常高,所以我並沒有使用超商付款的功能,我自己的網路商店也只有用信用卡與 ATM/ WebATM。
歐付寶的好處是提供了很多種付款方式,但你不一定全部都要啟用,可以視自己的需求啟用即可。

安裝歐付寶

接下來要跟大家說怎麼安裝歐付寶囉。

▼ 請先在首頁的「下載專區」找到「套裝購物車模組

▼ 找到第四個 WordPress WooCommerce 專用的外掛,下載後照著一般安裝外掛的流程,裝到你自己的 WordPress 網站。
⚠ 檔案裡面有一份 allPay 金流外掛套件安裝導引(WooCommerce).docx 也寫得很清楚,建議大家可以先行閱讀再安裝。

▼ 啟用後,在後台選單:「WooCommerce」→「設定」→「結帳」的分頁裡,會多了一個歐付寶,你可以在此設定想要啟用的付款方式,以及一些說明內容。

那麼要如何設定,讓顧客的錢進入你的口袋呢?接下來這個是最重要的地方,就是金鑰設定。

▼ 承上個步驟,將頁面稍微往下捲一些,會到「特店編號」、「金鑰」與「向量」的設定,只要將這邊設定完成,在商店的任何付款資料,歐付寶都能透過這個設定匯入到你的歐付寶帳戶。

WordPress 後台先到此暫停,讓我們回到歐付寶的網站去申請會員吧!

申請歐付寶會員,取得金鑰設定

請先註冊成為歐付寶的會員,一開始選擇個人會員就可以了,個人跟商務目前最大的差別,是收款額度的不同。

雖然很想把步驟寫清楚,但是歐付寶會員綁定手機號碼,我沒有其他的手機號碼可以測試截圖了,所以在此跟各位說聲抱歉 😢。但是歐付寶的網站步驟很清楚,註冊與申請是沒啥困難的。

註冊成為會員之後,可以去申請你的金鑰,申請金鑰的網址請點我。假設你已申請完畢,可以登入廠商後台取得你的特店編號、金鑰等設定。

▼ 這些設定可以在廠商後台的「系統開發管理」➡️「系統介接設定」找到,不管是 AllinOne 還是一般金流,數字都是一樣的,所以只要選擇一組填寫到 WooCommerce 即可。

▼ 在尚未正式開店前,可以先啟用測試模式,試試看你的購物流程是否暢通


以上就是 WooCommerce 串接歐付寶的簡單步驟,我個人覺得,歐付寶已經把付款做得很簡單了,而且所有資料都可以在廠商後台搜尋到,有任何不懂得也可以先到他的客服中心爬文,這邊就不再贅述了。

以後如果你覺得外掛的功能不足,也可以使用歐付寶提供的 API,讓你的購物網站擁有更多功能。但我這幾篇文章是針對「個人小額經營者」,相信不是所有人都會串接 API,而如果您們是「公司行號」,相信您們的團隊一定有工程師駐點,對 API 一定已駕輕就熟不需要我多說。所以在此我不會特別介紹 API 串接,但如果您有興趣,可以直接到歐付寶的官網下載各種串接規格

如果有任何問題也歡迎在底下留言,謝謝各位!

WooCommerce 系列教學 (2/3):商品上架流程

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

從後台的「商品」→「新增商品」就可以添加各式各樣的商品了。如果你已經習慣 WordPress 的作業模式,你會很開心地發現商品跟文章的格式幾乎有九成像,不管是標題、分類、標籤,商品(特色)圖片,都可以很快地進入狀況!

所以在此我只會特別說明商品資料(Product Data) 的部分,這個也是大家在設定的時候,比較容易碰到的問題。

小補充:商品簡短說明

「新增商品」的最下面有一個「商品簡短說明」,在這邊輸入的文字,會出現在前台商品頁面的右上方喔。

當然,具體的位置還是要視你使用的佈景主題而定,不過國外的佈景主題設定幾乎都是在右上方無誤。

小補充:商品圖庫

在商品圖庫的地方,如果你一次上傳多張照片,他會利用 Lightbox 以及輪播方式秀圖。


商品資料

商品資料可以這麼看,先選擇 (1) 的下拉式選單,再點選 (2) 的各個設定,最後在 (3) 填入各種商品資料。

1.商品類型

WooCommerce 目前提供了四種商品類型:簡單商品、組合商品、外部/加盟商品、可變商品,簡單解說如下:

  • 簡單商品:商品只有一種款式、一種價格,顧客直接點選加入購物車即可。
  • 組合商品:附屬在其他商品底下,不會有自己的價格 (這個我從來沒用過)。
  • 外部/加盟商品:純粹介紹商品,如果要購買會連到外部網站。
  • 可變商品:一個商品頁面可以有很多種款式(例如 S, M, L 尺寸),對應不同的款式可以設定價格、庫存,與圖片。

2.商品設定

可變商品的功能是最為複雜,也較為完善,所以我用「可變商品」作為圖例,介紹給大家。

  • 一般:這個應該不用多作解釋,裡面只有「貨號」(SKU name)一個欄位,請填上不重複的貨號吧。
  • 庫存:
    可以勾選「庫存管理」以設定庫存,但如果是用可變商品,這邊可以不用寫,因為我們之後還需要分別設定各種款式的庫存。
    單獨出售的部分,就是照字面的意思解讀啦!如果你希望顧客一次只能買一件這個商品,就把他勾起來囉!
  • 運送方式:可以填寫產品的重量與尺寸,「運送級距」則是可以再給產品設定額外的運費,請看下面的介紹。

運送級距介紹

▼ 先在後台「商品」→「運送級距」的選單裡,設定額外的運費

▼ 接著在「WooCommerce」→「設定」→「運送方式」→「單一費率」,找到「運送級距費用」的欄位。你會發現我們剛剛設定的「大尺寸」出現在這了。我在這邊設定,只要有使用大尺寸的運送級距,運費都會額外增加 100 元。

▼ 回到商品設定的地方,可以設定這個商品的運送級距為大尺寸

▼ 如此一來,只要我們購買這個商品,運費就會自動再加上 100 元(原本的運費是 40 元)。

  • 連結商品:推薦型跟交叉型,都是可以讓顧客在購物時看到更多的商品。可以將滑鼠移到框框後面的問號看他的解釋,因為設定很容易所以就不多談了。分組我自己沒用過,所以先跳過😓
  • 屬性跟變化類型,是可變商品的精華部分,請直接看以下圖解

屬性

在購買產品時,可能曾經看過產品的規格,如下圖:

▼ 這些資料都是在屬性裡面設定的,記得要選擇「在商品頁面中可見」,才會出現在商品頁面裡:

如果你的商品資料是「可變商品」的話,你會發現「在商品頁面中可見」的文字下面,還有一個「用於變化類型」。這個就是讓我們設定,根據不同款式顯示不同的庫存、價格與圖片的重要選項唷!

▼ 範例可以參考我的寫法:

如果不需要讓這些款式出現在產品規格上,就不要勾選「在商品頁面中可見」的選項。每一個數值都請用|做分隔,寫在同一行或是換行都可以。

▼ 寫完之後記得按下儲存,然後再切到「變化類型」的分頁,並選擇「由所有屬性建立變化類型」。

送出之後,你剛剛新增的那四個數值,就會出現在畫面上了!

變化類型

每一個屬性都是一個變化類型,舉例來說,我這邊有四個款式讓顧客選擇,所以我可以單獨為這四個款式,設定圖片、價錢、庫存等資訊。

▼ 回到前頭,就可以跟各大購物網站一樣,選擇單一產品的各種款式囉~

⚠ 特別記住一點,所有的東西修改後,都必須按下該分頁內的「儲存變更」,這樣檔案才會存進去喔!


上架流程先到此告一段落,有沒有發現上架一點都不難,只要把可變商品搞懂,就可以做出很棒的變化囉!希望大家都能順利上架商品 🙂

最後一個部分,我會告訴大家怎麼跟 AllPay 歐付寶串接,敬啟期待囉 😊

WooCommerce 系列教學 (1/3):安裝與使用

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

很久以前寫過一篇 WooCommerce 的商品上架流程,但因為圖片都失效了,所以一直把「重寫」這件事情放在心上,但因為有段時間沒碰 WooCommerce 了,怕誤導大家所以遲遲未下筆。

後來,因為我現在有經營手帳寫真市集,是用 WooCommerce + AllPay 串接,所以可以有比較新、也比較完整的經驗分享啦!也歡迎大家購買市集的商品,給我一點支持喔 😳


事前準備:挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題,所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題,有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡,也有人會上傳適用 WooCommerce 的 Themes,不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik,如果你們想要自己練習,可以跟我下載一樣的佈景主題。

佈景主題裝好後,就可以安裝 WooCommerce 外掛了,直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多,我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步,就是安裝翻譯檔啦!WooCommerce 有提供繁體中文的版本,所以大家不用緊張,放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後,畫面會變成繁體中文,然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改,現在不想設定也沒關係 😊

事前準備到此告一段落,一來 WooCommerce 有中文化,二來很多設定都是要靠大家實際的販售情況調整。設定也不難,如果真的有問題再留言給我吧!


WooCommerce 的架構

安裝完左側會多了兩個選單,分別是:

  • WooCommeerce:WooCommerce 外掛相關設定,例如付款格式、付款方式、發送郵件… 等等。
  • 商品:上架或分類商品設定,有點類似「文章」選單的感覺,有獨立的分類與標籤,每一個商品都是一個單獨的文章格式。

那麼,我們該如何在前台顯示 WooCommerce 的相關頁面資料呢?所有 WooCommerce 的資料,我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後,他也會自動新增一些頁面在「頁面」選單裡,像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家,因為我們選的是繁體中文語系,所以 WooCommerce 預設會把網址代碼也設為中文,我建議大家到「頁面」選單後」,把所有頁面的代碼都改回英文,不然一些頁面可能會連不上喔!

固定網址也要記得改。固定網址的設定,可以選擇「商品起點」,總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦,網址通常是http://你的部落格網址/shop,如果你有試著新增商品,可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品,這是無庸置疑的,所以你一定會有一個需求,就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子,頁面只會顯示分類為衣服的商品,就我所知的有兩種方法,一併分享給大家。 記得要先新增商品分類,這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法,是直接找到「商品分類」的真正網址。

這個方法很簡單,到後台的「商品分類」選單中,找到你想要連結的商品分類,然後選擇「查看」就可以啦 😊

搭配 shortcode

另外,記得我們前面有提到,WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」,你會看到文章內有一段程式碼為:[woocommerce_my_account],這段程式碼,就是我們常用的 WordPress Shortcode。

因此,我們可以用同樣的方式,新增一個叫做「衣服」的頁面,然後插入一段 shortcode,告訴 WordPress 顯示所有分類為衣服的商品:[product_category category="clothing" ]

category 後面接的clothing,就是看你的商品分類的代碼怎麼寫,這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料,請參考 Shortcodes included with WooCommerce )

乍看之下,感覺第一種方法比較簡單,但如果你還有一些特殊的需求,例如顯示指定的 SKU 商品、指定的單一商品 … 等等,都可以透過 Shortcode 幫你達成喔!記得使用方法,都是在「頁面」把對應的 Shortcode 插入即可。


WooCommerce 系列教學的第一篇就到此告一段落了,其實安裝並不難,設定也很簡單。所以我只是把大家初步使用,可能會碰到的問題先整理好放出來,希望對大家有所幫助!

如果有照著安裝的朋友們,可以試著先建立幾個商品,接下來我會分享進階的的商品設定,所以如果你有新增商品的經驗,會更快上手 😊,閱讀或實作有任何問題,都歡迎留言告訴我。

將 Google 搜尋框整合至 WordPress

WordPress 雖然是個非常強大的 CMS,但我覺得「搜尋」是他所有功能裡面最雞肋的,內建的搜尋功能無法結合多組字串,也沒有支援高亮或是進階搜尋等,其實不是很方便。有的人會選擇使用外掛增強 WordPress 內建的搜尋功能,或是額外自己寫一些 function 補足,不過我們也可以把搜尋這件事情交給強大的 Google,畢竟他們就是做搜尋起家的,透過 Google 搜尋我們的網站,比內建的方便很多喲。

▼ Google 搜尋結果示意圖

實際呈現結果,可以參考我的搜尋頁面:https://muki.tw/search/?q=muki

我最近也使用 Google Search 替換了內建的搜尋,使用方法很簡單,操作也是中文說明很好入手。不過要整合至 WordPress 還是有需要注意的部分,為了以後使用方便,特地將幾個重要的步驟記起來,也供大家參考使用。

使用 Google 自訂搜尋

Google 自訂搜尋改版後,總算將新舊控制台合併起來了,步驟也簡單許多,跟著以下的說明開始做吧!

步驟一

到新版 Google 自訂搜尋,新增你的網站資料。使用方法很簡單:

  • 「要搜尋的網站」欄位:填入你的 WordPress 位置
  • 「語言」:繁體中文
  • 「搜尋引擎的名稱」:填入你的網站名稱

最後按下藍色的「建立」按鈕,即可新建完成。

步驟二

在左側選單,點選「編輯搜尋引擎」,在下拉選單找到剛剛新增的搜尋引擎設定。點選後可以看到裡面有許多跟搜尋引擎相關的設定。請選擇「外觀和風格」,我們要調整搜尋顯示的樣式,才會更完整嵌入 WordPress。

  • 版面配置:請使用「2 頁」,它會讓搜尋框跟搜尋結果分開顯示。
  • 圖片搜尋結果的版面配置:隨便選,自己開心就好。
  • 選擇或自定樣式:可以選擇自己喜愛的樣式,也可以自定,之後都可以再回來修改。

▼ 不太清楚怎麼選擇的話,可以參考我的設定圖片,照著選就好囉!記得按下儲存才會更新你的設定。

步驟三(重要!)

終於到重頭戲了!在「外觀與風格」的選單內,找到下方的「儲存並取得程式碼」,我們要在這邊設定 WordPress 的一些資訊。
點擊「搜尋結果詳細資料」,會跳出一個視窗:

  • 指定要顯示搜尋結果的目標網站完整網址:這邊請填上你的 WordPress 網址,就是你的搜尋結果網址。網址結構可以從 WordPress 自訂。我是寫 https://muki.tw/wordpress/search/
  • 指定網址的內嵌查詢參數名稱:請輸入 q

最後記得按下「儲存」喔。

▼ 可參考以下截圖的設定

Google 搜尋的設定先到此告一段落,接下來請打開你的 WordPress 後台,要開始修改 WordPress 的檔案囉。


修改 WordPress 設定

步驟一

請複製剛剛 Google 提供的程式碼,請參考圖片,先複製紅框處的

▼ 參考圖片的紅框處範圍,進行選取與複製。

步驟二

打開header.php,找到,在他的上面貼上剛剛你複製的那段程式碼。

步驟三

同樣在header.php,搜尋search關鍵字,這邊會根據佈景主題的寫法而有所不同。你有可能會找到這段程式碼:

PHP

或者是找到input這樣的表單語法:

PHP

不管是那一種呈現方式,我們要找的程式碼是用來「顯示搜尋框」的語法。找到的後請替換成:

PHP

步驟四

再來進入 WordPress 控制台,選擇「頁面」→「新增頁面」。我們要在這個頁面顯示 Google 的搜尋結果,所以請先將編輯器切換成「文字」模式,然後輸入以下語法:

PHP

接著我們要確認使用搜尋框之後,搜尋會跳到這一頁才對。還記得我們在設定 Google 搜尋的第 3 個步驟,有設定「指定要顯示搜尋結果的目標網站完整網址」嗎?我們要利用 WordPress 可以自定網址結構的特性,將這個 URL 新增到 WordPress 頁面的網址結構中。

我之前設定的網址是https://muki.tw/wordpress/search,所以我在固定網址的地方,只要打上search即可。

▼ 文字不懂沒關係,請看圖片示意:

最後按下「發表」,這樣使用 google 自訂搜尋框搜尋關鍵字之後,就會利用參數q代入我們的搜尋字串,然後將結果顯示在頁面上。

實際呈現結果,可以參考我的搜尋頁面:https://muki.tw/search/?q=muki

Google 搜尋框其他設定

要整合至 WordPress,最重要的步驟就是前面那大兩部分,包含在 Google 搜尋控制台,以及在 WordPress 的設定。最繁複的先做好,先讓 Google 搜尋框可以跑,後面的設定對你應該都是小兒科啦!

在「外觀風格」的選單,可以自由調整搜尋樣式;還有其他選單可以自行玩玩看,因為都是中文介紹,所以應該很好上手!

希望大家都可以自由打造屬於自己的搜尋喲~ enjoy it!

在 wp nav menu 前後增加自定義連結

WordPress 有一個很好用的 WP_nav_menu function,可以在 WordPress 控制台直接新增選單內容。

但要特別注意的是,如果我們想在新增有 class 或 id 的選單,就沒辦法直接從控制台新增,因為控制台的選單無法讓我們填寫 id 或 class。

選單只能讓我們新增連結文字、位置,以及屬性,如下圖:

因此我們可以利用 wp_nav_menu 提供的函式自己手動加上想要的連結。

假設今天我們希望在選單的後面加上以下語法:

HTML

可以先找到以下語法 (通常在 header.php) 裡:

PHP
header.php

這個語法就是用來設定 wp_nav_menu 的一些樣式,如果你對製作這樣的選單有興趣,可以參考這篇文章:WordPress 內建階層選單製作

回到手動添加連結的部分,假使我們想要將連結加在選單的後面,請依照'items_wrap' => '連結語法'的格式添加進去,語法請參考(第 7 行是我新增的部分):

PHP

這樣你手動增加的 custom link 連結就會永遠放在自定義選單的最後一個位置。

如果你想要把手動增加的連結放在最前面,就只要把%3$s跟你的語法對調即可,請參考:

PHP

WordPress Nav Menu 還有很多參數可以使用,有興趣的朋友可以自行閱讀官方文件:Function Reference / wp nav menu

WordPress 內建階層選單製作

WordPress 3.0 改版後,新增的內建選單功能,算是我最愛的功能之一,做佈景的時候也常常會用到。所以決定筆記一下階層選單的製作方法,不用每次製作都要 google 一次 XD。

步驟一

打開 header.php,把選單的語法加入:

PHP

步驟二

打開 style.css,加入 css 語法。

這邊加了有子選單的時候,滑鼠滑過才會展開。主要是由 11~13 行控制,利用:hover後尋找自己下一個ul,再把 displaynone 改為 block

CSS

步驟三

最後到 wordpress 後台「外觀」 → 「選單」開始添加選單即可。 補充

當前選單有一個 .current 屬性可用,可以讓讀者知道現在這篇文章,在哪一個選單裡面,我直接抓自己的部落格語法補充在下面:

CSS

讓 WordPress 留言能顯示 HTML 標籤

WordPress 預設留言支援 HTML 標籤,也就是會自動讀取 HTML 的樣式,但技術型部落格會需要透過留言討論 HTML 語法,我們會希望輸入 <h1> 就顯示 <h1> ,不要吃掉語法,讓「樣式」出現在留言中。

如果你跟我一樣有這困擾,希望在留言打 HTML 標籤,就會出現 HTML 標籤的話,不妨參考以下語法。

首先打開佈景主題的 functions.php,在?> 的上面,輸入以下語法(我有做簡單的註解,有興趣的朋友可以自行研究):

PHP
functions.php

最後再存檔上傳,留言就會顯示 HTML 標籤囉!請參考示意圖:

參考文章

@Disable HTML in WordPress Comments / WP insite