分类： 未分类

抖店官方文档解释如下：

商品卡商品点击人数：指通过非直播、非短视频载体直接点击商品的人数，去重：一个用户多次点击计算为一个人。
商品卡推荐商品点击人数：指点击商城范围内的推荐位置的商品卡片的人数，去重逻辑：一个人多次点击商品卡片只计算为一个人。
商品卡搜索商品点击人数：指在搜索后点击搜索结果中的商品卡片的人数，去重逻辑：一个人多次点击商品卡片只计算为一个人。

三者之间的关系是：商品卡商品点击人数 = 商品卡推荐商品点击人数 + 商品卡搜索商品点击人数。

但在日常分析数据时会遇到：商品卡商品点击人数<商品卡搜索商品点击人数

人工客服给的回复是：

搜索商品点击人数是什么意思？ 搜索商品点击人数是指在所选时间范围内，用户通过搜索关键词进入商品页面的去重人数。具体而言，这些点击行为包括以下场景： 直播间点击：用户在直播间中点击商品卡。 短视频点击：用户在短视频中点击购物车或商品卡。

商品卡点击：用户直接点击搜索结果中的商品卡。 去重规则：同一用户在筛选时间内访问多个商品，只会被计算为1次

客服举例：比如搜索了雅诗兰黛，到了李佳琦直播间，这样曝光非常大，算是搜索结果曝光；但是一定要到李佳琦直播间，点开了雅诗兰黛小棕瓶，才算到商品曝光。

Elementor插件加载在woocommerce产品页面时，导致产品主图相册需要等到整个页面的图片都加载完后才显示

add_action('wp_enqueue_scripts', function() {
    // 仅在产品页 & 未用 Elementor 构建的产品中卸载 Elementor 前端资源
    if (is_singular('product') && function_exists('elementor_load_plugin_textdomain') && 
        ! \Elementor\Plugin::$instance->db->is_built_with_elementor(get_the_ID())) {
        
        // 移除 Elementor 样式
        wp_dequeue_style('elementor-frontend');
        wp_dequeue_style('elementor-post-' . get_the_ID());  // 单篇特定样式
        wp_dequeue_style('elementor-icons');

        // 移除 Elementor 脚本
        wp_dequeue_script('elementor-frontend');
        wp_dequeue_script('elementor-waypoints');
        wp_dequeue_script('elementor-sticky');
        wp_dequeue_script('elementor-dialog');
    }
}, 100);

1、使用webp格式图，相对jpg格式，图片体积会缩小很多

2、安装redis插件

3、安装wp super cache插件（官方免费插件）
很多文章推荐wp rocket 插件，但正版售价太贵，没试过，破解版不适合用在商业站点上，也没试过

4、安装Asset CleanUp: Page Speed Booster

此插件用来合并css与js,还可以卸载掉在指定面使用不上的css和js，实际使用有明显帮助

第一步：添加评论

INSERT INTO wp_comments (comment_post_ID, comment_author, comment_author_email, comment_date, comment_content, comment_approved)
VALUES
(500, ‘John Doe’, ‘johndoe@outlook.com’, ‘2025-04-2 13:45:26’, ‘Cool looking lights
It’s very pretty. Fast delivery and easy install and look great.’, 1);

第二步：添加评论星级

INSERT INTO wp_commentmeta (comment_id, meta_key, meta_value)
VALUES (500, ‘rating’, 5);

此时，添加完星级后，在产品页面可以显示评论内容，但是还未统计评论数量

第三步：在woocommerce评价列表，将评价移入回收站，然后再还原

完成

✅ 一、准备工作

1. 已有 WordPress + WooCommerce 网站
2. 可用的域名
3. 域名 DNS 可由你控制（如阿里云、腾讯云、Namecheap、GoDaddy等）

✅ 二、注册并接入 Cloudflare

步骤1：注册 Cloudflare

• 访问 https://www.cloudflare.com/
• 注册一个免费账户并登录。

步骤2：添加你的网站

• 登录 Cloudflare 后点击 “Add site”
• 输入你的域名（例如 example.com），点击 “Add site”
• 选择“Free”免费套餐，点击“Continue”

步骤3：导入并检查 DNS 记录

Cloudflare 会扫描你的 DNS 记录：

• 保持原有记录不动（例如 A 记录、CNAME、MX 等）
• 重点检查：
  • 确保 example.com 和 www.example.com 的 A 记录正确指向你的服务器 IP
  • A 记录右边的小云朵图标为橙色（代理模式），表示启用 CDN（推荐）

点击 “Continue”

步骤4：更换域名 DNS

Cloudflare 会提示你修改域名的 DNS 服务器地址：

• 登录你注册域名的平台（如阿里云、腾讯云、GoDaddy）
• 找到该域名的 DNS 设置页面
• 将域名的 DNS 修改为 Cloudflare 提供的两个地址（例如 lisa.ns.cloudflare.com, mark.ns.cloudflare.com）
• 等待 DNS 生效（通常几分钟至 24 小时）

Cloudflare 会自动检测是否接入成功。

✅ 三、配置 WordPress 和 Cloudflare

步骤5：安装 Cloudflare 插件（可选但推荐）

在 WordPress 后台安装插件：

插件名称：Cloudflare

• 安装并激活
• 进入插件设置页面，使用 Cloudflare 账号登录并关联你的网站
• 可启用如下功能：
  • 自动缓存清理
  • 优化 WordPress 设置（如自动压缩、HTTPS重写等）

步骤6：开启 HTTPS（SSL）

在 Cloudflare 面板中：

• 进入你的站点 > “SSL/TLS” > “Overview”
• 模式选择：Full（严格）（推荐，前提是你服务器已配置证书）
  • 如果没有证书，也可选择“Flexible（灵活）”，但有兼容性问题

建议你自己在服务器配置 Let’s Encrypt 免费证书（宝塔可一键申请）

步骤7：启用性能优化功能（Speed）

在 Cloudflare 面板中，进入：

• “Speed” > “Optimization”
  • Auto Minify（HTML、CSS、JavaScript压缩）：开启
  • Brotli：开启
  • Rocket Loader：可选开启（注意与部分JS插件可能冲突）
• “Caching” 设置缓存级别为“标准”
• “Page Rules” 中可添加规则让 WooCommerce 的购物车、结账页不缓存：

text复制编辑URL: *example.com/cart*
设置：
 - Cache Level: Bypass
 - Disable Performance

再加一个规则：

text复制编辑URL: *example.com/checkout*
设置同上

✅ 页面规则 2：跳过 WooCommerce 购物车/结账缓存
分别添加以下两条：

规则 2.1：
| 匹配 URL | example.com/cart* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

规则 2.2：
| 匹配 URL | example.com/checkout* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

（可选）规则 2.3：
| 匹配 URL | example.com/my-account* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

📌 说明：这些页面不能缓存，否则购物车功能可能失效。

✅ 四、WooCommerce 特别说明

为了防止 Cloudflare 缓存购物流程页面导致用户数据出错：

• 请确保以下路径不被缓存：
  • /cart
  • /checkout
  • /my-account
• 可以在 Cloudflare 的 Page Rules 设置这些路径为“Bypass Cache”

✅ 五、测试和验证

• 访问你的网站，确保：
  • 正常加载，未出现 HTTPS 报错
  • 购物流程正常
  • 浏览器开发者工具中响应头出现 cf-cache-status 字段，说明 Cloudflare 正常工作
• 使用 https://gtmetrix.com/ 或 https://pagespeed.web.dev/ 测试网站性能是否提升

woocommerce控制产品展示的代码为UL和LI标签，在右侧可看到该区域的css优先级别

使用Gird代替Flex工作，因为我尝试Flex多次没有成功

首页查询区块最终代码如下：

@media screen and (max-width: 768px) {
    .wp-block-woocommerce-all-products .wc-block-grid__products {
        display: grid !important; /* 使用 Grid 布局 */
        grid-template-columns: repeat(2, 1fr); /* 每行 2 列 */
        gap: 10px !important; /* 设置产品间距 */
    }

    .wp-block-woocommerce-all-products .wc-block-grid__product {
        box-sizing: border-box !important; /* 确保宽度计算正确 */
    }

    .wp-block-woocommerce-all-products .wc-block-grid__product a {
        display: block !important; /* 确保链接区域是块级元素 */
    }
}

商店归档页代码如下

@media screen and (max-width: 768px) {
    .wc-block-product-template {
        display: grid !important; /* 使用 Grid 布局 */
        grid-template-columns: repeat(2, 1fr); /* 每行 2 列 */
        gap: 10px !important; /* 设置产品间距 */
    }

    .wc-block-product-template .wc-block-product {
        box-sizing: border-box !important; /* 确保宽度计算正确 */
        padding: 5px; /* 增加内边距 */
    }

    .wc-block-product-template .wc-block-product a {
        display: block !important; /* 确保链接区域是块级元素 */
        text-align: center; /* 居中对齐 */
    }

    .wc-block-product-template .wc-block-product img {
        max-width: 100%; /* 确保图片宽度适应容器 */
        height: auto; /* 保持图片比例 */
    }

    .wc-block-product-template .wp-block-post-title {
        font-size: 1rem; /* 调整标题字体大小 */
        margin-top: 5px; /* 增加标题的顶部间距 */
        text-align: center; /* 标题居中 */
    }
}