Personalize um tema WordPress com HTML e CSS

1. Introdução: Oi, meu nome é Victoria Anna, e sou designer de comunicação visual. Eu desenho logotipos, identidades corporativas, site e eu ilustração. Nesta classe Skillshare, eu gostaria de mostrar a você como personalizar o tema padrão 2019 e transformá-lo deste para este. Este processo é válido para transformar e personalizar outros temas WordPress. Espero que você encontre inspiração e comece a trabalhar em algumas personalizações. Vamos dar uma olhada nos arquivos de modelo e como eles trabalham juntos para construir um tema WordPress, e nós vamos fazer algumas alterações neles. Vamos mudar o cabeçalho, o rodapé, personalizar o logotipo, o menu, criar conteúdo, incorporar o Google Maps, instalar alguns plugins. Suponho que você já tenha instalado WordPress tema e WordPress e deu uma olhada nas configurações e que você tem alguma experiência com CSS e HTML. Se tiver alguma pergunta, contacte-me. Você vai encontrar os arquivos de recursos e exercícios anexados a algumas das lições. Agora vamos começar. 2. Arquivos de tema e Hierarchy: Iniciei o cliente FTP FileZilla, que é o meu preferido. Vamos ter uma visão geral sobre os arquivos de instalação do WordPress. Normalmente, baixamos do site WordPress, a pasta zip com WordPress com a versão mais recente e ZIP para o nosso computador, e enviamos todos os arquivos para o nosso servidor para instalá-lo com a instalação do banco de dados e todos os outros configurações. Bem, aqui no Conteúdo WP, temos nossos temas também plug-ins. Vamos dar uma olhada. Este é o nosso tema 2019, e WordPress nos dias de hoje vem instalado com 2017 e 2016 tema. Vamos escolher o nosso tema 2019 e ver quais arquivos estão lá. Normalmente, WordPress tema pode funcionar apenas com um arquivo PHP índice e estilo CSS. Mas funções PHP também é muito bom. Você também pode querer ter algumas interações agradáveis e algumas fontes agradáveis. Todos esses arquivos são basicamente componentes modulares que constroem uma coisa. É realmente importante entender a hierarquia dos arquivos de modelo WordPress. Temos todos esses arquivos de template que eu mostrei no FileZilla, e depois, é claro, as folhas de estilo e imagens JavaScript e outros arquivos de template como funções PHP que constroem todo o tema. Todos esses arquivos de modelo são como pequenos módulos que você pode combinar para criar o tema que você deseja ter. Eles estão dando a estrutura para a informação em seu site. Por exemplo, em nosso tema, a barra lateral PHP com widgets é na verdade uma parte do rodapé PHP. Você pode combinar todos esses pequenos módulos juntos para um grande tema, e há uma hierarquia especial, por exemplo, o mais especializado dos templates é, por exemplo, você tem uma página PHP para todas as páginas que criamos no o nosso tema. Mas vamos dizer que vamos precisar de uma página de contato e vai parecer um pouco diferente de todas as outras páginas. Então eu vou criar, em seguida, uma página, entre em contato com PHP. Este será o modelo apenas para a página de contato. No caso, por exemplo, que eu tenha criado uma página de contato, mas não atribuído modelo de página de contato para ele, o WordPress vai cair de volta para os modelos de página PHP. Então, o modelo mais especializado é, como categoria ou categoria sapatos. Os sapatos de categoria são mais especializados do que a categoria. Então o WordPress está sempre indo para mostrar o modelo mais especializado, e se ele não encontrá-lo, ele vai cair de volta para o menos especializado. Em seguida, em última análise, se ele não tem quaisquer outros templates no tema, vai mostrar o arquivo indexado PHP. Então, quando você está mudando um tema, quando você está personalizando-o, você geralmente só trabalha com estilo CSS, mas às vezes há partes que você quer mudar, e para isso, você vai ter que ter um cliente FTP para abrir acima desses arquivos, edite-os e crie a nova estrutura que você deseja ter em seus arquivos de modelo. 3. O tema de criança em ação: Para começar a personalizar o nosso tema. Precisamos criar uma cópia dela primeiro. Porque indo a partir daqui, o tema padrão 2019 para este que eu já tentei para este lado de negócios não é recomendável alterar todos os arquivos originais de sua instalação tema WordPress. Porque você pode quebrar algo, cometer um erro, ou o tema será atualizado e todas as suas mudanças serão perdidas. Você tem que começar tudo de novo. Existe a possibilidade, é claro, de ir ao personalizador e carregar o logotipo, alterar as cores, criar menus, alterar os widgets, e aqui está um campo CSS adicional, que você pode preencher com seu CSS. Digamos algo muito simples. A cor de fundo vai ser verde, ótimo. Agora você salvá-lo e você tem um site verde, mas 2019 é atualizado e todas essas mudanças se perdem. O que fazer? Há outra possibilidade em que, como administrador no painel, você vá para o editor de Tema de Aparência. Já mostrei isso antes no outro vídeo, então você pode alterar todos esses arquivos de tema e editá-los. Mas é claro que isso pode quebrar o seu tema, você é tema original. A recomendação é sempre criar um tema infantil, e isso é realmente ótimo. É chamado tema filho porque o tema pai ainda está lá, e todos os arquivos, todas as funções, todo o JavaScript, etc ainda está lá. O tema filho pode usá-los, mas se você quiser fazer alterações, basta copiar um dos arquivos, fazer alterações neles e deixá-lo no tema filho. Porque ele vai sobrescrever os arquivos que estão aqui no tema pai. É muito além do nosso escopo para criar um tema infantil, e eu descobri on-line que há um ótimo site que é chamado ChildThemeWP.com e a grande equipe que trabalha lá, e alguns deles trabalham para WordPress.org estão criando os temas filho para os temas WordPress conhecidos. Aqui está o link de download. Você vai encontrá-lo nos arquivos de exercícios para que você possa baixar o tema filho para si mesmo. Eu já baixei, eu só tenho que empurrá-lo para o meu servidor. Está descompactado, então puxei um arquivo para o meu servidor e aqui está ele. O tema filho consiste em funções PHP e estilo CSS e a captura de tela, é claro, para o tema, que eu acredito é em branco, e alguns JavaScript. Tudo isso, a grande equipe do ChildThemeWP.com criou. Não precisamos nos preocupar em criar todos esses arquivos. Como isso funciona com o tema filho? Temos um tema pai aqui e a criança aqui, e como os arquivos se comunicam uns com os outros? Bem, isso não é um problema, Eu vou apenas abrir aqui o WordPress no meu computador apenas para ter uma visão geral dos arquivos e para explicar. Você vê que o tema filho tem muito poucos arquivos sobre as funções e estilo CSS. Por exemplo, se eu quiser mudar o cabeçalho, eu vou apenas copiar o cabeçalho PHP para o meu tema filho e fazer as alterações nesse arquivo. Todo o resto vai voltar, fique o mesmo. Todos os arquivos de modelo serão do tema pai. Tudo o que você deseja alterar no tema filho, basta copiar esse arquivo e fazer suas alterações no tema filho. Claro, você tem que manter também a estrutura das pastas, a fim de manter a ligação entre as diferentes partes do modelo. Na parte da frente, instalar um tema infantil vai ficar assim. Eu vou aqui no painel e temas de aparência e lembre-se, Eu lhe disse que a captura de tela do tema filho está em branco. Teremos que mudar isso em um tempo. Eu só vou ativar este tema e se eu voltar para o nosso lado, ainda é o mesmo. Você vê que funciona, é basicamente uma cópia deste site. Mas se eu quiser alterar um arquivo ou simplesmente copiar para o tema filho e alterá-lo lá em vez de quebrar o tema original pai. 4. Como alterar as fontes: Primeiro de tudo, quero mudar a tipografia. Eu já procurei a fonte antes. Chama-se Source Sans Pro. Eu gostei para este projeto. Vou selecioná-lo aqui e escolher os estilos que eu preciso; o regular, o itálico e o negrito. Quando eu olho aqui, eu vou precisar deste link nos arquivos PHP da minha função porque nós estamos indo para mudar as fontes através de funções PHP como link estilo. Depois de copiar este link para as fontes que escolhemos, eu estou indo para o dealer de arquivos para abrir a pasta filho 2019 e editar o arquivo PHP funções, porque na versão mais recente do WordPress, os estilos estão na fila para o tema. Eles não são colocados em como um link, mas em fila para o arquivo de função. Aqui, você vê que o arquivo pai-css está embutido no tema, e aqui está o arquivo child-css. Se escrevermos algo aqui no child-css, ele vai sobrescrever o pai-css. O mesmo vale para o arquivo JavaScript filho. Se tivermos JavaScript personalizado em nosso tema filho, ele vai sobrescrever o do tema pai. Então aqui eu estou apenas indo para colar o link de fontes do Google e, em seguida copiar este WP na função estilo chave aqui, e nomear minha função filho-googlefonts, fazer uma vírgula e, em seguida, colar esta referência para o CSS desta fonte aqui dentro e colocar um ponto-e-vírgula aqui, e, claro, excluir este link. Eu só vou colocar um pequeno comentário aqui. Adicionar Googlefonts. Para que eu saiba o que mudei no caso de algo não funcionar. Vou guardar isto, e sim, confirmar. Agora, vamos ver se alguma coisa mudou em nosso site. Não, não tem. A razão é porque se usarmos o Inspetor Web do Firefox, vamos ver que este h1 ainda tem a família de fontes faz está no tema pai. Então temos que sobrescrever isso em nosso arquivo child-css. Então vamos fazer isso agora. 5. Como alterar as cores: Se eu vou mudar as cores, eu vou precisar do meu arquivo, meu esboço do site, e eu tenho um pequeno aplicativo que é chamado ColorSlurp. É um aplicativo gratuito que faz sons engraçados quando você escolhe uma cor. Bem, eu desliguei isso porque achei um pouco irritante quando trabalhei com ele. Eu já salvei essa cor de fundo aqui, que é um cinza médio quente. Só vou copiar este código, abrir o meu inspetor e encontrar a etiqueta do corpo. Aqui está. Diz que corpo da cor de fundo é branco. Vou mudar isso. Aqui está. Parece um pouco engraçado e estranho, mas nada mal. Agora eu vou copiar aqui tudo porque inclui também a cor da fonte. Então Copy, abra meu arquivo de estilo CSS no app atom e cole-o aqui. Claro, eu tenho que excluir isso aqui e talvez também, isso tem m cor. Eu poderia colocar branco, mas eu não acho que vai ser correto, eu acho que eu preciso escolher um muito, muito claro em cinza. Vou voltar aqui e usar ColorSlurp, vou escolher este cinza aqui. Este é o ponto mais leve, e vou copiar isto para a cor da minha fonte. Isso vem aqui. Salve e altere a família de fontes também. Neste site neste projeto, eu gosto de ter o mínimo possível de fontes diferentes. Salve e, em seguida, é claro, salvando o preenchimento da fonte também no servidor. Volte, feche isso e vejamos o que aconteceu. Parece legal. Claro que o texto é ilegível aqui, mas estes são blocos e esta é a parte agradável que eu só tenho basicamente mudar a cor do corpo, a cor da fonte. Talvez em algumas outras ocasiões como links, Eu tenho que mudar algumas cores, mas caso contrário todo o resto eu posso apenas editar aqui no bloco. Deixe-nos ver isso. Configurações de cores. Vou colocar a cor do texto branco e o fundo cinza claro, atualizar e verificar. Sim, parece um pouco mais legível, mas não muito agradável. Para tornar o nosso tema um pouco mais agradável e personalizá-lo, é claro que vamos precisar de um monte de ajustes, e se eu fui a todos esses links individualmente, vai demorar um pouco para mudar suas cores e estados de pairar. Eu descobri no GitHub, que o desenvolvedor Ann Pohl colocou a substituição de cor personalizada 2019 lá fora para usar. Eu só vou copiar tudo isso e colocá-lo em nossa folha de estilo. Deixe-me ver se você edita. Eu já comentei aqui, a tipografia. Eu só vou colocar outro comentário para saber onde procurar as coisas. Cores, substitua e cole tudo aqui. Então eu tenho que olhar para o A, para os links. É nisto que estamos a trabalhar neste momento. Guarde isso por um segundo. Esta é a cor dos links. Eu preparei o que eu quero aqui no meu arquivo de texto, copie este, volte ao código e insira-o aqui. Muito provavelmente se eu voltar aqui, é claro que eu tenho que salvar o arquivo também no servidor. Vamos ver no navegador o que aconteceu. Você vê que nada acontece. Bem, este é o truque em trabalhar com temas filhos que você tem que usar a regra importante com bastante frequência para substituir muitas das configurações CSS. Não me sinto bem, parece um pouco hacky e eu realmente não gosto disso, mas é isso. Esse é o trabalho com os temas infantis. Esta é agora a aparência dos links. Claro, quando eu pairo sobre, não está acontecendo muita coisa. Eu tenho que mudar também a tampa do pairar, que eu preparei aqui, e é este. Acho que é um amarelo de milho ou algo assim. Vamos ver, os estados flutuantes. Vou pô-la aqui. Não se esqueça importante, salvar e verificar no navegador o que aconteceu. Aqui vamos nós. Agora, eu queria ter também a animação da fronteira por baixo. Porque aqui você pode ver que há um sublinhado de decoração de texto que na verdade não pode ser animado. Vou adicionar a animação agora no estado de pairar. Para alterar essa transição, vou remover o sublinhado aqui e, em seguida, adicionar a borda que vou fazer a transição, não animar a transição. Eu estou sempre usando para casa, e eu achei melhor porque a transição subjacente a uma decoração de texto está sempre resultando em algum nervosismo. Eu estou voltando para o arquivo CSS, e aqui no estado de foco, eu vou apenas copiar esta cor porque eu quero que a borda tenha a mesma cor, é claro, que o texto. Vou apenas adicionar cor da borda aqui. Salve e, em seguida, vá para a transição isso. Primeiro tenho que dizer, a decoração de texto não é nenhuma. Depois de declarado o botão Borda transição de dois pixels sólido transparente para a cor que eu declarei no estado de foco. Vou colocar a transição ou linear e o mais simples, em seguida, 0.3 segundos. Encontrei 0,3 segundos para preencher a velocidade mais natural. Alguns vão salvar isso aqui e fazer o mesmo no FileZilla e verificar o que aconteceu no navegador. Aparentemente, todos os links agora têm a mesma transição. Bem, a barra de administração não é da minha conta. Vamos ver aqui. Não removemos a decoração subjacente. Primeiro, esqueci de escrever importante. Era esse o caso? Volte para trás. Agora posso fazer a transição. Vamos ver aqui, todos os outros links também. Ótima. Eu também quero mudar a cor deste elemento. É uma fronteira esquerda. Vamos ver qual deles é, seu conteúdo de entrada e blockquote. Eu quero colocar isso da mesma cor que a cor do link, e eu estou indo para o arquivo CSS. Vamos ver aqui é a cor do link, copiando-o, colando-o aqui com a citação de bloqueio, salvando, confirmando. Fazendo check-in no navegador. O que aconteceu? Ele mudou a mesma cor que o link antes do estado de foco. Mas se eu olhar para isso no quadro geral, eu acho essas linhas muito finas considerando a tipografia. Eu quero torná-los um pouco mais chunkier. Eu vou mudar isso aqui atrás, adicionando a largura da borda, e eu vou começar com os nove pixels apenas para exagerar um pouco, e confirmar e atualizar. Parece um pouco mais em harmonia com a topografia, mas talvez um pouco grossa demais. Só para diminuir o tom eu estou colocando oito pixels e fresco, que parece um pouco mais em sincronia. Nós editamos as cores do tema, e agora vamos mover para a área de rodapé porque eu não quero ter esses widgets no meu rodapé. 6. Como alterar o rodapé: Para alterar a aparência do nosso rodapé, primeiro, eu quero mudar a cor de fundo. Eu vou aqui, verificar as ferramentas da web, o que está acontecendo com o rodapé. Lá está, não há declaração de cor de fundo, e é claro que está assumindo a declaração de cor de fundo do corpo. Eu vou fazer um aqui, cor de fundo e verificar com meu Color Slope App porque eu estava jogando com as cores e eu queria ter um menor contraste no rodapé, então a área de conteúdo é um pouco mais visível, apenas sutilmente, mas com uma pequena diferença. Sim, vou voltar para o inspetor, colocar a cor aqui. Sim, é assim que deve parecer. Então eu tenho que lembrar que uma identificação de rodapé é colofão e a classe é site-rodapé, cópia. Indo para a folha de estilo, e em algum lugar aqui em cima, temos cores sobrescrevendo. Vejo que cometi um erro, vou apagar isso e colar a cor de fundo aqui. Faça os suportes assim e footer-id de colofão e a classe de site-rodapé. Agora deixe-me verificar se isso vai funcionar, sem declarar o atributo importante. Refresque, sim, está funcionando. Isso é ótimo e agora podemos trabalhar nos widgets. Toda vez que você vê Meta no WordPress, você pode fazer uma aposta que este é um widget e eu vou verificar aqui com o Inspetor Web. Sim, aqui está o elemento de lado que é declarado como um widget-area. Em alguns temas WordPress, havia uma barra lateral à esquerda ou à direita, que também é widgetized, onde você pode colocar esses pedaços de código, um elementos funcionais muito práticos que vão melhorar o seu tema. Eu vou para o painel porque eu não preciso de todos esses widgets. Aqui na aparência ir para Widgets, e eu vou remover todos estes assim. Dê uma olhada no meu esboço, agora aqui eu tenho quatro listas, listas de texto, e alguns deles têm links. O que eu preciso basicamente, eu não posso encontrar entre esses widgets aqui, eu vou usar o HTML personalizado, que é um widget muito prático onde você pode criar qualquer conteúdo em HTML diretamente para o seu rodapé ou as barras laterais, dependendo de onde seu elemento Aside está. Para o meu rodapé com widget, eu vou colocar no HTML personalizado e widget, Eu não preciso de um título para ele. Só vou declarar um elemento flex pai, vai ser muito original, footer-flex. Em seguida, dentro vai ter quatro elementos div. O primeiro será Copyright, o segundo, Classe, esse será o endereço. O terceiro, basta copiar estes para colocá-los dentro e, em seguida, mudar este contato e línguas porque um dia esta página vai ser em alemão e inglês, vai salvar isso no meio e, em seguida, declarar as listas. Isso não é realmente o que eu queria que ele se parecesse, então depois de muito ajuste, eu tenho jogado com este código e com os widgets ao redor. Eu encontrei uma solução para ter o rodapé olhar como um 1 e um 2, e isso é aqui no código CSS, eu tenho que mudar várias coisas. Por exemplo, aqui para o flex eu tenho que criar espaço entre e eu também tenho que diminuir o tamanho da fonte. Vou colocar um EM 0.7. Além disso, o div footer-flex tem um preenchimento de 12 por cento e tem uma largura. Eu vou colocar aqui 300 pixels, e também muito importante alinhamento auto para auto-início. Isso vai empurrar o texto na própria div para ser alinhado com a linha superior e o rodapé-flex vai ter uma linha itens no centro, o centro vertical do rodapé. Também aqui na UL, eu tenho que declarar a largura dos 200 pixels. Acho que declarei tudo o que esqueci. Vou salvar isso, empurrá-lo no Servidor 2 e, em seguida, atualizar. Ele ainda precisa de um pouco de ajuste, por exemplo, ele não está alinhado com o início do conteúdo aqui à esquerda. Isto é porque este elemento, bem, eu vou apenas inspecionar o elemento aqui. O copyright também tem um preenchimento em ambos os lados, então eu vou remover isso indo para CSS e declarando o footer-flex div, primeiro filho não tem permissão para ter preenchimento. Primeiro filho acolchoado 00, vamos refrescar. Agora isso parece melhor, há um problema, no entanto, que eu estava pensando mais tarde, e que é a capacidade de resposta. Se eu assistir isso no iPhone, no smartphone, eu vou ver apenas duas das listas, então eu sou forçado a criar dois widgets com HTML personalizado. Isso vai mudar aqui, então eu vou apenas criar outro widget, HTML personalizado e copiar essas duas últimas listas, que é, eu acredito contato e idiomas, sim. Eu tenho que fechar o div e depois colar isso aqui, mas eu estou perdendo este div inicial, que é o footer-flex. O editor gosta disso, sem erros, salvar e isso é feito então eu vou atualizar aqui. Quando eu empurro isso para as dimensões do smartphone, você pode ver que eu tenho todas as quatro listas aqui empilhadas uma sobre a outra. Eu só tenho que declarar que pode ser outra classe para este rodapé, e para fazer isso, eu estou indo para CSS novamente. Declarando outra classe footer-flex-1 que eu vou aplicar para o primeiro dos widgets personalizados. Tenho de preparar isto aqui e copiar rodapé-flex-1 para todas as declarações, excepto esta. Este é o primeiro que não vai ter o estofamento e rodapé-flex-1 UL. Acredito ter coberto tudo agora no rodapé flex-1, então eu vou atualizar isso no servidor e verificar o que eu fiz aqui. Sim, eu esqueci de mudar a classe no widget, vamos entrar lá e declarar isso aqui, footer-flex-1, salvar, pronto e voila. Este é o rodapé do jeito que eu queria que parecesse. Eu vou adicionar ícones para os idiomas em algum momento, mas por enquanto, eu quero me livrar desse aviso aqui na parte inferior, e eu só posso fazer isso no modelo. É aqui que vamos ver esse propósito do tema infantil. E o que eu lhe disse que você pode alterar a estrutura do tema copiando arquivos do tema pai para o tema filho e alterando os arquivos lá. Estou indo para FileZilla e abrindo o tema 2019, que eu tenho no meu computador, caso contrário, eu teria que ir até o meu tema pai no servidor enquanto eu gosto de tê-lo aqui no meu computador, então eu posso simplesmente copie meu arquivo de rodapé para o tema filho. Vou editar isso. Aqui está, este é o rodapé ID, classe Colophon site-rodapé. Se eu der uma olhada, este aviso aqui, vai verificar em ferramentas web, eu vou colocar isso de volta no lado direito para que eu possa ter uma visão melhor. Este elemento aqui é o lado que acabamos de personalizar, mas este é o site-info e dentro do site-info este o site-name da classe e, em seguida, a impressão da classe. Eu acho, isso é o que eu tenho que remover, então div classe site-info eo link imprint, class-imprint. Aqui é onde a próxima função começa, eu não vou tocar nessa. Eu só vou apagar aqui, guardá-lo no servidor e dar uma olhada aqui no navegador, perfeito. 7. Dica de bônus: ícones de rodapé: Aqui está uma dica de bônus para aqueles que, como eu, precisam implementar bandeiras de ícones ou ícones de bandeira ao lado desses dois links ou em qualquer outro lugar do código. Eu procurei na internet e encontrei aqui no GitHub, um grande repositório por lipis, que é um desenvolvedor web no aplicativo Wire e Google, e ele criou este pacote que é chamado flag-icon-css. Você pode instalar este pacote com suas ferramentas de gerenciamento de tarefas se você tem um grande projeto e se você trabalha com JavaScript, mas nós vamos implementar isso realmente a pé porque nosso projeto não é tão grande e podemos implementá-lo apenas com uma linha de código HTML. Eu baixei este arquivo, o arquivo zip. É aqui. Eu o descompactei, e lá dentro está o CSS, que eu vou precisar e as bandeiras. Porque eu vou precisar apenas dos retangulares, eu não vou carregar a pasta inteira. Vou criar uma cópia aqui e chamá-la de bandeiras, abrir e carregar um retângulo, ícones de bandeira, SVGs lá em cima. Enquanto isso, vou dar uma olhada no CSS, e aí está. Estes são os ícones, os SVGs, os quadrados e os retangulares. Esta linha aparentemente só considera os ícones quadrados, então eu vou copiar apenas isso. Copie e cole-o no meu arquivo CSS tema filho. Claro que vou comentar isso se eu puder encontrá-lo mais tarde e colá-lo aqui e salvar. Então, eu preciso da bandeira dos EUA, eu vou encontrá-la aqui, e eu não preciso do quadrado, eu preciso do retângulo um. Copie isto. Bem, link SVG e colá-lo no meu CSS. Então eu preciso de uma bandeira alemã, e eu vou encontrá-la aqui, o retângulo um, copiar e colar. Este é o arquivo de estilo CSS, que eu tenho que confirmar que eu mudei. Sim. Agora temos as bandeiras aqui. O CSS está em nosso estilo, e agora precisamos dessa linha HTML de código, que está aqui. A mais baixa, a abaixo é para as bandeiras quadradas. Preciso das bandeiras retangulares. Eu estou indo para fazer widgets, e para o meu segundo widget onde os links para os idiomas são, para as versões de idioma. Vou colar o HTML aqui e mudar a dominação aqui para DE para Alemanha. Cole novamente e mude para os EUA para os EUA, porque os leitores desta página também vão estar nos Estados Unidos da América, salvar, feito. Vamos ver. Refresque. Eles deveriam estar aqui. Você vê como o link está se estendendo, mas eles não estão aparecendo. O que aconteceu? Vou mostrar-te o que me esqueci de fazer. Posso mostrar-te aqui. Vê o URL? É o mesmo aqui. O caminho para o arquivo. Claro, aqui, eu tenho que sair da pasta aqui e ir para a pasta de bandeira aqui o estilo está na raiz, eu só preciso ir para a pasta de bandeira. Excluindo esses dois, salvar, colocar no servidor e atualizar, e voila, aqui estão eles. Eu poderia me preocupar em remover este link sublinhando, mas isso seria um pouco demais sobre o escopo desta dica curta. Espero que você tenha visto como você pode ajustar com o tema filho e alterar a aparência seja através da edição dos arquivos PHP, os arquivos de tema pai que você copia para o tema filho ou através da área do widget, e, claro, no seu estilo CSS arquivos. Este é o nosso site agora, e no próximo temos que lidar com o cabeçalho e o conteúdo. 8. Personalizando seu conteúdo: parte 1: Para personalizar ainda mais a nossa primeira página, vamos dar uma olhada no esboço. Aqui está. Aqui está o cabeçalho, depois o conteúdo e o rodapé que acabamos de personalizar. Lembre-se, nós falamos sobre os arquivos de template, o cabeçalho php, e então todos esses templates para o conteúdo. Nosso post foi mostrado no índice php. Agora estamos usando a página php porque colocamos a configuração de leitura como uma página estática para nossa página inicial e o elemento site com os widgets neste tema é integrado no rodapé php. Agora, como sabemos que estamos usando o modelo php página para a nossa página inicial? Vamos dar uma olhada no navegador. Esta é a nossa instalação do WordPress , o nosso painel e a página que criamos. Estamos olhando para a visualização e aqui no painel há o botão de edição da página. Ele não diz editar post, apenas página. Também podemos verificar aqui na fonte. Se dermos uma olhada na cláusula body, ele diz home, template de página padrão, page e page ID. Agora eu posso ter certeza de que eu estou usando um dos templates php página. Geralmente há vários, mas agora temos apenas um. É uma página php, tenho certeza. Quando você olha para o nosso esboço, você pode identificar que não temos um título aqui. Não se parece com o nosso esboço. Vamos editar isto no editor de Gutenberg. Aqui está o título e eu posso removê-lo assim, atualizar, e dar uma olhada. Ele se foi. Ótimo. O que posso fazer agora é continuar editando esta página sem o título. Para isso, preciso de algumas imagens. O primeiro bloco era uma imagem com algum texto. Eu vou para o painel e eu vou fazer upload das imagens que eu preparei para este site e que está aqui no botão de mídia. Eu só vou dizer adicionar novas imagens, selecionar os arquivos. Vai ser este, todos estes e outro lado aberto. Maravilhoso. Agora você pode esperar aqui, eu estarei de volta quando estes forem enviados. Vai demorar um pouco. Ótimo. Nossas imagens são carregadas agora podemos encontrá-las aqui na biblioteca. Aqui é onde seus arquivos de mídia serão organizados. Mês após mês, você pode vê-los em uma lista ou na grade. Bem, vou voltar para a página. Deixe-me verificar aqui. Editar página e eu estou construindo o primeiro bloco. Vai ser uma combinação de mídia e texto. Vou remover este e este. Todos eles. Basta clicar aqui sobre os pequenos pontos, remover bloco. Estou criando um novo e preciso de mídia e texto. Quero que seja toda a largura na página. Aqui na biblioteca, preciso desta foto. Selecione. Então eu quero mudar a cor de fundo e aqui vai ser o meu parágrafo. Primeiro vai ser um título e vai ser assim. Vou dizer biocomputação, algo assim. Então eu preciso de outro dólar para ser um parágrafo e eu só preciso de um texto falso. Aqui no gerador de texto, copiar, colar e atualizar. Vamos dar uma olhada. Este é o nosso primeiro bloco, uma imagem com um parágrafo e um título, talvez colocar o título sendo maior. Mas agora eu não sei quanto é a distância entre isso e o cabeçalho. Se você se lembra no esboço, eles estão atrás um do outro. Deixe-me tentar testá-lo com o inspetor web. Vou verificar isto. Vai ser um cabeçalho e eu vou dar-lhe uma cor de fundo. Você vê aqui sempre há essa lacuna que deveria ser um lugar para o título. Agora eu posso ir e fazer altura do cabeçalho, colocá-lo oito rem. Mas ainda há essa lacuna. Claro que eu posso fazer alguns hackers e voltar aqui nos lemas da página de edição e dizer, “Eu quero que este bloco tenha uma classe CSS”, nenhum título como esse. Em seguida, chame uma classe CSS na folha de estilo e diga, coloque a margem superior de menos cinco rem ou algo parecido.” Mas eu não quero mudar isso toda vez que havia uma página responsiva ou que havia um cabeçalho diferente. Eu quero ter um novo modelo completo para a primeira página onde eu não tenho que me preocupar se há um título, se eu tiver excluído, e se eu coloquei unidades menos suficientes na margem superior deste primeiro parágrafo. Eu não vou fazer isso. Vou criar um modelo completamente novo. É assim que vamos fazer isso. Para fins de demonstração, estou colocando de volta em um título de biocomputação, isso é o que este site vai ser sobre. Atualizar, ver página. Aqui está. O título que não precisamos. Estou checando as ferramentas da web. Não é o H1, é o cabeçalho, todo o elemento que não precisamos. Ele tem um cabeçalho de entrada de classe. Suponho que já que estamos usando o modelo php página, vamos dar uma olhada. No nosso Cliente FTP , não está aqui no nosso tema infantil. Temos que ir até o tema pai de 2019. Aqui estão todos os nossos modelos. Aqui está a página php, ver em nosso editor e aqui está. Diz: “O modelo para exibir todas as postagens individuais.” Bem, um conteúdo de página é tratado como um único post porque não vai mudar, não vai ser uma lista de posts cronológicos, é apenas este post que é suposto ser um site estático, que não vai mudar. Então é simples, obter cabeçalho, mostre-me o cabeçalho. Então aqui está a área de conteúdo da seção, nosso conteúdo principal do site. Em seguida, o famoso loop WordPress, ele diz, Enquanto tem post, o post. Significa que, se você tem algum post ou enquanto você tem algum post para mostrar, qualquer conteúdo, então me mostre. Aqui não encontramos o nosso título, encontramos esta parte do modelo get. Isso significa obter esta parte que está na pasta, partes do modelo, conteúdo da sub-pasta, na página slug conteúdo do arquivo, e, em seguida, mostrar os comentários. Mas nós não vamos usá-lo em nosso site e esta exibição do conteúdo e obter o rodapé. É isso. Este é um modelo de página simples. 9. Personalizando seu conteúdo: parte 2: O que vamos fazer agora? Estamos recebendo esta parte de modelo de volta em nosso cliente FTP. Aqui estão as partes do modelo de pasta e aqui está o conteúdo. Neste conteúdo diz, isto é para mostrar o trecho. Isto é para o caso em que não temos nenhum conteúdo nesta página. Esta é a página de conteúdo que é interessante para nós para a nossa página php. Este é o conteúdo de um único post, um único artigo que escrevemos, e este é o conteúdo geral. Isto é, por exemplo, se tivermos 20 postagens, vai mostrar 20 postagens. Vamos dar uma olhada nesta página de conteúdo que é tão interessante para nós. Estamos caçando a cabeça e aqui está. Ele diz aqui parte do modelo para exibir o conteúdo da página na página php. Isto significa que a página de conteúdo php é um pequeno módulo da página php. É como uma pequena parte lego desta página inteira que estamos construindo com legos. Aqui está o cabeçalho que não precisamos. Eu não vou excluí-lo aqui porque eu vou arruiná-lo para as outras páginas que querem ter um cabeçalho. Vou copiar isto. Para isso estou criando aqui um novo arquivo e chamando-o de um. Não sou muito imaginativo com isso. Só estou copiando e expandindo. Então eu vou abri-lo e aqui está, vazio. Agora, eu posso apenas selecionar tudo isso calmamente, copiar, e colocá-lo aqui. É basicamente a mesma página de conteúdo, apenas a página de conteúdo 1. Não preciso deste cabeçalho aqui. É por isso que vou removê-lo. Salvar. Nós mudamos este pequeno módulo, fechá-lo e voltar aqui, confirmar que nós o criamos. Agora temos este pequeno módulo que criamos para as páginas que não têm este título, este cabeçalho com o título nele. Agora temos que voltar para esta página php e criar uma cópia dele. Estou arrastando esta página para baixo para o meu computador para salvá-la e para que ela funcione. Estou abrindo no meu editor e criando um arquivo completamente novo, que será nosso novo modelo de página personalizada para as páginas sem título. A única coisa que eu preciso para isso é um comentário que diz nome do modelo. Vou ligar para esta página, sem página de título. Desculpe, erro de digitação como sempre. Feche o comentário e feche os colchetes. Agora, eu vou salvar isso aqui e chamá-lo de página sem título, por enquanto, nós podemos mudar isso depois. Eu também estou salvando aqui e a única coisa que eu tenho que fazer agora é copiar tudo isso da página, copiar, e colocá-lo aqui assim. Agora, porque aqui estão os colchetes de fechamento, eu tenho que excluí-lo aqui e agora eu tenho este modelo. Mas ele vai para a página de conteúdo e eu só preciso do conteúdo da página 1, assim. Eu vou fechar tudo isso e apenas carregar o, desculpe, eu tenho que atualizar aqui. A página sem título, só tem que carregá-lo aqui no meu tema gráfico. Eu só quero verificar mais uma coisa aqui com o modelo, página 1 que é tem um conteúdo. Sim, faz. Agora vamos ver o que aconteceu no navegador. Opa. Esta é a nossa página. Vamos refrescar. Agora você pode ver aqui nos atributos de página que temos um modelo para escolher. O segundo é aquele que criamos. Chama-se “Sem Página de Título”. Se eu atualizar aqui e ver a página, uau, eu tenho agora sem o título. Isso é maravilhoso. É assim que você cria um modelo de página personalizado e faz o upload para o tema do gráfico. Você só tem que cuidar das partes do modelo que você precisa mudar se eles estão em seu código do arquivo php da página padrão. Agora vamos construir alguns blocos. Vou clicar aqui na página de edição e não me importo com este título do anúncio. É só ali. Não posso removê-lo por enquanto. Suponho que o painel e o editor têm suas folhas de estilo CSS separadas e eu não vou ser incomodado com isso agora. Eu só preciso de um novo bloco que vai ser cabeçalho, produtos, e então ele vai ser centrado e atualizações. Então preciso de um novo bloco com três colunas. Eu criei o bloco de colunas e eu vou ter que selecioná-lo aqui e aumentar o número de colunas para três. Eu também quero que ele seja a largura total sobre a página. Preparei um texto aqui, só vou copiá-lo. Copie e cole e depois preciso de uma imagem. Aqui, não, aqui. É um pouco difícil selecionar blocos neste editor Gutenberg. Espero que eles venham com alguma otimização. Mas por enquanto, eu só coloquei uma imagem aqui e você vê que inseriu a imagem acima do parágrafo e eu preciso dela abaixo. Eu clico nesta seta. Vou escolher um da biblioteca de mídia. Eles não são bonitos, mas eles estão apenas indo bem para os fins de demonstração, adicionar a legenda, copiar e colar. Você pode ver aqui que eu posso vincular uma imagem a um arquivo de mídia, outro arquivo de mídia e uma página de anexo e uma URL personalizada. Claro, eu sempre posso adicionar uma classe CSS extra, mas eu vou apenas deixar isso assim e em seguida, continuar a fazer para o próximo bloco também. Vejo-te quando terminarmos este quarteirão. 10. Personalizando seu conteúdo: parte 3: Então este é o nosso produto, três colunas bloco. Como você pode ver eu mal consigo ler esta legenda, então eu vou mudar isso. Eu estou indo aqui para editar a página, e selecionando esta imagem assim, e adicionando uma classe CSS avançada aqui, vamos dizer imagem do produto, atualização. Só para verificar aqui, este elemento deve ser sim, legenda figo como de costume. Estou indo para o meu arquivo CSS e, em seguida, adicionando esta imagem de produto de classe, e, em seguida, legenda de figo , é claro, e dizer cor branca , salvar, atualizar no servidor e, verificar no navegador. Veja, eu só mudei essa imagem em particular. Então eu tenho que subir um nível, e este é o quarteirão inteiro. Indo aqui e atribuindo a este bloco uma classe CSS extra, eu vou chamá-lo de bloco de produto, atualização. Vá para o meu estilo CSS e, em seguida, diga bloco de produto. Salve, atualize e faça check-in no navegador. Sim, agora todas as três legendas estão visíveis em branco. Não gosto deste título. É um pouco demais à esquerda, então eu tenho que verificar este bloco se eu puder colocar uma margem extra à esquerda. Então, estamos selecionando este. Estou adicionando aqui uma classe de produto, bloco, título. Um tem que ser bem específico sobre esta atualização. Vá para as minhas folhas de estilo e, em seguida, para a direita, título de bloco de produtos. Vamos dizer margin-esquerda, vai ser cinco rem, salvar e atualizar, e verificar no navegador. Nada aconteceu porque eu provavelmente esqueci de colocar aqui a regra importante. Deve haver alguma outra decisão que está anulando este estilo CSS editor, então atualize. Aqui vamos nós. Está no meio. Eu poderia fazer também o estilo CSS de remover esta linha aqui. Provavelmente é antes do elemento. É este aqui. Só vou copiar o estilo e dizer “copiar”. Diga aqui, não mostre nenhum. Talvez seja melhor colocar. Não, eu não quero essas linhas em nenhum lugar do meu site. Então sim e atualização, se foi. Você vê que é muito bom como você pode simplesmente adicionar uma classe extra em um elemento de um bloco ou o próprio bloco. Em seguida, basta ir para a folha de estilo e estilo esta classe. É isso. 11. Personalizando seu conteúdo: parte 4: O bloco a seguir é bastante simples. Só precisamos de duas colunas, uma com o texto, outra com o botão. Aqui, eu vou adicionar novo, e duas colunas. Deixe-me ver se são dois. Sim, eles são. Eu quero que ele seja de largura total, e aqui eu vou colocar um título, H3. Vai dizer: “Quero saber mais sobre a nossa empresa.” Aqui eu preciso de um botão e no texto eu vou colocar Saiba mais. Eu quero que a cor de fundo seja mais turquesa e brilhante, então atualize. Eles não gostam dessa combinação, eles acham que o contraste é muito velho para ler, mas eu vou deixá-lo por enquanto. Aqui eu quero colocar o link para a nossa página Sobre. Eu criei uma página fictícia sobre nós apenas para ter um lugar titular, ver que não há nada nele. Mas eu preciso deste URL aqui, copiar, voltar para a primeira página, editar. Onde está o botão? Aqui, vai colocar o link URL, então atualize. Eu quero que este bloco tenha uma cor de fundo cinza claro, e eu posso fazer isso aqui. Eu tenho que colocar uma classe CSS avançada, eu vou colocar mais bloco, atualizar, cabeça para a minha folha de estilo. Na folha de estilo, eu vou adicionar a classe mais bloco, e dizer cor de fundo, cinza claro, salvar e atualizar, e verificar na página de exibição do navegador. O que aconteceu? É cinza claro, mas não consigo ler nada e o botão está lá em cima. Então volte para esta folha de estilo e diga que mais bloco também tem que ter uma cor de cinza, atualizar isso e verificar, sim. Mas eu também queria ter um estofamento top, top e bottom, mas top. Rubrica 2.2, correr. Vamos ver como isso se parece. Sim, movendo-se muito rápido, atualize. Sim, parece um pouco melhor, mas talvez um pouco menos de estofamento, e eu quero que este botão fique mais à direita. Preciso desta aula aqui. Eu acho que vai ser, sim, botão WP bloco. Eu vou apenas dizer editar como HTML, e copiar este botão WP bloco, copiar, voltar para a folha de estilo e, em seguida, dizer estofamento top vai ser 2.1, e preenchimento inferior vai ser 1rem. Então eu preciso dessa classe de botão de bloco WP. Tem que ter uma margem esquerda, digamos 4rem. Vamos ver como isso parece agora. Refresque, isso parece um pouco mais aceitável. Mas você sabe, há um monte de trabalho detalhado para fazer, teria um estado e todas essas coisas mais agradáveis como eu quero ter mais de uma ênfase neste bloco, etc Próximo bloco é apenas uma cópia deste. Tem um texto à esquerda e uma imagem à direita. Vamos fazer exatamente isso. Aqui está o nosso primeiro quarteirão. Vou selecioná-lo aqui, e neste menu, vou selecionar Duplicar. É isso. Eu tenho que mudar a mídia para mostrar à direita, e eu também tenho que mudar esta imagem aqui, selecionar, muito fácil, e então eu quero empurrá-lo todo o caminho abaixo deste bloco mais. Eu esqueci aqui, Eu queria empilhar acima um do outro no celular, que as pessoas possam ler a página de visualização. Como já imaginei, temos este novo quarteirão, mas este quarteirão aqui é este. Esta div tem uma margem. Além disso, esta div tem uma margem, esta tem um fundo e esta tem um topo. Agora, o acima é o bloco mais, já o temos em nossa folha de estilo. Eu só vou dizer aqui mais bloco, eu preciso que a margem inferior seja zero, e apenas para o caso de eu colocar importante. Não quero que nada mexa com isso. Agora eu tenho que voltar, primeiro eu vou salvar isso, sim, e tenho que voltar. Você vai ver se eu atualizar, ele ainda está lá. Mas posso mostrar-lhe aqui no elemento inspetor. Esta div não tem mais uma margem inferior, mas esta tem uma margem superior. O que vamos fazer? Nós apenas adicionamos uma classe a esta última linha que acabamos de fazer, então eu seleciono aqui e digo que vai ser, atualizar. Na Folha de Estilo, coloque a anêmona para trabalhar, e diga que a margem superior vai ser zero e vai ser importante. Vamos verificar. Sim, FileZilla nós não esquecemos, ver página, sim. É assim que deve parecer, ótimo. Nós só temos que ajustar um pouco entre criar blocos, criar classes CSS extras para eles e trabalhar neles em sua folha de estilos, e não se esqueça da regra importante. Agora, o último bloco será o Contato e o Google Maps. 12. Personalizando seu conteúdo: parte 5: Para criar nossa última linha de conteúdo na primeira página, precisamos de um Formulário de Contato e do Google Maps. Estamos fazendo uma pequena excursão aqui, estamos adicionando um plugin chamado Formulário de Contato 7. Um plugin muito popular porque é integrado com tantos outros serviços. Você pode ter uma recaptura. Você pode usá-lo com PayPal e Stripe. Plugin muito, muito versátil. Então eu vou ativá-lo. Aqui indo para as Configurações, Eu tenho formulário de contato 1, Eu posso deixar este nome aqui porque eu vou ter apenas um formulário de contato por enquanto. Estou copiando o código curto aqui e construindo na minha primeira página na coluna da esquerda. Então eu estou adicionando aqui um novo bloco, duas colunas, e eu vou apenas digitar o código curto aqui dentro da coluna esquerda e, em seguida, verificar porque eu quero que ele seja de página inteira, claro, largura total, desculpe, e Atualizar. Se eu der uma olhada aqui, aqui está nossa forma, ótimo. É só um pouco, você sabe, os campos são muito grandes e esses rótulos geralmente você tem que deixá-los acima. É muito útil para a acessibilidade para as pessoas que usam o teclado para navegar no site, apenas para deixar este rótulo acima. Mas para este site, eu acho que vai ficar tudo bem se eu apenas colocá-lo dentro como um texto de espaço reservado. Para fazer isso, vou ao painel novamente aqui em Contato, Formulários de Contato e Editar. Eu quero que este texto esteja aqui nesta área como um titular de lugar, eu posso excluir este, em seguida, usar Texto como o formulário de campo. Vai ser chamado, seu nome. O seu nome. Valor padrão, os textos que eu copiei de cima. Use este texto como o detentor do local do campo. Vou adicionar um atributo ID porque mais tarde, se eu criar outro formulário de contato neste site, eu gostaria de ter a possibilidade de chamar apenas este campo específico. Vai ser, seu nome, “Inserir Etiqueta”. Aqui está, posso apagar este. Para o e-mail, é praticamente a mesma coisa. Copiar, eu posso excluir isso e colocar E-mail. Campo obrigatório, será o seu e-mail. Valor padrão, o que eu copiei de cima. Use este texto como espaço reservado. ID, seu e-mail, “Inserir etiqueta”. Posso apagar este. O formulário diz que tem algum tipo de conflito. Não sei, está tudo bem. Assim, Salvar forma, estamos de volta. Assunto, assim. Sim, eu tenho que fazer está aqui também. Texto, e não será um campo obrigatório. Só vai ser assunto. Valor padrão, assunto. Use este texto. Assunto, “Inserir tag” e excluir aqui. Então a última é a sua mensagem. Eu só vou apagar aqui. Área de texto, exatamente. Vou deixá-la aqui. Valor padrão, sua mensagem. Use isto. Não vou usar um atributo de ID de texto. Então este é o nosso novo formulário Salvar, e dar uma olhada na página. Deixe-me ver. Parece diferente agora e eu só tenho que estilizá-lo aqui. Para estilizar este campo, eu vou apenas abrir minhas ferramentas web aqui e verificar. Este é o meu formulário, classe formulário, wcpf7-form, muito bom. Cada um dos elementos está aqui em um parágrafo, o rótulo e a classe span, e dentro da classe span é o elemento de entrada que eu quero estilo. Então eu estou indo aqui, eu só vou empurrar isso para que seja mais fácil de ler. Texto do tipo de entrada e et cetera. Quero que o fundo seja cinza, então vou escrever aaa. Eu não quero nenhuma fronteira aqui, nenhuma. É isso. Vou copiar este primeiro texto [inaudível]. Certifique-se de selecionar tudo. Volte para a folha de estilo, insira isso e, em seguida, copie esta classe do formulário. Edite HTML, e a classe está aqui. Estou copiando isso, colocando-o na minha folha de estilo como uma classe, e é claro que é um erro de digitação assim. Eu vou salvá-lo aqui e depois voltar porque eu também quero mudar esta cor aqui. Também vai ser cinza. Vou puxar um pouco para cima assim, talvez um pouco mais para cima. Sim. Então eu queria que fosse Source Sans Pro e Sans-serif, e a linha de altura cinco. Tenho que copiar tudo isso. Bem, não tudo, mas, sim, estou tentando aqui. Copie e edite aqui e adicione a classe. Ok, guarde isso. Confirme. Volte para o navegador. Além disso, eu quero alterar o tamanho da fonte. Vai ser 8.8rem. Vou copiar isto aqui. Copie e cole aqui, wpcf7-form como a classe. Claro, eu tenho que colocá-lo na frente de cada um desses elementos. Não deixes que ninguém te diga o contrário. O que é claro, é mais fácil fazer isso no SAS, mas estamos fazendo as coisas manualmente aqui. Sim, eu não tenho que escrever isso aqui novamente, eu vou apenas adicionar font-size, rem e tudo o que não aparecer, provavelmente vai ser uma regra importante. Vamos ver o que fizemos até agora. Refresque. Basicamente parece que eu queria que parecesse. Certo, talvez não o botão, mas você entendeu. Você só precisa abrir suas Ferramentas da Web, escolher os Elementos, ver suas classes e, em seguida, editá-las em sua folha de estilos. Vamos para o Google Maps, nossa segunda coluna. Para incorporar o Google Map aqui em nosso site, basta ir ao Google Maps, inserir o endereço da empresa que queremos mostrar, e então talvez clicar neste marcador e depois Compartilhar. Deixe-me ver se isto vai funcionar, às vezes não funciona e não sei porquê. Não podemos incorporar mapa, não funcionou agora. Vou atualizar isso assim, e depois clicar em “Compartilhar”, incorporar um mapa, e agora funcionou. Então aqui eu posso até escolher, eu vou copiar isso, “Copiar HTML” e então escolher até mesmo o tamanho. Eu vou colocar o tamanho que eu vi que eu preciso. É 650 largura e 595 altura, e depois “Copiar HTML” novamente com as dimensões. Vá para Nossa página, Editar página e edite a coluna. Então aqui eu clico neste botão Adicionar bloco e tenho uma coluna selecionada e eu imediatamente quero adicionar uma classe CSS adicional, eu vou chamá-lo Google map, só para ter a possibilidade de estilizar este mapa. Vou atualizar aqui. Então aqui, vou escolher o bloco HTML personalizado. Assim, insira o código na página do Google Maps e depois Atualizar. Ver página, e este é o nosso mapa. Podemos estilizá-lo novamente com nossa classe CSS extra, mas basicamente agora adicionamos Google Maps com o endereço do negócio. Foi isso com a personalização de conteúdo, estamos passando para o cabeçalho. 13. Personalizando o menu de logotipo de cabeçalho: Para personalizar o nosso cabeçalho, é claro que precisamos de um logotipo aqui. Eu preparei uma pequena demonstração aqui do logotipo padrão para este tema. Vou personalizar uma identidade do site e aqui vou selecionar um logotipo da biblioteca de mídia. Fiz upload de uma imagem onde eles são encontrados como um modelo na Internet, e eu vou selecioná-la. Ele diz aqui, “Cortar imagem”, publicar, fechar o personalizador, e este é o logotipo inteiro para o tema 2019. Como eu entendi, o tema tem ênfase no texto e na escrita, então, é ótimo para jornalistas, blogueiros e autores, mas para o meu site e para fins de branding, eu realmente preciso de um logotipo maior. Vou voltar para o personalizador para remover este, remover o logotipo, publicar novamente e, em seguida, estou indo para a biblioteca de mídia para adicionar novo arquivo, meu logotipo SVG. Eu gosto de SVG, é arquivo vetorizado e não perde qualidade durante a escala, mas o WordPress não gosta daqui. Ele diz, não é permitido por razões de segurança, que é ótimo porque alguém está cuidando de segurança de arquivos no WordPress, mas então isso significa que eu vou ter que usar em um plugin, e eu encontrei um que é chamado de suporte SVG. Aqui está. Vou instalá-lo e ativar. Indo para as configurações, se eu der uma olhada, não vou mudar nada. Diz: “Restringir aos administradores”, o que é bom, só que eu tenho permissão para lidar com SVGs e enviá-los, então, é isso. Vou voltar para a biblioteca de mídia, e adicionar novamente meu logotipo SVG, aberto, e aqui está, funcionou. Isto é bom. Voltando para o personalizador, identidade do site, selecione “Logotipo”, aqui está ele, selecione, e ele diz, “Cortar imagem ”, mas ele diz, “Houve um erro. Ainda não gostamos disso.” Bem, eu procurei a razão para isso e descobri que no tema pai 2019, no arquivo PHP funções, há uma função considerando este logotipo personalizado, eu vou encontrá-lo aqui, logotipo personalizado. Ele diz, “A altura é 190 pixels, a largura é 190 pixels”, então, é um quadrado, e então há largura Flex definida como falsa, não há largura flexível, e não há altura flexível, então, eu tenho que Mude isso. Eu olhei através dos fóruns da organização WordPress e encontrei nos codecs, há este código aqui que eu vou copiar, e eu coloquei como uma resposta para muitas perguntas de personalização do logotipo 2019, então, eu estou indo para minhas funções PHP no tema filho aqui, e eu vou adicionar este código e adaptá-lo ao meu tema. Então aqui sob esta função de tema filho WP enqueue, que termina aqui com esses colchetes, eu vou colar essa função e, em seguida, mudar o nome, eu vou chamá-lo de L-yaks logotipo personalizado, e ele vai ser 100 pixels de altura e 400 pixels de largura. A largura flexível é definida como true e eu quero também a altura flexível para ser definida como true. Assim, e é isso. Acho que vou apagar isto. Oh, eu tenho que mudar isso aqui, é claro. É a minha função de logotipo personalizado L-yaks. Prefixo, sim, acho que é isso. Eu vou salvar isso e enviá-lo para o servidor, e dar uma olhada aqui. Novamente, personalize, identidades do site, selecione “Logotipo” , “arquivo SVG”, e eu vou pular o corte. É isso, publique, feche, e aqui estamos nós. Temos este pequeno logotipo aqui que não é de todo o que precisamos. Também temos o título do site que eu não quero que apareça aqui. Mas agora você sabe como vamos mudar isso. Vamos para o arquivo CSS estilo e adaptar o cabeçalho às nossas necessidades. Nós só precisávamos criar a possibilidade de um tamanho flexível do logotipo em nossas funções PHP. Então vejo você em um pouco em nosso estilo CSS. Simplesmente rápido antes de mergulharmos em nossa folha de estilo, há um elemento estrutural essencial que está faltando. o nosso menu aqui. Vou aqui para os menus e dar um nome ao meu menu. Vou chamá-lo de menu superior. Vai estar no topo de uma página, criar menu. Vai ser um menu primário. Salve isso. Então eu vou adicionar todas essas páginas que eu criei como titulares de lugar para o menu aqui, e então basta arrastar e soltá-los na ordem em que eu quero que eles estejam nos menus. Isso está vindo aqui, assim, e salvar menu, dê uma olhada, está aqui. Está assumindo o estilo dos links, mas queremos que ele esteja aqui do lado direito e tenha tipografia menor. Então eu vou abrir minhas ferramentas web e dar uma olhada. Esta é a navegação do site do ID de navegação. Vou editar como HTML copiar isso, colocá-lo na minha folha de estilo. Eu tenho que criar um novo capítulo aqui chamado cabeçalhos estilo e colar este ID, e dizer, eu quero que você flutuar direito e eu também quero que você tenha um tamanho de fonte de 0,7 RM, salvar. Claro, no servidor também retornar ao navegador. Verificando isso e algo aconteceu aqui. Temos a tipografia certa, mas não queremos este menu minimizado aqui. Isto é para o site móvel e em um minuto, vou explicar o que aconteceu. Então, em seguida, eu quero remover o título do site aqui e copiar este título do site de classe, indo para a minha folha de estilo, adicionando-o aqui e dizendo erro de digitação do site de classe. Não exiba nenhum. Guarde e verifique. Ele se foi e agora temos nosso pequeno logotipo redondo minúsculo que não está absolutamente fazendo o seu trabalho para o nosso site. Deixe-me ver se é o logotipo do site aqui. Sim, este é o posicionamento da div. Dentro da div está o link que tem a caixa de transição de raio de borda sombra tudo isso, eu vou apenas copiá-lo, colocá-lo na minha folha de estilo, e dizer, eu quero que o raio da borda seja zero. Ok, isso é bom. Eu não quero nenhuma caixa de sombras e assim exibe bloco e largura e altura. Acho que não há 50 pixels vai ficar bem. Transição, por favor, nenhuma. Salve e verifique o que fizemos. Aqui. É pequenininho e, claro, o estado flutuante, eu tenho que mudar esse também. Aqui no inspetor, eu vou dar uma olhada no estado de pairar aqui e ele diz que o logotipo do site tem uma caixa de sombra preta. Ele também tem uma borda, a borda amarela que temos em todos os links em nossa página. Então eu tenho que mudá-lo na minha folha de estilo aqui. Eu vou dizer para colar isso aqui e dizer caixa sombra nenhuma, transição nenhuma e cor da borda tem que ser transparente. Mas esta é uma regra importante porque é uma regra geral para todos os links. Isso tem que ser mais específico. Salvar no servidor e verificar o navegador e o estado de foco, agora desapareceu. Isto é bom. Só agora temos de lidar com o tamanho deste logótipo. Se eu colocar aqui, basta verificar que isso é 50 pixels. Se eu colocar 400. Em seguida, o logotipo se foi e isso ocorre porque a posição deste logotipo do site div é caminho de volta para a direita. Então eu tenho que dizer auto e sim, a altura também tem que ser alterada. Vai ser 100 pixels. Sim, e a posição tem que mudar de curso também. Eu não vou fazer isso. Isto é muito grande. Então eu estou indo para as folhas de estilo e dizendo a folha de estilo, eu preciso talvez 80 por cento dessa largura, altura. Então, e se eu der uma olhada, o logotipo se foi, então eu tenho que mudar a posição do logotipo do site, e então também o que é importante aqui é que o negócio é uma consulta de mídia para telas grandes que são tudo o que está acima 768 pixels. Eu tenho que cuidar disso também e aqui, eu vou copiar isso. Eu vou dizer auto direito e importante, mas também eu tenho que adicionar a consulta de mídia e min-width é 768 pixels. Sim, então, e eu preciso de alguns suportes aqui e aqui salvar e verificar e aqui está o nosso logotipo. Agora, nós só precisamos posicionar isso na posição certa com preenchimento e margem e eu também tenho que mudar a cor deste cabeçalho, que este é o cabeçalho, ID masthead. Só vou copiar isto. Coloque-o na folha de estilo. É um ID e eu acho que a cor de fundo, Eu escrevi aqui em baixo em nota. A cor de fundo é 353942. Eu coloquei isso um pouco mais adiante. Então, para o cabeçalho, eu aumentei a altura aqui, não só mudei a cor e para a navegação, que é apenas um botão. Agora, eu também mudei o topo da margem, por isso é mais iluminado com o logotipo. E não há limites para o estilo CSS em sua folha de estilos. Eu só queria mostrar qual função no arquivo de funções é responsável por exibir o tamanho deste logotipo, e então nós mudamos um pouco o CSS para remover o raio, removemos as bordas, e a posição para que possamos mostrar todo o logotipo. Aqui agora vamos ver o que aconteceu com a navegação. Eu também comecei um pouco para a versão móvel. Mas o que eu queria te mostrar é na verdade um pequeno truque. Eu estava ficando louco sobre esta exibição do botão na versão desktop em telas grandes e eu passei por toda a palavra arquivos intocados. O que eu encontrei é realmente o aqui em 2019 em arquivos JavaScript, há um arquivo chamado menu de prioridade JS. Quando eu dei uma olhada dentro para ver qual função está realmente jogando com este menu de navegação, descobri que há um erro de digitação e ele diz navivation em vez de navegação. Agora, eu não sei se este era um nome proposital. Acabei de verificar, aplaudiu a versão corrigida e agora você vê se eu atualizar nosso menu de navegação principal está aqui. Então foi basicamente isso que nós terminamos a haste, a primeira criação ou personalização do 2019 para torná-lo parecido com o tema que devemos trabalhar e agora, claro, os pequenos detalhes vão acontecer fazendo o imagens topográficas agradáveis, etc. Não há limites para isso. Eu só queria mostrar como trabalhar com os arquivos de funções, com os arquivos de modelo, com o CSS para criar o tema que você gostaria de ter para o seu site. 14. Conclusão: Agora vimos como os arquivos de template, as funções PHP, a folha de estilo CSS, os widgets e os plugins podem trabalhar juntos para personalizar o 2019, ou os outros temas, e como adaptá-lo ao nosso próprio design. Espero que você tenha encontrado algumas dicas valiosas para suas próprias personalizações, e eu realmente estou ansioso para ver o seu site WordPress e o que você fez para personalizá-lo. Personalização feliz.