douyi6922 2014-01-17 10:36
浏览 65

如何使嵌套的短代码在WordPress中工作?

I am fairly competent with WordPress but I am trying to make things a little more complicated to stretch myself and I'm trying to create custom short codes. I have successfully managed to create two separate short codes; 1) featured_box 2) awesome_font_icon.

These two short codes work perfectly as single entities but when trying to nest the short codes e.g.) [featured_box][icon type="fa-bullhorn"][/featured_box] the [icon type="fa-bullhorn"] displays literally just that text and not the desired Awesome Font Icon.

I know that you have to add do_shortcode() to the script but I am not entirely sure where to put the do_shortcode() and to which short code, whether I place this into the featured_box or the awesome_font short code.

I have placed both scripts below.

Featured Box PHP:

function featured_box($atts, $content = null) {
$sliderrandomid = rand();
extract(shortcode_atts(array(
"title" => '',
'img'  => '',
'pos' => '',
), $atts));
ob_start();
?>

<div class="featured-box <?php if($pos) echo 'pos-'.$pos; ?>">
<img class="featured-img" src="<?php echo $img; ?>">
<h4><span><?php echo $title; ?></span></h4>
<p><?php echo $content; ?></p>
</div>

<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}


add_shortcode("featured_box", "featured_box");

Awesome Font Shortcode:

add_action( 'wp_enqueue_scripts', 'load_fontawesome_style', 999 );
function load_fontawesome_style() {
  wp_register_style( 'font-awesome', 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
  wp_enqueue_style( 'font-awesome' );
}



function addscFontAwesome( $atts ) {
extract( shortcode_atts( array( 'type' => '', 'size' => ''), $atts ) );

  $theAwesomeFont = '<li class="fa '.sanitize_html_class($type).' '.sanitize_html_class($size).'"></li>';

return $theAwesomeFont;
}

add_shortcode('icon', 'addscFontAwesome');

I have looked across the net and found various different tutorials etc but have not been successful as of yet. As I say, everything works perfectly, just not together.

I do appreciate nested short codes have been covered to death; all I have found was very generic and I don't think I'm guide that good at PHP to understand where to put it.

  • 写回答

1条回答 默认 最新

  • dougu2006 2014-01-17 10:44
    关注

    You have the right idea. I believe you would add the do_shortcode(); to the featured_box function. Like so:

    function featured_box($atts, $content = null) {
        $sliderrandomid = rand();
        extract(shortcode_atts(array(
            "title" => '',
            'img'  => '',
            'pos' => '',
        ), $atts));
        ob_start();
        ?>
    
        <div class="featured-box <?php if($pos) echo 'pos-'.$pos; ?>">
        <img class="featured-img" src="<?php echo $img; ?>">
        <h4><span><?php echo $title; ?></span></h4>
        // HERE
        <p><?php echo do_shortcode($content); ?></p> // HERE
        </div>
    
    <?php
        $content = ob_get_contents();
        ob_end_clean();
        return $content;
    }
    

    Note the do_shortcode($content); part when echoing out the content.

    Tidy Code

    I took the liberty of tidying the code up a bit, to save using output buffering. Just create the HTML as a string and concatenate the variables/function outputs into it. Just personal preference really, so up to you! :)

    I would also recommend using font-awesome with an <i class="fa fa-icon"></i> html tag instead of the <li class="fa fa-icon"></li> tag. An <li> tag being used outside of a <ul> tag would result in invalid html, whereas a simple <i> tag would not.

    function featured_box($atts, $content = null) {
        $sliderrandomid = rand();
        extract(shortcode_atts(array(
            "title" => '',
            'img'  => '',
            'pos' => '',
        ), $atts));
    
        $content = '
            <div class="featured-box ' . ($pos ? echo 'pos-'.$pos : null) . '">
                <img class="featured-img" src="' . $img . '">
                <h4><span>' . $title .'</span></h4>
                <p>' . do_shortcode($content) . '</p>
            </div>
        ';
    
        return $content;
    }
    
    function addscFontAwesome( $atts ) {
        extract( shortcode_atts( array( 'type' => '', 'size' => ''), $atts ) );
    
        // Note the <i> tag instead of <li>        
        $theAwesomeFont = '<i class="fa '.sanitize_html_class($type).' '.sanitize_html_class($size).'"></i>';
    
        return $theAwesomeFont;
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题