在 WordPress 中实现「商家证照展示」和「食材溯源」,核心思路是复用现有的自定义文章类型(CPT)逻辑,只是把「表单提交」改为「前端只读展示」。
0 z' k$ R6 h/ m6 X# w& C7 V5 {
0 ]/ L5 `& e; k6 z7 Q% {3 ?以下是具体的配置步骤,按这个流程操作,1-2天就能上线:
8 p4 f' I* F9 ^# j8 l' i; J7 J, N U9 P, }/ x
第一步:创建两个新的自定义文章类型(CPT)
* T t' \ E8 H2 C* ?使用 CPT UI 插件,分别创建两个类型,用于存储不同场景的数据:4 W9 a& K) W, A6 H# M0 U
$ D* s3 B1 W/ ~' ]4 Q门店证照 (Store License)
, E$ v: r# c( @9 B7 A9 T% J, b! N; i/ g3 G5 C4 z
Slug: store-license
' y) K% y) r% J* _+ ^% a支持功能: 标题、编辑器(放文字介绍)、特色图像(放营业执照缩略图)、自定义字段。
0 _! _' E$ K" O2 Q用途: 每个门店对应一篇文章,存储该店所有公示信息。
, d S/ O, }( W+ a! [3 t; `4 l6 {+ _食材批次 (Food Batch)8 O5 l5 O- R# [) T c6 J2 f
, g; @; U1 J6 }4 M( _
Slug: food-batch: V$ ]; _- E6 S2 p2 s
支持功能: 标题、自定义字段(产地、检测报告链接、进货日期等)。8 |) a. g6 d$ O: x4 \5 L/ A1 f
用途: 每批食材对应一篇文章,存储溯源详情。; R1 o) _" a( Q% @0 }% Z
第二步:添加自定义字段(存储具体信息)
( _0 Q5 R9 Y# ]' w( D* z! W使用 Advanced Custom Fields (ACF) 插件(免费版够用),为这两个 CPT 添加专属字段:
{4 u* o& r& V9 y& Q/ ~
W: k i8 ^( [ {! o为「门店证照」添加字段组:
x9 f0 y6 p6 D& w" a' w" U/ U7 V! {) ]: {
license_image (图片字段): 上传营业执照、卫生许可证照片。
" F6 Z# o# K& I! E' q( fhealth_cert_image (图片字段): 上传员工健康证。
! m9 ^2 i F. ^- `7 _ ?: Oinspection_report (文件字段): 上传近期消杀或检测报告 PDF。$ v$ C$ i# V6 F3 H
store_intro (文本域): 门店简介或承诺语。
( Y# r( y- K+ N8 Q& m! C& }为「食材批次」添加字段组:
/ v1 X% i1 p9 ~3 L( R) r8 ]+ c0 A- f W G: e
origin_place (文本字段): 产地(如:四川成都郫都区)。. x5 R" U! E. Z. s6 d1 W: T
supplier_name (文本字段): 供应商名称。, _/ D8 p2 L6 ~4 a
batch_date (日期字段): 进货/生产批次日期。! o- F. X' B) D
test_report_link (URL 字段): 检测报告链接或图片。7 I; N8 V/ g9 X* V3 ~& D' I# x7 A; M
qr_code_img (图片字段): 可选,存生成的二维码图方便打印。) h8 C: J4 t( _! M7 ]
第三步:制作前端展示模板(扫码后看到的页面)& Y( k- E) p9 `$ m* j- x v
你需要让扫码用户看到整洁的页面,而不是 WordPress 默认的博客样式。
7 x9 Z4 j0 w2 P9 ]; [+ N3 E n7 h
创建模板文件:, r( A- O& m9 L- x1 y2 B. y* Y+ A
' d3 U0 m$ x' f6 V- Z
在你的主题文件夹下,复制 single.php,重命名为 single-store-license.php 和 single-food-batch.php。WordPress 会自动识别并应用对应模板。: |- F C0 ?) M, |
编写展示代码(以证照为例):
& z9 N1 h* |" b/ h- I在 single-store-license.php 中,删除无关侧边栏,只保留头部和核心内容区,用 PHP 调用 ACF 字段:- O) Q" q$ \" J/ `& }' F$ T) V
2 u0 P( v- e) g4 f8 qphp
- _1 d# }! Z- ^- Q<?php get_header(); ?>
, [+ X$ w$ S# B( g/ i- U h<div class="license-container" style="max-width:600px; margin:0 auto; padding:20px;">. i- h6 F1 \' ~
<h1><?php the_title(); ?></h1> <!-- 门店名称 -->
/ t" H9 u8 X+ N% v$ z
$ O C$ r0 A7 N) R <div class="cert-box">3 ~% U' U4 D; @1 \
<h3>营业执照</h3>) c* D) V% i( {$ ]4 n' d/ {8 v- p
<img src="<?php echo get_field('license_image'); ?>" alt="营业执照" style="width:100%;">0 F* E" O7 R0 `2 \; w: U" l/ i
</div>
; N) I) n1 a+ [# Q, t$ R+ |7 ~0 G. m8 [
<div class="cert-box">( B* t# K$ e2 Y# ? b
<h3>卫生许可证</h3>: Z0 t& E+ U% h% C% R# Q
<img src="<?php echo get_field('health_cert_image'); ?>" alt="卫生许可证" style="width:100%;">1 A2 H$ x' q' \, A
</div>
8 Y# B' V. L: H4 T: v; E
* \- f g! c H8 f$ e8 E# g <div class="info-box">
9 E1 W2 o5 Y+ V# i <p><strong>门店承诺:</strong><?php echo get_field('store_intro'); ?></p>
/ s) ^0 Q4 d K% S. U+ [ </div>8 {) _# o$ L( k0 x3 I6 f' r
; |2 a @' F* L7 S7 C$ b7 s$ s <footer style="margin-top:30px; text-align:center; color:#999; font-size:12px;">+ o, z7 K/ W% g0 g. V, ~, p$ ]& ?
由 wuchai.cn 提供技术支持) [ j8 @. K$ h6 u/ o" F
</footer>! B1 t. o$ L! }' T% u
</div>
+ y7 g3 o( Q! D6 w, ]<?php get_footer(); ?>
+ @/ j% F) a/ A8 `食材溯源模板同理,只需替换字段名即可。: g* u" [, d& Y$ h
$ `& m3 U5 L6 T6 ?; s. {, }4 Y* }第四步:生成二维码并关联7 Q$ ^. f w5 E2 {3 |+ ?
发布内容:在后台新建一篇「门店证照」文章,填好信息,发布。记下文章 ID(比如 ID=101)。- ~. L! j8 S% h. H/ j# X3 j
生成二维码:1 Q7 v6 P, w! h2 _
二维码内容指向:http://wuchai.cn/store-license/101 (或者用你的中转链接 http://wuchai.cn/go?id=101&type=license)。
. h1 v/ T9 v6 K2 h, X' f5 ?使用 QR Code Generator 插件或在线工具生成图片。; m& ?( z! e: I& v5 h5 H0 {0 F4 w4 @
打印张贴:下载二维码图片,打印出来贴在门店显眼位置。
4 h6 D/ ?4 k' S' V) D; t" C! l5 ~第五步:权限与隐私设置(可选但重要)
, F; A- Q0 r6 Z% A& X* p6 d公开访问:证照和溯源信息通常需要对所有人公开,所以保持文章状态为「公开」即可。2 G6 d# E. A0 q( e
防止修改:如果你担心商家误删,可以限制只有「管理员」角色才能编辑这些 CPT 文章,普通编辑只能查看。" M0 m3 u" ^; V+ p
这样做的优势:
3 G1 r0 \5 H- \+ G- `0 D极速开发:不需要写复杂逻辑,只是「存数据→展示数据」,半天就能搞定原型。; \$ o+ K8 _' j+ ^/ s
易于维护:商家要换营业执照,你直接在后台替换图片,前端扫码立刻更新,不用重新打印二维码。6 H, \% j; F) q- H3 J0 m
统一后台:巡检、证照、溯源都在同一个 WordPress 后台管理,你只需要一个账号就能服务所有客户。( ]+ a' a: {8 {! Y/ ~% C8 m
下一步建议:4 Y1 W/ x4 _! V4 s9 `( W
先拿一家熟悉的餐饮店做测试,帮他们把营业执照和健康证录进去,生成二维码贴在前台,看看顾客扫码体验是否流畅。
( ?4 u0 J/ x( r8 D. {0 I$ r, \1 [% O% J+ c' \4 m) E, G. `' F; [
需要我提供一份单页展示模板的完整 HTML/CSS 代码示例吗?让你直接复制粘贴就能用,省去调试样式的时间。
2 r) Z. C+ P, R: C( h( p
! J+ [3 E& B5 k! {' U7 R. t参考 |