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:
- Descarga el plugin DropCap First
- Descomprímelo en tu ordenador y sube la carpeta "dropcap_first" al directorio de plugins de tu servidor (/wp-content/plugins/)
- 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 [^>]+>)?([^<\s])/';
-
-
// 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)
-
-
// 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.
También te puede interesar:
Bitacoras
RSS
Blog EntreBlogs
Ayuda WordPress
Bocabit
Buscando Libertad
CiberPrensa
Comparativa de Bancos
Verdadera Seducción
Soy Plastic
Muy bueno, muchas gracias… por ahora prefiero el plugin.
Saludos.
podras creer que estaba viendo la lista de plugins de anieto2k y me intereso este, y mucho, y como estaba muerto en cyberprensa estaba por mandarte un mail
coincidencia je
muchizimas gracias wink:
sabes que lo activo y no hay caso, no hay diferencia, q puede ser??
Voy a hacer pruebas a ver como queda. La letra capital siempre ha sido una de las variantes que quise implementar en mi blog.
Gracias por la ayuda!
Diego ¿vaciaste la cache?
Es que las clases CSS del fichero .css y de la función PHP son diferentes.
En la línea 8 del código PHP habría que poner:
$replacewith = '>$1<span class="letracapital">$2</span>';Ouch. WP ha filtrado los tags de comentario. En resumen, que hay que poner la misma clase CSS tanto en el código PHP como en la hoja de estilo.
UPDATE: cambiado
Gracias Ramón, me debí cargar parte del texto de la llamada al CSS. Ya lo he cambiado
vacíe si, pero no hay caso
quedate tranquilo igual, estuve viendo y con la plantilla que tengo, quedaria bastante feo je
muchas graciasss
un abrazoo
No comprendo en que parte del theme o donde debo colocar la última linea del código:
add_filter(’the_content’, ‘ayudawordpress_letra_capital’);
Saludos!
Bueno, he conseguido hacerlo funcionar.
Gracias