如何使嵌套的短代码在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.

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;
}