[WordPress] 使用短碼（shortcode）在網站中區塊顯示文章

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～

WordPress 這神設計 「Shortcode 短碼」當初看到就覺得猛了，但好像都沒寫過記錄。今天剛好在幫前端夥伴除錯，發覺可以來記錄一下使用做法，讓後續依樣畫葫蘆比較不會有問題！

程式碼片段如下：

<?php
function get_news_posts_shortcode($atts) {
    extract(shortcode_atts(array(
        'post_type' => 'news',
        'posts_per_page' => -1,
        'order' => 'DESC',
        'orderby' => 'date',
        'category_name' => '',
    ), $atts));
    $args = array(
        'post_type' => $post_type, //文章類型
        'post_status' => 'publish', //限定為已發布狀態
        'posts_per_page' => $posts_per_page, // -1 為不限制撈取數量，若要指定就自行輸入數字
        'order' => $order, //排序方式 DESC, ASC
        'orderby' => $orderby, //根據發文日期排序
    );
    //文章類型為文章時增加判斷分類
    if ($post_type == 'post' && $category_name != '') {
        $args['category_name'] = $category_name; //選取對應分類
    }
    $query = get_posts($args);
    $html = '';
    if ($query) {
        $html .= '<ul class="news-list">';
        foreach ($query as $post) {
            $url = get_the_post_thumbnail_url($post->ID);
            $html .= '<li id="post-' . $post->ID . '" class="' . join(' ', get_post_class('', $post->ID)) . '">';
            $html .= '<div class="news_img"><img src="' . $url . '"/></div>';
            $html .= '<div class="news_content">';
            $html .= '<h2><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></h2>';
            $html .= '<div class="date">' . get_the_date('', $post->ID) . '</div>';
            $html .= '<div class="directory">';
            $html .= '<h4 class="directory_title">標題</h4>';
            $html .= get_the_excerpt($post->ID);
            $html .= '</div>';
            $html .= '<div class="news_link"><a href="' . get_permalink($post->ID) . '">觀看詳情</a></div>';
            $html .= '</div>';
            $html .= '</li>';
            //Demo code 所以寫的比較「豐富」一點，實際上可以省點變數處理，一個 $html .="大家都寫成一行就好"
        }
        $html .= '</ul>';
    } else {
        //沒撈到資料的顯示
        $html = '無資料顯示';
    }
    wp_reset_postdata();
    return $html;
}
add_shortcode('news-lists', 'get_news_posts_shortcode');

//使用方法：[news-lists posts_per_page="6" post_type="post" category_name="news"] 改顯示六篇就好

Gist:Link

這邊把情境設定為支援客製化的文章類型（Post Type）。而原生的文章類型（post）還可以根據分類名稱撈取文章，這樣善用分類的網站就可以使用一個文章功能在很多區塊中顯示對應內容，挺方便的吧～

當然前端 HTML 架構要怎麼調就隨意囉，所以前端至少也要看得懂怎麼組合的。相信上面原始碼已經有列的「友善」一點了ＸＤ