web-dev-qa-db-fra.com

Supprimer le contenu HTML si l'attribut n'est pas défini/attributs de variable

Je crée donc un shortcode qui utilise le carrousel de démarrage standard.

Cela fonctionne parfaitement tant que les 3 attributs de la diapositive sont entrés correctement, mais évidemment, si seulement 2 sont définis et que le quatrième n'est pas créé, il crée toujours la 3e div de la diapositive, mais n'entre pas dans l'URL de l'image src et crée donc un blanc. faire glisser. La chose est que chaque fois qu'il sera utilisé, il aura un nombre différent de diapositives et je veux que cela fonctionne si seulement 2 URLs des images sont passées ou 4.

les fonctions:

// 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' );

Petit code:

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

Je préférerais deux tableaux d'images, des légendes.

Par exemple:

J'ai ajouté des commentaires sur le code pour une meilleure compréhension.

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' );

Ce code ne générera du curseur HTML que si les images sont attribuées au shortcode. Séparez l’URL de l’image et les légendes par ;;

La mise en oeuvre

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

Le code est donné à des fins de démonstration. Il n'est pas testé et ne doit pas être placé sur un site de production sans test.

2
Sisir