1. 공지사항 유형 추가
먼저 공지사항 생성, 추가, 수정, 삭제 등 공지사항 유형을 등록합니다. function.php와 같은 디렉토리에 새로운 gonggao.php를 생성합니다. 코드는 다음과 같습니다.
<?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 );
function.php에서 공지사항의 gonggao.php 파일을 참조하고, function.php 하단에 다음 코드를 추가합니다. :
include ("gonggao.php");
After 를 누른 후 WordPress 웹사이트 백엔드에 로그인하면 기사 아래에 공지사항 태그가 있는 것을 확인할 수 있습니다.
위 코드의
'menu_icon' => 'dashicons-megaphone',
는 우리가 설정한 대시콘 아이콘이며, 그 효과는 아래와 같습니다. 이 줄을 제거하면 아이콘은 기본적으로 기사 아이콘과 동일해집니다.
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->the_post(); ?> <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li> <?php endwhile; wp_reset_query(); ?> </ul> </div></div>
여기서 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 코드 추가
롤링 알림 코드를 추가하세요. 물론 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 태그에 대한 클래스 스타일입니다. 12번째 줄은 ul을 감싸는 div 태그의 클래스 스타일입니다.
더 많은 WordPress 관련 기술 기사를 보려면 wordpress 튜토리얼 칼럼을 방문하여 알아보세요!
위 내용은 WordPress에서 롤링 공지사항을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!