• 详解WordPress中简码格式标签编写的基本方法


    WordPress 简码是一种类似于论坛标签的东西,格式类似于把尖括号换成中括号的 Html 标签。简码很多人叫做短代码,但官方的翻译应该是简码,在这里纠正一下。

    简码的开发的逻辑比较简单,主要就是添加、删除和判断,会在本文全部介绍。

    简码格式

    简码的格式非常灵活,可以是有属性、无属性、闭合、非闭合等等:

    [example]

    [example]内容[/example]

    [example attr="属性" attr-hide="1"]内容[/example]

    [example "属性"]

    添加简码

    添加简码需要使用 add_shortcode() 函数,两个属性,第一个为简码名,第二个是简码的回调函数。

    1
    add_shortcode( $tag, $func );

    例如添加名为 test 的简码,回调 Bing_shortcode_test() 函数:

    1
    2
    3
    4
    function Bing_shortcode_test( $attr, $content ){
      return 'Hello World!';
    }
    add_shortcode( 'test', 'Bing_shortcode_test' );

    在文章中添加 [test] 就会输出 “Hello World!”。

    从上边的例子可以看到,简码的回调函数需要接收两个参数。第一个是简码所有的属性,通过数组储存;第二个是简码的内容(闭合简码中的内容)。

    移除简码

    remove_shortcode() 函数可以移除一个简码,只需要指定简码的名称即可移除。

    1
    remove_shortcode( 'test' );

    remove_all_shortcodes() 函数用来移除当前添加的所有简码。

    1
    remove_all_shortcodes();

    判断简码

    关于判断简码,有两个函数,shortcode_exists() 函数判断简码是否存在。

    1
    2
    3
    4
    remove_all_shortcodes();
    if( shortcode_exists( 'test' ) ) echo '简码 test 存在';//False
    add_shortcode( 'test', 'Bing_shortcode_test' );
    if( shortcode_exists( 'test' ) ) echo '简码 test 存在';//True

    还有一个 has_shortcode() 函数,判断字符串中是否出现某某简码。

    1
    2
    3
    4
    $content = '测试测试测试测试测试测试测试测试';
    if( has_shortcode( $content, 'test' ) ) echo '字符串中有 test 简码';//False
    $content = '测试测试测试测[test]测试[/test]试测试测试测试测试';
    if( has_shortcode( $content, 'test' ) ) echo '字符串中有 test 简码';//True

    执行简码

    do_shortcode() 函数用来在字符串中查找简码,并在简码处调用之前添加的回调函数,把简码执行成需要的内容。

    WordPress 添加的钩子:

    1
    add_filter( 'the_content', 'do_shortcode', 11 );

    例子:

    1
    2
    3
    4
    5
    6
    function Bing_shortcode_test( $attr, $content ){
      return 'Hello World!';
    }
    add_shortcode( 'test', 'Bing_shortcode_test' );
    $content = '测试测试测试测[test]试测试测试测试测试';
    echo do_shortcode( $content );//测试测试测试测Hello World!试测试测试测试测试

    简码属性

    简码支持各种格式的属性,接受给简码回调函数的第一个参数。如果你要给参数设置默认值,可以使用 shortcode_atts() 函数:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Bing_shortcode_test( $attr, $content ){
      extract( shortcode_atts( array(
        'url' => 'http://www.bgbk.org',
        'hide' => false,
        'text' => '点击隐藏 / 显示'
      ), $attr ) );
      $hide = $hide ? ' style="display:none;"' : '';
      return '<a href="' . $url . '"' . $hide . '>' . $text . '</a>';
    }
    add_shortcode( 'test', 'Bing_shortcode_test' );


    只有页面中使用了简码的时候才加载脚本
    而在开发的过程中,有时会遇到这种问题:简码模块需要加载 JS 或者 CSS 脚本,而当页面没有使用简码的时候就会造成资源浪费。

    比如下边的这个 Google 地图插件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //添加简码
    function Bing_add_google_map( $atts, $content ){
      //content...
    }
    add_shortcode( 'google_map', 'Bing_add_google_map');
      
    //挂载脚本
    function Bing_add_javascript(){
      wp_enqueue_script( 'map_scripts' );
    }
    add_action( 'wp_enqueue_scripts', 'Bing_add_javascript' );

    只有在页面中使用了 [google_map] 简码的时候才需要加载脚本,这怎么做到呢?

    其实很简单,只需要在简码函数触发的时候在页脚挂载脚本即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //添加简码
    function Bing_add_google_map( $atts, $content ){
      $GLOBALS['google_map_shortcode'] = true;
      return '地图的代码';
    }
    add_shortcode( 'google_map', 'Bing_add_google_map');
      
    //挂载脚本
    function Bing_add_javascript(){
      global $google_map_shortcode;
      if( isset( $google_map_shortcode ) && $google_map_shortcode ) wp_enqueue_script( 'map_scripts' );
    }
    add_action( 'wp_footer', 'Bing_add_javascript' );

    总结

    简码是个非常强大的功能,对文章内容是一种很好的扩展,利用好可以让添加某些东西变的方便快捷。

    关于简码的函数都在:wp-includes/shortcode.php 文件里,有能力的朋友可以阅读一下,了解原理。

  • 相关阅读:
    npm包开发与发布
    mapbox展示动态图标
    axios并行请求
    Vue引入ES5的js库
    git常用操作
    单词倒排
    FT232RL芯片USB转TTL应用
    应用GL823芯片自制的读卡器
    队列图示
    队列
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/7327835.html
Copyright © 2020-2023  润新知