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

讓 float 的 div 高度相同

日期：2013.04.01
留言數：0
標籤：css 語法技巧教學

今天同事問我要怎麼讓 float 的 DIV 可以有相同高度？

亦即，即使左邊的 DIV 文字行數比較少，也會因為右邊 DIV 的行數變多而調整自己的高度。

上網搜尋研究了一下，其實有好多種方式可以滿足這個條件，甚至二欄、三欄部落格也有用類似的概念。

利用 padding 的填充與 margin 的消除

#container {
  overflow: hidden;
  width: 100%;
  color: #000;
}

#left-col {
  float: left;
  width: 50%;
  background-color: #eee;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* For IE */
  background-color: #369;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

使用 display:table ，讓 div 變成 table

#container {
  overflow: hidden;
  display:table;
  width: 100%;
  color: #000;
}

.row {display:table-row;}
.row div {display: table-cell;}

延伸閱讀與理論

要解掉同高還有很多方法，有興趣的朋友可以瞭解其他人是如何解決這樣的問題，他們也大方地分享自己的理論以及實際運用的效果：

4 Methods For Creating Equal Height Columns In CSS / vanseo design
Fluid Width Equal Height Columns / CSS tricks

使用 HTML5 和 jQuery 簡易存取資料

日期：2013.03.09
留言數：1
標籤：HTML5 技巧觀念

HTML5 增加了一個 data-* 的屬性，可以讓大家很方便的存取這些數據，而且完全不會影響你的版面。假使要做網頁互動，或是需要將資料存到後端紀錄，都非常的方便喔！

A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Embedding custom non-visible data with the data-* attributes

範例 1

HTML5 使用 data-* 非常簡單，以下是參考語法：

<div class="block" data-myid="test1">
  區塊測試
  簡易使用 HTML5 存取資料。
</div>

在不影響版面情況下，可以看到我們在增添了一個屬性：data-myid="test1。

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記，test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值：

var myid= $('.block').data('myid');  //值為 test1
  $("#btn_a").click(function(){
  alert(myid);
});

按下按鈕後，跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇，同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好：

<div id="block">
  <div class="block1" data-myid="no1">請點我，我是編號一</div>
  <div class="block1" data-myid="no200">請點我，我是編號二百</div>
</div>

以及利用 jQuery 取出 data-myid 的值

$('#block .block1').click(function(){
  alert($(this).attr("data-myid"));      
});

兩個 DIV 的 data-myid 不一樣，點選區塊之後顯示的結果也會不同。

無法讀取及訂閱 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;}

解決「側邊欄掉下去」的問題

日期：2009.04.29
留言數：0
標籤：技巧教學觀念

有時候換了一個版面，常常會發現部落格的側邊欄「噗通」地掉下去，這應該是許多 blogger 都會碰到的問題。甚至有時候在火狐及其他瀏覽器觀看正常，偏偏到 IE 就掛點，此種情況應該會讓每個人恨得牙癢癢的吧。

如果你碰到了這些問題，先別急著求助別人，建議使用以下方式測試看看，也許你自己也可以修復「側邊欄掉下去」的問題唷

用每個瀏覽器看，側邊欄都掉下去了

請參考以下狀況排除～

狀況1：側邊欄會掉下去的主要原因就是寬度的設置，不管是你內文或是側邊欄放置的東西，只要有一點超出預設的寬度，側邊欄就會往下掉。所以你可以先查看看是否有什麼東西超過預設寬度囉。
狀況2：另外一種情形，可能是你在寫 html 的時候漏寫了某些標籤，像是應該成雙成對的 … ，你把他寫成 ... ，或是少寫了 …等這些情況都會讓側邊欄出問題，嚴重一點版面會整個亂掉。

用 IE 瀏覽器看，側邊欄掉下去了

IE 因為不符合 w3c 的規範，所以碰到的問題會比較多，但我也不是每種狀況都了解，所以有漏掉的部份，歡迎大家補完

狀況1：第一重點還是寬度的問題，有時候你檢查發現沒超出寬度還是掉下去了? 那是因為 IE 在計算寬度的時候，會把「padding」以及「border」的屬性一起加進去。假設你寫了padding:0 5px;，就要自動把寬度扣掉 10px。
狀況2：第二重點仍是寬度問題，假設你的頁面設 1000px ，內文以及側邊欄各給 600px, 400px，此時 IE 側邊欄也會往下掉，那是因為 IE 不能把寬度算得太滿。所以我建議你給 600px, 390px，這樣就可以解決了。
狀況3：有時候我們在側邊欄插入一段文字， IE 不會幫我們自動換行，此時就會把版面撐大導致側邊欄掉下去，你可以加入 word-wrap:break-word;overflow:hidden; 讓文章自動換行

以上是我所想到的五種狀況，假設這些方法你都嘗試過了，卻仍然無法解決側邊欄的問題，不妨在底下留言告知，讓大家一起幫忙:)