Este es el encabezado H1
Encima de este párrafo debe estar el título H1 de su página web. Si no es visible, la configuración de diseño para la etiqueta H1 se establece en display:none
que muchos temas de WordPress utilizan para ocultar el texto del título del blog y reemplazarlo con un gráfico. No utilices el H1 dentro del área de tu blog. Si el diseño del encabezado H1 se parece al título de tu blog o al título de la entrada del blog, entonces ese es el estilo establecido para esa etiqueta HTML y no debes utilizarlo dentro del área de tu entrada del blog. Dentro de esta sección de datos de prueba se encuentran la mayoría de los estilos básicos de HTML y XHTML y CSS que podría utilizar dentro de su tema de WordPress. Hay que saber cómo será eso como parte de la estructuración de los estilos.
Esta es la rúbrica H2
Encima de este párrafo debería estar el título H2 de su página web. Los temas de WordPress utilizan el encabezado h2 para varios propósitos. Lógicamente, debería ser el título de la entrada o el primer título del contenido de la misma. Sin embargo, se utiliza en todos los temas de WordPress, incluyendo el subtítulo, la línea de la etiqueta, el título de la entrada, el área de comentarios, el área de la barra lateral, e incluso en el pie de página. Sea específico a la hora de dar estilo a cada uno de los encabezados h2 para asegurarse de que no está dando estilo a todos ellos.
Esta es la rúbrica H3
¿Es éste el mismo título que aparece en el post o son los títulos de las secciones que se encuentran en la barra lateral? ¿O es diferente? Este es el encabezamiento del contenido de la publicación para la etiqueta HTML h3, al igual que el siguiente, H4, para los encabezamientos de sección dentro de su publicación para dividir los temas. Si hay una etiqueta H3 o H4 en tu barra lateral, tendrás que identificar el HTML padre y el contenedor CSS para la barra lateral y darles el estilo apropiado en la hoja de estilos de tu blog. Para más información sobre la búsqueda de sus estilos en su blog de WordPress, vea CSS: Estudiando tus estilos CSS. Observe también el estilo de los enlaces en ese párrafo, de modo que puede dar estilo a los enlaces dentro del área de contenido de su publicación. Los enlaces tienen tres estilos. Existe el color del enlace, el color del enlace hover y el color del enlace visitado. Asegúrese de diseñar para cada estilo.
Esta es la rúbrica H4
En esta sección, bajo el epígrafe H4, vamos a ver cómo es el contenido de las entradas, la carne y las patatas de su sitio. En general, tendrás varios párrafos, así que añadiremos otro párrafo para que puedas ajustar el espaciado entre ellos al aspecto que desees. Los párrafos no sólo sirven para escribir tus balbuceos en el blog, sino que también pueden enmarcar y mantener otra información dentro de tu área de contenido para ayudar a hacer el punto que quieres hacer en tu escritura. Por ejemplo, lo normal es tener tres tipos de listas.
- Listas generales con la etiqueta
<ul>
- Listas ordenadas con la etiqueta
<ol>
- Listas de definiciones con la etiqueta
<dl>
- Las listas de definición utilizan otras dos etiquetas para generar la lista:
<dt>
establece la palabra o frase que se va a «definir», normalmente en negrita, y<dd>
establece la definición, que suele estar en un tipo de letra normal o ligeramente más pequeño y con sangría debajo de la definición.
- Las listas de definición utilizan otras dos etiquetas para generar la lista:
- Y aquí se acaban las listas
Y acabamos de probar un párrafo antes y después de una lista general junto con una lista anidada para ayudarte a ver cómo serán al menos tres niveles de la lista. Asegúrese de que cada nivel de la lista se ajusta a sus necesidades específicas. Puede que quiera utilizar el disco o el círculo por defecto, o puede que quiera añadir también viñetas gráficas a su lista.
Esta es la rúbrica H5
Aunque el encabezamiento H5 no se utiliza siempre, tal vez pueda encontrar la necesidad de utilizarlo si se utilizan los encabezamientos H1 y H2 y H3. Es posible que necesites uno o dos niveles de subtítulos en el contenido de tu post, así que este te da otra opción. También tenemos que mirar a las otras dos listas y luego añadir algunas imágenes y otros estilos para dar cuerpo a su caja de arena Tema de WordPress.
- Primero tienes que hacer esto.
- Tienes que hacer esto en segundo lugar.
- Podrías hacer esto en el medio.
- O también puedes probar esto.
- Pero esta es la tercera y última cosa que hay que hacer.
Esto debería darle una idea de cómo se vería una lista de números anidados en su sitio. Ahora, veamos una lista de definiciones.
- Temas de WordPress
- Un tema de WordPress no es una «piel». Aunque muchos jóvenes lo llaman así. La realidad es que un tema de WordPress contiene muchos archivos que se unen de diversas maneras para generar una página web de WordPress. Una «piel» simplemente cambia el aspecto, y rara vez los resultados.
- Plugins de WordPress
- Los plugins de WordPress añaden flexibilidad, funciones y capacidades a su sitio web. Hay cientos para elegir. Algunos añaden poder y control, como la supervisión y la eliminación del spam de los comentarios y la mejora de las funciones de administración. Otros añaden cosas divertidas como elementos aleatorios y sistemas de votación y calificación.
Y aquí hay otro párrafo para mostrar la relación entre las distintas partes y piezas.
Esta es la rúbrica H3
Si el encabezado H3 es el encabezado de su sección dentro del post, entonces necesita ver cómo funciona dentro del propio post. Si no es así, simplemente cambie el H3 por el número de rúbrica que esté utilizando. Tenemos que ver cómo se utilizan las imágenes, otra característica importante de la mayoría de los sitios de WordPress, dentro del sitio. Las imágenes tienden a situarse a la izquierda, a la derecha o en el centro de tu post, dependiendo de cómo las utilices. En el caso de una imagen situada a la izquierda o a la derecha, hay que añadir un relleno adecuado alrededor de la imagen en el lado del texto para alejar el texto de la imagen y que éste no se pegue a los bordes de la imagen. Una imagen centrada es un poco diferente. Está centrado en el centro y el texto se empuja por encima y por debajo. Cómo añadir los estilos CSS para las imágenes se discute en el artículo del Codex, Uso de imágenes.
Probar el aspecto de las fuentes – Encabezado H3
También tendrá que probar el aspecto de los diferentes estilos de letra. Esto es atrevido y ESTO ES NEGRITA. Esto es cursiva y esto es itálico. Esto es negrita y cursiva y esto es negrita e itálica. This is code and THIS IS CODE.
Y ahora veamos cómo es la etiqueta PRE, también conocida como etiqueta preformateada:
This is the pre tag.
Esto debería volver al estilo de párrafo normal y esperamos que hayas prestado atención a los márgenes y al relleno alrededor de cada elemento, incluyendo el párrafo, para que puedas posicionar las cosas de forma adecuada al resto del contenido.
Su CSS aquí – Encabezado H5
Veamos el blockquote, una de las etiquetas más utilizadas en la mayoría de los blogs. Está diseñado para «enmarcar» una cita de otro blog, sitio web o referencia que está «citando». En su mayoría, hay tres ejemplos de uso:
Esta es una cita sencilla. Va precedido o seguido de un enlace dentro del texto a la fuente acreditada. Un blockquote debe estar diseñado para destacarse del resto del contenido del texto, pero no tiene que destacarse «realmente», sólo separarse del contenido para que sepamos que no son sus palabras.
Un segundo estilo a la cita en bloque es el que incluye una citación. De acuerdo con las directrices de HTML, esta cita debe estar envuelta en la etiqueta <cite>
y luego esa etiqueta puede ser estilizada para estar en cursiva, negrita, o cualquier aspecto que desee en su diseño. Tenga cuidado con el estilo de la etiqueta <cite>
ya que algunos temas de WordPress la utilizan en el área de comentarios. Te recomiendo que lo estilices específicamente con blockquote cite {style declarations}
en tu hoja de estilos.
Este es un ejemplo de un blockquote que también contiene un enlace a los artículos de Diseño y Maquetación del Blog en el Codex de WordPress, el manual online para los usuarios de WordPress, para ayudarle a ver cómo se verán los enlaces dentro de un blockquote. Lorelle on WordPress, tu guía para todo lo relacionado con WordPress y los blogs
La cita incluye un enlace y un texto para ayudarle a ver el aspecto de un enlace y un texto dentro de la etiqueta cite. Hay muchas etiquetas que se pueden encontrar dentro de un blockquote, al igual que se pueden encontrar dentro de cualquier contenedor dentro del diseño de su página web, pero un último ejemplo incluye una lista desordenada. A muchos blogueros les encanta citar ejemplos de listas, así que esta es una buena serie de etiquetas para probar.
Dentro de esta página de prueba de diseño web, hemos probado:
- Rúbricas
- Estilos de texto como negrita y cursiva
- Listas ordenadas (numeradas) y desordenadas (viñetas)
- Enlaces
- Código y etiquetas PRE
- Blockquotes
- Y mucho más…
Lo que debería mostrarte el aspecto de una lista dentro de un blockquote.
Cada sitio web es único, con su propio aspecto y sensación de las distintas partes y piezas. Esta sección de cortar y pegar sólo mira lo que puede tener dentro de su sección de contenido. Por lo tanto, si va a tener cajas para listas o poca información aparte, tendrá que añadirlas para poder ver cómo quedarán en el diseño general de la página. Algunos elementos en un tema de WordPress son controlados por la hoja de estilo, mientras que otros son controlados por los archivos de plantilla. Intenta trabajar primero en todo lo que puedas de la hoja de estilo, luego puedes meterte con los archivos de la plantilla. Recuerde que cualquier cambio que haga en la hoja de estilo y en los archivos de la plantilla no estará disponible si cambia de tema. Si quieres que se mantengan, tendrás que copiarlos y pegarlos en la nueva carpeta de temas. Como último elemento en el área de contenido y en todo su sitio, revise los enlaces de hipertexto. Son los enlaces a sitios web externos y/o páginas internas de su sitio. Los hay de tres tipos: activos, visitados y flotantes. Asegúrate de trabajar en los estilos de cada uno de ellos.