网站模板库
  • 首页
  • web前端工具
    • HTML/JS转换工具
    • JS/HTML格式化工具
    • 字母/英文大小写转换工具
    • robots.txt文件生成工具
    • Js压缩/格式化工具
    • Css在线压缩工具_代码格式化
  • 关于我们
    • 免责声明
    • 联系我们
    • 广告服务
    • 服务项目
    • 关于我们
    • 网站轮播
    • 公告
    • 成都优优科技专用
    • 按行业分类
  • web学院
    • 服务器教程
    • 学习资料
      • 基础书籍
      • 交互书籍
      • 入门教程
      • 特效分类
    • 案例分享
    • web资讯
  • 网页特效
    • 图片特效
    • 导航特效
    • 滑动按钮
    • 表单特效
    • 文字特效
    • 弹窗特效
    • 其他特效
  • 织梦模板
    • 科技/电子/数码/通信
    • 文化/艺术/广告/传媒
    • 装修/设计/家居/家具
    • 基建/施工/地产/物业
    • 餐饮/酒店/旅游/票务
    • 食品/果蔬/饮料/日用
    • 服饰/珠宝/礼品/玩具
    • 摄影/婚庆/家政/生活
    • 运动/健身/体育/器材
    • 学校/教育/培训/科研
    • 美容/保健/医院/医疗
    • 金融/财税/咨询/法律
    • 政府/组织/集团/协会
    • 汽车/物流/交通/搬运
    • 机械/设备/制造/仪器
    • 化工/环保/能源/材料
    • 农业/畜牧/养殖/宠物
    • 其他模版
    • IT/软件/信息/互联网
  • 手机模板
    • 手机APP模板
    • 微信小程序模板
    • wap
  • 网站模板
    • joomla模板
    • Drupal模板
    • z-blog模板
    • EyouCms模板
    • Bootstrap模板
    • 帝国cms模板
    • CmsEasy模板
    • MetInfo模板
    • 购物商城模板
      • Shopify主题
      • PrestaShop主题
    • 后台模板
    • 纯HTML模板
    • ecshop模板
    • phpwind模板
    • pbootcms模板
    • phpcms模板
    • wordpress模板
    • discuz模板
  • 教程
    • 织梦教程
    • Discuz教程
    • WordPress教程
    • Phpcms教程
    • Phpwind教程
    • ECShop教程
    • Joomla教程
    • Drupal教程
    • zblog教程
    • EyouCMS教程
    • 帝国cms教程
    • MetInfo教程
    • CmsEasy教程
登录
当前位置:网站模板库 > web学院 > web资讯 > WordPress页面滚动通告的添加
admin web资讯 2020-09-02 11:25:32

WordPress页面滚动通告的添加

WordPress页面滚动通告的添加,第1张

WordPress页面滚动通告的添加,第2张

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,#p#分页标题#e#

'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 样式。#p#分页标题#e#

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

以上就是Wordpress页面滚动通告怎么做的详细内容

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
网站模板库 » WordPress页面滚动通告的添加

admin 钻石

分享到:
上一篇
WordPress搬迁更新空间与域名
下一篇
WordPress响应式怎样达成

相关推荐

WordPress将古腾堡作为主编写器

WordPress将古腾堡作为主编写器

WordPress处理PHP乱码的方法

WordPress处理PHP乱码的方法

WordPress主题站工具条的设置

WordPress主题站工具条的设置

WordPress高级菜单导航系统

WordPress高级菜单导航系统

0条评论

发表评论 取消回复

要发表评论,您必须先登录。

提供最优质的资源集合

立即查看 了解详情
网站模板库

主题/付费下载/查看/余额管理/自定义积分,集成支付,卡密,推广奖励等。

本站导航
  • 链接标题
友情链接
  • 链接标题
快速搜索
本站由钛宇宙强力驱动
友情链接:
    商业源码网蜀ICP备2023005044号
    网站模板库
    • 登录
    • 注册
    网站模板库
    • 首页
    • web前端工具►
      • HTML/JS转换工具
      • JS/HTML格式化工具
      • 字母/英文大小写转换工具
      • robots.txt文件生成工具
      • Js压缩/格式化工具
      • Css在线压缩工具_代码格式化
    • 关于我们►
      • 免责声明
      • 联系我们
      • 广告服务
      • 服务项目
      • 关于我们
      • 网站轮播
      • 公告
      • 成都优优科技专用
      • 按行业分类
    • web学院►
      • 服务器教程
      • 学习资料►
        • 基础书籍
        • 交互书籍
        • 入门教程
        • 特效分类
      • 案例分享
      • web资讯
    • 网页特效►
      • 图片特效
      • 导航特效
      • 滑动按钮
      • 表单特效
      • 文字特效
      • 弹窗特效
      • 其他特效
    • 织梦模板►
      • 科技/电子/数码/通信
      • 文化/艺术/广告/传媒
      • 装修/设计/家居/家具
      • 基建/施工/地产/物业
      • 餐饮/酒店/旅游/票务
      • 食品/果蔬/饮料/日用
      • 服饰/珠宝/礼品/玩具
      • 摄影/婚庆/家政/生活
      • 运动/健身/体育/器材
      • 学校/教育/培训/科研
      • 美容/保健/医院/医疗
      • 金融/财税/咨询/法律
      • 政府/组织/集团/协会
      • 汽车/物流/交通/搬运
      • 机械/设备/制造/仪器
      • 化工/环保/能源/材料
      • 农业/畜牧/养殖/宠物
      • 其他模版
      • IT/软件/信息/互联网
    • 手机模板►
      • 手机APP模板
      • 微信小程序模板
      • wap
    • 网站模板►
      • joomla模板
      • Drupal模板
      • z-blog模板
      • EyouCms模板
      • Bootstrap模板
      • 帝国cms模板
      • CmsEasy模板
      • MetInfo模板
      • 购物商城模板►
        • Shopify主题
        • PrestaShop主题
      • 后台模板
      • 纯HTML模板
      • ecshop模板
      • phpwind模板
      • pbootcms模板
      • phpcms模板
      • wordpress模板
      • discuz模板
    • 教程►
      • 织梦教程
      • Discuz教程
      • WordPress教程
      • Phpcms教程
      • Phpwind教程
      • ECShop教程
      • Joomla教程
      • Drupal教程
      • zblog教程
      • EyouCMS教程
      • 帝国cms教程
      • MetInfo教程
      • CmsEasy教程

      弹窗标题

      这是一条网站公告,可在后台开启或关闭,可自定义背景颜色,标题,内容,用户首次打开关闭后不再重复弹出,此处可使用html标签...