php后台幻灯片管理,wordpress进阶教程(三十七):wordpress后台添加幻灯片板块

本站框架有提供添加幻灯片的步骤,请直接前往本站 框架栏目->幻灯片插件。

网页幻灯片(slider)应用很广泛,很多博客也喜欢在首页弄一个特色文章切换。

不管是文章切换还是图片切换,或者是图文混合切换,在后台新建一个独立的幻灯片板块就非常方便。

如图:0174bf252b7367fb8d0bb1e773f3d146.png

要是说明的是,这个里面有个排序幻灯片功能,我也不记得是从哪里弄过来的,反正已经很久远了,记不清了。

首先是后台的实现,第一步,需要新建一个文章类型。

提醒:你可以直接将下面的代码添加到主题的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'),

)

);

}

添加完之后,即可在后台看到新创建的文章类型:dd5dfd4a647a892c398c296ebc0d97a6.png

当然,仅仅这样,一个幻灯片只有标题肯定是不行的。所以需要创建一些自定义字段,给文章添加自定义字段是一个比较长的话题,可参考或直接使用我们的教程:wordpress进阶教程(十):后台创建自定义面板类文件,关于如何添加自定义字段,这里就跳过。

我使用本工作室发布的类文件,添加了两个自定义字段,分别为  链接地址-slider_link    图片地址-slider_pic。如图5ebec2d7f0b23d21cb6f9d41b9cf091d.png

如此,后台即可方便添加幻灯片了。

第二步:在幻灯片管理页面预览幻灯片信息。继续在post_type.php中添加以下代码:

add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );

function slider_type_custom_columns( $columns ) {

$columns = array(

'cb' => '',

'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 '';

break;

default :

break;

}

}

06450359bf70c26f940bad7e3e933bc5.png

ea8c7a160f45a04f7b52b15f51671d98.png

就这样后台部分完成。

前台如何输出呢?使用不同的jquery slider插件会有不同的html输出格式,仅提供一个参考:

$args = array(

'post_type'=>'slider_type',

);

query_posts($args);

if( have_posts() ) : ?>

while( have_posts() ) : the_post();

$image_url = get_post_meta($post->ID,'slider_pic',true);

if($image_url!=''){ ?>

ID,'slider_link',true);?>">

" alt="<?php  the_title(); ?>" />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值