在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。
; a2 T% X b/ }4 j" i, v! c3 C+ k
0 |$ A2 X5 d% R* o4 X: |6 w( k; {以下是具体的配置步骤,按这个流程操作,1-2天就能上线:; E; n& W; f( \" V: q' E
. n+ O. N; i3 _3 Z/ T! z第一步:创建两个新的自定义文章类型(CPT)' b! Q# R/ q$ y! @
使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:# x |$ F6 J2 m; l
6 Q' o& [; j) N0 G9 i' R门店证照 (Store License). v% \6 G% \/ ~, {2 p( ^$ U) l
6 X1 T; M: n6 }+ KSlug: store-license5 i! w' U. p" E5 q2 Q8 j: E
支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。0 K" l/ @0 Z: f$ z) t* r
用途: 每个门店对应一篇文章,存储该店所有公示信息。" i% V3 q4 ^2 [3 ^, y
食材批次 (Food Batch)
, I, J8 G7 n( q5 g# u- d" N
0 E6 }$ M9 L; Q2 t% |+ ?5 X6 ZSlug: food-batch
5 e5 N8 p: x9 @3 R N" R" D; ^) V) b支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。& ?9 \9 o3 n- ^1 V. ^
用途: 每批食材对应一篇文章,存储溯源详情。9 ]- a; q. k9 q* ~5 H( R% A! H
第二步:添加自定义字段(存储具体信息)
2 m, W& G1 j G8 ^4 v" n使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:; s% ~7 Z9 f8 \1 ^) R& ? U, ]0 O
) t; e' ?4 Z* }* V' N* o6 O1 b为「门店证照」添加字段组:
: B+ S/ P9 ?7 E+ m0 E
e0 T& |! {: `. f2 Klicense_image (图片字段): 上传营业执照、卫生许可证照片。
! d0 @' _$ R# ?3 B+ I6 nhealth_cert_image (图片字段): 上传员工健康证。
$ D6 c1 m: R t- z& p) m' Finspection_report (文件字段): 上传近期消杀或检测报告 PDF。
8 Q2 o+ Z6 P$ J: L. @4 Pstore_intro (文本域): 门店简介或承诺语。 W5 p, T! h1 D$ J5 `- F
为「食材批次」添加字段组:
- b. s+ ^, r$ |9 B% d% Q6 P8 g! }: r6 X! R! q
origin_place (文本字段): 产地(如:四川成都郫都区)。
3 \6 h5 \4 N2 X2 q& ^supplier_name (文本字段): 供应商名称。8 o P/ S E. u# O% s
batch_date (日期字段): 进货/生产批次日期。7 q$ R- I6 A/ L
test_report_link (URL 字段): 检测报告链接或图片。$ I% u! ~& j, n' {" l
qr_code_img (图片字段): 可选,存生成的二维码图方便打印。4 z) e: V7 u1 O! Q, `
第三步:制作前端展示模板(扫码后看到的页面) W$ @" ~' e" F, d! K. c
你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。6 i6 i; J) [' D# U0 e* Z1 m: G* I
) w- a% A4 t8 P# @7 j4 M6 K9 Y创建模板文件:
& I; S0 U2 R2 V3 Y9 S" F: {: h# |4 T6 f- g% R4 o( {7 g( Q6 m$ a
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。7 Y! C( D3 @! V* T. G9 C4 A
编写展示代码(以证照为例):0 V0 G5 Y* G0 e/ ~. _) P
在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:% ~ q5 z& _: S$ g
# t B' z& S: O! d8 P* I; u
php
) C. ~: B q: z, G<?php get_header(); ?>3 s+ ?" l) M- h4 I/ S. ]
<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">6 A1 x- q, ^( J0 o5 I" Z& d
<h1><?php the_title(); ?></h1> <!-- 门店名称 -->
( Q4 J6 q; ^4 | 5 e) {0 c2 P, K
<div class="cert-box">3 ^8 n# ?$ \0 ^ \
<h3>营业执照</h3>% @8 S5 F: \1 {+ n" U9 `5 k0 h9 R
<img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">
! ^. r) m3 w/ p1 X, p( ] </div>
6 E6 T. C8 H+ i$ y: e
' \+ ], N& Y$ [& Z: a9 R b <div class="cert-box">' F8 _% R* e* a S, T6 I! _( ?" z
<h3>卫生许可证</h3>
+ Y- J ?$ G2 l, Y( S5 Z7 [" j <img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;"># A# C5 f- z+ Y5 f- B2 F$ m: u( t
</div># u" X: L7 G; I4 t
9 m7 e$ i- g& x
<div class="info-box">
& L6 K, E* x/ K% d* L5 Q& l <p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>
7 A, e: \ E" e& D8 _4 m% o; R$ s </div>
3 t* z# v" J7 i0 l$ S+ f $ t! Z" d6 k' [8 K" ]
<footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">
U% C# H V" ^0 _ 由 wuchai.cn 提供技术支持
5 ~9 D4 M: `6 k& Q5 j8 l </footer>4 N# d; J: U a; s5 b5 w, \
</div>0 }. F, X! l( w8 o1 W
<?php get_footer(); ?>: I3 e& F# f/ o
食材溯源模板同理,只需替换字段名即可。% z. s8 }0 E% f3 z, M! P/ T& Q
; i. q4 A6 K1 |第四步:生成二维码并关联8 ]- O3 D' r5 B; ?8 x3 e) {8 c
发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。
+ _6 B! ~) ^* N生成二维码:
i& M9 N7 {' P$ B. `) q二维码内容指向:http://wuchai.cn/store-license/101 (或者用你的中转链接 http://wuchai.cn/go?id=101&type=license)。* o. D4 ?& s2 _' q3 a# I2 P( k
使用 QR Code Generator 插件或在线工具生成图片。
, o2 d, {: ^/ }8 s' e打印张贴:下载二维码图片,打印出来贴在门店显眼位置。
- n& V# X: x' X7 f1 X第五步:权限与隐私设置(可选但重要)
6 Y8 j, K! f. L7 a, J( \. t f6 N公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。. O& m4 X: k* d. n# k% [" c
防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。
2 s2 S% W; g- R3 Q) u: W这样做的优势:" w8 [3 J+ B6 u, n
极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。: f( g. f* Z9 v5 A. | [- j6 p
易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。& I7 W Y9 F4 [& j% |5 v! s' ?6 a
统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。
+ c$ ^: {6 @1 S) `2 Z+ P下一步建议:( R/ _1 _; D" b. N* _9 t
先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。
& L! b: U' _! R; `; b% S' }- }% w6 c, E# N" i6 b
需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
+ _/ a* y# P( m8 C" {
Q' A5 X, D5 b0 |1 |! m' t+ }参考 |