WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an

In diesem Tutorial erfahren Sie, wie Sie die URL des vorgestellten Bilds der Website-Homepage dynamisch in einer benutzerdefinierten WordPress-Vorlage abrufen und anzeigen. Durch die Nutzung der integrierten Funktionen von WordPress können Sie ohne harte Codierung problemlos auf seitenübergreifende Bildressourcen verweisen und so die Flexibilität und Wartbarkeit von Website-Inhalten verbessern. Es eignet sich besonders für Szenarien, in denen Sie bestimmte Inhalte auf einer anderen Seite (z. B. der Homepage) auf einer Seite anzeigen müssen.

Bei der WordPress-Entwicklung müssen wir häufig bestimmte Inhalte von anderen Seiten (z. B. „Home“) auf der aktuellen Seite (z. B. „Über uns“) anzeigen, insbesondere das vorgestellte Bild. Dieser Bedarf besteht besonders häufig bei der Erstellung stark angepasster Themes, insbesondere wenn Content-Manager diese Bilder dynamisch über das WordPress-Backend aktualisieren müssen. In diesem Tutorial erfahren Sie ausführlich, wie Sie dieses Ziel mithilfe von PHP-Code erreichen und sicherstellen, dass der Bildpfad dynamisch und flexibel ist.

Kernideen für die Umsetzung

Um das vorgestellte Bild für die WordPress-Homepage dynamisch zu erhalten, müssen wir diese drei Hauptschritte befolgen:

1. Bestimmen Sie die Homepage-ID: WordPress ermöglicht es Benutzern, unter „Einstellungen“ -> „Lesen“ eine Seite als statische Startseite der Website festzulegen. Wir müssen die ID dieser Seite erhalten.
2. Holen Sie sich die ID des vorgestellten Bildes: Mit der ID der Homepage können wir über die WordPress-Funktion die Anhang-ID des auf der Seite festgelegten vorgestellten Bildes abrufen.
3. Holen Sie sich die Bild-URL oder das vollständige HTML-Tag: Mithilfe der Anhang-ID können wir schließlich die vollständige URL des Bildes abrufen oder direkt ein -Tag generieren, das die Bild-URL enthält.

Code-Implementierung und -Analyse

Unten finden Sie ein PHP-Code-Snippet, das die oben genannte Funktionalität implementiert und das Sie in Ihre benutzerdefinierte Vorlagendatei einfügen können (z. B. about.php, page.php oder jede andere Vorlage, die Sie zum Anzeigen des vorgestellten Bildes auf Ihrer Homepage benötigen).

Schritt 1: Holen Sie sich die Homepage-ID

WordPress bietet eine Option zum Speichern der Seiten-ID als statische Homepage. Wir können diesen Wert mit der Funktion get_option() abrufen.

 <?php // Holen Sie sich die als statische Homepage festgelegte Seiten-ID
$home_id = get_option(&#39;page_on_front&#39;);

// Prüfen, ob die Homepage-ID erfolgreich erhalten wurde und ob die ID einer vorhandenen Seite entspricht if (empty($home_id) || !get_post($home_id)) {
    // Wenn keine statische Homepage festgelegt ist oder die Homepage nicht existiert, können Sie eine Fehlerbehandlung durchführen oder den Standardwert verwenden // Sie können beispielsweise versuchen, den neuesten Artikel als Homepage abzurufen, oder direkt zurückgeben // error_log(&#39;WordPress-Homepage-ID nicht gefunden oder ungültig.&#39;);
    zurückkehren; //Frühzeitig beenden, um Folgefehler zu vermeiden}
?>

get_option('page_on_front') gibt die Seiten-ID zurück, die als statische Homepage festgelegt ist. Wenn die Site keine statische Startseite hat (sondern stattdessen die neuesten Artikel anzeigt), ist dieser Wert möglicherweise leer oder nicht anwendbar.

Schritt 2: Holen Sie sich die vorgestellte Bild-ID

Nachdem wir die ID der Homepage haben, können wir die Funktion get_post_thumbnail_id() verwenden, um die ID des vorgestellten Bildanhangs der Seite abzurufen.

 <?php // ... (Fortsetzung des obigen Codes)

// Holen Sie sich die ID des vorgestellten Bildanhangs der Homepage
$home_thumb_id = get_post_thumbnail_id($home_id);

// Überprüfen Sie, ob die vorgestellte Bild-ID erfolgreich erhalten wurde
if (empty($home_thumb_id)) {
    // Wenn das vorgestellte Bild nicht auf der Homepage festgelegt ist, können Sie eine Fehlerbehandlung durchführen oder Platzhalter anzeigen // echo &#39;<p>Das vorgestellte Bild ist nicht auf der Homepage festgelegt. ';
    zurückkehren; //Früh verlassen}
?&gt;

Die Funktion get_post_thumbnail_id($post_id) empfängt eine Beitrags-/Seiten-ID als Parameter und gibt die Anhangs-ID des vorgestellten Bildes zurück. Wenn kein vorgestelltes Bild festgelegt ist, wird false oder 0 zurückgegeben.

Schritt 3: Holen Sie sich die Bild-URL oder das vollständige HTML-Tag

Da wir nun die Anhang-ID des vorgestellten Bildes haben, können wir wählen, ob wir das vollständige -Tag des Bildes oder nur die URL des Bildes abrufen möchten.

Methode 1: Geben Sie das vollständige -Tag direkt aus

WordPress bietet die Funktion wp_get_attachment_image(), die direkt ein vollständiges -Tag basierend auf der Anhang-ID generieren und die Bildgröße angeben kann.

 <?php // ... (Fortsetzung des obigen Codes)

// Den vollständigen <img  alt="WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an" >-Tag direkt ausgeben, mit der Größe „groß“ echo wp_get_attachment_image($home_thumb_id, 'large');
?&gt;

wp_get_attachment_image($attachment_id, $size, $icon, $attr):

• $attachment_id: Anhang-ID des vorgestellten Bildes.
• $size: Bildgröße, die eine Zeichenfolge (z. B. „Miniaturansicht“, „Mittel“, „Groß“, „Voll“) oder ein Array (Breite, Höhe) sein kann.
• $icon: (optional) ob es sich um ein Symbol handelt.
• $attr: (optional) ein assoziatives Array, das zum Hinzufügen zusätzlicher Attribute (wie Alt, Klasse, ID usw.) zum -Tag verwendet wird.

Methode 2: Rufen Sie die Bild-URL ab und erstellen Sie das -Tag manuell

Wenn Sie eine detailliertere Kontrolle über die Attribute des -Tags benötigen oder einfach die Bild-URL für andere Zwecke benötigen (z. B. als CSS-Hintergrundbild), können Sie die Funktion wp_get_attachment_image_src() verwenden.

 <?php // ... (Fortsetzung des obigen Codes)

// Bild-URL, Breite, Höhe und andere Informationen abrufen // Ein Array zurückgeben: [url, width, height, is_intermediate]
$image_attributes = wp_get_attachment_image_src($home_thumb_id, &#39;large&#39;);

if ($image_attributes) {
    $image_url = $image_attributes[0]; // Das erste Element des Arrays ist die Bild-URL
    ?>
    <img src="&lt;?php%20echo%20esc_url(%24image_url);%20?&gt;" alt="WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an" class="homepage-featured-image">
    <?php }
?>

wp_get_attachment_image_src($attachment_id, $size, $icon):

• Die Parameter ähneln wp_get_attachment_image().
• Gibt ein Array zurück, das die Bild-URL, Breite, Höhe und die Angabe der mittleren Größe enthält.

Vollständiger Beispielcode

Integrieren Sie die oben genannten Schritte in Ihre benutzerdefinierte Vorlage, beispielsweise in die Vorlagendatei der Seite „Über uns“ (page-about.php oder single.php usw.):

 <?php /**
 * Vorlagenname: Über-Seite mit ausgewähltem Startseitenbild
 */

get_header(); // Den Theme-Header laden // Die als statische Homepage festgelegte Seiten-ID abrufen
$home_id = get_option(&#39;page_on_front&#39;);

// Stellen Sie sicher, dass die Homepage-ID gültig ist if (empty($home_id) || !get_post($home_id)) {
    echo &#39;<p>Homepage-Informationen konnten nicht abgerufen werden, bitte überprüfen Sie die WordPress-Einstellungen. ';
} anders {
    // Holen Sie sich die ID des vorgestellten Bildanhangs der Homepage
    $home_thumb_id = get_post_thumbnail_id($home_id);

    // Stellen Sie sicher, dass das vorgestellte Bild auf der Startseite festgelegt ist if (empty($home_thumb_id)) {
        echo '<p>Das vorgestellte Bild ist nicht auf der Startseite eingestellt. </p>';
    } anders {
        //Methode 1: Das vollständige <img  alt="WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an" >-Tag direkt ausgeben echo '<div class="homepage-featured-image-wrapper">';
        echo wp_get_attachment_image($home_thumb_id, 'full', false, array('alt' =&gt; 'Featured image on website homepage', 'class' =&gt; 'homepage-featured-image'));
        echo '</div>';

        //Methode 2: Holen Sie sich die URL und erstellen Sie das <img  alt="WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an" >-Tag manuell (wenn Sie eine flexiblere Steuerung benötigen)
        $image_attributes = wp_get_attachment_image_src($home_thumb_id, 'large');
        if ($image_attributes) {
            $image_url = $image_attributes[0];
            ?&gt;
            <p>Die folgenden Bilder wurden über die URL erhalten:</p>
            <img src="&lt;?php%20echo%20esc_url(%24image_url);%20?&gt;" alt="Ausgewähltes Bild der Startseite (URL-Methode)" class="homepage-featured-image-url-method">
            <?php }
    }
}

// Den Inhalt der aktuellen Seite anzeigen while (have_posts()): the_post();
    ?>
    <article id="post-&lt;?php the_ID(); ?&gt;" post_class>&gt;
        <header class="entry-header">
            <h1 class="entry-title"><?php the_title(); ?></h1>
        </header>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
    <?php am Ende;

get_footer(); // Den unteren Teil des Themes laden?>

Zu beachtende Dinge und Best Practices

1. Fehlerbehandlung: Dem Code wurden if (empty(...)) und andere Beurteilungen hinzugefügt, um sicherzustellen, dass die Seite keinen PHP-Fehler verursacht, aber benutzerfreundliche Eingabeaufforderungsinformationen oder Platzhalter anzeigen kann, wenn die Homepage nicht festgelegt ist oder das vorgestellte Bild nicht vorhanden ist.

2. Bildgröße: In den Funktionen wp_get_attachment_image() und wp_get_attachment_image_src() können Sie unterschiedliche Bildgrößen angeben (z. B. „WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an“, „Medium“, „Groß“, „Voll“ oder benutzerdefinierte Größen). Die Auswahl der richtigen Größe kann dazu beitragen, die Seitenladegeschwindigkeit und das Benutzererlebnis zu optimieren.

3. ALT-Attribute: Fügen Sie -Tags immer aussagekräftige Alt-Attribute hinzu, dies ist entscheidend für SEO und Barrierefreiheit. Es kann über den Parameter $attr in wp_get_attachment_image() hinzugefügt werden und kann beim manuellen Erstellen direkt hinzugefügt werden.

4. CSS-Stil: Fügen Sie dem -Tag einen Klassennamen (z. B. „homepage-featured-image“) hinzu, damit er über CSS gestaltet werden kann.

5. Als Funktion kapseln: Wenn Sie diese Logik über mehrere Seiten oder Vorlagenabschnitte hinweg wiederverwenden müssen, sollten Sie erwägen, sie in eine benutzerdefinierte Funktion wie get_homepage_featured_image() zu kapseln und sie in der Datei „functions.php“ Ihres Themes zu platzieren.

    // Funktionen.php
   Funktion get_homepage_featured_image_html($size = 'large', $attr = array()) {
       $home_id = get_option('page_on_front');
       if (empty($home_id) || !get_post($home_id)) {
           zurückkehren ''; // oder zum Standardbild zurückkehren}
       $home_thumb_id = get_post_thumbnail_id($home_id);
       if (empty($home_thumb_id)) {
           zurückkehren ''; // oder zum Standardbild zurückkehren}
       return wp_get_attachment_image($home_thumb_id, $size, false, $attr);
   }
   
   Funktion get_homepage_featured_image_url($size = 'large') {
       $home_id = get_option('page_on_front');
       if (empty($home_id) || !get_post($home_id)) {
           zurückkehren '';
       }
       $home_thumb_id = get_post_thumbnail_id($home_id);
       if (empty($home_thumb_id)) {
           zurückkehren '';
       }
       $image_attributes = wp_get_attachment_image_src($home_thumb_id, $size);
       $image_attributes zurückgeben? $image_attributes[0] : '';
   }

   Dann nennen Sie es in der Vorlage:

    <?php echo get_homepage_featured_image_html(&#39;medium&#39;, array(&#39;class&#39; => 'my-custom-class')); ?&gt;
   <img src="&lt;?php%20echo%20esc_url(get_homepage_featured_image_url('thumbnail'));%20?&gt;" alt="WordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an">

Zusammenfassen

Durch dieses Tutorial haben Sie gelernt, wie Sie das vorgestellte Bild dynamisch auf der Homepage in einer benutzerdefinierten WordPress-Vorlage abrufen und anzeigen können. Diese Methode verbessert nicht nur die Flexibilität und Wartbarkeit des Codes, sondern macht auch die Verwaltung von Website-Inhalten komfortabler. Unabhängig davon, ob Sie das -Tag direkt ausgeben oder die Bild-URL abrufen möchten, können die leistungsstarken Funktionen von WordPress Ihre Entwicklungsanforderungen erfüllen und Ihnen beim Aufbau einer dynamischeren und professionelleren Website helfen.

Das obige ist der detaillierte Inhalt vonWordPress-Tutorial: So erhalten Sie dynamisch Bilder auf der Startseite und zeigen sie auf anderen Seiten an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!