成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

建站分享

分段图

最新文章

建站分享
当前位置: 首页 » 建站分享 » WordPress纯代码无插件实现顶部滚动+链接公告功能

WordPress纯代码无插件实现顶部滚动+链接公告功能

编辑:狂族晨曦 来源:建站分享WordPress技巧 日期:2015-07-27 阅读: 6,917 次 26 条评论 » 百度已收录

不知道怎么回事,公告栏这个功能非常有实用性,搜索引擎里面却少之又少,所以我将我制作滚动公告栏的经验与大家分享一下,希望能对大家有点帮助。

之前为大家分享了单条公告的实现方法,有需要的童鞋可以看看:

传送阵:WordPress纯代码无插件实现顶部单条公告

最终要实现的效果大家可以参考本站头部。废话不多说,开始教程。

一、注册公告文章类型

首先,我们要注册一个名为“公告”的文章类型,将以下代码加入到WordPress主题functions.php最后一个?>前:

/*
** 成航先森_公告
** http://www.capjsj.cn
*/
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 );

为了方便管理代码也可以把上面的代码复制下来然后保存文件为functions-gonggao.php,然后再引入functions.php文件中:

include("functions-gonggao.php");

请注意引入的functions-gonggao.php文件的存放路径,这里的路径是在functions.php文件所在目录的当前目录下。

这时候,登录网站后台,就可以看到如下效果(点击放大):

WordPress后台公告

二、公告内容调用

现在我们要将后台设置的自定义文章类型公告内容显示出来,把下面的代码放到你想要调用公告内容的页面即可,本站是放在了头部模板内,所以整站度可以看到:

<div id="site-gonggao">
<div class="site-gonggao-div"><i class="fa fa-volume-up"></i>&nbsp;</div>
 <div id="site-gonggao-div2" class="sitediv">
	<ul class="list" id="siteul">
    <?php $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 5 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>
      <?php endwhile; wp_reset_query(); ?>
      </ul>
 </div>
</div>

其中的"5"为调用显示条数,"70"为调出内容的字符数,这两个参数可根据自己的情况设置。这里的代码结构因为是来源于本站,所以请另行结合自己的网站做适当的修改。

三、CSS样式

上面已经将设置的公告显示出来了,那么接下来就要将其css美化了:

div#site-gonggao{line-height: 25px; height: 30px; background-color: #FFF; width: 990px; margin: 0 auto 10px; padding-left: 10px; color: #666; border-left: 5px solid #3E94D2; border-right: 5px solid #3E94D2; -webkit-box-shadow: 0 5px 5px #D3D3D3; box-shadow: 0 5px 5px #D3D3D3;}
.site-gonggao-div{float:left;}
.fa-volume-up:before{content: "\f028"; color: #428bca;}
#site-gonggao a{color: #1663B7;}
#site-gonggao a:hover{color: #09F;}
#site-gonggao-div2{overflow: hidden;
height:30px;}
#site-gonggao-div2 .list li{height: 30px;line-height: 30px;overflow: hidden;}

此样式仅做参考,请大家结合自己的网站自行调整。

四、滚动代码

首先提醒大家,此JS代码需要jQuery库,如果网站没有加载的还需要添加一个jQuery库。

网上给出的滚动代码如下,大家测试可用的话就可以直接用,不行的话就请继续往下看:

function autoScroll(obj){  
    $(obj).find(".list").animate({  
          marginTop : "-30px"  
      },500,function(){  
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
      })  
      };
   $(function(){   
       setInterval('autoScroll(".sitediv")',4000)  
     })  ;

上面的代码如果无效,就请使用下面的代码。另外,上面的代码中会有一个BUG,如果只有一条公告的话,也会滚动,因此,我在中间添加了两行代码,使其在只有一条公告的情况下,不运行滚动代码。代码如下:

function autoScroll(obj){  
var aa=document.getElementById("siteul").getElementsByTagName("li").length;
if(aa!==1){
    jQuery(obj).find(".list").animate({  
          marginTop : "-30px"  
      },500,function(){  
      jQuery(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
      })  
      };
	  }
   $(function(){   
       setInterval('autoScroll(".sitediv")',4000)  
     })  ;

注:其中,第4行的".list"是调用代码中,ul标签的class样式;第12行的".sitediv"是包裹ul的div标签的class样式。

有什么疑问或错误,欢迎在底部提出。

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共4869个字
转载请注明出处来自http://www.capjsj.cn/wordpress_cdmwcjsxdbgd_ljgggn.html
已有 26 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
女汉子的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. Sean的头像
    Sean:

    我也很需要这个功能,你这个和我的需求完全一致,感谢分享!

    2015-09-19 21:47 回复
  2. Sean的头像
    Sean:

    请教下,.fa-volume-up:before{content: “\f028”; color: #428bca;}这个是定义那个公告的喇叭图片吗?这个图片怎么实现啊?

    2015-09-19 22:36 回复
    • 博主的Gravatar 头像

      @Sean: 不用啊,这个是字体图标,只要你把“二、公告内容调用”中的代码完全复制,包含了里面的“”就可以了。“.fa-volume-up:before{content: “\f028″; color: #428bca;}”这个是加到CSS样式表里面的。

      2015-09-19 22:49 回复
      • Sean的头像
        Sean:

        @狂族晨曦: 感谢回复!!
        那个是字体图标啊。我完全用了你的代码,但是那个图标不显示,我以为是图片的。
        字体图标是wp自带的还是要用插件呢?我的是wp4.2中文版。

        2015-09-19 22:56 回复
        • 博主的Gravatar 头像

          @Sean: 哦哦,我找到原因了。你先下载这个字体:“链接: http://pan.baidu.com/s/1qeQg2 密码: h75a”,放在你的主题目录里的“fonts”文件夹下(没有就建立一个)。然后CSS中在刚才的“.fa-volume-up:before{content: “\f028″; color: #428bca;}”前面加上
          “@font-face {
          font-family:’FontAwesome’;
          src:url(fonts/fontawesome-webfont.eot?v=4.1.0);
          src:url(fonts/fontawesome-webfont.eot?#iefix&v=4.1.0) format(’embedded-opentype’),url(fonts/fontawesome-webfont.woff?v=4.1.0) format(‘woff’),url(fonts/fontawesome-webfont.ttf?v=4.1.0) format(‘truetype’),url(fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular)format(‘svg’);
          font-weight:normal;
          font-style:normal
          }”
          之后试试。

          2015-09-19 23:22 回复
          • Sean的头像
            Sean:

            @狂族晨曦: 哈,这个问题搞定了
            非常感谢你的指点,太谢谢了!

            2015-09-20 00:02 回复
            • 博主的Gravatar 头像

              @Sean: 没有事,解决了就好。

              2015-09-20 00:05 回复
              • Sean的头像
                Sean:

                @狂族晨曦: 经过上线测试,发现要使用字体图标还需要在CSS中@font-face那段代码后面加一些代码才能显示,供其它使用该代码的朋友参考,再次感谢楼主的无私分享!
                .fa {
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                }

                .fa-volume-up:before {
                content: “\f028”;
                }

                我最终的代码如下:
                /*!
                * Font Awesome 4.2.0 by @davegandy – http://fontawesome.io – @fontawesome
                * License – http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
                */@font-face {
                font-weight:normal;font-style:normal;font-family:’FontAwesome’;src:url(/fonts/fontawesome-webfont.eot?v=4.2.0);src:url(/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format(’embedded-opentype’),url(/fonts/fontawesome-webfont.woff?v=4.2.0) format(‘woff’),url(/fonts/fontawesome-webfont.ttf?v=4.2.0) format(‘truetype’),url(/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format(‘svg’);
                }

                .fa {
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                }

                .fa-volume-up:before {
                content: “\f028”;
                }

                2015-09-24 22:25 回复
  3. Sean的头像
    Sean:

    楼主,你好,我又来了,遇到个wordpress的问题,有点搞不懂,想跟你这请教下,不知道你方便吗?
    用于sidebar.php,有两个需求:
    1.当前分类有上级分类则显示上级分类的名称和链接
    2.当前分类没有上级分类,则显示当前分类的名称和链接

    我的代码如下,现在第2个需求可以实现,但是在第1个需求中可以显示上级分类的名称,不过上级分类的名称对应的链接还是当前分类的链接,麻烦帮忙看看是哪里有问题吧?
    category_parent);
    if (!empty($cat_parent)) {
    echo ‘term_id).'”>’.$cat_parent.’‘;
    }
    else {
    echo ‘term_id).'”>’.$category[0]->cat_name.’‘;
    }
    ?>

    2015-12-13 17:13 回复
    • 博主的Gravatar 头像

      @Sean: wordpress 获取分类的顶级父类 – 韩世雷 程序员专栏 – 博客频道 – CSDN.NET
      http://blog.csdn.net/hanshileiai/article/details/42142335

      利用WordPress当前分类id获取父分类id | 爱推吧
      http://ituibar.com/using-the-wordpress-sorted-by-current-id-for-the-parent-id/

      wordpress实现获取父类分类名称的方法-Wordpress教程-源码库
      http://www.aspku.com/cms/wordpress/47434.html

      现在工作了,比较忙,只能找点东西给你参考下了。你也可以找找大神们发布的面包屑代码,可以参考。

      2015-12-13 20:41 回复
  4. leejon的头像

    新公告链接类似 http://x.com/bulletin/short-message-1,打开是404页面,这个对固定连接有要求?

    2016-04-28 07:19 回复
    • 博主的Gravatar 头像

      @leejon: 在本地WordPress测试了一下,更换固定链接格式并不会导致打开公告404,应该是其他方面的问题吧,你再看看。

      2016-04-28 17:10 回复
      • leejon的头像

        @狂族晨曦: 我又来请教问题:2端JQ代码使用都发现这个错误“Uncaught TypeError: Cannot read property ‘getElementsByTagName’ of null :?: ”,滚动一次次数增加一次。请问有哪里需要删减的?
        另外再请教博主一个问题,主题折腾目前到点击展开式表情,请问这方面有哪些资料可以让我学习的呢?

        2016-05-15 00:14 回复
        • 博主的Gravatar 头像

          @leejon: 这个是提醒你的选择的标签没找到,你看看有没有写对标签?getElementsByTagName()的括号里面要有标签名的,如div、li、p,不过公告代码里面没有用这个函数啊?
          我去你那里看了下,你的公告应该已经处理好了吧?

          2016-05-15 10:09 回复
          • leejon的头像

            @狂族晨曦: 代码没有修改过,我发现了再首页并不会复现问题,得在文章页就能发现了。

            2016-05-15 11:47 回复
            • 博主的Gravatar 头像

              @leejon: 文章也没有看到你的公告,所以不能帮你检查下了。

              2016-05-15 11:57 回复
              • leejon的头像

                @狂族晨曦: 我意思说,文章页并没设定公告功能,仅在首页布置公告。但在文章页才能发现那个bug错误的信息。

                2016-05-15 11:59 回复
        • 博主的Gravatar 头像

          @leejon: 关于点击展开表情,其实也就是加一段js/JQ代码实现的,控制标签的显示和隐藏。
          JS实现: document.getElementById('iDBody1').style.display = ""/*显示*/;
          document.getElementById('iDBody2').style.display = "none"/*隐藏*/;

          JQ实现:$("#id").show()/*表示display:block显示*/,
          $("#id").hide()/*表示display:none显示*/;

          然后在用个标签绑定函数,实现点击效果即可。

          2016-05-15 10:19 回复
  5. 小C博客的头像

    好东西!!!很多人都需要!

    2016-04-30 23:29 回复
  6. 全自动码垛机的头像

    :sad: 我不会操作

    2016-06-22 11:17 回复
  7. 龙笑天的头像

    这个能加上鼠标hover悬停吗?

    2016-06-28 21:23 回复
  8. 女汉子的头像

    我很想弄这个呢

    2016-07-12 15:04 回复
官方微信
发表评论 返回顶部