首页 / WordPress 进阶教程 / WordPress进阶教程(三十七)：WordPress后台添加幻灯片板块

WordPress进阶教程(三十七)：WordPress后台添加幻灯片板块

    • 珂李斯

    发布于

    by

    本站框架有提供添加幻灯片的步骤，请直接前往本站 框架栏目->幻灯片插件。 网页幻灯片(slider)应用…

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

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

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

    如图：

     

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

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

    提醒：你可以直接将下面的代码添加到主题的functions.php中，也可以新建一个文件。本工作室测试时，使用wp3.8.1 twentyfourteen主题，所以我再twentyfourteen主题的inc文件夹下，新建一个post_type.php文件。然后在twentyfourteen主题的functions.php文件(可以放到最前面)加入以下代码，包含post_type.php文件

    1. require get_template_directory() . ‘/inc/post_type.php’;

    这样接下来的代码就都添加到post_type.php文件即可。

    首先创建一个自定义文章类型

    1. add_action(‘init’, ‘ashu_post_type’);
    2. function ashu_post_type() {
    3.     /**********幻灯片*****************/
    4.     register_post_type( ‘slider_type’,
    5.         array(
    6.             ‘labels’ => array(
    7.                 ‘name’ => ‘幻灯片’,
    8.                 ‘singular_name’ => ‘幻灯片’,
    9.                 ‘add_new’ => ‘添加’,
    10.                 ‘add_new_item’ => ‘添加新幻灯片’,
    11.                 ‘edit_item’ => ‘编辑幻灯片’,
    12.                 ‘new_item’ => ‘新幻灯片’
    13.             ),
    14.         ‘public‘ => true,
    15.         ‘has_archive’ => false,
    16.         ‘exclude_from_search’ => true,
    17.         ‘menu_position’ => 5,
    18.         ‘supports’ => array( ‘title’,’thumbnail’),
    19.         )
    20.     );
    21. }

    添加完之后，即可在后台看到新创建的文章类型：

     

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

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

     

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

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

    1. add_filter( ‘manage_edit-slider_type_columns’, ‘slider_type_custom_columns’ );
    2. function slider_type_custom_columns( $columns ) {
    3.     $columns = array(
    4.         ‘cb’ => ‘<input type=“checkbox” />’,
    5.         ‘title’ => ‘幻灯片名’,
    6.         ‘haslink’ => ‘链接到’,
    7.         ‘thumbnail’ => ‘幻灯片预览’,
    8.         ‘date‘ => ‘日期’
    9.     );
    10.     return $columns;
    11. }
    13. add_action( ‘manage_slider_type_posts_custom_column’, ‘slider_type_manage_custom_columns’, 10, 2 );
    15. function slider_type_manage_custom_columns( $column, $post_id ) {
    16.     global $post;
    17.     switch( $column ) {
    18.         case “haslink”:
    19.             if(get_post_meta($post->ID, “slider_link”, true)){
    20.                 echo get_post_meta($post->ID, “slider_link”, true);
    21.             } else {echo ‘—-‘;}
    22.                 break;
    23.         case “thumbnail”:
    24.                 $slider_pic = get_post_meta($post->ID, “slider_pic”, true);
    25.                 echo ‘<img src=“‘.$slider_pic.’” width=“95” height=“41” alt=“” />’;
    26.                 break;
    27.         default :
    28.             break;
    29.     }
    30. }

     

     

     

    就这样后台部分完成。

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

    1. <?php
    2. $args = array(
    3.     ‘post_type’=>’slider_type’,
    4. );
    5. query_posts($args);
    6. if( have_posts() ) : ?>
    7. <div id=“banner”>
    8.     <div id=“show”>
    9.     <?php
    10.     while( have_posts() ) : the_post();
    11.         $image_url = get_post_meta($post->ID,’slider_pic’,true);
    12.         if($image_url!=”){ ?>
    13.         <div class=“show_item”>
    14.             <a href=“<?php echo get_post_meta($post->ID,’slider_link’,true);?>”>
    15.                 <img src=“<?php echo $image_url; ?>” alt=“<?php the_title(); ?>” />
    16.             </a>
    17.         </div>
    18.     <?php } endwhile; ?>
    19.     </div>
    20. </div>
    21. <?php endif; wp_reset_query(); ?>
    类别：WordPress 进阶教程、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT


  • 评论功能已经关闭!