Eric's Who Know » WordPress Plugin http://who-know.com C'est La Vie Mon, 17 May 2010 22:21:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 改造 textarea 大作戰 – 並以 WordPress 評論框為例http://who-know.com/add-wmd-wysiwym-editor-to-textarea/ http://who-know.com/add-wmd-wysiwym-editor-to-textarea/#comments Thu, 22 Oct 2009 22:15:42 +0000 Eric http://who-know.com/?p=92 01. 首先請到作者的網站 or 作者置於 Google Code 的地方來下載 WMD: The Wysiwym Markdown Editor。

02. 在您網頁的 textarea 加入 WMD Editor 的方式有下面兩種方式。

  a. 於 <head></head> 間加入下面的程式碼, 這樣 WMD Editor 會在您網頁第一個出現的 textarea 自動加上 WMD Editor。 // 最簡單就是在 </head> 正上方添加下面的程式碼。

<script type="text/javascript" src="./wmd-editor/wmd.js"></script>

  b. 於您想出現 WMD Editor 的 textarea 下方添加下面的程式碼。

<script type="text/javascript" src="./wmd-editor/wmd.js"></script>

03. 以下以 WordPress 為例。

// 假設您下載下來的 WMD Editor 解壓縮後放在正在使用的主題下, 且 wmd.js 在 ./wp-content/themes/Your_Theme_Name/wmd-editor/wmd.js。如果不是的話, 請依照您的實際狀況來做修改, 如果還是有問題的話不妨使用絕對位址。

// eg : 使用絕對位址

<script type="text/javascript" src="http://who-know.com/wp-content/themes/My_Theme_Name/wmd-editor/wmd.js"></script>

  a. 打開 ./wp-content/themes/Your_Theme_Name/header.php, 在 <head></head> 間加入下面的程式碼。 // 最簡單就是加在 </head>的上一行。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wmd-editor/wmd.js"></script>

  b. 如果天生跟程式碼沒緣分, 又不排斥安裝一個外掛, 可以到 WMD Editor Wordpress Plugin 來下載外掛, 然後於 WordPress 後台啟用即可。

// WMD Editor Wordpress Plugin 的程式碼超簡單的, 就是替您在 <head></head> 加上一句程式碼, 來 include wmd.js, 說不定您自己都會寫 WMD Editor Wordpress Plugin 這外掛喔^^

  c. 如果上面那兩招無效, 或想有更進階的玩法。打開 ./wp-content/themes/Your_Theme_Name/comments.php, 以 textarea 為關鍵字, 用 Ctrl+F 找到類似下面的程式碼。 // 下面以某兩個 WordPress Theme 為例。

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>

<textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea>

請於 </textarea> 後面加上下面的程式碼, 即完成。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wmd-editor/wmd.js"></script>

// 如果希望有預覽功能, 就在您想出現預覽的地方再加上, 或直接加在上面那段程式碼的後面。

<div class="wmd-preview"></div>

// 千言萬語比不上一張圖?

]]> http://who-know.com/add-wmd-wysiwym-editor-to-textarea/feed/ 6 WordPress Page Related Plugin: Page Links and Exclude Pages from Navigation Menuhttp://who-know.com/wordpress-page-related-plugin-page-links-and-exclude-pages-from-navigation-menu/ http://who-know.com/wordpress-page-related-plugin-page-links-and-exclude-pages-from-navigation-menu/#comments Sat, 05 Sep 2009 08:55:14 +0000 Eric http://who-know.com/?p=75 01. WordPress Plugin : Page Links To 是一個可以讓 Page 或 Post，連結到您想要的網址，還有是否以新視窗開始、以 301 還是 302 來做 Redirect 的選項可以選擇。

eg: 如果您有論壇 or 相簿，但無法整合到 WordPress 時，Page Links To 這個 WP Plugin 就非常好用。

a. 填上您想要連結的網址 : Point to this URL
b. 如果想要以新視窗開啟 : Open this link in a new window
c. 不勾為301，打勾為302 : Use a temporary 302 redirect (default is a permanent 301 redirect)

02. WordPress Plugin : Exclude Pages from Navigation 是一個可以讓您經由簡單的設定，來決定是否讓 Page 顯示在 Navigation Menus (導航欄)。

a. 打勾代表要顯示於Navigation Menus (導航欄) : Include this page in user menus
b. 假設把 about 隱藏起來，但如果知道連結還是可以打個開喔 -> http://who-know.com/about/

03. WordPress Plugin : Page Link Manager 是一個跟 Exclude Pages from Navigation 很類似的 WP Plugin，不過當您有很多分頁時，要一一的去設定顯示 or 隱藏，這時 Page Link Manager 會是一個更好的選擇，它會把所有的分頁列出來，可以直接勾選是否顯示出來。

a. 打勾代表要顯示於Navigation Menus (導航欄) : Include this page in user menus
b. 假設把 about 隱藏起來，但如果知道連結還是可以打個開喔 -> http://who-know.com/about/

// Page Links To、Exclude Pages from Navigation 都是在新增一個 Post 或 Page 那裡設定，但 Page Link Manager 則是在 Tools (工具) -> Page Links 下去做設定。

還在用 wp_list_pages(); 的 exclude 和查 Page ID，然後再辛苦的去改 Theme，來隱藏分頁嗎 ?
那就趕快來試試 Exclude Pages from Navigation、Page Link Manager 吧。

]]> http://who-know.com/wordpress-page-related-plugin-page-links-and-exclude-pages-from-navigation-menu/feed/ 2 WordPress Plugin:Math Comment Spam Protectionhttp://who-know.com/wordpress-plugin-math-comment-spam-protection/ http://who-know.com/wordpress-plugin-math-comment-spam-protection/#comments Mon, 31 Aug 2009 03:30:28 +0000 Eric http://who-know.com/?p=70 一開始先到 作者網站 or WordPress Plugin 下載插件, 然後解壓縮上傳到 /wp-content/plugins 目錄，然後將下面的程式碼貼到 Theme 的 comments.php 的適當位置，像我是貼到 Website 的後面。

<p>
<?php  // Math Comment Spam Protection Plugin
if ( function_exists('math_comment_spam_protection') ) {
  $mcsp_info = math_comment_spam_protection();
?>
<b><input type="text" name="mcspvalue" id="mcspvalue" value="" size="22" tabindex="4" />
   <label for="mcspvalue"> Simple Math Problem : <?php echo $mcsp_info['operand1'] . ' + ' . $mcsp_info['operand2'] . ' = ?' ?></label></b>
   <input type="hidden" name="mcspinfo" value="<?php echo $mcsp_info['result']; ?>" />
<?php } // if function_exists... ?>
</p>

上傳上去且啟用後，一定要到 Options(設定)/Math Comment Spam 裡按一下 Update Options，否則會有問題喔
數學題目的數字可以是各種形式，如果改成中文，對於防 bot 的就更有效了，這個可以在Options(設定)/Math Comment Spam 裡設定。

]]> http://who-know.com/wordpress-plugin-math-comment-spam-protection/feed/ 0 比較 Thickbox, LightBux, Auto HighSlide, and WP-Slimbox2http://who-know.com/compare-thickbox-and-lightbux-with-auto-highslide-and-wp-slimbox2/ http://who-know.com/compare-thickbox-and-lightbux-with-auto-highslide-and-wp-slimbox2/#comments Mon, 31 Aug 2009 02:22:43 +0000 Eric http://who-know.com/?p=69 Thickbox, LightBox, Auto HighSlide, WP-Slimbox2 這四個都可以讓圖片有光箱的特效, 其中 Auto HighSlide, WP-Slimbox2 是 WordPress Plugin。

下面是 Thickbox, LightBox, Auto HighSlide, WP-Slimbox2 的用法和比較

01. Thickbox 不用再自己上傳, 因為 WordPress 就有內附了。但如果原圖太大, 點擊不會還原到最大, 而是有一固定大小, 而且用 IE8 測試好像有問題, 愛搞怪的 IE6 這次卻很乖。

a. WP 用的是沒壓縮 /wp-includes/js/jquery/jquery.js
b. WP 用的是壓縮過 /wp-includes/js/thickbox/thickbox.js
c. WP 用的是沒壓縮 /wp-includes/js/thickbox/thickbox.css

用法 : 在您要使用的主題 Theme 的 header.php 找到 之前, 添加下面的code

<!-- For ThickBox Usage -->
<script type="text/javascript" src="./wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="./wp-includes/js/thickbox/thickbox.js"></script>

<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="./wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen"/>
<!-- For ThickBox Usage -->

如果您的 Thickbox 是上傳在其它地方, 不是用WP內建的, 就要用絕對路徑, 否則用上面的相對路徑即可。

<!-- For ThickBox Usage -->
<script type="text/javascript" src="http://who-know.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://who-know.com/wp-includes/js/thickbox/thickbox.js"></script>

<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="http://who-know.com/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen"/>
<!-- For ThickBox Usage -->

插入單張圖片：

<a class="thickbox" title="標題" href="原圖URL"><img src="縮圖URL" alt="" /></a>

插入連續圖片： // 有 Prev、Next 的效果

<a class="thickbox" title="標題1" rel="photo" href="原圖1URL"><img src="縮圖1URL" alt="" /></a>
<a class="thickbox" title="標題2" rel="photo" href="原圖2URL"><img src="縮圖2URL" alt="" /></a>
<a class="thickbox" title="標題3" rel="photo" href="原圖3URL"><img src="縮圖3URL" alt="" /></a>



02. LightBox 沒什麼問題, 就是肥胖了點

用法 : 在您要使用的主題 Theme 的 header.php 找到 之前, 添加下面的 code。

<!-- For lightbox -->
<script type="text/javascript" src="./lightbox/js/prototype.js"></script>
<script type="text/javascript" src="./lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="./lightbox/css/lightbox.css" type="text/css" media="screen" />
<!-- For lightbox -->

如果您的 LightBox 是上傳在其它地方, 就要用絕對路徑, 否則用上面的相對路徑即可。

<!-- For lightbox -->
<script type="text/javascript" src="http://who-know.com/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://who-know.com/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://who-know.com/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="./lightbox/css/lightbox.css" type="text/css" media="screen" />
<!-- For lightbox -->

插入單張圖片：

<a href="原圖URL" rel="lightbox" title="標題"><img src="縮圖URL" alt="" /></a>

插入連續圖片： // 有 Prev、Next 的效果

<a href="原圖1URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖1URL" alt="" /></a>
<a href="原圖2URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖2URL" alt="" /></a>
<a href="原圖3URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖3URL" alt="" /></a>


03. Auto HighSlide v.s. WP-Slimbox2

不同於上面兩個, Auto HighSlide, WP-Slimbox2 是 WordPress Plugin, 它們可以自動找到文章中的"圖片", 讓圖片自動有特效, 您不用加任何的 code, 很方便吧。

以下是兩個插件的異同
a. Auto HighSlide、WP-Slimbox2 都是小硬碟福音, 這樣說好像怪怪的。兩個 Plugin 都很小, 初看 WP-Slimbox2 肥肥的, 那是因為它有 language pack。
b. Auto HighSlide 如果原圖真的很大張, 它會變成兩段式放大。點擊圖片放大以後, 再按右下角有個向四面八方的圖才會顯示真的的原圖。
c. Auto HighSlide 點擊圖片放大以後, 可以用左鍵拖移圖片。
d. 同一篇文章的圖片 WP-Slimbox2 會自動把它變成有 Prev、Next 的效果
// 前提是有大於1張的圖片
e. 如果圖片是上傳在 Picasa or Flickr 可以試試 WP-Slimbox2, 它好像可以辨識出這兩個空間的圖片。
// WP-Slimbox2 下載啟用後, WordPress 後台有可以設定, 啟用 Autoload 後就不用自己加code。

用法 : 就跟平常插入圖片一樣。

<a href="原圖URL"><img src="縮圖URL" alt="" /></a>


To sum up, 如果您剛開始用 WordPress 或還沒有有很多圖片的文章或不想用插件, 那用 Thickbox or LightBox 都是不錯的選擇。如果已經有很多文章了, 不想在特地去修改文章, 那 Auto HighSlide or WP-Slimbox2 會是您更好的選擇。
// 提醒：Thickbox 本身會把太大的圖片自動縮成它內定的大小, 所以不適合用來展示大型的圖片。

ps:
a. Thickbox or LightBox 除了可以用在 WP 秀圖外, 也可以用在其它地方, 只要在<head></head>間插入上面的code。除了

<?php wp_enqueue_script('jquery'); ?>

b. 如果用了Thickbox or LightBox 但是小圖片 (eg: 關閉、放大鏡) 沒顯示出來檢查一下您的 thickbox.js and thickbox.css or lightbox.js and lightbox.css

其它幾個相似的 WordPress Plugin : Lightbox Plus, jQuery Lightbox, Auto Thickbox

]]> http://who-know.com/compare-thickbox-and-lightbux-with-auto-highslide-and-wp-slimbox2/feed/ 4