在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。
- H. J) `& r( C
3 V5 a( t$ W- n2 `& J7 h以下是具体的配置步骤,按这个流程操作,1-2天就能上线:
/ y ~: T/ f. V# F7 T9 \( X6 T9 }
2 B+ ~; a/ f; r, D, H! Q, D- @6 n第一步:创建两个新的自定义文章类型(CPT)+ h1 I$ ^6 [; @7 a" o2 u9 N0 p' p
使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:
& Z8 u% D6 p# Z4 k; i, H8 Z8 B9 k0 E H* Y) r- c9 S
门店证照 (Store License)1 x$ J! ]2 |5 }* ^ a4 \1 o
3 \2 H; e% ?, l5 q
Slug: store-license+ W, I& G! o" K
支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。
6 _9 n0 f8 U+ B' _* E用途: 每个门店对应一篇文章,存储该店所有公示信息。
: U+ i5 [: w' G8 ^7 H* G) U食材批次 (Food Batch)
. q/ T8 o- |3 W$ f, ?6 Q: S' v& }4 l/ h- J( C1 K1 t% A# n
Slug: food-batch
3 i4 O1 f; M+ A( T+ Z支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。2 Z% t, @( u% Y$ o8 G/ T* {
用途: 每批食材对应一篇文章,存储溯源详情。+ a2 i- X0 U! g1 D7 ~9 H1 z; E
第二步:添加自定义字段(存储具体信息), s/ w+ G4 f% m: I4 G
使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:
0 w$ t8 g8 _: ~# L; V/ y7 j( c2 ~ t; B' P5 K- o. q6 p
为「门店证照」添加字段组:& j! f0 S3 b; s: V
0 I+ D, o' E7 ~) g* w
license_image (图片字段): 上传营业执照、卫生许可证照片。
, Z# X$ x0 ~; x* X2 Mhealth_cert_image (图片字段): 上传员工健康证。
6 M" o1 m q& Y! linspection_report (文件字段): 上传近期消杀或检测报告 PDF。) ` u" A5 u/ R& |6 [$ Z
store_intro (文本域): 门店简介或承诺语。9 a4 ?, T% c6 k9 f" [
为「食材批次」添加字段组:
! H+ A- S0 a: k/ L
' c. t0 d. p( O6 N/ u3 Corigin_place (文本字段): 产地(如:四川成都郫都区)。
7 y8 ?5 ~- X0 }supplier_name (文本字段): 供应商名称。
* P: O# g, ]# D/ Abatch_date (日期字段): 进货/生产批次日期。
+ n2 d! _ G* k c$ r' y0 Gtest_report_link (URL 字段): 检测报告链接或图片。7 T0 I/ s" Y- r1 r; H, _
qr_code_img (图片字段): 可选,存生成的二维码图方便打印。
% _2 ?0 `& Z0 {3 H$ E% v第三步:制作前端展示模板(扫码后看到的页面)* u& j: v6 T# C
你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。
N8 K) \6 l+ t- E8 Y3 ~. }( z; l4 v- Y3 c
创建模板文件:, p7 Z6 R; V3 k/ n# P+ M& l
7 s- r1 s7 ]: p4 ^1 @
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。6 o2 k8 N" L+ J) e$ E; K1 V' ]
编写展示代码(以证照为例):, A, C; J* A: t
在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:
1 C) w8 {* J! u! E7 m) Z3 j$ [$ V* J8 V& F
php
- I$ F$ s. y% b$ M% x& X" `<?php get_header(); ?>
6 y* u3 t8 C& C2 d8 Q! M* V4 e<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">8 l# j9 j* J0 D( w: m, W
<h1><?php the_title(); ?></h1> <!-- 门店名称 -->
, s- ?. A- D* m7 R + P" T/ h6 A. a1 {! [
<div class="cert-box">
7 Q' K2 a9 R" [9 ]3 H1 K <h3>营业执照</h3>! r1 J; L! C7 e: s& d* z
<img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">0 F2 L s" A/ C* N4 T F- b
</div>
; d% k7 [; M; g0 J- d& Z% h/ R0 Q9 ]) q- E N# b& E7 Y
<div class="cert-box">! c- t* z/ E/ l
<h3>卫生许可证</h3>
5 w; b" j7 o# v1 x' Z2 T) y7 ~ <img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;">
! A: u: U4 n+ ^+ O </div>$ {5 E$ K/ C/ a: l
; E: ?. }( V. V9 [: N
<div class="info-box"> I \, r6 F/ E6 H( A) S. i. u
<p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>" I9 `8 m6 n, q& w7 f' e) F g
</div>
& u% t& k( C5 Q M
5 D' {. A8 N4 a% J2 _7 ` <footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">
8 K8 G) X5 Y! H 由 wuchai.cn 提供技术支持
8 B6 Y% U n9 ] }4 Q </footer>5 p& \$ F2 @- ^9 ^/ W9 n& E. {
</div>5 _' ?% C0 P2 u0 u0 Y
<?php get_footer(); ?>4 R& U# ?( I: z1 G1 o6 [! N. S
食材溯源模板同理,只需替换字段名即可。* [3 o3 m9 g0 Z* ^6 J1 o$ I
/ t0 t/ H- V5 G4 m
第四步:生成二维码并关联
3 P* ~2 j' E1 \% ]发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。* \, r/ l0 ^( l5 J7 m% z
生成二维码:
/ ]7 r+ r X4 Q" k0 K二维码内容指向:https://wuchai.cn/store-license/101 (或者用你的中转链接 https://wuchai.cn/go?id=101&type=license)。& L. X3 e& f* i$ J, l- ?2 @
使用 QR Code Generator 插件或在线工具生成图片。8 G7 g1 Z. G3 i+ x9 q' b- |3 A
打印张贴:下载二维码图片,打印出来贴在门店显眼位置。
$ u6 g! P: n: p7 B) U. b第五步:权限与隐私设置(可选但重要)3 X& B8 F9 e( I$ |! q7 U
公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。
) ^* F* k" s9 S2 E3 S& n防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。- O- r1 A+ E+ @! h m2 Q
这样做的优势:
! e; b0 `3 h* O+ w Z% i. T极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。
' z3 l( D+ e9 v9 F& y! u2 ?易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。
0 z0 s8 @' u* o; N2 R2 h统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。
3 @ L; q* w. l7 F' X下一步建议:
6 p$ F/ C, v3 n. w先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。% f8 o- z, l# G
: n, d( |7 E0 `7 s) r+ u4 X: x
需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
[! x, H- Q0 r5 F$ x8 ?$ ]4 T! @7 g
参考 |