Mockups con elementos HTML de WordPress

Un problema habitual que encuentro a la hora de maquetar nuevos temas para WordPress, es que los diseñadores no tienen en cuenta todos los elementos posibles de HTML que pueden existir en un post o página. Y no los culpo. Ellos ya tienen que lidiar con estar al día en tipografías, colores, usabilidad y tendencias como para también exigirles que conozcan cómo funciona WordPress. Oye, que si lo saben chapeau, pero no es su obligación. Por eso creí oportuno hacer un pequeño listado con todos (o casi todos) los elementos HTML que ofrece WordPress por defecto en sus posts y páginas para que los diseñadores tengan en cuenta a la hora de realizar sus mockups.

Barra de herramientas WordPress

También puedes descargarte el fichero elements.html.zip el cual tiene un HTML con todos los elementos que detallaré a continuación o bien verlo online => http://goo.gl/iNzamv


Imágenes

WordPress permite incluir imágenes en los posts y página con o sin leyendas.

<figure id="attachment_3378" style="width: 550px" class="wp-caption aligncenter">
  <img class="wp-image-3378" src="https://cicloviajes.es/wp-content/uploads/2015/09/cuba-la-habana-malecon-1024x680.jpg" alt="El Malecón de La Habana, Cuba" width="550" height="367">
  <figcaption class="wp-caption-text">El Malecón – La Habana – Cuba – @Francesco Chillari – Flickr</figcaption>
</figure>

Resultado con leyenda:

Imagen con leyenda

Encabezados

HTML tiene seis etiquetas para distintos encabezados, h1, h2, h3, h4, h5 y h6. Como es de suponer la etiqueta h1 denota un título más importante que h6.

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Resultado:

Encabezados HTML

Párrafos y estilos

En un mismo párrafo se pueden utilizar una variedad de estilos y elementos: enlaces, negrita, itálica, subrayados, índices, exponentes, tachados, citas, etc.

<p>En un lugar de <a title="test link" href="#">la Mancha</a>, de cuyo nombre <strong>no quiero acordarme</strong>, no ha mucho tiempo que vivía <em>un hidalgo</em> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. 5<sup>3</sup> = 125. El agua está compuesta por H<sub>2</sub>O. Y eso no lo digo yo, lo dicen <cite>los científicos</cite>.<br>
<abbr>HTML<abbr> es un acrónimo de <em>"Hypertext Markup Language"</em>. <del>Vamos al curso de HTML a las 17:00</del>, <ins>no, mejor que sea a las 18:30</ins>
</p>

Resultado:

Párrafo HTML

Listados

Existen 3 tipos de listados: por definición, ordenados y desordenados.

<h2>Tipos de listas</h2>
<h3>Lista por definición</h3>
<dl>
    <dt>Título de la lista por definición</dt>
    <dd>Este es un hijo de la definición padre.</dd>
    <dt>Otra definición</dt>
    <dd>Otro hijo de la definición padre.</em>
    </dd>
</dl>
<h3>Lista Ordenada</h3>
<ol>
    <li>Primer Item de la lista</li>
    <li>Segundo Item de la lista
        <ol>
            <li>Ítem anidado</li>
            <li>Otro ítem anidado</li>
        </ol>
    </li>
    <li>Tercer Item de la lista</li>
</ol>
<h3>Listas desordenadas</h3>
<ul>
    <li>Primer Item de la lista</li>
    <li>Segundo Item de la lista
        <ul>
            <li>Ítem anidado</li>
            <li>Otro ítem anidado</li>
        </ul>
    </li>
    <li>Tercer Item de la lista</li>
</ul>

Resultado:


Tablas

Aunque están un poco pasadas de moda los usuarios pueden incluir tablas en los posts y páginas. Se deberá tener en cuenta el diseño de los bordes, como así también de los encabezados y filas:

<h2>Tabla</h2>
<table>
    <tbody>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
        <tr>
            <td>División 1</td>
            <td>División 2</td>
            <td>División 3</td>
        </tr>
        <tr class="even">
            <td>División 1</td>
            <td>División 2</td>
            <td>División 3</td>
        </tr>
        <tr>
            <td>División 1</td>
            <td>División 2</td>
            <td>División 3</td>
        </tr>
    </tbody>
</table>

Resultado:

Tabla HTML

Código

El usuario también podrá utilizar la etiqueta code para incluir sus líneas de código de ejemplos.

<h2>Código</h2>
<p>Para poder centrar un elemento del tipo Block es necesario aplicar el siguiente código.</p>
<pre><code>.container{
    margin: 0 auto;
}</code></pre>

Resultado:

Etiqueta código HTML

Blockquotes

Usada habitualmente para citar frases de otros textos, libros, autores, etc:

<h2>Blockquotes</h2>
<p>Y para adornar este artículo vamos a finalizar con una gran frase del escritor brasilero que dice:</p>
<blockquote>
    <p>"El café con leche es como café, pero con leche."</p>
    <p><cite>— <a href="http://www.troll.me/images/paulo-coelho/el-caf-con-leche-es-como-el-cafpero-con-leche.jpg">Paulo Coelho</a></cite></p>
</blockquote>

Resultado:

blockquotes HTML

Ahora lo dejo en tus manos

Ya tienes los elementos más básicos que un usuario podría incluir en algunos de sus posts o páginas. Diséñalos para que se ajustan al Look&Feel del proyecto que del resto ya nos encargamos los maquetadores.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (3 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


One thought on “Mockups con elementos HTML de WordPress”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¿Puedo ayudarte?