Como criar uma nova seção no Tema Coletivo

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.

Deixe um comentário

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