WordPress主题添加幻灯片功能

PetitQ WordPress教程 2019-1-23 3.77K 2 2

在 wordpress 主题使用中，有个别的主题并没有幻灯片功能，需要我们手动添加该功能，成本过高，今天给大家分享一组不错的后台幻灯版发布的代码，同时也可以运用在前台调用，可以说是华丽丽的前端幻灯片了，我们以默认的 wordpress 主题为例，讲解下如何为 wordpress 主题添加一个幻灯片发布功能，我们再 wordpress 主题下创建一个 inc 文件夹，并在该文件夹下新建 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'),

```
        )
```
```
    );
```
```
}
```
```
 
```

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;
```
```
    }
```
```
}
```

也想出现在这里？联系我们吧

然后在 wordpress 主题的 functions.php 文件加入以下代码

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

就这样后台部分完成，下面是前台内容输出的部分，因为使用不同的幻灯插件会有不同的输出形式，下面只是给大家一个参考：

```
<?php
```
```
$args = array(
```
```
    'post_type'=>'slider_type',
```
```
);
```
```
query_posts($args);
```
```
if( have_posts() ) : ?>
```
```
<div id="banner">
```
```
    <div id="show">
```
```
    <?php
```
```
    while( have_posts() ) : the_post();
```

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

```
        if($image_url!=''){ ?>
```
```
        <div class="show_item">
```

            <a href="<?php echo get_post_meta($post->ID,'slider_link',true);?>">

                <img src="<?php echo $image_url; ?>" alt="<?php the_title(); ?>" />

```
            </a>
```
```
        </div>
```
```
    <?php } endwhile; ?>
```
```
    </div>
```
```
</div>
```
```
<?php endif; wp_reset_query(); ?>
```

WordPress 主题添加幻灯片功能

已有 943 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

WordPress主题添加幻灯片功能

WordPress 主题添加幻灯片功能

相关文章

WordPress前端代码压缩

WordPress 博客更新内容后自动通知注册会员

WooCommerce如何为订单添加附加费用

评论：

发表回复取消回复

热销模板

WordPress教程

WordPress 主题添加幻灯片功能

相关文章

评论：

发表回复 取消回复

热销模板

发表回复取消回复