【WordPress筆記】 利用shortcode 的方式將指定的post type 文章顯示在頁面中

當WordPress頁面都是用shortcode疊出來的時候,你的文章(post)也是需要變成shortcode的情況下才有辦法將它卡到頁面的某個地方,以下方式可以將你的文章(post)轉成shortcode的方式,讓你在頁面中可以方便的調用它!!

 

以下範例code,可以寫至theme目錄下的functions.php中

function home_post_listing_shortcode( $atts ) {
    ob_start();
    <!--將query 到的資料存到$query-->
    $query = new WP_Query( array(
        'post_type' => 'post', <!--post_type輸入你想要抓取的文章類型-->
        'posts_per_page' => 3, <!--取出x筆數據-->
        'order' => 'DSC',  <!--排序方式ASC(小->大),DSC(大->小)-->
        'orderby' => 'title',<!--文字大小做排列-->

    ) );
    <!--如果文章中有posts時執行-->
    if ( $query->have_posts() ) { ?>
        <ul class="info-listing">
            <!--執行while循環,將上方$query裡面的資料跑循環吐到頁面中-->
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <!--打印分類(含分類連結)-->
                <div class="category_name"><?php the_category();?></div>
                <!--打印日期-->
                <?php the_date('Y-m-d \a\t g:ia', '<div class="news_date">', '</div>'); ?>
                <!--打印文章連結 &文章標題-->
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php endwhile;
            <!--恢復$post全局變量的數據-->
            wp_reset_postdata(); ?>
        </ul>
    <?php $myvariable = ob_get_clean();
    return $myvariable;
    }
}

將上方定義的function: home_post_listing_shortcode 代入 add_shortcode ,並賦予新的shortcode名稱list-posts-home
add_shortcode( 'list-posts-home', 'home_post_listing_shortcode' );接下來我們就可以直接到WordPress後台->頁面直接插入短碼 [list-posts-home] 就可以抓到剛剛我們定義的shortcode囉!!

網站首頁時常都會需要秀出一些最新發布的文章等。。如果你整個頁面都是用Visual Composer去製作的話,就會需要這種建立shortcode的方式去插入頁面, 這樣的製作方式可以很有彈性,如果想要抓取某post type的某分類的文章秀到頁面時也可以利用這種方式去實現唷~

Summary
【WordPress筆記】 利用shortcode 的方式將指定的post type 文章顯示在頁面中
Article Name
【WordPress筆記】 利用shortcode 的方式將指定的post type 文章顯示在頁面中
Description
當WordPress頁面都是用shortcode疊出來的時候,你的文章(post)也是需要變成shortcode的情況下才有辦法將它卡到頁面的某個地方,以下方式可以將你的文章(post)轉成shortcode的方式,讓你在頁面中可以方便的調用它!!
Author
Publisher Name
小豬日常
Publisher Logo

發佈留言