在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。5 k% y* s+ }" R; F; S+ z5 Y" n
( a0 V8 x; l" r以下是具体的配置步骤,按这个流程操作,1-2天就能上线:
! ?# h0 s1 k7 i2 X: p2 y: U" y, L
4 f9 t. D% g0 O- Q0 d' C; D第一步:创建两个新的自定义文章类型(CPT)
& d' q( A% l! c) ~使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:& j! u! \' a8 Z0 E2 q
3 v* q+ s, e. F+ x. V$ x门店证照 (Store License)
* b# w! H- v1 o1 E) Z2 U
) w" m. z1 {7 ~2 cSlug: store-license
8 z5 ^! m9 r! Z( ^; N/ V支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。 G0 \9 B6 K$ v, t
用途: 每个门店对应一篇文章,存储该店所有公示信息。
$ |# S/ o5 y0 ~1 n9 J3 G食材批次 (Food Batch)
: X- O% o. O+ k; A1 L9 E. i; N5 e0 r! H4 ~
Slug: food-batch
$ }# r: Q' Z) p5 m支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。
( U: v) ^( H: ]/ t( q8 j用途: 每批食材对应一篇文章,存储溯源详情。
. M6 w+ g2 n! N/ y- h ?第二步:添加自定义字段(存储具体信息), h* n: ^4 V- j
使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:2 n h) ? K9 d* k5 Q9 H
/ {! S- q6 h+ {* X( J/ e. H6 P为「门店证照」添加字段组:& y' B7 s# c) {; N; c- Y
# k% h5 p- E4 r$ T
license_image (图片字段): 上传营业执照、卫生许可证照片。
T* B1 j, h/ d; h- J8 Q: Zhealth_cert_image (图片字段): 上传员工健康证。
6 e0 T7 Q" x- P# O. J1 Winspection_report (文件字段): 上传近期消杀或检测报告 PDF。
( _& i# u# G) cstore_intro (文本域): 门店简介或承诺语。
0 c, f1 k) A2 `/ G+ R9 s; l为「食材批次」添加字段组:- K _2 \, V+ X( M. w. ~0 k2 B9 S1 l
3 ^2 a, o1 |9 c2 Y W" m# ]9 }origin_place (文本字段): 产地(如:四川成都郫都区)。# ?9 ]$ y' i" Z: N2 t
supplier_name (文本字段): 供应商名称。5 v* K4 W2 ]) y k: @
batch_date (日期字段): 进货/生产批次日期。
) D% w* _+ `4 b5 u9 v8 Ptest_report_link (URL 字段): 检测报告链接或图片。
: \/ |8 M; }3 r9 aqr_code_img (图片字段): 可选,存生成的二维码图方便打印。
# a7 ]: M$ x7 K' R$ ~第三步:制作前端展示模板(扫码后看到的页面)
1 P: }- g2 }! ]你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。1 H1 |; l1 X" T
% m2 p# N, b! {" g _. S% o3 d
创建模板文件:& w* j1 o; ]% G$ u% l6 [/ P# W( y0 d
. K2 u* o5 k" ~" r8 D/ n
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。6 p) Q7 `3 a+ Q; N- w& Q) w
编写展示代码(以证照为例):
4 u. e2 x1 {3 s7 `0 D在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:) F# e6 q9 Z& P* l1 b
& H: p: _0 h1 F( _* ?3 R2 H( rphp. S1 f" r3 L1 K) L; K/ a
<?php get_header(); ?>
7 j. q" H' s Y<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">! m1 f- E& ]9 a
<h1><?php the_title(); ?></h1> <!-- 门店名称 -->
" \: k" T" m4 e; F& D2 t8 q
6 h1 f3 w9 W5 v <div class="cert-box">
3 z, i6 @- x4 ^$ U E, e <h3>营业执照</h3>
) s" n) I/ k8 M <img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">" O' _& {( x+ E9 z/ `' f
</div>9 e- g' c2 h2 f% d$ a
' r5 p8 I# U" v7 J9 w <div class="cert-box">; b7 ^. |$ x+ R+ j7 ?) N+ D: h
<h3>卫生许可证</h3>
4 U% }9 \! m+ i- X" P <img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;">9 l" C, i9 b! \! W S* N% u
</div>
$ ]. ]4 W: b) U+ {. \4 q
3 @8 B1 U/ |/ q P- Q/ e5 ` <div class="info-box">
u1 Y; g2 ?, _2 Y+ |" n; K& } <p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>
8 A- v" R. P% f) m# n& A# T </div>
! W! ~; U9 _$ [( i9 {* S
9 c% t3 h* ~3 ~ |! e <footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">
, d! t! R; j9 U2 t, i( w5 g* n 由 wuchai.cn 提供技术支持
/ Q1 _8 L+ @& _& M" F8 [ </footer>1 y( k: P5 A& x/ v) g3 J
</div>, b$ w( E0 Y U# v& a# O
<?php get_footer(); ?>
) l$ ]. i1 M9 K1 l& Z" c食材溯源模板同理,只需替换字段名即可。1 }3 Y9 q0 F: ?0 Z% Q# `
; C& i$ _3 G8 H. u. G& f F
第四步:生成二维码并关联
S6 t R/ `, V+ C0 q! B发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。* I/ \$ y& D8 H& @; |9 M$ `
生成二维码:
2 I+ y2 ~; s m: O3 G二维码内容指向:https://wuchai.cn/store-license/101 (或者用你的中转链接 https://wuchai.cn/go?id=101&type=license)。
2 w- n6 d' P+ d使用 QR Code Generator 插件或在线工具生成图片。+ P# ?- t# u& R2 |
打印张贴:下载二维码图片,打印出来贴在门店显眼位置。
, K: O7 J2 K }0 i' s第五步:权限与隐私设置(可选但重要), `/ O' V0 `" H. ~3 u6 {
公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。) J/ x1 b/ t8 d9 ^6 e: J, ]
防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。
: k( Q$ G: q: D7 L( p这样做的优势:- c- ]5 p8 \( U# @6 s+ h) h
极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。! Q, z4 n9 b' k/ q1 d$ J* x( F
易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。
* T2 \- [. ~3 Y6 c! Q8 ?( u8 K统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。
! E. q- y2 r/ |* {' d% Q下一步建议:# V# i2 q8 S7 w
先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。) X" W/ V, {- j v+ C, ~* W j) |! S0 [
+ n$ e& i. j q5 y, Z
需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
) P2 n9 b8 n( \5 f3 g" _6 ]1 E+ D% E# z! X# t, Q1 P6 h
参考 |