Una característica útil de WordPress es la forma en que genera las clases y los ID. Algunos de estos son generados por el propio sistema, mientras que en otros casos usted inserta algo de PHP en su tema y WordPress lo usa para agregar clases e ID al marcado de página..
En este tutorial, demostraré tres formas en que WordPress hace esto y proporcionaré aplicaciones prácticas y ejemplos para cada uno. Las tres áreas que trataré son las siguientes:
Clases e ID generadas para las imágenes que usted carga a WordPress a través del cargador de medios
Etiquetas de plantilla que se utilizan en los archivos de plantilla de un tema para generar clases e ID en función del contenido y la página que se está viendo
Parámetros que puede configurar al registrar widgets y menús (o que ya se establecerán en un tema bien escrito), que generarán clases e ID relevantes para tipos específicos de widgets, widgets individuales y elementos de menú
Para cada uno de estos, explicaré cómo funcionan y luego demostraré cada uno con algunos ejemplos..
Lo que necesitarás para completar este tutorial
Para seguir los ejemplos prácticos de este tutorial, necesitarás:
Una instalación de desarrollo de WordPress.
Un tema que puedes editar.
Trabajaré con un tema secundario de Twenty Twelve: puedes acceder a los archivos de temas en el paquete de códigos.
Clases e IDS generados para imágenes por el cargador de medios
Cuando carga imágenes a través del cargador de medios, se le da la opción de especificar cómo se debe alinear la imagen, como se muestra en la captura de pantalla. También se le pedirá que elija qué tamaño de imagen desea mostrar: miniatura, tamaño medio, grande o completo.
Basado en su selección, WordPress asigna el etiqueta para sus imágenes subidas una serie de clases. Las clases de alineación son las siguientes:
.alinearse
.Alinear al centro
.alinear
.alinear a la izquierda
Además, WordPress le asigna el .wpcaption clase a cualquier título que agregue a una imagen. Los subtítulos tendrán esta clase, así como una de las clases de alineación anteriores, según cómo elijas para alinear la imagen..
WordPress también agrega clases para cada tamaño de imagen:
.tamaño completo
.talla larga
.talla mediana
.tamaño-miniatura
Puede utilizar estos para diseñar imágenes de cada tamaño de archivo.
La mayoría de los temas incluirán CSS para estilizar cada una de estas clases de manera apropiada, por ejemplo, el tema Twenty Twelve incluye lo siguiente:
El CSS anterior alinea cualquier elemento (no solo imágenes) con el .alinear a la izquierda, .alinear o .Alinear al centro clase, lo que significa que también puede usar estas clases para diseñar estilos que no sean imágenes si lo desea.
También agrega márgenes a las imágenes que tienen estas clases y asegura que las imágenes de tamaño grande y grande no se alejen de su elemento contenedor, usando ancho máximo: 100%.
Puedes ver el efecto de esto en la captura de pantalla de abajo. La primera imagen está alineada a la derecha y la segunda centrada y de tamaño completo.
Agregue su propio estilo usando estas clases e identificaciones
Además de establecer la alineación y los márgenes para cada una de estas clases, puede usarlas para agregar estilos adicionales..
La primera imagen en la captura de pantalla de arriba está alineada a la derecha. Si se cambia el tamaño de la pantalla, se mantiene del mismo tamaño y el texto se envuelve desordenadamente:
Puede agregar un estilo para asegurarse de que cualquier imagen alineada a la derecha no ocupe más del 50% del ancho de la pantalla, de modo que el texto se ajuste mejor, agregando el siguiente CSS a su hoja de estilo:
img.alignright max-width: 50%;
Ahora, cuando la página se ve en una pantalla estrecha, la imagen es menos dominante:
Además de agregar CSS para el diseño o el tamaño, puede agregar un estilo decorativo a las imágenes que están alineadas de cierta manera. Para agregar un estilo decorativo a las imágenes centradas de tamaño completo, agregue lo siguiente a su hoja de estilos:
Esto agrega un borde a la imagen y reduce su tamaño:
Etiquetas de plantilla para agregar clases e identificaciones
Las clases y los ID que hemos examinado para las imágenes son generados por WordPress. Otras etiquetas e identificaciones pueden ser generadas por etiquetas de plantilla en su tema.
Nota: Si no está familiarizado con las etiquetas de plantilla, eche un vistazo al artículo Etiquetas de plantilla de Codex.
Hay dos conjuntos de etiquetas de plantilla: una que se aplica a la Etiqueta HTML y dos que se aplican a publicaciones individuales.
los body_class () Etiqueta de plantilla
Un tema bien escrito tendrá la siguiente etiqueta en su header.php expediente:
>
Esto reemplaza lo normal. etiqueta. los body_class () etiqueta de plantilla le dice a WordPress que asigne clases a la etiqueta basada en la página que se está viendo y el archivo de plantilla que está usando del tema activo.
La lista de clases que se pueden generar es larga y puede encontrarla en el Códice de WordPress.
Algunos ejemplos incluyen:
.casa para la página de inicio
.single-postid- ID cuando se está viendo una sola publicación, donde ID es la identificación numérica de esa publicación
.archivo para cualquier página de archivo
.página-plantilla- nombre de archivo -php cuando se utiliza una plantilla de página personalizada
Si desea agregar clases adicionales a la etiqueta que no son generados por WordPress, puede. Por ejemplo, para agregar la clase "hola", el código es:
>
Puede agregar tantas clases como desee de esta manera, separándolas con espacios.
Puedes usar las clases generadas por el body_class () etiqueta para agregar un estilo que sea específico para una determinada ubicación en el sitio o un archivo de plantilla, o para elementos dentro de ese archivo de plantilla.
Por ejemplo, en mi tema hijo, he creado una plantilla de página llamada page-full-width-with-sidebar.php, que está diseñado para mostrar páginas con el ancho completo del contenido y la barra lateral debajo del contenido en lugar de a su derecha. Puedes encontrar esta plantilla de página en el paquete de código..
Utilizando la body_class () etiqueta, WordPress genera una .page-template-page-full-width-with-sidebar-php clase para el etiqueta (entre otras clases).
Entonces, para diseñar los elementos de una página con esta plantilla, agregue lo siguiente a su hoja de estilo:
/ * diseño de estilo para la plantilla de página completa con barra lateral * / .page-template-page-full-width-with-sidebar-php .site-content, .page-template-page-full-width-with-sidebar-php. widget-area ancho: 100%; Limpia los dos; .page-template-page-full-width-with-sidebar-php # secondary.widget-area .widget width: 48%; margen: 0 1%; flotador izquierdo;
Esto establece el ancho del contenido principal y la barra lateral (#secundario) al 100%, y también alinea los widgets en la barra lateral uno al lado del otro. Puedes ver el efecto en la captura de pantalla:
Nota: Si su tema es sensible, asegúrese de realizar ajustes en el ancho de los widgets en pantallas estrechas en sus consultas de medios.
los post_class () y ID del mensaje() Etiquetas de plantillas
Estas etiquetas funcionan de manera similar a la body_class () etiqueta, pero los utiliza con publicaciones individuales en el bucle en lugar de elemento.
Por ejemplo, en el tema Twenty Twelve, cada publicación en el bucle está envuelta en un Elemento con estas etiquetas aplicadas:
> // contenido aquí
Esto genera una cantidad de clases basadas en la categoría y el tipo de la publicación y una identificación basada en la identificación numérica de la publicación. Por ejemplo, una publicación en mi sitio de demostración con la categoría de 'rojo' generará las siguientes clases e ID:
// contenido
Puede utilizar estas clases para diseñar publicaciones de categorías individuales de manera diferente. En el sitio de demostración hay tres categorías configuradas: 'rojo', 'azul' e 'importante'.
Para personalizarlos, agregue el siguiente CSS a la hoja de estilo del tema:
/ * publicaciones de estilo en la categoría 'roja' * / .category-red border-top: 2px solid # cc0000; / * publicaciones de estilo en la categoría 'azul' * / .category-blue border-top: 2px solid # 3366ff; / * publicaciones de estilo en la categoría 'important' * / .blog .category-important padding-top: 2em; margen izquierdo: 2em; .category-important: antes de contenido: '¡LEA ESTE POST! ES IMPORTANTE';
Esto agrega un estilo para cada una de las categorías: un borde coloreado para cada una de las categorías de color y un margen adicional para la categoría "importante". También utiliza un pseudo-elemento para insertar contenido adicional antes de cada publicación en la categoría "importante".
El resultado se muestra en la captura de pantalla..
Uso de clases e identificaciones con widgets y menús
Cuando los widgets se registran en un tema (o, a veces, un complemento), las funciones utilizadas pueden incluir un código que le indica a WordPress que genere clases e ID basadas en el nombre, tipo e ID del widget..
Cuando se registran los menús, WordPress puede generar clases basadas en el nombre del menú, la posición de los elementos dentro del menú y la ubicación en el sitio. Puedes usar todo esto para estilizar tus widgets y menús..
Clases e IDs para Widgets
Para registrar un área de widgets, utiliza la register_sidebar () funciona en tu tema funciones.php expediente. Esto toma los siguientes parámetros:
__ ('Nombre de la barra lateral', 'dominio_dominio_tema'), 'id' => 'unique-sidebar-id', 'description' => ", 'class' =>", 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
'); ?>
Hay dos parámetros que generan clases y / o IDs:
'clase' => "
'before_widget' => '
'
los 'clase' el parámetro le permite especificar manualmente una clase para el área del widget. Los ajustes para el 'before_widget' los parámetros le dicen a WordPress que genere una ID única para cada widget en el área de widgets y también una serie de clases para él, que se basarán en el tipo de widget que sea.
Por ejemplo, en el sitio de demostración, he agregado dos widgets: una lista de publicaciones y una lista de páginas. Para la lista de publicaciones se genera el siguiente HTML:
Para la lista de páginas se genera el siguiente HTML:
Puede usar esto para personalizar los widgets en los que se publican las listas, agregando el siguiente CSS a la hoja de estilo del tema:
/ * widget específico de estilo * / aside.widget_pages border: 1px solid # 3366ff; relleno: 5px;
Esto agrega un borde a las páginas de listado de widgets, como se muestra en la captura de pantalla:
Nota: Esto funciona en el sitio de demostración porque utiliza un tema secundario del tema de los veinte doce, que tiene barras laterales registradas correctamente. Si está creando su propio tema, tendrá que agregar la etiqueta register_sidebar () con los parámetros anteriores. Descubra cómo hacerlo en el artículo del Codex asociado..
Clases e identificaciones para menús
Los menús de navegación se muestran con el wp_nav_menu () etiqueta en tu tema header.php expediente. Esto toma una serie de parámetros, como se detalla en el wp_nav_menu artículo.
Uno de estos agrega clases e ID a cada elemento del menú:
'items_wrap' => '
% 3 $ s
'
Esto agrega una identificación y un número de clases a cada artículo. Las clases se basan en la clase del menú en sí y la ubicación en el sitio. Por ejemplo, cuando el usuario está en una página en el sitio, su entrada en el menú de navegación tendrá la .current_page_item clase.
Puede usar esto para agregar estilo a la entrada de la página actual en el menú. Por ejemplo, para agregar un subrayado a la página actual, agregue lo siguiente a su hoja de estilo:
/ * enlace de la página activa de estilo en la navegación * / .main-navigation .current_page_item a text-decoration: underline;
El subrayado resultante se puede ver en la captura de pantalla (así como el cambio de color que ya se encuentra en la hoja de estilo del tema principal):
Nota: Como uso un tema secundario del tema de los veinte doce, no necesito agregar el wp_nav_menu () etiqueta, ya que esto ya está presente en el tema principal.
Resumen
Como hemos explorado anteriormente, hay varias formas en que WordPress generará clases e ID en los elementos de un sitio. Algunos de estos son generados por WordPress y otros usan etiquetas de plantilla o parámetros de función para decirle a WordPress que genere las clases y los ID. Puede usarlos para diseñar páginas, menús, widgets, listas de publicaciones y otros elementos en su diseño..
Hay muchas otras formas en que puede usar estas clases e ID para estilizar sus proyectos. Por ejemplo:
Podría crear un sitio con varias secciones distintas, utilizando clases generadas por el body_class () etiqueta para hacer que el contenido en cada sección se vea muy distinto
Puede aplicar un estilo a las listas de publicaciones individuales de manera diferente en una página de archivo seleccionando la ID generada por el La identificación() etiqueta
Puede resaltar los elementos del menú actual en su navegación, creando un efecto similar a un botón y utilizando imágenes, fondos, degradados y más
Puede usar una combinación de lo anterior, por ejemplo, para diseñar diferentes widgets en diferentes áreas del sitio.
Las posibilidades están limitadas solamente por su imaginación.!
Recursos
Algunas páginas útiles del Codex sobre los temas tratados en este tutorial:
Clases generadas para imágenes: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
los body_class () etiqueta: http://codex.wordpress.org/Function_Reference/body_class
los post_class () etiqueta: http://codex.wordpress.org/Function_Reference/post_class
los La identificación() etiqueta: http://codex.wordpress.org/Function_Reference/the_ID
los wp_register_sidebar () función: http://codex.wordpress.org/Function_Reference/register_sidebar
los wp_nav_menu () etiqueta: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Una guía para etiquetas de plantillas: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
