首页文章列表标签随机彩色样式实现指南子比首页文章列表标签美化

安装与使用步骤

1. 登录 WordPress 后台 → 外观 → 自定义 → 子比主题设置 → CSS 样式
2. 将代码粘贴至自定义 CSS区域
3. 保存并刷新首页查看效果

样式一

样式一代码

/*文章外部标签随机彩色 souyuanzhan.com*/
.item-tags a {
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.item-tags a.meta-pay {
  background-color: #FFD700;  
  color: black;
}
.item-tags a.c-blue {
  background-color: #1E90FF;  
  color: white;
}
.item-tags a[href*="tag/"] {
  background-color: #FF69B4;  
  color: white;
}

样式二

/*文章外部标签随机彩色 souyuanzhan.com*/
.item-tags a {
  padding: 6px 12px;
  border-radius: 6px;
  margin-right: 8px;
  margin-bottom: 8px;
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover effect for all tags */
.item-tags a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Premium/paid content tag */
.item-tags a.meta-pay {
  background-color: #ffd700;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.meta-pay:hover {
  background-color: #f7ce00;
}

/* Blue category tag */
.item-tags a.c-blue {
  background-color: #2e86de;
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-blue:hover {
  background-color: #1a74e2;
}

/* Standard tags */
.item-tags a[href*="tag/"] {
  background-color: #ff6b95;
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a[href*="tag/"]:hover {
  background-color: #ff4f81;
}

/* Additional tag variations you can use */
.item-tags a.c-green {
  background-color: #20bf6b;
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-green:hover {
  background-color: #1caa5e;
}

.item-tags a.c-purple {
  background-color: #9b59b6;
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-purple:hover {
  background-color: #8e44ad;
}

/* Focus state for accessibility */
.item-tags a:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}