Como Personalizar as Funcionalidades do Site usando functions.php
[serialposts]
Enfim chegamos ao Post#8, último da Série Começando com WordPress. O objetivo desta Série era ensinar você o suficiente para que, não só conseguisse criar seu site usando WordPress, mas também estivesse mais confortável para personalizá-lo. O WordPress é incrível, e à media que você vai brincando com o que aprendeu nesses últimos 7 posts, e o que vai aprender neste, vai descobrindo um universo inteiro a ser explorado. Você pode realmente fazer coisas incríveis usando o WordPress, por isso, não é a toa que é a plataforma (CMS) mais utilizada em todo mundo, inclusive por grandes marcas.
Hoje vamos ver como trabalhar com um dos principais arquivos do WordPress – functions.php – que é responsável por algumas funcionalidades do nosso Site. Quando você quer adicionar funcionalidades no WordPress existem basicamente dois principais caminhos: Você instala um plugin, ou adiciona trechos de códigos (Snippets) ao arquivo functions.php.
Como sempre gosto de deixar algumas referências, aqui está o link do Codex sobre o Functions.
Então, como falei, o arquivo functions.php é o meio pelo qual podemos ampliar as funcionalidades do nosso site. É um arquivo muito poderoso, e agora vamos ver como podemos usá-lo para personalizar as funcionalidades do site.
Antes de começarmos…
Você vai precisa de:
- Acesso FTP ao seu Site
- Software de edição de texto
- Um favicon (imagem) de 16x16px em formato .ico, chamado “favicon.ico“
O que vamos fazer
- Adicionar o código de acompanhamento do Google Analytics
- Adicionar um favicon para seu site
Antes de prosseguir, deixa-me explicar algumas coisas sobre o arquivo “functions” no contexto do Tema Filho, já que estamos utilizando um. Você viu no post anterior os modelos, arquivos que são responsáveis pela forma como a estrutura (layout) é exibida, também chamados de Templates. Pois bem, com o arquivo “functions.php” a coisa funciona um pouco diferente.
Você viu que os modelos que usamos no tema filho tem prioridade sobre os modelos do tema pai, certo? No caso, o “functions.php” não substitui a funcionalidade do arquivo correspondente no tema pai, em vez disso, adiciona ou estende a funcionalidade do pai.
Assim, quando a nossa página é carregada, e o servidor processa todos os modelos, ele procura as funções no tema filho e executa-as, em seguida, olha para o pai e executa suas funções também.
Outro detalhe, é que o arquivo de funções também é um arquivo PHP, portanto, as funções que vamos trabalhar neste arquivo incluem código PHP, bem como potencialmente algum HTML. Mas, não se preocupe, você foi capaz de chegar até aqui e será capaz de concluir mais esta milha com êxito, garanto!
Então, vamos prosseguir…
Adicionando o código de acompanhamento do Google Analytics
Antes de mostrar isso a você, gostaria de dizer que você pode muito bem adicionar o código do Analytics usando um plugin, ou mesmo através dos novos temas que já oferecem esta opção, não há nada de errado nisso. Na verdade, a maioria dos plugins que oferecem isso vão trabalhar de forma parecida com o que vamos ver a seguir, contudo, você provavelmente não precisaria editar o arquivo “functions.php” e tão pouco outro arquivo do tema. No entanto, acho muito útil ensinar isso a você neste tutorial, pois a mesma regra pode ser aplicada à outros códigos que você queira utilizar no futuro. Então vamos dar uma olhada nisso.
Siga o passo-a-passo
PASSO#1: Abra seu cliente FTP e navegue até o diretório remoto do seu tema filho
PASSO#2: Clique em um ponto vazio da listagem de aquivos, e depois em “Criar Novo Arquivo”.
PASSO#3: Digite o nome “functions.php” (sem aspas) para este arquivo e clique em “Ok”.
PASSO#4: Clique em Editar para abrir seu novo arquivo “functions.php” no seu editor de texto.
PASSO#5: Agora, precisamos definir o arquivo de modo que o servidor entenda que se trata de um arquivo com códigos PHP. Para isso, adicione a tag de abertura do PHP (<?php), logo no início do arquivo.
PASSO#6: Agora estamos prontos para inserir um código no nosso “functions.php”.
Aqui está o código que vamos usar, e abaixo segue a explicação do que estamos usando:
<?php // Inserindo Código Google Analytics no rodapé add_action('wp_footer' , 'wp24h_add_google_analytics'); function wp24h_add_google_analytics() { ?> <!-- Vamos colocar aqui o código do Google Analytics que recebemos de google ... --> <?php } ?>
Certo, vamos entender o código acima…
// Inserindo Código Google Analytics no rodapé
Na primeira linha depois da tag de abertura do PHP, temos uma frase que começa com //. Isto é apenas um comentário. Ele não faz nada além de mostrar algumas informações no arquivo. Utilizar duas barras é uma maneira rápida de comentar uma única linha de código PHP. Se você for comentar utilizando várias linhas, deve utilizar da seguinte forma:
/* Primeira Linha de Comentário Segunda Terceira */
Assim, “/*” dá início ao comentário e “*/” finaliza-o. Este mesmo estilo de comentário é também usado em código CSS. Como já disse antes, é uma boa prática usar comentários com informações importantes sobre o bloco de códigos que você utilizou.
add_action ( 'wp_footer' , 'wp24h_add_google_analytics' );
Na próxima linha, temos um trecho de código aparentemente mais complicado que começa com “add_action“. Este “add_action” é uma função do WordPress que executa ações em trechos de códigos que chamamos de “Hooks”. Não se assuste, eu só precisava explicar para você do que se tratava isso. Muitos códigos que você vai encontrar na web são funções (Functions) PHP que adicionam ou removem funcionalidades para diferentes Hooks em nosso código. Neste caso específico, estamos usando o “add_action” para adicionar a função “wp24h_add_google_analytics” ao hook “wp_footer“, que representa o rodapé.
Isso seria algo como como “Fazer o quê? Onde? Como?“. Ou seja, adicionar ação (add_action), no rodapé (wp_footer), através de uma function (wp24h_add_google_analytics). Talvez tenha sido mais simples explicar assim, não acha? Ah! Não se preocupe, você não tem que decorar todas as possibilidades, mas é importante saber o que está fazendo, mesmo que seja apenas uma noção básica.
function wp24h_add_google_analytics() {
Acima, temos mais uma linha do código, que inicia a função PHP chamada “wp24h_add_google_analytics“.
<!-- Vamos colocar aqui o código do Google Analytics que recebemos de google ... -->
Logo abaixo da função, depois da tag de fechamento do PHP (?>), temos um comentário HTML, que será substituído pelo código de acompanhamento do Google Analytics, que vai fazer o trabalho que queremos, que é monitorar os acessos ao site. Vale dizer que fechamos o PHP para começar o trecho de código não-php.
<?php } ?>
Acima, temos o último trecho do código, onde fechamos a função com uma chave ( } ). Você vai notar que reabrimos o PHP para poder fechar a função, em seguida, fechá-lo novamente. Isto porque já tínhamos fechado o PHP antes, para inserir um trecho não-php, de forma que pudessem trabalhar juntos.
PASSO#7: Agora é hora de entrar na sua conta do Google Analytics e pegar o seu código de acompanhamento. Vou aguardar você fazer isso…
Se quiser ver mais detalhes sobre isso, leia nosso guia de Como Instalar o Google Analytics no WordPress.
PASSO#8: Agora é hora de substituir o comentário HTML pelo seu código de acompanhamento do Analytics.
PASSO#9: Pronto! Agora precisamos salvar para fazer upload do arquivo “functions.php” alterado, para o servidor.
Para testar se funcionou corretamente, podemos usar o Inspetor de Elementos do navegador. E aqui está:
Adicionando um Favicon para seu Site
Você deve saber o que é um Favicon, certo? Se você tem dúvidas, aqui está a página oficial do WordPress sobre Favicon. Mas, em suma, é o pequeno ícone que você vê antes do título ou nome do site na guia do navegador, ou quando o site é salvo nos favoritos. Ele é uma identidade visual para seu site neste sentido.
Então, vamos em frente…
PASSO#1: Crie o seu favicon.ico no seu software de edição de imagens ou usando uma ferramenta online.
PASSO#2: Envie seu favicon para o diretório do seu tema filho via FTP.
PASSO#3: Cole o seguinte código no seu arquivo functions.php
<?php // Adicionando um Favicon para seu Site add_action( 'wp_head', 'wp24h_add_favicon' ); function wp24h_add_favicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico" />'; } ?>
PASSO#4: Salve o arquivo, enviando-o de volta por FTP.
Tendo eu explicado sobre o que fazia o primeiro código, agora você deve ter alguma noção do que está fazendo este código. Mas, vamos dar uma passada rápida…
Começamos com um comentário (//), e no trecho seguinte de código usando novamente a função “add_action” do próprio WordPress. O hook onde estamos colocando nosso código é o “wp_head“, que representa o cabeçalho do Site WordPress. E, criamos uma função chamada “wp24h_add_favicon” para adicionar o favicon.
Alguns esclarecimentos sobre o nome das funções que criamos
Você deve ter notado que eu nomeei as duas funções, iniciando com o nome do tema personalizado (wp24h), e terminando com uma ideia do que a função faz, por exemplo, “add_favicon“. Vale dizer que você pode dar o nome que quiser às funções PHP que você criar. Mas, por que eu fiz isso?
- Isso torna mais fácil a leitura e o entendimento sobre o que aquela função ou snippet faz, e…
- Elimina o risco de usar nomes de funções já existentes no tema pai, ou no próprio WordPress, e assim, reduz o risco de “quebrar” o tema.
De qualquer forma, deixa eu explicar mais um pouco sobre o que vimos neste último código:
Dentro da função (entre { e }), estamos usando o echo para imprimir um código HTML que diz para o navegador onde encontrar o favicon.ico.
Usamos também um trecho PHP (get_stylesheet_directory_uri()), que retorna a URL do nosso tema, seguido do nome do arquivo (favicon.php).
Então, se fizemos tudo corretamente, o navegador irá, por sua vez, exibir o nosso favicon no canto esquerdo das nossas guias, ou outros lugares onde devem ser mostrados.
Conclusão
Antes de qualquer coisa, quero pedir para que você sempre tenha em mente fazer backups sempre que for fazer alterações em qualquer arquivo. O arquivo “functions.php” é um arquivo muito importante, e qualquer código errado, pode causar problemas.
Siga também nossas instruções para evitar erros ao colar snippets.
Entendendo a importância do que vimos neste tutorial, e funcionamento do arquivo “functions.php” você não vai querer mais parar de mexer nele, pois é através dele que você vai conseguir adicionar funcionalidades incríveis ao seu site WordPress.
Assim, espero que quando você vir um trecho de código que adiciona funcionalidades ao WordPress, não se sinta intimidado e assuma o controle.
Na verdade, como eu já havia dito, esta série foi pensada especialmente em introduzir você no universo do WordPress. Seria impossível falar de tudo que você é capaz de fazer usando o WordPress em apenas uma série, mas você viu os principais contextos de criação e personalização de sites WordPress.
Se você quiser aprofundar seu conhecimento sobre esta incrível plataforma de criação de projetos baseados na web, recomendo fortemente que considere se inscrever no meu curso WordPress para Iniciantes. Você terá bem mais informações sobre a criação, personalização e gerenciamento de sites WordPress e ainda terá meu próprio suporte durante seu aprendizado, para ajudá-lo a executar cada um dos seus projetos.
Espero que tenha gostado desta série de 8 Posts que chamamos de Começando com WordPress. Não se preocupe, muitas outras estão vindo por aí!
Agora, se gostou de verdade, não guarde este conhecimento só para você, compartilhe com outras pessoas, interaja deixando comentários abaixo e, se precisar, entre em contato para tirar qualquer duvida que tenha.
Até o próximo post meu amigo Desenvolvedor de Sites WordPress!!!
107 respostas
Your point of view caught my eye and was very interesting. Thanks. I have a question for you. https://accounts.binance.com/fr/register-person?ref=JHQQKNKN
mexican mail order pharmacies: Mexican Pharmacy Online – pharmacies in mexico that ship to usa
buy medicines online in india http://indiaph24.store/# buy medicines online in india
indian pharmacy
purple pharmacy mexico price list [url=https://mexicoph24.life/#]mexican rx online[/url] mexican rx online
https://canadaph24.pro/# canadian pharmacy no scripts
https://indiaph24.store/# top 10 pharmacies in india
purple pharmacy mexico price list [url=https://mexicoph24.life/#]Online Pharmacies in Mexico[/url] mexican mail order pharmacies
effexor and tamoxifen [url=http://nolvadex.life/#]tamoxifen cyp2d6[/url] common side effects of tamoxifen
https://nolvadex.life/# how does tamoxifen work
lisinopril tabs 10mg [url=https://lisinopril.network/#]lisinopril 20 tablet[/url] cheapest price for lisinopril india
lisinopril 40 mg discount: zestril 10 mg price – discount zestril
http://finasteride.store/# get propecia pills
ciprofloxacin over the counter [url=http://ciprofloxacin.tech/#]cipro[/url] ciprofloxacin over the counter
tamoxifen cyp2d6: nolvadex 10mg – where can i buy nolvadex
http://cytotec.club/# buy cytotec in usa
tamoxifen benefits [url=http://nolvadex.life/#]buy nolvadex online[/url] tamoxifen therapy
http://nolvadex.life/# tamoxifen hip pain
https://nolvadex.life/# nolvadex online
ciprofloxacin 500mg buy online [url=http://ciprofloxacin.tech/#]buy generic ciprofloxacin[/url] ciprofloxacin over the counter
Misoprostol 200 mg buy online: cytotec abortion pill – Abortion pills online
cipro [url=http://ciprofloxacin.tech/#]cipro for sale[/url] where can i buy cipro online
http://cytotec.club/# order cytotec online
ciprofloxacin over the counter [url=https://ciprofloxacin.tech/#]ciprofloxacin 500 mg tablet price[/url] buy cipro cheap
buy cytotec pills online cheap: cytotec pills online – buy cytotec
https://nolvadex.life/# tamoxifen effectiveness
buy cytotec over the counter [url=http://cytotec.club/#]cytotec abortion pill[/url] purchase cytotec
https://cytotec.club/# buy cytotec
how to get nolvadex [url=https://nolvadex.life/#]tamoxifen and antidepressants[/url] who should take tamoxifen
cost cheap propecia price: cost of propecia without a prescription – cost of generic propecia online
https://ciprofloxacin.tech/# buy cipro online
buy cipro online canada [url=https://ciprofloxacin.tech/#]cipro online no prescription in the usa[/url] cipro ciprofloxacin
lisinopril 30 mg: zestril 20 mg price – lisinopril 20 pills
https://nolvadex.life/# generic tamoxifen
https://ciprofloxacin.tech/# ciprofloxacin
tamoxifen citrate [url=http://nolvadex.life/#]tamoxifen benefits[/url] nolvadex half life
http://ciprofloxacin.tech/# cipro 500mg best prices
buy cytotec pills [url=https://cytotec.club/#]buy cytotec over the counter[/url] buy cytotec over the counter
buy cytotec over the counter: purchase cytotec – cytotec online
where can i buy nolvadex [url=https://nolvadex.life/#]where to buy nolvadex[/url] tamoxifen vs raloxifene
https://ciprofloxacin.tech/# buy cipro
buy cytotec online: buy cytotec online – Abortion pills online
buy cytotec over the counter [url=http://cytotec.club/#]buy cytotec online[/url] buy misoprostol over the counter
https://finasteride.store/# buy propecia tablets
https://lisinopril.network/# lisinopril 40 mg without prescription
https://lisinopril.network/# 25 mg lisinopril
cytotec pills buy online [url=http://cytotec.club/#]purchase cytotec[/url] buy cytotec in usa
ciprofloxacin order online: cipro ciprofloxacin – buy cipro online canada
http://finasteride.store/# buy generic propecia pill
cipro [url=http://ciprofloxacin.tech/#]cipro 500mg best prices[/url] ciprofloxacin mail online
buy cytotec pills online cheap: buy misoprostol over the counter – buy cytotec pills
http://finasteride.store/# get generic propecia online
http://cytotec.club/# cytotec buy online usa
cheap propecia online [url=http://finasteride.store/#]propecia medication[/url] buying generic propecia pills
purchase cytotec: buy misoprostol over the counter – order cytotec online
buy cialis pill [url=https://cialist.pro/#]cialist.pro[/url] Buy Tadalafil 20mg
Buy Levitra 20mg online: Levitra 20mg price – Levitra tablet price
Cheap Levitra online: Buy Vardenafil 20mg – Levitra 10 mg buy online
https://levitrav.store/# п»їLevitra price
https://cialist.pro/# Generic Cialis price
Buy Levitra 20mg online [url=http://levitrav.store/#]Vardenafil price[/url] Cheap Levitra online
http://cialist.pro/# buy cialis pill
sildenafil oral jelly 100mg kamagra: kamagra oral jelly – sildenafil oral jelly 100mg kamagra
http://cenforce.pro/# cenforce.pro
Buy Cialis online [url=http://cialist.pro/#]cialist.pro[/url] Generic Tadalafil 20mg price
Cialis 20mg price in USA: Cialis 20mg price in USA – Tadalafil Tablet
buy cenforce: Cenforce 100mg tablets for sale – Cenforce 150 mg online
Purchase Cenforce Online [url=https://cenforce.pro/#]cheapest cenforce[/url] cenforce for sale
http://cenforce.pro/# Cenforce 100mg tablets for sale
cialis for sale: buy cialis overseas – Cialis without a doctor prescription
Buy Cenforce 100mg Online [url=http://cenforce.pro/#]Purchase Cenforce Online[/url] cenforce for sale
http://cenforce.pro/# cenforce.pro
http://cialist.pro/# Cialis without a doctor prescription
http://cialist.pro/# buy cialis pill
cheapest cialis: Generic Tadalafil 20mg price – Tadalafil price
Generic Viagra online [url=http://viagras.online/#]viagras.online[/url] п»їBuy generic 100mg Viagra online
https://cenforce.pro/# cenforce.pro
cenforce.pro: Cenforce 150 mg online – Buy Cenforce 100mg Online
Kamagra Oral Jelly [url=http://kamagra.win/#]kamagra oral jelly[/url] buy kamagra online usa
mexican rx online [url=https://pharmmexico.online/#]medication from mexico pharmacy[/url] medication from mexico pharmacy
п»їonline pharmacy no prescription needed: canadian and international prescription service – medications online without prescription
pharmacies in mexico that ship to usa: medicine in mexico pharmacies – mexican online pharmacies prescription drugs
http://pharmcanada.shop/# canadian pharmacies compare
http://pharmindia.online/# indian pharmacies safe
buy prescription drugs from india [url=http://pharmindia.online/#]india online pharmacy[/url] online pharmacy india
buy pain meds online without prescription: no prescription needed pharmacy – buy medications online without prescription
pharmacy coupons: cheapest pharmacy – canadian pharmacy discount coupon
http://pharmcanada.shop/# canadian pharmacies
canadian pharmacy [url=https://pharmcanada.shop/#]best canadian online pharmacy reviews[/url] onlinepharmaciescanada com
best online pharmacies in mexico: mexican rx online – mexican pharmaceuticals online
best online pharmacy without prescription: online drugs without prescription – cheap prescription medication online
online pharmacy with prescription [url=http://pharmnoprescription.icu/#]order medication without prescription[/url] no prescription pharmacy
https://pharmnoprescription.icu/# mail order prescriptions from canada
canadian pharmacies: canadian pharmacy online – canadian pharmacy meds
pills no prescription [url=http://pharmnoprescription.icu/#]buying prescription drugs in india[/url] order medication without prescription
http://pharmnoprescription.icu/# best online pharmacy no prescription
no prescription needed online pharmacy: buy drugs online no prescription – can i buy prescription drugs in canada
no prescription on line pharmacies: best online pharmacy without prescriptions – no prescription on line pharmacies
https://pharmmexico.online/# mexico pharmacy
world pharmacy india [url=http://pharmindia.online/#]buy medicines online in india[/url] online shopping pharmacy india
no prescription drugs online: buying prescription drugs in india – online pharmacies without prescription
top 10 online pharmacy in india: pharmacy website india – best india pharmacy
neurontin 400 mg [url=http://gabapentinneurontin.pro/#]brand neurontin 100 mg canada[/url] neurontin drug
http://amoxila.pro/# buy amoxicillin 500mg capsules uk
doxycycline tablets: buy doxycycline without prescription uk – vibramycin 100 mg
generic for doxycycline: doxycycline hydrochloride 100mg – buy cheap doxycycline online
zithromax 500mg price [url=https://zithromaxa.store/#]how to get zithromax over the counter[/url] buy zithromax 500mg online
prednisone 10 mg tablet cost: prednisone 54899 – can you buy prednisone over the counter
http://prednisoned.online/# prednisone 20mg tablets where to buy
amoxicillin capsules 250mg: amoxicillin order online – buy amoxicillin 500mg canada
prednisone 5 mg tablet without a prescription: prednisone acetate – prednisone cream brand name
amoxicillin 775 mg: where to buy amoxicillin pharmacy – generic amoxil 500 mg
neurontin brand name in india: neurontin 30 mg – neurontin 4000 mg