Les partenaires publicitaires:

Comment personnaliser un modèle Galerie NexGen

NextGEN Gallery est un puissant WordPress plug-in pour la création, la gestion et l'affichage des albums et des images. Il offre des avantages sur le gestionnaire de WordPress médias par défaut en vous donnant le contrôle étendue sur le téléchargement, la catégorisation, l'ordre d'affichage et le type d'affichage des photos. L'auteur va plus loin en fournissant une fonction de modèle qui vous permet de concevoir des modèles de page personnalisés pour une utilisation avec les codes courts NextGen. Aucune instruction est fourni pour savoir comment utiliser cette fonction, ce qui peut laisser les utilisateurs de la NextGEN plug-in se gratter la tête.

Choses que vous devez

  • Copie téléchargée du plug-in NextGEN Galerie WordPress

Instructions

  1. Ouvrez le dossier plug-in NextGEN Galerie et double-cliquez sur le "Vue" dossier. Ouvrez le "gallery.php" déposer dans un éditeur HTML. Ce fichier est le fondement de la page de la galerie et affiche vos images sous forme de vignettes album basé sur les paramètres que vous configurez dans votre panneau d'administration NextGen. Pour personnaliser le modèle, vous devrez modifier les balises HTML, modifier des classes de style ou ajouter des balises de modèle.

  2. Commencez par localiser la ligne 47, qui contient le div de fermeture du conteneur galerie de vignettes. Pour avoir une description ou une légende apparaissent sous chaque image, insérez le code suivant:

    lt;? php echo $ image gt;? Description gt;

    Vous devez maintenant éditer les styles pour personnaliser le look de votre page de la galerie, ainsi que ajouter un nouveau style "tcaption" pour gérer l'apparence de la description des vignettes.

  3. Retour dans le dossier de plug-in et ouvrez le "css" dossier. Ouvrez le "nggallery.css" fichier dans votre éditeur HTML. Personnaliser les styles comme vous le souhaitez. Pour modifier l'apparence de votre galerie de vignettes, modifier le ".ngg-galerie-vignette img" classe. Par exemple, pour ajouter des coins arrondis et une ombre portée, changer le style à quelque chose comme ceci:

    .ngg-galerie-vignette img {

    background-color: # FFFFFF-

    border: 1px solid # 666-

    affichage: d'îlot

    margin: 0px 4px 4px 5px-

    padding: 5px-

    Position: relative-

    border-radius: 3px-

    -moz-border-radius: 3px-

    -webkit-border-radius: 3px-

    box-shadow: 1px 2px 6px # 333-




    -moz-box-shadow: 1px 2px 6px # 333-

    -webkit-box-shadow: 1px 2px 6px # 333-

    }

  4. Créer votre style personnalisé pour votre description des vignettes. Par example:

    .tcaption {

    padding: 4px-

    font-size: 9px-

    font-style: italic-

    }

  5. Enregistrer la feuille de style à un nouvel emplacement sans modifier le nom du fichier. Alternativement, copier tous les styles modifiés dans votre thème WordPress de "style.css" document. Sauver la "gallery.php" déposer comme "Galerie-mygallery.php" dans un nouvel emplacement.

  6. Connectez-vous à votre serveur Web et de créer un nouveau dossier dans le dossier de votre thème WordPress. Renommez- "nggallery" de sorte qu'il sera reconnu par le plug-in. Téléchargez votre fichier de modèle dans ce nouveau dossier.

  7. Téléchargez votre modifiée "nggallery.css" à la racine de votre thème, ou le dossier principal où votre thème de "page.php" le fichier existe. Si vous avez copié les styles dans la feuille de style de votre thème, vous pouvez sauter cette étape.

  8. Créer une page dans votre panneau d'administration de WordPress et utiliser le bouton de l'éditeur NextGEN pour ajouter le code court galerie souhaitée. Insérez la valeur suivante à utiliser votre nouveau modèle personnalisé:

    template = mygallery

    Votre code courte finale devrait ressembler à ceci:

    [nggallery id = 2 template = mygallery]

    Aperçu de la page pour voir vos modifications et faire des ajustements à vos styles que nécessaire.

Conseils & Avertissements

  • Utilisez le navigateur Opera ou Firebug add-on pour Firefox pour afficher votre version live de la page de la galerie et inspecter chaque fragment du code source pour comprendre visuellement les classes faire quoi.
  • Evitez de régler la taille de votre CSS comme cela est géré par NextGEN dans les paramètres d'administration. Depuis les vignettes et les images sont redimensionnées et affichées dynamiquement, définition d'un format dans votre feuille de style aura des résultats imprévisibles ou être complètement ignoré.
» » » » Comment personnaliser un modèle Galerie NexGen