WordPress打造你自己的短代码

标签:WordPress教程
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

感谢彭浩童鞋的投稿!

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

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

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

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

Shortcode

Since Version 2.5 WordPress support so called Shortcodes. They have been introduced for creating macros to be use in a posts content.

A trivial shortcode for a gallery looks like this:

[ gallery]

You can also print a shortcode directly in a template like so:

<?php echo do_shortcode; ?>

Shortcodes can be with additional attributes as the following example shows:

[ gallery id="123" size="medium"]
Both examples will display an image gallery which would be hard to maintain when writing the HTML markup for it and keeping it in sync with uploaded images."

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

     老师说从Hello World开始!

     Follow Me

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

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

function hello() {
    return 'Hello, World!';
}

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

add_shortcode('hw', 'hello');

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

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

     然后更改上面的函数:

function hello($atts, $content=null, $code="") {
    // 这里content参数便是你要写的文字。
    $return = '<div class="hello_short">';
    $return .= $content;
    $return .= '</div>';
    return $return;
}

     当然还有应该有相应的CSS

.hello_short{margin:20px 0px;padding: 15px 15px 15px 70px; font-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;}
.hello_short a{}
.hello_short a:hover{}
.hello_short b,.hello_short strong{padding:0px; margin:0px;  background: none; font-weight: bold;border-radius:0px;-moz-border-radius:0px;}
.hello_short{background: url(images/shortcode/warning.png) no-repeat 20px 20px #fff0b5;border: 1px solid #eac946;color: #b09e56;}
.hello_short a{ color:#A84A1E;}

     现在你在文章中输入

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

     就能实现

我们的祖国是花园
花园里的花朵真鲜艳

     这样的效果了。

     电视机前的小朋友们,你们学会了吗?

     原文地址:http://mouse.orangemouse.me/2012/12/build-your-own-wordpress-short-codes.html

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/wordpress-short-codes.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe