在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。
7 a# J G% ^, S' k0 }- q
: }' t4 f4 G* J: s1 u以下是具体的配置步骤,按这个流程操作,1-2天就能上线:- N# @8 |. N0 D1 \9 c4 j4 a/ G2 g
$ P2 x- G$ T+ F2 l4 B0 Z0 s第一步:创建两个新的自定义文章类型(CPT)
0 D' h7 I2 V; P# D1 ?! }使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:+ q. C! N- K- y' k. C8 C+ T6 w
/ A3 Y, F+ }; A2 d* Z$ ]
门店证照 (Store License)
1 ?! O9 O. x' Y0 \: _
, ]6 ]; ~% l3 ~& |4 x% XSlug: store-license
5 L' J3 k. _* s2 a8 k支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。; o) c/ S& E# {' F; d8 k
用途: 每个门店对应一篇文章,存储该店所有公示信息。4 c7 N, V* H, C, X+ J, a+ b
食材批次 (Food Batch)
& t. y0 e3 k9 A' }+ a' H4 d/ A2 X8 {! t; ^5 v0 _* f
Slug: food-batch. Z+ o5 x& f. x/ t6 W6 C0 O8 X' ?
支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。4 u( u) {# F9 C g2 j2 l% ^
用途: 每批食材对应一篇文章,存储溯源详情。% m4 C) S4 f. U; U5 s
第二步:添加自定义字段(存储具体信息)2 y6 H: S0 s$ P0 z1 p! `
使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:
- J# Y9 f" W \% j+ k
/ f+ S+ p6 d2 h) y# U5 p为「门店证照」添加字段组:
3 `! f- A+ f. n- m& N, P) c+ F
/ D0 R( k7 I! R6 h) h& {5 hlicense_image (图片字段): 上传营业执照、卫生许可证照片。% y/ |0 U9 A; V! x4 M0 b) T4 e
health_cert_image (图片字段): 上传员工健康证。5 Z/ Q8 o7 l* J' y4 i% T! f
inspection_report (文件字段): 上传近期消杀或检测报告 PDF。2 Z# l! p9 Q0 a. U: B1 V3 M
store_intro (文本域): 门店简介或承诺语。
1 l% Y& D$ G/ d# d: {* v9 I为「食材批次」添加字段组:
2 y% a# M2 c, q9 s9 T9 h5 M: l+ ^' v: R$ h4 k
origin_place (文本字段): 产地(如:四川成都郫都区)。0 s7 }" V" p8 @: M- r! n; V
supplier_name (文本字段): 供应商名称。3 L* Q: m9 }% }+ O" }
batch_date (日期字段): 进货/生产批次日期。7 ^. t1 W( f% q0 p' ]9 a& |+ `
test_report_link (URL 字段): 检测报告链接或图片。
# |& v% J" a! g3 z. B' bqr_code_img (图片字段): 可选,存生成的二维码图方便打印。
" L( p. |8 G9 Y6 H4 E1 f1 n2 e第三步:制作前端展示模板(扫码后看到的页面)$ h3 ?5 p3 U! g7 [% c. S: D. t
你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。
: X9 D3 x2 S9 V# e# {: `) k+ P
3 w8 A% i: B, q' m% s2 b$ S* F创建模板文件:
, H/ [1 U* c' T& ~# ^0 r/ M g( j! R9 a- P2 K* ?& }7 p
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。
! }+ S# j% f: ?% @编写展示代码(以证照为例):" @: X% s! _3 g; h& {- n6 b4 C; s* d: E
在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:3 o5 @" f- J* d9 ~4 _8 T
/ g+ p5 j p( ]3 {% U$ v
php
/ v5 _1 |# y4 S+ t! h' s0 e5 R, h; y<?php get_header(); ?>
* V' N6 y% W. C8 |2 |<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">
, ?! S- V$ N3 d2 [/ e2 w <h1><?php the_title(); ?></h1> <!-- 门店名称 -->: m* x9 _; a& B! L
: Y5 y. S5 s& _$ f- G3 B5 Y: c r <div class="cert-box">% E4 b) G6 `2 s
<h3>营业执照</h3>, U% {2 w' M' @1 ]' F/ W
<img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">
* `9 R. U- l N </div>
8 d7 p- V/ m h" Y9 T) j' f' E6 e, b* O1 C' h; U
<div class="cert-box">
/ Q: U `5 [2 m6 X <h3>卫生许可证</h3>7 o) U. f2 c, L- `7 E( C3 a, U" O: ]
<img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;">
7 d& [" L. k$ \/ S </div> U" N" j- x0 Z6 B2 Z
( u& o5 n5 P' @6 v4 V. C: b <div class="info-box">
+ T1 I" E3 E) d- R3 z <p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>
9 L/ e+ b' m+ F( X6 E$ Y </div>' m" Q" i3 i: N5 n* s4 Y# J
) a2 k8 Q9 o; A k" T! w' o, C5 r <footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">
# v" @) M1 R1 E7 | Y% ] 由 wuchai.cn 提供技术支持! k" t7 ?9 @2 i$ o7 }) ]; Z! e
</footer>
0 Z6 v5 o N: I: D& e. }</div>5 `% w+ r) U6 z
<?php get_footer(); ?>, s, L: B- H' M5 Q5 M9 r/ l; X
食材溯源模板同理,只需替换字段名即可。3 O9 T% Z. k: k" d2 W e0 ?, j
( u; B3 l+ ?* L6 a5 M; ?
第四步:生成二维码并关联
$ T/ Q' i/ ^0 t+ T发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。3 B5 z1 e7 C# f% X, j
生成二维码:0 C! P m1 W2 h- N! N6 T6 [
二维码内容指向:https://wuchai.cn/store-license/101 (或者用你的中转链接 https://wuchai.cn/go?id=101&type=license)。$ G. ~8 t7 j& C9 q5 \0 j
使用 QR Code Generator 插件或在线工具生成图片。5 N% g5 D9 C- A5 D1 x8 `3 l
打印张贴:下载二维码图片,打印出来贴在门店显眼位置。
0 s0 R. n5 p( f4 A$ q第五步:权限与隐私设置(可选但重要)6 F" {) ?- W% p- o" W' d
公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。3 f$ q# \4 k2 `# K* M5 L
防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。
: l" L+ T @& d这样做的优势:
9 I9 J7 U6 l9 I! R t极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。
8 b5 z) u& ^, B. U A( o易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。& I; e- Y' [# [* a f5 c
统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。" X9 I& C1 u2 ?' w3 h; l: W, s
下一步建议:: ?" o0 y6 V; T9 Q
先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。
- \: |5 O* P+ S: \2 m8 T
& t/ w: J, d: K; o/ f$ z需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
9 h; X: E$ c% T0 p5 }
( {' P9 T2 U, [% r% L' Q3 R参考 |