Aprende a personalizar tu Blog al máximo con código CSS.

El CSS siempre me ha parecido la parte más fascinante de un Blog. Es la madre del cordero, el cerebro de WordPress, una serie de líneas de código que crean la magia y hacen que todo lo que estás leyendo ahora mismo funcione y exista.

Muchas personas no quieren ni oír hablar de tocar el código. Es cierto que al principio puede resultar algo complicado, pero en cuanto aprendes un par de conceptos básicos y comprendes cómo funciona, resulta casi mágico que escribiendo texto puedas cambiar colores, dibujar líneas o modificar la estructura de toda una web.

En este post voy a explicarte qué es el lenguaje CSS y cómo utilizarlo para personalizar al máximo tu Blog. Además añadiré un par de consejos sobre Plugins y cómo usarlos para mejorar el rendimiento de tu página. Para ello solo necesitas dos cosas: un Blog de WordPress colgado en servidor externo y ganas de aprender.

Esto que voy explicar está basado en mi experiencia personal y en lo que he ido aprendiendo durante estas últimas semanas. Mi Blog utiliza una plantilla con el tema Skeleton; para otros temas puede que el procedimiento varíe, pero la base viene a ser la misma.

En mi anterior post te explicaba cómo crear una web basada en WordPress y subirla  a tu propio servidor. Si no has leído todavía este artículo, te recomiendo que le eches un vistazo para comprender mejor lo que voy a comentar a continuación: Crea tu Blog desde cero: Cómo se hizo palabrautil.com

¿Preparado para descubrir el apasionante mundo del CSS? Vamos allá 🙂

 

¿Pero qué significa CSS?

El Cascading Style Sheets o CSS (Hojas de Estilo en Cascada) es el lenguaje utilizado por WordPress para diseñar la configuración de tu Blog. Se trata de varios archivos de texto en formato *.php o *.css que puedes encontrar en la carpeta del tema en tu servidor FTP (Desde Filezilla-> carpeta public/wp-content/themes/smpl-skeleton).

Sin embargo, no hace falta que modifiques los archivos directamente en la carpeta. Desde tu panel de WordPress tienes acceso a todos ellos para poder trabajar más cómodamente: Menu > Apariencia > Editor.

Ventana del editor CSS

Ventana del editor CSS

En la columna a la derecha puedes seleccionar la plantilla a editar, mientras que en la ventana se muestran las líneas de código de este archivo. Aunque como ves hay unas cuantas, la que más nos va a interesar es la plantilla style.css Esta plantilla contiene la mayor parte de la información relacionada con la estética de tu Blog: colores de fondo, tamaño y tipo de letra, grosor de líneas, etc. Otra plantilla importante es la de functions.php , que donde están programadas las funciones de tu Tema.

 

Modificar código al escribir entradas

Cuando te pones a escribir un artículo, te habrás fijado en que tienes dos opciones de vista: Visual y Texto.

ventana

Ventana de escritura en modo Visual

Visual muestra el formato del texto como si estuvieras escribiendo en Word, con palabras en negrita, subrayados o títulos. De esta forma puedes hacerte una idea del resultado final.

La otra opción es la vista de Texto. Aquí se muestra el código invisible que le va a dar formato a tu post. Este código es muy parecido al usado en las plantillas CSS, y de esta forma puedes realizar modificaciones que vayan a mostrarse directamente al cambiar al modo visual. Más adelante te pondré un par de ejemplos sobre esto.

Ventana de escritura en modo Texto

Ventana de escritura en modo Texto

 

Plugins de WordPress: qué son y cómo puedes utilizarlos para mejorar el rendimiento de tu página

Un Plugin es una función extra que puedes añadir al Blog para aumentar su funcionalidad, un accesorio que te permite realizar funciones específicas. Los hay de todo tipo, desde el gestor de tipografías Google Fonts que te mencioné anteriormente hasta funciones que incluyen filtros para entradas o un formulario de contacto.

Puedes instalar nuevas funciones desde Menu > Plugins > Instalar nuevo. Simplemente busca el nombre o función que te interese, pulsa “instalar ahora” y seguidamente “activar plugin”.

Como te dije, hay Plugins para todos los gustos. Puedes consultar muchos artículos en internet sobre las funciones más populares, como por ejemplo aquí.

En mi caso, estos son los que me han resultado más útiles: Article Templates, Contact Form to Email, List category posts, Posts for Page Plugin, StatSurfer, TinyMCE Advanced, y el magnífico WP Google Fonts.

 

Modificaciones básicas de CSS

Por fin llegamos a la parte práctica. Voy a describirte alguno de los conceptos que me parecen fundamentales a la hora de entender y modificar código en  CSS. Aquí tienes un índice de lo que viene a continuación:

/* Comentarios */

Estilos de texto

ID categorías y entradas

Estructura de un link

Etiqueta <style>

 

Un ejemplo práctico: Modificaciones hechas en este Blog

Excluir categorías de la home

Plantilla para un post

Quitar la imagen de cabecera

Quitar el subrayado de un link

Cambiar el pie de página

Modificar texto en botones “Next post / Previous post”

Crear un Widget de Autor

 

 

/* Comentarios */

La plantilla style.css tiene un montón de líneas y es fácil perderse. Si quieres hacer anotaciones que te aclaren qué es cada cosa, puedes incluir comentarios usando el código /* Mi Comentario */

Todo lo que esté entre barra y barra será invisible para WordPress. Si quieres modificar una línea pero prefieres mantener también el código original por si la lías, puedes convertirlo en comentario y así no tener que borrar nada.

 

Estilos de texto

Cuando escribes un post, tienes la opción de utilizar diferentes formatos de texto: Título 3 (h3),  párrafo (p), dirección (adress), etc. Este formato se define para cada párrafo mediante las etiquetas <*> Texto </*>:

Ejemplo

<h4>Ejemplo</h4>

Puedes comprobarlo en la vista modo Texto del editor. Esto puede ser muy útil si quieres intercalar distintos formatos o modificar el tipo de letra de los menús.

→ Un par de trucos más:

Línea horizontal en post: <hr/>


Espacio extra entre párrafos de un post: &nbsp;

 

ID categorías y entradas

Cada categoría y cada post creado tienen un identificador ID propio. Conocer esta ID resulta interesante si, por ejemplo, quieres ocultar una categoría o post específicos de la página principal.

Para conocer la ID de una entrada: Menu > Entradas > Todas las entradas. Pasa el ratón sobre el título del post y aparecerá en la parte inferior de la pantalla algo del tipo: …post.php?post=127&action…   Ese 127 es la ID de esta entrada.

Para conocer la ID de una categoría: Menu > Entradas > Categorías. Pasa el ratón sobre el nombre de esa categoría y aparecerá en la parte inferior de la pantalla algo así: …=category&tag_ID=7&post_type…   Ese 7 es la ID de esta categoría.

Estructura de un link

Cuando incluyes un enlace en el texto, lo que se crea en realidad es una etiqueta del tipo <a>Texto</> . Te pongo un ejemplo:

Link a mi web

Al escribir esto e incluir el enlace, WordPress genera la siguente estructura:

<a title=”esta es mi web” href=”http://www.palabrautil.com” target=”_blank”>Link a mi web</a>

title es el texto que aparece al pasar el ratón por encima
href es la dirección web a la que apunta el link
target=”_blank” significa que abrirá el link en una nueva ventana/pestaña
<a> </a> lo que aparece entre estas etiquetas será el texto a mostrar. En el ejemplo “Link a mi web”

Cuando creas un enlace mediante el botón del editor, todo esto se genera automáticamente, pero es muy útil saber cuál es la estructura interna de ese link para poder hacer modificaciones posteriores.

 

Etiqueta <style>

Aunque los valores de un tipo de texto vienen predefinidos por tu tema o el Plugin de Google Fonts, al escribir una entrada tienes la posibilidad de cambiar el estilo para un párrafo concreto mediante las etiquetas <style> Texto </style>. Ejemplo práctico:

Texto de ejemplo h4 corriente

<h4>Texto de ejemplo h4 corriente</h4>

Texto de ejemplo h4 con etiquetas

<h4  style=”text-decoration: underline; color: #0000ff; font-size: 1.5em; text-align:center; background-color:#e96381;”>Texto de ejemplo h4 con etiquetas</h4>

text-decoration:underline/none indica subrayado
color: #ABC123 color de texto (conseguir más colores)
font-size tamaño de letra
text align:center/right/justify alineación del texto
background-color color de fondo

 

Crear un link dentro del mismo post

Esta opción resulta realmente útil si quieres realizar un índice en la entradas extensas (como ésta 😛 )

Al escribir la entrada, en modo Texto, copia este código justo antes del lugar al que quieres referir el link: <a name=”ejemplo”></>

Este punto de referencia va aparecerá en el modo Visual como un ancla sobre fondo amarillo. Para inlcuir el link, usamos el formato corriente de link al post, pero incluyendo un # para esa referencia. Te pongo un ejemplo: Link hacia arriba.

El código de este link es: <a href=”http://palabrautil.com/descubriendo-el-css-aprende-a-personalizar-tu-blog/#ejemplo”>Link hacia arriba.</a>

En este caso he colocado el “ancla” justo antes del título “Estructura de un link“. ¿Te das cuenta de la capacidad de navegabilidad que tiene esto? 😀

 

Un ejemplo práctico: Modificaciones hechas en este Blog

A continuación voy a hacerte un listado con algunas de las modificaciones más importantes que he realizado en la estructura de mi Blog con CSS o Plugins. He de confesar que para cada una de ellas me he vuelto loco buscando en internet la información correcta, así que espero que te sirva de ayuda y ahorres tiempo si te encuentras con el mismo problema.

 

Excluir categorías de la home

Si te fijas, las entradas de la categoría Verso Violento no aparecen en mi página principal. Si quieres excluir una categoría concreta, copia el siguiente código en tu plantilla functions.php:

 

/*Excluir Categoria de la Home*/
function excludeCat($query) {
if ( $query->is_home ) {
$query->set(‘cat’, ‘-7’);
}
return $query;
}

Fíjate que ese -7 hace referencia a la ID de una categoría, como te expliqué más arriba.

 

Plantilla para un post

Si quieres realizar una serie de entradas que van a tener una misma estructura, como yo hago con Palabra de Viajero, resulta muy útil tener una plantilla. De esta forma, escribes un post virgen una vez y luego puedes usarlo repetidamente para nuevas entradas.

Para ello instala el Plugin “Article Templates” y sigue las instrucciones. Es muy sencillo y te ahorrarás muchísimo tiempo.

 

Quitar la imagen de cabecera

El tema Skeleton viene con una molesta línea azul superior deerie. Para eliminarla, simplemente abre la plantilla style.css y busca esta línea (Ctrl+F): background-image: url(‘images/border_top.png’);

Si la borras, desaparecerá la barra, aunque te recomiendo que por si acaso la mantengas como /*comentario*/

 

Quitar el subrayado de un link

Sólo hay que incluir la etiqueta style=”text-decoration:none;” :

Esto es un link subrayado  <a href=”http://www.palabrautil.com” target=”_blank”>Esto es un link subrayado</a></p>
Esto es un link sin subrayar <a style=”text-decoration:none;”  href=”http://www.palabrautil.com” target=”_blank”>Esto es un link sin subrayar</a></p>

Cambiar el pie de página

Plantilla functions.php -> línea:
$extras .= ‘<div>Theme Skeleton customized by ReneR</div>’;

Modificar texto en botones “Next post / Previous post”

Plantilla functions.php -> línea:
next_post_link( ‘<div>%link</div>’, __( ‘Siguiente Post’, ‘smpl’ ),TRUE );

Ese “TRUE” significa que solo navega entre entradas de una misma categoría.

Crear un Widget de Autor

Simplemente escribe lo que quieras mostrar en una entrada virgen (foto incluída) y copia el código completo en un Widget de tipo Texto. En mi caso tengo esto:

<p style=”text-align: center;”>Soy <a title=”¿Te cuento mi vida?” href=”http://palabrautil.com/acerca-de/#historia”>Rener Frank</a>. Ingeniero, viajero y creador de este Blog.</p> <p style=”text-align: center;”><img alt=”” src=”http://palabrautil.com/wp-content/uploads/2014/06/avatar1.jpg” width=”142″ height=”160″ /></p></a> <p style=”text-align: center;”>¿Eres nuevo por aquí? <a href=”http://palabrautil.com/acerca-de/”>Empieza con esto ;D</a></p>


Como ves, aquí tienes un resumen bastante completo de los detalles que poco a poco he ido modificando. Sin embargo, esto es tan solo una pequeña parte.

Buscando en internet puedes resolver casi cualquier problema o duda que te surja sobe este tema. Para ello te recomiendo especialmente el Foro de WordPress.org en español.

Espero que este post te haya ahorrado tiempo y esfuerzo. Ahora, disfruta diseñando el Blog que siempre has querido 🙂

Sígueme en

Rener Frank

Tras estudiar Ingeniería Mecánica y 3 años de rutina laboral, un verano de voluntariado scout en los Alpes suizos y una dulce alemana resetearon mis prioridades.
Dejé mi aburrido trabajo de oficina para irme a cuidar un castillo medieval en los bosques de Baviera. Después de varias aventuras por Europa me establecí en Frankfurt, donde vivo actualmente. Pero siempre con nuevos proyectos en mente y pensando en el siguiente paso!
Sígueme en

Latest posts by Rener Frank (see all)

About Rener Frank

Tras estudiar Ingeniería Mecánica y 3 años de rutina laboral, un verano de voluntariado scout en los Alpes suizos y una dulce alemana resetearon mis prioridades. Dejé mi aburrido trabajo de oficina para irme a cuidar un castillo medieval en los bosques de Baviera. Después de varias aventuras por Europa me establecí en Frankfurt, donde vivo actualmente. Pero siempre con nuevos proyectos en mente y pensando en el siguiente paso!
This entry was posted in Blogging y Wordpress. Bookmark the permalink.

Deja un comentario

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


*


Translate »