wordpress子比主题便捷模块-小工具

预览图

前言

这个模块集成了便民服务、广告、快捷导航、最新活动，非常方便简约，有兴趣的可以跟随教程做一个，有能力的也可以自己修改一下，亲测好用！

教程

1.引入需要的css、js

• 来到你的网站根目录   进入   /wp-content/themes/zibll  目录找到 主题的头部文件 header.php 并打开。
• 在<?php wp_head();?>前面加上下方代码（如下图所示），并保存。

css、js代码

<link rel="stylesheet" href="https://tc.cxgreat.cn/huakuai.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2126430_2sho50bri4v.css">
<script type='text/javascript' src='https://at.alicdn.com/t/font_2126430_2sho50bri4v.js'></script>

2.添加小工具

• 进入后台，找到  外观—自定义

• 点击小工具

• 点击 {论坛}首页-顶部全部宽度

• 点击添加小工具  下滑找到 自定义html

• 点击展开刚添加的自定义html，将下方代码填入

• 或者根据自己的需求放到需要的位置也可以，然后自己改一下代码中的https://www.www.yjjmt.com替换成自己的地址即可。

html代码

<!--
将下方代码复制粘贴到你需要的地方
链接换成自己的
复制开始
 -->
<div class="ads-box">
  <div class="home-first">
    <div class="container hide_sm">
      <div class="row ron">
        <div class="col-1-4">
          <div class="hf-widget hf-widget-1 hf-widget-software">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-huiyuan"></use>
              </svg>
              <a href="https://www.yjjmt.com/"
                target="_blank">会员服务</a><span>会员专属贴心服务</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-dingyue"></use>
                      </svg><span>升级会员</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                      </svg><span>消息订单</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-zhinan"></use>
                      </svg><span>热门标签</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-tougaofabu"></use>
                      </svg><span>投稿发文</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-2">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-tishi"></use>
              </svg>
              <a href="https://www.yjjmt.com/" target="_blank">广告服务</a><span>精品免费广告位</span>
            </h3>
            <div class="hf-widget-content">
              <div class="no-scroll hf-tags">
                <a class="style_orange" href="https://www.yjjmt.com/" target="_blank"><span>域名出售</span></a>
                <a class=""
                  href="https://www.yjjmt.com/"
                  target="_blank"><span>特价服务器</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-1 hf-widget-hot-cats">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
              </svg>
              <a href="https://www.yjjmt.com/" target="_blank">快捷导航</a><span>精品站长资源教程</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li>
                  <li><a href="https://www.yjjmt.com/" target="_blank">
                      <i class="hhicon iconfont icon-moban"></i><span>免费主题</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-4">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-dongtai"></use>
              </svg>
              <a href="https://www.yjjmt.com/" target="_blank">最新活动</a><span>注册会员享福利</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li>
                    <h3><a href="https://www.yjjmt.com/" target="_blank"> <i
                          class="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a>
                    </h3>
                  </li>
                  <li>
                    <h3><a href="https://www.yjjmt.com/" target="_blank"> <i
                          class="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a>
                    </h3>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--
复制结束
 -->

好了本次教程到此结束，喜欢的朋友们记得分享，点赞，收藏。