分享部分wordpress增强文本小工具实例代码

Partner    2020-03-4    298℃   本文共4144个字,预计阅读时间需要11分钟。

分享部分wordpress增强文本小工具实例代码

wordpress增强文本小工具支持运行 PHP 代码,打开主题根目录下的【functions.php】文件,在最后一个}前添加代码:

第一个:

<div class="grid-widget">
    <!-- 链接 A -->
    <a class="gw-link gwa" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-home"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块一</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <!-- 链接 B -->
    <a class="gw-link gwb" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-skyatlas"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块二</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <!-- 链接 C -->
    <a class="gw-link gwc" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-picture"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块三</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <!-- 链接 D -->
    <a class="gw-link gwd" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-baidu"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块四</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <!-- 链接 E -->
    <a class="gw-link gwe" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-qr-code"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块五</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <!-- 链接 F -->
    <a class="gw-link gwf" href="链接" rel="bookmark">
        <!-- <div class="qw-icon"><i class="be be-display"></i></div> -->
        <div class="qw-icon"><img src="/"></div>
        <h4 class="qw-title">模块六</h4>
        <div class="qw-title">第一行文字</div>
        <div class="qw-title">第二行文字</div>
    </a>
    <div class="clear"></div>
</div>
 
<style>
    .grid-widget {
        margin: 0 -6px 0 0;
    }
     
    .grid-widget a {
        position: relative;
        background: #fff;
        float: left;
        width: 16.66666666666667%;
        color: #000;
        text-align: center;
        margin: 0 -1px -1px 0;
        padding: 20px 10px 15px 10px;
        border: 1px solid #ddd;
        transition-duration: .5s;
    }
     
    .grid-widget a:hover {
        background: #c40000;
        color: #fff;
        border: 1px solid #c40000;
    }
     
    .grid-widget a:hover .qw-icon .be {
        color: #fff;
    }
     
    .qw-icon .be{
        font-size: 80px !important;
        color: #c40000;
        line-height: 80px;
        margin: 0 0 20px 0;
        display: block;
    }
     
    @media screen and (max-width: 900px) {
        .grid-widget a {
            width: 33.333333333333333%;
        }
    }
     
    @media screen and (max-width: 700px) {
        .grid-widget a {
            width: 50%;
        }
    }
     
    @media screen and (max-width: 400px) {
        .grid-widget a {
            width: 100%;
        }
    }
</style>

预览截图:

第二个:四宫格

<div class="qz-box">
    <!-- 链接 A -->
    <a class="qz-link qza" href="链接" rel="bookmark">
        <span class="qz-icon"><i class="be be-home"></i></span>
        <span class="qz-title">文字一</span>
    </a>
    <!-- 链接 B -->
    <a class="qz-link qzb" href="链接" rel="bookmark">
        <span class="qz-icon"><i class="be be-folder"></i></span>
        <span class="qz-title">文字二</span>
    </a>
    <!-- 链接 C -->
    <a class="qz-link qzc" href="链接" rel="bookmark">
        <span class="qz-icon"><i class="be be-sort"></i></span>
        <span class="qz-title">文字三</span>
    </a>
    <!-- 链接 D -->
    <a class="qz-link qzd" href="链接" rel="bookmark">
        <span class="qz-icon"><i class="be be-thumbs-up-o"></i></span>
        <span class="qz-title">文字四</span>
    </a>
<div class="clear"></div>
</div>
<style>
    .qz-box a {
        background: #08c;
        float: left;
        width: 50%;
        color: #fff !important;
        text-align: center;
        padding: 15px 10px 10px 10px;
    }
 
    .g-col .qz-box a,
    #cms-widget-one .qz-box a {
        width: 25%;
        padding: 25px 10px 20px 10px;
    }
 
    @media screen and (max-width:900px) {
        .qz-box a {
            width: 50%;
        }
        #cms-widget-one .qz-box a {
            width: 50%;
        }
    }
 
    @media screen and (max-width:700px) {
        #group-widget-one .qz-box a {
            width: 50%;
        }
    }
 
    .qz-box a:hover {
        background: #777;
    }
 
    a.qza {
        background: #699;
    }
 
    a.qzb {
        background: #c96;
    }
 
    a.qzc {
        background: #969;
    }
 
    a.qzd {
        background: #9c9;
    }
 
    .qz-icon {
        padding: 5px 0 10px 0;
        display: block;
    }
 
    .qz-icon .be {
        font-size: 40px!important;
    }
 
    .g-col .qz-icon .be {
        font-size: 60px!important;
    }
</style>

预览截图:

第三个一图三链接:

<div class="oneimg-threelink">
	<img src="/" title="图片标题文字" alt="图片描述文字">
		<a class="class-f" href="#" target="_blank" >链接文字一</a>
		<a class="class-s" href="#" target="_blank" >链接文字二</a>
		<a class="class-t" href="#" target="_blank" >链接文字三</a>
</div>
<style>
    .oneimg-threelink a {
    	color: #fff;
    	width: 31.3333333333333333%;
    	height: 40px;
    	line-height: 40px;
    	display: block;
    	border-radius: 2px;
    	text-align: center;
	margin: 10px 1%;
    }
 
	.class-f, .class-s, .class-t {
		float: left;
	}
 
    .class-f {
    	background-color: #2ba9fa;
    }
 
    .class-s {
    	background-color: #ff6969;
    }
 
    .class-t {
    	background-color: #70c041;
    }
 
    .class-f:hover, .class-s:hover, .class-t:hover {
		opacity: 0.8;
	}
</style>

预览截图:

 

版权声明:本文内容来源于互联网资源,由 蓝魅社区 整理汇总,如有侵权请您与客服联系删除!
其他声明:如未标明出处,所有文章均为蓝魅社区原创,转载请务必保留本文链接,感谢您支持。

低至¥9爆款产品限量抢!

阿里云*云小站 | 上云优惠聚集地 | 领取限量云产品优惠

立即抢购