在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。
; {0 |- X8 D% ?# P4 y# I
0 \) a+ A F, c% m0 k. v以下是具体的配置步骤,按这个流程操作,1-2天就能上线:9 n; |7 _( }& f; p5 C) g; }' E
0 S) s" i7 D7 A. b5 F+ s
第一步:创建两个新的自定义文章类型(CPT)
# d* A: o& Q1 e+ `+ ?% R0 ^4 s0 @, K2 V使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:
, p3 _! l, Y8 n" N4 @+ p. j) B- V3 P! L& I# _4 f4 M: a
门店证照 (Store License)1 L9 Z! L2 c; _% a
/ F5 O, x- b$ g0 T- X% C \
Slug: store-license. g* x' i% n6 R( D& U
支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。
6 A \" s, r( Y4 _- R8 w- O! R1 E用途: 每个门店对应一篇文章,存储该店所有公示信息。/ z2 H7 m% v) O4 ]* F& b) }4 |
食材批次 (Food Batch)& a8 n6 ^7 w3 B- l F
- X( t+ I' ]# N! }! Z+ g4 vSlug: food-batch# C; [* D3 G E! c. t
支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。8 t& @/ E, [" q7 @5 q, M
用途: 每批食材对应一篇文章,存储溯源详情。- h# Z( ?3 y. o0 L& L* C4 u1 Z
第二步:添加自定义字段(存储具体信息)/ C [! h6 O$ ^( e
使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:
5 M( a" l' k9 |: \. x
3 g$ s' h: b4 o6 b- W' y: u为「门店证照」添加字段组:7 ^5 S' t* D! \- k5 A
! r# c5 `' h, N6 O( g) ?. ~4 I
license_image (图片字段): 上传营业执照、卫生许可证照片。1 o5 b/ h! {, l9 c
health_cert_image (图片字段): 上传员工健康证。8 k1 h, s% _6 G' v6 e! m; S% X
inspection_report (文件字段): 上传近期消杀或检测报告 PDF。
9 W8 h9 I! X/ n2 bstore_intro (文本域): 门店简介或承诺语。* \# X# x" o! x/ O9 d: i
为「食材批次」添加字段组:$ o' _$ \+ K( K2 v; T+ N
. ]+ y5 V; H7 B% C5 n
origin_place (文本字段): 产地(如:四川成都郫都区)。" S( K* F5 i* g
supplier_name (文本字段): 供应商名称。
$ }+ P) `$ `/ t* Gbatch_date (日期字段): 进货/生产批次日期。
( J. A W8 a& c8 {test_report_link (URL 字段): 检测报告链接或图片。" G( W2 d$ j/ ?0 W
qr_code_img (图片字段): 可选,存生成的二维码图方便打印。
9 R7 A" j7 c3 E2 W6 c第三步:制作前端展示模板(扫码后看到的页面)7 }, v+ w- m! n2 c, Z6 n6 V
你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。
! s, h: b. I7 L9 T& |9 ]" y# q0 H- y. {2 z2 ^% v
创建模板文件:, Q) X% W# ?! p- L- D+ k# L
0 }7 `0 P: c! t
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。
3 S: q5 h( h3 ]" ~/ d' W, O' t( F编写展示代码(以证照为例):
$ }& q" p' Q X- z$ g/ d在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:: n( H& ~5 v7 P H1 }
+ q7 Z% O. B7 w
php
J" { Y" ^% `. o5 J. I3 N<?php get_header(); ?>
( C: M; L+ m" i0 J' {& {" s8 G6 ?* F<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">2 G4 k. n7 N4 ` s# d0 q% b
<h1><?php the_title(); ?></h1> <!-- 门店名称 -->
" V. |. ?6 ~( O% D* t8 D 4 G; X! W2 r; g& ?) P; M" @" x
<div class="cert-box">: w. L% u. P5 G( e
<h3>营业执照</h3>: d7 W& h' S/ s. f+ a0 {6 `6 U
<img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">
# L- g" T2 A" j: P& v' _ </div>
$ K @0 A% |5 O. }. p) c, r( w0 Z& c
<div class="cert-box">2 @$ E! e ]4 } n' U3 Y7 J
<h3>卫生许可证</h3>
( X$ x8 R7 {1 P$ |( k: T <img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;">) C. k+ d" r3 L7 U
</div>+ |. \% G2 I) n) h
+ W) y6 G- e+ F <div class="info-box">
. k& ~" o# l) f$ c/ D <p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>" R& T$ C/ W r" k) J0 [. J6 o' I8 ?+ {
</div>
. l. @; K. n( ]! h# | z5 b% p% Z# c$ r) f, P" g$ y
<footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">- A+ @' D- I& {+ E7 A8 R
由 wuchai.cn 提供技术支持) ] i# l5 o2 D( ]" O
</footer>8 Q8 R- i3 p4 j$ i1 j
</div>
{3 @7 R; m( d# B1 s4 |1 J5 Y<?php get_footer(); ?>( O( H2 J$ d" q+ X: ^, c) ~
食材溯源模板同理,只需替换字段名即可。8 b! W) g$ w9 y. y+ [' r# Q
& z$ I3 C8 y4 P4 N' d
第四步:生成二维码并关联
2 l: d2 p! p; y6 t- M2 {/ `发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。8 C( h/ C. J) J
生成二维码:
4 w: w$ f6 `* T& a+ s二维码内容指向:https://wuchai.cn/store-license/101 (或者用你的中转链接 https://wuchai.cn/go?id=101&type=license)。
% D1 Z t% Y6 q# d& U7 w使用 QR Code Generator 插件或在线工具生成图片。
" A! } Z/ n% ~1 W打印张贴:下载二维码图片,打印出来贴在门店显眼位置。) T5 X g, r/ b k' W+ A$ ?1 W8 L
第五步:权限与隐私设置(可选但重要)+ B$ k. h5 E+ r% U4 Y4 P
公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。
0 i& w: u/ U% {" d+ O/ R9 g防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。 t V! t; N0 u7 @" D: c( B
这样做的优势:$ N( e$ c% a L6 r& L7 i
极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。
- _) o! z# F; ^易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。
' m2 }: n) W5 M1 W统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。, r3 k8 b0 F T& i' k3 t4 G0 c& X
下一步建议:
- z2 w" n7 q- I8 n, _, K; r先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。7 e* f9 Q6 B5 s* P$ @
/ w( o# L: |& {
需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
" k+ k4 a7 \9 W
, C, `- v, T0 V% q4 _" H; ^参考 |