So erstellen Sie eine Fotoalbum-Galerie in WordPress ohne Plugin
Veröffentlicht: 2021-11-12
In diesem Artikel zeigen wir Ihnen, wie Sie ohne Plugin eine Fotoalbum-Galerie in WordPress erstellen.
Wir alle wissen, dass mit Plugins in WordPress nichts unmöglich ist.
Aber je mehr Plugins Sie verwenden, desto mehr verschlechtert sich die Leistung Ihrer Website.
Für jede Website spielt die Galerie eine sehr wichtige Rolle.
Wenn Ihre Galerie komplizierte Werke und Filter umfasst, kann die Leistung der gesamten Website einen Schlag aushalten.
Eine Fotoalbum-Galerie sollte mehrere Fotos darin enthalten.
Hier erstellen wir ein monatliches Album, sodass jedes Album ein Titelbild hat und wenn Sie auf das Titelbild klicken, gelangen Sie in das Album, um sich jedes Foto einzeln anzusehen.
Sie müssen auch wissen, wie Sie eine Fotoalbum-Galerie in WordPress ohne Plugin erstellen , um komplizierte Aufgaben zu erledigen, für die Sie ein Premium-Plugin kaufen mussten, wenn Sie ein Plugin verwenden wollten.
Außerdem können Sie eine dieser Fotobearbeitungssoftware verwenden, um Fotos zu bearbeiten, die an Ihre Fotoalbum-Galerie angehängt werden.
Schritte zum Erstellen einer Fotoalbum-Galerie in WordPress ohne Plugin
Alle Funktionen, die zum Erreichen des Zwecks erforderlich sind, können mit den integrierten Funktionen von WordPress ausgeführt werden. Betrachten Sie jedes monatliche Album als einen Beitrag mit einer eigenen Seite. Betrachten Sie jedes Bild in den Alben als Anhang mit einer eigenen Seite.
Die Alben benötigen ein Thumbnail und die Funktion ist in WordPress integriert. Wenn Ihre Website die Website eines Fotografen ist, können Sie Ihre Standardbeiträge in ein Album verwandeln. Andernfalls müssen Sie einen benutzerdefinierten Beitragstyp erstellen.
Erstellen Sie ein standortspezifisches Plugin (nicht fertig) und einen benutzerdefinierten Beitragstyp
Sie müssen ein seitenspezifisches Plugin erstellen, das nicht von Ihrem Thema abhängt. Sie sind nützlich, um benutzerdefinierte Beitragstypen zu erstellen, Shortcodes hinzuzufügen, Miniaturansichten anzuzeigen und dergleichen. Um ein seitenspezifisches Plug-in zu erstellen, müssen Sie mit FTP in das Plug-in-Verzeichnis wechseln.
Erstellen Sie unter wp-content/plugins/ einen neuen Ordner und benennen Sie den Ordner mit dem gleichen Namen wie das Plugin, das Sie erstellen möchten. Gehen Sie in den Ordner und erstellen Sie eine PHP-Datei mit demselben Namen wie der Ordner. Fügen Sie den folgenden Code in die Datei ein.
/* Plugin-Name: Site-Plugin für website.com Beschreibung: Websitespezifische Codeänderungen für website.com */ /* Beginnen Sie mit dem Hinzufügen von Funktionen unterhalb dieser Zeile */ /* Funktionen unterhalb dieser Zeile nicht mehr hinzufügen */
Speichern Sie die Datei und beenden Sie sie. Der oben genannte Code hat keine Bedeutung und wird ersetzt, wenn der benutzerdefinierte Beitragstyp erstellt wird.
Generieren Sie den Code für den benutzerdefinierten Beitragstyp aus dem WordPress Custom Post Type Code Generator.
Zusätzliche Bildgrößen und zusätzliche Felder anzeigen–
Gehen Sie im Admin-Dashboard zu Aussehen und dann zu Editor. Suchen Sie die Datei functions.php und fügen Sie den folgenden Code hinzu, um eine zusätzliche Bildgröße für die Rasteranzeige zu registrieren.
add_image_size( 'album-grid', 225, 150, true );
Wenn Sie dem Media Uploader zusätzliche benutzerdefinierte Felder wie den Namen des Fotografen, seine Seiten und andere Informationen hinzufügen möchten, wenn Sie ein Bild hochladen, müssen Sie den folgenden Code in die functions.php einfügen.
/**
* Fotografenname und URL-Felder zum Medien-Uploader hinzufügen
* @param $form_fields-Array, Felder, die in das Anhangsformular aufgenommen werden sollen
* @param $post-Objekt, Anhangsdatensatz in der Datenbank
* @return $form_fields, modifizierte Formularfelder
*/
Funktion be_attachment_field_credit( $form_fields, $post ) {
$form_fields['be-photographer-name'] = array(
'label' = 'Name des Fotografen',
'Eingabe' = 'Text',
'value' = get_post_meta( $post-ID, 'be_photographer_name', true ),
'helps' = 'Falls angegeben, wird der Bildnachweis angezeigt',
);
$form_fields['be-photographer-url'] = array(
'label' = 'Fotografen-URL',
'Eingabe' = 'Text',
'value' =get_post_meta( $post-ID, 'be_photographer_url', true ),
'helps' = 'Fotografen-URL hinzufügen',
);
$form_fields zurückgeben;
}
add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );
/**
* Speichern Sie die Werte des Fotografennamens und der URL im Medien-Uploader
* @param $post-Array, die Post-Daten für die Datenbank
* @param $attachment-Array, Anhangsfelder aus dem $_POST-Formular
* @return $post-Array, geänderte Postdaten
*/
function be_attachment_field_credit_save( $post, $attachment ) {
if( isset( $attachment['be-photographer-name'] ) )
update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );
if( isset( $attachment['be-photographer-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );
$post zurückgeben;
}
add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
Wie Sie sehen können, werden im Medien-Uploader zwei Textfelder hinzugefügt, nämlich Name des Fotografen und URL des Fotografen.
Erstellen von Seiten zum Anzeigen aller Alben
Jetzt ist es an der Zeit, einige Alben (benutzerdefinierte Beitragstypen) zu erstellen und ihnen Fotos hinzuzufügen. Das Beitragsbild ist das Titelbild des Albums. Der Inhalt, den Sie dem Inhaltsbereich des Beitrags hinzufügen, wird zur Beschreibung des Albums.
Vorlagenseite für Alben
Erstellen Sie eine Datei und nennen Sie sie archive-alben.php. Kopieren Sie den Code für Kopfzeile, Fußzeile, Seitenleiste und andere UI-Elemente und fügen Sie ihn ein. Fügen Sie den folgenden Code ein, um alle Alben auf einer Seite anzuzeigen.
<li class="album-grid">a href="title=""</a></li>
post_type == 'Alben' $post-post_status == 'veröffentlichen' ) {
$anhänge = get_posts( array(
'post_type' = 'Anhang',
'posts_per_page' =-1,
'post_parent' =$post-ID,
'ausschließen' =get_post_thumbnail_id()
) );
if ( $anhänge ) {
foreach ( $Anlagen als $Anlage ) {
$class = "post-attachment mime-" . sanitize_title( $attachment-post_mime_type );
$title = wp_get_attachment_link( $attachment-ID, 'album-grid', true );
echo '<li class="' . $class . 'album-grid">' . $Titel . '</li>';
}
}
}
Fügen Sie den folgenden Code in die Haupt-CSS-Datei Ihres Designs ein, sodass die Titelbilder in einem Raster angezeigt werden.
.album-Grid{Breite: 225px; Höhe: 150px; Schwimmer: links; Listenstil: keiner; Listenstiltyp: keiner; Rand: 0 18px 30px 0px;}
Vorlagenseite für jedes Bild
Erstellen Sie eine Datei und nennen Sie sie single-attachments.php. Kopieren Sie den gesamten Code aus der vorgefertigten single.php des Themes. Sie finden es unter Editor im Menü Aussehen. Suchen Sie dann den Schleifencode in Ihrer single-attachments.php und ersetzen Sie diesen Abschnitt durch den folgenden.
if (have_posts()): while (have_posts()): the_post();
$photographer = get_post_meta($post-ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);
<h1>der_titel();</h1>
<div class="photometa"><span class="Fotografenname"> echo $Fotograf; </span> // <a href=" echo $photographerurl " target="_blank" class="photographerurl" rel="noopener noreferrer"> echo $photographerurl </a></div>
<div class="entry-attachment">
if ( wp_attachment_is_image( $post-id ) ): $att_image = wp_get_attachment_image_src( $post-id, "full");
<p class="attachment"><a>id); " title=" the_title(); " rel="attachment"<img src=" echo $att_image[0];" width=" echo $att_image[1];" height="echo $att_image[2];" class="attachment-medium">post_excerpt ;" /</a>
</p>
anders :
<a>ID) " title=" echo wp_specialchars( get_the_title($post-ID), 1 )" rel="attachment"echo basename($post-guid) </a>
endif;
</div>
am Ende;
endif;