Esse é o repositório do Tema Coletivo no Github: https://github.com/redelivre/coletivo. Se ainda não conhecer o Tema Coletivo, acesse essa página para mais detalhes: http://tema.coletivowp.com.br/
Ele nos será útil para visualizar, entender e copiar alguns códigos para criar a nossa própria seção.
O primeiro passo é criar os campos necessários no Customizer. Você pode encontrar mais detalhes obre essa etapa na documentação oficial do WordPress: https://codex.wordpress.org/Theme_Customization_API (em inglês).
<?php function customizer_hello( $wp_customize ) { /*------------------------------------------------------------------------*/ /* Section: Hello World /*------------------------------------------------------------------------*/ $wp_customize->add_panel( 'coletivo_hello' , array( 'priority' => coletivo_get_customizer_priority( 'coletivo_hello' ), 'title' => esc_html__( 'Section: Hello World!', 'coletivo' ), 'description' => '', 'active_callback' => 'coletivo_showon_frontpage' ) ); $wp_customize->add_section( 'coletivo_hello_settings' , array( 'priority' => 3, 'title' => esc_html__( 'Section Settings', 'coletivo' ), 'description' => '', 'panel' => 'coletivo_hello', ) ); // Show Content $wp_customize->add_setting( 'coletivo_hello_disable', array( 'sanitize_callback' => 'coletivo_sanitize_checkbox', 'default' => '', ) ); $wp_customize->add_control( 'coletivo_hello_disable', array( 'type' => 'checkbox', 'label' => esc_html__( 'Hide this section?', 'coletivo' ), 'section' => 'coletivo_hello_settings', 'description' => esc_html__( 'Check this box to hide this section.', 'coletivo' ), ) ); // Section ID $wp_customize->add_setting( 'coletivo_hello_id', array( 'sanitize_callback' => 'coletivo_sanitize_text', 'default' => esc_html__( 'hello', 'coletivo' ), ) ); $wp_customize->add_control( 'coletivo_hello_id', array( 'label' => esc_html__( 'Section ID:', 'coletivo' ), 'section' => 'coletivo_hello_settings', 'description' => esc_html__( 'The section id, we will use this for link anchor.', 'coletivo' ) ) ); // Title $wp_customize->add_setting( 'coletivo_hello_title', array( 'sanitize_callback' => 'sanitize_text_field', 'default' => esc_html__( 'Hello World!', 'coletivo' ), ) ); $wp_customize->add_control( 'coletivo_hello_title', array( 'label' => esc_html__( 'Section Title', 'coletivo' ), 'section' => 'coletivo_hello_settings', 'description' => '', ) ); // Sub Title $wp_customize->add_setting( 'coletivo_hello_subtitle', array( 'sanitize_callback' => 'sanitize_text_field', 'default' => esc_html__( 'Section subtitle', 'coletivo' ), ) ); $wp_customize->add_control( 'coletivo_hello_subtitle', array( 'label' => esc_html__( 'Section Subtitle', 'coletivo' ), 'section' => 'coletivo_hello_settings', 'description' => '', ) ); // Description $wp_customize->add_setting( 'coletivo_hello_desc', array( 'sanitize_callback' => 'coletivo_sanitize_text', 'default' => '', ) ); $wp_customize->add_control( new coletivo_Editor_Custom_Control( $wp_customize, 'coletivo_hello_desc', array( 'label' => esc_html__( 'Section Description', 'coletivo' ), 'section' => 'coletivo_hello_settings', 'description' => '', ) )); add_filter( 'coletivo_customizer_partials_selective_refresh_keys', 'hello_add_section_customizer' ); } add_action( 'coletivo_customize_after_register', 'customizer_hello', 10, 1 ); /** * Add settings and ID on list of the sections */ function hello_add_section_customizer( $value ) { $hello = array( 'id' => 'hello', 'selector' => '.section-hello', 'settings' => array( 'coletivo_hello_id', 'coletivo_hello_title', 'coletivo_hello_subtitle', 'coletivo_hello_desc' ), ); $value[] = $hello; return $value; }
Nomeie o arquivo como ‘customizer.php’ e no ‘functions.php’ do seu tema faça a inclusão do mesmo:
include_once( 'inc/customizer.php' );
Com isso você já visualizará no Customizer a seção ‘Hello Word!’ que estamos criando.
Um ponto importante a se observar é que os campos que você criar para o Customizer dentro da função ‘customizer_hello()’, seus respectivos IDs devem ser passados para para a função ‘hello_add_section_customizer()’.
E agora o segundo passo é criar o arquivo que será chamado no frontend para exibir a seção que estamos criando. Observe (pelo github por exemplo) que no Tema Coletivo existe a pasta ‘/section-parts’, dentro dela é onde ficam todas as seções do tema e precisamos adicionar a nossa seção também nessa pasta, no caso, no tema filho (child theme), basta criar uma pasta com o mesmo nome e adicionar o arquivo da nossa nova seção.
Acessando a pasta ‘/section-parts‘ é possível identificar um padrão entre cada seção, elas se iniciam com o prefixo ‘section-‘ e vem seguido do nome que definimos para a nossa seção, nesse caso ‘hello’.
Com isso, criamos em nosso tema filho a pasta ‘/section-parts’ e dentro dela o arquivo ‘section-hello.php’.
Veja um exemplo básico desse arquivo:
<?php /** * Get the values from Customizer */ $coletivo_hello_disable = get_theme_mod( 'coletivo_hello_disable' ) == 1 ? true : false; $coletivo_hello_id = get_theme_mod( 'coletivo_hello_id', esc_html__( 'hello', 'coletivo' ) ); $coletivo_hello_title = get_theme_mod( 'coletivo_hello_title', esc_html__( 'Section Title', 'coletivo' ) ); $coletivo_hello_subtitle = get_theme_mod( 'coletivo_hello_subtitle', esc_html__( 'Section Subtitle', 'coletivo' ) ); $coletivo_hello_desc = get_theme_mod( 'coletivo_hello_desc', esc_html__( 'Section Description', 'coletivo' ) ); if ( coletivo_is_selective_refresh() ) { $coletivo_hello_disable = false; } ?> <?php if ( ! coletivo_is_selective_refresh() ){ ?> <section id="<?php if ( $coletivo_hello_id != '' ) echo $coletivo_hello_id; ?>" <?php do_action( 'coletivo_section_atts', 'hello' ); ?> class="<?php echo esc_attr( apply_filters( 'coletivo_section_class', 'section-hello section-padding onepage-section', 'hello' ) ); ?>"> <?php } ?> <?php do_action( 'coletivo_section_before_inner', 'hello' ); ?> <div class="container"> <?php if ( $coletivo_hello_title || $coletivo_hello_subtitle || $coletivo_hello_desc ) { ?> <div class="section-title-area"> <?php if ( $coletivo_hello_subtitle != '' ) echo '<h5 class="section-subtitle">' . esc_html( $coletivo_hello_subtitle ) . '</h5>'; ?> <?php if ( $coletivo_hello_title != '' ) echo '<h2 class="section-title">' . esc_html( $coletivo_hello_title ) . '</h2>'; ?> <?php if ( $coletivo_hello_desc ) { echo '<div class="section-desc">' . apply_filters( 'the_content', wp_kses_post( $coletivo_hello_desc ) ) . '</div>'; } ?> </div> <?php } ?> <div class="section-content"> <div class="row"> <div class="col-sm-12"> <div class="hello-entry wow slideInUp"> </div><!-- /.hello-entry --> </div><!-- /.col-sm-12 --> </div><!-- /.row --> </div><!-- /.section-content --> </div><!-- /.container --> <?php do_action( 'coletivo_section_after_inner', 'hello' ); ?> <?php if ( ! coletivo_is_selective_refresh() ){ ?> </section> <?php }
Esse arquivo (acima) é uma base para as seções do Tema Coletivo. Com ele você pode fazer praticamente tudo, seguindo as regras e campos que aplicou nos campos do Customizer.
As possibilidades são infinitas, por exemplo se você quiser que no Customizer a pessoa selecione apenas se exibe ou não aquela seção e então esse arquivo acima assume toda responsabilidade para exibir a mágica.
Caso tenha alguma dúvida ou problema na aplicação do código acima, comente abaixo para que eu possa auxiliá-lo a implementar e melhorar esse tutorial e o código aqui presente.