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.

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="http://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:

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:

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:

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:

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:

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:

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.