Cómo hacer una plantilla de página de enlaces con menú desplazable

¿Cómo le gustaría hacer uso del Administrador de Enlaces de WordPress? Usted encontrará que es bastante útil, si se utiliza por las razones correctas.

Me gustaría mostrarle una forma de agregar enlaces a su sitio web de WordPress que no solo haga uso del Administrador de enlaces, sino que también cree más contenido para su sitio web con un flujo de trabajo rápido y fácil.


Lo que vas a construir

Permítanme comenzar con una revisión rápida de Links Manager for WordPress. El Administrador de enlaces le permite almacenar un conjunto de enlaces externos, también conocido como su blogroll. Estos enlaces se pueden colocar en categorías, importar, exportar, agregar, eliminar y editar. Las categorías de enlaces también se pueden agregar, eliminar y editar. Puede encontrar el Administrador de enlaces en la sección de enlaces del panel de administración de WordPress.

A partir de la Versión 3.5, el Administrador de enlaces y el blogroll están ocultos para nuevas instalaciones y cualquier instalación existente de WordPress que no tenga enlaces. Si está actualizando desde una versión anterior de WordPress con algún enlace activo, el Administrador de enlaces continuará funcionando normalmente..

Si desea restaurar el panel de enlaces a su instalación, puede descargar e instalar el complemento Administrador de enlaces..

Una forma útil de utilizar el Administrador de enlaces de WordPress es mostrar una lista compilada diaria de enlaces externos, como sitios web favoritos, socios afiliados, canciones, videos divertidos, etc..

Las opciones son ilimitadas, pero tenga en cuenta la estrategia detrás de su sitio web. Así, por ejemplo, voy a compilar una lista de enlaces de mis canciones favoritas, que enlaza con la canción en iTunes, donde pueden escuchar y / o descargar la canción..


1. Creando las categorías de enlaces

Antes de comenzar a desarrollar la plantilla de la página de enlaces, debemos determinar cuáles serán las categorías de enlaces. Esto se puede determinar de varias maneras. Algunos ejemplos son por género, como reggae, rap, country, metal, por clasificación de 5 estrellas o por orden alfabético. Ya que estoy compilando una lista de canciones favoritas, organizaré las categorías de enlaces en orden alfabético.

Comience iniciando sesión en WordPress, desplazándose sobre los enlaces y haciendo clic en "Categorías de enlaces". Para agregar correctamente una categoría de enlace, asegúrese de tener un nombre y una babosa. La descripción no es necesaria. El nombre es como aparece en tu sitio. La babosa es la versión amigable de URL del nombre. Generalmente es todo en minúsculas y contiene solo letras, números y guiones. Si no se ingresa una bala al crear una categoría de enlace, el Administrador de enlaces creará automáticamente una basada en el nombre.

Ya que estamos organizando las canciones en orden alfabético, haga el nombre de la primera categoría de enlace "#", la segunda categoría de enlace "A", la tercera categoría "B", y así sucesivamente hasta que llegue a "Z". No cree categorías de enlaces adicionales o aparecerán en su navegación en la plantilla de la página de enlaces. Así que asegúrese de eliminar cualquier categoría de enlace existente.


2. Construyendo la plantilla de la página de enlaces y el menú desplazable

Ahora que se han creado todas las categorías de enlaces, podemos comenzar a crear la plantilla de la página de enlaces. Así que empecemos copiando y pegando una plantilla de página ya construida en su tema de WordPress, cambiándole el nombre a enlaces-página-plantilla.php, y abriéndolo en tu editor de texto favorito.

El motivo para copiar y pegar una plantilla de página ya construida se debe a que desea que la plantilla de página de enlaces tenga el mismo diseño que el resto de su sitio..

Si tiene problemas para encontrar una plantilla de página ya construida en su tema de WordPress, busque un conjunto de archivos que tenga un nombre consistente como page-contact.php, page-portfolio.php, page-full-width.php, etc.

Es común que los temas de WordPress tengan varias plantillas de página que tengan nombres consistentes para que se mantengan organizados. También puede abrir un archivo para ver si el archivo comienza con el identificador de la plantilla de página, como en el siguiente ejemplo:

 

Lo primero que querrá hacer es cambiar el nombre de la plantilla (ver código anterior) a "Enlaces". El código anterior le permite a WordPress saber que es una plantilla, por lo que estará disponible en el menú desplegable a través del editor de la página con el nombre de la plantilla que le da, en este caso denominado "Enlaces".


3. Agregar el menú desplazable

Ahora busca el código el contenido(). Este código recupera el contenido de la página, el contenido que se agrega al editor WYSIWYG para la página.

Este es un gran lugar para poner su menú desplazable y un gran lugar para mostrar sus enlaces, que no aparecerá hasta que agregue un nuevo enlace a una de las categorías de enlaces que acaba de crear. Vamos a llegar a esto más tarde. Abajo el contenido() código en su plantilla agregar:

  
'. $ cat-> cat_name. ''; ?>

El código $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") devuelve todas las categorías de enlaces creadas y muestra el nombre de la categoría utilizando el valor '. $ cat-> cat_name. '. Si quieres aprender más ve a get_categories en el codex de WordPress.

los id = "scrollablemenu" está conectado a algún JavaScript (del que hablaré a continuación) para que el menú funcione correctamente y la class = "scrollablemenubutton" Es un CSS que le dará a tus botones un estilo muy básico. Te animo a ser más creativo con el CSS, pero el estilo básico funcionará por ahora.

Para ver el CSS básico descargue los archivos para este tutorial. Pronto te mostraré cómo agregar la hoja de estilo (y JavaScript) a tu plantilla de página para que solo se cargue cuando tu plantilla de página se carga usando wp_enqueue_ *.

Para tu id = "scrollablemenu" querrás añadir las propiedades:

 posición: fijo superior: 10px; / * Asegúrese de que la propiedad superior tenga el mismo valor que el archivo javascript * / padding: 20px; ancho: 90px; margen izquierdo: 500px;

los posición: fijo y superior: 10px; mantiene el menú fijo en la ubicación que elija. los superior: 10px; El estilo puede y debe ser cambiado para obtener los resultados que busca..

Si fueras a poner superior: 100px; le daría a su menú un relleno superior de 100px desde la parte superior de su sitio web, por lo que si lo dio 0px Su menú debe estar tocando la parte superior de su sitio web. Tenga en cuenta que cada vez que cambie el estilo superior también deberá cambiar el código JavaScript para que coincida.

No te preocupes, llegaremos al código JavaScript en un momento..

Envolví el menú en una div con un margen izquierdo Estilo para posicionar el menú desplazable en el lado derecho. Esto se debe a que el menú flota sobre el contenido, por lo que si el menú no se colocara a la derecha, los enlaces se perderían detrás del menú desplazable. los margen izquierdo: 500px; lo más probable es que deba cambiarse para que se ajuste al ancho de su sitio web.

También hice el menú desplazable como un menú vertical en lugar de horizontal haciendo un ancho de 90px. Puede cambiar fácilmente el menú en un menú horizontal eliminando ancho: 90px; margen izquierdo: 500px;, Pero debes saber que tu contenido podría perderse detrás del menú..

Hablemos sobre el archivo JavaScript que hace que el menú desplazable funcione. Descargue los archivos para este tutorial y abra el archivo JavaScript llamado scrollablemenu.js.

 $ (window) .scroll (function () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (this) .scrollTop ())););

Las dos partes importantes en el código son #scrollablemenu y 10.

#scrollablemenu necesita coincidir con tu id = "scrollablemenu" o no funcionará.

Antes hablamos de cómo si cambias el superior: 10px; estilo que tendrá que cambiarlo en el archivo JavaScript en consecuencia. Usted puede hacer esto simplemente cambiando el 10 asciende a la cantidad que hayas cambiado tu estilo superior.


4. Añadiendo los archivos

Ahora que comprende cómo funciona el código JavaScript, agreguémoslo y la hoja de estilo a la plantilla de página para que el menú se desplace y los botones tengan algo de estilo..

Una forma fácil y organizada de hacer esto es usar wp_enqueue_script y wp_enqueue_style; lo hace para que no tenga que agregar CSS a otra hoja de estilo o JavaScript a su header.php expediente. Carga los archivos solo cuando su plantilla de página está cargada, lo que hace que su sitio web funcione más rápido.

Primero agreguemos el archivo JavaScript. Tome el siguiente código y agregue al principio de su plantilla de página (debajo del nombre de la plantilla).

 

Ahora FTP el scrollablemenu.js archivo a su sitio web de alojamiento. Asegúrese de cambiar la /js/scrollablemenu.js ubicación en la carpeta en la que subiste el archivo JavaScript. Ahora agreguemos el archivo de la hoja de estilo justo debajo del código que acaba de agregar.

 

FTP el scrollablemenu.css archivo a su sitio web de alojamiento. Asegúrese de cambiar la /css/scrollablemenu.css ubicación en la carpeta donde cargó el archivo de hojas de estilo. Ahora los archivos de JavaScript y hojas de estilo se cargarán cuando se cargue la plantilla de la página de enlaces.

La principal diferencia entre los dos códigos son las funciones. wp_enqueue_script y wp_enqueue_style. Si quieres aprender más sobre wp_enqueue_ * eche un vistazo al tutorial Cómo incluir JavaScript y CSS en sus temas y complementos de WordPress.


5. Agregando las categorías de enlaces

Ahora agreguemos la parte más importante a su plantilla de página de enlaces ... las categorías de enlaces.

Agregue este código debajo del código del menú desplazable.

  

'. $ cat-> cat_name. '

'; eco '
    '; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ libros como $ libro) echo '
  • '; echo 'link_url. '">'. $ book-> link_name. ''; echo '
  • '; // end books loop echo '
'; // fin del ciclo de los gatos; ?>

De nuevo estamos usando $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), el código devuelve todas las categorías de enlaces creadas y muestra el nombre de la categoría utilizando el valor '. $ cat-> cat_name. '.

La parte importante del código es cómo. '. $ cat-> cat_name. ' devuelve el nombre de la categoría como el nombre del ancla (a name = "'. $ cat-> cat_name.'"). Esto hace que el menú desplazable funcione, de modo que cuando un visitante haga clic en el menú desplazable, se vinculará a la sección correcta en la plantilla de la página..
El resto del código muestra la URL del enlace usando el valor '. $ libro-> link_url. ' y muestra el nombre del enlace usando el valor '. $ libro-> link_name. '. Todo esto se logra mediante el uso de la función get_bookmarks ("category = $ cat-> cat_ID").

Puedes aprender más yendo a get_bookmarks en el codex de WordPress.

Cada línea de código está dentro de un div con el class = "linkcategories" (que se añade a la scrollablemenu.css archivo) y cada línea de código mostrará el título (nombre de la categoría) con un h3 etiqueta, el título también será el nombre del ancla y los enlaces creados en el Administrador de enlaces se envolverán en li Etiquetas, hipervinculadas con el enlace URL..

Así que ya sabes que el código está envuelto en una div con un ancho de 490px, de esa manera, ningún texto se perderá detrás del menú desplazable (vertical). los ancho: 490px; lo más probable es que deba cambiarse para adaptarse al ancho de su sitio web.

Si cambia el ancho, recuerde cambiar el menú desplazable div estilo margen izquierdo: 500px;. Es empujado sobre la derecha 10px más aún el menú desplazable div no se superponen las categorías de enlace div.

Su plantilla de página de enlaces está terminada! Asegúrese de enviar el FTP enlaces-página-plantilla.php archivo a su directorio raíz del tema de WordPress.


6. Crear una página con la plantilla de página de enlaces

Ahora que se han creado las categorías de enlaces y se ha creado y cargado la plantilla de la página de enlaces, agreguemos una nueva página utilizando la plantilla.

En la sección de administración de WordPress, debajo de las páginas, haga clic en Agregar nuevo. Primero agregue el nombre de su página, luego seleccione la plantilla de enlaces en el menú desplegable en Atributos de página (lado derecho). Publicar y pasar al último paso..


7. Añadir nuevo enlace a la categoría de enlace

Si ya obtuvo una vista previa de la página que acaba de crear y se dio cuenta de que solo se mostraba el menú desplegable vertical, es porque tiene que agregar enlaces a las categorías de enlaces que creó anteriormente. Si la categoría de enlace no tiene ningún enlace, entonces no aparecerá nada..

Entonces, agreguemos un enlace haciendo clic en agregar nuevo en Enlaces en la sección de administración de WordPress. Ingrese el nombre, como Daniel Lee Kendall - Perdido en el momento, Dirección web y seleccione la categoría. En el lado derecho, haga clic en Agregar enlace, y ahora puede revisar su página para ver los resultados. Estas todo terminado!


Conclusión

Si no obtiene los resultados que esperaba, juegue con el ancho de cada uno. div, y / o crear una mejor hoja de estilo para el menú desplazable.