web-dev-qa-db-fra.com

Ajouter HTML à l'aide de Shortcode

J'ai écrit un plugin WordPress qui a un shortcode. Le shortcode réside sur une page WordPress sur laquelle se trouvent d'autres shortcodes. Les autres codes courts produisent du code HTML et j'aimerais ajouter le code HTML de mon code court à ce résultat.

Je me demandais si je pouvais utiliser un DOMDocument et un getElementById pour accomplir cela.

La page WordPress est comme ceci:

[Shortcode #1]

[Shortcode #2]

[Shortcode #3]

[date_info]

Mon plugin fait ceci:

function date_important_info(){

ob_start();
display_date($date);
$html = do_shortcode( ob_get_clean() );
return $html;

function display_date($date){ ?>
    <div style="">
        <span>Date:</span>
        <span><?php echo $date ?></span>
    </div>  
<?php }
}

add_shortcode('date_info','date_important_info');

Actuellement, ma sortie de shortcode apparaît au bas de la page Wordpress. Je veux que la sortie de mon shortcode soit ajoutée à une div du HTML qui est sortie par l'un des autres shortcodes.

1
zzMzz

Premières choses d'abord. Vous ne devriez pas vraiment utiliser echo dans un shortcode, à moins qu'il n'y ait AUCUN moyen de renvoyer la valeur. Dans votre cas, vous pouvez simplement le convertir en une fonction qui renvoie une valeur:

function date_important_info(){

    return display_date($date);

    function display_date($date){ 
        $data = "
            <div id='my-shortcode' style=''>
                <span>Date:</span>
                <span> {$date} </span>
            </div>";
        return $data;
     }
}

add_shortcode('date_info','date_important_info');

Maintenant, à propos de votre problème avec l’ajout des données. Vous pouvez sélectionner la sortie HTML de votre shortcode et l'ajouter à un autre élément à l'aide de jQuery. Voici un exemple rapide:

// Get shortcode's content
var content = $('#my-shortcode').outerHTML();
// Add it after the element you want
$('#the-element').after(content);

J'ai ajouté un identifiant à l'emballage de votre shortcode pour pouvoir le sélectionner via jQuery. Vous pouvez également utiliser .append() ou .before(), en fonction de vos besoins.

1
Jack Johansson