详解为WordPress后台编辑文章添加shortcode短代码功能技巧

wordpress Mr.R 3年前 (2015-04-30) 2473次浏览 已收录 5个评论 扫描二维码
图片预览

详解为 WordPress 后台编辑文章添加 shortcode 短代码功能技巧

短代码说明

话说wordpress的文章编辑功能,对于经常折腾的童鞋来说,实在有点蛋疼,可视化界面显得有点中规中矩,文本模式又不够强大,幸好 wordprees 为我们提供了强大扩展功能。
下面我们就来说说wordpress文本模式下,添加短代码功能来方便编辑和美化自己的文章。

我们知道网站文章内容的美化,是通过 css、html 等语言代码来实现的,为了避免重复的写代码,于是wordpress提供了短代码功能,也就是用简短的代码格式来代替繁杂的书写。

例子

例 1:

<strong>需要加粗的文字</strong> //例如<a href="https://www.btbat.com/tag/wordpress" title="查看更多关于 wordpress 的文章" target="_blank">wordpress</a>自带的<strong>标签

效果:
需要加粗的文字

例 2:

[Downlink href="文件 URL"]文件名字[/Downlink] //如自定义的[Downlink]标签

效果:
[Downlink href=”www.btbat.com”]下载按钮[/Downlink]

源码

以 Downlink 标签为例:

1:在主题的 functions.php 文件中添加函数

				
function downlink($atts,$content=null){
extract(shortcode_atts(array("href"=>'http://'),$atts));
return '<div class="but_down"><a href="'.$href.'" target="_blank" rel="nofollow"><span>'.$content.'</span></a><div class="clear"></div></div>';
				}
add_<a href="https://www.btbat.com/tag/shortcode" title="查看更多关于 shortcode 的文章" target="_blank">shortcode</a>('Downlink', 'downlink');

2:建立个 JS 文件然后再后台引入:

<script type="text/javascript">
QTags.addButton( 'deve08', '下载按钮', '[Downlink href="文件 URL"]文件名字[/Downlink]');
</script>

3:在 CSS 中添加以下代码

.but_down { margin:0 0 12px 0; font-size:16px; font-family: Microsoft YaHei;}
.but_down a{float:left;display:block;background:url(images/1416063.gif) #FF6100 no-repeat 7px center; padding-left:40px;border:none; border-left:8px solid #CC4D00; height:44px;color:#567a82;text-decoration:none;}
.but_down a span{float:left;display:block; color:#fff; padding:0 15px;line-height:44px;cursor:pointer;}
.but_down a:hover{border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px; border-left:8px solid #DB5200;}

说明:由上可见添加短代码需要三个步骤
1、添加函数 2、引入 JS 3、添加 CSS 样式

简化

其实从函数中我们可以看到,即 Downlink 标签的完整代码,其实,我们也可以省略定义函数。直接在 JS 中使用代码。

QTags.addButton( 'deve08', '下载按钮', '<div class="but_down"><a href="下载连接" target="_blank" rel="nofollow"><span>下载地址</span></a><div class="clear"></div></div>');

也就是返回完整代码,虽然有点多,只要你能看懂就行,省去了定义函数的繁琐步骤。

进阶

我们也可以定义一个独立的shortcode.php 文件,在 functions.php 文件中引入即可。

shortcode.php 文件内容:

<?php
/*绿色按钮*/
function toi($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
   return '<a class="greenbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';
}
add_shortcode('gb' , 'toi' );
				
add_action( 'admin_print_footer_scripts', 'Deve_shortcode_buttons', 100 );
function Deve_shortcode_buttons() {
	?>
	<script type="text/javascript">  //JS 代码
		QTags.addButton( 'gb', '绿色按钮', '绿色按钮');  //利用函数实现
		QTags.addButton( 'textbox11', 'love', '\n<div class="shortbox boxlove">请在此输入内容</div>\n');  //直接调用 css 样式
		QTags.addButton( 'sub1', '分隔符', '\n<hr />\n' );  //调用 html 样式
	</script>
	<?php }

?>

css 样式:

/*!按钮样式 */
.greenbtn{-moz-box-shadow:0 10px 14px -7px #3e7327;-webkit-box-shadow:0 10px 14px -7px #3e7327;box-shadow:0 10px 14px -7px #3e7327;background:0;background:0;background:0;background:0;background:0;background:linear-gradient(tobottom,#77b55a5%,#72b352100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',endColorstr='#72b352',GradientType=0);background-color:#77b55a;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #4b8f29;display:inline-block;cursor:pointer;color:#fff!important;font-family:arial;font-size:13px;font-weight:700;padding:6px 12px;text-decoration:none;text-shadow:0 1px 0 #5b8a3c;}
.greenbtn:hover{background:0;background:0;background:0;background:0;background:0;background:linear-gradient(tobottom,#72b3525%,#77b55a100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',endColorstr='#77b55a',GradientType=0);background-color:#72b352;}
.greenbtn:active{position:relative;top:1px;}

/*提醒框*/.shortbox{margin:10px 0;padding:15px 15px 15px 70px;}
.boxlove{border:1px solid #EBA8A8;background:url(images/<a href="https://www.btbat.com/tag/shortcode" title="查看更多关于 shortcode 的文章" target="_blank">shortcode</a>/love.png) no-repeat scroll 20px center #FADCD8;color:#C66;}

效果如下:
绿色按钮

提醒框

分隔符


修仙㊀群
修仙㊁群
常见问题:1、文件解压请使用 Winrar5.5 版本以上解压;
2、视频播放有声音无画面,请了解下 PotPlayer 播放器;
R 大技术站 , 版权所有,如未注明 , 均为原创,如需转载请注明来源!
喜欢 (1)
[itdiy@qq.com]
分享 (0)
发表我的评论
取消评论

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. When someone writes an piece of writing he/she keeps the image of a user in his/her brain that how a user can understand it. Therefore that's why this article is amazing. Thanks!
    cheap proxy2018-02-25 07:55 回复 Mac OS X | Chrome 63.0.3239.84
  2. I simply want to say I am just newbie to blogging and site-building and really enjoyed this website. Almost certainly I’m going to bookmark your website . You definitely have great article content. Regards for sharing your web page.
    Get the facts2018-01-27 20:33 回复 Windows 7 | Chrome 4.0.221.7
  3. Below youll find the link to some web-sites that we assume you must visit.
    Google2016-09-11 09:04 回复 Windows XP | Internet Explorer 7.0b
  4. I am totally wowed and prearped to take the next step now.
    Bert2016-06-21 23:05 回复 Windows 7 | Chrome 40.0.2214.111
  5. How do I start and use a blog? Also, what is the best blogging site?
    yato uk2016-06-08 17:18 回复 Windows XP | Opera 8.50