Heim > CMS-Tutorial > WordDrücken Sie > So erstellen Sie fortlaufende Ankündigungen in WordPress

So erstellen Sie fortlaufende Ankündigungen in WordPress

Freigeben: 2019-07-12 11:41:41
Original
3077 Leute haben es durchsucht

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 );
Nach dem Login kopieren

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");
Nach dem Login kopieren

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

&#39;menu_icon&#39; => &#39;dashicons-megaphone&#39;,
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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(&#39;autoScroll(".sitediv")&#39;,4000)  
     })  ;
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage