WordPress 進階教程 (三十七)：WordPress 後臺新增幻燈片板塊

本站框架有提供新增幻燈片的步驟，請直接前往本站框架欄目-> 幻燈片外掛。

網頁幻燈片 (slider) 應用很廣泛，很多部落格也喜歡在首頁弄一個特色文章切換。

不管是文章切換還是圖片切換，或者是圖文混合切換，在後臺新建一個獨立的幻燈片板塊就非常方便。

如圖：

要是說明的是，這個裡面有個排序幻燈片功能，我也不記得是從哪裡弄過來的，反正已經很久遠了，記不清了。

首先是後臺的實現，第一步，需要新建一個文章型別。

提醒：你可以直接將下面的程式碼新增到主題的 functions.php 中，也可以新建一個檔案。本工作室測試時，使用 wp3.8.1 twentyfourteen 主題，所以我再 twentyfourteen 主題的 inc 資料夾下，新建一個 post_type.php 檔案。然後在 twentyfourteen 主題的 functions.php 檔案 (可以放到最前面) 加入以下程式碼，包含 post_type.php 檔案

require get_template_directory() . '/inc/post_type.php';

這樣接下來的程式碼就都新增到 post_type.php 檔案即可。

首先建立一個自定義文章型別

add_action('init', 'ashu_post_type');
function ashu_post_type() {
/**********幻燈片*****************/
register_post_type( 'slider_type',
array(
'labels' => array(
'name' => '幻燈片',
'singular_name' => '幻燈片',
'add_new' => '新增',
'add_new_item' => '新增新幻燈片',
'edit_item' => '編輯幻燈片',
'new_item' => '新幻燈片'
),
'public' => true,
'has_archive' => false,
'exclude_from_search' => true,
'menu_position' => 5,
'supports' => array( 'title','thumbnail'),
)
);
}

新增完之後，即可在後臺看到新建立的文章型別：

當然，僅僅這樣，一個幻燈片只有標題肯定是不行的。所以需要建立一些自定義欄位，給文章新增自定義欄位是一個比較長的話題，可參考或直接使用我們的教程：WordPress 進階教程 (十): 後臺建立自定義面板類檔案，關於如何新增自定義欄位，這裡就跳過。

我使用本工作室釋出的類檔案，新增了兩個自定義欄位，分別為連結地址-slider_link 圖片地址-slider_pic 。如圖

如此，後臺即可方便新增幻燈片了。

第二步：在幻燈片管理頁面預覽幻燈片資訊。繼續在 post_type.php 中新增以下程式碼：

add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
function slider_type_custom_columns( $columns ) {
$columns = array(
'cb' => '<input type="checkbox" />',
'title' => '幻燈片名',
'haslink' => '連結到',
'thumbnail' => '幻燈片預覽',
'date' => '日期'
);
return $columns;
}
add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
function slider_type_manage_custom_columns( $column, $post_id ) {
global $post;
switch( $column ) {
case "haslink":
if(get_post_meta($post->ID, "slider_link", true)){
echo get_post_meta($post->ID, "slider_link", true);
} else {echo '----';}
break;
case "thumbnail":
$slider_pic = get_post_meta($post->ID, "slider_pic", true);
echo '<img src="'.$slider_pic.'" width="95" height="41" alt="" />';
break;
default :
break;
}
}