有朋自远方来,不亦乐乎。
纯代码写一个图文短代码
原创 橘子书  发布于 2年前 ( 2016-11-20 ) 阅读: 980 次 抢沙发 A+
[收起] 文章目录

本来今天想安安静静地当个睡男子,然后没想到折腾了一天的代码(主要是去拆代码玩。)

然后吧,晚上龙笑天下问我知更鸟《免费 WordPress Themes》里面的多图文是怎么写的。

特地去看了下,原理其实很简单,关键是css样式,鉴于懒癌发作,所以直接扒下鸟哥的图文短代码css样式。

DEMO

教程

以下教程简单粗暴,拿来就能用。(ps:为了美观,请自行调试一下css样式的代码,这样才能完美兼容自身的主题。)

functions.php的代码
//图文短代码(单图文) by龙砚庭博客 http://loomob.com/
function lyt_image_text($atts,$content=null){
   extract(shortcode_atts(array('title' => '','img' => '','url' => '','price' => '','buy' => ''), $atts));
   return  '
<div class="wptao-item">
<a href="'.$url.'" target="_blank" isconvert="1" rel="nofollow">
<div class="wptao-item-img"><img itemprop="image" src="'.$img.'" alt="'.$title.'"></div>
<div class="wptao-title">'.$title.'</div><p class="wptao-des">'.$content.'</p>
<div class="wptao-oth">
<div class="wptao-res wptao-price">¥'.$price.'</div>
<div class="wptao-btn">'.$buy.'</div><div class="clear"></div></div></a>
<p><a href="'.$url.'" target="_blank" isconvert="1" rel="nofollow"></a></p>
<div class="clear"></div></div>';
}
add_shortcode('lyt_1','lyt_image_text');

单图文,多次使用就能起到多图文的效果。

style.css的样式代码

css代码有些长,请输入密码123查看:

注意:本段内容须输入密码才能查看:

还是建议:写进主题的时候,调试一下样式比较贴切自身主题。

调用输出的简码

写文章的时候,使用如下简码调用短代码:

[lyt_1 title=标题 url=链接 img=图片链接 buy=去购买 price=价格]描述的内容[/lyt_1]

总结

没有然后了,自行玩耍吧。以后我可能会陆续写一些短代码出来,作为记录,我会为每个短代码写一个序号,比如:lyt_1

然后就没然后了,愉快玩耍呗!

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...