13jun
18

Alojamiento Wordpress con Soporte

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 [^>]+>)?([^< \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)
    $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.


Valora este artículo para mejorar la calidad del blog ...

MaloPobreNo está malMe gustaExcelente (sin valoración aún)
Loading ... Loading ...
31bc452198db98a443a0a2b0f235f4b4
Share

Anúnciese aquí »


  • **Juanito**

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

  • http://www.durmiendoafuera.com/ dIEGO | Durmiendo Afuera

    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:

  • http://www.durmiendoafuera.com/ dIEGO | Durmiendo Afuera

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

  • http://www.aletreando.com iván

    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!

  • http://fernandotellado.com/ Fernando Tellado

    Diego ¿vaciaste la cache?

  • Ramón

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

  • Ramón

    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

  • http://fernandotellado.com/ Fernando Tellado

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

  • http://www.durmiendoafuera.com/ dIEGO | Durmiendo Afuera

    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

  • http://www.gerencie.com Sabogal

    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!

  • http://www.gerencie.com Sabogal

    Bueno, he conseguido hacerlo funcionar.

    Gracias

  • http://yggdrasilfansub.22web.net Camelot

    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

  • http://www.pachakamaq.com Fliberty

    Muchas gracias por esto, yo prefiero el segundo método pero de manera automatizada, pero quisiera saber si esto aplicará sólo al primer párrafo o aplicará a todos los párrafos… Muchas gracias…

  • gabriel

    trate con el segundo metodo pero tengo un pequeno problema

    el codigo css lo inserte en el archivo style.css y el codigo de la funcion en el functions.php

    el html lo inserte en un post y perfecto!!!

    el "problemita" que tengo es que todas mis entradas muestran la letra capitular !!!! y solo agregue el html a una entrada, es un problema porque no quiero que todas las entradas muestren la capitular, yo pense que solo las que tuvieran el html lo harian

    esto en firefox 3.5.7

    ya no trate de testearlo en chrome y ie

    alguna ayuda?

    • http://www.pachakamaq.com Fliberty

      Supongo que el código lo estás aplicando en el index, lo cual explica que se aplique a todas las entradas.

      Creo que para que se aplique a una entrada en particulas, a veces se utilizan las custom fields, pero no puedo decirte como hacer eso, porque no se como se utilizan… espero que alguien más pueda darte una luz al respecto.

  • http://yggdrasilfansub.22web.net Camelot

    El plugin Drop Caps lo hace bastante bien y funciona con el reciente WordPress 3.0

    • http://fernandotellado.com/ Fernando

      Si, yo lo uso en algún blog, también es buen apaño y rápido :)

  • Francisco Palacios Coronel

    Muchas gracias, me fue de utilidad la explicación y el código.