barra lateral wordpress. Barras laterales de WordPress, creación de barra lateral de WordPress. Widgets predeterminados de WordPress
Muestra el primer panel de widgets activo (una barra lateral es un panel que contiene al menos un widget). Puede especificar la ID o el número del panel, cuál mostrar, si el sitio tiene más de un panel de widgets.
dynamic_sidebar() devuelve verdadero o falso, y el resultado devuelto también muestra la barra de widgets. El valor devuelto se puede usar, por ejemplo, para determinar si el código que reemplaza los widgets debe procesarse cuando no hay widgets en el panel (consulte el ejemplo n.º 1).
devoluciones
true si se encontró el panel de widgets. falso si el panel no existe o no contiene widgets.
Uso
$índice (cadena/número) El ID del panel especificado en el parámetro id de la función register_sidebar() cuando se registró el panel. Si se proporciona un número, se buscará en el panel con ID sidebar-$index.Predeterminado: 1 (barra lateral-1)
Ejemplos
#1 Muestre la barra lateral si existe.
Este ejemplo muestra cómo mostrar la primera barra lateral no vacía (la identificación de la barra lateral no se especificó durante el registro) o, si no se encuentra, procesar el código especificado:
#2 Muestre la barra lateral deseada.
#3 Comprobar la presencia del panel y mostrarlo
En el ejemplo 2, no verificamos la presencia de un panel y widgets en él. En este ejemplo, comprobaremos la presencia de un panel para no mostrar información innecesaria. Etiquetas HTML (
- ) si la barra lateral está vacía:
- Global. Formación. $wp_registered_sidebars Barras laterales registradas.
- Global. Formación. $wp_registered_widgets
- barra lateral dinámica: un contenedor para un conjunto de widgets que el usuario puede instalar a través del panel de administración -> sección Widgets.
- Plantilla de barra lateral: Esta es la barra lateral que muestra la plantilla del sitio.
Múltiples barras laterales
Al registrar más de un panel de widgets con register_sidebar() , es más conveniente especificar una identificación para cada panel.
No podemos especificar la identificación, entonces el panel recibirá un número de serie. Pero en este caso, al editar el tema, será difícil entender qué panel es cuál, porque los números 1, 2, 3 no significan nada. Pero si establece el nombre, se vuelve mucho más claro:
// --- numeros// registro registro_barra lateral(); // salida dynamic_sidebar(1); // --- Cuerdas// registro register_sidebar(array("id" => "top_menu")); // salida dynamic_sidebar("top_menu");
Del ejemplo, está claro que es más conveniente con las cadenas: al examinar el tema y ver la barra lateral dinámica ("top_menu"), queda claro de inmediato que se está llamando al panel del menú principal.
El argumento id no debe contener espacios, letras mayúsculas, letras cirílicas. Puede usar un guión y un guión bajo _ en él. También debe ser único. Al especificar la identificación, también podemos especificar el nombre, la descripción y las traducciones para ellos:
Register_sidebar(array("id" => "top-menu", "name" => __("Top Menu", $text_domain), "description" => __("Esta barra lateral se encuentra arriba del logo de la edad.", $texto_dominio))))
notas
Lista de cambios
| Desde la versión 2.2.0 | Introducido. |
Código barra lateral dinámica: wp-incluye/widgets.php WP 5.3.2
$valor) ( if (sanitize_title($value["name"]) == $index) ( $index = $key; break; ) ) ) $sidebars_widgets = wp_get_sidebars_widgets(); if (empty($wp_registered_sidebars[ $index ]) || empty($sidebars_widgets[ $index ]) || !is_array($sidebars_widgets[ $index ])) ( /** Esta acción está documentada en wp-includes/widget. php */ do_action("dynamic_sidebar_before", $index, false); /** Esta acción está documentada en wp-includes/widget.php */ do_action("dynamic_sidebar_after", $index, false); /** Este filtro es documentado en wp-includes/widget.php */ return apply_filters("dynamic_sidebar_has_widgets", false, $index); ) /** * Se activa antes de que los widgets se representen en una barra lateral dinámica. * * Nota: La acción también se activa para las barras laterales vacías, y tanto en la parte delantera * como en la parte trasera, incluida la barra lateral de Widgets inactivos en la pantalla de Widgets. * * @since 3.9.0 * * @param int|string $index Índice, nombre o ID de la barra lateral dinámica. * @param bool $has_widgets Indica si la barra lateral está llena de widgets. * predeterminado verdadero. */ do_action("dynamic_sidebar_before", $index, true); $barra lateral = $wp_registered_sidebars[ $índice]; $hizo_uno = falso; foreach ((array) $sidebars_widgets[ $index ] as $id) ( if (! isset($wp_registered_widgets[ $id ])) ( continuar; ) $params = array_merge(array(array_merge($sidebar, array("widget_id" => $id, "widget_name" => $wp_registered_widgets[ $id ]["name"],)),), (array) $wp_registered_widgets[ $id ]["params"]); // Sustituir id y clase HTML atributos en before_widget $classname_ = ""; foreach ((array) $wp_registered_widgets[ $id ]["classname"] as $cn) ( if (is_string($cn)) ($classname_ .= "_" . $cn; ) elseif (is_object($cn)) ( $classname_ .= "_" . get_class($cn); ) ) $classname_ = ltrim($classname_, "_"); $params["before_widget"] = sprintf($ params["before_widget"], $id, $classname_); /** * Filtra los parámetros pasados a la devolución de llamada de visualización de un widget. * * Nota: El filtro se evalúa tanto en el front-end como en el back-end, * incluso para la barra lateral de Widgets inactivos en la pantalla Widgets.* * @since 2.5.0 * * @see register_sidebar() * * @param array $params ( * @type array $args ( * Una matriz de argumentos de visualización de widgets. * * @type string $name Nombre de la barra lateral a la que está asignado el widget. * @type string $id ID de la barra lateral a la que está asignado el widget. * @type string $description La descripción de la barra lateral. * @type string $class Clase CSS aplicada al contenedor de la barra lateral. * @type string $before_widget marcado HTML para anteponer a cada widget en la barra lateral. * @type string $after_widget marcado HTML para agregar a cada widget en la barra lateral. * @type string $before_title marcado HTML para anteponer al título del widget cuando se muestra. * @type string $after_title marcado HTML para agregar al título del widget cuando se muestre. * @type string $widget_id ID del widget. * @type string $widget_name Nombre del widget. * ) * @type array $widget_args ( * Una matriz de argumentos de varios widgets. * * @type int $number Incremento numérico utilizado para múltiplos del mismo widget. * ) * ) */ $params = apply_filters("dynamic_sidebar_params", $parámetros); $devolución de llamada = $wp_registered_widgets[ $id ]["devolución de llamada"]; /** * Se activa antes de que se llame a la devolución de llamada de visualización de un widget. * * Nota: La acción se activa tanto en el front-end como en el back-end, incluidos * para widgets en la barra lateral de Widgets inactivos en la pantalla Widgets. * * La acción es no activado para barras laterales vacías.* * @desde 3.0.0 * * @param array $widget_id ( * Una matriz asociativa de argumentos de widget. * * @type string $name Nombre del widget. * @type string $id ID del widget. * @type array|callable $callback Cuando el gancho se activa en el front-end, $callback es una matriz * que contiene el objeto del widget. Activado en el back-end, $callback * es "wp_widget_control", consulte $_callback.* @type array $params Una matriz asociativa de argumentos de varios widgets.* @type string $classname Clase CSS aplicada al contenedor del widget.* @type string $description La descripción del widget.* @type array $_callback Cuando el gancho se dispara en la parte posterior end, $_callback se rellena * con una matriz que contiene el objeto widget, consulte $callback.* ) */ do_action("dynamic_sidebar", $wp_registered_widgets[ $id ]); if (is_callable($callback)) ( call_user_func_array($callback, $params); $did_one = true; ) ) /** * Se activa después de que los widgets se representan en una barra lateral dinámica. * * Nota: La acción también se activa para las barras laterales vacías, y tanto en la parte delantera * como en la parte trasera, incluida la barra lateral de Widgets inactivos en la pantalla de Widgets. * * @since 3.9.0 * * @param int|string $index Índice, nombre o ID de la barra lateral dinámica. * @param bool $has_widgets Indica si la barra lateral está llena de widgets. * predeterminado verdadero. */ do_action("dynamic_sidebar_after", $index, true); /** * Filtra si una barra lateral tiene widgets. * * Nota: El filtro también se evalúa para las barras laterales vacías, y tanto en la parte delantera * como en la trasera, incluida la barra lateral de Widgets inactivos en la pantalla Widgets. * * @since 3.9.0 * * @param bool $did_one Si al menos un widget se representó en la barra lateral. * predeterminado falso. * @param int|string $index Índice, nombre o ID de la barra lateral dinámica. */ return apply_filters("dynamic_sidebar_has_widgets", $hizo_uno, $index); )¡Hola amigos! Como prometí, hice un tema sobre Barras laterales de WordPress. Esta es una pequeña guía para usar y personalizar las barras laterales en los sitios de WordPress.
En este hilo, quiero revelar un pequeño secreto a todos los desarrolladores de plantillas: las barras laterales siempre han sido una parte importante del sistema de WordPress y se han mejorado mucho en los últimos años.
Teniendo en cuenta los desarrollos recientes, le mostraré el proceso paso a paso para crear y usar barras laterales para temas de WordPress.
¿Qué es una barra lateral de WordPress?
De hecho, el término ‘sidebar (barra lateral)’ puede significar dos conceptos completamente ajenos en el sistema de WordPress:
En la mayoría de los casos, las plantillas simples tienen una barra lateral dinámica que carga todos los widgets colocados desde el panel de administración. Este proceso también puede tener lugar según otro algoritmo, pero más a menudo según este esquema. Aún así, es importante comprender que una barra lateral dinámica y una plantilla de barra lateral son dos cosas diferentes. Todo es premium, principalmente trabajo con la plantilla Sidebar.
Por lo general, el término "barra lateral" se usa en relación con la barra lateral dinámica, que se analizará en este artículo. Sin embargo, también tocaré la plantilla de la barra lateral.
Lo que más me ha decepcionado al navegar por muchos temas es que los desarrolladores no aprovechan al máximo las funciones más potentes del sistema de WordPress. La mayoría de los temas solo tienen una barra lateral, dos en el mejor de los casos. Pero, después de todo, estos temas crearán páginas enormes con un conjunto de opciones que se pueden procesar fácilmente mediante widgets y su contenido se puede colocar directamente en la plantilla. Prefiero usar muchas barras laterales en un tema para crear un sitio flexible y rico en funciones.
Registrar, agregar y crear una barra lateral de WordPress
Muchos temas a menudo no cumplen con los estándares de calidad, por lo que si es un desarrollador de plantillas, asegurémonos de tomar este problema en serio. Crear una dinámica apropiada barra lateral de WordPress es la parte más importante del proceso, porque lo que configure en él estará relacionado con todas las demás funciones de la barra lateral.
Para crear una o más barras laterales, deberá registrarlas a través de un archivo funciones php Su tema, cada tema tiene su propio archivo que contiene todas las configuraciones de la plantilla. Archivar funciones php Puede agregar o eliminar la configuración del tema.
El siguiente código demuestra cómo puede crear una barra lateral en WordPress usando la función registrarse_barra lateral(). En este caso, crearemos una barra lateral llamada 'principal' que servirá como ejemplo para trabajar.
"primary", "name" => __("Primary"), "description" => __("Descripción de la barra lateral (visible en el panel de administración)"), "before_widget" => "
", "antes_título" => "", "después_del_título" => "
")); /* Puede repetir la función register_sidebar() para otros widgets, el campo de identificación debe ser único (primario, secundario, moiwidget, etc. */ ) ?>add_action("widgets_init", "registriruem_sidebari" ); función registro_sidebari() ( /* Registrar la barra lateral "primaria". */ registrarse_barra lateral( formación( "id" => "primario", "nombre" => __("Principal") , "descripción" => __( "Descripción de la barra lateral (visible en el panel de administración).") , "antes_widget" => "" , "antes_del_titulo" => " "después_del_título" => "" /* Puede repetir la función register_sidebar() para otros widgets, el campo de identificación debe ser único (primario, secundario, moiwidget, etc. */ |
Como puedes ver, registrar una barra lateral es una tarea muy sencilla si tienes información de cómo hacerlo.
Argumentos para crear una barra lateral dinámica barra_lateral_dinámica()
Función registrarse_barra lateral() acepta solo un parámetro, se llama $argumentos y contiene un conjunto de argumentos que especifican cómo se debe representar la barra lateral con sus widgets. A continuación, considere ejemplos de cómo usar argumentos manualmente.
IDENTIFICACIÓN
Argumento identificación, es probablemente uno de los argumentos más importantes para escribir (consulte el ejemplo de código mal escrito a continuación y vea por qué definitivamente debería escribirlo). WordPress usará identificación para asignar widgets a una barra lateral en particular, y necesitarás identificación para llenar aún más la barra lateral - barra lateral.
Cada identificación debe ser único. WordPress, por defecto, lo prescribirá para barra lateral-$i(Dónde $ yo
// nuestra identificación de widget, que se asigna solo una vez "id" => "primary",
Nombre
Puede escribir cualquier nombre que crea que representa mejor su barra lateral de WordPress. La mayoría de las veces, las barras laterales reciben nombres mediante los cuales el usuario puede determinar qué aspectos del tema están tocando (por ejemplo, barra lateral izquierda o derecha). Este argumento puede ser internacionalizado (es decir, localizado para otros idiomas). Así que asegúrese de escribir el dominio de texto correcto cuando prepare su tema para la traducción. El argumento, por defecto, se escribe como Sidebar $ yo(Dónde $ yo es el número ordinal de la barra lateral creada).
//nombre del widget, en el ejemplo utilizo Primario como el nombre de la identificación del widget "nombre" => "Principal",
descripción
Argumento descripción se introdujo por primera vez en WordPress 2.9. Este argumento le permite describir su widget, la descripción se muestra en el panel de administración en la sección Widgets. Este argumento, por defecto, se escribe en una cadena vacía. También se puede internacionalizar (es decir, escribir en cirílico u otros idiomas).
//la descripción será visible en la sección de widgets "descripción" => __("Widget para la columna izquierda del sitio"),
antes_widget
Argumento antes_widget este es el elemento de apertura del widget asignado a la barra lateral. También debe ser un elemento de nivel de bloque. HTML marcado (por ejemplo, etiqueta < li > , < p > , < div > etc.). Este argumento tiene un par de características que puedes escribir, por ejemplo, en identificación="" o clase="": atributos identificación="" se escriben asi: (%1$s) y atributos clase="" Entonces: (%2$s).
De forma predeterminada, WordPress los enumerará como un elemento de la lista: < li id = "%1$s" > . No soy fanático de crear elementos de la lista de widgets de la barra lateral. siempre uso < div > . No soy fanático de crear elementos de la lista de widgets de la barra lateral. La última vez que lo uso, porque en ausencia de un widget en el sitio, no verá extra HTML etiquetas, sin embargo, más adelante consideraremos cómo deshacernos de ellas.
después_widget
Argumento después_widget bastante fácil de crear. Este es el elemento de cierre del widget asignado a la barra lateral. Solo necesita cerrar el elemento especificado para el argumento. antes_widget. Por defecto, WordPress lo escribirá como < li > .
"después_widget" => "
[ crayón - 5e1ff7d787fb8042608178 en línea = "verdadero" ] "después_widget" => "" , |
before_title
La mayoría de los widgets muestran un título si el usuario lo ingresa. Argumento before_title este es el elemento de apertura del título del widget. Por defecto, WordPress lo escribe como < h2 > . Para usar etiquetas < h2 > no vale la pena, en este caso las etiquetas servirán < h3 > Y < h4 > . Para la intuición y la legibilidad del código, no haga nombres de clases sin guiones, para que le resulte más conveniente leer el nombre usted mismo, es muy importante si no ha trabajado con el sitio durante algún tiempo.
after_title
Argumento after_title este es el elemento de cierre especificado en el argumento before_title. Por defecto, WordPress lo escribe como <
/
h2
>
.
Debe asegurarse de que su valor coincida con el valor especificado en el argumento before_title.
"después_del_título" => ""
"después_del_título" => "" |
Mostrar una barra lateral dinámica dynamic_sidebar()
Cuando se completa la creación de la barra lateral, puede comenzar a mostrarla dentro del tema. WordPress ha creado una función para esto llamada < a title = "Función Codex Wordpress dynamic_sidebar()" href= "http://codex.wordpress.org/Function_Reference/dynamic_sidebar" target="_blank" > barra lateral_dinámica()< / a > . Esta función siempre pide un parámetro. $índice, que puede ubicarse simultáneamente tanto en el argumento identificación, y en el argumento nombre(especificado durante la creación de la barra lateral). Aunque es técnicamente posible usar ambos, es mucho más seguro usar el que le recetaron. identificación.
Usando el código a continuación en una de sus plantillas, puede colocar la barra lateral primario descrito justo arriba. tenga en cuenta que división Con clase Y identificación Puede cambiar a su discreción y atornillar varios CSS estilos
< div id = "id-vidgeta-primary" class = "moi-saidbar" > // llamar a la función de visualización de la barra del sitio
< / div > |
Por lo general, este código se encuentra en el archivo barra lateral - primaria. php, que aprenderá en un momento cuando hablemos de plantillas de barra lateral. Sin embargo barra_lateral_dinámica() se puede llamar en cualquier parte de su tema.
- hacemos y
Visualización de contenido predeterminado
Algunos desarrolladores de temas muestran su propio contenido si el usuario no ha anclado ningún widget a una barra lateral específica. Para buscar widgets en la barra lateral, use la etiqueta condicional es_barra_lateral_activa() .
Como una función barra_lateral_dinámica(), usado para llenar la barra lateral, la función es_barra_lateral_activa() siempre pide un parámetro $índice, que debe ser IDENTIFICACIÓN barra lateral que está revisando.
Con el siguiente código podemos probar nuestra barra lateral primario para widgets. Si hay widgets, los mostraremos, si no, mostraremos el contenido que hemos preparado especialmente.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div > |
No mostrar la barra lateral sin widgets
La sección anterior le mostró cómo colocar el contenido faltante cuando una determinada barra lateral no está activa, pero también tiene la opción de colapsar completamente (no mostrar nada) una barra lateral cuando la barra lateral no está activa.
Usaremos de nuevo la función es_barra_lateral_activa() para comprobar la barra lateral primario para widgets.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div >
|
Por cierto, aquí se te ocurren algunas cosas interesantes. Por ejemplo, puede crear un ancho de barra lateral dinámico para su contenido en función de qué barras laterales están activas y cuáles no. Más sobre esto en los próximos artículos.
Plantillas de barra lateral - Barra lateral
Hemos abordado todos los aspectos de la creación y el trabajo con una barra lateral dinámica, pero debe tenerse en cuenta que hay otras características interesantes. Así que echemos un vistazo a las plantillas de la barra lateral.
La plantilla de la barra lateral se utiliza para alojar el código de la barra lateral dinámica (consulte "Visualización de la barra lateral dinámica" más arriba). En promedio, todos los temas de WordPress tienen una plantilla llamada barra lateral php. Si su tema tiene una barra lateral, esta plantilla es suficiente.
Las plantillas de la barra lateral se rellenan dentro del tema usando la función get_sidebar().El siguiente código es lo que suelo usar para llenar un archivo barra lateral php.
[ crayón - 5e1ff7d788042260898923 en línea = "verdadero" ] |
get_sidebar() también siempre pide un parámetro $ nombre, que te permitirá rellenar patrones más específicos. Por ejemplo, el siguiente código solicita un archivo de plantilla barra lateral - primaria. php.
[ crayón - 5e1ff7d788051693571425 en línea = "verdadero" ] |
Para mantener su tema en orden y separar el código, debe crear una plantilla específica para cada barra lateral dinámica. Le sugiero que primero cree dos barras laterales dinámicas con identificación: primario Y secundario. Para una mejor organización, cree dos archivos: barra lateral - primaria. php y sidebar-secundario. php.
Necesitará el código siguiente para crear ambas plantillas.
[ crayón - 5e1ff7d788066428860015 en línea = "verdadero" ]
|
Arriba está el código tradicional que uso para crear plantillas. Puede modificarlo ligeramente para adaptarlo mejor a sus necesidades personales. Todavía necesita asegurarse de usar la función get_sidebar() al completar la plantilla de la barra lateral.
Tenga en cuenta que las plantillas de barra lateral no siempre muestran barras laterales dinámicas. Técnicamente pueden contener contenido de usuario codificado capaz de reflejar cualquier cosa. Recuerde también que puede colocar una barra lateral dinámica en casi cualquier archivo de su plantilla para mostrarla en diferentes páginas del sitio.
Código de barra lateral incorrecto
Hay una serie de fallas que se repiten de código en código, que no son aceptables en buenos sitios. No todos son, por supuesto, técnicamente incorrectos, pero pueden provocar fallos de funcionamiento o son simplemente una carga adicional de código.
Problema 1: código desordenado descargado funciones php
Si está desarrollando temas, debe saber que los ganchos integrados de WordPress funcionan con ganchos. No solo es necesario conocerlos bien, es importante utilizarlos. El mayor problema que he encontrado es que el código simplemente se descarga en funciones php. Debe crear una función de registro de la barra lateral y luego adjuntarla a widgets_init. Puede ver un ejemplo de cómo hacer esto arriba en la sección Registrar y crear una barra lateral dinámica.
Como nota al margen: debe olvidar que puede volcar el código en funciones php. Utilice siempre la función de ganchos en WordPress, esto asegurará que sus funciones estén 100% completas.
Problema 2: no hay identificaciones registradas
Es importante entender que si la identificación no está claramente definida, esto seguramente traerá ciertas consecuencias. cuando usas registrarse_barra lateral() o registrarse_barras laterales() sin prescribir a un individuo identificación, WordPress crea automáticamente indicadores identificación, contando el número de barras laterales ya creadas. Y, al parecer, todo es maravilloso. Pero esto es un gran error. Después de todo, cuando un complemento o tema infantil crea una nueva barra lateral, a la barra lateral se le asigna la identificación 1 (si es la primera en la transmisión), lo que hace que la identificación de todas las demás barras laterales cambie. Cuando el usuario accede a la barra lateral, verá que todos sus widgets están asignados a otra barra lateral.
Los widgets se adjuntan a la barra lateral dinámica, de acuerdo con su identificación. Si identificación cambia, los widgets también se mueven. Por eso es tan importante prescribir correctamente identificación al crear la barra lateral. Arriba, en el apartado 'Registro y creación de una barra lateral dinámica', puedes ver cómo hacerlo bien.
Otro beneficio de la escritura clara identificación es que sabes exactamente lo que identificación destinado a ser utilizado en otras funciones tales como barra_lateral_dinámica() Y is_active_sidebar function_exists() no hay necesidad. Como se mencionó anteriormente en este artículo, las barras laterales dinámicas existen desde 2007. Puede usar este tipo de verificación solo para la compatibilidad con versiones anteriores. Sin embargo, la mayoría de los temas no son compatibles con versiones anteriores y no recomiendo usarlos desde la versión anterior.
Uno de los tipos comunes de comprobación de la existencia de una función. registrarse_barra lateral() mostrado abajo. Olvídate de este tipo de cheques y simplemente crea una barra lateral.
si (función_existe("registro_barra lateral")) dynamic_sidebar include (TEMPLATEPATH . "/sidebar.php" );
Esta no es la mejor manera de mostrar una barra lateral en un tema. El sistema WordPress tiene una función. get_sidebar(), con el que puedes hacer esto fácilmente. Úselo siempre como se muestra en el ejemplo anterior en la sección 'Plantillas de la barra lateral'. Deberías usar esta función porque el gancho
A veces, hay temas en los que solo hay 1 barra lateral y se usan para las necesidades del tema en sí, y no puede colocar nuevos widgets allí. Tal vez necesite modificar una plantilla de tema existente y agregar una barra lateral adicional, digamos que el tema tiene una a la izquierda, pero necesita agregar otra a la derecha.
Resolver este problema no es nada difícil. Basta con hacer pequeños cambios en los archivos del tema functions.php y el archivo de plantilla de la página donde desea colocar la barra lateral. Cómo saber qué archivo es responsable de mostrar las páginas
Primero necesitas registrar una nueva barra lateral. Esto se hace en el archivo functions.php en la carpeta de plantillas. register_sidebar(array("name" =>"Nueva barra lateral", "id" => "área-widget-secundaria", "antes_widget" => "", "después_del_título" => "
",));
Listo, ha aparecido una nueva barra lateral en el panel de control de widgets. Solo queda personalizar ligeramente su apariencia en el archivo style.css (puede copiar el aspecto del existente)
que es que en codigo
Nombre– el nombre de la barra lateral (barra lateral), se mostrará en el panel de administración Widgets.
identificación- identificador único. Necesario al agregar a la página.
antes_widget- código o texto a insertar antes de cada widget.
después_widget- código o texto que se insertará después de cada widget.
before_title– código o texto que se insertará antes del título del widget.
after_title– código o texto que se insertará después del título del widget.
Preste atención a la ID, el nombre de la barra lateral, en este caso es "área-widget-secundaria". Debe ser exactamente igual al nombre especificado durante el registro en el archivo functions.php.
La barra lateral es un campo especial en el sitio donde se incrustan los widgets. En otras palabras, es una columna con contenido dinámico. Casi todas las plantillas tienen tales columnas y su número puede ser diferente. A menudo se utiliza de 1 a 4 columnas.
Para hacer que cualquier plantilla sea lo más única posible, o simplemente mejorar la apariencia o destacar, puede cambiar la posición de las columnas en relación con el campo de texto principal en las plantillas estándar, gratuitas y de pago para WordPress, que es lo que haremos. en este articulo.
Cambiar la ubicación de la barra lateral y el texto del cuerpo
Entonces, digamos que la plantilla que usamos tiene una columna para widgets, es decir, una barra lateral y una columna principal donde se coloca el texto de nuestros artículos y páginas:
Deje que la columna con widgets se ubique a la derecha, y debemos moverla hacia la izquierda hasta el borde. En consecuencia, la columna con el contenido de texto principal se moverá hacia la derecha hasta el borde.
Para hacer todo esto, necesitas cambiar un poco los estilos. El contenido de texto suele tener el estilo #contenido, mientras que el contenido de los widgets suele tener el estilo #barra lateral. Todo lo que se necesita es cambiar las propiedades del primero de float: left; en flotador: derecha; y en una secuencia diferente para el segundo.
Cambiar la ubicación de la barra lateral en el tema Twenty Twelwe
Considere todo lo anterior en el ejemplo de un tema de respuesta estándar para WordPress.
Barra lateral: parte de casi cualquier sitio, generalmente ubicada a la izquierda, a la derecha del área de contenido o al frente del pie de página (footer). Las barras laterales de WordPress no son una excepción. La única diferencia es que en WordPress, una barra lateral es un área donde los widgets se muestran automáticamente. Puede crear un número ilimitado de barras laterales en WordPress, pero por ejemplo, crearé dos barras laterales, a la izquierda y a la derecha del área de contenido principal.
Registro de barras laterales de WordPress
Para que las barras laterales se muestren primero en el panel de administración, debemos registrarlas. En otras palabras, agregue el código al archivo functions.php:
/** * Registrar barras laterales. */ function fwbs_widgets_init() ( register_sidebar(array("name" => __("Columna derecha", "fwbs"), "id" => "barra lateral-1", "descripción" => __("Barra lateral derecha " , "fwbs"), "antes_widget" => " ", "antes_título" => "
", "después_del_título" => "
",)); register_sidebar(array("nombre" => __("Columna izquierda", "fwbs"), "id" => "barra lateral-2", "descripción" => __("Columna izquierda en el pie de página del sitio ", "fwbs"), "antes_widget" => " ", "antes_título" => "", "después_del_título" => "
",)); ) add_action("widgets_init", "fwbs_widgets_init");Analizando el código anterior para crear barras laterales de WordPress
No es tan complicado como parece a primera vista.
- "nombre" => __("Columna derecha", "fwbs") - el nombre del área del widget, puede escribir cualquier nombre, solo con cuidado entre corchetes, mire la pantalla para ver dónde se muestra;
- "id" => "sidebar-1" - ID es un identificador único asignado a la barra lateral, todas las barras laterales deben tener su propia, diferente de otras ID;
- "descripción" => __("Columna del lado derecho", "fwbs") - descripción, similar al nombre de la zona del widget;
- "antes_widget" => "
- "después_widget" => "" - la etiqueta HTML que cierra la zona de la barra lateral. Como sabemos, todas las etiquetas HTML, con algunas excepciones, deben estar emparejadas (apertura y cierre);
- "before_title" => "
": el título del widget se incluirá en una etiqueta H4 con la clase
, puede cambiar el significado del encabezado H1, H2, H3, H4, H5, H6 y asignar sus propias clases;
- "después_del_título" => ""- clausurapar de etiquetas para el título del widget.
Ahora vamos al panel de administración, a la sección de "widgets" y miramos el resultado. Aquí hay una foto de lo que obtuve:
Con este código, registré dos zonas de widgets de WordPress, ahora necesito mostrarlas en la pantalla.
Mostrar barras laterales de WordPress
Para mostrar barras laterales en cualquier parte de la plantilla, es lógico escribir el siguiente código en el lugar correcto:
Algunas explicaciones sobre el código:
- - Código PHP que da un comando, si hay widgets en la barra lateral debajo de id=sidebar-1, entonces debería mostrarse en la pantalla, si no hay widgets, la barra lateral no se muestra;
- - Código PHP que llama a la barra lateral debajo de id=sidebar-1 en el lugar donde lo escribiste en el código de la plantilla.
Pero como puede ver, en las plantillas de WordPress, el código de salida de la barra lateral se coloca en archivos sidebar.php separados, y luego el contenido se genera desde el archivo sidebar.php en el lugar correcto de la plantilla. Como sabemos que WordPress presenta el contenido dinámicamente y la plantilla del sitio consta de varias partes, una de sus partes es el archivo sidebar.php Déjame hacer eso.
Creando el archivo sidebar.php
Cree un archivo como sidebar-right.php, asígnele un título y pegue el código anterior en él. En conjunto se verá así:
Como puede ver en el ejemplo, complementé el código con marcado HTML adicional. Ahora, para mostrar el área de widgets, queda escribir lo siguiente en el lugar correcto:
Para la columna del lado izquierdo, el archivo sidebar-left.php se crea en consecuencia y se muestra en el lugar correcto de la plantilla de esta manera:
Como dicen, encuentra una diferencia en el código.
Eso es todo, se han creado las barras laterales, ahora lo único que queda es crear marcas para ellas en la plantilla y escribir estilos CSS.
