WordPress에서 롤링 공지사항을 만드는 방법

1. 공지사항 유형 추가

먼저 공지사항 생성, 추가, 수정, 삭제 등 공지사항 유형을 등록합니다. function.php와 같은 디렉토리에 새로운 gonggao.php를 생성합니다. 코드는 다음과 같습니다.

<?php
function post_type_bulletin() {
 register_post_type(
 &#39;bulletin&#39;,
 array( &#39;public&#39; => true,
        &#39;publicly_queryable&#39; => true,
        &#39;hierarchical&#39; => false,
        &#39;labels&#39;=>array(
        &#39;name&#39; => _x(&#39;公告&#39;, &#39;post type general name&#39;),
        &#39;singular_name&#39; => _x(&#39;公告&#39;, &#39;post type singular name&#39;),
        &#39;add_new&#39; => _x(&#39;添加新公告&#39;, &#39;公告&#39;),
        &#39;add_new_item&#39; => __(&#39;添加新公告&#39;),
        &#39;edit_item&#39; => __(&#39;编辑公告&#39;),
        &#39;new_item&#39; => __(&#39;新的公告&#39;),
        &#39;view_item&#39; => __(&#39;预览公告&#39;),
        &#39;search_items&#39; => __(&#39;搜索公告&#39;),
        &#39;not_found&#39; =>  __(&#39;您还没有发布公告&#39;),
        &#39;not_found_in_trash&#39; => __(&#39;回收站中没有公告&#39;),
        &#39;parent_item_colon&#39; => &#39;&#39;
        ),
        &#39;show_ui&#39; => true,
        &#39;menu_position&#39;=>5,
        &#39;supports&#39; => array(
        &#39;title&#39;,
        &#39;author&#39;,
        &#39;excerpt&#39;,
        &#39;thumbnail&#39;,
        &#39;trackbacks&#39;,
        &#39;editor&#39;,
        &#39;comments&#39;,
        &#39;custom-fields&#39;,
        &#39;revisions&#39; ) ,
        &#39;show_in_nav_menus&#39; => true ,
        &#39;menu_icon&#39; => &#39;dashicons-megaphone&#39;,
        &#39;taxonomies&#39; => array(
        &#39;menutype&#39;,
        &#39;post_tag&#39;)
 )
 );}add_action(&#39;init&#39;, &#39;post_type_bulletin&#39;);
 function create_genre_taxonomy() {
 $labels = array(
 &#39;name&#39; => _x( &#39;公告分类&#39;, &#39;taxonomy general name&#39; ),
 &#39;singular_name&#39; => _x( &#39;genre&#39;, &#39;taxonomy singular name&#39; ),
 &#39;search_items&#39; =>  __( &#39;搜索分类&#39; ),
 &#39;all_items&#39; => __( &#39;全部分类&#39; ),
 &#39;parent_item&#39; => __( &#39;父级分类目录&#39; ),
 &#39;parent_item_colon&#39; => __( &#39;父级分类目录:&#39; ),
 &#39;edit_item&#39; => __( &#39;编辑公告分类&#39; ),
 &#39;update_item&#39; => __( &#39;更新&#39; ),
 &#39;add_new_item&#39; => __( &#39;添加新公告分类&#39; ),
 &#39;new_item_name&#39; => __( &#39;New Genre Name&#39; ),
 );
 register_taxonomy(&#39;genre&#39;,array(&#39;bulletin&#39;), array(
 &#39;hierarchical&#39; => true,
 &#39;labels&#39; => $labels,
 &#39;show_ui&#39; => true,
 &#39;query_var&#39; => true,
 &#39;rewrite&#39; => array( &#39;slug&#39; => &#39;genre&#39; ),
 ));}add_action( &#39;init&#39;, &#39;create_genre_taxonomy&#39;, 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( &#39;post_type&#39; => &#39;bulletin&#39;, &#39;posts_per_page&#39; => 3 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, &#39;…&#39;); ?></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!