WordPress页面美化/添加会员介绍页面/文章内页添加FAQ常见问题

添加会员介绍页面

新建一个vip.php文件放到你正在使用的主题根目录的页面文件夹里（一般都是 pages文件夹）把下面代码放入vip.php文件中（或者下载已打包代码和素材图附件）。

<?php
/*
Template Name: VIP介绍-利熙博客
*/
?>
<?php get_header(); ?>
<div class="vip-banner">
  <div class="vipbj">
    <h2>开通VIP独享海量资源特权</h2>
    <p>现在努力只为 不再仰望大神的后背！</p>
    <a href="#" title="" target="_blank">开通会员</a> </div>
</div>
<div class="module-line"> <span class="arrow left-arrow"></span> <span class="text">会员尊享6+项特权</span> <span class="arrow right-arrow"></span> </div>
<ul class="vip-slogan">
  <li class="vip-slogan-box"><i class="fa fa-pie-chart"></i>
    <div class="vip-slogan-text">
      <p>1000+资源，无限量下载</p>
      <p>真正的海量，无套路，诚意满满</p>
    </div>
  </li>
  <li class="vip-slogan-box"><i class="fa fa-jsfiddle " style="font-size: 60px"></i>
    <div class="vip-slogan-text">
      <p>5m/s速度，云网盘极速下载</p>
      <p>本地无需备份，即需即下，无需等待</p>
    </div>
  </li>
  <li class="vip-slogan-box"><i class="fa fa-gratipay" style="font-size: 55px"></i>
    <div class="vip-slogan-text">
      <p>看上喜欢的，加入收藏</p>
      <p>文件夹式收藏，方便快捷，精确查到</p>
    </div>
  </li>
  <li class="vip-slogan-box"><i class="fa fa-vine"></i>
    <div class="vip-slogan-text">
      <p>50+原创精品，专享下载</p>
      <p>严格审核原创版权作品，VIP任性下载！</p>
    </div>
  </li>
  <li class="vip-slogan-box"><i class="fa fa-weixin"></i>
    <div class="vip-slogan-text">
      <p>全体在线客服，技术支持</p>
      <p>尊贵特权，极速响应，为你提供保障！</p>
    </div>
  </li>
  <li class="vip-slogan-box"><i class="fa fa-vimeo-square"></i>
    <div class="vip-slogan-text">
      <p>VIP标示，彰显尊贵身份</p>
      <p>点亮尊贵身份标示，散发与众不同气质</p>
    </div>
  </li>
</ul>
<div class="container">
  <article class="single-content">
    <div class="module-line"> <span class="arrow left-arrow"></span> <span class="text">VIP会员资费介绍</span> <span class="arrow right-arrow"></span>
      <p><div class="vip-desc">本站资源分为共享免费资源，会员专享资源，专属会员折扣，永久会员免费专享特权。</div>
    </div>
    <div class="container">
      <div class="vip-row vip-block-wrapper" style="padding-bottom: 0; padding-top: 30px; margin-bottom: 0; "> 
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> <img src="https://ae01.alicdn.com/kf/Ufe193c5226bb4bb0b0e3d8e0b22695ddW.png"> </div>
            <h3 class="content0-title">30天</h3>
            <p class="vip-home-price">0.00<i>令牌</i></p>
            <p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
            <a href="#">
            <p class="vip-bt">开通</p>
            </a> </div>
        </div>
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> <img src="https://ae01.alicdn.com/kf/Ufe193c5226bb4bb0b0e3d8e0b22695ddW.png"> </div>
            <h3 class="content0-title">365天</h3>
            <p class="vip-home-price">0.00<i>令牌</i></p>
            <p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
            <a href="#">
            <p class="vip-bt">开通</p>
            </a> </div>
        </div>
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> <img src="https://ae01.alicdn.com/kf/Ufe193c5226bb4bb0b0e3d8e0b22695ddW.png"> </div>
            <h3 class="content0-title">永久</h3>
            <p class="vip-home-price">0.00<i>令牌</i></p>
            <p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
			<p>介绍</p>
            <a href="#">
            <p class="vip-bt">开通</p>
            </a> </div>
        </div>
      </div>
    </div>
  </article>
</div>
<div style="clear:both"></div>
<style type="text/css">
.site-content{ padding:0px;}
.term-bar{ display:none;}
</style>
<?php get_footer(); ?>

添加vip页面的css

把下面的代码放置你在主题css页面的尾部即可（或者下载已打包代码和素材图附件）。

.vip-banner .vipbj h2 {
	text-align: center;
	font-size: 40px;
	color: #fff
}
.vip-banner .vipbj p {
	text-align: center;
	font-size: 18px;
	color: #fff
}
.vip-banner {
	background: url(https://ae01.alicdn.com/kf/Hcc81845f721043bd9a56dea72d07c5719.jpg) no-repeat center;
	position: relative;
	width: 100%;
	height: 246px;
	position: relative;
}
.vip-banner-bg {
	background-position: center;
	background-size: cover;
	height: 100%
}
.vip-banner .vipbj {
	position: absolute;
	width: 100%;
	top: 20%
}
.vip-slogan {
	box-shadow: 0 2px 10px rgba(0,0,0,.02);
	border-radius: 5px;
	height: 280px;
	width: 1200px;
	background: #fff;
	box-sizing: border-box;
	font-size: 0;
	margin: 40px auto auto auto
}
.vip-slogan-box:nth-of-type(-n+3) {
	border-bottom: 0
}
.vip-slogan-box {
	padding-top: 20px;
	display: inline-block;
	border: 1px solid #f4f4f4;
	height: 50%;
	width: 373.2px;
	box-sizing: border-box;
	vertical-align: middle
}
.vip-slogan-box i {
	width: 100px;
	line-height: 100px;
	display: inline-block;
	background-image: linear-gradient(90deg, #ed1c24 0, #fb8f02 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 45px;
	text-align: center;
	vertical-align: middle
}
.vip-slogan-text {
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
	color: #898989
}
.vip-slogan-text p:first-child {
	font-size: 18px;
	color: #575959
}
.container-vip {
	width: 1250px
}
.vip-content {
	text-align: center;
	margin-bottom: 50px
}

.module-line {
	width: 100%;
	text-align: center;
	margin-top: 40px
}
.module-line .left-arrow {
	background: url(https://ae01.alicdn.com/kf/H56cc5a89dcab4345ae3dbf9d84ca6781s.png)/* vip-left.png */
}
.module-line .right-arrow {
	background: url(https://ae01.alicdn.com/kf/He81bdbc887a647e99585d0514ff473f4Z.png)/* vip-right.png */
}
.module-line .arrow {
	width: 84px;
	height: 16px
}
.module-line .text {
	font-size: 26px;
	color: #4c4c4c;
	margin: 0 10px
}
.module-line span {
	display: inline-block;
*display:inline;
*zoom:1;
}

.vip-banner .vipbj>a {
	width: 170px;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	border-radius: 25px;
	background-image: linear-gradient(90deg, #ed1c24 0, #fb8f02 100%);
	color: #fff;
	margin: 0 auto;
	margin-top: 0;
	display: block;
	margin-top: 20px
}

.vip-row {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
    zoom:1}

.vip-row:after,.vip-row:before {
    display: table;
    content: ''
}

.vip-block-wrapper {
    position: relative;
    display: flex;
    padding: 20px 0;
    height: 100%;
    justify-content: center
}

.vip-block-wrapper .vip-block-item {
    display: block;
    box-sizing: border-box;
    padding: 20px 40px;
    width: 33.333%;
    text-align: center;
}

.home-vipbox {
    padding: 1px 0px 38px 0px;
    border-radius: 8px;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.home-vipbox:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(213,213,213,0.4);
}

p.vip-bt {
    color: #fff;
    margin: 0 auto;
    width: 100px;
    padding: 8px 0;
    border-radius: 26px;
}

.vip-block-item a p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.vip-block-item:nth-child(n) a:hover p {
    box-shadow: 0 10px 20px rgba(245,47,62,.4);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    background-color: #f52f3e;
    background-repeat: repeat-y;
    background-image: -moz-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: -webkit-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: -o-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: linear-gradient(left,#f52f3e,#ff4c22);
}

.vip-block-item:nth-child(1) >.home-vipbox {
    /* outline:1px solid rgba(245,210,47,0.24); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(1) h3 {
    color: #f5a02f;
    text-shadow: 0 5px 6px #ffe1b9;
}

.vip-block-item:nth-child(1) .vip-bt {
    background-image: -webkit-linear-gradient(left,#021b31,#001529);
}

.vip-block-item:nth-child(2) >.home-vipbox {
    /* outline:1px solid rgba(47,146,245,0.15); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(2) h3 {
    color: #1890ff;
    text-shadow: 0 5px 6px rgba(24,144,255,0.40);
}

.vip-block-item:nth-child(2) .vip-bt {
    background-image: -webkit-linear-gradient(left,#1390de,#2f9af5);
}

.vip-block-item:nth-child(3) >.home-vipbox {
    /* outline:1px solid rgba(245,47,47,0.2); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(3) h3 {
    color: #fd3d00;
    text-shadow: 0 5px 6px #ffb9b9;
}

.vip-block-item:nth-child(3) .vip-bt {
    background-image: -webkit-linear-gradient(left,#f1bc37,#fadb37);
}

p.vip-home-price {
    position: relative;
    font-size: 1.875rem;
    font-weight: bold;
    width: 200px;
    margin: 15px auto;
}

p.vip-home-price i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .vip-block-wrapper {
        display:block
    }

    .vip-block-wrapper .vip-block-item {
        float: left;
        width: 100%;
        padding: 10px 0;
    }
}

.vip-block-wrapper .vip-block-item .icon {
    width: 20%;
    padding-top: 20px;
    margin: 0 auto;
}

.vip-block-wrapper .vip-block-item img {
    width: 100%;
    height: 60px;
}

.vip-block-wrapper .vip-block-item .content0-title {
    padding: 0;
    font-size: 1.875rem;
}

使用方法

登录后台>新建页面>选择页面模板“VIP介绍”发布即可。

文章内页添加FAQ常见问题

1.首先找到你主题根目录下的”footer.php”文件，并在</body>前添加即下面的代码（或者下载已打包代码和素材图附件）。

<script>
  var ndt = $("#help dt");
  var ndd = $("#help dd");
  ndd.eq(0).show();
  ndt.click(function () {
    ndd.hide();
    $(this).next().show();
  });
</script>

2.找到你主题根目录的文章页文件在合适的位置添加以下代码。

<div id="help" class="m main">
  <h2 class="mt mt20">常见问题FAQ</h2>
  <div class="mb">
    <dl>
      <dt><i></i>免费下载或者VIP会员专享资源能否直接商用？
</dt>
      <dd style="display: block;"><i></i>本站所有资源版权均属于互联网转载，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。</dd>
    </dl>
    <dl>
      <dt><i></i>我不会搭建怎么办？</dt>
      <dd style="display: none;"><i></i>利熙博客(技术顾问): 如果您是本站“会员”,我们将提供一站式服务,免费搭建500次!!!右边添加微信技术进行搭建。</dd>
    </dl>
    <dl>
      <dt><i></i>找不到我想要的东西怎么办？</dt>
      <dd style="display: none;"><i></i>对于永久会员来说,提出任何源码我们将在1分钟-1小时处理需求!!!并提供完整包.如果是普通会员,我们将在3小时内处理，按照当时情况定夺。游客无任何权利</dd>
<dt><i></i>找不到我想要的东西怎么办？</dt>
      <dd style="display: none;"><i></i>对于永久会员来说,提出任何源码我们将在1分钟-1小时处理需求!!!并提供完整包.如果是普通会员,我们将在3小时内处理，按照当时情况定夺。游客无任何权利</dd>
    </dl>
</div>

3.把下面的代码放置你在主题css页面的尾部即可（或者下载已打包代码和素材图附件）。

#help h2,#down h2{ font-size:18px; line-height:54px; color:#323232; border-bottom:2px solid #4f8af1; width:150px; font-weight:normal;}
#help dt{cursor:pointer; color:#353535; font-size:18px;margin-bottom:20px; }
#help dd{ display:none;color:#767676; font-size:14px; padding:10px; border-radius:5px; background:#f0f0f0; margin-bottom:20px;margin-bottom:20px; line-height:25px; letter-spacing:1px;}
#help dt,#help dd{ margin-left:40px; position:relative;}
#help dt i,#help dd i{background:url(https://ae01.alicdn.com/kf/Hd0ce517e56c6434c9d32ee39a00a0ebfn.png) no-repeat; width:30px; height:30px; display:block; position:absolute; left:-40px; top:0px;}
#help dd i{background-position: 0 -35px;}

这样添加文章内页常见问题就结束了。