So erstellen Sie fortlaufende Ankündigungen in WordPress

1. Ankündigungsartikeltyp hinzufügen

Registrieren Sie zunächst einen Ankündigungsartikeltyp, einschließlich des Erstellens, Hinzufügens, Bearbeitens und Löschens von Ankündigungen. Erstellen Sie eine neue Datei „gonggao.php“ im selben Verzeichnis wie „functions.php“. Der Code lautet wie folgt:

<?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 );

Referenzieren Sie die Datei „gonggao.php“ der Ankündigung in „functions.php“ und fügen Sie unten den folgenden Code hinzu functions.php:

include ("gonggao.php");

Melden Sie sich anschließend im Backend der WordPress-Website an und Sie sehen unter dem Artikel ein Ankündigungs-Tag.

'menu_icon' => 'dashicons-megaphone',

im obigen Code ist das Dashicons-Symbol, das wir festgelegt haben, und der Effekt ist wie unten gezeigt. Wenn Sie diese Zeile entfernen, ist das Symbol standardmäßig dasselbe wie das Artikelsymbol.

2. Ankündigungsstil hinzufügen

Fügen Sie den folgenden Ankündigungsinhaltscode in index.php ein, wo er angezeigt werden soll:

<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>

Unter anderem 3 Das bedeutet, dass es drei Ansagen gibt und 70 bedeutet, dass jede Ansage 70 Zeichen enthält. Dies kann entsprechend Ihrer eigenen Situation eingestellt werden.

3. CSS-Code hinzufügen

Kopieren Sie den folgenden Code in die main.css-Datei:

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. Fügen Sie den Rolling-Ansage-JS-Code hinzu

Um den Scrollcode der Ankündigung hinzuzufügen, benötigen Sie die jQuery-Bibliothek. Natürlich ist das DUX-Theme bereits geladen:

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

Darunter Zeile 4 „.list“ ist der Klassenstil des ul-Tags im aufrufenden Code; „.sitediv“ in Zeile 12 ist der Klassenstil des div-Tags, der den ul umschließt.

Weitere technische Artikel zum Thema WordPress finden Sie in der Spalte WordPress-Tutorials, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie fortlaufende Ankündigungen in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!