Como crear un BBC para 2.0 RC3

SMF Support > Tutoriales

(1/5) > >>

DoctorMalboro:
Como crear un BBC para 2.0 RC3

Hola,

Este tutorial ví que se pidió una vez y ya que es algo tan simple, decidí explicarlo con un ejemplo práctico. En este caso supongamos que ustedes quieren crear un BBCode de GoEar para su foro, así que van a la página de GoEar y sacan este código:

--- Code: ---<object width="353" height="132"><embed src="http://www.goear.com/files/external.swf?file=ebafb41" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>
--- End code ---

El código después lo vamos a limpiar así queda de tal forma que se pueda poner cualquier URL (en este caso, siempre depende den BBCode que usen)...

Ahora van a Subs.php y van a buscar la línea 917 o buscar esto:

--- Code: --- /* The following bbc are formatted as an array, with keys as follows:
--- End code ---

Y ahí tienen una explicación de como agregarle funciones a su BBCode... la gran mayoria son funciones que tal vez no les sirvan dependiendo de el tipo de BBCode que hagan... pero se los voy a ir explicando de a poco.
Se puede crear más de un tipo de BBCode, dependiendo de lo que necesiten, y esto se basa si es un código externo (como el que hacemos ahora), una función de SMF o un código que sea usado a través de un mod... pero lo único importante es saber estas 2 cosas:
[O]Se usa la variable $1 como también se puede usar la variable $2, $3, etc. Cuando tengamos que aplicar más de una url (ej. uso $1 para la url de algo y $2 para que salte una descripción que yo quiera poner).
[O]La función block_level la van a usar para evitar que un BBCode sea interferido por otros (ej. [/list]
--- Code: ---[center][goear]la url[/goear][/center]
--- End code ---
se va a evitar que el código de GoEar se centre...)

Entonces, empezemos a hacer el BBCode de a poco...

En su Subs.php van a tener que buscar esta línea:

--- Code: --- $codes = array(
--- End code ---

y abajo de este están todos los BBCodes que ustedes posean.

entonces vamos a empezar a reconocer algunos códigos para poder crear nuestro BBCode:

array( Con esto empieza el BBCode, se crea en base a un array(
'tag' Con esto vamos a definir el nombre del tag, en este caso goear, que iría así:

--- Code: ---'tag' => 'goear',
--- End code ---
esto significa que el nombre del tag es igual a goear (eviten usar mayúsculas en lo posible)
'type' Con esto definimos el tipo de código que se utilizará para crear el BBCode, los más usados son 'unparsed_content' (se utiliza para contenidos externos...), 'unparsed_equals' (para códigos de HTML o PHP) o directamente no ponen nada si es algo como un color o tamaño de fuente... en nuestro caso iría

--- Code: ---'type' => 'unparsed_content',
--- End code ---
'content' Con esto definimos que contenido va a alojar el BBCode, en este caso sería esto:

--- Code: ---<object width="353" height="132"><embed src="" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>
--- End code ---
Pero vamos a hacer 3 modificaciones:

* Vamos a reemplazar el link (http://www.goear.com/files/external.swf?file=ebafb41) por $1 que fue explicado anteriormente..
* vamos a cambiar ambos ancho y alto (width="353" height="132") por esto:

--- Code: ---width="{width}" height="{height}"
--- End code ---
[/li]

* vamos a crear un parámetro (voy a explicarlo con profundidad más adelante) que va a ser así:
--- Code: --- 'parameters' => array(
'width' => array('optional' => false),
'height' => array('optional' => false),
),
--- End code ---
así el usuario puede poner el ancho y alto que desee...[/li]Y nos quedarí así el código casi terminado:

--- Code: ---'content' => '<object width="{width}" height="{height}"><embed src="$1" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="{width}" height="{height}"></embed></object>',
--- End code ---
'parameters' Con esto podemos crear opciones secundarias, como hicimos anteriormente, eso depende (como dije antes) de que BBCode quieran crear...
'block_level' Ya fue explicada...
), Con esto cerramos el array y tenemos el BBCode casi terminado...

Y así nos quedó la primera parte del BBCode...

--- Code: ---array(
'tag' => 'goear',
'type' => 'unparsed_content',
'parameters' => array(
'width' => array('optional' => false),
'height' => array('optional' => false),
),
'content' => '<object width="{width}" height="{height}"><embed src="$1" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="{width}" height="{height}"></embed></object>',
'block_level' => 'true',
),
--- End code ---

Ahora van a Subs-Editor.php así terminamos nuestro BBCode... vayan a la línea 1514 o busquen esto:

--- Code: --- // The below array makes it dead easy to add images to this control. Add it to the array and everything else is done for you!
$context['bbc_tags'] = array();
$context['bbc_tags'][] = array(
--- End code ---

y abajo veremos los BBCodes que tienen...

Veamos las partes del BBCode que usaremos como representación del código anterior...

array( Empezamos otro array(, como explicamos anteriormente...
'image' Este es el nombre que le pondremos a la imágen que representa al BBCode (traten de hacerla de no más de 23x22 pixeles y en formato .gif)
'code' Este es el nombre que va a representar a su BBCode, en este caso goear...
'before' Con esto empezaremos el BBCode... en este caso usaré esto

--- Code: ---'before' => '[goear width=353 height=132]',
--- End code ---
ya que quiero setear el ancho y alto por default...
'after' Con esto cerramos el BBCode... yo uso [/goear]... pero ustedes le pueden poner el nombre que quieran.
'description' Acá pueden poner una descripción, les recomiendo usar variables $txt así no tienen lios a la hora de modificar la descripción, algo así

--- Code: ---'description' => $txt['goear']
--- End code ---
), Cerramos el BBCode

Y listo! tendría que aparecer su BBCode, quedando algo así:

--- Code: ---array(
'image' => 'goear',
'before' => '[goear width=353 height=132]',
'after' => '[/goear]',
'description => $txt['goear']
),
--- End code ---

y tendría que aparecer el BBCode con éxito...

La imágen de BBCode la suben a ./Themes/default/images/bbc/ y a la carpeta bbc de su theme
La variable la ponen en ./Themes/default/languages/Modifications.suidioma.php

--- Quote ---Cualquier duda pregunten en este tema...
--- End quote ---

Saludos! ;)

lucas-ruroken:
Buen tuto dr

ABM:
Muy educativo.

Gracias. ;D

DANIEL!:
muy buen manual tio! , evitara post en vano...

distante:
buen manual! lo usare para unos embeds :D

Navigation

[0] Message Index

[#] Next page

Go to full version