Question

我正在开发自定义短代码wordpress 3.9.x插件，但代码无法正常工作。代码应根据media =“image”或media =“video”等参数进行更改，css类应根据参数position =“left”或position =“right”添加。

如果是图片，路径的值将是图片网址。如果，视频，路径的值将是youtube嵌入代码网址。

任何帮助？

短代码如下：

[contentblock class="gray" position="left" media="video" path="....youtube video link...."]Video[/contentblock]
[contentblock class="gray" position="left" media="image" path="....image url...." alt="alter text" ]Image[/contentblock]

代码如下：

function contentposFun( $atts, $content = null ) {
    extract( shortcode_atts( array(
        "class" => '',
        "path" => '',
        "alt" => '',
                "contentPos" => '', //Left, Right
                "contentLeft" => '',
                "mediaRight" => '',
                "mediaType" => '', // Image, Video
                "isImage" => '',
                "isVideo" => '',
                "imgCenter" => '',
    ), $atts, 'contentblock' ) );

        if($contentPos == "left"){
        $mediaRight = " col-md-push-7 ";
                $contentLeft = " col-md-upll-5 ";
    }
    else { 
        $mediaRight = " ";
                $contentLeft = " ";
    }

    if($mediaType == "image"){
                $imgCenter = ' img_center';
                $mediaType .= ' <img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' />';
    }
    else {
        $mediaType .= ' <div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div>';
    }

        return '<div class="container-fluid '.$class.'">
            <div class="row">
            <div class="container full_height">
            <div class="row full_height relative">
            <div class="col-md-5' .$imgCenter. '' .$mediaRight.'">' .$mediaType. '</div>
            <div class="col-md-7'.$contentLeft.'full_height absolute ">
            <div class="table full_height">
            <div class="table-row full_height">
            <div class="table-cell full_height valign_middle">'
            .do_shortcode($content).
            '</div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>';            
}
add_shortcode( 'contentblock', 'contentposFun' );

Answer 1

您在实际短代码中使用的短代码属性以及您在函数中使用的短代码属性是不同的。这些属性名称应该相同才能工作。

以下是示例代码：

// Add Shortcode
function video_embed_shortcode( $atts, $content = "" ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'src' => '',
            'width' => '',
            'height' => '',
        ), $atts )
    );

    // Code
return '<embed 
        src="' . $src . '"
        width="' . $width . '"
        height="' . $height . '"
        type="application/x-shockwave-flash"
        allowscriptaccess="always"
        allowfullscreen="true">' . $content;

}
add_shortcode( 'video_embed', 'video_embed_shortcode' );

以上的短代码如下：

[video_embed src="" width="" height=""]content[/video_embed]

Answer 2

我完成了我的代码并且运行良好。此代码可以生成4种类型的短代码。

简码：

[conblock class="gray" pos="left" media="image" path="img1.png" alt="image text"] Content[/conblock]
[conblock class="white" pos="right" media="image" path="img1.png" alt="image text"] Content[/conblock]
[conblock class="gray" pos="left" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]
[conblock class="white" pos="right" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]

插件代码：

function conblockFun( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => '', //white, gray
        'pos' => '', //left, right
        'media' => '', //image, video
        'left' => '', // true, false
        'right' => '', //true, false
        'path' => '', // image path or video path          
        'alt' => '', // if image add alt text
    ), $atts, 'conblock' ) );

    $output = '<div class="container-fluid '.$class.'">
                <div class="row">
                <div class="container full_height">
                <div class="row full_height relative">';
    if($pos == 'left' && $media == 'image') { $output .= '<div class="col-md-5 col-md-push-7 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}
    if($pos == 'left' && $media == 'video') { $output .= '<div class="col-md-5 col-md-push-7"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}     
    if($pos == 'right' && $media == 'image') { $output .= '<div class="col-md-5 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-push-5 full_height absolute">';}
    if($pos == 'right' && $media == 'video') { $output .= '<div class="col-md-5"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-push-5 full_height absolute">';} 
    $output .= '<div class="table full_height">
                <div class="table-row full_height">
                <div class="table-cell full_height valign_middle">'
                .do_shortcode($content).
                '</div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>';
    return $output;
}

add_shortcode("conblock", "conblockFun");

用于Wordpress 3.9.x主题的内容块短代码插件

2 个答案: