He pensado que igual os interesa el proceso de escritura y personalización del blog, no es que tenga nada de especial pero tal vez yo haga algo de una manera que no conocíais o lo haga mal y me podáis ayudar a mejorar. Muchas de estas cosas ya las había contado, pero así están centralizadas.
Os voy a hablar de tres cosas: cómo escribo, cómo le doy el formato a las páginas y entradas y cómo he ido ampliando la barra lateral del blog ¡Pongámonos a ello!
Escritura
Lo primero que he de confesar es que escribo en la propia web, en el modo HTML. Es una vergüenza que una friki de Emacs como yo no se haya montado un tinglado para escribir desde ahí aun, lo sé. Lo investigaré, pero de momento paso de líos.
Ya conocéis mi afición a Markdown por su sintaxis supersimple así que, aparte de para escribir la tesis, también lo uso aquí. Si queréis activarlo, seguid estas instrucciones en la ayuda de WordPress. Ya me contaréis si mejora vuestra experiencia escribiendo, la mía la hace bastante más agradable.
Si os animáis, es especialmente útil la extensión de Firefox Markdown toggle para hacernos una idea de cómo va quedando la entrada, sobre todo al principio si no estamos acostumbrados. Tan fácil como instalarla, pasar al modo visual y activarla con el botón derecho. También nos vale para escribir correos bonitos, que nunca está de más.
Por último, corrijo la ortografía directamente con la extensión de Firefox, por si meto algún gambazo. Fácil y eficaz.
Formato
Para incrustar cosas, hacer listas de entradas según categoría y otras cosas locas uso los shortcodes de WordPress. Ahora os enseño algunos ejemplos.
Incrustar
Para incrustar vídeos de YouTube, imágenes de Instagram, gists de GitHub o listas de Spotify, entre otras cosas, hay varias maneras. La más típica es buscar el chirimbolo que diga Copiar código de inserción y copiar el HTML resultante. En algunos casos es suficiente con copiar la URL y WordPress ya incrusta solo (es muy listo). Pero si queremos personalizar un poco el tema, yo creo que lo más fácil es utilizar un shortcode. ¡Van unos ejemplillos!
Un gist:
[gist]2fba1c143cd9d8682ea358082a202f1d[/gist]
Una lista de reproducción de Spotify:
[spotify https://open.spotify.com/user/drudoran/playlist/4tTeJ75beBFIjALjLYWm0G]
Un vídeo de YouTube dando el inicio y el final:
[youtube https://www.youtube.com/watch?v=_Oh12ROTQCE&start=10&end=20]
Ecuaciones con LaTeX
Sí, se pueden meter ecuaciones escritas en LaTeX en WordPress, para ello usamos el siguiente formato (eliminando el espacio entre el símbolo de dólar y la palabra latex
)
$ latex ecuación&s=tamaño$
Donde s
puede ir de -4 a 4, siendo -4 el más pequeño (tiny) y 4 el más grande (Huge)
Aquí tenéis más información.
Recetas
Sobre formatear recetas con shortcodes hice un post completo y también tenéis las instrucciones en la ayuda de WordPress aquí.
Lista de posts según categoría
Otra tarea que los shortcodes nos resuelven en un periquete es crear una lista de entradas de una categoría concreta. Solo necesitamos el slug de la categoría y escribir algo así:
[display-posts category="slug" posts_per_page="100"]
Aquí tenéis las documentación completa.
Contacto
Para crear el formulario de contacto también se puede hacer lo mismo. El mío es así:
[contact-form subject="Contacto"]
[contact-field label="Nombre" type="name" required="1" /]
[contact-field label="Email" type="email" required="1" /]
[contact-field label="¿En qué puedo ayudarte?" type="textarea" required="1" /]
[/contact-form]
Aquí está la docu correspondiente.
Widgets
Ahora que ya os he contado cómo creo el contenido, nos toca hablar de los widgets, esas movidas que hay en la barra del costado y que hacen mil de cosas. Solo voy a hablar de los que requieren algo de trabajo, poner el de Twitter o el de Goodreads no tiene más que elegirlo entre las opciones y seguir las instrucciones.
Imágenes
Dentro de la categoría de imágenes estarían el link a mi web de pan Ogibero y la que enlaza a la página de Ingenieros sin fronteras.
Las dos son widgets de texto con un HTML que inserta una imagen y la enlaza a algún sitio. Como apenas sé HTML ahora y mucho menos cuando aquello, para añadir las imágenes a la barra lateral, abrí una nueva entrada, inserté una imagen, creé el link correspondiente y luego copié el HTML resultante en un widget de texto.
Aquí lo expliqué un poco mejor.
Licencia
El widget de la licencia es también una imagen con un link, pero tiene la particularidad de que yendo a la página de Creative Commons, se pueden elegir las características de la licencia y él muy amablemente te da el HTML necesario. En mi caso:
<a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
<img style="border-width: 0;" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" alt="Licencia Creative Commons" />
</a>
Esta obra está bajo una <a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
Licencia Creative Commons Atribución-Compartir Igual 4.0 Internacional</a>.
Los que sepáis HTML decidme porfis como se indenta que me está dando ganas de llorar.
Traducción
El botoncillo de traducir es también en esencia una imagen con un link, aunque tiene cierta funcionalidad. En su momento yo lo hice pegando el HTML que te crean esta página (sin la parte de script) en un widget de texto. Es decir, este sería el contenido del widget:
<a id="ftwtranslation_button" style="border: 0;" title="" href="http://translate.google.com/translate?sl=es& tl=en&u=Ondahostil.wordpress.com">
<img id="ftwtranslation_image" style="border: 0;" src="http://free-website-translation.com/img/fwt_button_en.gif" alt="FWT Homepage Translator" /></a>
Ahora parece que se puede añadir directamente un widget de Google Translate. Algún día probaré cuál de las dos opciones me gusta más.
Bonus: botón rojo
No sé si os habéis fijado pero a veces en la parte de abajo de las entradas aparece un botón rojo como este:
¡Si lo pulsáis os lleva a sitios! ¡Probad, probad! ?
Para terminar os regalo a Brian Fallon cantando en acústico1, por todas las horas que me ha acompañado mientras escribía este blog ❤
Las imágenes que ilustran este post pertenecen al dominio público y han sido obtenidas de Libreshot