Come creare una galleria di album fotografici in WordPress senza plug-in
Pubblicato: 2021-11-12
In questo articolo, ti mostreremo come creare una galleria di album fotografici in WordPress senza plug-in.
Sappiamo tutti che con i plugin in WordPress, nulla è impossibile da ottenere.
Ma più plugin usi, più le prestazioni del tuo sito web si degradano.
Per qualsiasi sito web, la galleria gioca un ruolo molto importante.
Se la tua galleria prevede lavori e filtri complicati, le prestazioni del sito web in generale possono essere battute.
Una galleria di album fotografici dovrebbe contenere diverse foto al suo interno.
Qui stiamo creando un album mensile in modo che ogni album abbia un'immagine di copertina e quando si fa clic sull'immagine di copertina, ti porta all'interno dell'album per controllare ogni foto individualmente.
Devi anche sapere come creare una galleria di album fotografici in WordPress senza un plug -in per svolgere attività complicate per le quali è necessario acquistare un plug-in premium se si desidera utilizzare un plug-in.
Inoltre, puoi utilizzare uno di questi software di fotoritocco per modificare le foto che verranno allegate alla galleria del tuo album fotografico.
Passaggi per creare una galleria di album fotografici in WordPress senza plug-in
Tutte le funzionalità richieste per raggiungere lo scopo possono essere eseguite utilizzando le funzionalità integrate di WordPress. Considera ogni album mensile come un post con una sua singola pagina. Considera ogni immagine all'interno degli album come un allegato con una singola pagina.
Gli album avranno bisogno di una miniatura e la funzione è integrata in WordPress. Se il tuo sito Web è il sito Web di un fotografo, puoi trasformare i tuoi post predefiniti con un album. Altrimenti, devi creare un tipo di post personalizzato.
Crea plug-in specifico per il sito (non pronto all'uso) e tipo di post personalizzato
Devi creare un plug-in specifico per il sito che non dipenda dal tuo tema. Sono utili per creare tipi di post personalizzati, aggiungere codici brevi, mostrare miniature e simili. Per creare un plug-in specifico per il sito, devi accedere alla directory dei plug-in tramite FTP.
Sotto wp-content/plugins/ crea una nuova cartella e assegna alla cartella lo stesso nome del plugin che desideri creare. Vai all'interno della cartella e crea un file php con lo stesso nome della cartella. Incolla il codice seguente all'interno del file.
/* Nome del plug-in: plug-in del sito per website.com Descrizione: modifiche al codice specifico del sito per website.com */ /* Inizia ad aggiungere funzioni sotto questa riga */ /* Interrompi l'aggiunta di funzioni al di sotto di questa riga */
Salva il file ed esci. Il suddetto codice non ha alcun significato e verrà sostituito quando verrà creato il tipo di post personalizzato.
Genera il codice per il tipo di post personalizzato da WordPress Custom Post Type Code Generator.
Visualizzazione di dimensioni immagine aggiuntive e campi aggiuntivi–
Dal dashboard di amministrazione, vai su Aspetto e poi su Editor. Individua il file functions.php e aggiungi il codice seguente per registrare dimensioni dell'immagine aggiuntive per la visualizzazione della griglia.
add_image_size( 'griglia album', 225, 150, vero);
Se desideri aggiungere ulteriori campi personalizzati al Media Uploader come il nome del fotografo, le sue pagine e altre informazioni quando carichi un'immagine, devi aggiungere il seguente codice nel functions.php.
/**
* Aggiungi il nome del fotografo e i campi URL all'uploader multimediale
* @param $form_fields array, campi da includere nel modulo allegato
* @param $oggetto post, record allegato nel database
* @return $form_fields, campi modulo modificati
*/
funzione be_attachment_field_credit($campi_forma, $post) {
$form_fields['be-photographer-name'] = array(
'etichetta' = 'Nome fotografo',
'input' = 'testo',
'value' = get_post_meta($post-ID, 'be_photographer_name', true),
'helps' ='Se fornito, verrà visualizzato il credito fotografico',
);
$form_fields['be-photographer-url'] = array(
'label' ='URL del fotografo',
'input' = 'testo',
'value' =get_post_meta($post-ID, 'be_photographer_url', true),
'helps' = 'Aggiungi URL fotografo',
);
restituisce $campi_modulo;
}
add_filter('attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2);
/**
* Salva i valori del nome del fotografo e dell'URL nell'uploader multimediale
* @param $post array, i dati del post per il database
* @param $attachment array, campi allegati dal modulo $_POST
* @return $post array, dati post modificati
*/
funzione be_attachment_field_credit_save($post, $allegato) {
if( isset( $attachment['be-photographer-name'] ) )
update_post_meta($post['ID'], 'be_photographer_name', $allegato['be-photographer-name']);
if( isset( $attachment['be-photographer-url'] ) )
update_post_meta($post['ID'], 'be_photographer_url', esc_url($attachment['be-photographer-url']));
restituisci $posta;
}
add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
Come puoi vedere, aggiungerà due campi di testo in Media Uploader, ovvero il nome del fotografo e l'URL del fotografo.
Creazione di pagine per visualizzare tutti gli album
Ora è il momento di creare alcuni album (tipi di post personalizzati) e aggiungere foto. L'immagine in evidenza sarà l'immagine di copertina dell'album. Il contenuto che aggiungi all'area del contenuto del post diventerà la descrizione dell'album.
Pagina modello per album
Crea un file e chiamalo archive-albums.php. Copia il codice di intestazione, piè di pagina, barra laterale e altri elementi dell'interfaccia utente e incollalo. Incolla il codice seguente per mostrare tutti gli album in una pagina.
<li class="album-grid">a href=" title=""</a></li>
post_type == 'album' $post-post_status == 'pubblica' ) {
$ allegati = get_posts( array(
'post_type' ='allegato',
'post_per_pagina' =-1,
'post_parent' =$post-ID,
'escludi' =get_post_thumbnail_id()
) );
se ( $ allegati ) {
foreach ( $ allegati come $ allegato ) {
$class = "mime post-allegato-" . sanitize_title($attachment-post_mime_type);
$titolo = wp_get_attachment_link($ID-allegato, 'griglia-album', vero);
echo '<li class="' . $class . ' album-grid">' . $titolo. '</li>';
}
}
}
Inserisci il codice seguente nel file CSS principale del tuo tema in modo che le immagini di copertina vengano visualizzate in una griglia.
.album-grid{larghezza: 225px; altezza: 150px; galleggiante: sinistra; stile elenco: nessuno; tipo-stile-elenco: nessuno; margine: 0 18px 30px 0px;}
Pagina modello per ogni immagine
Crea un file e chiamalo single-attachments.php. Copia tutto il codice dal single.php pre-costruito del tema. Puoi trovarlo in Editor dal menu Aspetto. Quindi trova il codice del ciclo nel tuo single-attachments.php e sostituisci quella sezione con la seguente.
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>il_titolo();</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-allegato">
if ( wp_attachment_is_image ( $ post-id ) ) : $ att_image = wp_get_attachment_image_src ( $ post-id, "completo");
<p class="allegato"><a>id); " titolo=" il_titolo(); " rel="allegato"<img src=" echo $att_image[0];" width=" echo $att_image[1];" height="echo $att_image[2];" class="attachment-medium">post_excerpt ;" /</a>
</p>
altro :
<a>ID) " title=" echo wp_specialchars( get_the_title($post-ID), 1 )" rel="attachment"echo basename($post-guid) </a>
finisci se;
</div>
nel frattempo;
finisci se;