Cómo personalizar una plantilla de NextGEN Gallery

Escrito por vail joy | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo personalizar una plantilla de NextGEN Gallery
Con una plantilla personalizada, puedes cambiar el aspecto general de tu galería. (Comstock/Comstock/Getty Images)

NextGEN Gallery es un potente complemento de WordPress para crear, administrar y mostrar álbumes e imágenes. Ofrece ventajas sobre el Administrador Multimedia de WordPress (WordPress Media Manager) dándote más control sobre la carta, clasificación, orden de muestra y tipo de muestra de las fotos. El autor va un paso más allá proporcionando una función de plantilla que te permite diseñar plantillas de página personalizadas para usarlas con los códigos cortos de NextGEN. No se proporcionan instrucciones sobre cómo usar esta función, lo que puede hacer que los usuarios del complemento de NextGEN se desesperen.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Una copia descargada del complemento NextGEN Gallery WordPress

Lista completaMinimizar

Instrucciones

  1. 1

    Abre la carpeta del NextGEN Gallery y haz doble clic sobre la carpeta "Ver". Abre el archivo "gallery.php" con un editor de HTML. Este es la base para la página de galería y muestra las imágenes del álbum como vistas en miniatura basándose en la configuración que elijas en el panel de administración de NextGEN. Para personalizar la plantilla, necesitarás editar las etiquetas HTML, modificar las clases de estilos o añadir etiquetas de plantillas.

  2. 2

    Empieza buscando la línea 47, que contiene el cierre div del contenedor en miniatura de la galería. Para que aparezca una descripción o etiqueta bajo cada imagen, inserta el siguiente código:

    <div class="tcaption"><?php echo $image->description ?></div>

    Necesitarás editar los estilos para personalizar el aspecto de tu página de galería, así como añadir un nuevo estilo "tcaption" para manejar la apariencia de esta descripción en miniatura.

  3. 3

    Vuelve a la carpeta del complemento y abre la carpeta "css". Abre el archivo "nggallery.css" en tu editor de HTML. Personaliza los estilos como desees. Para cambiar la apariencia de las vistas en miniatura de tu galería, edita la clase ".ngg-gallery-thumbnail img". Por ejemplo, para añadir bordes redondeados y una sombra proyectada, cambia el estilo por algo como esto:

    .ngg-gallery-thumbnail img { background-color:#FFFFFF; border:1px solid #666; display:block; margin:4px 0px 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. 4

    Crea tu estilo personalizado para tu descripción de vista en miniatura. Por ejemplo:

    .tcaption { padding: 4px; font-size: 9px; font-style: italic; }

  5. 5

    Guarda la hoja de estilo en una nueva ubicación sin modificar el nombre del archivo. De forma alternativa, copia y cambia los estilos en tu documento "style.css" de temas de WordPress. Guarda el archivo "gallery.php" como "gallery-mygallery.php" en una nueva ubicación.

  6. 6

    Conecta a tu servidor web y crea una nueva carpeta dentro de tu carpeta de temas de WordPress. Cambia su nombre por "nggallery" para que pueda ser reconocida por el complemento. Carga el archivo de plantilla en esta nueva carpeta.

  7. 7

    Carga tu "nggallery.css" modificado en tu raíz del tema, o en la carpeta principal donde está tu archivo "page.php" del tema. Si copiaste los estilos en tu hoja de estilo de temas, puedes saltarte este paso.

  8. 8

    Crea una nueva página en el panel de administración de WordPress y usa el botón del editor de NextGEN para añadir el código corto de galería deseado. Inserta el siguiente valor a tu nueva plantilla personalizada:

    template=mygallery

    Tu código corto final debería parecerse a esto:

    [nggallery id=2 template=mygallery]

    Usa la vista previa de la página para ver los cambios y hacer ajustes a tus estilos como sea necesario.

Consejos y advertencias

  • Evita configurar el tamaño en tu CSS, ya que este será manejado por NextGEN en la configuración de administración. Puesto que las imágenes en miniatura y otras imágenes son redimensionadas y se muestran de forma dinámica, escoger un tamaño en tu hoja de estilo tendrá resultados impredecibles o que serán ignorados por completo.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles