用query_posts列出特定範圍文章 (1)

query_posts是一個非常好用的調用文章函數,可以做到同頁面內顯示多種不同範圍的文章,可以抓出某分類、標籤、日期及作者都可以,甚至連自訂欄位的資料也可以拿來當時判斷範圍的條件資料。

首先 query_posts 的寫法通常是如以下這樣的結構,先定義查詢再加入文章迴圈程式碼後再重置查詢就差不多ok了。









再來是說明在query_posts裡可以輸入哪些參數來顯示出自己想要的文章範圍。

 

Category Parameters(文章分類參數)

  • cat – 輸入分類編號來顯示出該分類內的文章
  • category_name – 輸入分類名稱來顯示出該分類內的文章
  • category__and – 顯示同時被列入多個分類的文章 (限輸入分類編號來識別)
  • category__in – 顯示該分類內的文章,但不包括子分類內的文章 (限輸入分類編號來識別)
  • category__not_in – 除某分類內的文章,其他分類及子分類文章均顯示 (限輸入分類編號來識別)

範例:

 array(2,6)));

// 顯示分類編號為6的文章  (但不包括子分類文章)
query_posts(array('category__in' => array(6)));

// 除了分類編號為2及6的文章,子分類及其他分類文章都顯示
query_posts(array('category__not_in' => array(2,6)));
?>

 

Tag Parameters(標籤參數)

  • tag – 輸入標籤名稱來顯示含有該標籤的文章
  • tag_id – 輸入標籤編號來顯示含有該標籤的文章
  • tag__and – 顯示符合含有多個特定標籤的的文章 (限輸入標籤編號來識別)
  • tag__in – 顯示符合其中一個特定標籤的的文章 (限輸入標籤編號來識別)
  • tag__not_in – 只要有該標籤的文章一律不顯示 (限輸入標籤編號來識別)
  • tag_slug__and – 顯示符合含有多個特定標籤的的文章 (限輸入標籤代稱來識別)
  • tag_slug__in  – 顯示符合其中一個特定標籤的的文章 (限輸入標籤代稱來識別)

範例:

 array(37,47));

// 僅顯示標籤帶有編號37或47的文章
query_posts(array('tag__in' => array(37,47));

// 僅顯示標籤不帶有編號37或47的文章
query_posts(array('tag__not_in' => array(37,47));
?>

 

Author Parameters(作者參數)

  • author – 輸入作者編號來顯示該作者發表的文章
  • author_name – 輸入作者名稱來顯示該作者發表的文章

範例:


 

Post & Page Parameters(文章 & 分頁參數)

 27

// 顯示文章代稱為about-my-life的文章
'name' => 'about-my-life'

// 顯示分頁編號為7的分頁
'page_id' => 7

// 顯示分頁代稱為about的分頁
'pagename' => 'about'

// 當文章超過 5 篇時就僅顯示 5 篇文章並且搭配換頁程式碼顯示換頁連結,設為 -1 則不換頁全部顯示。
'posts_per_page' => 5

// 當設定為 6 時就顯示 6 篇文章,設為 -1 則顯示範圍內的全部文章。
'showposts' => 6

// 僅顯示文章編號為5,12,2,14,7的這 5 篇文章
'post__in' => array(5,12,2,14,7)

// 僅顯示文章編號不為5,12,2,14,7的其他全部文章
'post__not_in' => array(6,2,8)

// 顯示文章類型為分頁的文章,預設值為 post (文章),可以使用的數值有 attachment(媒體檔頁面), page(分頁), post(文章), 或 revision(修訂)。
'post_type' => 'page'

// 顯示文章狀態為公開性質的文章,可以使用的數值有 pending(審核中), draft(草稿), future(排程), private(私人), trash(垃圾)。
'post_status' => 'publish'

// 顯示文章範圍內的第 93 頁
'post_parent' => 93
?>

 

這邊先插一段說明如何將多個參數加在一起使用,有兩種寫法,一種是用 & 來連接多個參數,另一種是用 array 來組合多個參數。
不過像是cat這種多個數值是用逗號來分隔的話是不能用在array裡的,當然兩種寫法也是可以混在一起用。

範例 1:顯示分類編號為9及8的文章,並且只列出使用CSS或CKEditor標籤的文章,每頁顯示 5 篇文章。

 5,
	'paged'=>$paged
);
query_posts('cat=9,8&tag=CSS,CKEditor&' . $args); ?>

 

範例 2:顯示分類編號為9及8但不包括子分類的文章,並且不列出文章編號為6,2,8的文章,每頁顯示 5 篇文章。

 array(9,8),
	'post__not_in' => array(6,2,8),
	'posts_per_page' => 5,
	'paged'=>$paged
);
query_posts($args);
?>

 

Sticky Post Parameters(置頂文章參數)

get_option('sticky_posts'))

// 將文章的置頂屬性清除掉,以正常文章順序排序(例如發表日期)顯示出來
caller_get_posts=1
?>

 

範例 1:只顯示置頂文章,如果沒有就不顯示。

 1,
	'post__in'  => $sticky,
	'caller_get_posts' => 1
);
query_posts($args);
if($sticky[0]) {
   // 在這裡輸入迴圈區塊程式碼...
}
?>

 

範例 2:顯示文章,但不顯示置頂文章。

get_option("sticky_posts")));
?>

 

範例 3:顯示分類編號為6的文章、每頁顯示 3 篇文章,並且將此分類下文章的置頂屬性清除掉,以正常文章順序排序(例如發表日期)顯示出來。

 

下集待續…

夫.玩樂學習記

這是我的部落格,也是我第一次接觸WordPress後開始架起的第一個部落格,之中也換過好幾個主題,最後才敲定使用這個 Arthemia 免費版主題,不過在我奮戰不懈下終於把他改得跟商業版快差不多了yes

當然也裝上了不少外掛還有排版也跟原本的 Arthemia 越差越多了…不過等有空時想再重新換主題了… 這個主題感覺越來越慢 囧rz…

網址:
http://fu.play-learn.net/

主題:
Arthemia (Free)

外掛:
http://fu.play-learn.net/plugins

WP Private Messages|私人訊息

外掛名稱:WP Private Messages
外掛版本:1.0.1
下載網址:http://wordpress.org/extend/plugins/wp-private-messages/

有時想要私下跟成員聯絡或是通知一些要事的話,有個"站內信箱"功能在會顯得比較方便些,這個外掛就能達成基本的私人訊息功能,不過只能提供單純的文字訊息,並不包括HTML或是圖案上傳等功能,這對於只想要簡潔私人訊息功能的使用者來說會是個不錯的選擇。

佈景主題常用的函數小抄

通堂我們在修改現有的主題外觀或是排版時會常看到一些不知是顯示什麼訊息的 php 程式碼或是不知道什麼頁面的程式碼是落在哪個檔案裡,所以就列出常在佈景主題檔案裡看到的程式碼的相關說明以及說明佈景主題的檔案結構。

Theme Structure(佈景主題結構)
如果您要從無到有創造一個WordPress用佈景主題,那麼以下的檔案都是必須的,因為那是一個標準的主題都會包含的檔案,所以至少要有以下這些檔案來建構出主題。

  • header.php – 頁首
  • index.php – 首頁
  • sidebar.php – 側邊欄頁面
  • footer.php – 頁底
  • single.php – 單篇文章頁面
  • page.php – 分頁頁面
  • comments.php – 迴響頁面(從迴響清單 ~ 發表迴響表單)
  • search.php – 搜尋頁面
  • searchform.php – 搜尋框
  • archive.php – 彙整頁面
  • functions.php – 存放主題自製函數的檔案
  • 404.php – 錯誤 / 找不到網頁訊息頁面

Template Include Tags(呼叫頁面用標籤)
因為一個網頁是由數個檔案所組成,所以要在index、single等這些主頁之中插入程式碼來呼叫頁首底或是迴響頁面才能顯示成一個完整的頁面。

 - 呼叫頁首檔案:header.php
 - 呼叫側邊欄頁面檔案:sidebar.php
 - 呼叫頁底檔案:footer.php
 - 呼叫迴響頁面檔案:comments.php

 

Template Bloginfo Tags(顯示網站資訊用標籤)
以下的標籤是用來顯示您的部落格名稱、描述及連結等資訊。

 - 顯示網誌標題
 - 顯示網誌描述
 - 顯示網誌安裝網址
 - 顯示網誌網址
 - 顯示系統管理員電子郵件(指第一位系統管理員)
 - 顯示部落格網頁編碼
 - 顯示網誌 RSS 文章摘要網址
 - 顯示網誌 RSS 迴響摘要網址
 - 顯示網誌目前使用的佈景主題目錄網址
 - 顯示網誌 pingback 網址
 - 顯示網誌目前使用的佈景主題 CSS 檔案網址

 

WordPress Conditional Tags(條件判斷用標籤)
我們可以用WordPress內建的一些判斷函數來很快速的做出僅限首頁顯示某某資訊、某篇文章或是在單篇文章才顯示資訊等效果。
這邊會在下一篇文章更詳細說明如何運用這些判斷標籤,在這只是大約提起一下。

  • is_admin() – 僅有管理員才看得到
  • is_home() – 僅在首頁顯示
  • is_front_page() – 當每次連到網誌時顯示(第一個看到的網誌頁面)
  • is_single – 僅在單篇文章頁面顯示
  • is_sticky() – 僅在置頂文章頁面顯示
  • is_page() – 僅在分頁顯示
  • is_category() – 僅在分類頁面顯示

Common WordPress Tags(通用標籤)
這邊列出的是顯示常見的文章資訊,例如作者、發表日期時間及文章連結還有內容等等,像是上下篇文章連結也有標籤可以運用。
註:the_xxx()系列都是用在迴圈裡的,這點別忘了。

 - 顯示文章發表時間
 - 顯示文章發表日期
 - 顯示文章標題
 - 顯示文章內容
 - 顯示文章摘要
 - 顯示文章連結網址
 - 顯示文章所屬的分類
 - 顯示文章的發表作者
 - 顯示文章的編號
 - 顯示分頁
 - 顯示標籤雲
 - 顯示分類
 - 顯示行事曆
 - 顯示加上某些條件後彙整的文章(比如某年某月發表的文章清單等)
 - 顯示上下篇文章連結
 - 顯示下一篇文章連結
 - 顯示上一篇文章連結

以上列的就是目前比較常在佈景主題中看到的函數代表意義,下一篇將說明各個函數的運用及範例。

本文資料來源:http://www.graphicrating.com/2009/01/18/my-wordpress-cheat-sheet/

WP-MulticolLinks|友情鏈接多欄顯示

WP-MulticolLinks
在側邊欄顯示以多欄的版面顯示友情鏈接。 你可以限制顯示鏈接的數量,在單欄和多欄之間隨意切換。 並且可以對鏈接進行排序或隨機排列。還可以使用“顯示全部”的按鈕。 安裝說明: 將下載的壓縮檔解壓縮後上傳至Wordpress/wp-content/plugins/目錄下再至後台啟用即可, 然後再到外觀的界面工具集將此模組拖移到想放的側邊欄就可。

下載網址:
http://wordpress.org/extend/plugins/wp-multicollinks/

前台擷圖:
plugins_wp-multicollinks_02

後台擷圖:(位於外觀→界面工具集→WP-MulticolLinks)
plugins_wp-multicollinks_01

Category Icons|分類圖示

Category Icons
可以讓文章分類擁有個自定義的分類圖示。 安裝說明: 將下載的壓縮檔解壓縮後上傳至Wordpress/wp-content/plugins/目錄下再至後台啟用即可。  將圖案設定好後,依照佈景主題程式碼指示來安插程式碼(就是安插在藍色箭頭處)。 在分類列表中如果你只想要顯示圖案不顯示文字(像我這樣), 可以在分類圖示Widget中的put_cat_icons () 參數欄位輸入以下參數

icons_only=true

如果要顯示一般圖示而不是顯示小圖示的話(預設值是顯示小圖)則是輸入以下參數

small=false

兩個都要的話就用 & 連接,就像這樣。

icons_only=true&small=false

下載網址: http://wordpress.org/extend/plugins/category-icons/

官方前台與後台擷圖網址: http://www.category-icons.com/screenshots/

前台擷圖:
plugins_category-icons_01

後台擷圖:
plugins_category-icons_03

plugins_category-icons_02

Arras: 修正側邊欄迴響未顯示大頭貼

主題版本:1.4.2-RC1
因為有人來回文我才發現 Arras 主題的側邊欄之迴響的頭像是壞掉不能顯示的… 話不多說開始當除蟲機吧 -___-

開啟位於arras-theme/library/widgets.php 的檔案,並且在第 97 行(根據Arras版本可能行數不一樣)找到以下程式碼:

echo get_avatar($comment->user_id, 36);

取代為以下這段程式碼就打完收工啦~~ yes

echo get_avatar($comment, 36);

CKEditor: 於字型選單中增加自己想要的中文字型

加入中文字型選單
因為預設的都是英文字型而沒有常見的新細明體、標楷體、微軟正黑體這些字型清單,所以我就乾脆翻檔案來加入字型,照以下的步驟做就可以成功把中文字型加到字型清單去,不過別加那種額外的中文字型,例如什麼華康字體等等,畢竟這只是一個字型清單不是字型檔丫…

開啟 ckeditor-for-wordpress/ckeditor/ckeditor.js 檔案,尋找位於第 49 行的以下片段程式碼:

Verdana/Verdana, Geneva, sans-serif

然後在其後面加入自己想要的字型,格式是 [ 清單顯示名稱 / 主要字型, 後選字型1, 後選字型2 ] 插入結果如下:

Verdana/Verdana, Geneva, sans-serif;微軟正黑體/微軟正黑體, 新細明體, Times New Roman

CKEditor: 迴響增加表情圖案按鈕及自訂表情圖案

加入表情圖案按鈕
因為給迴響用的WordPressBasic界面沒有表情圖案按鈕,想想給人留言有個表情圖案可以用也不錯 tounge 2
所以就乾脆自己開啟檔案來手動加入按鈕。
開啟位於ckeditor-for-wordpress目錄下的ckeditor.config.js檔案,然後第23行的下面這段程式碼:

config.toolbar_WordpressBasic = [ [ 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];

替換成以下這段程式碼就可以讓WordPressBasic界面有表情圖案按鈕可以使用。

config.toolbar_WordpressBasic = [ [ 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image', '-', 'Smiley' ] ];

 

加入自己的表情圖案
再來則是新增自己要用的表情圖案,首先把圖檔都上傳至ckeditor-for-wordpress/ckeditor/plugins/smiley/images目錄下,再來是開啟ckeditor-for-wordpress/ckeditor/目錄下的ckeditor.js檔案,然後在第68行的,’envelope.gif’字串後面依樣畫葫蘆加上自己圖案的檔名,然後在同行的,’mail’字串後面加入表情的名稱後就完成新增的程序了。

CKEditor For WordPress|所見即所得編輯器

外掛名稱:CKEditor For WordPress
外掛版本:1.0.1
下載網址:http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

因為原本內建的TimyMCE總是在我切換到HTML頁面後就很鴨霸的把我有關php原始碼的部份都亂搞掉,所以一氣之下找了其他版本的所見即所得編輯器來用,經過我測試就算是在HTML頁面輸入程式碼後也不會被洗掉。

雖然這個版本是尚在 beta 階段不過就已經感覺滿OK了,等使用一陣子過後看有出什問題再來回報給大家,雖然CKEditor編輯器相關的外掛不只這一套,不過這套算是我在官網找過中最符合我需求的,最主要是他不像Dean's FCKEditor For WordPress等編輯器把HTML界面給取代掉,因為我有裝AddQuicktag這個快速標籤外掛模組以方便我可以快速把WP-CodeBox的標籤插進去使用。

而且也支援部份外掛的按鈕顯示:

PS:
後來發現如果是自己加的CODE用符號會變成ASCII代碼(不包括由編輯器所加入的HTML語法),例如
「&」(AND符號) 換成 『&』
「"」(雙引號) 換成 『"』
「'」 (單引號) 換成 『'』
「<」 (小於符號) 換成 ‘&lt;’
「>」 (大於符號) 換成 『&gt;』

想不到才剛用就發現這問題,雖然在所見即所得畫面及文章發表是正常的,
不過在切到HTML頁面後會就會發現那些都變成ASCII代碼…cry

不過這是CKEditor本身的問題不是外掛作者整合時出現的問題,我會持續尋找解決辦法…畢竟這外掛我還滿喜歡的..

jQuery 連結平移效果

本文資訊來源網址:http://wange.im/mouseover-link-slide-for-wordpress.html

透過 jQuery 可以讓連結文字在滑鼠移到時有平移的效果,實際效果可點擊本篇文章的標題文字連結。

首先在開啟佈景主題的header.php在< / head >之前加入以下語法,其中第一段如果你之前已有使用其他的jQuery效果就不用再累加了。



在第二段中的 .entry-title a 是你想使用特效的連結文字之class名稱,例如以下這段:

所以就是輸入 newstitle a 就可以達到你想要的效果了,如果想要多個不同class名稱的話就以逗號來分隔,例如: .newstitle a, .entry-title a

PS: 如果你有安裝 fancybox for wordpress 2.7.2 這個外掛的話那第一行的導入語法就不用加了,不然會讓這個外掛失效。

感謝 Life Studio 分享此教學

jQuery 連結載入文字特效

本文資訊來源網址:http://wange.im/loading-effect-by-jquery.html

利用jQuery可達到將按下連結後的連結文字轉成另一段文字的效果,實際效果可點擊本篇文章的標題文字連結。

首先在開啟佈景主題的header.php在< / head >之前加入以下語法



第一行是載入由Google所托管的 jQuery 庫。
第四行的 .entry-title a 是你想使用特效的連結文字之class名稱,例如以下這段:

所以就是輸入 newstitle a 就可以達到你想要的效果了,如果想要多個不同class名稱的話就以逗號來分隔,例如: .newstitle a, .entry-title a

PS: 如果你有安裝 fancybox for wordpress 2.7.2 這個外掛的話那第一行的導入語法就不用加了,不然會讓這個外掛失效。

感謝 Life Studio 分享此教學