web-dev-qa-db-ja.com

属性が設定されていない場合または変数の属性である場合はHTMLコンテンツを削除します。

だから私は標準的なブートストラップカルーセルを使ったショートコードを作成しています。

3つすべてのスライド属性が正しく入力されている限りはまったく問題なく動作しますが、2つだけが設定されていて4番目でない場合は明らかにスライドの3番目のdivが作成されます。滑り台。事はそれが使用されるたびに、それはスライドの異なる量を持つことになり、私は2つの画像URLだけが渡された場合、または4つが動作するようにしたいです。

関数：

// Add Shortcode for single portfolio slider
function slider_shortcode( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
    array(
        'slide1' => '',
        'caption1' => '',
        'slide2' => '',
        'caption2' => '',
        'slide3' => '',
        'caption3' => '',

    ), $atts )
);

// Code
return '
<div class="col-lg-7">
    <div class="carousel slide padtop" data-ride="carousel" id=
    "carousel-example-generic">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
        <img src="' . $slide1 . '" class="img-responsive">
        <div class="carousel-caption">
                    ' . $caption1 . '
                    </div>
            </div>
            <div class="item">
        <img src="' . $slide2 . '" class="img-responsive">
        <div class="carousel-caption">
                    ' . $caption2 . '
                 </div>
            </div>
            <div class="item">
                <img src="' . $slide3 . '" class="img-responsive">
                <div class="carousel-caption">
                    ' . $caption3 . '
                </div>
            </div>
    <div class="item">
                <img src="' . $slide4 . '" class="img-responsive">
                <div class="carousel-caption">
                    ' . $caption4 . '
                </div>
            </div>
        </div><!-- Controls -->
        <a class="left carousel-control top20 transitionfast" data-slide=
        "prev" href="#carousel-example-generic" role=
        "button"><span aria-hidden="true" class=
        "glyphicon glyphicon-chevron-left"></span> <span class=
        "sr-only">Previous</span></a> <a class=
        "right carousel-control top20 transitionfast" data-slide="next"
        href="#carousel-example-generic" role="button"><span aria-hidden=
        "true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span></a>
    </div>
</div>
';

}
add_shortcode( 'slider', 'slider_shortcode' );

ショートコード：

[slider slide1="/img/img1.png" caption1="" slide2="/img/img2.jpg" caption2="test text 2"][/slider]
shortcodevariablesattribute
2
Mike Young

私は2列の画像、キャプションを好むでしょう。

例えば：

理解を深めるためにコードにコメントを追加しました。

function wpse216239_slider_shortcode( $atts , $content = null ) {
    // Attributes
    $atts = shortcode_atts(
        array(
            'slides' => '', // one master attribute for slides
            'captions' => '' // one master attribute for captions
        ), 
        $atts,
        'myslidershortcode' 
    );

    $slides = explode(';;', $atts['slides']); // slide urls separated by ;;
    $captions = explode(';;', $atts['captions']); // caption texts separated by ;;

    if(empty($slides)){
        return '<!-- no slides -->';
    }

    $html = '
    <div class="col-lg-7">
        <div class="carousel slide padtop" data-ride="carousel" id=
        "carousel-example-generic">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
    ';


    $active = 'active';
    $i = 0;

    foreach($slides as $src){
        $caption = isset($captions[$i]) ? $captions[$i] : ''; 

        $html .= "<div class=\"item " . esc_attr( $active ) . "\">";
        $html .= "<img src=\"" . esc_url( $src ) . "\" class=\"img-responsive\">";

        if($caption) // only add caption if available
            $html .= "<div class=\"carousel-caption\">" . esc_html( $caption ) . "</div>"

        $html .= '</div>';

        $active = '';
        $i++;
    }

    $html .= '</div></div></div>';

}
add_shortcode( 'slider', 'wpse216239_slider_shortcode' );

このコードは、画像がショートコードに与えられている場合にのみ、スライダーHTMLを生成します。画像のURLとキャプションを;;で区切る

実装

[slider 
    slides="http://example.com/image1;;http://example.com/image2"
    captions="My caption1;;Mycaption2"
]

コードはデモンストレーション目的で提供されています。テストされていないので、テストしないで本番サイトに配置しないでください。

2
Sisir