wordpress教程-在首页添加一个多功能四栏导航模块小工具

先来看下小工具效果图：

教程开始：

• 将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
• 添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
• 我是添加在首页顶部全宽度
• 修改代码中的链接以及文字改为自己的就好
• 将下面提供的二个 css 和 一个js 文件新建上传到你自己服务器，然后再下面代码填写对应路径

代码文件：

1. 新建dhmk.css文件：

.ads-box{
  margin-top:25px;
}

.home-first {
  margin-bottom: 10px
}

.home-first a {
  text-decoration: none;
}

@media screen and (max-width: 768px){
    .footer-navi .container .bands{padding:0 16px}
    .home-first .hf-widget-4 .hf-widget-content ul li{padding-left:12px;}
}

.home-first .container {
  padding-top: 0;
  padding-right: 15px;
}

.home-first .vitara_slide_in {
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 3px
}

@media (min-width:1024px) {
  .home-first .vitara_slide_in {
    margin-top: 0;
    margin-bottom: 0
  }
}

.home-first .h-images {
  box-sizing: content-box;
  margin: 0;
  padding: 0
}

.home-first .h-images:after,.home-first .h-images:before {
  clear: both;
  display: block;
  visibility: none;
  height: 0;
  content: "";
  line-height: 0
}

.home-first .h-images:after {
  display: block;
  margin: 0 -15px;
  height: 0;
  border-bottom: 15px solid #f2f2f2;
  content: ''
}

@media (min-width:768px) {
  .home-first .h-images:after {
    display: none
  }
}

@media (min-width:768px) {
  .home-first .h-images {
    display: box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-content: space-between
  }
}

@media (min-width:1024px) {
  .home-first .h-images {
    width: 25%
  }
}

.home-first .h-images .item-tuwen {
  float: left;
  padding: 0 6.5px;
  width: 50%
}

@media (min-width:1024px) {
  .home-first .h-images .item-tuwen {
    float: none
  }
}

@media (min-width:1024px) {
  .home-first .h-images {
    display: block;
    box-sizing: border-box;
    padding: 0 7.3333px
  }

  .home-first .h-images .item-tuwen {
    padding: 0;
    width: auto
  }
}

.home-first .item-tuwen {
  margin-bottom: 15px
}

@media (min-width:768px) {
  .home-first .item-tuwen {
    margin-bottom: 13px
  }
}

.home-first .item-tuwen a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px
}

.home-first .item-tuwen a .thumb {
  padding-top: 57%;
  transition: all .2s;
  transform-origin: center
}

.home-first .item-tuwen a strong {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: block;
  padding: .4em .8em .6em;
  background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);
  background-repeat: repeat-x;
  box-shadow: 0 -7px 15px rgba(0,0,0,.2);
  color: #fff;
  letter-spacing: .5px;
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.3
}

@media (min-width:768px) {
  .home-first .item-tuwen a strong {
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1.4
  }
  
}


.home-first .hf-widget {
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 14px 17px 0;
  border: 1px solid #f2f2f2;
  background: #fff;
  box-shadow: 8px 8px 9pt #e1e1e1
}

@media (min-width:768px) {
  .home-first .hf-widget {
    overflow: hidden;
    height: 135px
  }
  
}

@media (min-width:1024px) {
  .home-first .hf-widget {
    margin-bottom: 0
  }
}

.home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before {
  margin: 0
}

.home-first .hf-widget .hf-widget-title {
  margin-bottom: 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #d9d9d9;
  color: #383838;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  margin-block-start: auto;
}

.home-first .hf-widget .hf-widget-title a {
  color: #383838
}

.home-first .hf-widget .hf-widget-title>i {
  margin-right: 2px;
  color: #f35543
}

.home-first .hf-widget .hf-widget-title span {
  margin-left: 10px;
  color: #a7a7a7;
  font-weight: 400;
  font-size: 9pt;
  line-height: 20px
}

@media (min-width:1024px) {
  .home-first .hf-widget .hf-widget-title span {
    display: none
  }
}

@media (min-width:1330px) {
  .home-first .hf-widget .hf-widget-title span {
    display: inline
  }
}



.home-first .hf-widget .hf-tags {
  margin-bottom: -10px
}

@media (min-width:768px) {
  .home-first .hf-widget .hf-tags {
    overflow: hidden;
    height: 4pc
  }
}

.home-first .hf-widget .hf-tags a {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0 5px;
  height: 22px;
  border-radius: 2px;
  background: #f9f9f9;
  color: #888;
  white-space: nowrap;
  font-size: 9pt;
  line-height: 22px;
  word-break: break-all
}

.home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover {
  background: #4e6ef2;
  color: #fff
}

.home-first .hf-widget-4 .hf-widget-content {
  color: #888;
  font-size: 14px
}

.home-first .hf-widget-4 .hf-widget-content a {
  color: #888
}

.home-first .hf-widget-4 .hf-widget-content a:hover {
  color: #4e6ef2
}

.home-first .hf-widget-4 .hf-widget-content h3 {
  overflow: hidden;
  height: 22px;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  margin: 5px 5px 10px 5px;
}

.home-first .hf-widget-4 .hf-widget-content em {
  float: right;
  padding: 0 5px;
  height: 22px;
  border-radius: 2px;
  background: #4e6ef2;
  color: #ffffff;
  font-style: normal;
  font-size: 9pt;
  line-height: 22px
}

.home-first .hf-widget-4 .hf-widget-content ul {
  background: #fff;
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.home-first .hf-widget-4 .hf-widget-content ul li {
  margin-bottom: 5px
}

.home-first .hf-widget-4 .hf-widget-content ul li:last-child {
  margin-bottom: 0
}

.home-first .hf-widget-1 .hf-widget-content a {
  color: #888
}

.home-first .hf-widget-1 .hf-widget-content a:hover {
  color: #4e6ef2
}

.home-first .hf-widget-1 .hf-widget-content li {
  float: left;
  box-sizing: border-box;
  width: 25%;
  text-align: center;
  font-size: 9pt
}

.home-first .hf-widget-1 .hf-widget-content li .thumb {
  margin: 0 auto 4px;
  padding-top: 36px;
  width: 36px
}

.home-first .hf-widget-1 .hf-widget-content li span {
  display: block;
  overflow: hidden;
  height: 1pc;
  line-height: 1pc
}

.home-first .hf-widget-1 .hf-widget-content .scroll-h {
  margin: 0 -10px
}

.home-first .scroll-h {
  position: relative;
  height: 56px
}

.home-first .scroll-h ul {
  list-style:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all .2s;
  padding-inline-start: 0px;
  margin-block-start: 0px;
}

.home-first .scroll-h ul:after,.home-first .scroll-h ul:before {
  clear: both;
  display: block;
  visibility: none;
  height: 0;
  content: "";
  line-height: 0
}

.home-first .scroll-h .holdon {
  position: absolute;
  top: 0;
  left: 100%
}

.home-first .scroll-h .holdon-prev {
  left: -100%
}

.home-first .hf-widget-hot-cats .hhicon {
  display: inline-block;
  margin-bottom: 5px;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: #e8fbff;
  color: #448aff;
  text-align: center;
  font-size: 20px;
  line-height: 36px
}

.home-first .hf-widget-hot-cats .scroll-h li a {
  display: block
}

.home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon {
  background: #4e6ef2;
  color: #fff
}

.home-first .thumb {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 66.7%;
  width: 100%;
  height: 0;
  background-color: transparent;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .2s
}

.home-first i {
  font-weight: 300
}

@media screen and (max-width:720px) {
  .home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content {
    margin: 1pc -10px
  }
}

.container {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%
}

@media (min-width:768px) {
  .container {
    overflow: visible;
    max-width: 8in
  }
}

@media (min-width:1024px) {
  .container {
    max-width: 1300px
  }
}

.container:after,.container:before {
  clear: both;
  display: block;
  visibility: none;
  height: 0;
  content: "";
  line-height: 0
}

.container .ron {
  margin: 0 -7.3333px
}

.container .col-1-4,.container .col-2-4,.container .col-3-4 {
  float: left;
  box-sizing: border-box;
  padding: 0 7.3333px;
  width: 100%
}

@media (min-width:768px) {
  .container .col-1-4 {
    width: 50%
  }
}

@media (min-width:1024px) {
  .container .col-1-4 {
    width: 25%
  }
}

@media (min-width:768px) {
  .container .col-2-4 {
    width: 100%
  }
}

@media (min-width:1024px) {
  .container .col-2-4 {
    padding-right: 8px;
    width: 50%
  }
}

@media (min-width:768px) {
  .container .col-3-4 {
    width: 100%
  }
}

@media (min-width:1024px) {
  .container .col-3-4 {
    padding-right: 8.6666px;
    width: 75%
  }
}

.home-first .hf-widget .hf-widget-title .pages {
  float: right;
  padding-top: 2px
}

.home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev {
  float: left;
  margin: 0;
  padding: 0 2px;
  height: 1pc;
  border: 1px solid #eee;
  color: #ccc;
  font-size: 9px;
  line-height: 15px;
  cursor: pointer
}

.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover {
  color: #f35543
}

.home-first .hf-widget .hf-widget-title .pages .prev {
  border-right: none
}

.ydicon{
       display: initial;
       width: 0.8em; 
       height: 0.8em;
       vertical-align: -8.5em;
       fill: currentColor;
       overflow: hidden;
       font-size: 26px;  /*澶у皬*/
       vertical-align: middle;
     transform-origin: 20px 20px;
    }
.kuai{
       display: initial;
       width: 1em; 
       height: 1em;
       vertical-align: -8.5em;
       fill: currentColor;
       overflow: hidden;
       font-size: 40.5px;  /*澶у皬*/
       vertical-align: middle;
     transform-origin: 20px 20px;
    }

2. 新建iconfontdhmk.css文件