Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Sobre la setting API de wordpress

Estas en el tema de Sobre la setting API de wordpress en el foro de WordPress en Foros del Web. Hola, estoy aprendiendo sobre la setting API de wordpress para poder crear plugins y themes, y tengo algunas dudas. He visto que se puede hacer ...
  #1 (permalink)  
Antiguo 12/04/2013, 07:14
laura_moreno14
Invitado
 
Mensajes: n/a
Puntos:
Sobre la setting API de wordpress

Hola, estoy aprendiendo sobre la setting API de wordpress para poder crear plugins y themes, y tengo algunas dudas.

He visto que se puede hacer de otras formas sin usar esta API, por ejemplo, con un framework, como me recomiendo Nekko. Pero cual es la mejor manera? me imagino que para wordpress sera usando su API. Pero es la mejor forma o mas simple?

Otra duda que tengo, es como simplificar el codigo de las opciones si lo hago con la setting api, ya que ahora lo hago asi:

Código PHP:
Ver original
  1. add_action( 'admin_init', 'mitema_my_admin_init' );
  2.    
  3.     function mitema_my_admin_init() {
  4.  
  5. register_setting( 'opciones', 'analyticsCode' );
  6.  
  7. add_settings_section( 'section-cero', 'Opciones generales', 'mitema_section_cero_callback', 'def_options' );
  8.  
  9. add_settings_field( 'analytics_code', 'Codigo analytics', 'mitema_analytics_code_callback', 'def_options', 'section-cero' );
  10.  
  11. }
  12.  
  13. function mitema_section_cero_callback() {
  14.        
  15.     echo 'Elige las opciones generales.';
  16.    
  17.     }
  18.  
  19. function mitema_analytics_code_callback($args) {
  20.        
  21.     $setting = esc_attr( get_option( 'analyticsCode' ) );
  22.     echo "<input type='text' name='analyticsCode' value='$setting' />";      
  23.    
  24.     }

Pero, cuando añada muchas opciones, no creo que repetir el mismo código tantas veces, no debe ser la manera más eficiente. Por lo que he visto, se hace con arrays, pero como todavía no se mucho de php, no se muy bien como hacerlo. Agradecería que alguien me diera un ejemplo.
  #2 (permalink)  
Antiguo 12/04/2013, 08:46
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 18 años, 9 meses
Puntos: 638
Respuesta: Sobre la setting API de wordpress

Tal vez la Setting API no sea la manera más sencilla, pero si es la mejor, y cuando le coges la vuelta, te darás cuenta que no es complicado, de hecho te simplifica muchas cosas. Así que mi recomendación es usar esta API para este tipo de cosas.

En cuanto a la manera de implementar el código, pues eso depende mucho de tus conocimientos, que crecerán a medida que trabajes en ello, y las necesidades que tengas. Trataré aquí de mostrarte algo basándome en un proyecto en el que uso esta API.

Estoy creando un theme/framework donde tengo varias opciones, Generales, Cabecera, Layout, Social Networks Links, etc... Te mostraré a modo ejemplo cómo hago para las opciones de la cabecera, que son tres:

1. No mostrar imagen de cabecera
2. Mostrar imagen de cabecera
2.1. Mostrar o no imagen destacada en single.php si existe
3. Mostrar un slider con noticias de una categoría determinada
3.n El slider tiene varias opciones, como alinear el thumbnail (izq o der), tamaño del thumbnail, etc...

Entonces lo hago mediante arrays, para la opción 1. es simple, pero para las otras dos, que tienen sub-opciones lo que hago es llamar, en uno de los elementos del array, una función aparte. Vemos algo de código para entrar en materia;

Primero registramos las opciones:
Código PHP:
Ver original
  1. /**
  2.  * Register setting options
  3.  */
  4. add_action( 'admin_init', 't_em_register_setting_options_init' );
  5. function t_em_register_setting_options_init(){
  6.     // Based on Twentyeleven WordPress Theme
  7.     register_setting( 't_em_options', 't_em_theme_options', 't_em_theme_options_validate' );
  8.  
  9.     // Register our settings field group
  10.     add_settings_section( 'general', '', '__return_false', 'theme-options' );
  11.  
  12.     // Register our individual settings fields
  13.     add_settings_field( 't_em_general_set',    __( 'General Options', 't_em' ),        't_em_settings_field_general_options_set',    'theme-options',    'general' );
  14.     add_settings_field( 't_em_header_set',    __( 'Header Options', 't_em' ),            't_em_settings_field_header_set',            'theme-options',    'general' );
  15.     /** otras opciones */
  16. }

Luego la función:
Código PHP:
Ver original
  1. /**
  2.  * Return an array of header options for Twenty'em
  3.  */
  4. function t_em_header_options(){
  5.     $header_options = array (
  6.         'no-header-image' => array (
  7.             'value' => 'no-header-image',
  8.             'label' => __( 'No header image', 't_em' ),
  9.             'extend' => '',
  10.         ),
  11.         'header-image' => array (
  12.             'value' => 'header-image',
  13.             'label' => __( 'Header image', 't_em' ),
  14.             'extend' => t_em_header_image_callback(),
  15.         ),
  16.         'slider' => array (
  17.             'value' => 'slider',
  18.             'label' => __( 'Slider', 't_em' ),
  19.             'extend' => t_em_slider_callback(),
  20.         ),
  21.     );
  22.  
  23.     return apply_filters( 't_em_header_options', $header_options );
  24. }

Seguimos con las funciones tipo callback, en este caso las de la imagen de cabecera y el slider:
Código PHP:
Ver original
  1. /**
  2.  * Extend setting for header image option
  3.  */
  4. function t_em_header_image_callback(){
  5.     /** Tu código aquí... */
  6. }
  7.  
  8. /**
  9.  * Extend setting for slider option
  10.  */
  11. function t_em_slider_callback(){
  12.     /** Tu código aquí... */
  13. }

Al final muestro el formulario:
Código PHP:
Ver original
  1. /**
  2.  * Render the Header setting field
  3.  */
  4. function t_em_settings_field_header_set(){
  5.     global $t_em_theme_options;
  6. ?>
  7.     <div id="header-options">
  8. <?php
  9.     foreach ( t_em_header_options() as $header ) :
  10. ?>
  11.         <div class="layout radio-option header">
  12.             <label class="description">
  13.                 <input type="radio" name="t_em_theme_options[header-set]" class="head-radio-option" value="<?php echo esc_attr( $header['value'] ); ?>" <?php checked( $t_em_theme_options['header-set'], $header['value'] ); ?> />
  14.                 <span><?php echo $header['label']; ?></span>
  15.             </label>
  16.         </div>
  17. <?php
  18.     endforeach;
  19.  
  20.     foreach ( t_em_header_options() as $sub_header ) :
  21.         if ( $sub_header['extend'] != '' ) :
  22.             $selected_option = ( $t_em_theme_options['header-set'] == $sub_header['value'] ) ? 'selected-option' : '';
  23. ?>
  24.         <div id="<?php echo $sub_header['value']; ?>" class="sub-layout header-extend <?php echo $selected_option; ?>">
  25.             <?php echo $sub_header['extend']; ?>
  26.         </div>
  27. <?php
  28.         endif;
  29.     endforeach;
  30. ?>
  31.     </div><!-- #header-options -->
  32. <?php
  33. }

Me limité a no poner las funciones callback para ahorrar espacio en el post, pero aquí puedes ver algo más de este mismo código.

Espero te sirva de ejemplo lo que te doy aquí. A veces por querer ahorrar código terminamos enredando el trabajo y tal ves tengamos un scrip mas corto, pero que demora más.

En este ejemplo tengo un archivo de 827 lineas, con todas las opciones, validaciones, valores por defecto y algo de comentarios

También te recomiendo mires en el theme Twentyeleven que trae buenos ejemplos de esto mismo...

Saludos.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #3 (permalink)  
Antiguo 13/04/2013, 06:08
laura_moreno14
Invitado
 
Mensajes: n/a
Puntos:
Gracias por tu respuesta rogertm, muy buena de verdad.
Ayer no tube tiempo de analizarlo bien, estoy ahora en ello y al ponerlo en practica solo e tenido un problema.
La funcion que pones en el campo extend del array, para que es? Tiene que ver con guardar las opciones? Ya que no puse esta funcion y las opciones me aparecen, pero no se guarda lo que elijo.
De nuevo, gracias!
  #4 (permalink)  
Antiguo 16/04/2013, 07:54
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 18 años, 9 meses
Puntos: 638
Respuesta: Sobre la setting API de wordpress

Las funciones tipo callback son extensiones de la función natural, por decirlo de alguna manera. Si te fijas en la función que muestra el formulario, tengo un foreach al final, que verifica si el elemento extend del array no está vacío y en ese caso muestra la función callback.
Código PHP:
Ver original
  1. <?php
  2.     foreach ( t_em_header_options() as $sub_header ) :
  3.         if ( $sub_header['extend'] != '' ) :
  4.             $selected_option = ( $t_em_theme_options['header-set'] == $sub_header['value'] ) ? 'selected-option' : '';
  5. ?>
  6.         <div id="<?php echo $sub_header['value']; ?>" class="sub-layout header-extend <?php echo $selected_option; ?>">
  7.             <?php echo $sub_header['extend']; ?>
  8.         </div>
  9. <?php
  10.         endif;
  11.     endforeach;
  12. ?>

Te lo derrito un poco para que lo puedas entender mejor. En este ejemplo tenemos tres opciones.

1. No se muestra imagen de cabecera. Que como puedes deducir, no hace falta hacer nada en este caso, sencillamente obtenemos desde la BD que no hay nada en este campo y no hacemos nada.

2. Se muestra una imagen de cabecera, que además, tiene una opción (2.1): mostrar o no la imagen destacada de cada post en single.php, osea, cuando se está leyendo cada post. Como lo hace Twenty Eleven (Activa Twenty Eleven y crea un post con imagen destacada y acceder a él para que veas cómo funciona)

3. Mostrar un Slide Show en la cabecera, que en este caso hay varias opciones (3.n): Tamaño del thumbnail, categoría que se va a mostrar, cantidad de diapositivas, etc...

En los casos 2 y 3 necesitamos las funciones tipo callback, al menos esa fue la mejor manera que encontré para darle solución a mi problema.

Te pongo el ejemplo de la función callback de la imagen de cabecera para que puedas aclararte un poco más:
Código PHP:
Ver original
  1. <?php
  2. /**
  3.  * Extend setting for header image option
  4.  */
  5. function t_em_header_image_callback(){
  6.     global $t_em_theme_options;
  7.     $extend_header = '';
  8.     $extend_header .= '<p>'. sprintf( __( 'To manage your header image options <a href="%1$s" target="_blank">Click here</a>.', 't_em' ), admin_url( 'themes.php?page=custom-header' ) ) .'</p>';
  9.     if ( get_header_image() ) :
  10.         $checked_option = checked( $t_em_theme_options['header-featured-image'], '1', false );
  11.         $extend_header .= '<figure><img src="'.get_header_image().'" width="500"></figure>';
  12.         $extend_header .= '<label class="description">';
  13.         $extend_header .=     __( 'Display featured image in single posts and pages? ', 't_em' );
  14.         $extend_header .=    '<input type="checkbox" name="t_em_theme_options[header-featured-image]" value="1" '. $checked_option .' />';
  15.         $extend_header .= '</label>';
  16.     else :
  17.         $extend_header .= '<p>'. __( 'Oops! No image choosen yet', 't_em' ) .'</p>';
  18.     endif;
  19.  
  20.     return apply_filters( 't_em_header_image_callback', $extend_header );
  21. }
  22. ?>

Un Plus. A la hora de llamar todas estas funciones lo hago desde el archivo header.php por supuesto, y para no complicarme la existencia usé archivos por separado para cada opción:
Código PHP:
Ver original
  1. <?php
  2. /**
  3.  * Display header set depending of the Header Options
  4.  */
  5. function t_em_header_options_set(){
  6.     global    $post,
  7.             $t_em_theme_options;
  8.  
  9.     $header_options = $t_em_theme_options['header-set'];
  10.  
  11.     if ( 'no-header-image' == $header_options ) :
  12.         return false;
  13.     elseif ( 'header-image' == $header_options ) :
  14.         get_template_part( 'header', 'image' );
  15.     elseif ( 'slider' == $header_options ) :
  16.         get_template_part( 'header', 'slider' );
  17.     endif;
  18. }
  19. ?>

En la BD se guardan las opciones dentro de un array (key => value). Entonces, para la llave header-set, tenemos los valores no-header-image, header-image o slider, y se desplegará cada archivo dependiendo de la opción escogida.

En cuanto a la validación de los datos, necesitas una función para eso. Fíjate en la API que está detallado, igual hay muchos tutoriales por internet que te pueden servir.

Yo estudié esta API para un proyecto que estoy haciendo, que espero terminar pronto y al fin poder compartirlo con la comunidad, pues es algo personal, y me ayudó mucho fijarme en el theme Twenty Eleven. Intenta hacer algo en ese sentido y entonces es más fácil ayudarte.

Saludos.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose

Etiquetas: api, php, plugin, tema, theme
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:13.