WP资源网插件教程：如何在插件后台新增模板-回忆博客

一、核心规则

页面所有动态内容不能写死，必须用变量占位符代替
6 个固定变量，直接写进你的 HTML 里，插件会自动替换成真实内容

{{today_count}} 最新更新数量 
{{banner_html}} 顶部轮播图区域 
{{privilege_html}} 特权模块 
{{link_bar}} 底部文字链接 
{{item_list}} 帖子+广告循环列表（自动分页） 
{{pagination}} 分页按钮（上一页/下一页）

自定义 CSS 框内只写样式，不用加 <style> 标签
HTML 外层建议套一个独有的 class，防止和网站其他样式冲突

二、示例 1：极简卡片模板（直接复制进后台 HTML 框）

1）HTML 代码（粘贴到「HTML 模板代码」输入框）

<div class="my-card-template">
    <!-- 标题区域 -->
    <div class="card-header">
        资源更新列表 <span class="new-num">新增 {{today_count}} 条</span>
    </div>

    <!-- 轮播图 -->
    <div class="card-banner">
        {{banner_html}}
    </div>

    <!-- 内容列表 -->
    <div class="card-list">
        {{item_list}}
    </div>

    <!-- 分页 -->
    <div class="card-page">
        {{pagination}}
    </div>

    <!-- 底部链接 -->
    <div class="card-link">
        {{link_bar}}
    </div>
</div>

2）配套 CSS（粘贴到「自定义 CSS」输入框）

.my-card-template {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}
.my-card-template .card-header {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}
.my-card-template .new-num {
    color: red;
    margin-left: 8px;
}
.my-card-template .card-banner {
    margin-bottom: 15px;
}
.my-card-template .card-list ul.page-item {
    padding: 0;
    margin: 0;
    list-style: none;
}
.my-card-template .card-list .item-post {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
}
.my-card-template .card-list .item-ad {
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    margin: 8px 0;
}
.my-card-template .card-page {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.my-card-template .card-link {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

三、示例 2：纯列表无轮播简约模板（不需要轮播 / 特权就删掉对应变量）

HTML

<div class="simple-list-tpl">
    <h3>最新资源 <span class="count">{{today_count}}</span></h3>
    <div class="list-box">
        {{item_list}}
    </div>
    <div class="page-box">
        {{pagination}}
    </div>
    <div class="foot-link">
        {{link_bar}}
    </div>
</div>

CSS

.simple-list-tpl {
    padding:14px;
    background:#f9f9f9;
    border-radius:8px;
}
.simple-list-tpl h3 {
    margin-top:0;
    font-size:16px;
}
.simple-list-tpl .count {
    color:#f00;
}
.simple-list-tpl ul.page-item {
    list-style:none;
    padding:0;
}
.simple-list-tpl .item-post {
    padding:6px 0;
    display:flex;
    justify-content:space-between;
}
.simple-list-tpl .foot-link {
    margin-top:15px;
    font-size:13px;
}