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

业余编程爱好者。

32 条留言

点此留言
  1. xiaomingtt xiaomingtt

    学会了，但是不知道能不能用着。

    回复
  2. 哥特复兴 哥特复兴

    我怒拔网线，哈哈

    回复
  3. 网

    有空讲讲自定义栏目吧，一直都搞不太明白

    回复
  4. Tokin Tokin

    我都不敢加在主题上，就怕哪天换主题，这些效果都没了，然后又要费时间再加上

    回复
    • Ludou

      @Tokin 可以放到某个插件中

      回复
    • oyoy oyoy

      @Tokin 骚年，你专门做个短代码集合插件吧，我是你第一个粉丝

      回复
  5. 西门 西门

    哈哈，感觉ludou这篇文章是为了投稿特批通过的，不然这种教程太过基础了，Google一大堆

    回复
    • Mouse Mouse

      @西门 这篇就是为新手写的啊，并不是每个人都像你一样是高手呢。我的博客或许还有你喜欢的呢？来看看吧。。

      回复
  6. 茶话汇 茶话汇

    不错，这个功能挺实用的。

    回复
  7. 自由屋博客 自由屋博客

    很实用，学习了！！

    回复
  8. heasily

    http://wwww.xxx.com/?author=11这样的URL请问如何添加http://wwww.xxx.com/?author=11&fans 这样的字段，让该用户界面显示其它内容，比如查看该用户关注的东西。该如何操作哦？就是include该用户的FANS.PHP 页面。。。。。URL上如何设置？

    回复
    • Ludou

      @heasily <?php echo get_author_posts_url($author_id) . '&fans'; ?>

      回复
  9. noname

    有时写了文章加入警告或注意的某某内容，这个也是不错的效果…

    回复
  10. heasily

    如果更改了固定链接后，如何写&的URL传值？

    回复
  11. W3Cshare W3Cshare

    文章评分功能是怎么实现的啊

    回复
    • Ludou

      @W3Cshare WP-PostRatings

      回复
      • W3Cshare W3Cshare

        @Ludou 这个插件我安装过，也用过，可是没你那个效果，可否分享一份给我修改版的？邮箱：842956042@qq.com

        回复
      • W3Cshare W3Cshare

        @Ludou 好像不对吧，我说的是星型评分那个

        回复
  12. 疾风 疾风

    这个有点实用

    回复
  13. 红色石头 红色石头

    要回宿舍了，先留名，明天仔细看~

    回复
  14. 大喇叭 大喇叭

    懂了 短代码

    回复
  15. pipi

    小朋友好喜欢你分享的这些东西

    回复
  16. 花少 花少

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

    回复
  17. arm arm

    感觉直接用比较实在，自己写太麻烦

    回复
  18. 刘传鹏博客 刘传鹏博客

    学习了

    回复
  19. 小斌

    这个短代码一定要放在文章里输出才有效果吗，可不以直接在某个页面输出（不在文章内容里写）求指教

    回复
  20. 一艘大轮船 一艘大轮船

    可以说是很详细了

    回复
  21. 一个大问号

    博主，求问怎么用子主题的方式修改主题短代码return的内容。。。纠结了很久。

    回复

发表留言