WordPress 中短代码使用讲解

发布于 2018-08-08 字数5607 浏览 828 评论 0

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

它们是什么?

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

[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a external-link="true" 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 &raquo;'); ?>" />
  </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 解析从窗体的项目、 格式简码,并将它发送到编辑器,现在您可以创建一个接口,使您的用户,以允许轻松地生成有效简码为您解析。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!