企业站资质证书荣誉展示页：图片呈现与信任要素布局

引言：采购方要的是「可核验」，不是「看起来很多」

一个参与投标的供应商，被采购方要求提供资质证明。对方打开官网的资质页，看到的是一墙缩略图，点开是大图但分辨率不够，证书编号看不清，发证机构也认不出来。最后采购方让对方重新发一份 PDF，官网这一页等于没起作用。

资质荣誉页在企业站里的角色是「信任背书」，它的读者是有核验需求的采购、法务或决策者。这类读者的行为模式和其他页面完全不同：他们不是「浏览」，而是「查找并核对」。所以这一页的设计目标不是好看，而是——能快速找到某一项、能看清编号与有效期、能下载或核验。

现实中最常见的三种粗糙做法：一是九宫格缩略图，点开就是原图但没做适配，手机上要手动放大；二是证书全部拍成照片，歪斜、有反光、边缘被裁；三是把所有证书、荣誉、专利、客户 logo 混在一起，没有分类，也没有说明文字。

原理分析：信任要素的层次

资质页要同时承载几类不同性质的材料，它们的可信度与核验难度不同：

类型	可信度	核验方式	展示要点
行政许可/资质证书	最高，官方可查	编号 + 发证机构	必须可看清编号
体系认证（ISO 等）	高，可查证书号	认证机构 + 有效期	标注有效期
专利证书	高，公开可查	专利号	标注专利号
行业协会/会员	中	协会名称	标注级别
荣誉/奖项	中	主办方 + 年份	标注年份与主办方
客户 logo 墙	低（锦上添花）	无	单独分区，不与证书混排

关键原则：客户 logo 不要和证书混在同一区。前者是营销素材，后者是可核验凭证，混在一起会让整页的可信度被拉低，采购方也会觉得不专业。

第二个原则是「每一项都要有文字说明」。一张证书图片本身包含的信息在网页上是不可检索的——搜索引擎读不出图片里的发证机构，屏幕阅读器也读不出。所以每项的标题、发证机构、编号、有效期必须作为文本存在。

第三是结构化数据。Schema.org 的 Organization 类型有 award 属性，可以用来声明企业获得的奖项与资质；配合 foundingDate、address 能形成一份完整的组织档案。注意这只用于「真实存在且可核验」的信息，虚构内容会被判定为结构化数据滥用。

保姆级实操

步骤 1：给证书建一个内容模型

用一个自定义文章类型管理，比堆在页面里好维护得多：

<?php
add_action( 'init', 'mmf_register_certificate' );
function mmf_register_certificate() {
    register_post_type( 'certificate', array(
        'labels' => array(
            'name'          => '资质证书',
            'singular_name' => '证书',
            'add_new_item'  => '添加证书',
        ),
        'public'        => true,
        'has_archive'   => 'honors',
        'rewrite'       => array( 'slug' => 'honors', 'with_front' => false ),
        'menu_icon'     => 'dashicons-id-alt',
        'supports'      => array( 'title', 'thumbnail', 'page-attributes' ),
        'show_in_rest'  => true,
    ) );

    register_taxonomy( 'cert_type', 'certificate', array(
        'labels'       => array( 'name' => '证书类型' ),
        'public'       => true,
        'hierarchical' => true,
        'rewrite'      => array( 'slug' => 'honors/type' ),
        'show_in_rest' => true,
        'show_admin_column' => true,
    ) );
}

分类项建议预置：行政许可、体系认证、专利、行业资质、荣誉奖项。这样前台可以按类型分区展示。

步骤 2：证书元信息字段

<?php
add_action( 'add_meta_boxes', function() {
    add_meta_box( 'mmf-cert-meta', '证书信息', 'mmf_cert_meta_box', 'certificate', 'normal', 'high' );
} );

function mmf_cert_meta_box( $post ) {
    wp_nonce_field( 'mmf_save_cert', 'mmf_cert_nonce' );
    $fields = array(
        '_cert_no'      => '证书编号',
        '_cert_issuer'  => '发证机构',
        '_cert_valid'   => '有效期至',
        '_cert_pdf'     => 'PDF 下载链接（附件 URL）',
    );
    foreach ( $fields as $key => $label ) {
        $value = get_post_meta( $post->ID, $key, true );
        printf(
            '<p><label><strong>%s</strong><br><input type="text" name="%s" value="%s" style="width:100%%"></label></p>',
            esc_html( $label ),
            esc_attr( $key ),
            esc_attr( $value )
        );
    }
}

add_action( 'save_post_certificate', 'mmf_save_cert' );
function mmf_save_cert( $post_id ) {
    if ( ! isset( $_POST['mmf_cert_nonce'] )
        || ! wp_verify_nonce( sanitize_key( $_POST['mmf_cert_nonce'] ), 'mmf_save_cert' ) ) {
        return;
    }
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }

    $keys = array( '_cert_no', '_cert_issuer', '_cert_valid', '_cert_pdf' );
    foreach ( $keys as $key ) {
        if ( isset( $_POST[ $key ] ) ) {
            update_post_meta(
                $post_id,
                $key,
                '_cert_pdf' === $key
                    ? esc_url_raw( wp_unslash( $_POST[ $key ] ) )
                    : sanitize_text_field( wp_unslash( $_POST[ $key ] ) )
            );
        }
    }
}

「有效期至」这一项特别重要——过期资质放在页面上比不放更糟，采购方一旦发现会直接质疑。

步骤 3：按类型分区的证书墙

<?php
// page-honors.php
$types = get_terms( array(
    'taxonomy'   => 'cert_type',
    'hide_empty' => true,
    'orderby'    => 'term_order',
) );

foreach ( $types as $type ) :
    $q = new WP_Query( array(
        'post_type'      => 'certificate',
        'posts_per_page' => -1,
        'orderby'        => 'menu_order title',
        'order'          => 'ASC',
        'no_found_rows'  => true,
        'tax_query'      => array(
            array(
                'taxonomy' => 'cert_type',
                'field'    => 'term_id',
                'terms'    => $type->term_id,
            ),
        ),
    ) );
    if ( ! $q->have_posts() ) { continue; }
    ?>
    <section class="cert-section">
        <h2><?php echo esc_html( $type->name ); ?></h2>
        <ul class="cert-grid">
            <?php while ( $q->have_posts() ) : $q->the_post();
                $no     = get_post_meta( get_the_ID(), '_cert_no', true );
                $issuer = get_post_meta( get_the_ID(), '_cert_issuer', true );
                $valid  = get_post_meta( get_the_ID(), '_cert_valid', true );
                $pdf    = get_post_meta( get_the_ID(), '_cert_pdf', true );
                $full   = get_the_post_thumbnail_url( null, 'full' );
            ?>
                <li class="cert-item">
                    <button class="cert-thumb" type="button"
                            data-full="<?php echo esc_url( $full ); ?>"
                            data-title="<?php echo esc_attr( get_the_title() ); ?>">
                        <?php the_post_thumbnail( 'mmf-card', array( 'loading' => 'lazy' ) ); ?>
                    </button>
                    <h3><?php the_title(); ?></h3>
                    <?php if ( $issuer ) : ?>
                        <p class="cert-issuer">发证机构：<?php echo esc_html( $issuer ); ?></p>
                    <?php endif; ?>
                    <?php if ( $no ) : ?>
                        <p class="cert-no">编号：<?php echo esc_html( $no ); ?></p>
                    <?php endif; ?>
                    <?php if ( $valid ) : ?>
                        <p class="cert-valid">有效期至：<?php echo esc_html( $valid ); ?></p>
                    <?php endif; ?>
                    <?php if ( $pdf ) : ?>
                        <a class="cert-download" href="<?php echo esc_url( $pdf ); ?>" download>下载 PDF</a>
                    <?php endif; ?>
                </li>
            <?php endwhile; wp_reset_postdata(); ?>
        </ul>
    </section>
<?php endforeach;

用 <button> 而非 <a> 触发放大，语义更准确（它不是导航）。

步骤 4：用原生 <dialog> 做放大查看

不需要引入灯箱插件，浏览器原生 HTMLDialogElement 已足够：

<dialog id="cert-dialog" class="cert-dialog">
    <form method="dialog">
        <button class="cert-dialog__close" value="close" aria-label="关闭">×</button>
    </form>
    <h3 id="cert-dialog-title"></h3>
    <img id="cert-dialog-img" src="" alt="" width="1200" height="850" loading="lazy">
</dialog>

<script>
(function () {
    var dlg = document.getElementById('cert-dialog');
    var img = document.getElementById('cert-dialog-img');
    var ttl = document.getElementById('cert-dialog-title');
    if (!dlg || typeof dlg.showModal !== 'function') { return; }

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.cert-thumb');
        if (!btn) { return; }
        img.src = btn.dataset.full;
        img.alt = btn.dataset.title;
        ttl.textContent = btn.dataset.title;
        dlg.showModal();
    });

    dlg.addEventListener('click', function (e) {
        if (e.target === dlg) { dlg.close(); }
    });
})();
</script>

点击遮罩关闭的判断用 e.target === dlg（对话框本身的区域即遮罩），是最简洁的写法。不支持 showModal() 的老浏览器会直接跳过脚本，图片链接仍可点击，降级安全。

步骤 5：信任要素的布局层次

页面自上而下的推荐顺序：

1. 一句话概览（如：国家高新技术企业 · ISO 9001 认证 · 27 项专利）
2. 最能说明实力的 3 项（放大展示，含编号与有效期）
3. 按类型分区的证书墙（行政许可 / 体系认证 / 专利 / 行业资质）
4. 荣誉奖项（含年份与主办方）
5. 客户 logo 墙（单独分区，标题写「部分合作客户」，不暗示背书）
6. 下载区（资质合集 PDF，留给需要走流程的采购）

第 1 条的概览数字要真实可核，且与后面分区能对上。第 6 条的合集 PDF 是最实用的一项——采购走流程时通常需要打包材料。

步骤 6：图片处理与性能

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.cert-thumb {
    padding: 0;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: zoom-in;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cert-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .2s ease;
}

.cert-thumb:hover img { transform: scale(1.03); }

.cert-dialog {
    max-width: min(92vw, 1100px);
    border: none;
    border-radius: 8px;
    padding: 20px;
}

.cert-dialog::backdrop { background: rgba(0, 0, 0, .72); }

aspect-ratio 保证证书墙不会因为图片尺寸不一而抖动（CLS）；object-fit: contain 保证证书不被裁掉边角——编号经常印在角落，裁掉就无法核验了。

上传前把证书扫描件压到 WebP、单张控制在 300KB 以内、长边 1600px 足够（看清即可，不必印刷级）：

# 批量转 WebP 并限制长边（需安装 cwebp）
for f in certs/*.jpg; do
  cwebp -resize 1600 0 -q 82 "$f" -o "out/$(basename "${f%.jpg}").webp"
done

步骤 7：组织结构化数据

<?php
add_action( 'wp_head', 'mmf_org_schema' );
function mmf_org_schema() {
    if ( ! is_page( 'honors' ) ) {
        return;
    }

    $awards = array();
    $q = new WP_Query( array(
        'post_type'      => 'certificate',
        'posts_per_page' => 10,
        'fields'         => 'ids',
        'no_found_rows'  => true,
    ) );
    foreach ( $q->posts as $id ) {
        $awards[] = wp_strip_all_tags( get_the_title( $id ) );
    }

    $data = array(
        '@context'    => 'https://schema.org',
        '@type'       => 'Organization',
        'name'        => get_bloginfo( 'name' ),
        'url'         => home_url( '/' ),
        'award'       => $awards,
    );

    echo '<script type="application/ld+json">'
        . wp_json_encode( $data, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE )
        . '</script>';
}

只填真实存在、能在页面上找到对应项的奖项，且不要为每条证书编造独立的结构化数据。

常见踩坑

证书只有图没有文字：搜索引擎和屏幕阅读器都读不到，采购方也无法复制编号去核验。
证书被裁边：object-fit: cover 会把编号和印章裁掉。必须用 contain。
过期证书不清理：比没有更糟。要建到期提醒（用「有效期至」字段做定期检查）。
客户 logo 混进证书区：性质不同混排会拉低整页可信度，且可能涉及未经授权使用客户商标。
案例： 某企业把 ISO 证书扫描件直接上传，单张 4.8MB、尺寸 4000×3000，页面十张图共 48MB。移动端打开要十几秒，Lighthouse 的 LCP 超过 9 秒。后来统一压成 WebP、长边 1600px、单张 200–300KB，总大小降到 2.6MB，LCP 回到 2 秒内。教训：展示类页面的图片必须先处理再上传，不能依赖插件事后压缩。
灯箱插件与主题样式冲突：用原生 <dialog> 可以避免一整类兼容问题，代码量也就三十行。
结构化数据里写了没在页面出现的奖项：属于标记与内容不符，会被判定为滥用。

总结

资质证书页的核心是「可核验」：每项证书都要有发证机构、编号、有效期三项文本；图片要能放大看清编号且不能被裁边；按类型分区，客户 logo 单独放；提供 PDF 合集下载。

验收清单：任意一项证书，能否在 10 秒内找到并复制其编号；所有图片是否有 alt 与固定宽高；是否有过期未清理的证书；结构化数据是否与页面内容一致。

这一页的栏目位置见企业官网标准栏目结构设计，它属于「关于我们」下的独立子页；图片体积对性能影响很大，处理完记得按 WordPress主题性能度量方法跑一次验证 LCP 是否回到目标区间。

企业站资质证书荣誉展示页：图片呈现与信任要素布局

引言：采购方要的是「可核验」，不是「看起来很多」

原理分析：信任要素的层次

保姆级实操

常见踩坑

总结

插件如何拖慢 Core Web Vitals：定位 LCP 与 INP 元凶的完整测量方法

多语言 Schema 结构化数据：按语言输出 inLanguage 与独立 URL

留下你的想法取消回复

相关教程

域名选择技巧：注册前必须做完的 8 项技术核查

WordPress 缓存插件怎么选：从四个维度判断，而不是看谁名气大

新手 WordPress 建站完整流程：从域名到正式上线

企业站资质证书荣誉展示页：图片呈现与信任要素布局

引言：采购方要的是「可核验」，不是「看起来很多」

原理分析：信任要素的层次

保姆级实操

常见踩坑

总结

插件如何拖慢 Core Web Vitals：定位 LCP 与 INP 元凶的完整测量方法

多语言 Schema 结构化数据：按语言输出 inLanguage 与独立 URL

留下你的想法 取消回复

相关教程

域名选择技巧：注册前必须做完的 8 项技术核查

WordPress 缓存插件怎么选：从四个维度判断，而不是看谁名气大

新手 WordPress 建站完整流程：从域名到正式上线

留下你的想法取消回复