WordPress 美化开发教程：文章卡片毛玻璃悬浮效果-创享插件资源

教程目标

这篇教程演示如何在 WordPress 站点里给文章卡片增加毛玻璃背景、圆角阴影、悬浮上浮和进入视口淡入效果。适合博客首页、分类页、搜索页以及使用子比主题这类卡片式列表的网站。

实现方式尽量轻量：核心效果只依赖 CSS，滚动淡入使用一段原生 JavaScript，不需要安装额外插件。上线前建议先在子主题或「外观 - 自定义 - 额外 CSS」里测试，确认不影响现有主题结构。

一、准备工作

打开 WordPress 后台，进入「外观 - 自定义 - 额外 CSS」。如果你使用子主题，也可以把 CSS 写入子主题的 style.css。
用浏览器开发者工具检查文章卡片的 class。常见选择器可能是 .posts-item、.post-list-item、.article-list .item。下面代码已经做了多选择器兼容。
如果主题已经有强烈的阴影或边框样式，先把原样式备份，避免重复叠加导致页面显脏。

二、添加卡片美化 CSS

把下面代码复制到「额外 CSS」中保存。颜色、圆角、阴影可以按站点主色微调。

:root {
  --cx-card-radius: 18px;
  --cx-card-bg: rgba(255, 255, 255, .78);
  --cx-card-border: rgba(255, 255, 255, .7);
  --cx-card-shadow: 0 14px 38px rgba(22, 38, 64, .10);
  --cx-card-shadow-hover: 0 22px 60px rgba(22, 38, 64, .18);
  --cx-main-color: #2f7df6;
}

.posts-item,
.post-list-item,
.article-list .item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cx-card-border);
  border-radius: var(--cx-card-radius);
  background: var(--cx-card-bg);
  box-shadow: var(--cx-card-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.posts-item::before,
.post-list-item::before,
.article-list .item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(47,125,246,.16), transparent 42%);
  opacity: 0;
  transition: opacity .28s ease;
}

.posts-item:hover,
.post-list-item:hover,
.article-list .item:hover {
  transform: translateY(-6px);
  box-shadow: var(--cx-card-shadow-hover);
  border-color: rgba(47, 125, 246, .25);
}

.posts-item:hover::before,
.post-list-item:hover::before,
.article-list .item:hover::before {
  opacity: 1;
}

.posts-item img,
.post-list-item img,
.article-list .item img {
  transition: transform .35s ease, filter .35s ease;
}

.posts-item:hover img,
.post-list-item:hover img,
.article-list .item:hover img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.posts-item .item-heading,
.post-list-item .item-heading,
.article-list .item .item-heading {
  letter-spacing: .01em;
}

@media (max-width: 768px) {
  .posts-item,
  .post-list-item,
  .article-list .item {
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(22, 38, 64, .08);
  }

  .posts-item:hover,
  .post-list-item:hover,
  .article-list .item:hover {
    transform: none;
  }
}

三、可选：添加进入视口淡入效果

如果想让卡片滚动出现时更有层次，可以把下面代码放到子主题的 footer.php 底部，或者通过代码片段插件添加到前台页脚。

(function () {
  const cards = document.querySelectorAll('.posts-item, .post-list-item, .article-list .item');
  if (!cards.length || !('IntersectionObserver' in window)) return;

  cards.forEach(function (card, index) {
    card.style.opacity = '0';
    card.style.transform = 'translateY(18px)';
    card.style.transitionDelay = (index % 6) * 60 + 'ms';
  });

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
      observer.unobserve(entry.target);
    });
  }, { threshold: 0.12 });

  cards.forEach(function (card) {
    observer.observe(card);
  });
})();