子比主题美化教程

子比主题分类栏目美化教程

代码：

/*分类栏目*/
.index-tab ul>li.active {
    color: #ffffff00!important;
    background-color: #ffffff00!important;
    border-radius: 6px;
    z-index: 1;
    position: relative;
    height: 39px;
    line-height: 44px;
    background: url(图片链接) repeat;
    -webkit-background-size: 91px 39px;
    -moz-background-size: 91px 39px;
    background-size: 91px 39px;
}
.index-tab ul>li {
    display: inline-block;
    padding: 2px 17px;
    font-weight: 500;
    border-radius: 20px;
    margin: 0 1px;
}

昵称抖音风格字体美化代码

子比用户昵称加一个抖音故障风格字体的美化代码，看着挺不错的，记录一下日后使用。

/*抖音风格昵称*/
.display-name{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);animation:shake-it .5s reverse infinite cubic-bezier(0.68,-0.55,0.27,1.55);}@keyframes shake-it{0%{text-shadow:0 0 rgba(0,255,255,.5),0 0 rgba(255,0,0,.5);}25%{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);}50%{text-shadow:-5px 0 rgba(0,255,255,.5),3px 0 rgba(255,0,0,.5);}100%{text-shadow:3px 0 rgba(0,255,255,.5),5px 0 rgba(255,0,0,.5);}}

用户中心添加UID、注册时间功能

将下面的代码放到/wp-content/themes/zibll/functions.php或者func.php文件即可。

/*
 * 定义用于显示用户ID的函数
 * 'but'是配合函数赋予class样式'but'在子比主题内通常是按钮样式可配合c-blue或jb-pink赋予色彩
 * c系列为透明背景，颜色有c-blue、c-blue-2、c-cyan、c-gray、c-green、c-green-2、c-purple、c-purple-2、c-red、c-red-2、c-theme、c-white、c-yellow、c-yellow-2
 * jb系列为非透明渐变色背景，颜色有pay-tag、jb-red、jb-pink、jb-yellow、jb-blue、jb-cyan、jb-green、jb-purple、jb-vip1、jb-vip2
 */
function ZbTool_user_id_to_desc($desc, $user_id) {
    // 初始化变量
    $day       = true; // 可以根据需要进行动态设置
    $uid       = true; // 可以根据需要进行动态设置
    $pay_price = true; // 可以根据需要进行动态设置
    $demo      = true; // 可以根据需要进行动态设置

    // 初始化输出变量
    $output = [];

    // 判断 uid 为 true
    if ($uid) {
        $icon   = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-tag-color"></use></svg>'; // 图标 可自行更换
        $but    = 'UID：' . esc_html($user_id);
        $class  = 'c-red';
        $output[] = '<span class="but ' . esc_attr($class) . '">' . $icon . $but . '</span>';
    }

    // 判断 day 为 true
    if ($day) {
        $icon  = ''; // 图标 如果有需要的话
        $but   = zib_get_user_join_day_desc($user_id, 'but c-cyan'); // 获取用户加入天数描述
        $class = '';
        $output[] = $but;
    }

    // 判断 pay_price 为 true
    if ($pay_price) {
        $icon   = ''; // 图标 可自行更换
        $but    = zibpay_get_user_pay_price($user_id, 'pay_price');
        $class  = 'jb-vip2';
        $output[] = '<span class="but ' . esc_attr($class) . '">总消费：' . esc_html($but) . '</span>';
    }

    // 判断 demo 为 true
    if ($demo) {
        $icon   = ''; // 图标 可自行更换
        $but    = '我是添加样式的演示~';
        $class  = 'c-purple';
        $output[] = '<span class="but ' . esc_attr($class) . '">' . esc_html($but) . '</span>';
    }

    // 将生成的内容添加到原始描述
    $desc = implode(' ', $output) . ' ' . $desc;

    return $desc;
}

// 添加过滤器
add_filter('user_page_header_desc', 'ZbTool_user_id_to_desc', 10, 2);
add_filter('author_header_identity', 'ZbTool_user_id_to_desc', 10, 2);

鼠标悬停边框美化

把下面代码放到主题设置里的自定义CSS代码里即可：

.card {
    box-shadow: 0.3em 0.3em 0.7em #00000015;
    border: rgba(0, 0, 0, .05) 0.2em solid;
    
   }
   
   .card:hover {
    border: #006fff 0.2em solid;
     transition: border 1s;
   }

侧边栏动态时间小工具

一款子比主题侧边动态时间小工具，纯时间动态，带有一些特效，非常好看，喜欢的自行部署吧。

将下面的代码放到：WP后台->>外观–>>小工具–>>自定义HTML即可

<style>
  .times {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .times2 {
    height: 100%;
    background: #fff;
  }

  .times2 svg {
    height: 100%;
    width: 100%;
    margin-bottom: -34px;
  }

  .words {
    font-size: 60px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 5px;
    stroke-dasharray: 90, 310;
    animation: drawing 8s linear infinite;
  }

  .words-1 {
    stroke: deepskyblue;
    text-shadow: 0 0 50px deepskyblue;
    animation-delay: -2s;
  }

  .words-2 {
    stroke: lightseagreen;
    text-shadow: 0 0 50px lightseagreen;
    animation-delay: -4s;
  }

  .words-3 {
    stroke: orange;
    text-shadow: 0 0 50px orange;
    animation-delay: -6s;
  }

  .words-4 {
    stroke: purple;
    text-shadow: 0 0 50px purple;
    animation-delay: -8s;
  }

  @keyframes drawing {
    100% {
      stroke-dashoffset: -400;
    }
  }
</style>

<div class="sidebox sidebox--desk">
  <div class="times">
    <div class="sidebox__content" style="padding: 0;">
      <div  style="border-radius:15px;" class="times2">
        <svg>
          <text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>
        </svg>
      </div>
    </div>
  </div>
</div>

<script>
  function showtime() {
    const now = new Date();
    let h = now.getHours();
    let m = now.getMinutes();
    let s = now.getSeconds();
    h = checktime(h);
    m = checktime(m);
    s = checktime(s);
    return `${h}:${m}:${s}`;
  }

  function checktime(x) {
    return x < 10 ? `0${x}` : x;
  }

  const texts = document.querySelectorAll("text");

  setInterval(() => {
    const time = showtime();
    texts.forEach(text => {
      text.textContent = time;
    });
  }, 1000);
</script>

1 2 3 4 5 6 7

👋 感谢您的观看！