Cum să creezi o galerie de albume foto în WordPress fără plugin
Publicat: 2021-11-12
În acest articol, vă vom arăta cum să creați o galerie de album foto în WordPress fără un plugin.
Știm cu toții că, cu pluginuri în WordPress, nimic nu este imposibil de realizat.
Dar cu cât folosești mai multe plugin-uri, cu atât performanța site-ului tău web se degradează.
Pentru orice site, galeria joacă un rol foarte important.
Dacă galeria dvs. implică lucrări și filtre complicate, performanța întregului site web poate lua o bătaie.
O galerie de albume foto ar trebui să aibă mai multe fotografii în interiorul ei.
Aici creăm un album lunar, astfel încât fiecare album să aibă o imagine de copertă, iar când faceți clic pe imaginea de copertă, vă duce în interiorul albumului pentru a verifica fiecare fotografie în parte.
De asemenea, trebuie să știți cum să creați o galerie de album foto în WordPress fără un plugin pentru a face sarcini complicate pentru care trebuia să cumpărați un plugin premium dacă doriți să utilizați un plugin.
În plus, puteți utiliza unul dintre aceste programe de editare foto pentru a edita fotografiile care vor fi atașate la galeria de albume foto.
Pași pentru a crea o galerie de album foto în WordPress fără un plugin
Toate caracteristicile necesare pentru atingerea scopului pot fi realizate folosind funcționalitățile încorporate WordPress. Considerați fiecare album lunar ca pe o postare cu propria sa pagină. Luați în considerare fiecare imagine din albume ca un atașament cu propria pagină.
Albumele vor avea nevoie de o miniatură, iar caracteristica este încorporată în WordPress. Dacă site-ul dvs. este site-ul unui fotograf, atunci puteți transforma postările implicite cu un album. În caz contrar, trebuie să creați un tip de postare personalizat.
Creați un plugin specific pentru site (nu gata făcut) și un tip de postare personalizat
Trebuie să creați un plugin specific site-ului care nu depinde de tema dvs. Sunt utile pentru a crea tipuri de postări personalizate, pentru a adăuga coduri scurte, pentru a afișa miniaturi și de asemenea. Pentru a crea un plugin specific site-ului, trebuie să mergeți la directorul de pluginuri folosind FTP.
Sub wp-content/plugins/ creați un folder nou și denumiți folderul cu același nume cu pluginul pe care doriți să îl creați. Intrați în folder și creați un fișier php cu același nume ca și folderul. Lipiți următorul cod în interiorul fișierului.
/* Nume plugin: Site Plugin pentru website.com Descriere: codul specific site-ului se modifică pentru website.com */ /* Începeți să adăugați funcții sub această linie */ /* Opriți adăugarea de funcții sub această linie */
Salvați fișierul și ieșiți. Codul de mai sus nu are nicio semnificație și va fi înlocuit atunci când este creat tipul de postare personalizat.
Generați codul pentru tipul de postare personalizat din Generatorul de coduri pentru tipul de postare personalizat WordPress.
Afișarea dimensiunilor suplimentare de imagine și a câmpurilor suplimentare–
Din Tabloul de bord admin, accesați Aspect și apoi Editor. Localizați fișierul functions.php și adăugați următorul cod pentru înregistrarea unei dimensiuni suplimentare a imaginii pentru afișarea grilei.
add_image_size('album-grid', 225, 150, true );
Dacă doriți să adăugați câmpuri personalizate suplimentare la Media Uploader, cum ar fi numele fotografului, paginile acestuia și alte informații atunci când încărcați o imagine, trebuie să adăugați următorul cod în functions.php.
/**
* Adăugați câmpuri pentru numele fotografului și adresa URL la instrumentul de încărcare media
* @param $form_fields matrice, câmpuri de inclus în formularul de atașament
* @param $post obiect, înregistrare atașată în baza de date
* @return $form_fields, câmpuri de formular modificate
*/
funcția be_attachment_field_credit( $form_fields, $post ) {
$form_fields['fii-nume-fotograf'] = matrice(
„label” = „Numele fotografului”,
„input” = „text”,
'value' = get_post_meta( $post-ID, 'fie_photographer_name', true ),
'helps' ='Dacă este furnizat, creditul foto va fi afișat',
);
$form_fields['be-photographer-url'] = array(
'label' ='Adresa URL a fotografului',
'input' ='text',
'value' =get_post_meta( $post-ID, 'be_photographer_url', true ),
„helps” = „Adăugați adresa URL a fotografului”,
);
returnează $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );
/**
* Salvați valorile numelui și URL-ului fotografului în instrumentul de încărcare media
* @param $post array, datele de post pentru baza de date
* @param $attachment array, câmpuri de atașare din formularul $_POST
* @return $post matrice, date de postare modificate
*/
funcția be_attachment_field_credit_save( $post, $attachment ) {
if( isset( $attachment['fii-nume-fotograf'] ) )
update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );
if( isset( $attachment['fi-fotograf-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );
returnează $post;
}
add_filter( 'attachment_fields_to_save', 'fi_attachment_field_credit_save', 10, 2 );
După cum puteți vedea, va adăuga două câmpuri de text în Media Uploader și anume Numele fotografului și URL-ul fotografului.
Crearea paginilor pentru a afișa toate albumele
Acum, este timpul să creați niște albume (tipuri de postări personalizate) și să adăugați fotografii la ele. Imaginea prezentată va fi imaginea de copertă a albumului. Conținutul pe care îl adăugați în zona de conținut a postării va deveni descrierea albumului.
Pagina șablon pentru albume
Creați un fișier și denumiți-l archive-albums.php. Copiați antetul, subsolul, bara laterală și alte coduri ale elementelor UI și inserați-le în el. Lipiți următorul cod în el pentru a afișa toate albumele într-o singură pagină.
<li class="album-grid">a href=" title=""</a></li>
post_type == 'albume' $post-post_status == 'publicare' ) {
$attachments = get_posts( array(
'post_type' ='atașament',
„posts_per_page” =-1,
'post_parent' =$post-ID,
„exclude” =get_post_thumbnail_id()
) );
if ( $atașamente ) {
foreach ( $atașamente ca $atașament ) {
$class = "post-atașament mime-" . sanitize_title( $attachment-post_mime_type );
$titlu = wp_get_attachment_link( $attachment-ID, 'album-grid', true );
echo '<li class="' . $class . 'album-grid">' . $titlu . „</li>”;
}
}
}
Plasați următorul cod în fișierul CSS principal al temei, astfel încât imaginile de copertă să fie afișate într-o grilă.
.album-grid{lățime: 225px; înălțime: 150px; plutește la stânga; stil-listă: niciunul; list-style-type: niciunul; marjă: 0 18px 30px 0px;}
Pagină șablon pentru fiecare imagine
Creați un fișier și denumiți-l single-attachments.php. Copiați tot codul din single.php pre-construit al temei. Îl puteți găsi în Editor din meniul Aspect. Apoi găsiți codul buclei în single-attachments.php și înlocuiți acea secțiune cu următoarea.
if ( have_posts() ): în timp ce ( have_posts() ): the_post();
$fotograf = get_post_meta($post-ID, 'fi_nume_fotograf', true);
$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);
<h1>the_title();</h1>
<div class="photometa"><span class="photographername"> echo $photographer; </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>
altceva:
<a>ID) " title=" echo wp_specialchars( get_the_title($post-ID), 1 )" rel="attachment"echo basename($post-guid) </a>
endif;
</div>
sfârşitul timpului;
endif;