Wie füge ich jedes Bild der Galerie in ein bestimmtes Div ein? WordPress

Lesezeit: 1 Minute

Benutzer-Avatar
Zkk

Ich versuche zu Reproduziere dieses Mauerwerk um eine Galerie zu zeigen. Dafür habe ich ein CPT erstellt. “CPT – Galerie”.

Zuerst dachte ich daran, einen benutzerdefinierten Beitragstyp zu erstellen, um alle Bilder zusammen zu veröffentlichen.

MEIN CPT:

—>>> Titel <<<---
—>>> Standardbild – Vorschaubild <<<---
—>>> Inhalt <<<---
—>>>Bilder<<<---
—>>>Bilder<<<---

Die ersten drei Abschnitte (Titel, Standardbild und Inhalt) sind die Grundlagen. Ist bereit.

Danach dachte ich darüber nach, eine benutzerdefinierte Metabox zu verwenden und jede Bild-URL hinzuzufügen. URL für URL hinzufügen ist jedoch nicht intuitiv und viel mehr Arbeit für den Benutzer, egal ob Anfänger oder Fortgeschrittener. Darüber hinaus kann die Anzahl der Bilder variieren, kann 1 sein, kann 5 sein, kann 10 sein und so weiter.

Ich habe gesehen, dass es eine gibt Plugin für WordPressaber das Plugin ist nicht in voller Breite und wenn ich das setze css des Plugins auf voller Breite, die Mansory bekommt mehrere Fehler in der Größenänderung des Ansichtsfensters.

Als ich die Funktionsweise des Plugins und Ihres Codes bemerkte, sah ich, dass das Plugin in jedem Beitrag die eigene Galerie des WordPress-Editors verwendet. Es nimmt den generierten Shortcode (innerhalb von the_content();) und zeigt die Bilder innerhalb der Mansory-Klassen an.

Ich versuche dies zu tun, aber ohne Erfolg.

Wie auch immer, was will ich tun?

-> Fangen Sie den Shortcode der WordPress-Galerie und zeigen Sie jedes Bild in der an divs von meiner masonry <-

Beispiel logisch:
Shortcode der Galerie:

Ich nehme jedes Bild und zeige es in der Schleife an.

Praxisbeispiel:

Hier führe ich die Schleife mit dem aus divs von masonry.

<?php
  $args = array( 'post_type' => 'gallery', 'showposts' => 1 );
  $wp_query = new WP_Query($args);
  if(have_posts()):
    while ($wp_query -> have_posts()) : $wp_query -> the_post();
?>

<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://stackoverflow.com/questions/39045962/<?php IMAGE 1 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="https://stackoverflow.com/questions/39045962/<?php IMAGE 1 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

Mit der Schleife erscheinen alle Bilder in der Galerie.

<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://stackoverflow.com/questions/39045962/<?php IMAGE 2 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="https://stackoverflow.com/questions/39045962/<?php IMAGE 2 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="<?php IMAGE 3 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="<?php IMAGE 3 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

 and so on.....

Wie kann ich das tun?

Du warst fast da. Sie müssen nur die Galeriebilder abrufen und durchlaufen. So etwas sollte für Sie funktionieren. Referenz hier: https://codex.wordpress.org/Function_Reference/get_post_gallery_images

<?php
global $post;
$gallery = get_post_gallery_images( $post );

foreach( $gallery as $image_url ) {
?>
<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://stackoverflow.com/questions/39045962/<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="https://stackoverflow.com/questions/39045962/<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>
<?php 
}
?>

  • Einfach genug! Ich habe tagelang nach einer Lösung gesucht und keine gefunden. Einschließlich der Dokumentation hat mich vielleicht Eile beim Lesen gehindert. Trotzdem danke! (Ich warte auf den Zeitraum von 24 Stunden des Stapelüberlaufs, um Ihre 50 Punkte zu vergeben.)

    – Zkk

    22. August 2016 um 14:41 Uhr

  • Froh, dass ich helfen konnte 🙂

    – Mike

    22. August 2016 um 15:01 Uhr

1186830cookie-checkWie füge ich jedes Bild der Galerie in ein bestimmtes Div ein? WordPress

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

Privacy policy