Share
Ahora hemos tratado con menús personalizados, centrémonos en las barras laterales dinámicas y cómo se pueden usar dentro de un tema.
¿Qué es exactamente una barra lateral dinámica? Hay 3 partes de los nombres que debemos tratar en términos de este tema.
En primer lugar, "dinámico". Dinámico se refiere al hecho de que el área de la barra lateral se puede controlar desde el panel de administración y se puede cambiar fácilmente. Además, su contenido se puede extraer de la información de WordPress que se actualiza constantemente, como las publicaciones, los comentarios y otros tipos de contenido que se actualizan regularmente, de modo que cada vez que se agrega una nueva publicación se puede incluir en un bloque de contenido de publicaciones recientes o en un widget. con el término widget en un bit.).
En segundo lugar, "Barra lateral" se refiere a un área de contenido, que no necesariamente tiene que estar ubicada en el lado del diseño (extraño, lo sé). El término se heredó de los primeros días de los diseños de estilo de blog donde los widgets estaban casi siempre posicionados al lado. El área de la barra lateral contiene bloques de contenido adicionales o datos generados por complementos que aparecen en forma de "widgets" generalmente en el lado, en el encabezado o en el pie de página de los temas de WordPress, pero también se pueden colocar de cualquier manera que se desee dentro del diseño del tema.
Un widget es un bloque de contenido pequeño, que generalmente contiene enlaces o contenidos asociados con páginas o publicaciones. Estos podrían incluir listas de publicaciones, comentarios, etiquetas, categorías y una amplia gama de otras colecciones de contenido, algunas incorporadas y otras generadas por complementos adicionales..
Los widgets se pueden agregar a los temas "listos para widgets" a través de Apariencia -> Widgets en el panel de administración mediante el área de administración de widgets incorporada para arrastrar y soltar. Los temas no son compatibles con los widgets de forma automática y deben estar listos para la creación de widgets mediante el registro de una función especial, de forma similar a como registramos los menús personalizados.
Antes de registrar barras laterales en cualquier tema de WordPress, al visitar Apariencia -> Widgets, vemos lo siguiente.
Al igual que en los Menús personalizados de nuestra lección anterior, para que la función de barra lateral dinámica funcione en su tema, su tema necesita un archivo functions.php que registre las barras laterales. El archivo functions.php simple debe contener el siguiente código:
Preste especial atención, como se mencionó anteriormente, para no dejar espacios en blanco después del código en su archivo de funciones, ya que esto a veces causa problemas que pueden resultar en pantallas blancas cuando se ve su tema en la parte delantera.
El único aspecto de este código que sería necesario editar al principio sería la cantidad de áreas de la barra lateral dinámica a registrar en "register_sidebars (1);". Trataremos un poco con las barras laterales nombradas. Por ahora, nuestro código anterior ha registrado 2 barras laterales identificadas simplemente por su número.
Si desea tener 5 áreas de la barra lateral dinámica en su tema, el número cambiará a 5 - "register_sidebars (5);". En ese caso, tendría 5 áreas de la barra lateral dinámica numeradas del 1 al 5..
La función tiene una declaración "if" o un argumento condicional que verifica si la función register_sidebars existe en esta versión de WordPress. Si la respuesta vuelve con un sí, se ejecuta la función register_sidebars. Teniendo en cuenta que las barras laterales han sido compatibles desde la versión 2.2 de WordPress, probablemente no sea necesario preocuparse por este aspecto del código..
Una vez que su archivo de funciones esté listo, puede proceder a insertar widgets en las nuevas áreas de la barra lateral que hemos creado.
Ahora puede tomar widgets desde el área de "Widgets disponibles" del lado izquierdo y soltarlos en la barra lateral 1 o 2 áreas de la derecha.
Una vez que el archivo de funciones esté listo, puede proceder a insertar el código de la barra lateral dinámica en las áreas de su tema donde desea agregar dinámicamente los widgets de WordPress. El siguiente código es la forma más básica del código de ubicación de la barra lateral. El único aspecto que debe modificarse es el número para reflejar qué barra lateral numerada desea colocar en la ubicación específica.
Pondremos este código en nuestra barra lateral izquierda
El código anterior debería ser suficiente para permitir que la barra lateral registrada muestre el contenido del widget dentro del tema. Así que vamos a seguir adelante y añadir algunos widgets..
Lo que resulta en:
He tenido que agregar CSS adicional para tener en cuenta los widgets recién agregados. Esencialmente, he agregado en el widget de la barra lateral CSS del tema Twenty Eleven. Es posible que deba escribir CSS personalizado para sus propios temas para que se adapten al diseño, estilo y coloreado de su tema. Publicaré el CSS al final de la lección..
Para asegurarnos de que nuestra barra lateral aún muestre algo en los casos en que aún no se hayan agregado los widgets, o en el evento externo en el que no se hayan registrado las barras laterales (esperamos que nadie esté ejecutando la versión anterior de WordPress 2), necesitamos extender el código de ubicación con el siguiendo. darse cuenta dynamic_sidebar (1) Todavía está en la primera línea de código.!
¿Qué hace el código de arriba??
Línea 1 el código comprueba si ha registrado barras laterales en el archivo functions.php y, de ser así, qué número de barra lateral debe insertar en esta ubicación.
Línea 2 actúa como un widget predeterminado que muestra una lista de las categorías de publicaciones de su sitio si no se han agregado widgets dinámicos. Una vez que se agrega un widget dinámico a su barra lateral dentro de su panel de control, el widget predeterminado será reemplazado por el dinámico.
Línea 3 termina el argumento if que línea 1 comenzó. En los argumentos de PHP, como if, que es una declaración condicional, también deben finalizarse para que el argumento no afecte a ningún código php que se encuentre a continuación. No cerrando el if con el endif; romperá tu tema!
La única parte de las 3 líneas del código de la barra lateral dinámica que realmente necesita ser editada es el número, para indicar qué barra lateral numerada específica se está insertando en esta ubicación en particular.
De la Documentación de WordPress (The Codex), estas son algunas de las funciones que se pueden usar para "codificar" los widgets en las áreas de la barra lateral e incluirlos como widgets predeterminados en el código de ubicación de la barra lateral..
wp_list_authors (): muestra una lista de los autores de los sitios (usuarios) y, si el usuario ha creado alguna publicación, el nombre del autor se muestra como un enlace a sus publicaciones..
wp_list_categories (): muestra una lista de categorías como enlaces. Cuando se hace clic en un enlace de categoría, se mostrarán todas las publicaciones de esa categoría.
wp_dropdown_categories (): muestra o recupera la lista desplegable de categorías HTML.
wp_tag_cloud (): muestra una lista de etiquetas en lo que se denomina 'nube de etiquetas', donde el tamaño de cada etiqueta se determina según la cantidad de veces que esa etiqueta en particular se ha asignado a las publicaciones..
wp_list_pages (): muestra una lista de páginas de WordPress como enlaces.
wp_list_bookmarks (): muestra los marcadores que se encuentran en el panel Administración -> Enlaces.
get_comments (): enumere los comentarios según el número, el orden y otros parámetros.
wp_get_archives (): esta función muestra una lista de archivos basada en la fecha.
Estas funciones también se pueden usar en cualquier parte del tema para generar listas de diversos contenidos del sitio para ayudar a los usuarios a encontrar contenido más fácilmente..
Luego podríamos usar esta convención de código de ubicación para colocar nuestra barra lateral número 2 en el área del lado derecho de nuestro tema.
Categorías
También podríamos incluir cualquier otro contenido HTML como contenido de widget predeterminado que debe mostrarse antes de agregar widgets dinámicos a través de admin de widgets. Esto puede incluir un mensaje para recordar a los propietarios del sitio que agreguen físicamente widgets una vez que activen el nuevo tema.
No hay widgets añadidos
Por favor inicie sesión y agregue algunos widgets a esta barra lateral
Como podemos ver a continuación, hemos insertado el código de ubicación de la barra lateral en los contenidos predeterminados de los widgets, como se ilustra en la barra lateral izquierda u otros contenidos HTML, como se ilustra en la barra lateral derecha. Esto aparecerá siempre que no se agreguen widgets dinámicos a través del panel de widgets. Una vez que se agregan los widgets dinámicos, reemplazarán estos contenidos predeterminados automáticamente.
Ahora, para probar algunos widgets dinámicos, agregamos los siguientes 2 widgets dinámicos:
¿Qué resultados en la siguiente aparición?.
Actualmente tenemos 2 códigos de ubicación con diferentes contenidos predeterminados, pero colocando la misma área de la barra lateral en el lado izquierdo y derecho de nuestro tema. Para remediar esto, cambiaremos el código de ubicación de la barra lateral o en la barra lateral derecha para colocar la barra lateral número 2 en lugar de la barra lateral 1 de la siguiente manera. Como puede ver, solo necesitamos cambiar el número a la barra lateral numerada que nos gustaría ubicar.
No hay widgets añadidos
Por favor inicie sesión y agregue algunos widgets a esta barra lateral
Ahora podemos gestionar nuestras barras laterales izquierda y derecha de forma independiente.
Una vez que haya agregado una cierta cantidad de barras laterales a su tema, rápidamente se dará cuenta de la necesidad de tener nombres en lugar de solo números. Esto le ayudará a recordar en qué regiones de su página o plantillas se encuentra la barra lateral específica.
Para registrar las barras laterales con nombre, debe usar el siguiente código para registrar las barras laterales en su archivo functions.php:
La única diferencia en cuanto a lo que se está registrando aquí es actualmente el nombre de la barra lateral. Existen varios parámetros para personalizar aún más la salida HTML de los widgets de la barra lateral de la siguiente manera:
Fuente: register_sidebar
El uso de algunos de estos resultados en formato de matriz en la siguiente estructura de código.
'Lado izquierdo', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Esto dará lugar a la siguiente salida HTML.
Podemos cambiar los contenedores de HTML para el contenedor de widgets y el título con cualquier otro HTML, clases, ID, etc..
Además, para registrar más de un área de la barra lateral dinámica duplicamos la register_sidebar área del código junto con su matriz de parámetros tantas veces como sea necesario para registrar barras laterales adicionales.
'Lado izquierdo', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Con estos parámetros adicionales podemos controlar más fácilmente la salida HTML para que podamos igualar la estructura que necesitamos para el estilo que intentamos lograr. Usaremos el código anterior para reemplazar nuestras barras laterales numeradas con unas con nombre.
Es importante tener en cuenta que, al cambiar los registros de la barra lateral de la manera que acabo de hacerlo, o al agregar barras laterales adicionales, especialmente para temas que se ejecutan en sitios web en vivo, es posible que los widgets no sean asignados correctamente por WordPress
WordPress generalmente trata de mantener los widgets en las barras laterales según su orden, por lo que si se elimina o agrega un área de la barra lateral, WordPress puede reasignar sus widgets existentes a las áreas de la barra lateral que corresponden al pedido anterior de la barra lateral. En nuestro caso en este momento, esto no es un problema porque todavía tenemos solo 2 barras laterales, por lo que nuestros widgets se quedan donde estaban..
Actualmente habiendo cambiado los nombres en nuestro código de registro, ya que tenemos una configuración simple de 2 barras laterales, WordPress aún puede colocar nuestras barras laterales con nombres en nuestro tema según su orden. Sin embargo, necesitamos editar el código de ubicación de la barra lateral para reflejar los nombres que hemos creado para evitar posibles problemas en el futuro..
La colocación de barras laterales nombradas esencialmente requiere cambiar el número, en nuestro código de ubicación, al nombre de la barra lateral. Entonces, utilizando el primer código de ubicación con el que comenzamos, ése es el más simple:
El nombre que usamos debe ser idéntico al nombre que tenemos en la barra lateral de nuestro código de registro.
En términos del código de ubicación más extendido que usamos para nuestras barras laterales numeradas:
No hay widgets añadidos
Por favor inicie sesión y agregue algunos widgets a esta barra lateral
Usando la salida HTML generada por el código de registro, ahora podemos diseñar los elementos de nuestra barra lateral al contenido de nuestro corazón.
El enlace a continuación describe algunos de los elementos esenciales de CSS de la barra lateral / widget que debemos tener en cuenta al preparar los temas para el lanzamiento público. Esto es para que los usuarios que agreguen los widgets más comunes los tengan de estilo previo para que coincidan con la apariencia y el diseño del tema.
Estilos de CSS por defecto de WordPress - Jeff Star, DigWP
Ahora avanza y widgetiza!
Accentsconagua