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.