web-dev-qa-db-fra.com

Ajout du lien Afficher moins/Plus à Custom Post Meta

Alors,

J'ai un type d'article avec des boîtes de méta personnalisées. Une des méta-boîtes est pour plus de détails. Je montre le type de message personnalisé à l'intérieur d'autres messages en utilisant un shortcode.

Je peux montrer les détails supplémentaires sur le frontend. Lorsque les détails sont longs, je veux ajouter un lien Afficher plus qui affichera le reste des détails lorsque vous cliquez dessus.

Comment je fais ça?

Quelque chose comme ils ont ici. https://www.retailmenot.com/ Lorsque vous cliquez sur "Plus", tous les détails sont affichés.

Merci d'avance.

custom-post-typescustom-field
1
Imtiaz Rayhan

Ce que vous décrivez, et l'exemple que vous avez lié, utilise du javascript pour basculer l'attribut de style d'affichage d'un conteneur div.

L'exemple que vous avez lié ne l'utilise que lorsque des détails supplémentaires sont disponibles, et ils les ont placés dans une division distincte du texte de description, etc.

La fonctionnalité fonctionne comme suit:

Nous avons un certain divs avec des identifiants, et un <span> avec un onclick appelant notre fonction javascript, showHide(). Dans cet exemple, il s’agit d’afficher/cacher la div avec l’identifiant showAndHide:

<div id="somewrapper">
    <div id="always-visible">
        <span onclick="showHide()">Read More</span>
    </div>
    <div id="showAndHide">
        <p>This is the show-and-hide div.</p>
    </div>
</div>

Pour la portion javascript:

Nous obtenons la div par son identifiant et lui donnons une variable, ici sh. Ensuite, nous vérifions l’état de l'attribut sh style: display. S'il s'agit de none, la onclick() la définit sur block pour l'afficher. S'il a block, alors il le définit none, le "cache" .

Tout cela se fait très facilement en quelques lignes de code:

<script>
function showHide() {
    var sh = document.getElementById('showAndHide');
    if (sh.style.display === 'none') {
        sh.style.display = 'block';
    } else {
        sh.style.display = 'none';
    }
}
</script>

Le W3C en donne un exemple très clair que vous pouvez essayer dans votre navigateur

En tant que note de bas de page , vous pouvez obtenir une fonctionnalité similaire avec l'attribut css visibility, mais il se comporte différemment. Display:none; ne prendra pas d'espace, il est effectivement supprimé; tandis que avec visibility:hidden; la place de l'élément est préservée. C'est à moins que vous n'utilisiez des éléments table et n'utilisiez que la valeur collapse. Puisque l'exemple que vous avez lié n'était pas à l'aide de trs, et l'espace est développé / collapse , j'ai opté pour Display:Block/None. Pour en savoir plus sur la visibilité: visible/masqué/réduire ici.

A much more knowledgeable explanation on the differences between Display and Visibility

Ajout de cette fonctionnalité à la sortie d'un shortcode dans wordpress

1) Vous avez besoin des identifiants des éléments que vous souhaitez afficher/masquer.

2) Si vous voulez ajouter un texte "read more" et cliquer, vous devrez connaître a) un point mesurable auquel l'insérer dans la div qui le contient, ou b) un élément auquel il peut être préfixé ou ajouté .

3) prenez la ou les fonctions javascript complètes, ajoutez-les à un fichier, myShowHide.js éventuellement, et transférez-les dans le répertoire de votre thème enfant.

4) Dans functions.php , enregistrez le script avec wp_register_script et mettez-le en file d'attente avec wp_enqueue_script pour inclure ce fichier javascript dans vos pages de modèles. Vous pouvez également insérer wp_enqueue_script dans une fonction si vous en avez besoin pour inclure uniquement le script sur certaines pages.

1
hwl

vous pouvez essayer ceci pour vous les données de meta box:

Interrogez vos métadonnées avec ceci:

<?php 
    $slider = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => 5,
            'post_status'   => 'publish',
             'meta_query' => array(
                         array(
                            'key' => 'your metabox key',
                            'value' => 'your metabox value',
                            'compare' => 'IN'
                        ) 
                    )


    ));

    if($slider->have_posts()) :
    while($slider->have_posts()) : $slider->the_post();
    $idd = get_the_ID();
?>

         <?php echo get_excerpt(); ?>
    <?php   

    endwhile;
    endif;



    ?>

Et mettez ce code dans functions.php:

function get_excerpt(){

$excerpt = get_the_content();

$excerpt = preg_replace(" (\[.*?\])",'',$excerpt);

$excerpt = strip_shortcodes($excerpt);

$excerpt = strip_tags($excerpt);

$excerpt = substr($excerpt, 0, 820);

$excerpt = substr($excerpt, 0, strripos($excerpt, " "));

$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));

$excerpt = $excerpt.'.... <a href="'.get_permalink().'"  class="read_more"><h4 style="margin:0;">Details</h4></a>';

return $excerpt;

}
0
Porosh Ahammed