• 欢迎访问【望星湖畔】,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器或Chrome浏览器访问本网站,欢迎加入官方QQ群 QQ群
  • 【望星湖畔】因搬家不慎将数据弄丢,现在各项资料恢复中,还请大家海涵!!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏【望星湖畔】吧

WordPress打造你自己的短代码

WP应用 admin 3年前 (2014-11-25) 827次浏览 已收录 0个评论

以前使用的hueman主题里自带的短代码功能很是喜欢,加上插件也用上了S-shortcodes:WordPress短代码形式美化框插件,因此对短代码就有了研究的欲望。幸好,网上对此的教程还是蛮多的,今天试着移植了下hueman的highlight短代码,居然成功了!!特此记录。

上周QQ上和一朋友聊到了WP的话题,他问我:”你那文章里边嵌套的叹号神马的是怎么实现的啊?”我回答说:嘿嘿,这不是我实现的,是主题自带的。又问,那么主题怎么实现的啊?我说那是短代码实现的呃。又问:短代码是怎么实现的啊?于是我怒拔网线。

这里为了给那位以为我撞墙去了的童鞋一个交代,分享一下实现你自己的短代码功能的方法。

首先我们要了解什么是短代码。

我的习惯,抄一个官方解释。

Shortcode

那么怎么写一个自己的短代码呢?

老师说从Hello World开始!

Follow Me

1.打开主题中的functions.php文件。如不存在此文件,创建一个。

2.定义hello()函数,返回字符串

  1. function hello() {
  2.     return ‘Hello, World!’;
  3. }

3.然后再其后面使用add_shortcode()函数将你的hello()函数绑定为短代码,并命名为“hw”

  1. add_shortcode(‘hw’, ‘hello’);

4.所以,在functions.php文件加入的完整代码是:

  1. function hello() {
  2.     return ‘Hello, World!’;
  3. }
  4. add_shortcode(‘hw’, ‘hello’);

5.收工,测试。在你的文章中直接输入[hw]见证奇迹的出现。

当然,在实际写文章的时候你不会去弄个函数来输出个常量。比如我要实现上面的效果怎么办呢?首先你要一个图片。

然后更改上面的函数:

  1. function hello($atts$content=null, $code=“”) {
  2.     // 这里content参数便是你要写的文字。
  3.     $return = ‘<div class=“hello_short”>’;
  4.     $return .= $content;
  5.     $return .= ‘</div>’;
  6.     return $return;
  7. }

当然还有应该有相应的CSS

  1. .hello_short{margin:20px 0px;padding15px 15px 15px 70pxfont-size:12px;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}
  2. .hello_short a{}
  3. .hello_short a:hover{}
  4. .hello_short b,.hello_short strong{padding:0pxmargin:0px;  backgroundnonefont-weightbold;border-radius:0px;-moz-border-radius:0px;}
  5. .hello_short{backgroundurl(images/shortcode/warning.png) no-repeat 20px 20px #fff0b5;border1px solid #eac946;color#b09e56;}
  6. .hello_short a{ color:#A84A1E;}

现在你在文章中输入

[hello]我们的祖国是花园,花园里的花朵真鲜艳[/hello]

就能实现


望星湖畔 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress打造你自己的短代码
喜欢 (0)
[loveinghu@qq.com]
分享 (0)
发表我的评论
取消评论

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址