WordPress 中短代码使用讲解

Question

在 WordPress 中如果要插入一段特定的代码，是一件比较困难的事情，不过 WordPress 开发团队可能注意到了这一点，所以开发了一个叫 shortcode 的东西，能够自定义一段已经编辑好的代码，比如视频代码等。

它们是什么？

首先被称为 mycode 简码可以看起来像任何一种：

[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a href="http://example.com/">HTML Content</a></p>[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo="bar" id="123"]Some Content[/mycode]

正如你所看到的简码允许用户将代码放入的文章或页面，和一个插件然后可以轻松地处理那些代码。他们可以嵌套，包含内容 （包括 HTML）、属性等。

如何使用它们？

你想要利用新的、 功能强大的简码系统在 WordPress 2.5 中，但你要从哪里开始呢？首先您需要添加你的简码：

add_shortcode('mycode', 'yourFunction');

你的函数应该带两个参数并返回的内容，您想要替换的简码。第一个参数将是一个关联数组的属性 （键将的属性名称和值将相应的属性值），和第二个将会在标记之间的内容。

若要处理的默认属性，您可以使用 shortcode_atts($attributes, Array $defaultsArray)

function yourFunction ($attr, $content) {
  $attr = shortcode_atts(array('foo'=>'bar', 'id'=>'', 'color'=>'blue'), $attr);
  return '<h2>Attributes</h2><pre>'.print_r($attr, true).'</pre><h2>content</h2>'.$content;
}

这就是为什么他们是如此伟大，花几乎没有来处理，然而也许你正考虑相对复杂的方式来使用这些，和你想要把它带到下一个级别。

进阶使用

也许你担心你不会理解的你的简码，错综复杂的用户或将饱受拼写错误。它是一个有效的关注。例如我不想承担我的用户将能够通过完美地输入创建一个谷歌地图：

[googleMap width="100%" height="400" name="Aero Rental - Phoenix" directions_to="true" directions_from="true"]3432 W. Clarendon, 85017[/googleMap]

解决方法是创建一种方式为您的用户生成简码，并把他们写入编辑器中，但从哪里开始呢？首先你需要的页面中添加一个 meta 框的写作/编辑 （这些是编辑器，如标签、 类别等下面的下拉列表框）。要这样做，请创建一个函数，您将使用显示的窗体，用来生成您的简码 （我会称它为 insertForm ）。然后你需要钩入到位行动，并使用它来创建 metaboxes：

<?php
function handleAdminMenu() {
    // You have to add one to the "post" writing/editing page, and one to the "page" writing/editing page
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'post', 'normal');
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'page', 'normal');
}
 
function insertForm() {
?>
  <table class="form-table">
    <tr valign="top">
      <th scope="row"><label for="wpYourPluginName_content"><?php _e('Tag Content:')?></label></th>
      <td>
        <input type="text" size="40" style="width:95%;" name="wpYourPluginName[content]" id="wpYourPluginName_content" />
      </td>
    </tr>
    <tr valign="top">
      <th scope="row"><label for="wpYourPluginName_foo"><?php _e('Foo Attribute:')?></label></th>
      <td>
        <input type="text" size="40" style="width:95%;" name="wpYourPluginName[foo]" id="wpYourPluginName_foo" />
      </td>
    </tr>
    <tr valign="top">
      <th scope="row"><label for="wpYourPluginName_bar"><?php _e('Bar Attribute:')?></label></th>
      <td>
        <input type="text" size="40" style="width:95%;" name="wpYourPluginName[bar]" id="wpYourPluginName_bar" />
      </td>
    </tr>
  </table>
  <p class="submit">
    <input type="button" onclick="return wpYourPluginAdmin.sendToEditor(this.form);" value="<?php _e('Send Map to Editor »'); ?>" />
  </p>
<?php
}
 
function adminHead () {
  if ($GLOBALS['editing']) {
    wp_enqueue_script('wpYourPluginNameAdmin', 'path/to/yourJsFile.js', array('jquery'), '1.0.0');
  }
}
 
add_action('admin_menu', 'handleAdminMenu');
add_filter('admin_print_scripts', 'adminHead');
?>

具体内容是 yourMetaBoxID 成为 metabox DIV 的 id，Your Meta Box Title将为 metabox 显示的标题。

你可能已经注意到提交按钮调用一些 JavaScript（特别是 wpYourPluginAdmin.sendToEditor(this.form))，和我们进行一个 JavaScript 文件排队。下面是该文件：

/**
 * Handle: wpYourPluginNameAdmin
 * Version: 0.0.1
 * Deps: jquery
 * Enqueue: true
 */
 
var wpYourPluginNameAdmin = function () {}
 
wpYourPluginNameAdmin.prototype = {
  options           : {},
  generateShortCode : function() {
    var content = this['options']['content'];
    delete this['options']['content'];

    var attrs = '';
    jQuery.each(this['options'], function(name, value){
      if (value != '') {
        attrs += ' ' + name + '="' + value + '"';
      }
    });
    return '[googleMap' + attrs + ']' + content + '[/googleMap]'
  },
  sendToEditor      : function(f) {
    var collection = jQuery(f).find("input[id^=wpYourPluginName]:not(input:checkbox),input[id^=wpYourPluginName]:checkbox:checked");
    var $this = this;
    collection.each(function () {
      var name = this.name.substring(13, this.name.length-1);
      $this['options'][name] = this.value;
    });
    send_to_editor(this.generateShortCode());
    return false;
  }
}
 
var wpYourPluginAdmin = new wpYourPluginNameAdmin();

这个 JavaScript 解析从窗体的项目、 格式简码，并将它发送到编辑器，现在您可以创建一个接口，使您的用户，以允许轻松地生成有效简码为您解析。