Série Começando com WordPress

Começando com WordPress: Editando a Estrutura do Site

Como editar a estrutura do Site através dos templates

[serialposts]

Aqui está mais um post (#7) da série Começando com WordPress. Até agora você já seria capaz de criar seu site em WordPress, personalizar o esquema de cores, as fontes, e deixá-lo muito mais do jeito que você deseja. Mas, talvez agora você queira fazer outras mudanças no seu site, mudanças que não estejam exatamente relacionadas ao estilo. Portanto, teremos que ver como editar a estrutura do site, através de modelos (templates) do tema WordPress, e para isso, mexer em alguns arquivos PHP do site. Mas calma, lembre-se sempre que estamos aqui para facilitar sua vida, não dificultá-la. Você não precisará se tornar um programador se não quiser.

Aqui está o vídeo do post, e abaixo segue o tutorial em texto:

No último post, vimos como personalizar o visual do site com CSS, usando principalmente as Ferramentas para Desenvolvedores, no caso, o Inspetor de Elementos do Google Chrome. Você aprendeu ainda a alterar a fonte de alguns elementos do site, como o título e corpo. Como eu disse, só parece ser difícil, mas à media que você vai experimentando, brincado, você vai ficando cada vez mais hábil na personalização do WordPress.

Então, no Post#6, fizemos algumas alterações no tema, e eu prometi que disponibilizaria o arquivo para você baixá-lo: Aqui está! Não foram tantas mudanças, mas você poderá usá-lo como base para desenvolver sua personalização.

Nota: É importante que você siga o passo-a-passo desde o Post#1, ok?

De volta ao assunto de hoje…

Antes de começar, você vai precisar:

  • Acesso FTP do seu Site – Seu FileZilla já deve estar configurado
  • Seu programa editor de texto/código – Estamos usando o Notepad++

O que vamos fazer:

  1. Editar o rodapé do WordPress
  2. Mover o menu principal para cima do cabeçalho
  3. Criar uma descrição da página usando campos personalizados

Como ensinei a você no Post#5, estamos trabalhando com um Tema Filho. Portanto, ele ainda não inclui qualquer modelo (template PHP). Então, devo explicar-lhe um pouco sobre modelos em um tema WordPress e como eles devem ser trabalhados em um Tema Filho.

Certo, eu sei que ainda não havia falado nada sobre sistemas de modelos (templates) de tema, mas você não vai sair desta página antes que possa aprender um pouco a respeito disso, combinado?

Nada melhor do que referências oficiais sobre o assunto dos Templates, então aqui estão alguns links:

Nota: Você pode usar o tradutor do Google para as páginas em inglês.

Para termos uma base sobre o assunto neste post, aqui está uma descrição curta:

Os modelos (templates) são os arquivos que controlam a forma como seu site WordPress será exibido. Esses arquivos buscam informações do banco de dados (MySQL) do WordPress e geram o código HTML que é interpretado pelo navegador. Através do seu sistema de Tema, o WordPress permite que você defina os modelos da forma que deseja.

Se você olhar para o diretório do seu tema, vai notar que não há nenhum outro arquivo além do style.css. Isso quer dizer que ainda não há nenhum template no diretório do tema.

Tema Filho sem nenhum Template ainda

Mas por que não? Porque estamos usando um tema filho, que herda todas os modelos do pai por padrão. Veja alguns arquivos de template do tema pai:

Templates do Tema Pai

Então, se criamos um tema filho para não precisar mexer nos arquivos do tema pai, correndo o risco de perder nossas alterações quando este sofresse atualização, como faremos para editar os arquivos de modelos do tema WordPress?

É mais fácil do que você imagina! Basta copiarmos o arquivo do modelo que queremos editar, do tema pai para o tema filho. Essa é outro grande recurso do WordPress: Ele é inteligentemente capaz de olhar primeiro para os arquivos do nosso tema filho e, se não encontrar os arquivos de modelo, ele olha para o tema pai. Assim, se você copiar qualquer modelo para o tema filho, este arquivo terá a prioridade.

O que achou disso? Bem tranquilo. Agora, vamos ver como fazer as mudanças que queremos na estrutura do site.

Criando/Copiando os modelos para seu Tema Filho

Vamos criar os modelos no nosso tema filho? Para isso, basta obter uma cópia dos modelos que desejamos trabalhar, a partir do tema pai, para o tema filho.

Você pode simplesmente arrastar e soltar os arquivos de modelo do tema pai, a partir do servidor (remoto), para um diretório local, usando o cliente FTP.

Você deve estar usando uma pasta para organizar os arquivos que temos trabalhado, como os arquivos do tema filho, certo? Então, você pode abrir o FileZilla, selecionar o arquivo remoto do tema pai correspondentes ao modelo que pretende editar, e arrastar para esta pasta local. Depois de editá-lo, você deverá arrastar estes arquivos de volta para seu servidor, para a pasta do seu tema filho.

Arrastando o arquivo do Template para a pasta local

Não se preocupe, isso não vai prejudicar seu site em nada e não vai excluir nenhum arquivo do seu tema, simplesmente vai criar uma cópia local dos arquivos do tema, que você fará uma nova cópia para o diretório do seu tema filho no servidor.

Vamos começar na ordem que mostrei que faríamos neste tutorial: Vamos editar primeiro o rodapé. Portanto, selecione o arquivo de template “footer.php” do tema pai, arraste e solte-o na pasta local para criar uma cópia deste arquivo, para que possamos editá-lo e, em seguida, depois de concluir sua edição, deve movê-lo para o diretório do nosso tema filho no servidor.

Editando o rodapé

A primeira mudança que vamos fazer na estrutura do site é alterar algumas informações do rodapé. Aqui está o nosso modelo atual:

Rodapé atual do Site

Nós podemos fazer pequenas ou grandes mudanças no nosso rodapé, como por exemplo, adicionar um aviso de direitos reservados (copyright). Você pode mudar completamente o rodapé. Para isso, tudo que temos a fazer é editar o modelo de rodapé (footer.php). Agora, você já deve tê-lo copiado para seu diretório local, então, abra-o no seu editor de códigos.

Mas, antes de editarmos qualquer coisa, quero mostrar e falar algumas coisas sobre este arquivo:

Explicando o arquivo de Template do rodapé

Na parte de cima, você vai ver uma tag de abertura do PHP (<?php). Isso indica que o texto que vem depois disso é um código PHP – uma linguagem que é interpretada e executada pelo servidor, que retorna um código HTML, que por sua vez, é interpretado pelo navegador. Pareceu meio complicado isso? Não se preocupe, eu explico a seguir. Lembrando que você não precisa ser um programador PHP para conseguir executar as etapas que veremos a seguir. Mas, claro que se você gastar alguns minutos pesquisando sobre o assunto, terá muito mais facilidade.

Eu gostaria de aproveitar e recomendar o Curso de PHP para Iniciantes do meu amigo Gustavo Guanabara. O curso é gratuito é vai te ajudar a entender a mecânica (sintaxe) da linguagem. Para referência da linguagem, você pode usar o Manual Oficial do PHP.

Mas, resumidamente, para você entender como o PHP trabalha, aqui está um exemplo:

 <?php
//Este é um comentário de uma linha
/*
 Este tipo de comentário
 pode ter várias linhas
 */
$var1 = 1;
$var2 = 3;
$total = $var1 + $var2;
echo $total;
?>

O código PHP acima executa uma operação aritmética de soma utilizando duas variáveis ($var1 e $var2). A variável “$total” está recebendo o resultado da soma de “$var1” e “$var2“. Na próxima linha, nós mostramos este resultado, mandando imprimi-lo (echo) na tela. O que acontece nesse código? O servidor vai executar o código mostrando apenas o resultado (por causa do “echo“), no caso o número 3. Se você visualizar o código da página, só verá o resultado da operação, ou seja, o retorno, o HTML.

Isso quer dizer que o PHP funciona gerando HTML, pois é isso que os navegadores conseguem ler. Browsers não conseguem ler ou interpretar o PHP. E, é exatamente por isso, que quando você contrata uma hospedagem precisa se certificar que tem o PHP instalado nela (geralmente servidores com Linux).

Então, descrevendo a imagem que mostrei acima, temos a seguinte estrutura:

  • A tag de abertura do PHP
  • Comentários sobre este template
  • Tag de fechamento do PHP
  • Algumas tags HTML – com comentário – incluindo o fechamento da tag div principal (</div><!– #main –>) e abertura da seção do rodapé (<footer>)
  • Algumas tags PHP – Por exemplo: <?php get_sidebar(‘main’); ?>
  • Mais tags HTML de fechamento

Nota: Se você está na home do site pode estar puxando um modelo “home.php” ou “front-page.php“; Se você está página de blog, provavelmente está vendo o modelo “archive.php“. Portanto, todos os modelos do seu tema são reunidos (pelo servidor), conforme necessário, quando um cliente (navegador) faz uma solicitação para ver uma página do seu site.

Então, agora que você deve ter tido uma compreensão de como isso funciona, vamos voltar ao editor de código e analisar o que podemos editar no rodapé do site.

Se você olhar para o código com atenção, você verá a primeira parte que vamos mudar. Estou falando do trecho que contém um link para o WordPress.org. Veja a seguir:

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>

Então, você pode querer apagar toda essa seção. Basta remover tudo que estiver entre “<div class=”site-info”>” e “</div><!– .site-info –>”.

Mas, neste caso, queremos mudar a URL para meu site, inserir um crédito para mim, como desenvolvedor, e um aviso de Copyright. Seria algo parecido com isso:

Desenvolvido por Asllan Maciel – © 2014 – Todos os Direitos Reservados

Então, vamos alterar o texto da seguinte forma:

<div class="site-info">
Desenvolvido por <a href="https://wp24horas.com.br" target="_blank">Asllan Maciel</a> - &copy; <?php echo date(Y,time()) ?> - Todos os direitos reservados
</div><!-- .site-info -->

Usei meu link, o crédito, e um código PHP para exibir o ano atual. Aí está um rodapé personalizado para o nosso site.

Agora, utilize o cliente FTP para enviar o arquivo “footer.php” para o diretório remoto do seu tema filho. Em seguida, acesse o seu site para verificar as mudanças no rodapé.

Se você estiver feliz com as alterações, chegou a hora de alterarmos a posição do menu principal na estrutura do site.

Movendo o Menu Principal para cima do Cabeçalho

Como você já sabe, agora é hora de movermos o menu principal para cima do cabeçalho.

Então, agora precisamos trabalhar no arquivo de template do cabeçalho (header.php). Vá até o diretório remoto do tema pai, copie o arquivo para sua pasta local e abra-o no editor.

Agora, selecione o código que começa com “<header id=”masthead” class=”site-header” role=”banner”>” e termina com “</header><!– #masthead –>”.

Esse trecho que você selecionou representa a barra com o nome do site e o menu de navegação principal (<nav>). Você deve ter percebido também que cada seção é identificada com comentários HTML (Ex: <!– #masthead –>), para ajudar você a encontrá-las. Desta forma, sempre utilize este mesmo princípio em seus próprios temas.

Trecho do Cabeçalho selecionado no código

Agora, recorte (Ctrl+V) este código (ou arraste) e cole-o (Ctrl+V) acima do {code}. Certifique-se de mantê-lo dentro do ‘<div id=”page” class=”hfeed site”>’.

Alterando a posição do menu de navegação no cabeçalho do site

Chegou a hora de salvar o arquivo e enviá-lo para o diretório do nosso tema filho no servidor. Em seguida, acesse o site e atualize a página para que você possa ver o efeito das modificações que fizemos.

Site com o cabeçalho alterado

E aí, o que está achando até aqui? Preciso que você escreva seus comentários abaixo para que eu possa ajudar você com qualquer dúvida que possa ter, ok?

Continuando…

Adicionando uma descrição para nossos modelos de página usando campos personalizados

Estamos quase finalizando esta parte da série Começando com WordPress… A última coisa que vamos fazer na estrutura do site é editar nosso template “content-page.php” para nos permitir acrescentar um campo de descrição abaixo do título. Para isso, nós vamos utilizar um recurso do WordPress chamado de Campos Personalizados.

Primeiro, vamos criar uma página para Serviços. E, provavelmente, você terá que clicar nas “Opções de Tela” para ter certeza que o painel dos campos personalizados está ativo, no caso, marcado:

Ativando os Campos Personalizados nas Opções de Tela

Isso vai mostrar um painel abaixo do editar da página.

Agora, crie um novo campo personalizado, inserindo “descricao” no campo “Nome” e digite a descrição da sua página na caixa “Valor“. Em seguida, clique no botão “Adicionar Campo Personalizado“.

Criando um Campo Personalizado chamado descrição

Feito isso, precisamos adicionar uma pequena linha de código no nosso modelo de página. Copie o arquivo “content-page.php” para seu diretório local e abra-o no editor.

Agora, precisamos adicionar a seguinte linha abaixo do título da página (h1), que está dentro da tag do cabeçalho (</header>):

Adicionando o Campo Personalizado no Template

<h5><?php echo get_post_meta($post->ID, 'descricao', true); ?></h5>

Eu peguei este código na página sobre campos personalizados (custom fields) na seção de Funções de Template do Codex. Simplesmente troquei “key” pelo nome do nosso campo personalizado “descricao“.

Salve o arquivo e envie para o servidor. Agora, veja como ficou a descrição da página.

Se você quiser saber mais sobre isso, publicamos sobre Campos Personalizados.

Que tal? Agora você sabe um pouco sobre edição de modelos (templates) de temas WordPress!

Conclusão

Sempre gosto de frisar que você não precisa se tornar programador, ou entender a fundo sobre a codificação do WordPress. Preciso confessar que nem eu mesmo sei tudo sobre a codificação do WordPress, mas com certeza, ter estudado um pouco sobre programação facilita demais a minha vida quando eu tenho que fazer qualquer alterações nos arquivos do WordPress.

Na verdade, minha maior intenção é que você possa olhar esse tipo de coisa sem tomar um susto, sem ter um sentimento de que não é capaz de entender sobre o assunto. Agora, você aprendeu o básico para fazer suas próprias personalizações, e eu fique feliz por ter mostrado o caminho para você.

Agora falta apenas a última parte da série Começando com WordPress, onde vamos falar sobre como personalizar algumas funcionalidades do nosso site.

Provavelmente você ainda fique um pouco assustado com tudo isso sobre códigos CSS, HTML, PHP, etc, e talvez você prefira utilizar outro tema, quem sabe um tema pago. Mas, aprender a trabalhar com a estrutura do site e personalização do tema padrão do WordPress é um começo muito útil, que vai te dar as diretrizes sobre a codificação e personalização do WordPress.

Espero que esteja gostando, e nos vemos no próximo post!

Assinatura Asllan Maciel

 

Psiu! Quer dominar completamente o WordPress?

Assinatura Premium é tudo que você precisa!

Obtenha acesso à Conteúdos Exclusivos, Séries e Cursos Completos, além de muito conteúdo para aprender sobre os Recursos Mais Tops do WorPress… Mesmo que seja um iniciante, do zero e sem saber programar!

Venha fazer parte dessa comunidade!

Não perca mais nenhuma atualização aqui!

Posts Relacionados

20 respostas

  1. ótima série, espero que em breve tenha séries tb de plugins (algumas excessões), à exemplo de como instalar e configurar; em um dos seus vídeos vi que vc usa um plugin co-authors plus, um dos plugins complicado de se instalar e de se dar certo em alguns themes…

  2. Nossa eu me surpreendi pois você realmente tem o dom de ensinar coisa que poucos tem parabéns, muito top seus videos eu indicooooo.

  3. Забота о обители – это забота о спокойствии. Термомодернизация фасадов – это не только изысканный облик, но и обеспечение сохранения тепла в вашем удобном уголке. Мы, наша команда профессионалов, предлагаем вам превратить ваш дом в прекрасное место для жизни.
    Наши работы – это не просто теплоизоляция, это творческий процесс с каждым строительным блоком. Мы предпочитаем совершенному сочетанию между красотой и практичностью, чтобы ваш дом преобразился не только пригодным для жизни, но и привлекательным.
    И самое главное – разумная цена! Мы верим, что профессиональные услуги не должны быть неподъемными по цене. [url=https://ppu-prof.ru/]Строительные расценки на утепление фасадов[/url] начинается всего начиная с 1250 рублей за квадрат.
    Использование современных материалов и технологий позволяют нам создавать теплоизоляцию, долговечную и надежную. Позабудьте о проблемах с холодом стен и избежите дополнительных расходов на отопление – наше утепление станет вашим надежным защитником от холода.
    Подробнее на [url=https://ppu-prof.ru/]ppu-prof.ru/[/url]
    Не откладывайте на потом заботу о комфорте своего дома. Обращайтесь к экспертам, и ваш уголок станет настоящим художественным творением, которое принесет вам тепло и радость. Вместе мы создадим жилище, в котором вам будет по-настоящему уютно!

  4. Мы служба специалистов по поисковой оптимизации, специализирующихся на повышении посещаемости и рейтинга вашего сайта в поисковых системах.
    Наша команда постигли успехи в своей области и хотим поделиться с вами нашим опытом и навыками.
    Какими преимуществами вы сможете воспользоваться:
    • [url=https://seo-prodvizhenie-ulyanovsk1.ru/]продвижение интернет магазинов в москве[/url]
    • Тщательный анализ вашего сайта и разработка персональной стратегии продвижения.
    • Оптимизация контента и технических характеристик вашего сайта для достижения наивысших результатов.
    • Систематический мониторинг и анализ результатов с целью улучшения вашего онлайн-присутствия.
    Подробнее [url=https://seo-prodvizhenie-ulyanovsk1.ru/]https://seo-prodvizhenie-ulyanovsk1.ru/[/url]
    Уже много клиентов оценили результаты: увеличение посещаемости, улучшение рейтинга в поисковых системах и, конечно, рост бизнеса. Мы готовы предоставить вам бесплатную консультацию, для обсуждения ваших потребностей и разработки стратегии продвижения, соответствующей вашим целям и бюджету.
    Не упустите возможность улучшить свой бизнес в онлайн-мире. Свяжитесь с нами прямо сейчас.

  5. [url=https://teplica-teplourala.ru]Сколько стоит теплица из поликарбоната.[/url]
    [url=https://teplica-teplourala.ru]Купить теплицу из поликарбоната.[/url]
    [url=https://teplica-teplourala.ru]Прямостенная теплица из поликарбоната размеры и цены.[/url]

Deixe um comentário

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

Não perca mais nenhuma atualização aqui!

Tabela de Conteúdo
PUBLICIDADE
Últimos Posts