Editar rodapé WordPress com e sem plugin

Entre os diversos sistemas de ge­ren­ci­a­mento de conteúdo (CMS) que existem, o WordPress é o mais popular atu­al­mente. Um site WordPress consiste em vários com­po­nen­tes:

• WordPress Core: A ins­ta­la­ção WordPress em si
• Tema (theme): Template básico para exibição dinâmica de conteúdo
• Plugins: Extensões que adicionam funções ao WordPress
• Conteúdo: Criado pelo usuário e ar­ma­ze­nado em bancos de dados

Ge­ral­mente, é preciso fazer pequenos ajustes nestes com­po­nen­tes para se criar um site WordPress realmente eficiente. Uma das al­te­ra­ções mais comuns é a inserção de scripts externos que, muitas vezes, precisam ser in­te­gra­dos no rodapé. Neste artigo ex­pli­ca­mos como editar rodapé WordPress com plugin e ma­nu­al­mente, e tudo o que você deve levar em conta ao realizar esta ação.

O que é rodapé WordPress e que elementos ele contém?

De maneira geral, o rodapé (footer) é a parte inferior de uma página. Assim sendo, ele indica ao visitante que a página chegou ao fim. Um rodapé WordPress contém dois tipos de elementos, que ex­pli­ca­re­mos melhor a seguir:

1. Elementos visíveis
2. Elementos in­vi­sí­veis

Elementos visíveis do rodapé WordPress

Diferente do cabeçalho (header) WordPress, o rodapé nor­mal­mente contém elementos visuais menos im­por­tan­tes ou re­le­van­tes. Isso faz sentido, uma vez que o cabeçalho transmite a primeira impressão visual aos vi­si­tan­tes de um site. Um bom cabeçalho serve como um “ímã” que atrai a atenção. Já o rodapé costuma incluir os seguintes elementos visíveis:

• Links para páginas se­cun­dá­rias (in­for­ma­ções de contato, política de pri­va­ci­dade etc.)
• Avisos legais
• Link “Voltar para o topo”

Elementos in­vi­sí­veis do rodapé WordPress

Um cabeçalho WordPress contém uma série de meta tags. A maioria delas deve ser incluída, obri­ga­to­ri­a­mente, no elemento HTML head. Porém, metadados modernos também podem ser uti­li­za­dos fora do HTML head. Na maioria dos casos, elementos script são inseridos também ao editar o rodapé WordPress.

Arquivos externos de script têm uma par­ti­cu­la­ri­dade im­por­tante: ao serem inseridos no HTML head, eles in­ter­rom­pem o car­re­ga­mento da página. Por isso, a re­co­men­da­ção oficial é, sempre que possível, adicionar elementos script externos antes da tag final </body>. No WordPress, isso significa inserir os scripts no rodapé.

Ao falar de scripts, pre­ci­sa­mos destacar a seguinte diferença: scripts podem tanto ser car­re­ga­dos de arquivos externos quanto in­cor­po­ra­dos na página. Além disso, elementos script são, hoje, uti­li­za­dos para um vasto leque de fi­na­li­da­des. Usa-se, por exemplo, o atributo type para descrever os tipos de dados in­cor­po­ra­dos, o que pos­si­bi­lita a in­cor­po­ra­ção de dados de apli­ca­ções e metadados em uma página. Veja aqui um resumo de alguns elementos script de uso frequente:

Como editar o rodapé do WordPress?

Existem dois jeitos de inserir códigos adi­ci­o­nais no rodapé do WordPress:

1. Usando um plugin
2. Mo­di­fi­cando o código do tema

Cada um dos métodos tem vantagens e des­van­ta­gens, que resumimos na tabela abaixo:

Editar rodapé WordPress com plugin

Existem diversos plugins WordPress que pos­si­bi­li­tam a mo­di­fi­ca­ção do rodapé. Eles servem, sobretudo, para inserir elementos in­vi­sí­veis, sendo raramente adequados para alterar elementos visuais. Estes são alguns plugins populares usados para editar o rodapé do WordPress:

• Head, Footer and Post In­jec­ti­ons
• Head and Footer Scripts
• Header Footer Code Manager

Aprenda, a seguir, o passo a passo de como usar o plugin Header and Footer Scripts para inserir um código adicional no rodapé do WordPress:

Close

Close

Close

Close

Close

Close

Editar rodapé WordPress mo­di­fi­cando o código do tema

Tema WordPress é o template básico res­pon­sá­vel por exibir o conteúdo de um site WordPress. Editando o tema, você assume controle total sobre o rodapé. Ao realizar a ação ma­nu­al­mente é possível adicionar, remover e alterar tanto elementos visíveis quanto in­vi­sí­veis.

Neste tutorial, nos con­cen­tra­re­mos em elementos in­vi­sí­veis, uma vez que al­te­ra­ções em elementos visíveis dependem do tema utilizado. Assim sendo, ex­pli­ca­ções desta natureza envolvem style sheets— a não ser que você tenha bastante ex­pe­ri­ên­cia em código HTML e PHP, o que lhe permitirá remover elementos visuais sem com­pli­ca­ções.

Antes de iniciar al­te­ra­ções no tema, ge­ral­mente vale a pena criar um tema-filho (child theme) no seu WordPress. Ele garante que al­te­ra­ções sejam pre­ser­va­das caso o tema seja atu­a­li­zado, sendo assim fa­cil­mente re­ver­sí­veis. Os be­ne­fí­cios compensam o pequeno trabalho extra.

Você pode editar o rodapé WordPress pelo código do tema de duas formas:

1. Mo­di­fi­cando o código no arquivo de template footer.php
2. Criando funções adi­ci­o­nais no arquivo functions.php

Pri­mei­ra­mente você deve entender a estrutura geral de uma página HTML moderna. Muitos temas WordPress seguem este esquema, com pequenas variações. Apon­ta­re­mos elementos es­pe­cí­fi­cos do WordPress nos co­men­tá­rios:

<!-- `header.php` começa aqui -->
<html>
    <head>
        <!-- Elementos invisíveis no HTML head -->
    </head>
    <body>
        <header>
            <!-- Elementos visíveis no cabeçalho -->
        </header>
        <!-- `header.php` termina aqui -->
        <main>
            <!-- Elementos visíveis na área principal -->
        </main>
        <!-- `footer.php` começa aqui -->
        <footer>
            <!-- Elementos visíveis no rodapé -->
        </footer>
            <!-- Elementos invisíveis no fim do documento -->
    </body>
</html>
<!-- `footer.php` termina aqui-->

Um documento HTML é composto de dois elementos: <head> e <body>. No nosso exemplo, o elemento <body> contém os elementos <header>, <main> e <footer>. Dentro de um tema WordPress, essa estrutura de elementos fica dis­tri­buída entre vários arquivos de template. Quase todos os temas usam os arquivos* header.php e footer.php* para codificar o cabeçalho e o rodapé, res­pec­ti­va­mente.

Como modificar o código no arquivo footer.php

O método mais direto para editar o rodapé WordPress é modificar o arquivo de template footer.php. Neste exemplo, uti­li­za­re­mos o tema-padrão “Twenty Twenty” do WordPress para conhecer a estrutura de um arquivo footer.php típico. Abaixo está uma versão resumida do código do arquivo:

<footer id="site-footer" role="contentinfo" class="header-footer-group">
        <!-- Elementos visíveis ficam aqui -->
        </footer><!-- #site-footer -->
        <?php wp_footer(); ?>
        <!-- Elementos invisíveis são dispostos aqui -->
    </body>
</html>

1. O arquivo footer.php começa com a tag de abertura <footer>.
2. Abaixo vêm os elementos visíveis e a tag de fe­cha­mento </footer>.
3. Então, chama-se o gancho (hook) wp_footer do WordPress (aqui, outros elementos são di­na­mi­ca­mente inseridos. Tra­ta­re­mos disso mais tarde).
4. Por último, vêm as tags de fe­cha­mento </body> e </html>.

O rodapé do tema Twenty Twenty contém o texto “Powered by WordPress”. A título de exemplo, vamos removê-lo do footer.php. Para tanto, devemos abrir o arquivo em um editor de texto e localizar o seguinte trecho:

<p class="powered-by-wordpress">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
    </a>
</p><!-- .powered-by-wordpress -->

Se ex­cluir­mos as linhas de código cor­res­pon­den­tes e salvarmos o arquivo, o texto não será mais exibido na página. Mas cuidado! O rodapé do WordPress é integrado a todas as páginas. Desta forma, qualquer erro cometido afetará todo o site. Antes de fazer al­te­ra­ções, não se esqueça de criar uma cópia do arquivo.

Muitas vezes, é mais fácil e menos arriscado adicionar uma linha de CSS ao invés de modificar o código PHP. Mas isso só funciona se o código do tema for “limpo”. No tema Twenty Twenty, podemos ocultar o texto com o seguinte código CSS:

#site-footer .powered-by-wordpress {
    display: none;
}

Como criar funções no functions.php

O arquivo functions.php é um arquivo de tema especial, que contém códigos para per­so­na­li­za­ção do tema e, con­se­quen­te­mente, do site WordPress. Ele serve como ponto de acesso para a injeção dinâmica de códigos no rodapé WordPress, entre outras fi­na­li­da­des. O gancho wp_footer é vinculado a funções es­pe­ci­al­mente definidas: se o gancho funciona, as funções são exe­cu­ta­das. Exemplos abaixo ilus­tra­rão a ex­pli­ca­ção.

Para começar, in­cor­po­ra­mos um bloco com metadados de schema markup na página inicial do WordPress. Para tanto, adi­ci­o­na­mos o seguinte código, em formato JSON-LD, no arquivo functions.php:

function load_start_page_meta() {
    // estamos na página inicial?
    if ( is_front_page() ) {
        // elemento script é disposto
        echo <<<'EOT'
        <script type='application/ld+json'>
        {
            "@context": "http://www.schema.org",
            "@type": "Floricultura",
            "name": "Casa das Flores",
            "address": {
                 "@type": "PostalAddress",
                 "streetAddress": "Rua das Flores, 14",
                 "addressLocality": "Rio de Janeiro",
                 "postalCode": "22000-500"
            }
        }
        </script>
EOT; // esta linha não pode ser recuada!
    }
}
// vincular função com gancho `wp_footer`
add_action( 'wp_footer', 'load_start_page_meta' );

No próximo exemplo, adi­ci­o­na­mos um elemento script com dados JSON somente nas páginas que permitem co­men­tá­rios de usuários. Vamos supor que desejamos ocultar os co­men­tá­rios de um usuário es­pe­cí­fico em um de­ter­mi­nado ano. Neste caso, podemos in­cor­po­rar nas páginas o nome do usuário in­de­se­jado seguido do ano, da seguinte maneira:

function load_comments_exclusion() {
    // estamos em uma página com comentários habilitados?
    if ( is_single() && comments_open() ) {
        // elemento script é disposto
        echo <<<'EOT'
        <script type="application/json">
            {
                "userName": "Fulano de Tal",
                "cutoffYear": "2018"
            }
        </script>
EOT; // esta linha não pode ser recuada!
    }
}
// vincular função com gancho `wp_footer`
add_action( 'wp_footer', 'load_comments_exclusion' );

Como inserir arquivos de script adi­ci­o­nais no rodapé WordPress cor­re­ta­mente

Inserir scripts externos é a alteração mais comum ao se editar rodapé WordPress. Nor­mal­mente, não é uma boa ideia inserir arquivos externos de script usando um plugin ou editando o footer.php. Em vez disso, é melhor usar a função do WordPress es­pe­cí­fica para essa fi­na­li­dade. Prin­ci­pal­mente a função wp_enqueue_script() e o gancho wp_enqueue_scripts são uti­li­za­dos para fazer al­te­ra­ções no functions.php.

Usar a função especial do WordPress para inserir scripts externos é vantajoso por diversos motivos:

• Podemos es­pe­ci­fi­car que o script A só será carregado depois que o script B for carregado. Isso garante que eventuais de­pen­dên­cias sejam cumpridas.
• Podemos es­pe­ci­fi­car que um script será pro­ces­sado obri­ga­to­ri­a­mente no rodapé do WordPress. De outra forma, o script vai parar no HTML head.
• Podemos adicionar um número de versão es­pe­cí­fico a um script. Este, por sua vez, será adi­ci­o­nado ao URL do script. Se a versão mudar, o script receberá um novo URL. Isso obrigará o navegador a re­car­re­gar o script ao invés de usar a versão antiga ar­ma­ze­nada em cache.
• Podemos definir quais scripts queremos inserir, e de que maneira, e o WordPress cuidará do resto. Isso é essencial para oti­mi­za­ções de de­sem­pe­nho. Por exemplo, um plugin de cache pode assumir a lista de scripts a serem inseridos e processá-la. Técnicas de oti­mi­za­ção muito uti­li­za­das, como mi­ni­fi­ca­tion e con­ca­te­na­tion, são baseadas neste mecanismo.

Vamos analisar a estrutura da função wp_enqueue_script(). Este é o esquema geral para chamar a função, com todos os pa­râ­me­tros:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Resumimos, abaixo, uma chamada da função wp_enqueue_script(), com ex­pli­ca­ções sobre* pa­râ­me­tros e exemplos*.

Para concluir, trans­for­ma­re­mos o exemplo da tabela acima em código. Se adi­ci­o­nar­mos o seguinte código no arquivo functions.php, nosso script será carregado como de­pen­dên­cia no jQuery. Ainda, o número da versão da ins­ta­la­ção WordPress será acres­cen­tado ao URL do script. O script é inserido no rodapé do WordPress:

function add_theme_scripts() {
    # carregar script baseado em jQuery no rodapé
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );