北极寒流 » 网络资源 » wordpress添加滚动公告功能实现方法(免插件) - 2014.09.07

wordpress添加滚动公告功能实现方法(免插件)

免插件实现wordpress添加滚动公告栏功能的方法分享。wordpress添加公告栏功能采用的是wordpress自定义文章类型功能(其实wordpress的自定义文章类型可以用来干很多事,例如大家很常见的wordpress问答功能也是基于此)。

wordpress的自定义文章类型函数具体的参数大家可到wordpress register post type查阅详情。

一、注册公告文章类型

把下面代码复制到主题的functions.php文件中。

// 公告
function post_type_bulletin() {
register_post_type(
'bulletin',
array( 'public' => true,
'publicly_queryable' => true,
'hierarchical' => false,
'labels'=>array(
'name' => _x('公告', 'post type general name'),
'singular_name' => _x('公告', 'post type singular name'),
'add_new' => _x('添加新公告', '公告'),
'add_new_item' => __('添加新公告'),
'edit_item' => __('编辑公告'),
'new_item' => __('新的公告'),
'view_item' => __('预览公告'),
'search_items' => __('搜索公告'),
'not_found' =>  __('您还没有发布公告'),
'not_found_in_trash' => __('回收站中没有公告'),
'parent_item_colon' => ''
),
'show_ui' => true,
'menu_position'=>5,
'supports' => array(
'title',
'author',
'excerpt',
'thumbnail',
'trackbacks',
'editor',
'comments',
'custom-fields',
'revisions') ,
'show_in_nav_menus'=> true ,
'taxonomies' => array(
    'menutype',
'post_tag')
)
);
}
add_action('init', 'post_type_bulletin');

function create_genre_taxonomy() {
  $labels = array(
'name' => _x( '公告分类', 'taxonomy general name' ),
'singular_name' => _x( 'genre', 'taxonomy singular name' ),
'search_items' =>  __( '搜索分类' ),
'all_items' => __( '全部分类' ),
'parent_item' => __( '父级分类目录' ),
'parent_item_colon' => __( '父级分类目录:' ),
'edit_item' => __( '编辑公告分类' ),
'update_item' => __( '更新' ),
'add_new_item' => __( '添加新公告分类' ),
'new_item_name' => __( 'New Genre Name' ),
  );
  register_taxonomy('genre',array('bulletin'), array(
         'hierarchical' => true,
         'labels' => $labels,
         'show_ui' => true,
         'query_var' => true,
         'rewrite' => array( 'slug' => 'genre' ),
  ));
}
add_action( 'init', 'create_genre_taxonomy', 0 );

或者为了方便管理代码也可以把上面的代码复制下来然后保存文件为bulletin-post-types.php,然后再引入functions.php文件中:
include("bulletin-post-types.php");

请注意引入的bulletin-post-types.php文件的存放路径,这里的路径是在functions.php文件所在目录的当前目录下。如果你的文件放在主题下的inc文件夹,则可以

include("inc/bulletin-post-types.php");

二、显示自定义文章类型内容

接下来我们就把刚刚自定义的公告显示出来,把下面的代码放到你想要调用公告内容的页面即可:

<div id="announcement_box"  class="ption_a">
  <div id="announcement">
    <ul style="margin-top: 0px;">
      <?php
                $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 5 ) );
                while ( $loop->have_posts() ) : $loop->the_post();
            ?>
      <li><span class="mr10">
        <?php the_time('Y-n-j H:i') ?>
        </span><a href="http://www.jiawin.com/bulletin-archive/#bulletin-<?php the_ID(); ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 70,"…"); ?></a></li>
      <?php endwhile; wp_reset_query(); ?>
    </ul>
  </div>
  <div class="announcement_remove"><a title="关闭" href="javascript:void(0)" onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div>
</div>

其中的”5″为调用显示条数,”70″为调出内容的字符数,这两个参数可根据自己的情况设置。

接下来是美化css样式,这是必须的∶

#announcement_box {background-color:rgba(240, 239, 215, 0.5); background-color:#E3DEC0 \9; margin:0 0 0 40px; border:1px dashed #C1C0AB; border-radius:2px; padding-left:10px; top:42px; width:674px;}
#announcement {background:url(images/notice_icon.png) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left;}
#announcement a {color:#000;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:5px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 \9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}

最后给公告加个上下滚动的效果:

function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#announcement")',4000)
});

如果你是把上面的jQuery加入js文件中调用,出现没效果的情况,请尝试用这对代码包围起来。

jQuery(function($){
……
});

做完这一切,我们先更新一下wordpress的固定链接(不点一下更新固定链接按钮,公告页面会404),然后就可以在后台左侧添加公告菜单了,添加公告的操作跟添加文章一模一样,只是类型一定是选择公告,否则不予显示。

如果你还希望也能直接查看公告页面内容(类似文章页面)。那么我们还需要为公告增加一个模板页面(默认调用的是page.php)。然后在页面增加一个bulletin页面,模板选择下面的bulletin.php

公告预览页面bulletin.php

<?php
/*
Template Name: bulletin
*/
?>

<?php get_header(); ?>

<?php 
  $temp = $wp_query; 
  $wp_query = null; 
  $wp_query = new WP_Query(); 
  $show_posts = 4;  //How many post you want on per page
  $permalink = 'Post name'; // Default, Post name
  $post_type = 'bulletin';

  //Know the current URI
  $req_uri =  $_SERVER['REQUEST_URI'];  

  //Permalink set to default
  if($permalink == 'Default') {
  $req_uri = explode('paged=', $req_uri);

  if($_GET['paged']) {
  $uri = $req_uri[0] . 'paged='; 
  } else {
  $uri = $req_uri[0] . '&paged=';
  }
  //Permalink is set to Post name
  } elseif ($permalink == 'Post name') {
  if (strpos($req_uri,'page/') !== false) {
  $req_uri = explode('page/',$req_uri);
  $req_uri = $req_uri[0] ;
  }
  $uri = $req_uri . 'page/';

  }

  //Query
  $wp_query->query('showposts='.$show_posts.'&post_type='. $post_type .'&paged='.$paged); 
  //count posts in the custom post type
 $count_posts = wp_count_posts('bulletin');

  while ($wp_query->have_posts()) : $wp_query->the_post(); 
  ?>

<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 70,"…"); ?></a>
</li>

  <?php endwhile;?>
  <nav>
  <?php previous_posts_link('« ') ?>
  <?php
  $count_post = $count_posts->publish / $show_posts;

  if( $count_posts->publish % $show_posts == 1 ) {
  $count_post++;
  $count_post = intval($count_post);
  };

  for($i = 1; $i <= $count_post ; $i++) { ?>
  <a <?php if($req_uri[1] == $i) { echo 'class=active_page'; } ?> href="<?php echo $uri . $i; ?>"><?php echo $i; ?></a>
  <?php }
  ?>
  <?php next_posts_link(' »') ?>
  </nav>

  <?php 
  $wp_query = null; 
  $wp_query = $temp;  // Reset
  ?>

<?php get_footer(); ?>

资料来源http://www.jiawin.com/wordpress-custom-post-type-pagination/

07

wordpress添加滚动公告功能实现方法(免插件)

分享到:

最受欢迎的