WordPress-Seiteninhalt in Modal Pop-Up

Lesezeit: 3 Minuten

Ich arbeite an einer WordPress-Galerie-Website, die nur drei Seiten hat: Startseite, Galerie und Bio (http://adamgreener.com/).

Wenn Sie auf Bio klicken, wird der Bio-Inhalt angezeigt, powered by Einfaches Modal Plugin (der Inhalt wird manuell in HTML in den Plugin-Einstellungen eingegeben).

Ich habe auch genau den gleichen HTML-Inhalt in einer WordPress-Seite (die mobile Zuschauer sehen, anstatt ein Popup).

Die Seite ist sehr einfach zu bearbeiten, aber der modale Inhalt ist für den durchschnittlichen Benutzer nicht so freundlich. Ich suche nach einer Möglichkeit, dem Benutzer zu ermöglichen, nur die Bio-Seite zu bearbeiten und gleichzeitig diesen modalen Inhalt zu aktualisieren.

Was wäre der beste Weg für eine solche Aktion?

Danke im Voraus!

Benutzer-Avatar
diggy

Du könntest benutzen get_page um den Seiteninhalt zu erhalten, und einen Shortcode, um ihn im Popup anzuzeigen. In dem functions.php Datei Ihres WordPress-Themes, zB:

add_action( 'init', 'greener_shortcode_init', 11 );
function greener_shortcode_init()
{
    add_shortcode( 'greener_bio', 'greener_bio_shortcode' );
}

function greener_bio_shortcode( $atts )
{
    $page_id = 123; // the ID of the Bio page
    $page_data = get_page( $page_id );
    $return = '';
    $return .= '<h2>' . $page_data->post_title . '</h2>';
    $return .= $page_data->post_content;
    return $return;
}

Verwenden Sie dann in Ihrem Modal den Shortcode:

[greener_bio]

  • Das klingt nach einer supereinfachen Lösung. Es wirft jedoch einen schwerwiegenden Fehler, wenn ich versuche, dies in die functions.php-Seite einzufügen, und besagt, dass es eine undefinierte Funktion aufruft. PHP ist nicht meine Stärke. Danke für deine Hilfe, Diggy.

    – Aganator

    3. Mai 2013 um 14:04 Uhr

  • Schwerwiegender Fehler: Aufruf der undefinierten Funktion add_shortcode() in /nfs/c09/h04/mnt/140053/domains/adamgreener.com/html/wp-includes/functions.php in Zeile 3871

    – Aganator

    3. Mai 2013 um 15:09 Uhr

  • Hmmm .. Ein bisschen seltsam, ich habe es auf meiner lokalen Installation getestet und es funktioniert einwandfrei. Versuchen Sie, das einzuhaken add_shortcodeFunktion hinein initich habe meine Antwort bearbeitet.

    – diggy

    3. Mai 2013 um 15:16 Uhr

  • Hast du getauscht 123 mit der richtigen Seiten-ID? Sie können auch versuchen, die Zeile zu ersetzen $return .= apply_filters( 'the_content', $page_data->post_content ); mit $return .= $page_data->post_content;weil ich denke, dass das Modal den Filter für dich anwendet.

    – diggy

    3. Mai 2013 um 15:34 Uhr

  • Um sicherzugehen, sollte der Code in die eingefügt werden functions.php Datei Ihres WordPress-Themes, nicht in wp-includes/functions.php

    – diggy

    3. Mai 2013 um 15:38 Uhr

Benutzer-Avatar
Allure Web-Lösungen

Es gibt zwei Möglichkeiten, um das zu erreichen, was Sie anstreben, beide ausführlich in meinem Blogbeitrag beschrieben: https://allurewebsolutions.com/open-wordpress-post-modal-ohne-plugin

Sie können dafür auch einfach mein Plugin verwenden: https://wordpress.org/plugins/wp-post-modal/

Erste Methode

Die erste Methode erfordert das Ändern der Vorlage, die den Inhalt bereitstellt, der im Modal angezeigt werden soll. Beispielsweise haben Sie eine Vorlage mit dem Namen modal-content-template.php.

Innerhalb dieser Vorlage verpacken wir den Inhalt, den wir in das Modal laden möchten, mit:

<?php if (!$_GET) { ?>
    // content that gets loaded on mobile
<?php } ?>

Vollständiges Beispiel einer Vorlage, bei der wir die Kopf- und Fußzeile von WordPress ausschließen:

<?php if (!$_GET) { get_header(); } ?>

<article>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <h1 class="page-title"></h1>

  <section class="entry-content cf">
    <?php the_content(); ?>
  </section>

</article>

<?php if (!$_GET) { get_footer(); } ?>

CodePen-Beispiel für das JS, das erforderlich ist, damit dies funktioniert

Zweite Methode

Die zweite Methode ist etwas eleganter. Wir benutzen das modalContent.load(post_link + ' #modal-ready'); Methode zum Laden des modalen Inhalts.

Der modale Kontakt wird in einen Wrapper-Container mit ID verpackt #modal-ready. Mit einer Funktion, die sich in den Inhalt einklinkt, ist dies möglich, ohne die Seitenvorlage zu berühren.

add_action('the_content', 'wrap_content');
function wrap_content($content)
{
    return '<div id="modal-ready">' . $content . '</div>';
}

  • Ich habe versucht, Ihr Plugin zu verwenden, aber in den Einstellungen des Plugins kann ich die Links nur basierend auf der Element-ID und nicht der Klasse ansprechen.

    – Alex Williams

    14. Juni 2020 um 1:23 Uhr

1252060cookie-checkWordPress-Seiteninhalt in Modal Pop-Up

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy