it-swarm.com.de

Lesen Sie mehr auf der Beitragsseite

Ich kann mit read more technique nur einen Ausschnitt des Themas auf der Homepage anzeigen und auf das Symbol read more klicken, um den Beitrag zu öffnen und den vollständigen Inhalt anzuzeigen.

Können wir das auf der Post selbst machen? Wenn der Besucher die Postseite selbst öffnet (nicht die Homepage), ist nur ein Auszug verfügbar und er sollte auf " read more " klicken, um den gesamten Inhalt anzuzeigen.

1
Samer Mahfouz

Die Lösung kann davon abhängen, warum genau Sie möchten, dass es auf der Post-Seite so funktioniert. Aber wahrscheinlich wäre der beste Weg, dies auf der Client-Seite zu tun.

Methode mit maximaler Höhe

Nehmen wir an, Ihre Post-Vorlage hat folgenden Inhalt:

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

Sie müssen nach diesem div eine Schaltfläche hinzufügen, damit es wie folgt aussieht:

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

Dann fügen Sie CSS hinzu, um den Inhalt nur bis zu einer bestimmten Höhe in Ihrem style.css anzuzeigen.

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

Fügen Sie schließlich ein Skript hinzu, das den gesamten Inhalt anzeigt, und entfernen Sie die Schaltfläche "Mehr anzeigen", nachdem Sie darauf geklickt haben:

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

Es ist nur eine grundlegende Einrichtung, Sie können also die Stile und das Skript beliebig anpassen.

Hier ist ein Link zur Geige, wo Sie es ausprobieren können: https://jsfiddle.net/psxtur2L/

Methode zum Ersetzen des Inhalts

Wenn Sie den Auszug speziell als Kurzversion anzeigen möchten, können Sie dies auf diese Weise tun.

In Ihrer Vorlage fügen Sie sowohl den Auszug als auch den Inhalt und eine Schaltfläche wie folgt hinzu:

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

In CSS verstecken Sie den Inhalt einfach standardmäßig:

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

Anschließend blenden Sie den Auszug aus und zeigen den Inhalt an, wenn der Benutzer auf die Schaltfläche klickt:

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

Hier ist eine Fiedel dafür: https://jsfiddle.net/o7z2Lsks/

Beachten Sie, dass der Benutzer auf den gesamten Inhalt zugreifen kann, ohne auf die Schaltfläche zu klicken, wenn er das Debugger-Tool des Browsers verwendet. Ich gehe jedoch davon aus, dass dies nicht wichtig ist. Wenn Sie überprüfen müssen, ob der Benutzer angemeldet ist usw., sollten Sie lieber AJAX verwenden, damit mehr Code hinzugefügt werden muss.

1
Dmitriy Demir