Construir letras capitulares en Wordpress. Parte I – PHP

16 de Junio de 2009 — Darío Ferrer


Letras capitulares con WordpressLas letras capitulares son precisamente como la “L” grande de este párrafo. Detalles decorativos que realzan la estética del sitio al ofrecer un estilo de texto similar al de los libros impresos. Particularmente me gusta esa apariencia de “impreso” pues vengo de ese mundo. El cómo llegué al desarrollo web después de 16 años en el área impresa es otra historia que prometo relatar pronto -aburridísima por cierto-, pero lo he sacado a colación porque siempre he buscado conjugar ese toque artesanal a mis trabajos. El trabajo de unir lo antiguo con lo nuevo (y que esa unión funcione) ha representado un reto para mí desde hace mucho.

En fin, para lograr el efecto debes combinar un poquito de programación con otro tanto de html y css. Voy a explicar el asunto paso a paso para que aprendas a construirlo y posteriormente mejorarlo. Como siempre, los más vagos y flojos tienen el código listo al final para ser copiado y pegado.

Parte PHP

1.- Define tu atajo de código

Un atajo de código (conocido también como shortag) es el código que colocarás en el editor para activar el capitular. Puedes escoger cualquiera, pero asegúrate de que su estructura no dé conflictos con otro atajo asignado por algún plugin. Esto es importante. En este tuto utlizaremos éste:

1
[c=A]

Donde “A” es el caracter capitular. Eso quiere decir que cuando escribas [c=A] en tu entrada o página, significa que la letra “A” (o la que coloques) tomará el estilo capitular.

2.- Construye la función

Antes que nada abre tu archivo functions.php en el directorio de tu plantilla. si no existe créalo.

Comenzamos con la función vacía. Llamémosla contenido. Igualmente cerciórate de que no haya otra función contenido por ahí. Si es así cámbiale el nombre a gusto:

1
2
3
4
<?php
function contenido() {
}
 ?>

Es importante definir dónde queremos que aparezca nuestra letra capitular. En este tutorial lo asignaremos a entradas y páginas, al tiempo que lo invalidaremos en el home y categorías. Por supuesto, luego puedes jugar con esa parte también:

1
2
3
4
5
6
7
8
9
10
<?php
function contenido() {
  if(is_home() or is_category() {
    // Lo desactivamos aquí
  }
  if(is_single() or is_page()) {
    // Lo activamos aquí
  }
}
 ?>

Creamos la variable $contenido (que no está relacionada con la función, puede tener cualquier otro nombre) y como ya hemos definido el atajo [c=X] le vamos dando forma a nuestro reemplazo con la función preg_replace. Comencemos por la parte donde no queremos la letra capitular:

1
$contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );

Aquí le dijimos al PHP -por medio de expresiones regulares- que reemplazara todo el atajo por el caracter contenido entre los símbolos. Si no entendiste lo anterior dáte una vuelta por el manual php y revisa preg_replace.

Insertamos el código en la función y tenemos:

1
2
3
4
5
6
7
8
9
10
<?php
function contenido() {
  if(is_home() or is_category()) {
    $contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );
  }
  if(is_single() or is_page()) {
    // Lo activamos aquí
  }
}
 ?>

Ahora vamos con la parte que activa el capitular. Esta vez le diremos que reemplace el atajo por el carácter en cuestión, pero encerrado en etiquetas <span>, a fin de tener posibilidad de aplicarle los correspondientes estilos CSS. Por cierto la parte del preg_replace_callback se me hizo extremadamente jodida de comprender (como referencia te dejo la discusión de la duda).

Debemos crear un par de funciones. Para tal fin debemos dejar de trabajar momentáneamente con la función contenido(), ya que dentro de ésta irá el resultado de aquellas dos.

Repasemos un poco. El objetivo es lograr que el HTML devuelva este resultado:

1
<span class="cap letra-X">X</span>

La letra “X” corresponde al caracter que estás capitulando en ese momento.

Nota también que el HTML tiene 2 clases: .cap y .letra-[X] (la que toque en el momento) ¿Cuál es el propósito de esto? En la próxima parte lo explico; ahora sólo concentrémonos en lograrlo. Crearemos otra función distinta para el asunto de los acentos (porque el CSS no admite caracteres latinos en sus estilos). Bauticemos esta función con el nombre de sin_acentos():

1
2
3
4
<?php
function sin_acentos() {
}
 ?>

Comenzamos con la construcción de un array para los caracteres que queremos sustituir y le asignamos la variable $trad. Observa que a la izquierda están los elementos a sustituir, y a la derecha los que reemplazarán a cada uno:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
function sin_acentos() {
  $trad = array(
    'Á'  =>  'A1',
    'É'  =>  'E1',
    'Í'  =>  'I1',
    'Ó'  =>  'O1',
    'Ú'  =>  'U1',
    'á'  =>  'a1',
    'é'  =>  'e1',
    'í'  =>  'i1',
    'ó'  =>  'o1',
    'ú'  =>  'u1',
    'Ñ'  =>  'N1',
    'ñ'  =>  'n1'
  );
}
?>

Luego aplicamos la función strtr para que “traduzca” cada 1º elemento del array con su correspondiente 2º elemento. Igualmente creamos la clase $texto para asignarla al elemento de salida:

1
return(strtr($texto,$trad));

Listo. La función queda así.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
function sin_acentos( $texto ) {
  $trad = array(
    'Á'  =>  'A1',
    'É'  =>  'E1',
    'Í'  =>  'I1',
    'Ó'  =>  'O1',
    'Ú'  =>  'U1',
    'á'  =>  'a1',
    'é'  =>  'e1',
    'í'  =>  'i1',
    'ó'  =>  'o1',
    'ú'  =>  'u1',
    'Ñ'  =>  'N1',
    'ñ'  =>  'n1'
  );
return(strtr($texto,$trad));
}
?>

En síntesis, ésta función reemplazará una -por ejemplo- una Ó por una O1, distinguiendo mayúsculas de minúsculas.

Como sin_acentos() se aplicará sólo a artículos internos lo encerramos dentro de la condicional en contenido():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function contenido() {
  if(is_home() or is_category()) {
    $contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );
  }
  if(is_single() or is_page()) {
    function sin_acentos( $texto ) {
      $trad = array(
        'Á'  =>  'A1',
        'É'  =>  'E1',
        'Í'  =>  'I1',
        'Ó'  =>  'O1',
        'Ú'  =>  'U1',
        'á'  =>  'a1',
        'é'  =>  'e1',
        'í'  =>  'i1',
        'ó'  =>  'o1',
        'ú'  =>  'u1',
        'Ñ'  =>  'N1',
        'ñ'  =>  'n1'
      );
    return(strtr($texto,$trad));
    }
    // Lo activamos aquí
  }
}
 ?>

Ahora vamos con la función donde modelaremos la etiqueta HTML y posteriormente le daremos salida con una llamada de retorno o callback. Llamémosla carac_reemplazo() y analicémosla: La variable $match[1] llamará al primer elemento de la expresión regular (que aún no implementamos). Fíjate también cómo hemos aplicado la función sin_acentos() en la zona que deseábamos sustituir los caracteres:

1
2
3
function carac_reemplazo($match) {
    return '<span class="cap letra-' . sin_acentos( $match[1] ) . '">' . $match[1] . '</span>';
}

Lista la función carac_reemplazo(). Agreguémosla luego de sin_acentos():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
function contenido() {
  if(is_home() or is_category()) {
    $contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );
  }
  if(is_single() or is_page()) {
    function sin_acentos( $texto ) {
      $trad = array(
        'Á'  =>  'A1',
        'É'  =>  'E1',
        'Í'  =>  'I1',
        'Ó'  =>  'O1',
        'Ú'  =>  'U1',
        'á'  =>  'a1',
        'é'  =>  'e1',
        'í'  =>  'i1',
        'ó'  =>  'o1',
        'ú'  =>  'u1',
        'Ñ'  =>  'N1',
        'ñ'  =>  'n1'
      );
    return(strtr($texto,$trad));
    }
    function carac_reemplazo($match) {
      return '<span class="cap letra-' . sin_acentos( $match[1] ) . '">' . $match[1] . '</span>';
    }
    // Lo activamos aquí
  }
}
 ?>

Agreguemos el código de sustitución a contenido() por medio de preg_replace_callback. Veamos la línea completa:

1
$contenido = preg_replace_callback('|\[c=(.*?)\]|' ,'carac_reemplazo' , $contenido);

Fíjate en esos 3 argumentos: El primero indica dónde está el caracter a tomar en cuenta por la función. El segundo llama a carac_reemplazo(), que es la función donde está la estructura de la etiqueta. El tercer argumento dice dónde aplicarlo, en $contenido.

Insertamos la línea en la función contenido(), le damos salida a la variable $contenido con un echo y colocándolo entre los paréntesis de la función, la cual lucirá así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
function contenido() {
  if(is_home() or is_category()) {
    $contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );
  }
  if(is_single() or is_page()) {
    function sin_acentos( $texto ) {
      $trad = array(
        'Á'  =>  'A1',
        'É'  =>  'E1',
        'Í'  =>  'I1',
        'Ó'  =>  'O1',
        'Ú'  =>  'U1',
        'á'  =>  'a1',
        'é'  =>  'e1',
        'í'  =>  'i1',
        'ó'  =>  'o1',
        'ú'  =>  'u1',
        'Ñ'  =>  'N1',
        'ñ'  =>  'n1'
      );
    return(strtr($texto,$trad));
    }
    function carac_reemplazo($match) {
      return '<span class="cap letra-' . sin_acentos( $match[1] ) . '">' . $match[1] . '</span>';
    }
    $contenido = preg_replace_callback('|\[c=(.*?)\]|' ,'carac_reemplazo' , $contenido);
  }
}
 ?>

Ahora aplicamos el filtro que le dirá a Wordpress que debe aplicar automáticamente la función a la hora de parsear the_content().:

1
add_filter('the_content', 'contenido', 1000);

Dicha línea va colocada fuera de la función, indiferentemente si es antes o después de ésta. En este caso lo pondremos después.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
function contenido() {
  if(is_home() or is_category()) {
    $contenido = preg_replace( '|\[c=(.*?)\]|', '$1' , $contenido );
  }
  if(is_single() or is_page()) {
    function sin_acentos( $texto ) {
      $trad = array(
        'Á'  =>  'A1',
        'É'  =>  'E1',
        'Í'  =>  'I1',
        'Ó'  =>  'O1',
        'Ú'  =>  'U1',
        'á'  =>  'a1',
        'é'  =>  'e1',
        'í'  =>  'i1',
        'ó'  =>  'o1',
        'ú'  =>  'u1',
        'Ñ'  =>  'N1',
        'ñ'  =>  'n1'
      );
    return(strtr($texto,$trad));
    }
    function carac_reemplazo($match) {
      return '<span class="cap letra-' . sin_acentos( $match[1] ) . '">' . $match[1] . '</span>';
    }
    $contenido = preg_replace_callback('|\[c=(.*?)\]|' ,'carac_reemplazo' , $contenido);
  }
}
add_filter('the_content', 'contenido', 1000);
 ?>

Listo el pollo. Guarda y cierra functions.php.

Puedes continuar con la segunda parte, donde abordaremos el área del HTML y CSS para darle estilo a tu letra capitular.

  • Bitacoras.com
  • Meneame
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • BarraPunto

Publicado en Wordpress. 11 Comentarios »

11 comentarios

  • juaniquillo dijo:
    19 de Junio de 2009 a las 5:57 pm

    Nos debes tambien la historia aburrida de como llegaste al desarrollo web. La verdad es que no creo que se nada aburrida.

  • Larenz dijo:
    29 de Junio de 2009 a las 6:15 am

    Oye… es idea mía o veo que diste un rumbo de Joomla a WordPress. Te comenté la otra vez en FDW que pensaba probarlo, recuerdas? Pues he estado haciendo eso y de casualidad me di con este enlace. Parece que tu sitio me va a servir en este nuevo proceso.

    Saludos desde Nicaragua!

  • Colección de recursos imprescindibles para WordPress | Trazos Web dijo:
    7 de Septiembre de 2009 a las 2:14 am

    [...] Construir letras capitulares en WordPress – Dario Ferrer. [...]

  • luis dijo:
    3 de Diciembre de 2009 a las 12:51 am

    que tal amigos, trate de seguir las instrucciones pero no logro hacer que salga la letra capitular.

    bueno, tengo unas dudas para empezar

    ya inserte el codigo en el functions.php
    el codigo css lo inserte en el archivo style.css

    en el editor de la entrada teclee por ejemplo…..[U=U] pero no sale la capitular

    alguna idea? saludos…… por cierto muy buen blog

  • Darío Ferrer dijo:
    3 de Diciembre de 2009 a las 7:26 am

    Hola Luis, el shortcode para tu caso sería “[c=U]“.

  • luis dijo:
    3 de Diciembre de 2009 a las 5:27 pm

    gracias dario por tu respuesta

    sin embargo no logro que salga. hay que insertar alguno codigo en single.php? viendo el sourcecode no aparece el codigo que la funcion debe generar

    cuando voy a la entrada, solo veo lo que teclee en el editor [c=U]

    estoy haciendo pruebas en mi localhost, pero cuando inserte el codigo al archivo functions.php, mi blog quedo bloqueado, ya no podia accesar, estaba completamente en blanco, ni siquiera podia loggearme de nuevo, tuve que entrar por ftp de nuevo para borrar el codigo y se arreglo el problema.

    que estoy haciendo mal?

  • luis dijo:
    3 de Diciembre de 2009 a las 5:42 pm

    me esta dando este error ahora

    Parse error: parse error in C:\wamp\www\AMlocal\wp-content\themes\BranfordMagazine\branfordmagazine\functions.php on line 29

    21 '',
    22'after_widget' => '',
    23'before_title' => '',
    24'after_title' => '',
    25));
    26?>
    27 'A1',
    36 'É' => 'E1',

  • luis dijo:
    3 de Diciembre de 2009 a las 5:49 pm

    perdon, aqui esta la linea 29

    27 <?php
    28 function contenido() {
    29 if(is_home() or is_category() {

  • Darío Ferrer dijo:
    3 de Diciembre de 2009 a las 6:38 pm

    Ops! Agrégale el paréntesis al final (error mío):

    1
    if(is_home() or is_category()) {
  • ABTOP dijo:
    1 de Marzo de 2010 a las 11:08 am

    Similar, but slightly different approach:
    http://newrussianamerica.com/joomla/fixing-capdropper.html
    Array substitutions would be too impractical for large character sets.

  • Darío Ferrer dijo:
    1 de Marzo de 2010 a las 4:53 pm

    Hi ABTOP,

    Nice job, thanks for share it.

    Array substitutions would be too impractical for large character sets.

    Have you tried with strtr? It’s a very fast and reliable way to replacing characters; even faster than str_replace. ;)

    A little idea: In your case, can store the different charsets into a “lib” directory.

Comentar este artículo

Nombre (Requerido)

Correo (No será publicado) (Requerido)

Sitio web

Secciones

Enlaces externos, HTML y CSS, Impresos, Joomla, La foto, Notas, PHP, Política, Portada, Recursos, Religión, Videoteca y Wordpress.

Anteriores

comentarios recientes

@Jk en ¿”WatchTower” o “CashPower”?: Hola! Solo queria decirte algo de corazon, no soy testigo, pero muchas veces...

@Glass en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante post, aunque algo parecido leí en alguna parte pero en inglés, aunque aquí se tocan...

@Ricardo Olivera en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante el post y los comentarios. Yo quiero poner una tienda tipo carrito de...

@Antonio García en ¿Joomla Vs. Wordpress? (1ª parte): Creo que la comparación no debería tomarse tan literalmente, creo que muchos usuarios no tan...

@Daniel Gonzalez en ¿Joomla Vs. Wordpress? (1ª parte): Sobre la comparación de lo que puede o no puede hacer wordpress y joomla, sería interesante...

@Bandolera en ¿Joomla Vs. Wordpress? (1ª parte): Hola chicos malos: Según he leido el artículo y los comentarios dejados, me doy cuenta que en...

@ABTOP en Construir letras capitulares en Wordpress. Parte I – PHP: Similar, but slightly different approach: http://newrussianamerica.co...

@claudia santiesteban hernandez en Malos consejos: yo tengo una enemiga por mis espaldas y hasta le tengo y me quito a angel eso me da miedo y...

Darío Ferrer — Blog personal

Sitio desarrollado con Wordpress, software libre para un mundo libre.

59 consultas a la BD en 1.297 segundos. Blog alojado en DreamHost