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

日期：2016.01.22
留言數：0
標籤：wordpress WordPress 修改技巧教學

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

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

<?php
function myfeed_request($qv) {
  if (isset($qv['feed']))
    $qv['post_type'] = get_post_types();
  return $qv;
}
add_filter('request', 'myfeed_request');
?>

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

<?php
function myfeed_request($qv) {
  if (isset($qv['feed']) && !isset($qv['post_type']))
	$qv['post_type'] = array('post', 'course', 'movies');
  return $qv;
}
add_filter('request', 'myfeed_request');
?>

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

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

將 Google 搜尋框整合至 WordPress

日期：2015.05.20
留言數：18
標籤：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 get_search_form(); ?>

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

<form method="get" ...="">
  <input type="text" class="search" value="搜尋" ...="">
</form>

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

<gcse:searchbox-only></gcse:searchbox-only>

步驟四

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

<gcse:searchresults-only></gcse:searchresults-only>

接著我們要確認使用搜尋框之後，搜尋會跳到這一頁才對。還記得我們在設定 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 前後增加自定義連結

日期：2013.12.10
留言數：0
標籤：WordPress 修改教學自定義選單

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

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

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

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

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

<a href="#" id="link-menu">custom link</a>

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

<?php
wp_nav_menu(array(
  'theme_location' => 'menu',
  'container' => 'nav',
  'menu_id' => 'menu-nav',
  'depth' => 2
));
?>

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

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

<?php
wp_nav_menu(array(
  'theme_location' => 'menu',
  'container' => 'nav',
  'menu_id' => 'menu-nav',
  'depth' => 2,
  'items_wrap' => '
  <ul id="%1$s" class="%2$s">%3$s
    <li><a href="#" id="link-menu">custom link</a></li>
  </ul>'
));
?>

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

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

<?php
'items_wrap' => '
<ul id="%1$s" class="%2$s">
  <li><a href="#" id="link-menu">custom link</a></li>
%3$s</ul>'
?>

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

WordPress 內建階層選單製作

日期：2013.06.22
留言數：0
標籤：WordPress 修改技巧教學

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

步驟一

打開 header.php，把選單的語法加入：

<?php 
	wp_nav_menu(array('theme_location' => 'header-menu')); ?>

步驟二

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

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

.menu {
  margin-top: 10px;
}

.menu ul li {
  float: left;
  padding: 0 10px;
  border-right: 1px solid #ddd;
}

.menu ul li:hover > ul {
  display: block;
}

.menu ul.sub-menu {
  position: absolute;
  display: none;
}

.menu .sub-menu li {
  border: 0;
  float: none;
}

步驟三

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

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

.menu .current-menu-item a, .menu .current-menu-parent a {
  color: #e94252;
}

讓 WordPress 留言能顯示 HTML 標籤

日期：2013.05.22
留言數：0
標籤：wordpress WordPress 修改佈景主題技巧

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

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

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

<?php

// 讓迴響不支援 HTML TAG
// 當有留言時，會呼叫 function
function custom_comment_post($incoming_comment) {
    // 將留言內容，用 htmlspecialchars() 轉換字符 & 用 str_replace() 取代字符
    $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);
    // 搜尋 $incoming_comment, 將單引號取代為 &apos ，以免 WordPress 視為 SPAM
    $incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );
    //回傳資料
    return($incoming_comment);
}

//留言準備要顯示前，會呼叫 function
function custom_comment_display($comment_to_display) {
    //將單引號取代回來
    $comment_to_display = str_replace( ''', "'", $comment_to_display );
    return $comment_to_display;
}

add_filter('preprocess_comment', 'custom_comment_post', '', 1);
add_filter('comment_text', 'custom_comment_display', '', 1);
add_filter('comment_text_rss', 'custom_comment_display', '', 1);
add_filter('comment_excerpt', 'custom_comment_display', '', 1);

?>

最後再存檔上傳，留言就會顯示 HTML 標籤囉！請參考示意圖：

參考文章
@Disable HTML in WordPress Comments / WP insite

無法讀取及訂閱 WordPress Feed 問題修正

日期：2013.03.08
留言數：0
標籤：WordPress 修改技巧

前幾天收到朋友的 feedback ，新站的 MUKI space* 無法訂閱 blog ，我使用 WordPress 的內建 feed 網址測試了一下，果然出現了如下圖的詭異錯誤 XML declaration allowed only at the start of the document：

如果你跟我一樣碰到類似的錯誤訊息，不妨參考以下步驟檢查自己的 Blog ，並且逐一修正解決。

釐清發生的原因

在解決問題前，我們先來瞭解為什麼會發生這樣的錯誤吧！

先開啟你的 Blog feed 網址，通常都是 Blog 位置 + /feed ，像我的就是https://muki.tw/wordpress/feed，接著對著頁面按右鍵開啟原始檔，會看到以下這段 code 。

通常會發生錯誤，就是因為第 1 行沒有任何字元，這個空白字元斷行的問題，造成了 RSS 無法解析第一行，因此產生錯誤。

也就是說，正常的 RSS xml 第一行就應該是 <? xml version="1.0" encoding="UTF-8" ?>。

瞭解錯誤原因後，開始來 Debug 吧！

確認檔案編碼以及空白字元

通常會造成這樣的原因，跟 php 語法有關。在 php 的開頭以及結尾，不應該有多餘的空白或是多餘的行數。另外，在佈景主題編碼的部分，也記得修改為 UTF-8 (不含 BOM ) 。

詳細的圖文教學，可以參考香腸之前寫的解決 WordPress 的 RSS 輸出錯誤問題。

(當然，如果我當初照著香腸的文章解掉了 Feed 問題，我也不用再寫這一篇了 XD)

除了香腸文章提到的 functions.php 外，記得也要檢查以下這些檔案的編碼以及空白字元：

wp-includesfeed-rss.php
wp-includesfeed-rss2.php
wp-includesfeed-atom.php

利用插件修正 RSS 檔案

如果你手上沒有編輯器，也不知道該怎麼檢查這些檔案的字元，我們可以使用 WordPress plugin 來幫我們做修正。

插件名稱: fix-rss-feed
下載位置: http://wordpress.org/extend/plugins/fix-rss-feed/
使用說明: 檢查檔案字元並修正，同時可以幫你解決 feed burner 燒 feed 時候出現的錯誤"Error on line 2: The processing instruction target matching "[xX][mM][lL]" is not allowed."
使用方法: 啟用插件後，記得先將 WordPress 根目錄下的wp-blog-header.php檔案權限設為666，不然如果檢查出錯誤，也無法幫你寫入。設好檔案權限後，請先點選「Fix wordpress rss feed error」，他會幫你列出所有需要修正的錯誤訊息。確認沒甚麼問題的話，按下「Resotre Fix」就會開始幫你修正空白字元囉。

停用插件或降版本

到這還是有問題的話，我們可以檢查 WordPress 檔案版本是否為最新版？通常解決方法是停用插件，一個一個測試。可能是插件跟最新版本之間有衝突。或者你也可以選擇降 WordPress 版本，正體中文的舊版本可以到 WordPress | Taiwan 正體中文站下載，記得不要覆蓋到 wp-config.php 喔。

更新插件或降版本後，請再重新瀏覽 feed ，看看是否有成功? 或者是可以安裝一個清快取的插件，清除快取後再重新整理測試看看。

重新驗證你的 RSS Feed

如果重新整理了 N 百次，還是出現同樣的錯誤畫面，有可能是快取的問題，我們可以試試這個方法：重新驗證 RSS feed。
請到 Feed Validator for Atom and RSS 輸入你的部落格網址，他會自動偵測你的 Feed 位置，以及確認有沒有錯誤。

在前面這些方法都試過後，我重新整理還是一樣有錯，所以心灰意冷之餘就找到了驗證 Feed 的網站，抱著姑且一試的心態輸入發現驗證居然通過了!! 如果你跟我一樣，驗證通過，表示 Feed 應該是成功解決了，只是可能因為快取問題所以無法看到， (朋友跟我說 WordPress Feed 的快取有 12 小時的樣子)。

如果不趕時間的朋友，可以試著等半天的時間，再清除快取、重新整理瀏覽器，看看 Feed 是否有成功。
如果你很急著想要把 RSS feed 啟用，建議如果驗證成功，可以用 feedburner 將你的 Feed 給燒出來，如果有通過驗證應該是可以成功燒出 Feed。

結語

因為我到這一步就成功燒出 RSS feed 了，所以就沒有再往下去探究其他原因，如果各位碰到類似的問題，希望以上這些步驟就可以解決，如果還是不行的話，不妨先等 12 小時再重新確認 Feed 喔。

最後也歡迎大家訂閱我的 Blog，訂閱網址：http://feeds.feedburner.com/mukispace

輕鬆寫 WordPress 模組 / 選單

日期：2013.03.08
留言數：1
標籤：WordPress 修改技巧教學

WordPress 的其中一個便利功能，就是可以自由地在側邊欄增添選單，而不用打開 sidebar.php 修改 → 上傳。如果大家有興趣自己製作佈景主題給他人使用，記得要將自由增添選單 (widget supported) 這個功能加上，今天就跟大家分享如何快速、輕鬆地寫出這個功能。

我們會用到的佈景檔案如下：

functions.php
sidebar.php
style.css

步驟一

開啟functions.php，在?> 的前面加上以下語法：

<?php
if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name'=> 'sidebar1',
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div>',
    'before_title' => '<div class="sidebar-title">',
    'after_title' => '</div>',
));
?>

name：幫側邊欄取個容易識別的名字吧
before_widget：側邊欄一塊一塊模組的開頭(通常會用 div 把他包起來，支援 html)
after_widget：側邊欄模組的結尾。
before_title：側邊欄模組的標題開頭。
after_title：側邊欄模組的標題結尾。

在這個階段我們先在 functions.php 新增好 sidebar1 這個 widget ，接下來就是要在適當的地方取出這個 sidebar1 囉。

步驟二

因為 functions.php 只是用來讓我們撰寫函式的檔案，不會有任何具體的效果。因此所有在 functions.php 寫好的函式，都要在其他 php 檔案進行呼叫的動作。而側邊欄的檔案是 sidebar.php ，所以請打開 sidebar.php 進行呼叫的動作吧！

請在要顯示這個 widget 的地方加入語法：

<?php
  if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar('sidebar1') ) : ?>
  <div class="sidebar-box">
    <div class="sidebar-title">New Articles</div>
    <div class="sidebar-entry">
      <ul><?php get_archives('postbypost','8','custom',' 	<li-->',''); ?></ul>
    </div>
    </div>
<?php endif; ?>

第二行的sidebar1，就是我們在 functions.php 寫的 'name'=>'sidebar1',

這一行意思是：如果你在後台沒有使用 widget 模組；而且就算有使用，也不是放在 sidebar1 的欄位底下。那麼，就會顯示以下內容。

簡單來說，就是如果沒有啟用 widget 模組，sidebar.php 就會給你預設的一組設定，我這邊的預設設定是最新文章標題。假使你有開啟模組，裡面的內容就不會使用 sidebar.php 的預設，而會使用你拖拉的模組為準。

這設定是為了那些沒有使用模組習慣的朋友，而且在預覽佈景主題的時候，也會秀出預設設定讓大家看長甚麼樣子。所以想要設計佈景主題的朋友們，可千萬不要偷懶不寫喔。

步驟三

最後要在 style.css 設定 sidebar.php 的一些樣式啦！相信會寫佈景主題的朋友，對這些設定都已經有些瞭解，這邊就不多說了。

以下是我之前寫的側邊欄樣式，分享給大家：

.sidebar-box {
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: 15px;
  line-height: 16px;
  font-weight: 400;
  font-size: 13px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
  -webkit-box-shadow: white 0px 1px 0px;
  -moz-box-shadow: white 0px 1px 0px;
  box-shadow: white 0px 1px 0px;
}

.sidebar-box .sidebar-title {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 1.333em;
  margin-bottom: 7px;
  color: #e94252;
}

.sidebar-box .author {
  float: left;
  margin: 0 0 0 5px;
  color: #999;
  width: 160px;
  text-shadow: 1px 1px 0 white;
}

.sidebar-box .author a img {
  padding-right: 5px;
}

.sidebar-box .author-link {
  clear: both;
  font-size: 12px;
  padding-top: 5px;
}

.sidebar-box a {
  line-height: 160%;
  color: #545454;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.sidebar-box a:hover {color: #e94252;}

修改 WordPress 留言表單的文字

日期：2013.02.10
留言數：2
標籤：WordPress 修改教學

WordPress 有內建的留言表單格式，如果你使用的是預設的布景主題 (例如 twentyten)，表單應該會像這樣：

如果你只想簡單修改留言表單的文字、欄位大小，或簡單的微調，不用重新寫一個 comment function，而是使用 comment form 內建的參數即可。

步驟一：打開檔案

留言的表單通常都寫在 comments.php 裡，所以請打開你佈景主題的comments.php

步驟二：搜尋語法

找到$agrs = array( 語法，我們要在裡面修改表單的文字以及欄位等資訊，建議有一些 HTML 基礎再進行修改。

步驟三：設定參數

以下是參數設定，提供給大家做參考。

可以照著修改表單欄位(把英文改成中文)、以及使用 HTML 語法修改 input 設定。

<?php
  $args = array(
  'fields' => apply_filters('comment_form_default_fields', array(
  'author' =>'.'<label for="author">' . __( '姓名<span class="required">*</span>', 'themetext' ) . '</label> ' . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" '="" .="" $aria_req="">',
  'email' =>'<label for="email">' . __( '郵件<span class="required">*</span>', 'themetext' ) . '</label> ' . '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" '="" .="" $aria_req=""> "',
    'url' =>'<label for="url">' . __( '網址<span class="required">*</span>', 'themetext' ) . '</label>' . '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30">' )),
	'label_submit' => '發表留言',
	'comment_field' => '<label for="comment">' . _x( '留言', 'themetext' ) . '</label><textarea id="comment" name="comment" aria-required="true" cols="45" rows="8"></textarea>',
    'comment_notes_after' => '',
    'comment_notes_before' => '',
  );
  comment_form( $args ); 
?>

通常表單欄位的字會跟著 WordPress 的語系設定，如果你使用的是正體中文語系，「comment」的字會變成「迴響」，但假使你想把「迴響」改成「留言」的話，一種方法是直接修改語系檔，另一種方法就是利用 comment form 的參數做設定。

至於像input, textarea，如果有額外需求，就可以利用上面這樣的參數設定，自己在裡面調整 HTML。

想要更進一步了解 comment form 的參數，可以參考 WordPress 官網的文件：Function Reference/ comment form