Como tener Letra Capital en tu Blog

ay bastante gente a la que le gusta usar la letra capital en sus blogs. Me refiero a ese bonito efecto que vemos en libros y periódicos que muestran el primer carácter de un texto en un tamaño, incluso tipografía, diferente.

Yo lo he usado mucho tiempo en CiberPrensa y, como de vez en cuando me lo pregunta algún lector me he animado a realizar una guía en la que mostrar las dos maneras (que yo se) de poner Letra Capital en tu Blog.

El Modo Simple

Hay un modo de conseguirlo del modo mas rápido y sencillo, mediante un plugin. No es mala opción si quieres obtener un resultado rápido, pero tiene el inconveniente de que no controlas completamente el aspecto de la letra capital.

El proceso es este:

1. Descarga el plugin DropCap First
2. Descomprímelo en tu ordenador y sube la carpeta «dropcap_first» al directorio de plugins de tu servidor (/wp-content/plugins/)
3. Activa el plugin

Si te animas, puedes retocar algo del CSS del plugin modificando el fichero ‘dropcap_style.css’, situado en la carpeta del plugin.

El Modo HTML

Aquí ya hablamos de palabras mayores (nunca mejor dicho) pues no solo vas a poder configurar el estilo CSS de un modo básico sino que incluso puedes utilizar marcas HTML especiales o, mas interesante, utilizar imágenes como letra capital. Además, lo automatizaremos con una función PHP.

Para dar un estilo diferente a la primera letra de un párrafo necesitamos enmarcarla en un elemento HTML especial al que luego añadiremos un poco de CSS para ponerlo a nuestro gusto. Utilizaremos un elemento ‘span‘ con la clase ‘letracapital‘. El párrafo resultante sería algo así:

<span class="initialcap">E</span>sta guía habla de como poner letras capitales, ...

Acuérdate de no repetir la letra después de ‘span’

El CSS

Aquí tienes que ser un poco fino pues cada plantilla tiene diferentes valores de alto de línea y tamaño de fuente, así que tendrás que adaptar esta parte a tu theme. Asumiremos, para el ejemplo, que tu párrafo estándar tiene un tamaño de fuente de 14 pixels y un algo de línea de 18 pixels.

1. ¡Flotando! – Tenemos que hace que nuestra letra capital «flote» a la izquierda para que el texto del párrafo fluya a su alrededor.

span.letracapital{
float: left;
}

2. Tamaño de Fuente – Le asignamos un tamaño de fuente de 40 pixels (recuerda que esto puede variar dependiendo de los valores por defecto de tu plantilla), y un alto de línea de 35 pixels, lo que viene a ser el doble del alto de línea del párrafo estándar menos 1 pixel (en este caso solamente).

span.letracapital{
float: left;
font-size: 40px;
line-height: 35px; /* Dobla el alto de linea menos 1 pixel */
}

3. Mas Estilo – Vamos a utilizar una fuente serif, ponerla en azul y añadirle un poco de espacio a la derecha para que no se mezcle con el párrafo.

span.letracapital{
float: left;
font-size: 40px;
line-height: 35px; /* Dobla el alto de linea menos 1 pixel */
font-family: Georgia, "Times New Roman", Times, serif;
color: #2583ad; /* Azul */
padding-right: 5px;
}

Lo normal es que tengas que jugar un poco con el tamaño de fuente y alto de línea para ajustarlo a tu plantilla. Esta es tu tarea y lo que te ofrecerá un estilo personal.

Automatizando que es gerundio

Perfecto, ya has añadido el CSS necesario a tu fichero style.css. Pero ¿a que sería un engorro tener que añadir marcas HTML cada vez que escribas un nuevo artículo?. Con este poco de PHP conseguiremos que WordPress lo haga por ti:

function ayudawordpress_letra_capital($content){
 
    // Expresion regular, se ajusta a una sola letra
    // * incluso si esta dentro de un enlace.
    $searchfor = '/>(<a &#91;^>]+>)?([^< \s&#93;)/';
 
    // La cadena por la que estamos remplazando la letra
    $replacewith = '>$1<span class="letracapital">$2</span>';
 
    // La remplaza, pero solo una vez (en la primera letra del post)
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    // Muestra el resultado
    return $content;
}
 
// Agrega esta funcion el contenido de WordPress
add_filter('the_content', 'ayudawordpress_letra_capital');

¿Como funciona este código?. Básicamente, coge el contenido del post y envuelve la primera letra con muestra marca especial.

Todo lo que tienes que hacer es pegar este código en el fichero ‘functions.php‘ de tu plantilla.

Ahora tu eliges cual de los dos sistemas prefieres. El primero te da resultados inmediatos y sin esfuerzo, pero el segundo es mucho mas completo y te permitirá distinguir tu blog del resto del mundo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)