Personalizar tema de Wordpress en editor visual Apariencia>Personalizar

  • Autor Autor mtsa
  • Fecha de inicio Fecha de inicio
M

mtsa

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola!
Estoy creando un tema de Wordpress desde cero, y ya tengo mi página web a medias, pero me surge un problemilla.
Me gustaría poder añadir el contenido de mi página desde el editor visual, en la pestaña de Apariencia>Personalizar, pero solo me aparece el menú, el título de mi página y poco más.
Cómo puedo hacer que el contenido de mi tema sea personalizable desde ahí? Por ejemplo los colores, la imagen de cabecera, añadir widgets... y cualquier otra cosa que se pueda personalizar de esta manera.
Gracias de antemano
 
Interesante enlace, gracias por compartirlo [MENTION=179762]MrDeveloper[/MENTION] (y veo que eres nuevo, así que bienvenido a la comunidad de Forobeta), por otro lado iba a decir que hay algunos frameworks para personalización pero evidente siempre es mejor optar por los modos nativos de WordPress.
 
Muchas gracias por la bienvenida [MENTION=1576]ramonjosegn[/MENTION] . Muchos optan por frameworks y demás, pero yo siempre elijo lo nativo, lo que contenga lo justo y necesario para mejorar el rendimiento del sitio. Además de esta forma me evito problemas con actualizaciones y demás.

Tambien pueden mirar este otro enlace que pertenece al Codex de wordpress

Theme Customization API « WordPress Codex
 
Revisa el API de WP que habla acerca del Customizer, las líneas de código que se usan son muy pocas y casi ni se programa nada, solo es copiar, pegar y reemplazar.

Te puedes ayudar con el plugin Kirki, pero primero revisa y prueba al menos una vez las funciones originales.
 
Muchas gracias!!
Con el tutorial en inglés no me entendía mucho, así que busqué a ver si había algo en español y encontré lo siguiente: Customize en Wordpress - Blascarr
En mi archivo functions.php:
Insertar CODE, HTML o PHP: 
function customizer_init() { 
 
   $themePath = get_template_directory() ;
 
   if (is_file($themePath.'/customizer.php')){
      require_once $themePath.'/customizer.php';
   }
}
customizer_init();

En mi archivo customizer.php:
Insertar CODE, HTML o PHP: 
function customizer_interface($wp_customize){
	
	 $wp_customize->add_section('Seccion_Dir', array( 
        'title' => __('Direccion', 'BL'),
        'description'=> 'Direccion del establecimiento',
        'priority' => 10,
    ));

	 $wp_customize->add_setting('Calle', array(
        'default' => __('', 'BL'), 
        'sanitize_callback' => 'sanitize_text_field',
        'transport' => 'postMessage', 					
        'type' => 'text',
    ));
	 
	  $wp_customize->add_control('Control_Dir', array(
        'label' => __('Calle:', 'BL'),
        'section' => 'Seccion_Dir',
        'settings' => 'Calle',
        'priority' => 1,
    ));  
}
	
add_action( 'customize_register', 'customizer_interface' );

Finalmente, en mi archivo footer.php, que es donde agregaría la dirección:
<footer id="pie">

<p class="p1">Visítanos en:</p>
<p class="p2"><?php echo get_theme_mod( 'Calle'); ?></p>

</footer>
Hacer clic para expandir...

Pero a la hora de meter digamos mi texto en el input correspondiente en el editor y darle a guardar, no me actualiza el contenido.

Qué puede estar pasando? Por más que miro no encuentro el error
 
Cuando creas el control tienes que ponerle como primer parámetro el mismo nombre del setting, así: $wp_customize->add_control('Calle', array( ... ));
 
denzel dijo:
Cuando creas el control tienes que ponerle como primer parámetro el mismo nombre del setting, así: $wp_customize->add_control('Calle', array( ... ));
Hacer clic para expandir...

Según el tutorial, basta con poner en el atributo 'settings' del control, el nombre del setting al que va asociado...
De todas formas he cambiado lo que me has dicho y sigue sin funcionar 🙁
 
Me olvidé decir que si usas nombre de el setting como primer parámetro, el "setting" => 'Calle' del add_control no va. Toda esta confusión de debe a que hay dos formas de configurar un control en el customizer, siempre compara los tutos que encuentres con lo que diga el codex de wordpress por mas confuso que te parezca
 
denzel dijo:
Me olvidé decir que si usas nombre de el setting como primer parámetro, el "setting" => 'Calle' del add_control no va. Toda esta confusión de debe a que hay dos formas de configurar un control en el customizer, siempre compara los tutos que encuentres con lo que diga el codex de wordpress por mas confuso que te parezca
Hacer clic para expandir...

Vale, no sé si lo he entendido. He quitado el 'settings' del control y lo he dejado así:
$wp_customize->add_control(new WP_Customize_Control ($wp_customize,'Calle', array(
'label' => __('Calle:', 'BL'),
'section' => 'Seccion_Dir',
'priority' => 1,
)));
Hacer clic para expandir...

No me funciona, no sé qué estoy haciendo mal :fatigue:
 
Última edición:
Si estas en functions.php y éste está en la raiz del tema no hay necesidad de usar dirname ( __FILE__ ).

Prueba con este código, fíjate que le he agregado una función para limpar el input, sin esa función no guarda.

Insertar CODE, HTML o PHP: 
<?php
function customizer_interface($wp_customize){
	
	 $wp_customize->add_section('Seccion_Dir', array( 
        'title' => __('Direccion', 'BL'),
        'description'=> 'Direccion del establecimiento',
        'priority' => 10,
    ));

	 $wp_customize->add_setting('Calle', array(
        'default' => __('', 'BL'), 
        'sanitize_callback' => 'my_sanitize_text_field',
    ));
	 
	  $wp_customize->add_control('Calle', array(
        'type' => 'text',
        'label' => __('Calle:', 'BL'),
        'section' => 'Seccion_Dir',
        'priority' => 1,
    ));  
}
	
add_action( 'customize_register', 'customizer_interface' );

  // SANITIZE CALBACKS

  function my_sanitize_text_field( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
  }
 
Última edición:
Hola! Para el desarrollo de una plantilla en WordPress desde cero es fuerte y tienes que investigar mucho del Codex en wordpress.org... pero para poder editar desde la parte visual del WordPress es importante que crees una función en tu archivo functions.php donde vas a agregar el panel y todas las secciones de dicho panel y todos los controladores y configuraciones de cada sección. Entonces debes leer mucho del codex y ver videos que generalmente están en ingles pero no es imposible. Busca bien y conseguirás! Busca en el codex de wordpress.org "add_customize" y todas las funciones asociadas a el si sabes php entenderas. Soy Desarrollador Web y creo plantillas desde cero 😉
 
denzel dijo:
Si estas en functions.php y éste está en la raiz del tema no hay necesidad de usar dirname ( __FILE__ ).

Prueba con este código, fíjate que le he agregado una función para limpar el input, sin esa función no guarda.

Insertar CODE, HTML o PHP: 
<?php
function customizer_interface($wp_customize){
	
	 $wp_customize->add_section('Seccion_Dir', array( 
        'title' => __('Direccion', 'BL'),
        'description'=> 'Direccion del establecimiento',
        'priority' => 10,
    ));

	 $wp_customize->add_setting('Calle', array(
        'default' => __('', 'BL'), 
        'sanitize_callback' => 'my_sanitize_text_field',
    ));
	 
	  $wp_customize->add_control('Calle', array(
        'type' => 'text',
        'label' => __('Calle:', 'BL'),
        'section' => 'Seccion_Dir',
        'priority' => 1,
    ));  
}
	
add_action( 'customize_register', 'customizer_interface' );

  // SANITIZE CALBACKS

  function my_sanitize_text_field( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
  }
Hacer clic para expandir...


Por fin! Ahora sí me funciona, sería que me faltaba esa función.
Muchísimas gracias!! :welcoming:
 
Hola! Tengo una nueva duda. Quería saber cómo acceder a la opción escogida en un Setitng de tipo Select en el Customizer.

Ejemplo: Tengo una Section para que el usuario meta una dirección, en la que puede seleccionar el tipo de vía:
Insertar CODE, HTML o PHP: 
    $wp_customize->add_section('Seccion_Dir', array( 
        'title' => __('Direccion', 'BL'),
        'description'=> 'Direccion del establecimiento',
        'priority' => 10,
    ));

    $tipoVia = array('C/ ' => 'Calle', 'Tr. ' => 'Travesía', 'Avda. ' => 'Avenida', 'Ctra. ' => 'Carretera');

	$wp_customize->add_setting('TipoVia', array(
        'default' => __($tipoVia[0], 'BL'), 
        'sanitize_callback' => 'my_sanitize_text_field',
    ));
     
  $wp_customize->add_control('TipoVia', array(
        'type' => 'select',
	'choices' => $tipoVia ,
        'label' => __('Dirección:', 'BL'),
        'section' => 'Seccion_Dir',
        'priority' => 1,
    ));
Quería saber cómo acceder a la opción que ha elegido el usuario para poder establecer después una condición.
A ver si alguien me puede ayudar… Gracias
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

P
Cómo personalizar tema en WordPress?
Respuestas
3
Visitas
349
Kervis Toledo
Kervis Toledo
Y
Personalizar tema en tienda online Woocommerce
Respuestas
4
Visitas
4K
yapooo
Y
Atrás
Arriba