News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Tutorial crear mods en smf by lucas-ruroken

Started by lucas-ruroken, October 07, 2009, 07:18:24 PM

Previous topic - Next topic

lucas-ruroken

Indice de capitulos



Tutorial Crear mods en SMF - Capitulo I


Antes que nada aclarar: Todo las preguntas que tengan las pueden hacer en este mismo post, yo seguire posteando a medida que valla haciendo los capitulos los ire posteando en ste mismo post tambien.
Otra cosa tambien a aclarar, el contenido no lo oculto ya que para verlo tendria qe dar las gracias o responder y no es mi intencion, sino que sepan como crear las modificaciones de smf y saber que archivos tocar para las respesctivas modificaciones, pero si me gustaria que se registren y digan aunque sea gracias por este tutorial... Es lo minimo que espero ^^



Necesitamos: Minimo conocimiento php y html

En este post aprenderemos a crear mods en smf desde cero, ya siendo para crear el zip y tambien que archivos podremos modificar y para que son cada uno.

Primero pasara a explicar la creacion del zip que es lo mas importante y por lo que se empieza. Para esto necesitaremos crear dos archivos. install.xml y otro que se llame package-info.xml (Nota: el package-info.xml no se puede modificar el nombre, tiene que ser siempre ese, mientras que el install.xml pueden poner loquequieran.xml, pero por ahora para no perderse usen el install.xml).

Bien, procedemos a abrir el install.xml con cualquier editor. Yo les recomiendo DreamWeaver, pero pueden usar otros como notepad, etc.
En este archivo tiene que ir si o si esto:
Quote<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
Bien: luego colocaremos <id>autor:Nombre del mod</id>, y abajo la version del mod entre <version></version>, quedando hasta ahora asi por ejemplo:
Quote<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
   <id>Lucas-ruroken:H1 BBCode</id>
   <version>1.0.0</version>
Ahora podremos poner debajo el sitio de tu pagina pero no es necesario. Lo ponen entre <homepage></homepage>.
Bien, ahora empieza la parte de las modificaciones de los archivos, pero eso lo dejaremos para  despues ya que se empieza a complicar un poco ^^



PD: Cualquier queja, comentario, acotacion o correccion es bien recibida ;D
Espero que les guste y les sirva ^^


For Support:
http://www.smfpersonal.net
http://www.animedk.net
http://www.sharedownload.org
Adk Portal 3.1 is coming....

Design your universe!

mirahalo

muy buen tutorial, ya se necesitaba algo como esto, ;)   solo un par de utiles tips:

<readme parsebbc="true">readme.txt</readme>

el cual te permite tener un archivo externo, en este caso readme.txt con el cual puedes explicar mas a fondo lo que tu mod hace, si le agregas el: parsebbc="true"  entonces en tu archivo readme puedes utilizar codigo bbc para hacer la explicacion mucho mas amigable.

<redirect url="$scripturl?action=featuresettings;sa=basic" timeout="4000">redirect.txt</redirect>

con esta opcion, una vez que se haya instalado el mod, podras redirigir a los usuarios hacia donde tu desees, se utiliza principalmente para redirigir hacia la configuracion de el mod, en este ejemplo se redirigira hacia
caracteristicas y opciones en 1.1.x, se crea otro archivo, ene ste caso llamado redirect.tex el cual tendra una pequeña explicacion:

<div style="padding: 10px;">
<div style="border-bottom: 1px dashed; padding-bottom: 5px; width: 500px; font-weight: bold; font-size: 130%;">Installation Complete</div>

<p>Hope you like the mod ;)</p>
<p>You are now been redirected to the mod settings...</p>

<hr>
<p>Instalacion completa ;)</p>
<p>espero que te agrade este mod ;)</p>
<p>Ahora estas siendo redirigido a la pagina de configuracion...</p>

</div>


un par de sencillos pero utiles tips que te ayudan a mejorar la presentación de tu mod ;)

espero con ansias el siguiente capítulo ;)

lucas-ruroken

wow gracias, muy buenos tips solo me gustaria qe un mod me lo moviera a zona tutos
Adk Portal 3.1 is coming....

Design your universe!

lucas-ruroken

Tutorial Crear mods en SMF - Capitulo II



Nos habiamos quedado en:
Quote<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
   <id>Lucas-ruroken:H1 BBCode</id>
   <homepage>http://sharedownload.org</homepage>

Para proseguir tengo que explicar unas variables que se usan a la hora de decir que archivo modificar.
$boarddir: ruta del foro. Ejemplo public_html/foro
$sourcedir: ruta de la carpeta Sources del foro. Ejemplo public_html/foro/Sources
$themedir: ruta de la carpeta Themes/default. Ejemplo public_html/foro/Themes/default
$imagesdir: ruta de la carpeta images del theme default. Ejemplo public_html/foro/Themes/default/images

Bien entonces teniend en cuenta esto prosigamos, debemos colocar el archivo a modificar seguido de <operation>, y luego seguido de lo que vamos a buscar y si lo vamos a reemplazar, agregar antes o agregar despues.
Veamos un ejemplo sencillo:
Quote<file name="$sourcedir/Subs.php">
      <operation>
         <search position="after"><![CDATA[
         array(
            'tag' => 'white',
            'before' => '<span style="color: white;">',
            'after' => '</span>',
         ),
]]>

Como ven estamos buscando en la carpetas sources ($sourcedir) el archivo subs.php, colocamos el <operation>, seguido de lo que vamos a agregar DESPUES (after). Si van a agregar despues de las lineas buscadas colocamos <search position="after">, si vamos a agregar antes de las lines buscadas colocamos <search position="before"> y si vamos a reemplazar las lineas buscadas colocamos <search position="replace">. Si ven bien despues de search colocamos <![CDATA[ , y cuando terminamos de buscar todo colocamos ]]>, eso significa que terminan las sentencias.
Luego de ]]> tenemos que cerrar el search, de esta manera </search>, y abrimos un <add> que es lo que vamos a agregar despues/antes o reemplazar, colocamos la modificacion y cerramos con </add> quedando:
Quote<add><![CDATA[
         array(
   'tag' => 'h1',
   'before' => '<h1>',
   'after' => '</h1>',
   'block_level' => true,
     ),
]]></add>
y colocando <![CDATA[   y  ]]> nuevamente
Cerramos el </operation>. Si no vamos a modificar nada mas de ese archivo cerramos con </file>, pero si vamos a seguir modificando ese archivo, volvemos a abrir con otro <operation>.

Una vez realizada todas las modificaciones cerramos el archivo con </modification>. Podria quedar todo algo asi:
Quote<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
   <id>Lucas-ruroken:H1 BBCode</id>
   <version>1.0.0</version>
   <info>H1 tags will allow us to add our titles</info>
   <homepage>http://sharedownload.org</homepage>
   <file name="$sourcedir/Subs.php">
      <operation>
         <search position="after"><![CDATA[
         array(
            'tag' => 'white',
            'before' => '<span style="color: white;">',
            'after' => '</span>',
         ),
]]></search>
         <add><![CDATA[
         array(
   'tag' => 'h1',
   'before' => '<h1>',
   'after' => '</h1>',
   'block_level' => true,
     ),
]]></add>
      </operation>
   </file>
        </modification>

Luego explicare las modificaciones, por ahora tomenlo como ejemplos lo que se reemplaza



Bueno hasta aca llegamos en esta parte, y ahora en el que sigue vemos lo referido al package-info.xml ;)
Espero que les guste y como dije antes queja, comentario, acotacion o correccion es bien recibida :)

For Support:
http://www.smfpersonal.net
http://www.animedk.net
http://www.sharedownload.org
Adk Portal 3.1 is coming....

Design your universe!

kr5323

¿Para cuándo el final del tuto???

No lo dejes, compañero.



Saludos.

lucas-ruroken

Tutorial Crear mods en SMF - Capitulo III



Bueno en el capitulo anterior habiamos terminado de crear el install.xml. Ahora vamos a ver de que se encarga el package-info.xml.
Abrimos el archivo con nuestro editor. Al igual que en el archivo anterior ponemos lo referent a xml, lo pongo otra vez:
Quote<?xml version="1.0"?>
<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
Ponemos el nombre del bbcode entre <name></name>, al igual que en el anterior ponemos el id de esta forma<id>Autor:nombredelmod</id> (el nombre del mod en este caso tiene que ir todo junto, ejemplo: h1bbcode), luego ponemos el tipo que siempre es una modificacion, y lo ponemos asi: <type>modification</type> y por ultimo la version del mod entre <version></version>. Todo nos quedaria hasta ahora asi:
Quote<?xml version="1.0"?>
<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
        <name>H1 BBCode</name>
        <id>lucas-ruroken:H1BBCode</id>
        <type>modification</type>
        <version>1.0.0</version>

Bien, ahora mostraremos que funcion va a ser el package-info.xml. Abrimos con un <install>, y le decimos al archivo la modificaciones que vamos a realizar, como estan ya estaban en el install.xml le decimos que realize las modificaciones de ese archivo de esta forma: <modification type="file">install.xml</modification>. Ahora si nosotros tenemos un archivo aparte (por ejemplo una imagen) y lo queremos meter en una carpeta especifica lo tenemos que hacer de esta forma por ejemplo: <require-file name="h1.gif" destination="$imagesdir/bbc" />, Ahi le estamos diciendo que se requiere el archivo h1.gif y que lo mande a la carpeta Themes/default/images/bbc, Facil no?.
Ahora cerramos con un </install>.
Nos podria quedar asi:
Quote<install>
      <modification type="file">install.xml</modification>
      <require-file name="h1.gif" destination="$imagesdir/bbc" />
     </install>

Ahora creamos la parte referida a la desinstalacion, y la haremos de esta forma:
Abrimos con un <uninstall> y hacemos los procesos inversos. Ponemos <modification type="file" reverse="true">install.xml</modification> y luego decimos que borre el archivo: <remove-file name="$imagesdir/bbc/h1.gif" /> (Si tenemos que remover mas archivos tenemos que poner uno de bajo de otro por ejemplo asi:
Quote<remove-file name="$imagesdir/bbc/h1.gif" />
<remove-file name="$imagesdir/bbc/h2.gif" />
<remove-file name="$imagesdir/bbc/h3.gif" />
es lo mismo para agregar).
Bien ahora cerramos con un <uninstall> y por ultimo cerramos con un </package-info>.
Todo nos podria quedar algo asi para que tengan una idea:
Quote<?xml version="1.0"?>
<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
        <name>H1 BBCode</name>
        <id>lucas-ruroken:H1BBCode</id>
        <type>modification</type>
        <version>1.0.0</version>
      
      <install>
      <modification type="file">install.xml</modification>
      <require-file name="h1.gif" destination="$imagesdir/bbc" />
      </install>
      
                </uninstall>
                <modification type="file" reverse="true">install.xml</modification>
            <remove-file name="$imagesdir/bbc/h1.gif" />
        </uninstall>
</package-info>
Ahora podemos comprimir ambos archivos en un zip, por ejemplo h1.zip (no vale otra extension) y ya se podra instalar en nuestro smf ;D ;D ;D.



Hasta aca vimos lo referido al install y al package, en los chapters que siguen podremos ver que modificaciones hacer y a que archivos. Tambien enseñare como desde el package-info crear una tabla en la base de datos pero todo eso mas adelante ;D



For Support:
http://www.smfpersonal.net
http://www.animedk.net
http://www.sharedownload.org
Adk Portal 3.1 is coming....

Design your universe!

lucas-ruroken

#6
Tutorial Crear mods en SMF - Capitulo IV



Ahora voy a explicar a hacer un bbcode simple para smf 1.1.X
El metodo de ahora en mas es....Realizo los pasos y luego explico que se hace...

Primero Abriremos el Themes/default/Post.template.php
Buscaremos la linea
'flash' => array('code' => 'flash', 'before' => '[flash=200,200]', 'after' => '[/flash]', 'description' => $txt[433]),
y la reemplazaremos por la de nuestro bbcode....
'lucas' => array('code' => 'lucas', 'before' => '[lucas]', 'after' => '[/]', 'description' => $txt['lucas']),

Lo que hemos echo aca es dar las tag qe en este caso es 'lucas'...... Luego pondremos que etiquetas tendra nuestro bbcode Antes (before) [lucas] y despues (after) [/lucas]
Prosigamos.... Tenemos la descripcion que seria al pasar con el raton sobre el boton que nos aparecera.... En este caso $txt['lucas']...
Pero....Tenemos que ir al archivo Themes/default/languages/Modifications.TUIDIOMA.php y agregar antes de ?>
$txt['lucas'] = 'El Titulo de nuestro bbcode';

Listo terminamos esa parte....
Nos dirijimos al Sources/Subs.php
Buscamos:
array(
'tag' => 'white',
'before' => '<span style="color: white;">',
'after' => '</span>',
),


Y Presten bien atencion a esta parte
Agregamos despues
array(
'tag' => 'lucas',
'before' => '<h1><div align="center">',
'after' => '</div></h1>',
),


Fijense bien... 'tag' es la que nos va a crear el bbcode
La parte de before =>  nos referimos a la parte que reemplazaria al [lucas] y en el after a la parte que reemplazaria al [/lucas]

Resumiendo..... Este es un ejemplo nomas.... Y es lo basico..... En este caso seria
[lucas]Ola gente[/lucas]

Y lo que haria en este caso nuestro bbcode es agregarle la etiqueta <h1> y alinearlo ......
Ya por ultimo nos quedaria subir nuestra imagen lucas.gif (si se fijan tiene qe tener el mismo nombre de nuestra tag) de 23 x 22 px a la carpeta Themes/TUTHEME/images/bbc





For Support:
http://www.smfpersonal.net
http://www.animedk.net
http://www.sharedownload.org


Proximo capitulo BBCode en smf 2.0
Adk Portal 3.1 is coming....

Design your universe!

zutzu

Muchas gracias lukas por compartir todo esto  :P   lo leere detenidamente.
saludos!!  :)


pd: esperando con ansias los demas capitulos  :D

lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

aelmiger

Pues primero muchas gracias por el tuto que te estas lanzando, segundo man, preguntare sobre el cpa. IV que es donde puedo dar más la talla, por en realidad no se nada de php, pero con muchas ganas de aprenderlo. Primero te pregunto en el Post.template.php, tengo que ajuro que remplazar la variable flash o la puedo colocar despues de el mi variable que creo, otra cosa en esta pagina es que como quien dice si quiero q mi boton quede antes del flash, tengo qeu poner mi variables antes de flash.

Ahora en Sources/Subs.php

Q funcion cumple el array de mi variable?.

Bueno ahora explico lo que pudo hacer. Trate de crear un boton que me predeteminara como quien dice un estilo en el posteo. Ahora la primera vez que lo hice me quedo bien, y quedo en el bbc despues de flash, ahora quise desarrollar otro mod y en el post.template lo cree despues de la variable que cree anteriormente y a partir de hay se enchabeto la cosa, ya ni se muestra el anterior y ni el nuevo.

Q podra ser.

Bueno men mil gracias  por enseñarnos :)   ah y si pudieras tambien podrias enseñar como crear mod para perfiles de post, como quien dice debajo del avatar.

De nuevo mil gracias

lucas-ruroken

QuotePrimero te pregunto en el Post.template.php, tengo que ajuro que remplazar la variable flash o la puedo colocar despues de el mi variable que creo, otra cosa en esta pagina es que como quien dice si quiero q mi boton quede antes del flash, tengo qeu poner mi variables antes de flash.

Exacto

QuoteAhora en Sources/Subs.php

Q funcion cumple el array de mi variable?.

La parte que reemplaza html por bbc

Quote..a partir de hay se enchabeto la cosa, ya ni se muestra el anterior y ni el nuevo.

Q podra ser.

Adjunta el archivo

Quote
Bueno men mil gracias  por enseñarnos :)   ah y si pudieras tambien podrias enseñar como crear mod para perfiles de post, como quien dice debajo del avatar.

Este tuto lo deje un poco de lado, pero prometo que lo ir actualizando, ademas hay un par de tips que tal vez deba cambiar

saludos man ^^
Adk Portal 3.1 is coming....

Design your universe!

aelmiger

Pues bueno, primero y disculpa mi ignorancia no capte si en el post template hay que remplazar o colocar despues. Pero hay veras lo que hice y me diras que si esta mal. Segundo creo que la falla esta en source.subs. ya que solo en uno creo que coloque el html bien de ese bbc, pero el segundo mod que cree no supe como ponerlo, ya que el bbcode es de un mod aparte el Box el cual genera este bbc [/box title=""][/box].  mmm como podria mandar a llamar este codigo en html :o

y lo demás si lo hice al pies de la letra.

http://www.mediafire.com/?yd5x4xgrzqt

Tuve que subirlo en Mediafire, porque no puedo adjuntar archivos en comentarios. Saludos y gracias de nuevo ^^

lucas-ruroken

Tutorial Crear mods en SMF - Capitulo V



Ahora voy a explicar a hacer un bbcode simple para smf 2.0

Primero Abriremos el Sources/Subs-Editor.php
Buscaremos la linea

array(
'image' => 'flash',
'code' => 'flash',
'before' => '[flash=200,200]',
'after' => '[/flash]',
'description' => $txt['flash']
),

y la reemplazaremos por la de nuestro bbcode....

array(
'image' => 'lucas',
'code' => 'lucas',
'before' => '[lucas]',
'after' => '[/lucas]',
'description' => $txt['lucas']
),


Lo que hemos echo aca es dar las tag qe en este caso es 'lucas'...... Luego pondremos que etiquetas tendra nuestro bbcode Antes (before) [lucas] y despues (after) [/lucas]
Prosigamos.... Tenemos la descripcion que seria al pasar con el raton sobre el boton que nos aparecera.... En este caso $txt['lucas']...
Pero....Tenemos que ir al archivo Themes/default/languages/Modifications.TUIDIOMA.php y agregar antes de ?>
$txt['lucas'] = 'El Titulo de nuestro bbcode';

Listo terminamos esa parte....
Nos dirijimos al Sources/Subs.php
Buscamos:

array(
'tag' => 'white',
'before' => '<span style="color: white;" class="bbc_color">',
'after' => '</span>',
),


Y Presten bien atencion a esta parte
Agregamos despues
array(
'tag' => 'lucas',
'before' => '<h1><div align="center">',
'after' => '</div></h1>',
),


Fijense bien... 'tag' es la que nos va a crear el bbcode
La parte de before =>  nos referimos a la parte que reemplazaria al [lucas] y en el after a la parte que reemplazaria al [/lucas]

Resumiendo..... Este es un ejemplo nomas.... Y es lo basico..... En este caso seria
[lucas]Ola gente[/lucas]

Y lo que haria en este caso nuestro bbcode es agregarle la etiqueta <h1> y alinearlo ......
Ya por ultimo nos quedaria subir nuestra imagen lucas.gif (si se fijan tiene qe tener el mismo nombre de nuestra tag) de 23 x 22 px a la carpeta Themes/TUTHEME/images/bbc



Despues de tanto aca estoy devuelta 8)
Adk Portal 3.1 is coming....

Design your universe!

aelmiger

Muchas gracias y mas o menos como seria para crear un mod pero para perfil. Es que tengo una idea, pero no se como hacerla  :(

Muchas gracias por este nuevo capitulo  :D

Herr_Inoddorell

Mira la hora: « Reply #12 on: Today at 03:12:09 AM » :o. El día que te tomes unas vacaciones no volves más eh  ;D.

Y bueh, se agradece mucho de verdad, genial como siempre, Lucas :D

Saludos!

lucas-ruroken

#15
Quote from: Herr_Inoddorell on September 25, 2010, 08:11:36 AM
Mira la hora: « Reply #12 on: Today at 03:12:09 AM » :o. El día que te tomes unas vacaciones no volves más eh  ;D.

Y bueh, se agradece mucho de verdad, genial como siempre, Lucas :D

Saludos!

Es que vine de lo de mi novia y me puse hacer esto por que no tenia sueño :P
Adk Portal 3.1 is coming....

Design your universe!

enik


lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

lean

Muy bueno lucas, como siempre aportando a la comunidad.
Saludos!

Ascot

Wow Muchisimas gracias por los tutoriales. :) veo que nos llamamos igual. Al menos no podré olvidar tu nombre jaja.
:3

Advertisement: