首页 / WordPress开发 / WordPress打造你自己的短代码

WordPress打造你自己的短代码

    • 珂李斯

    发布于

    by

    感谢彭浩童鞋的投稿！      上周QQ上和一朋友聊到了WP的话题，他问我：”你那文章里边嵌套的叹号神马的是怎…

    感谢彭浩童鞋的投稿！

         上周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

    — 完 —

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT


  • 评论功能已经关闭!