增强文本小工具支持运行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; }
即可。
[mark_c]如果你的主题已集成该功能,就不需要重复添加了。[/mark_c]
增强文本小工具实例分享
下面就分享几个增强文本小工具的实际应用,旨在抛砖引玉,童鞋们也可以根据这些实例举一反三,从而定制出更加符合自己主题需求的小工具。
[mark_a]
- 效果图中的链接颜色不一致,是我主题自身的原因,与本文分享的小工具代码无关
- 个别小工具实例需要根据自己的需求修改代码中相关的文字、链接及样式
[/mark_a]
实例一、最新文章(单分类、单栏、有缩略图)
效果预览:
完整代码:
<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添加“历史上的今天”功能》。
分享的增强文本小工具实例目前就这些,童鞋们可以根据自己的需求灵活运用和布局。
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
2019年5月19日 22:06 1F
厉害了,修改的赞一个