{"id":233438,"date":"2023-02-13T16:41:00","date_gmt":"2023-02-13T13:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233438"},"modified":"2022-11-10T23:41:14","modified_gmt":"2022-11-10T20:41:14","slug":"tutorial-de-tema-wordpress-para-iniciantes-parte-6-funcoes-de-um-tema-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-6-funcoes-de-um-tema-php\/","title":{"rendered":"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 6: Fun\u00e7\u00f5es de um Tema.php"},"content":{"rendered":"\n

Hoje vamos aprender onde e como adicionar c\u00f3digo fora dos templates em nosso tema. Fazemos isso adicionando o functions.php<\/code>arquivo do tema. Ao longo do caminho, tamb\u00e9m aprenderemos como adicionar suas folhas de estilo e scripts da maneira correta.<\/p>\n

O arquivo functions.php de um tema<\/h2>\n

Um tema precisa de um lugar para colocar o c\u00f3digo que n\u00e3o faz parte dos modelos. H\u00e1 sempre um monte de c\u00f3digo que todos os temas precisam adicionar para lidar com a funcionalidade. Por exemplo, habilitar o recurso de imagens em destaque do WordPress (voc\u00ea notou que estava faltando?), suporte para menus, widgets, adi\u00e7\u00e3o de folhas de estilo e scripts (da maneira correta) e muito mais.<\/p>\n

Esse arquivo \u00e9 functions.php<\/code>. WordPress automaticamente e sempre carrega este arquivo se existir em seu tema. \u00c9 sempre carregado tanto no admin quanto no frontend.<\/p>\n

Adicionando um arquivo functions.php ao nosso tema<\/h2>\n

Vamos criar um novo arquivo vazio em nossa pasta de tema raiz e nome\u00e1-lo functions.php<\/code>.<\/p>\n

Nesse arquivo, comece imediatamente com uma tag PHP de abertura (<?php<\/code>) e n\u00e3o inclua a tag de fechamento<\/strong>. O functions.php<\/code>arquivo \u00e9 destinado a c\u00f3digo PHP, n\u00e3o HTML. Seu tema pode quebrar (ou at\u00e9 mesmo agir de forma estranha) se voc\u00ea tiver caracteres ou novas linhas fora das tags PHP neste arquivo. Obviamente, voc\u00ea pode sair das tags PHP para gerar HTML, mas isso deve ser feito dentro de fun\u00e7\u00f5es ou ganchos. Deixe-me explicar isso com um experimento.<\/p>\n

Vamos testar este arquivo para ver como ele funciona. Dentro functions.php<\/code>escreva um eco de algum texto fict\u00edcio:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Atualize seu frontend. O texto fict\u00edcio aparece. Mas se voc\u00ea inspecionar ou visualizar a fonte HTML, ver\u00e1 que o texto aparece antes de abrir <html><\/code>. Isso torna o HTML completamente inv\u00e1lido!<\/p>\n
\"Tutorial<\/a><\/p>\n
V\u00e1 para o seu painel de administra\u00e7\u00e3o e clique em atualizar. Ele faz a mesma coisa l\u00e1 tamb\u00e9m (pode estar escondido atr\u00e1s da barra de administra\u00e7\u00e3o, mas est\u00e1 l\u00e1 no HTML).<\/p>\n
Como voc\u00ea pode ver, qualquer c\u00f3digo em suas functions.php<\/code>cargas antes de qualquer outra coisa em nossos modelos. Portanto, via de regra, qualquer sa\u00edda (HTML fora de tags PHP ou echo<\/code>) deve estar dentro de fun\u00e7\u00f5es que ser\u00e3o executadas nos momentos certos, normalmente vinculadas a a\u00e7\u00f5es ou filtros.<\/p>\n
Lembre-se de quando aprendemos e adicionamos ganchos na parte 3<\/a> do tutorial do tema WordPress para iniciantes. A maneira como executamos o c\u00f3digo em um gancho \u00e9 anexar uma fun\u00e7\u00e3o ao gancho com add_action()<\/code>. Vamos testar outra coisa; vamos fazer uma fun\u00e7\u00e3o ligada a um gancho que j\u00e1 definimos em nossos templates; wp_footer<\/code>.<\/p>\n
Ao functions.php<\/code>remover o echo<\/code>adicionamos para fins de teste e, em vez disso, escrevemos:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Clique em atualizar no frontend e veja que a string aparece bem no local exato que voc\u00ea definiu wp_footer<\/code>, logo antes de fechar <\/body><\/code>. Al\u00e9m disso, observe que isso n\u00e3o ecoar\u00e1 nada no admin. Isso ocorre porque wp_footer<\/code>\u00e9 um gancho que \u00e9 executado apenas no frontend.<\/p>\n
Vamos fazer nossas primeiras opera\u00e7\u00f5es em functions.php<\/code>!<\/p>\n
Nota: No PHP n\u00e3o \u00e9 poss\u00edvel ter duas fun\u00e7\u00f5es com o mesmo nome. Isso inclui nomes de fun\u00e7\u00f5es no WordPress, seu tema e qualquer plugin ativado! Siga as pr\u00e1ticas recomendadas e prefixe suas fun\u00e7\u00f5es com seu slug de tema, como no exemplo acima: ” wptutorial_<function_name><\/code>“. Isso reduz muito o WordPress de travar fatalmente por causa de nomes de fun\u00e7\u00f5es id\u00eanticos.<\/p>\n
Nota 2: N\u00e3o importa em qual ordem voc\u00ea adiciona fun\u00e7\u00f5es e ganchos em seu arquivo functions.php<\/code>. Lembre-se de que os ganchos s\u00e3o executados em determinados pontos de verifica\u00e7\u00e3o de qualquer maneira, n\u00e3o na ordem em que est\u00e3o functions.php<\/code>. A \u00fanica exce\u00e7\u00e3o \u00e9 se voc\u00ea estiver incluindo outros arquivos ou inicializando suas pr\u00f3prias classes.<\/p>\n
A maneira certa de adicionar estilos e scripts versus a maneira errada<\/h2>\n
Alguns de voc\u00eas devem se lembrar da parte 3<\/a>, onde adicionamos o wp_head<\/code>gancho em nosso arquivo header.php<\/code>. Depois que fizemos isso, o WordPress conseguiu carregar seus estilos e scripts, incluindo a barra de administra\u00e7\u00e3o. Voc\u00ea pode estar pensando que, para adicionar nossas folhas de estilo, precisamos fazer uma fun\u00e7\u00e3o vinculada wp_head<\/code>e produzir o <link><\/code>para a folha de estilo… Normalmente voc\u00ea estaria certo!<\/p>\n
No entanto, no WordPress existe uma maneira especial de adicionar scripts e estilos. Isso serve principalmente para gerenciar a ordem de carregamento e evitar o carregamento de bibliotecas duplicadas. Por exemplo, voc\u00ea como autor de um tema pode querer adicionar Javascripts que s\u00e3o dependentes da jQuery<\/code>biblioteca. Ent\u00e3o voc\u00ea precisa ter certeza de jQuery<\/code>ser carregado antes de seus arquivos. Mas o WordPress e quaisquer plugins t\u00eam a mesma necessidade, para garantir que jQuery<\/code>sejam carregados antes de seus scripts tamb\u00e9m. Voc\u00ea n\u00e3o pode carregar a jQuery<\/code>biblioteca v\u00e1rias vezes porque isso causa problemas. Portanto, o WordPress tem uma maneira de gerenciar em qual ordem<\/strong> os scripts e as folhas de estilo s\u00e3o carregados.<\/p>\n
Adicionando folhas de estilo (da maneira certa)<\/h2>\n
Para adicionar qualquer estilo e qualquer javascript, usamos um gancho chamado wp_enqueue_scripts<\/code>. Sim, voc\u00ea tamb\u00e9m usa este gancho para estilos, apesar do nome. A adi\u00e7\u00e3o de scripts e estilos \u00e9 chamada de “enfileiramento" \u2013 como colocar em uma fila. Vamos enfileirar (adicionar) nossa folha de estilo usando a fun\u00e7\u00e3o wp_enqueue_style<\/a> em nosso functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
A wp_enqueue_style<\/code>fun\u00e7\u00e3o recebe no m\u00ednimo dois par\u00e2metros. O primeiro \u00e9 um nome exclusivo (identificador ou “ID do slug”) e o segundo \u00e9 o local do arquivo. O identificador precisa ser exclusivo, pois esse \u00e9 o identificador que o WordPress usa para determinar se h\u00e1 duplicatas.<\/p>\n
Quanto a retornar o caminho para o seu tema, h\u00e1 muitas fun\u00e7\u00f5es dispon\u00edveis. Acima eu usei get_stylesheet_directory_uri()<\/code>que retorna a URL para a pasta do seu tema e, em seguida, acrescentei o restante do caminho \u00e0 nossa folha de estilo.<\/p>\n
PS: O WordPress oferece uma fun\u00e7\u00e3o separada para retornar o URL completo para o style.css<\/code>: get_stylesheet_uri()<\/code>. Eu usei a outra fun\u00e7\u00e3o acima, pois \u00e9 mais \u00fatil para se familiarizar. Voc\u00ea o usar\u00e1 para quaisquer outros arquivos que precisar enfileirar.<\/p>\n
A fun\u00e7\u00e3o wp_enqueue_style<\/code>aceita par\u00e2metros mais \u00fateis, como depend\u00eancias (que outros arquivos css devem ser carregados antes) e n\u00famero de vers\u00e3o (\u00fatil para fins de armazenamento em cache).<\/p>\n
Atualize seu frontend e veja que sua folha de estilo est\u00e1 carregada na <head><\/code>tag!<\/p>\n
Se voc\u00ea \u00e9 um daqueles que est\u00e3o ansiosos para deixar seu tema mais bonito enquanto o codifica, aqui est\u00e1 sua chance. Eu encorajo voc\u00ea a come\u00e7ar a definir seu HTML, classes e wrappers e adicionar algum estilo em seu arquivo style.css<\/code>. Adicionaremos mais conte\u00fado que exigir\u00e1 estilo \u00e0 medida que avan\u00e7amos nesta s\u00e9rie de tutoriais.<\/p>\n
Adicionando scripts (da maneira certa)<\/h2>\n
Vamos ver como adicionamos javascripts ao nosso tema. Isso \u00e9 feito usando o mesmo gancho (assim voc\u00ea pode colocar tudo dentro de uma fun\u00e7\u00e3o). Mas para scripts usamos uma fun\u00e7\u00e3o um pouco diferente.<\/p>\n
Para enfileirar um script, voc\u00ea usa wp_enqueue_script()<\/code>. Os par\u00e2metros s\u00e3o os mesmos do wp_enqueue_style()<\/code>. O primeiro \u00e9 o identificador exclusivo e o segundo \u00e9 o caminho para o script. Terceiro (opcional) \u00e9 o array de depend\u00eancias. Como quarto par\u00e2metro (opcional), voc\u00ea define o n\u00famero da vers\u00e3o. E finalmente quinto (opcional) voc\u00ea define se o script deve ou n\u00e3o ser carregado na <head><\/code>tag ou no final do <\/body><\/code>.<\/p>\n
O WordPress vem com uma grande variedade de bibliotecas j\u00e1 inclu\u00eddas. Eles nem sempre est\u00e3o todos carregados, mas est\u00e3o dispon\u00edveis se voc\u00ea precisar deles. Se voc\u00ea deseja adicionar um script de biblioteca comum, verifique primeiro se o WordPress j\u00e1 o possui<\/a>. Exemplos s\u00e3o jQuery, todos os m\u00f3dulos jQuery UI, Underscore e Backbone.<\/p>\n
Se voc\u00ea adicionar um dos scripts inclu\u00eddos no WordPress como uma depend\u00eancia, n\u00e3o precisar\u00e1 enfileirar esse script! Vamos fazer isso na pr\u00e1tica.<\/p>\n
Crie uma pasta assets<\/code>e dentro dela uma subpasta js<\/code>em nossa pasta de temas, e ent\u00e3o adicione um novo arquivo vazio main.js<\/code>. Digamos que este script requer a jQuery<\/code>biblioteca, ent\u00e3o n\u00f3s o configuramos como depend\u00eancia. Sabemos que o WordPress vem com jQuery<\/code>pacotes e o identificador para isso \u00e9 jquery<\/code>. Vamos enfileirar nosso script assim:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Se voc\u00ea atualizar o frontend e verificar seu c\u00f3digo-fonte, ver\u00e1 que seu script, main.js<\/code>, foi adicionado, mas tamb\u00e9m que a jQuery<\/code>biblioteca foi carregada. E jQuery<\/code>\u00e9 carregado antes do seu arquivo!<\/p>\n
\"Tutorial<\/a><\/p>\n
Agora voc\u00ea aprendeu como adicionar estilos e scripts. Para adicionar mais arquivos, adicione um wp_enqueue_style()<\/code>ou wp_enqueue_script()<\/code>para cada novo arquivo.<\/p>\n
Documenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n