05Oct 2011 3 Comments */?>

Crear página de opciones parar tu theme de wordpress

Categorías: Tutoriales, Wordpress - Tags: ,

[offtopic] Antes de empezar con este tema les quiero pedir perdón si no contesto los comentarios que me piden ayuda o códigos personalizados. Lamentablemente hace tiempo que decidí no contestarlos porque son muchos y no tengo tiempo para responderlos todos y me parece injusto solo responder algunos. Si de alguna manera pueden ayudarse entre todos me harían un gran favor. Si es algo que no consiguen ayuda en ningún lado pueden contratar mis servicios.[/offtopic]

Hoy les voy a explicar Como crear una página de opciones para sus themes de WordPress donde van a poder subir un logo o favico , insertar el código de google analytics o simplemente agregar un texto de copyright. Cuando un cliente me pide crear un theme personalizado siempre les creo una página de opciones sencilla donde pueden cambiar varias opciones de su theme.

Para esto vamos a utilizar la Settings API de WordPress que precisamente nos ofrece una forma sencilla y segura de realizar páginas de configuración para wordpress.

Lo primero que debemos hacer es escoger un prefijo para nuestras funciones ya que no queres que entren en conflicto con otras funciones de plugins que por casualidad tengan el mismo nombre.Como queremos hacer una “página de opciones” en este ejemplo vamos a usar “pa_” como nuestro prefijo.

Lo primero que debemos hacer es registrar nuestras opciones (Register Settings). Para ello dentro de functions.php incluimos:

1
2
3
4
5
function pa_registrar_opciones() {
    register_setting( 'pa_opciones_theme', 'pa_opciones', 'pa_validar' );
}
 
add_action( 'admin_init', 'pa_registrar_opciones' );

Para utilizar register_settings como hacemos siempre en wordpress lo incluimos dentro de una función. En este caso debemos añadir nuestro hook a admin_init para que funcione correctamente.

Dentro de register_setting vemos 3 parametros:

  • pa_opciones_theme: Es el nombre de grupo de opciones
  • pa_opciones: Es el nombre de la opción que estamos registrando. Puedes registrar cuantas opciones requieras, pero a mi me gusta usar una solo opción array con todos los valores dentro como veremos más adelante.
  • pa_validar: Nombre de la función que utilizaremos para validar los datos.

Nota: En caso de trabajar con Clases de PHP debemos añadir el hook de la siguiente forma:

1
add_action( 'admin_init', array(&$this,'pa_registrar_opciones' ));

Esto último es como mera referencia , en este tutorial vamos a intentar mantener las cosas tan simples como sea posible.

Ahora mismo ya podemos llamar nuestras opciones de la siguiente forma.

1
$opciones = get_option('pa_opciones');

Aunque no devolvera errores, tampoco devolvera ningún valor aun. Por eso podemos agregarle algunos valores por defecto que luego el usuario podrá cambiar desde la página de opciones.

1
2
3
4
5
$valores_default= array(
                    'copyright' => '©2011 Timersys',
                    'logo' => 'http://tudomain.com/images/logo_placeholder.png'
              )
$opciones = get_option('pa_opciones',$valores_default)

Perfecto!! Ya tenemos nuestra variable de opciones creada y le asignamos algunos valores por defecto. Ahora tenemos que crear el menu de configuración de la siguiente manera:

1
2
3
4
5
function pa_opciones_theme() {
    add_theme_page( 'Opciones Theme', 'Opciones Theme', 'edit_theme_options', 'opciones_theme', 'pa_theme_page' );
}
 
add_action( 'admin_menu', 'pa_opciones_theme' );

La función add_theme_page va a añadir una nueva opción dentro del menu Apariencia. Es el lugar lógico para guardar nuestra página de opciones del theme. En ocasiones donde nuestro themes contengan muchas opciones y queremos crear un menu padre aparte deberíamos usar add_menu_page() donde podremos agregar un icono y tendremos más opciones.

Explicando los cinco argumentos de add_theme_page:

  1. Título de la Ventana del Explorador
  2. Título que aparece en el menu
  3. Capability (no se decirlo en español 😀 ) necesaria para poder acceder al menu.
  4. Slug de la url. En este ejemplo wp-admin/admin.php?page=opciones_theme
  5. Nombre de la función que crea la página de opciones

Esta última función es la que nos interesa ahora, ya que es la encarga de mostrar la página con nuestras opciones como podemos ver a continuación.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
function pa_theme_page() {
    global $valores_default;
 
    if ( ! isset( $_REQUEST['updated'] ) )
    $_REQUEST['updated'] = false; // Para comprobar si el formulario fue enviado o no. ?>
 
    <div>
    <?php screen_icon(); echo "<h2>". __( ' Opciones de ' ) . get_current_theme() . "</h2>";
    // Esto muestra el ícono de la página si es que tiene uno y el nombre del theme ?>
 
    <?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
    <div><p><strong><?php _e( 'Opciones guardadas' ); ?></strong></p></div>
    <?php endif; // Si el formulario se envia mostramos el mensaje. ?>
 
    <form method="post" action="options.php">
 
    <?php $opciones = get_option( 'pa_opciones', $valores_default ); ?>
 
    <?php settings_fields( 'pa_opciones_theme' );
    /* Esta función imprime todos los campos hidden necesarios para que el formulario funcione correctamente */ ?>
 
    <table class="form-table">
 
    <tr valign="top"><th scope="row"><label for="logo">Logo Url</label></th>
    <td>
    <input id="theme_logo" name="pa_opciones[theme_logo]" type="text" value="<?php  esc_attr_e($opciones['theme_logo']); ?>" />
   <?php  if($opciones['theme_logo'] !='') : ?> 
        <img src="$opciones['theme_logo']" alt="logo" />
   <? endif; ?>
    </td>
    </tr>
 
    <tr valign="top"><th scope="row"><label for="favico">Favico Url</label></th>
    <td>
    <input id="theme_favico" name="pa_opciones[theme_logo]" type="text" value="<?php  esc_attr_e($opciones['theme_favico']); ?>" />
    <?php if($opciones['theme_favico'] !='') : ?> 
         <img src="$opciones['theme_favico']" alt="logo" />
    <? endif; ?>
    </td>
    </tr>
 
    <tr valign="top"><th scope="row"><label for="google_analytics">C&oacute;digo de Google Analytics</label></th>
    <td>
    <textarea id="google_analytics" name="pa_opciones[google_analytics]"><?php  esc_attr_e($opciones['google_analytics']); ?> </textarea>
    </td>
    </tr>
 
    <tr valign="top"><th scope="row"><label for="copyright">Footer Copyright</label></th>
    <td>
    <input id="footer_copyright" name="pa_opciones[copyright]" type="text" value="<?php  esc_attr_e($opciones['copyright']); ?>" />
    </td>
    </tr>
    </table>
 
   <p class="submit">
    <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
    </form>
 
    </div>
 
    <?php
}

El resto de opciones se imprime de igual manera. En la proximo les explico como agregar el media uploader de wordpress para subir el logo y el favico en vez de tener que pegar la url de las imagenes.

Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • Asd

    Da errores por todas partes. Además de faltar ; en varios cierres de ) el último código deja de funcionar todo.

  • Gerard

    A mi me funciona casi a la perfección, sólo que cuando edito la configuración de la página de opciones no me guarda los cambios; lo deja vacío. ¿A qué puede deberse? Saludos y gracias por el tutorial 🙂