Trabalhando com temas do WordPress

O sistema de temas WordPress é uma forma de skin do seu site. Isso quer dizer que só o design de seu site é alterado, ficando as informações intactas no banco de dados. Para você não perder as alterações realizadas quando atualizar o tema utilizado, crie um tema filho. Basicamente, você deve criar uma pasta em wp-content/themes/ com o nome do seu tema, crie o arquivo style.css, escreva o cabeçalho adequadamente e escolha esse tema no painel de controle do WordPress. Outros arquivos devem ser copiados integralmente, exceto o functions.php, que é complementar – basta criar o arquivo e adicionar novas funções, sem copiar as funções do tema ascendente. Caso o arquivo esteja dentro de uma hierarquia de diretórios, a mesma sequências de diretórios deve ser reproduzida.

Para incluir alguma coisa na barra lateral (imagem, link, previsão do tempo…), basta copiar o arquivo sidebar.php para essa nova pasta e incluir o novo código. Para eliminar aqueles links no final do post para o anterior e o posterior, deve-se apagar a função/tag que estiver identificada como “Post navigation” no arquivo “single.php” no tema twenty twelve. Caso queira os posts aparecendo em uma ordem aleatória, em vez de mostrar na tradicional ordem temporal inversa, é só inserir a função random_posts() no functions.php.

Caso tenha que fazer pequenas alterações em muitos arquivos, talvez prefira não copiar todos eles. Isso para que as atualizações façam sentido e você não fique com um monte de arquivos desatualizados ou com risco de quebrar o tema. Nesse caso, se for feita alguma atualização no tema ascendente e você quiser refazer alguma alteração, deverá editar o arquivo de novo – seja através do “editor de temas” do painel do WordPress ou diretamente nos arquivos.

Outro item personalizável em um tema é o favicon: um ícone que fica ao lado do endereço do site/blog na barra do navegador. Basta criar uma imagem nos formatos gif, jpg, png e bmp, de até 150 KB, que o wordpress transforma em um arquivo favicon.ico. Também precisa inserir usando a interface gráfica do menu “Aparência -> temas -> Personalizar -> Identidade do site”.

Personalizações – tema Tortuga

A criação de um tema filho tem todas as vantagens citadas acima, mas se copiar um arquivo para alteração e ele ficar incompatível com alguma atualização, você vai ter problemas. Nesse caso, devido a uma mudança no menu de navegação principal em uma nova versão, o arquivo header.php do tema filho ficou incompatível com os scripts do tema pai atualizado.

Um dos motivos para copiar o arquivo header.php para o tema filho foi a inclusão das tags do Google Analytics e do Google AdSense. No entanto, a instalação do plugin Site Kit do Google permite uma conexão direta entre essas ferramentas. Com relação ao Google AdSense, ainda é necessário incluir a tag, mas isso pode ser feito através do plugin “Bottom of every post” – veja mais sobre ele no post sobre dicas do WordPress.

Ainda no header.php, havia uma tag para carregar as fontes do Google, para uso no título e descrição do site. Para isso, pode ser instalado outro plugin, o Fonts Plugin | Google Fonts Typography, que ainda permite alterar a fonte de diferentes partes do site através da interface gráfica de personalização, sem CSS adicional.

Falando em CSS, na personalização do tema principal, você pode incluir trechos de código CSS. Veja esse exemplo usado aqui no site:

/* Descrição para citação */
p.sub_frase {
    font-style: italic;
    font-size: 75%;
    margin: -15px 0px 20px 0px;
}
/* Descrição de foto em itálico */
.wp-caption .wp-caption-text {
	font-style: italic;
}
/* Aumentar tamanho da fonte do título e descrição */
.site-title {
	font-family: 'Bangers', cursive;
	font-size: 310%;
}
.site-description {
	font-family: 'Bangers', cursive;
	font-size: 120%;
}
/* Cortar espaço vazio do título e reposicionar banner */
.site-branding {
	margin: 0;
}
.header-widget {
	padding: 10px;
	vertical-align: center;
}
/* Tabela larga responsiva */
@media {
    .tab_resp {
        overflow: hidden;
        overflow-x: scroll;
        display:block;
    }
}
.tab_resp thead th{
    background-color: #1585b5; /*Nova cor padrão do site - tema Gambit*/
}

Alterações realizadas diretamente nos arquivos do tema devem ser refeitas a cada atualização. Para isso, acesse o gerenciador de arquivos do seu serviço de hospedagem e edite os arquivos dos exemplos a seguir:

– Arquivo footer.php, substituir interior da tag div id=”footer-text” por (para personalizar) – caso não consiga salvar o arquivo usando o “Editor de temas” do WordPress, acesse o gerenciador de arquivos do seu serviço de hospedagem e siga para “public_html/wp-content/themes/NOME_DO_TEMA/footer.php”:

<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt-br"><img alt="Licença Creative Commons" style="border-width:0" src="https://www.monolitonimbus.com.br/wp-content/uploads/2017/09/cc_80x15.png" /></a> Antes de usar o conteúdo de Monolito Nimbus, veja nossa <a rel="license" href="https://<?php echo $_SERVER['SERVER_NAME']?>/licenca">licença de uso</a>.

– Arquivo template-parts/content-single.php, trechos removidos (para tirar imagem de destaque do início de cada post e navegação do final) – Atualização: essa mudança pode ser feita em “Aparência -> Personalizar -> Theme Options -> Post settings” desabilitando as opções “Display featured image” e “Display previous/next post navigation”:

<?php tortuga_post_image_single(); ?>
<?php tortuga_post_navigation(); ?>

Para alterar a cor principal do tema ThemeZee/Tortuga, na versão 1.9 a cor “dd5533” aparece em alguns arquivos. Desses, a maioria não aparece no editor de temas. Assim, a forma mais eficiente de fazer as alterações é localizando os arquivos e fazendo as alterações. Para isso, baixe os arquivos do tema (wp-content/themes/tortuga) e use os seguintes comandos no terminal:

# Listar arquivos e linhas contendo a string, recursivamente
grep -Rni . -e 'dd5533'
# Substituir a string do exemplo por outra (diretório raiz)
sed -i 's/dd5533/1d858c/g' style.css
sed -i 's/dd5533/1d858c/g' rtl.css
# Copiar os arquivos alterados para a pasta "~/Downloads"
cp style.css rtl.css ~/Downloads
# Alterar arquivo de outra pasta e copiar
cd inc; sed -i 's/dd5533/1d858c/g' gutenberg.php; cp gutenberg.php ~/Downloads
# Alterar arquivos de outras pastas (assets/css)
cd assets/css
sed -i 's/dd5533/1d858c/g' *
# Copiar os arquivos alterados para a pasta "~/Downloads"
cp $(grep -Rni . -e '1d858c' | awk -F':' '{print $1}' | sort -u) ~/Downloads

Copie esses arquivos alterados para seu servidor, nos respectivos diretórios. Talvez seja necessário atualizar o cache do CloudFlare.

Personalizações – tema Gambit

No painel de controle do servidor, ir no gerenciador de arquivos e abrir o arquivo “public_html/wp-content/themes/gambit/footer.php” para alterar o texto personalizado a seguir dentro da div id=”footer-text”:

<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt-br"><img alt="Licença Creative Commons" style="border-width:0" src="https://www.monolitonimbus.com.br/wp-content/uploads/2017/09/cc_80x15.png" /></a> Antes de usar o conteúdo de Monolito Nimbus, veja nossa <a rel="license" href="https://<?php echo $_SERVER['SERVER_NAME']?>/licenca">licença de uso</a>.

A linha a ser substituída contém a função PHP “do_action” recebendo o parâmetro ‘gambit_footer_text’.

One comment

Leave a Reply

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

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.