web-dev-qa-db-fra.com

En savoir plus sur la page de poste elle-même

Je sais comment utiliser lire plus de technique pour ne voir qu'un extrait du sujet sur la page d'accueil et cliquer sur l'icône lire plus pour ouvrir l'article et afficher le contenu complet.

Pouvons-nous le faire sur le poste lui-même? Lorsque le visiteur ouvre la page du message lui-même (et non la page d'accueil), seul un extrait est disponible et il doit cliquer sur " lire la suite " pour afficher le contenu complet.

excerptread-more
1
Samer Mahfouz

La solution peut dépendre de la raison exacte pour laquelle vous voulez que cela fonctionne ainsi sur la page de publication. Mais le meilleur moyen serait probablement de le faire du côté client.

Méthode avec hauteur maximale

Disons que votre modèle de message a son contenu comme ceci:

<div id="content"><?php the_content(); ?></div>

Vous devez ajouter un bouton après cette div pour qu'il devienne:

<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

Ensuite, vous ajoutez CSS pour afficher uniquement le contenu jusqu’à une hauteur spécifique. Dans votre style.css, ajoutez:

#content { max-height: 100px; overflow: hidden; }
.show-more { margin-top: 15px; }

Enfin, ajoutez un script qui affichera toute la hauteur du contenu et supprimez le bouton "show-more" après avoir cliqué dessus:

jQuery(document).ready(function($) {
    $('.show-more').click(function() {
        $('#content').css('max-height', 'none');
        $(this).remove();
    });
});

C'est juste une configuration de base, alors n'hésitez pas à ajuster les styles et le script comme vous le souhaitez.

Voici un lien vers le violon où vous pouvez l'essayer: https://jsfiddle.net/psxtur2L/

Méthode de remplacement du contenu

Si vous voulez montrer spécifiquement l'extrait en version courte, vous pouvez le faire de cette façon.

Dans votre modèle, vous ajoutez à la fois l'extrait et le contenu, ainsi qu'un bouton comme celui-ci:

<div id="excerpt"><?php the_excerpt(); ?></div>
<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

En CSS, il vous suffit de masquer le contenu par défaut:

#content { display: none; }
.show-more { margin-top: 15px; }

Et puis vous cachez l'extrait et affichez le contenu lorsque l'utilisateur clique sur le bouton:

jQuery(document).ready(function($) {
    $('.show-more').click(function() {
        $('#excerpt').hide();
        $('#content').show();
        $(this).remove();
    });
});

Voici un violon pour ça: https://jsfiddle.net/o7z2Lsks/

Notez que l'utilisateur peut accéder à l'intégralité du contenu sans cliquer sur le bouton s'il utilise l'outil de débogage du navigateur, mais je suppose que ce n'est pas important. Si vous devez vérifier si l'utilisateur est connecté, etc., vous devriez plutôt utiliser AJAX, de sorte que d'autres ajouts au code seraient nécessaires.

1
Dmitriy Demir