WordPress Shortcodes Ultimate外掛自訂模板路徑代碼詳解

有沒有想過，如何在Shortcodes Ultimate 外掛中，自訂獨一無二的模板路徑？

不需要再去羨慕那些玩WordPress 的科技大神，因為現在我就帶你揭開這背後的秘密！

來吧，讓我們直奔主題，一步一步搞定！

什麼是Shortcodes Ultimate 外掛？

Shortcodes Ultimate 是WordPress 中廣受歡迎的外掛程式之一，它可以透過簡碼輕鬆實現各種功能，例如創建按鈕、圖像輪播、文章列表等…

更棒的是，我們可以自訂模板路徑，從而更靈活地展示內容。

如何新增自訂範本路徑？

我們先來看最關鍵的一步—新增自訂範本路徑。

這是實現個人化展示的第一步！

代碼示例

在你的主題 functions.php 文件或自訂外掛程式中加入以下程式碼：

add_filter(
    'su/shortcode/posts/allowed_template_locations',
    function( $locations ) {
        // 添加自定义模板路径 /wp-content/custom-templates/
        $locations[] = WP_CONTENT_DIR . '/custom-templates';

        return $locations;
    },
    10,
    1
);

解析程式碼

1. 過濾器 su/shortcode/posts/allowed_template_locations
   這個過濾器允許我們擴展Shortcodes Ultimate 的預設模板路徑。

2. 自訂路徑 /wp-content/custom-templates/
   我們將模板儲存在 /wp-content/custom-templates/ 目錄中，這樣更新插件時不會遺失。

3. 安全性
   永遠不要直接修改插件的預設模板文件，以免插件更新後丟失自訂內容。

建立自訂範本文件

接下來，我們需要在自訂路徑中建立模板檔案。

例如，我們建立一個名為 jiawen.php 的模板檔案。

範本文件範例

在 /wp-content/custom-templates/ 目錄下，創建 jiawen.php 文件，並加入以下程式碼：

<?php defined( 'ABSPATH' ) || exit; ?>
<div class="su-posts su-posts-teaser-loop <?php echo esc_attr( $atts['class'] ); ?>">

    <?php if ( $posts->have_posts() ) : ?>
        <?php while ( $posts->have_posts() ) : ?>
            <?php $posts->the_post(); ?>

            <?php if ( ! su_current_user_can_read_post( get_the_ID() ) ) : ?>
                <?php continue; ?>
            <?php endif; ?>

            <div id="su-post-<?php the_ID(); ?>" class="su-post <?php echo esc_attr( $atts['class_single'] ); ?>">
                <?php if ( has_post_thumbnail() ) : ?>
                    <a target="_blank" rel="nofollow" class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <?php endif; ?>
                <div class="su-post-title">
                    <a target="_blank" href="<?php the_permalink(); ?>">🔗<?php the_title(); ?></a>
                </div>
            </div>

        <?php endwhile; ?>
    <?php else : ?>

        <p class="su-posts-not-found"><?php esc_html_e( 'Posts not found', 'shortcodes-ultimate' ); ?></p>

    <?php endif; ?>
</div>

範本文件說明

• $atts['class']：允許我們自訂CSS 類，為模板設計獨特的樣式。
• 文章縮圖和標題：展示文章的縮圖和標題，並連結到文章詳情頁。
• 安全性：使用 defined('ABSPATH') || exit; 確保模板檔案無法被直接存取。

創建好模板後，我們就可以在文章或頁面中透過簡碼調用它了。

簡碼實例

在文章或頁面中加入以下簡碼：

【su_posts template="jiawen.php" posts_per_page="10" ignore_sticky_posts="yes" id="32277,30806"】

上面的簡碼中使用了【】來避免文章中簡碼被轉義，實際使用時需要將符號【】改為標準的[]。

簡碼參數說明

1. template="jiawen.php"
   指定自訂範本檔案的名稱，路徑是相對於 /wp-content/ 的。

2. posts_per_page="10"
10顯示10篇文章；
   -1顯示所有文章，但是不建議設置無限數量文章，可能會因為無法所有文章造成網站奔潰。

3. ignore_sticky_posts="yes"
   忽略置頂文章。

4. id="32277,30806"
   僅顯示指定ID 的文章。這裡指定了兩個文章ID，32277和30806。只有這兩個ID對應的文章會被顯示。

總結

• 自訂模板路徑：透過過濾器擴充預設路徑，避免外掛程式更新遺失模板。
• 建立模板文件：透過PHP 代碼控製文章清單的版面和內容。
• 調用模板文件：透過簡碼參數實現靈活呼叫。

自訂模板路徑的功能，大大提升了Shortcodes Ultimate 插件的靈活性。

透過這種方法，我們可以完全掌控文章清單的展示方式。

特別是當我們需要在不同頁面中實現多樣化的設計時，這種方式顯得尤為重要。

如果你想讓你的WordPress 網站更有個人化，趕快動手試試吧！