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í:

PHP:
  1. <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.

CSS:
  1. span.letracapital{
  2. float: left;
  3. }

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).

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

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.

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

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:

PHP:
  1. function ayudawordpress_letra_capital($content){
  2.  
  3.     // Expresion regular, se ajusta a una sola letra
  4.     // * incluso si esta dentro de un enlace.
  5.     $searchfor = '/>(<a [^>]+>)?([^<\s])/';
  6.  
  7.     // La cadena por la que estamos remplazando la letra
  8.     $replacewith = '>$1<span class="letracapital">$2</span>';
  9.  
  10.     // La remplaza, pero solo una vez (en la primera letra del post)
  11.     $content = preg_replace($searchfor, $replacewith, $content, 1);
  12.  
  13.     // Muestra el resultado
  14.     return $content;
  15. }
  16.  
  17. // Agrega esta funcion el contenido de WordPress
  18. 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 post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    12 comentarios en “Como tener Letra Capital en tu Blog”

  1. **Juanito** (11 comentarios) dijo:

    Muy bueno, muchas gracias... por ahora prefiero el plugin.
    Saludos.

  2. 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:

  3. sabes que lo activo y no hay caso, no hay diferencia, q puede ser??

  4. iván (20 comentarios) dijo:

    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!

  5. Fernando Tellado (2313 comentarios) dijo:

    Diego ¿vaciaste la cache?

  6. Ramón (5 comentarios) dijo:

    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>';

  7. Ramón (5 comentarios) dijo:

    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 :D

  8. Fernando Tellado (2313 comentarios) dijo:

    Gracias Ramón, me debí cargar parte del texto de la llamada al CSS. Ya lo he cambiado ;)

  9. 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

  10. Sabogal (31 comentarios) dijo:

    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!

  11. Sabogal (31 comentarios) dijo:

    Bueno, he conseguido hacerlo funcionar.

    Gracias

  12. Camelot (25 comentarios) dijo:

    He logrado hacerlo funcionar, pero tiene un comportamiento extraño cuando la entrada no comienza con una letra sino con imágenes y un listado...

    http://i47.tinypic.com/25rf57q.png

Escribe un Comentario

XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Comentarios adicionales gracias BackType

Subir

Anúnciese aquí
Expertos en WordPress
Evolución Euribor
Consigue 28 themes premium por menos de 14 euros
Participa en el Debate
  • Macgrafic: @Jose esta aplicación es para el iPhone y Puedes gestionar tu blog de tu dominio o de...
  • fff:
  • Abundancia33: Actualicé en algunos blogs y si hay un problema, con esta versión desaparece el...
  • Hugo Alfaro: Wow!… esta utilidad me ha sido de gran utilidad… ideal para los sitios...
  • Jose: P.D. Enhorabuena por la web! Sois magnificos!
Noticias Breves
  • BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.

    [#3]

  • Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.

    [#6]

  • ¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).

    [#26]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H