Comment créer une galerie d'albums photo dans WordPress sans plugin
Publié: 2021-11-12
Dans cet article, nous allons vous montrer comment créer une galerie d'albums photo dans WordPress sans plugin.
Nous savons tous qu'avec des plugins dans WordPress, rien n'est impossible à réaliser.
Mais plus vous utilisez de plugins, plus les performances de votre site Web se dégradent.
Pour tout site Web, la galerie joue un rôle très important.
Si votre galerie implique des travaux et des filtres compliqués, les performances de l'ensemble du site Web peuvent en prendre un coup.
Une galerie d'albums photo est censée contenir plusieurs photos.
Ici, nous créons un album mensuel afin que chaque album ait une image de couverture et lorsque vous cliquez sur l'image de couverture, cela vous emmène à l'intérieur de l'album pour consulter chaque photo individuellement.
Vous devez également savoir comment créer une galerie d'albums photo dans WordPress sans plugin pour effectuer des tâches compliquées pour lesquelles vous deviez acheter un plugin premium si vous vouliez utiliser un plugin.
En outre, vous pouvez utiliser l'un de ces logiciels de retouche photo pour modifier les photos qui seront jointes à votre galerie d'albums photo.
Étapes pour créer une galerie d'albums photo dans WordPress sans plugin
Toutes les fonctionnalités requises pour atteindre l'objectif peuvent être réalisées à l'aide des fonctionnalités intégrées de WordPress. Considérez chaque album mensuel comme une publication avec sa propre page unique. Considérez chaque image à l'intérieur des albums comme une pièce jointe avec sa propre page unique.
Les albums auront besoin d'une vignette et la fonctionnalité est intégrée à WordPress. Si votre site Web est un site Web de photographe, vous pouvez transformer vos messages par défaut avec un album. Sinon, vous devez créer un type de publication personnalisé.
Créer un plugin spécifique au site (non prêt à l'emploi) et un type de publication personnalisé
Vous devez créer un plugin spécifique au site qui ne dépend pas de votre thème. Ils sont utiles pour créer des types de publication personnalisés, ajouter des codes abrégés, afficher des vignettes, etc. Pour créer un plugin spécifique au site, vous devez vous rendre dans le répertoire des plugins via FTP.
Sous wp-content/plugins/ créez un nouveau dossier et nommez le dossier du même nom que le plugin que vous souhaitez créer. Allez dans le dossier et créez un fichier php avec le même nom que le dossier. Collez le code suivant dans le fichier.
/* Nom du plug-in : plug-in de site pour website.com Description : Modifications du code spécifique au site pour website.com */ /* Commencez à ajouter des fonctions sous cette ligne */ /* Arrête d'ajouter des fonctions sous cette ligne */
Enregistrez le fichier et quittez. Le code mentionné ci-dessus n'a aucune signification et il sera remplacé lors de la création du type de publication personnalisé.
Générez le code pour le type de publication personnalisé à partir du générateur de code de type de publication personnalisé WordPress.
Affichage de tailles d'image supplémentaires et de champs supplémentaires–
Depuis le tableau de bord d'administration, accédez à Apparence, puis à Éditeur. Repérez le fichier functions.php et ajoutez le code suivant pour enregistrer une taille d'image supplémentaire pour l'affichage de la grille.
add_image_size( 'album-grid', 225, 150, true );
Si vous souhaitez ajouter des champs personnalisés supplémentaires au Media Uploader comme le nom du photographe, ses pages et d'autres informations lorsque vous téléchargez une image, vous devez ajouter le code suivant dans functions.php.
/**
* Ajouter les champs Nom du photographe et URL au téléchargeur de médias
* Tableau @param $form_fields, champs à inclure dans le formulaire de pièce jointe
* @param $post objet, enregistrement de pièce jointe dans la base de données
* @return $form_fields, champs de formulaire modifiés
*/
function be_attachment_field_credit( $form_fields, $post ) {
$form_fields['être-nom-photographe'] = array(
'label' = 'Nom du photographe',
'entrée' = 'texte',
'value' = get_post_meta( $post-ID, 'be_photographer_name', true ),
'helps' ='Si fourni, le crédit photo sera affiché',
);
$form_fields['être-photographe-url'] = array(
'label' ='URL du photographe',
'entrée' ='texte',
'value' =get_post_meta( $post-ID, 'be_photographer_url', true ),
'helps' = 'Ajouter une URL de photographe',
);
retourne $form_fields ;
}
add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );
/**
* Enregistrer les valeurs du nom du photographe et de l'URL dans le téléchargeur de médias
* @param $post array, les données post pour la base de données
* @param $attachment array, champs de pièce jointe du formulaire $_POST
* @return $post tableau, données post modifiées
*/
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['être-photographe-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );
retourner $post ;
}
add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
Comme vous pouvez le voir, il ajoutera deux champs de texte dans le Media Uploader, à savoir le nom du photographe et l'URL du photographe.
Création de pages pour afficher tous les albums
Il est maintenant temps de créer des albums (types de publication personnalisés) et d'y ajouter des photos. L'image sélectionnée sera l'image de couverture de l'album. Le contenu que vous ajoutez à la zone de contenu de la publication deviendra la description de l'album.
Page de modèle pour les albums
Créez un fichier et nommez-le archive-albums.php. Copiez l'en-tête, le pied de page, la barre latérale et le code des autres éléments de l'interface utilisateur et collez-les. Collez-y le code suivant pour afficher tous les albums sur une seule page.
<li class="album-grid">a href=" title=""</a></li>
post_type == 'albums' $post-post_status == 'publier' ) {
$pièces jointes = get_posts( array(
'post_type' ='pièce jointe',
'messages_par_page' =-1,
'post_parent' =$post-ID,
'exclure' =get_post_thumbnail_id()
) );
si ($pièces jointes) {
foreach ( $ pièces jointes as $ pièce jointe ) {
$class = "post-attachement mime-" . sanitize_title( $attachment-post_mime_type );
$title = wp_get_attachment_link( $attachment-ID, 'album-grid', true );
echo '<li class="' . $class . ' album-grid">' . $titre . '</li>' ;
}
}
}
Placez le code suivant dans le fichier CSS principal de votre thème afin que les images de couverture soient affichées dans une grille.
.album-grid{largeur : 225px ; hauteur : 150px ; flotteur : gauche ; style de liste : aucun ; type de style de liste : aucun ; marge : 0 18px 30px 0px ;}
Page de modèle pour chaque image
Créez un fichier et nommez-le single-attachments.php. Copiez tout le code du single.php pré-construit du thème. Vous pouvez le trouver sous Éditeur dans le menu Apparence. Ensuite, recherchez le code de la boucle dans votre single-attachments.php et remplacez cette section par la suivante.
if ( have_posts() ) : while ( have_posts() ) : the_post();
$photographe = get_post_meta($post-ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);
<h1>le_titre();</h1>
<div class="photometa"><span class="photographername"> echo $photographe ; </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>identifiant ); " titre=" le_titre(); " 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>
autre :
<a>ID) " title=" echo wp_specialchars( get_the_title($post-ID), 1 )" rel="attachment"echo basename($post-guid) </a>
fin si;
</div>
pendant ce temps;
fin si;