WordPress网站主题首页添加四格小工具教程

效果预览

第一步：引入JS

1. <script src="https://use.fontawesome.com/865314f53c.js"></script>

第二步：将下面代码放到需要展示的位置

1. <div class="section">
2. <div class="home-first">
3. <div class="container hide_sm">
4. <div class="col-1-4">
5. <div class="hf-widget hf-widget-1 hf-widget-software">
6. <h3 class="hf-widget-title">
7. <i class="fa fa-cloud"></i>
8. <a href="#" target="_blank">云产品</a>
9. <span>云服务器等云产品推荐</span>
10. </h3>
11. <div class="hf-widget-content">
12. <div class="scroll-h">
13. <ul>
14. <li>
15. <a href="#" rel="external nofollow" target="_blank">
16. <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H026cdceabc1942e1b82b1eb2cd5b9e41P.png)"></i>
17. <span>阿里云</span></a>
18. </li>
19. <li>
20. <a href="#" target="_blank">
21. <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H006240f97bff40f5aea223eb51b33c3dq.png)"></i>
22. <span>腾讯云</span></a>
23. </li>
24. <li>
25. <a href="#" target="_blank">
26. <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H2da200a36ce2401595f8e03f8c750deeT.png)"></i>
27. <span>企业云</span></a>
28. </li>
29. <li>
30. <a href="#" target="_blank">
31. <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H128bb4d1c77d4f6f9032b934a6a234beD.png)"></i>
32. <span>香港云</span></a>
33. </li>
34. </div>
35. </div>
36. </div>
37. </div>
38. <div class="col-1-4 sxweb">
39. <div class="hf-widget hf-widget-2">
40. <h3 class="hf-widget-title">
41. <i class="fa fa-tint"></i>
42. <a href="#" target="_blank">看热门</a>
43. <span>主题模板库精品推荐</span></h3>
44. <div class="hf-widget-content">
45. <div class="no-scroll hf-tags">
46. <a class="style_orange" href="#" target="_blank">
47. <span>RiPro美化</span></a>
48. <a class="" href="#" target="_blank">
49. <span>wordpress教程</span></a>
50. <a class="" href="#" target="_blank">
51. <span>源码</span></a>
52. <a class="" href="#" target="_blank">
53. <span>样机</span></a>
54. <a class="" href="#" target="_blank">
55. <span>配色神器</span></a>
56. <a class="" href="#" target="_blank">
57. <span>本站服务</span></a>
58. <a class="" href="#" target="_blank">
59. <span>服务器特惠</span></a>
60. </div>
61. </div>
62. </div>
63. </div>
64. <div class="col-1-4 sxweb">
65. <div class="hf-widget hf-widget-1 hf-widget-hot-cats">
66. <h3 class="hf-widget-title">
67. <i class="fa fa-dropbox"></i>
68. <a href="#" target="_blank">热门专区</a>
69. <span>推荐设计热点</span></h3>
70. <div class="hf-widget-content">
71. <div class="icon-b">
72. <ul>
73. <li>
74. <a href="#" target="_blank">
75. <i class="fa fa-bookmark"></i>
76. <span>设计软件</span></a>
77. </li>
78. <li>
79. <a href="#" target="_blank">
80. <i class="fa fa-paint-brush"></i>
81. <span>素材专题</span></a>
82. </li>
83. <li>
84. <a href="#" target="_blank">
85. <i class="fa fa-graduation-cap"></i>
86. <span>设计教程</span></a>
87. </li>
88. <li>
89. <a href="#" target="_blank">
90. <i class="fa fa-pencil-square-o"></i>
91. <span>设计自检</span></a>
92. </li>
93. </ul>
94. </div>
95. </div>
96. </div>
97. </div>
98. <div class="col-1-4 sxweb">
99. <div class="hf-widget hf-widget-4">
100. <h3 class="hf-widget-title">
101. <i class="fa fa-book"></i>
102. <a href="#" target="_blank">最新活动</a>
103. <span>免费会员享福利</span>
104. </h3>
105. <div class="hf-widget-content">
106. <div class="scroll-h">
107. <ul>
108. <li>
109. <h3>
110. <a href="#" target="_blank">
111. <i class="icon-time"></i>
112. <span>RiPro美化服务火热售卖中</span>
113. <em>网站美化</em></a>
114. </h3>
115. </li>
116. <li>
117. <h3>
118. <a href="#" target="_blank">
119. <i class="icon-time"></i>
120. <span>关于本站积分付费阅读获取内容说明</span>
121. <em>积分说明</em></a>
122. </h3>
123. </li>
124. </ul>
125. </div>
126. </div>
127. </div>
128. </div>
129. </div>
130. </div>
131. </div>

第三步：CSS美化代码

1. <style>
2. .hide_sm{display: flex;}
3. .container .col-1-4{float: left;box-sizing: border-box;margin-right: 7.3333px;width: 100%;}
4. .container .col-1-4:last-child{margin-right: 0;}
5. @media (min-width:768px){.container .col-1-4{width: 50%}}
6. @media (min-width:1024px){.container .col-1-4{width: 25%}}
7. @media (min-width:1024px){.ripro-dark .home-first{background: #232425;}}
8. @media (min-width:768px){.home-first .h-images:after{display: none}}
9. @media (min-width:768px){.home-first .h-images{display: box;display: -ms-flexbox;display: flex;width: 100%;justify-content: space-between}}
10. @media (min-width:1024px){.home-first .h-images{width: 25%}}
11. .home-first .h-images .item-tuwen{float: left;padding: 0 6.5px;width: 50%}
12. @media (min-width:1024px){.home-first .h-images .item-tuwen{float: none}}
13. @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}}
14. .home-first .item-tuwen{margin-bottom: 15px}
15. @media (min-width:768px){.home-first .item-tuwen{margin-bottom: 13px}}
16. .home-first .item-tuwen a{position: relative;display: block;overflow: hidden;border-radius: 3px}
17. .home-first .item-tuwen a .thumb{padding-top: 57%;transition: all .2s;transform-origin: center}
18. .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}
19. @media (min-width:768px){.home-first .item-tuwen a strong{letter-spacing: 1px;font-size: 14px;line-height: 1.4}}
20. .home-first .hf-widget{box-sizing: border-box;padding: 14px 17px 0;border: 1px solid #f2f2f2;background: #fff;box-shadow: 0 34px 20px -24px rgba(220, 220, 220, 0.18);border-radius: 3px;}
21. .ripro-dark .home-first .hf-widget{border: 1px solid #2b2b2b;background: #232425;box-shadow: 8px 8px 9pt #212121;}
22. @media (min-width:768px){.home-first .hf-widget{overflow: hidden;height: 135px}}
23. @media (min-width:1024px){.home-first .hf-widget{margin-bottom: 0}}
24. .home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before{margin: 0}
25. .home-first .hf-widget .hf-widget-title{margin-bottom: 14px;padding: 0 0 10px;border-bottom: 1px solid #f2f2f2;color: #383838;letter-spacing: 1px;font-weight: 700;font-size: 15px;line-height: 20px;margin-bottom: 10px;}
26. .ripro-dark .home-first .hf-widget .hf-widget-title{border-bottom: 1px solid #696969;}
27. .ripro-dark .home-first .hf-widget .hf-widget-title a{color: #ccc;}
28. .home-first .hf-widget .hf-widget-title>i{margin-right: 2px;color: #448aff;}
29. .ripro-dark .home-first .hf-widget .hf-widget-title>i{margin-right: 2px;color: #ffa363}
30. .home-first .hf-widget .hf-widget-title span{margin-left: 10px;color: #a7a7a7;font-weight: 400;font-size: 9pt;line-height: 20px}
31. @media (min-width:1024px){.home-first .hf-widget .hf-widget-title span{display: none}}
32. @media (min-width:1330px){.home-first .hf-widget .hf-widget-title span{display: inline}}
33. .home-first .hf-widget .hf-widget-title .pages{float: right;padding-top: 2px}
34. .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}
35. .home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover{color: #448aff}
36. .home-first .hf-widget .hf-widget-title .pages .prev{border-right: none}
37. .home-first .hf-widget .hf-tags{margin-bottom: -10px}
38. @media (min-width:768px){.home-first .hf-widget .hf-tags{overflow: hidden;height: 4pc}}
39. .home-first .hf-widget .hf-tags a{display: inline-block;margin: 0 5px 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}
40. .home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover{background: #448aff;color: #fff;}
41. .ripro-dark .home-first .hf-widget .hf-tags a{background: #2c2e2f;}
42. .home-first .hf-widget-4 .hf-widget-content{color: #888;font-size: 14px}
43. .home-first .hf-widget-4 .hf-widget-content a{color: #888}
44. .home-first .hf-widget-4 .hf-widget-content a:hover{color: #448aff;}
45. .home-first .hf-widget-4 .hf-widget-content h3{overflow: hidden;height: 22px;font-weight: 400;font-size: 13px;line-height: 22px;margin: 0 0 10px;}
46. .home-first .hf-widget-4 .hf-widget-content em{float: right;padding: 0 5px;height: 22px;border-radius: 2px;background: #fff5ef;color: #ff5c00;font-style: normal;font-size: 9pt;line-height: 22px}
47. .home-first .hf-widget-4 .hf-widget-content ul li{margin-bottom: 5px}
48. .home-first .hf-widget-4 .hf-widget-content ul li:last-child{margin-bottom: 0}
49. .home-first .hf-widget-1 .hf-widget-content a{color: #888}
50. .ripro-dark .home-first .hf-widget-1 .hf-widget-content a{color: #ccc}
51. .home-first .hf-widget-1 .hf-widget-content a:hover{color: #69a1ff;}
52. .home-first .hf-widget-1 .hf-widget-content li{float: left;box-sizing: border-box;padding: 0 10px;width: 25%;text-align: center;font-size: 9pt}
53. .home-first .hf-widget-1 .hf-widget-content li .thumb{margin: 0 auto 4px;padding-top: 36px;width: 36px}
54. .home-first .hf-widget-1 .hf-widget-content li span{display: block; height: 16px; line-height: 16px; overflow: hidden;}
55. .home-first .hf-widget-1 .hf-widget-content .scroll-h{margin: 0 -10px;}
56. .home-first .scroll-h{position: relative;overflow: hidden;height: 56px;}
57. .home-first .scroll-h ul{list-style: none;position: absolute;top: 0;left: 0;width: 100%;transition: all .2s; margin:0;padding-left:0;}
58. .home-first .scroll-h ul:after,.home-first .scroll-h ul:before{clear: both;display: block;visibility: none;height: 0;content: "";line-height: 0}
59. .home-first .scroll-h .holdon{position: absolute;top: 0;left: 100%}
60. .home-first .scroll-h .holdon-prev{left: -100%}
61. .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;}
62. .ripro-dark .home-first .hf-widget-hot-cats .hhicon{background: #2c2e2f;color: #ffa363;}
63. .home-first .hf-widget-hot-cats .scroll-h li a{display: block}
64. .home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon{background: #448aff;color: #fff;}
65. .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}
66. .home-first i{font-weight: 300}
67. @media screen and (max-width:720px){.home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content{margin: 1pc -10px}}
68. @media (max-width: 768px){.sxweb {display:none;}}
69. .icon-b i{
70. display: inline-block;
71. margin-bottom: 5px;
72. width: 36px;
73. height: 36px;
74. border-radius: 100%;
75. background: #e8fbff;
76. color: #448aff;
77. text-align: center;
78. font-size: 20px;
79. line-height: 36px;
80. }
81. .icon-b i:hover{
82. background: #448aff;
83. color: #fff;
84. }
85. /*b2主题隐藏右下角广告角标，其他模板可删除*/
86. .ads-box img{
87. width:138px;
88. border-radius:0;
89. }
90. .ads-tips{
91. display:none;
92. }
93. .ad-Wrap {
94. height:88px;
95. margin:0 auto;
96. margin-top:-20px;
97. background-color: transparent;
98. }
99. </style>