如何给WordPress网站添加滚动公告?今天我们一起了解一下。

1、添加公告文章类型

首先,注册一个公告的文章类型,包括公告的新建,添加,编辑与删除。在functions.php的同级目录下新建一个 gonggao.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 ,

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menu_icon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’dashicons-megaphone\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’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.php中引用该公告的gonggao.php文件,在functions.php的底部加上如下代码:

include (\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gonggao.php\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”);

之后,再登录到wordpress网站的后台,就可以看到在文章的下面多了一个公告标签。

上述代码中的

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menu_icon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’dashicons-megaphone\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,

就是我们设定的 Dashicons 图标,效果如下图。如果去掉这行的话,图标默认和文章的图标一样。

2. 添加公告样式

将下面的公告内容代码放在 index.php 自己想要显示的位置:

<div id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”site-gonggao\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><div class\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”site-gonggao-div\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”fa fa-volume-up\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”</i></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\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => 3 ) );

while ( $loop->have_posts() ) : $loop-&gt;the_post();

?>;

<li><?php mb_strimwidth(the_content(), 0, 70, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’…\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’); ?></li>

<?php endwhile; wp_reset_query(); ?>

</ul>

</di></di>

其中 3 代表有 3 条公告, 70 则表示每个公告显示 70 个字符。这个可以根据你自己的情况设置。

3. 添加 css 代码

将下面代码复制到 main.css 文件当中即可:

div#site-gonggao {

line-height: 25px;

height: 30px;

background-color: #FFF;

padding-left: 10px;

color: #666;

-webkit-box-shadow: 0 5px 5px #D3D3D3;

box-shadow: 0 5px 5px #D3D3D3;}

#site-gonggao .list {

padding-left: 5px;}

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

#site-gonggao-div2 .list li p {

display: inline;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;}

4. 添加滚动公告 js 代码

添加公告的滚动代码,需要 jQuery 库,当然 DUX 主题是已经加载了的,直接将下面代码复制到 header.php 中即可

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 样式。

更多wordpress相关技术文章,请访问wordpress教程栏目进行学习!

以上就是Wordpress滚动公告怎么做的详细内容,更多请关注WordPress主题站。

相关新闻

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

151-1101-0018

在线咨询:
邮件:30115776@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部