首页 > WordPress > 开发笔记 > 给WordPress主题用自定义分类法增加幻灯片(轮播图)功能

给WordPress主题用自定义分类法增加幻灯片(轮播图)功能

一个老不正经 2022/05/01 1,176围观

在开发主题后,发现主题的幻灯片没办法在后台自定义增加,或者说没办法循环,只能增加固定数量的幻灯片;所以特地弄了个可以无限循环的出来,下面贴代码。

创建自定义分类

<?php
add_action('init', 'ashu_post_type');
function ashu_post_type() {
/**********幻灯片*****************/
register_post_type( 'banner',//自定义字段别名(url)
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',),
)
);
}

创建自定义分类字段

//幻灯片自定义字段
$banner_post_meta_boxes =
array(

"banner_c" => array(
"name" => "banner_c",
"std" => "",
"title" => "第一行文字",
"type"=>"text"),

"banner_b" => array(
"name" => "banner_b",
"std" => "",
"title" => "白色标题",
"type"=>"text"),

"banner_a" => array(
"name" => "banner_a",
"std" => "",
"title" => "黄色标题",
"type"=>"text"),

"banner_g" => array(
"name" => "banner_g",
"std" => "",
"title" => "白色标题",
"type"=>"text"),

"banner_h" => array(
"name" => "banner_h",
"std" => "",
"title" => "长文本",
"type"=>"text"),

"banner_d" => array(
"name" => "banner_d",
"std" => "",
"title" => "输入链接地址",
"type"=>"text"),

"banner_e" => array(
"name" => "banner_e",
"std" => "",
"title" => "按钮名称",
"type"=>"text"),

"banner_f" => array(
"name" => "banner_f",
"std" => "",
"title" => "输入图片地址 ( 必填 )",
"type"=>"banner"),
);

面板内容

// 面板内容
function banner_post_meta_boxes() {
global $post, $banner_post_meta_boxes;
//获取保存
foreach ($banner_post_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
if ($meta_box_value != "")
//将默认值替换为已保存的值
$meta_box['std'] = $meta_box_value;
echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';
//选择类型输出不同的html代码
switch ($meta_box['type']) {
case 'title':
echo '<h4>' . $meta_box['title'] . '</h4>';
break;
case 'text':
echo '<h4>' . $meta_box['title'] . '</h4>';
echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
break;
case 'banner':
echo '<h4>' . $meta_box['title'] . '</h4>';
echo '<span class="form-field file-banners"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /><a href="javascript:;" class="bit_file button">选择图片</a></span><br />';
break;
}
}
}

// 创建面板
function banner_post_meta_box() {
global $theme_name;
if (function_exists('add_meta_box')) {
add_meta_box('banner_post_meta_box', '首页幻灯片', 'banner_post_meta_boxes', 'banner', 'normal', 'high');
}
}
// 保存数据
function save_banner_post_postdata($post_id) {
global $post, $banner_post_meta_boxes;
foreach ($banner_post_meta_boxes as $meta_box) {
if ( !isset($_POST[$meta_box['name'] . '_noncename']) || !wp_verify_nonce($_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__))) {
return $post_id;
}
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id)) return $post_id;
} else {
if (!current_user_can('edit_post', $post_id)) return $post_id;
}
$data = $_POST[$meta_box['name'] . ''];
if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
}
}
add_action('admin_menu', 'banner_post_meta_box');
add_action('save_post', 'save_banner_post_postdata');

最后是预览

//自定义幻灯片预览
add_filter( 'manage_edit-banner_columns', 'banner_custom_columns' );
function banner_custom_columns( $columns ) {
$columns = array(
'cb' => '<input type="checkbox" />',
'title' => '幻灯片名',
'banner_f' => '幻灯片预览',
'banner_d' => '链接到',
'date' => '日期'
);
return $columns;
}

add_action( 'manage_banner_posts_custom_column', 'banner_manage_custom_columns', 10, 2 );
function banner_manage_custom_columns( $column, $post_id ) {
global $post;
switch( $column ) {
case "banner_d":
if(get_post_meta($post->ID, "banner_d", true)){
echo get_post_meta($post->ID, "banner_d", true);
} else {echo '----';}
break;
case "banner_f":
$slider_pic = get_post_meta($post->ID, "banner_f", true);
echo '<img src="'.$slider_pic.'" width="95" height="41" alt="" />';
break;
default :
break;
}
}

前端循环调用

前端循环调用的话,因为是自定义分类法,所以需要输出指定分类法,下面贴代码。

<?php
$args = array(
‘post_type’=>’banner’,//自定义分类法别名(必须是对应的)
);
query_posts($args);
if( have_posts() ) : ?>

循环

<?php
while( have_posts() ) : the_post();
$image_url = get_post_meta($post->ID,'banner_f',true);
if($image_url!=''){ ?>

接下来调用字段

<?php echo $image_url; ?>);">//这个是必须填入的字段,因为前面已经定位好了,这个不输入,则不显示。

<?php echo get_post_meta($post->ID,'banner_c',true);?>//这里对应上面的设的自定义字段,对应填入就行。

结束循环

<?php } endwhile; ?>

结束

<?php endif; wp_reset_query(); ?>