Como criar uma seção de upload de logo no Theme Customizer do WordPress

Este texto é levemente avançado e direcionado para aqueles que já possuem contato com o Theme Customizer. Caso alguém se interesse por uma abordagem um pouco mais genérica sobre a funcionalidade, me avise pelos comentários! Enquanto isso, recomendo uma passada pelos posts do Otto que tratam sobre o tema.

customizerPois bem, é possível usarmos, para o upload de uma logo, a classe WP_Customize_Image_Control, que nos trará todos os controles necessários para o upload de imagens e, além disso, para a navegação entre aquelas que já subimos para o site. O problema dessa abordagem é o seguinte: como estamos definindo uma área para logos, eu não quero necessariamente passear por todas as imagens que eu já subi para o site, mas sim apenas por aquelas que fiz upload como sendo logos. Imagine que você tem um site em que, a cada data festiva, faz uma brincadeira ou outra com a sua marca. E aí, você vai querer navegar por toda a sua biblioteca de mídia só pra achar a sua logo com o tal gorrinho de Papai Noel?

Para os que pensam assim, o ideal é criar um novo controle que estenda o nativo WP_Customize_Image_Control e nos deixe escolher, de alguma forma, entre as imagens dentro desse nosso contexto de logo. Os controles de upload de imagem de cabeçalho e de imagem de fundo, nativos do WP, possuem esse contexto para buscar entre os attachments que apenas atendam, nesse caso específico, o contexto de custom-background. Bastaria então tentar replicarmos a estrutura de alguma dessas classes para o nosso lado, em que queremos um uploader de imagens que respeite o contexto que será definido.

Neste exemplo, crei uma classe chamada My_Customize_Image_Reloaded_Control. Repare que ela, ao chamar a função get_posts(), passa como parâmetros tanto a chave do contexto, apresentada como a meta key _wp_attachment_context, quanto o valor desse campo, que será definido a seguir:

[php] /**
* Customize Image Reloaded Class
*
* Extend WP_Customize_Image_Control allowing access to uploads made within
* the same context
*/
class My_Customize_Image_Reloaded_Control extends WP_Customize_Image_Control {
/**
* Constructor.
*
* @since 3.4.0
* @uses WP_Customize_Image_Control::__construct()
*
* @param WP_Customize_Manager $manager
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
}

/**
* Search for images within the defined context
*/
public function tab_uploaded() {
$my_context_uploads = get_posts( array(
   ‘post_type’  => ‘attachment’,
   ‘meta_key’   => ‘_wp_attachment_context’,
   ‘meta_value’ => $this->context,
   ‘orderby’    => ‘post_date’,
   ‘nopaging’   => true,
) );
?>

<?php
if ( empty( $my_context_uploads ) )
   return;

foreach ( (array) $my_context_uploads as $my_context_upload ) {
   $this->print_tab_image( esc_url_raw( $my_context_upload->guid ) );
}
}
}
[/php]

Agora, para acessar essa classe modificada, basta criar um controle para ela. Aqui no exemplo abaixo, criei uma seção Branding, que hospedará o controle chamado Logo, este chamando a nossa nova classe My_Customize_Image_Reloaded_Control com o contexto definido:

[php] /**
* Example of inserting a section called "Branding" with a
* context-based image uploader
*/
$wp_customize->add_section( ‘my_branding’, array(
‘title’ => __( ‘Branding’, ” ),
‘priority’ => 30,
) );

$wp_customize->add_setting( ‘my_logo’, array(
‘capability’ => ‘edit_theme_options’
) );

$wp_customize->add_control( new My_Customize_Image_Reloaded_Control( $wp_customize, ‘my_logo’, array(
‘label’ => __( ‘Logo’, ” ),
‘section’ => ‘my_branding’,
‘settings’ => ‘my_logo’,
‘context’ => ‘my-custom-logo’
) ) );
[/php]

É a linha 'context' => 'my-custom-logo' que define quais imagens serão salvas aqui. A partir dessa definição, apenas as imagens subidas sob o contexto my-custom-logo aparecerão na aba Uploaded (ou, infelizmente, na nossa tradução ainda zoada, na aba Upload concluído). Dessa forma, conseguimos separar diferentes áreas de upload para diferentes finalidades. Que beleza!

Ah, o código também está disponível em um gist. É só pegar.


Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: