Crear etiqueta BBCode para SMF (1.1.x)

La mayoría de las veces luego de instalar un foro nos disponemos a personalizarlo a nuestro gusto, voy a mostrar una forma sencilla de elaborar tu propia etiqueta BBCode (Bulletin Board Code) para SMF en este caso, que nos permita resaltar una determinada referencia, una fuente.

Para hacer las pruebas debes tener instalado un foro SMF ya sea localmente o en algún servidor externo; van a ser tres (3) los archivos que modificaremos, voy a suponer que tenemos el foro montado en nuestro propio servidor (local) y dentro de un directorio de nombre foro. A continuación el nombre de los archivos y su ubicación:

1.- Post.template.php ubicado en [foro/theme/default/]
2.- Subs.php ubicado en [foro/sources/]
3.- style.css ubicado en [foro/theme/nombre_del_theme/]

Es importante que antes de continuar hagas respaldo de dichos archivos, por muy seguro de lo que estas haciendo siempre es bueno tener una copia de seguridad.

El BBCode o BBC es muy parecido a alguna etiquetas del HTML, con la diferencia que el primero usa etiquetas entre corchetes de la siguiente manera:

[nombre de la etiqueta] de esta manera abrimos la etiqueta.
[/nombre de la etiqueta] de esta manera cerramos la etiqueta.

ejemplo

[b]una cadena[/b] --> luego es interpretado así --> <b>una cadena</b>

Empezaremos por abrir el archivo Post.template.php, este es el que se carga cuando vamos a crear o actualizar un mensaje/post. Aquí debemos hacer dos cosas.. (1) actualizar un array (abajo se explica) y (2) colocar la ruta al icono correspondiente a nuestra etiqueta (para que cuando se le de click nos arroje al cuerpo del mensaje el BBcode).

1.- Buscamos el array $context['bbc_tags'][] dentro del script, esta matriz almacena nombres de etiquetas y propiedades de las mismas que son usadas posteriormente. Una vez hallado el array le agregamos un nuevo elemento al inicio sin alterar el resto del contenido:

$context['bbc_tags'][] = 
array
(
   'fuente' => array
   (
      'code'   => 'fuente',
      'before' => '[fuente]', 
      'after'  => '[/fuente]', 
      'description' => 'etiqueta de referencia'
   ),
... --> aquí dejas el resto del contenido del array tal cual está..
);

Reitero, la linea en el código donde salen los tres puntos los dejo para indicar que el contenido del array se deja tal cual está, lo único que cambia es que le agregamos un nuevo elemento, que en este caso es otro array.

Nota:

La matriz esta ordenada alfabéticamente por tag, he colocado el nuevo array como primer elemento de la misma, pero si prefieres puedes ubicarlo de manera ordenada, de igual forma no habrá problema por ello.

2.- Debes crear un icono que identifique a la etiqueta, para el ejemplo he elaborado el siguiente , una vez tengas lista la imagen subela al servidor exactamente al directorio foro/THEME/images/bbc" donde THEME es el nombre del tema al cual deseas que le aparezca el icono.

Dentro del archivo post.template.php hay un par de bucles que van agregando las direcciones de las imágenes tomando como referencia los nombres de las etiquetas, sus propiedades y la dirección del directorio de imágenes del tema que se este usando en ese momento, de ahí la importancia del elemento del array que se agrego anteriormente.

Ahora veamos la siguiente línea:

$settings['images_url'], '/bbc/', $image, '.gif"

Dejando la línea así deberás subir el icono al directorio de imágenes de todos los temas que tengas instalado (si quieres que se muestre el icono). Puedes evitar esto dejando el icono en el directorio de imágenes del theme default e imprimir la dirección de la imagen antes o después del bucle mencionado anteriormente y con una URL fija.

Ahora cierra el archivo post.template.php ya que hemos terminado con él, recuerda salvar los cambios.

---

A continuación abre el archivo Subs.php, en él también hay una matriz que almacena los valores de cada etiqueta $codes[][], la diferencia con respecto al que se uso en el archivo post.template.php, son las propiedades de cada tag. Halla el array y agrega el siguiente código al inicio sin alterar el resto del contenido del mismo:

$codes = array
(
   array
   (
      'tag' => 'fuente',
      'before' => '<b class="ct1"></b><b class="ct2"></b><b class="ct3"></b>
<b class="ct4"></b><div class="ctcontent">Fuentes:</div><div class="cbcontent">',
      'after' => '</div><b class="cb4"></b><b class="cb3"></b>
<b class="cb2"></b><b class="cb1"></b>',
   ),
... aquí el resto del contenido del array..
);

en el elemento tag se almacena el nombre de la etiqueta, mientras que before y after contienen los valores que se imprimen en HTML una vez se interpreta el código.

Ahora ya puedes cerrar el archivo y salvar los cambios.

---

Por ultimo, abrimos el archivo style.css y pegamos el siguiente código:

Clic aquí para mostrar/ocultar el código

/* ejemplo de estilo tomado de la web del programador */
.ct1, .ct2, .ct3, .ct4, .cb1, .cb2, .cb3, .cb4{
   font-size:1px;
   overflow:hidden;
   display:block;
}
.ct1, .cb1 {
   height:1px;
   background:#606060;
   margin:0 5px;
}
.ct2 {
   height:1px; background:#aaa;
   border-right:2px solid #606060;
   border-left:2px solid #606060;
   margin:0 3px;
}
.ct3 {
   height:1px;
   background:#aaa;
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   margin:0 2px;
}
.ct4 {
   height:2px; background:#aaa; 
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   margin:0 1px;
}
.cb2 {
   height:1px; background:#ddd;
   border-right:2px solid #606060;
   border-left:2px solid #606060;
   margin:0 3px;
}
.cb3 {
   height:1px; background:#ddd;
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   margin:0 2px;
}
.cb4 {
   height:2px; background:#ddd;
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   margin:0 1px;
}
.ctcontent {
   background:#aaa;
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   padding:0 5px 5px 5px;
   font-weight:bold;
}
.cbcontent {
   background:#ddd;
   border-right:1px solid #606060;
   border-left:1px solid #606060;
   padding:5px 5px 0 5px;
}

Como te habrás fijado, la etiqueta termina siendo interpretada como un par de DIV's, al archivo CSS agregamos las propiedades que usaremos para darle estilo a esos elementos, demás esta decir que puedes jugar con dichas propiedades y así darle el estilo que mas te guste.

La etiqueta final nos queda así:
uso:

[fuente]http://es.wikipedia.org/wiki/BBCode[/fuente]

vista:

Fuentes:

http://es.wikipedia.org/wiki/BBCode
http://www.lawebdelprogramador.com

De los tres archivos que editamos, Style.css es el único que debe ser modificado en cada uno de los themes en los cuales queremos que se visualice nuestra etiqueta.