分享几个增强文本小工具实例

  • A+
所属分类：建博笔记
摘 要

通过对增强文本小工具的合理运用，可以实现更加丰富的定制功能和多元化的模块展示。然而，默认情况下wordpress自带的增强文本小工具是不支持运行PHP代码的，为此需要先解决这个问题，以便之后向该小工具添加的PHP代码可以正常运行。

增强文本小工具支持运行PHP代码

打开主题根目录下的【functions.php】文件，在最后一个}前添加代码

//实现侧边栏文本工具运行PHP
add_filter('widget_text', 'php_text', 99);
    function php_text($text) {
        if (strpos($text, '<' . '?') !== false) {
            ob_start();
            eval('?' . '>' . $text);
            $text = ob_get_contents();
            ob_end_clean();
        }
    return $text;
}

即可。

如果你的主题已集成该功能，就不需要重复添加了。

 

增强文本小工具实例分享

下面就分享几个增强文本小工具的实际应用，旨在抛砖引玉，童鞋们也可以根据这些实例举一反三，从而定制出更加符合自己主题需求的小工具。

  • 效果图中的链接颜色不一致，是我主题自身的原因，与本文分享的小工具代码无关
  • 个别小工具实例需要根据自己的需求修改代码中相关的文字、链接及样式

 

实例一、最新文章（单分类、单栏、有缩略图）

效果预览：

完整代码：

<div class="new_cat">
    <ul>
        <?php
            $loop = new WP_Query( array ( 'showposts' => 5, 'cat' => 6, 'post__not_in' => get_option( 'sticky_posts') ) );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <li>
            <figure class="thumbnail">
                <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
            </figure>
            <div class="new-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div>
            <div class="date"><?php the_time('m/d') ?></div>
            <?php if( function_exists( 'the_views' ) ) { the_views( true, '<span class="views"><i class="be be-eye"></i> ','</span>' ); } ?>
        </li>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
</div>

 

实例二、最新文章（单分类、单栏、无缩略图）

效果预览：

完整代码：

<div class="post_cat">
    <ul>
        <?php
            $loop = new WP_Query( array ( 'showposts' => 5, 'cat' => 6, 'post__not_in' => get_option( 'sticky_posts') ) );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <?php the_title( sprintf( '<li class="cat-title"><i class="be be-arrowright"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
</div>

 

实例三、最新文章（单分类、双栏、无缩略图）

效果预览：

完整代码：

<div class="post_cat cat_two">
    <ul>
        <?php
            $loop = new WP_Query( array ( 'showposts' => 10, 'cat' => 8, 'post__not_in' => get_option( 'sticky_posts') ) );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <?php the_title( sprintf( '<li class="cat-title"><i class="be be-arrowright"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
</div>
<style>
    .cat_two li {
        float: left;
        width: 45% !important;
        line-height: 210%;
        margin: 0 10px 10px 0;
        whitewhite-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    @media screen and (max-width: 480px) {
        .cat_two li {
            width: 95% !important;
            margin: 0 0 0 0;
        }
    }
</style>

 

实例四、最新文章（多分类、双栏、无缩略图）

效果预览：

完整代码：

<div class="post_cat cat_two">
    <ul>
    <?php
        $args = array(
            'posts_per_page' => 10,
            'cat' => '7,9',
            'ignore_sticky_posts' => 1
        );
        query_posts($args);
    ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php the_title( sprintf( '<li class="cat-title"><i class="be be-arrowright"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
</div>
<style>
    .cat_two li {
        float: left;
        width: 45% !important;
        line-height: 210%;
        margin: 0 10px 10px 0;
        whitewhite-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    @media screen and (max-width: 480px) {
        .cat_two li {
            width: 95% !important;
            margin: 0 0 0 0;
        }
    }
</style>

 

实例五、最新文章（图片形式）

效果预览：

完整代码：

<div class="img_cat">
    <ul>
        <?php
            $loop = new WP_Query( array ( 'showposts' => 4, 'cat' => 6, 'post__not_in' => get_option( 'sticky_posts') ) );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div class="img-box">
            <div class="img-x2">
                <figure class="insets">
                    <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
                    <?php the_title( sprintf( '<div class="img-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></div>' ); ?>
                </figure>
            </div>
        </div>
        <?php endwhile;?>
        <?php wp_reset_query(); ?>
        <div class="clear"></div>
    </ul>
</div>

 

实例六、多彩菜单

效果预览：

完整代码：

<div class="colorbar-box">
    <ul class="colorbar">
        <li><a href="链接地址" target="_blank" style="background-color:#ff3030;">我是第一行文字</a></li>
        <li><a href="链接地址" target="_blank" style="background-color:#428BCA;">我是第二行文字</a></li>
        <li><a href="链接地址" target="_blank" style="background-color:#e84266;">我是第三行文字</a></li>
        <li><a href="链接地址" target="_blank" style="background-color:#91c24f;">我是第四行文字</a></li>
        <li><a href="链接地址" target="_blank" style="background-color:#f49800;">我是第五行文字</a></li>
    </ul>
</div>
<style type="text/css">
    .colorbar-box ul {
        padding: 0;
    }
    .colorbar li {
        width: 100% !important;
    }
    .colorbar li a {
        color: #fff;
        line-height: 40px;
        display: block;
        width: 100%;
        text-align: center;
    }
        .colorbar li a:hover {
        opacity: 0.8;
    }
</style>

 

实例七、图片/分类/广告等展示（有标题和文字描述）

效果预览：

完整代码：

<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="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>
<div class="top-author lx8">
    <a rel="external nofollow" target="_blank" title="标题" href="#">
    <img src="/">
</div>

 

实例九、四宫格

效果预览：

完整代码：

<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>

 

实例十、百度地图

效果预览：

操作方法：

首先：点击这里 进入百度地图设置页面

然后：在左侧设置切换城市、定位中心点、地图尺寸、标注你所要引入地址的大概位置、标记名称等信息

接着：保存并获取代码，复制代码

其次：在你的网站根目录创建一个文件，比如：baidumap.html，并把之前复制的百度地图的代码复制到此文件中

最后：在增强文本小工具中添加下面的代码

<iframe src="你的域名/文件名.html" frameBorder=0 height=300 width=100% scrolling=no></iframe>

Tips：这段代码也可用于文章调用，或直接添加在文章或其他地方。

 

实例十一、广告

效果预览：

完整代码：

<a href="#" target="_blank">
    <img src="/" alt="图片描述">
    <h4 style="font-size: 15px;font-size: 1.5rem;text-align: center;padding: 8px 0">文字描述</h4>
</a>

 

实例十二、二维码展示

效果预览：

完整代码：

<ul class="about-me-img clearfix">
    <li>
        <img src="/" title="标题文字" alt="图片描述">
        <p>文字描述</p>
    </li>
    <li>
        <img src="/" title="标题文字" alt="图片描述">
        <p>文字描述</p>
    </li>
    <li>
        <img src="/" title="标题文字" alt="图片描述">
        <p>文字描述</p>
        </a>
    </li>
</ul>
 
<style type="text/css">
    .about-me-img li {
        float: left;
        padding: 5px;
        width: 33.333333333333333333% !important;
    }
    .about-me-img p {
        text-align: center;
    }
</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>

 

实例十四、历史上的今天

效果预览：

由于涉及篇幅较长，就另外单独开篇介绍，详情请参见文章《wordpress添加“历史上的今天”功能》。

 

分享的增强文本小工具实例目前就这些，童鞋们可以根据自己的需求灵活运用和布局。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论：1   其中：访客  1   博主  0

    • avatar 励志语录网 0
      回复 2019年5月19日 22:06  沙发

      厉害了，修改的赞一个