新聞中心

WordPress開發(fā)：自定義一個(gè)短代碼Shortcode的具體步驟（一）

作者 / 無(wú)憂主機(jī) 時(shí)間 2015-03-21 10:24:49

無(wú)憂小編也在使用Wordpress程序在無(wú)憂主機(jī)php空間中建站哦，快來(lái)與我們交流下經(jīng)驗(yàn)把。這次和大家介紹下wordpress Shortcode；這個(gè)東西是干嘛的呢？這個(gè)是讓用戶通過(guò)wordpress短代碼可以非常方便快速地在編輯文章或頁(yè)面的時(shí)候插入動(dòng)態(tài)內(nèi)容，短代碼的常見應(yīng)用有插入最新文章、插入廣告、插入音頻視頻、插入下載按鈕等。由于這個(gè)短代碼功能是在2.5版本引進(jìn)來(lái)的，一直到現(xiàn)在都在沿用，所以很多模板定制商都會(huì)這個(gè)功能，如果你是站長(zhǎng)，或者是Wordpress的學(xué)習(xí)者可以學(xué)習(xí)一下哦，今天無(wú)憂主機(jī)小編給大家介紹第一步，利用簡(jiǎn)單的代碼創(chuàng)建回調(diào)函數(shù)。考慮到初次接觸這塊的站長(zhǎng)們的操作，無(wú)憂小編就先由簡(jiǎn)到繁的講解一下：在使用Wordpress程序時(shí)，我們想顯示給定的最新文章，那么我們可以通過(guò)下面的代碼來(lái)實(shí)現(xiàn)：[recent-posts] 有變量的話，那么如何控制變量的值呢？當(dāng)然要通過(guò)設(shè)定一個(gè)參數(shù)來(lái)控制現(xiàn)實(shí)的文章的數(shù)量：[recent-posts posts="5"] 文章調(diào)用出來(lái)了，是不是得給文章列表增加一個(gè)標(biāo)題呢？需求代碼如下： [recent-posts posts="5"]Posts Heading[/recent-posts] 懂編程的可能一下就知道無(wú)憂小編上面所說(shuō)的，不懂的，請(qǐng)繼續(xù)往下看：第一步：創(chuàng)建回調(diào)函數(shù) 利用短代碼創(chuàng)建一個(gè)函數(shù)方法，這里是用代碼實(shí)現(xiàn)的功能，從數(shù)據(jù)庫(kù)中獲取最新的文章：

function recent_posts_function() {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
endwhile;
endif;
wp_reset_query();
return $return_string;
}

上面的代碼可以查詢數(shù)據(jù)庫(kù)獲取出最新的文章并且返回一個(gè)帶有<a>鏈接字符串，需要注意的是這個(gè)函數(shù)返回的是字符串而非直接輸出的內(nèi)容。第二步：注冊(cè)短代碼功能代碼寫完了，怎么讓這個(gè)功能在Wordpress中使用呢？那么就是第二步的功能注冊(cè)短代碼啦，方法很簡(jiǎn)單，利用代碼：

function register_shortcodes(){
add_shortcode('recent-posts', 'recent_posts_function');
}

上面這段代碼就可以讓調(diào)用短代碼：[recent-posts]而實(shí)現(xiàn)調(diào)用獲取文章回調(diào)函數(shù)recent_posts_function()，這里需要注意的是短代碼的命名要有意義，避免重復(fù)錯(cuò)亂。第三步：Hook into WordPress 短代碼也封裝好了，就只剩下嵌套使用了，為了能讓recent_posts_function() 函數(shù)順利執(zhí)行，我們需要綁定到WordPress 的初始化鉤子中去。重要代碼：add_action( 'init', 'register_shortcodes'); 第四步：測(cè)試功能一個(gè)簡(jiǎn)單而又復(fù)雜的獲取最新文章的短代碼已經(jīng)完成，現(xiàn)在就是測(cè)試，怎么測(cè)試呢？在wp后臺(tái)新建一篇文章，或者再編輯原文章也可以，然后把短代碼：[recent-posts]加入到文章內(nèi)容的某個(gè)位置即可。在瀏覽器中打開后，就可以看到如下圖所示：