Como criar um tema personalizado no WordPress do zero | Introdução ao desenvolvimento no WordPress

1. Introdução ao curso: Olá a todos. Meu nome é Kyle e sou um desenvolvedor web de Ohio. Eu sou um desenvolvedor web em tempo integral há cerca de cinco anos. E hoje eu vou estar ensinando você como começar a construir seu próprio tema WordPress personalizado a partir do zero. Vamos tocar em todos os elementos de um site WordPress a partir da configuração inicial locais, que eu vou estar usando lâmpada no Mac. E resolver os arquivos principais utilizando um modelo inicial, integrando estruturas HTML e CSS como Bootstrap, bem como alguns plug-ins centrais para usar durante todo o processo. Este curso será voltado para iniciantes absolutos, mas espero que todos nesta aula possam aprender algo ao longo do caminho. Obrigado novamente por fazer o curso e espero que você esteja tão animado quanto eu estou para começar. 2. Configuração de ambiente local - MAMP: Ok, então o primeiro passo para obter a configuração do nosso ambiente WordPress local é realmente instalar um software chamado mapa. Então eu vou usar a versão MAMP Pro. Há uma versão gratuita do homem em seu site, que será completamente bom para o que temos que fazer aqui. Então MAP é muito legal. Isso torna muito, muito fácil de realmente baixado, instalar e configurar sites WordPress em sua máquina local. Ele cuida de toda a configuração do servidor com Apache, MySQL e coisas assim. É realmente apenas um download de um clique em uma estrela de um clique e então você tem seu site funcionando basicamente. Então vá em frente e vá para MAMP dot info e, e baixe a versão gratuita ou se você quiser ir em frente e comprar a versão pro, sinta-se livre. Existem algumas configurações que você pode personalizar com a versão pro que você não pode com a versão gratuita. Acredito que a versão gratuita só permite que você tenha uma configuração de site. Pode estar errado com isso. Eu conheço a versão pro, você pode ter várias configurações, bem como um monte de outras coisas, mas tudo bem, então aqui estou eu realmente baixando a versão gratuita do MAMP, dando a vocês um exemplo do que isso parece. Então você pode utilizar isso ao longo do curso. Então vá em frente e clique em Free Download uma vez que vocês estão aqui. E isso vai levá-lo a esta página e basta ir em frente e baixar a versão adequada para o seu computador. E a instalação em si é realmente bastante simples. Eu vou apenas ir em frente e pausar a gravação e voltar quando menos configurar. Tudo bem, então meu download está pronto e eu vou em frente e abrir isso. É andar por ele muito rápido. E assim que isto estiver feito, eu voltarei. Tudo bem, então meu download e instalação foi bem sucedido. Então agora eu abri o MAMP e esta é a tela que vocês vão ver. Então, como eu disse, vá em frente e deixe tudo igual. Vá em frente e clique em Iniciar. Certo, e esta é a tela que vocês receberão isso. E como um servidor começa. E isso, parece muito parecido com as ferramentas de painel de versões Pro aqui em cima tem PHP, meu administrador. Isso será importante mais tarde no curso. Digamos que localhost dois-pontos 8888, barra para frente, barra para frente. interrogação, língua é igual a Inglês. Você pode, você pode ou não ter isso. Se vocês vão em frente e realmente excluir tudo depois do 8888 e, em seguida, clique em Enter. Você será apresentado com esta tela. E isso significa que são instalados foi bem sucedido. Se você pode ver esta página mapa foi configurado corretamente e iniciar e está pronto para ir. Você pode ver algumas informações gerais aqui, raiz do documento. Este documento HT é onde vamos armazenar nossos arquivos do site, versão PHP, e então há um arquivo lá atualmente que é index.php. Tão grande, esta foi a versão gratuita, muito semelhante à configuração da versão pro. Espero que tenham achado isto útil. 3. Download e instalação: Ok, então nesta seção, estaremos configurando o ambiente WordPress real dentro da senhora. Então, o que eu realmente vou estar fazendo desde que eu tenho vários sites já configurados e eu já trabalhei no passado. Na verdade, vou criar um novo host dentro do MAMP Pro. Se você estiver usando a versão gratuita, sinta-se livre para pular em frente cerca de 30, 45 segundos. Se você estiver usando a versão pro, fique por perto. É um processo muito simples. Então você só quer ir até o sinal de mais aqui. Eu sempre deixo vazio. Continuar. Eu só vou nomear este curso web e, em seguida, documento raiz. Eu vou escolher e mantê-lo dentro da minha própria pasta. Vou realmente selecionar a pasta de cursos web aqui, abrir. E então eu vou deixar isso desmarcado e então criar o host. E é basicamente isso. Então tudo o que você tem que fazer a partir daqui, se você estiver usando a versão pro é ter certeza de que você tem seu host selecionado aqui. Dê um segundo para gerar o que ele precisa gerar no backend. Quando estiver pronto, este botão Abrir aqui deve aparecer. Para aqueles que usam a versão gratuita. Você pode ir em frente e apenas iniciar o servidor e que irá abrir o URL do host local dentro do seu navegador. E podemos ir de lá. Ok, então o meu está pronto para ir, então eu vou apenas ir em frente e clicar em Abrir. Como eu disse, a versão gratuita será aberta automaticamente quando o servidor for iniciado. Então eu vou clicar em Abrir. E isso mostrará uma página muito semelhante ao que mostrei na última seção. Então isso é apenas dizendo que a raiz do documento é definida para a pasta que eu criei a versão PHP e assim por diante. Então, o próximo passo aqui é realmente ir para obter os arquivos WordPress. Para fazer isso, você quer ir para wordpress.org. Uma vez que essa página é carregada, há um botão azul no canto superior direito que diz Obter WordPress. Vá em frente e clique nisso. E então isso o levará a esta página aqui. Então, neste primeiro parágrafo, há um link que diz baixar e instalar. Vá em frente e clique nisso. E ele vai deixá-lo mais para baixo para a página. E então você pode clicar em Baixar WordPress 5.8. Na hora de assistir este vídeo, essa versão, pode ser diferente, mas vá em frente e basta clicar nele e instalar. E espere que isso seja baixado. Vou fazer uma pausa e volto quando estiver pronto. Certo, meu download estava pronto. Então o que isso faz é realmente baixar o arquivo zip que contém todos os arquivos principais do WordPress. Vá em frente e abra esse arquivo zip. E, em seguida, dentro dessa pasta você verá todos esses arquivos aqui, index.php ponto licenciado TXT. Leia-me qualquer coisa que comece com WP traço é um arquivo núcleo WordPress. Então, esses são o que realmente constrói o backend do WordPress. Então o que você quer fazer é realmente ter esta pasta puxada para cima e, em seguida, a pasta de documentos HT. O que você vai fazer é simplesmente excluir o que está dentro dessa pasta, deve ser apenas um arquivo index.php. Vá em frente e apague isso. E então, a partir daí, você pode realmente arrastar sobre todos os arquivos WordPress a partir desse download. Eles vão fazer isso. Dragão em cima. E depois limpei pelo nome. E então é basicamente isso. Então vá em frente e feche essas duas janelas do localizador. Feche este pop-up. E então agora se você voltar para o seu navegador e atualizar, você deve obter uma página WordPress. Basicamente como uma página de configuração, sendo meio que passar por isso. Então, uma vez que vocês estão prontos e vão em frente e selecionar o seu idioma, eu vou selecionar Inglês, Continuar. E então aqui diz, Bem-vindo ao WordPress. Antes de começar, precisamos de algumas informações sobre o banco de dados. Você precisará saber os seguintes itens antes de prosseguir. Nome do banco de dados, um nome de usuário , sua senha, o host do banco e o prefixo da tabela. Então este é o lugar onde nós realmente vamos entrar no PHP, meu administrador, e realmente criar o banco de dados. Então, para fazer isso, vamos saltar de volta para MAMP e você vai clicar neste botão Web Start. E então, uma vez que isso tenha sido carregado, vamos para o PHP drop-down Ferramentas, meu administrador. Ótima. Então agora dentro do PHP meu admin, o que precisamos fazer é realmente criar o banco de dados. Então, na barra lateral esquerda aqui, vá em frente e clique em Novo. Dê um nome a ele. Só vou dar um nome ao meu curso web. Sinta-se livre para dar o nome que quiser. Você pode deixar isso sozinho e ir em frente e clicar em Criar. Então o que isso fez foi criar um novo banco de dados chamado curso web. E não tem mesas agora. Na verdade, vai criar quaisquer tabelas. Vamos deixar a instalação do WordPress realmente fazer tudo isso para nós. Mas o que precisamos fazer é configurar um usuário para este banco de dados. Então, no topo deste bar aqui, vá em frente e clique em privilégios. Adicionar usuário. E aqui eu vou nomear meu um usuário da web. Deixe a senha do host sozinha. Eu só vou fazer o teste 123 e depois redigitá-lo. Teste 1, 2, 3. Quando você está realmente fazendo isso para um site de produção, eventualmente, ou você quer usar algo mais seguro agora, definitivamente encontrar, provavelmente deve sempre usar algo mais seguro. Este é um site local, então a segurança não é um grande problema. Mas se você colocar isso em um site beta, em um servidor Beta em algum lugar ou simplesmente movê-lo diretamente para a produção. Isso pode ser um problema. Ter uma senha muito fácil e extremamente fraca. Apenas algo para estar ciente de lá. Uma vez que tudo está configurado, nome de usuário e senha, role para baixo e clique neste botão Ir. Qualquer um daqueles que aparecem e, em seguida, basta clicar ir novamente. E agora estamos prontos. Portanto, equilibre de volta para a guia de configuração do WordPress. Agora que temos toda essa informação que eles querem, podemos clicar em, vamos. E agora este é o nome do banco de dados. Então isso é o que criamos no PHP, meu administrador, eu nomeei meu curso web. Certifique-se de que digita exatamente o que criou o nome. Curso web. Usar nome é usuário da web. E teste 1, 2, 3. Deixe o host do banco de dados em paz, tudo bem. Prefixo de tabela, bem como encontrar WP sublinhado padrão para o site WordPress. Então vá em frente e clique em Enviar. Diz que estamos prontos. Ele pode se comunicar com o banco de dados e vamos em frente e executar a instalação. Aqui. Esta é uma informação geral do site. Podemos dar o nome do nosso site, o nome de usuário e a senha aqui, ou o que realmente vamos estar usando para fazer login no backend do WordPress. Assim que o site estiver realmente configurado, você precisará lembrar o nome de usuário e a senha que você configurou aqui. Isso foi algo que você vai usar e fazer referência com bastante frequência, seu e-mail, e você pode usar seu e-mail real. Visibilidade do motor de busca. Sempre verifico isso quando estou desenvolvendo. Pode deixá-la desmarcada. Novamente, é um site local, ninguém pode acessá-lo. Então, uma vez que tudo isso está configurado, vá em frente e clique em Instalar WordPress. Parece que estava tudo bem. Vá em frente e clique em Login. E aqui é onde vamos digitar nosso nome de usuário e senha. E clique em Login. Ótima. Então estamos agora dentro do nosso backend WordPress. Este é o lugar onde nós realmente vamos para criar posts de blog, novas páginas, comentários gerenciados. Você pode gerenciar usuários, instalar temas, temas filho, permalink controlado, que é a estrutura URL das páginas WordPress. E muitas outras coisas. Você vai passar muito tempo no back-end dele assim que avançarmos no curso. Mas este é um ótimo lugar para se estar. Então, até agora nós configuramos MAMP, nós criamos um site WordPress localmente. E na próxima seção vamos realmente instalar um editor de código. E então vamos começar a começar, construindo um tema real dentro do WordPress. 4. Instalando um editor de código: Tudo bem, então nesta seção vamos estar configurando um editor de código. Então isso é o que vamos realmente estar usando para realmente construir páginas, modelos de página, editar quaisquer outros arquivos de configuração que precisamos e assim por diante. Então eu uso o Visual Studio Code. Se vocês estão fazendo essa aula, mais do que provável que já tenham um instalado. Eu recomendo o Visual Studio Code. É muito bom quando se acostuma. Eu costumava usar um chamado Átomo. Eu sei que há alguns outros por aí como suportes e outros como esse. Sintam-se à vontade para usar o que vocês estão confortáveis. Eu uso o Visual Studio Code. Ele vem com um monte de extensões que você pode baixar e instalar que tipo ajudar o seu código como você digita IntelliSense e coisas assim. Então, definitivamente, muitos benefícios para usar o Visual Studio Code. Acredito que Adam também tem extensões e coisas assim também. Então vá em frente e instale o que quiser. Eu acho que eu uso o código do Visual Studio, então eu vou estar puxando isso para cima agora. Certo, então quando você abrir o Visual Studio Code pela primeira vez, você terá uma janela em branco. Então o que você pode realmente fazer é ir para File Open e simplesmente abrir a pasta 80 docs. Eu tenho o meu dentro de documentos sites MAMP com curso, e abrir isso. Assim que isso abrir, você pode ver todos os arquivos aqui. Então, começando no topo, WP admin dificilmente tocar em qualquer coisa dentro de lá. A mesma coisa com WP inclui. Esses são realmente arquivos principais para o WordPress. Normalmente, se você mexer com qualquer coisa dentro de lá, Ele vai causar um erro em algum lugar do site e fazer com que ele não funcione corretamente. Basicamente, tudo o que você vai ser editando ou adicionando ou fazendo qualquer coisa com vai estar dentro da pasta de conteúdo do traço WP, acesso HT. Você provavelmente entrará em um pouco quando estiver configurando isso para um site de produção. E, em seguida, outro arquivo aqui em baixo é WP config. E abra isso. Então este arquivo basicamente diz ao WordPress que banco de dados procurar. Então você pode realmente ver que aqui, nome do banco de dados, curso web, usuário do banco de dados, usuário da web e assim por diante. Esta é realmente a informação que fornecemos durante a instalação do site. Uma chave segura e desligada, coisas assim, não se metem muito nisso. Wp depuração. Isso é útil ao tentar depurar o site WordPress. Podemos transformar isso em verdade se entrarmos em algum problema no futuro. Isso geralmente é deixado em falso. Existem algumas outras coisas que você pode adicionar a este arquivo de configuração. Alguns plugins de armazenamento em cache, adicione algumas linhas a isso. Algumas substituições para uploads de arquivos às vezes podem entrar aqui e coisas assim. Realmente, a única coisa com que se preocupar neste arquivo é a informação do banco de dados. Se você estiver indo para mudar servidores, está mudando servidores de banco de dados ou algo assim. Você só vai querer se certificar de que todas essas informações são atualizadas corretamente para que você possa continuar trabalhando em seu site. Estou vendo ir em frente e fechar isso. Se você entrar na pasta Conteúdo WP, você verá algumas pastas dentro de seus plug-ins, temas e uploads. Carregue auto-explicativo. Este é o lugar onde todos os seus arquivos WordPress que você carrega serão armazenados. Isso é qualquer coisa dentro da mídia. Painel do Wordpress. Então é aqui que todas as suas imagens de blog ou imagens de página, banners, qualquer coisa assim, PDF. Então você pode pensar que é onde você vai fazer o upload deles e , em seguida, eles são armazenados no catálogo dentro desta pasta de uploads. Plugins, a mesma coisa lá. Qualquer plug-in que você instalar será alojado nessa pasta. Temas. Este é realmente o lugar onde vamos estar trabalhando a maior parte do tempo neste curso agora estamos imprensa vem padrão com três temas padrão, os temas 2019, 2020 e 2021. Estes são ótimos para blogs muito básicos como sites. Esse não é o nosso objetivo para este curso, nosso núcleo, este curso será tudo sobre a criação de um tema personalizado para permitir que você construa exatamente o que deseja, como quiser. Vamos começar do zero com um modelo de ossos e construí-lo a partir daí. Então você pode realmente excluir todos esses vencedores. Não vamos fazer isso agora até termos o nosso outro tema instalado. Mas isso é o que é. E então você também verá todos os temas filho que você tem dentro desta pasta. Então você pode ver se você expandir para um desses, você pode ver todos os tipos de arquivos dentro daqui. mais importantes para realmente se concentrar em footer.html, functions.php, header dot PHP, index.php e single dot PHP. Bem, eles são realmente importantes, mas esses serão os principais. Cabeçalho e rodapé ponto PHP. Isso é bastante padrão para manter tudo no arquivo de cabeçalho que pertence lá, como Meta tags, títulos de sites, qualquer coisa assim. Navegação às vezes pode ir em seu rodapé, a mesma coisa. Elementos típicos de rodapé podem ir para o arquivo PHP ponto rodapé e, em seguida, o arquivo functions.php. Isto é realmente onde nós estaremos adicionando em CSE ou CSS arquivos, arquivos JavaScript, qualquer coisa assim que nós precisamos realmente usar no site. Vamos carregá-los dentro do arquivo functions.php. Vou tocar nisso em uma seção posterior. Mas é para isso que esse arquivo é usado, além de adicionar funções personalizadas e coisas assim. Página. Este é um modelo de página padrão no WordPress. Uma coisa importante aqui a saber é a função de cabeçalho get. Então eu toco no cabeçalho dot arquivo PHP. Esta função aqui na verdade chama esse arquivo para a página. Então, o que é realmente ótimo sobre o WordPress é utilizar peças de modelo. Considero o cabeçalho uma parte do modelo. O que isso significa é que você cria um arquivo que você pode usar em várias páginas diferentes simplesmente chamando-o em uma função. Assim, o cabeçalho get header é uma função específica que chama o cabeçalho dot arquivo PHP. Esta função aqui na linha 17 realmente chama uma parte de modelo diferente. Assim, você pode ver a função de parte do modelo obter modelo chamando a página de conteúdo do traço partes do conteúdo. Então, ele está puxando em um arquivo sob o conteúdo de partes típicas, página de conteúdo. Qualquer coisa dentro desse arquivo será carregado nesta página com uma linha de código, o que é realmente ótimo. E, em seguida, na linha 25, mesma coisa, obter rodapé. Isso vai ser chamar o arquivo PHP ponto rodapé para este arquivo, novamente com uma linha de código. Então é isso que realmente grande lá vai tocar em mais desses arquivos à medida que nos aprofundamos no curso. Procurem. Este é o modelo de arquivo de página de resultados de pesquisa específico. Então, se você estiver em um site e visualizar, você deseja procurar por qualquer coisa relacionada ao esporte. Você iria apenas procurar esportes e, em seguida, você pode realmente personalizar esse modelo que mostra os resultados. Formulário de pesquisa é o formulário de pesquisa real único. Então, por padrão, isso é para um único post. Estas coisas aqui em cima. Então, sempre que você criar uma nova postagem, esse é o modelo padrão que será usado. E podemos ajustar isso também. Então, essa é praticamente a visão geral da estrutura de arquivos WordPress. Na próxima seção, vamos realmente instalar o nosso tema inicial. É um tema bare-bones, dá-lhe todos os arquivos principais que você precisa para realmente criar um tema WordPress para que não tenhamos quaisquer erros que encontramos imediatamente. E de lá nós meio que ramificamos, construímos como queremos, e vamos a partir daí. Estou ansioso por isso. 5. Como selecionar um tema para iniciantes: Nesta seção, vamos instalar nosso tema inicial, que nos permitirá criar um tema filho e ramificar a partir daí e construí-lo em nosso tema personalizado. Então o que você quer fazer é certificar-se de que você está logado no site WordPress que criamos nas seções anteriores e cabeça sobre a aparência e, em seguida, temas. A partir daqui, vá em frente e clique em Adicionar novo. E depois do lado direito, vamos procurar por um tema chamado ardósia em branco. E este é o primeiro aqui. Quando eu clicar em Instalar e ativar. Então, ao mesmo tempo, é um tema muito, muito em branco, sem trocadilhos. Não há estilos, não há formatação, há realmente nenhuma estrutura para ele. Mas o que é realmente bom sobre ele é que ele fornece todos os arquivos principais que você vai precisar para realmente construir o tema. Por padrão, quando você cria um tema dentro do WordPress, ele procura arquivos específicos. Se fôssemos entrar nessa pasta de Temas aqui e fazer uma nova pasta e chamássemos de tema do Kyle. Com isso sendo piscar, piscar pasta. Se entrarmos no WordPress e tentar ativar esse tema, ele vai lançar um erro dizendo que estamos faltando alguns arquivos. O que é bom sobre ardósia em branco é B, você a expande. Você pode ver que ele realmente vem carregado com todos esses arquivos que vamos precisar. Índice de cabeçalho da função de rodapé e assim por diante. Todos eles estão lá prontos para ir. E então nós podemos realmente criar um tema filho baseado fora deste tema pai, que nos permitirá fazer todas as nossas edições e construir o site exatamente como queremos sem depender dos desenvolvedores de ardósia em branco e potencialmente arruinando nosso site na estrada. Se vocês não sabiam o propósito de um tema criança dentro do WordPress é tipo de separar suas edições em sua personalização do tema do tema pai ou o tema principal. Razão para isso, digamos, construímos nosso site, lançamos em um servidor de produção. O trânsito está indo para ele. Tudo está ótimo. Ok, então digamos que ao mesmo tempo os desenvolvedores, um quadro em branco lançou uma atualização que corrige o patch de segurança ou algo assim. Se fôssemos entrar em nosso site de produção e atualizar o tema The Blank Slate, ele basicamente apagaria tudo o que fizemos dentro desse tema se não fizéssemos isso em um tema infantil. Então digamos que só entramos neste rodapé e dissemos, Olá, Este é um teste do rodapé. E nós salvamo-lo. E voltamos aqui e nos refrescamos. Você pode ver que está bem aqui. Então, digamos que este foi o nosso site ao vivo e fomos frente e atualizamos o tema da ardósia em branco do desenvolvedor. E esta linha aqui, uma vez que foi feita dentro do tema pai, isso seria apagado completamente. Não haveria maneira de recuperá-lo. Então é por isso que é muito, muito importante usar como tema infantil. Mesmo se você comprou um tema da floresta temática ou em qualquer outro lugar, você sempre, sempre, sempre quer ter certeza de que eles usam um tema filho. Você não quer que todo o seu trabalho duro seja lavado de uma atualização simples. Então, sempre tenha isso em mente. E eu mostrarei a vocês como criar um tema filho também na próxima seção. Mas o que fizemos aqui foi um grande começo. Você pode meio que clicar por aí. Eu sei que não está formatado, mas você pode ver posts recentes, Olá Mundo. E é assim que um único post se pareceria aqui. Você pode ver bem-vindo ao WordPress é que o seu primeiro post, editá-lo ou excluí-lo e começar a escrever. Há um comentário de teste. E você pode ver que nossa linha de rodapé ainda está aqui desde que colocamos no footer.html real. Então, isso é um tema instalar. Para começar na próxima seção, vamos ver como criar um tema filho. Vamos entrar na documentação do WordPress um pouco e, em seguida, ir a partir daí. 6. Criando um tema de criança personalizado: Tudo bem, espero que vocês estejam gostando da aula até agora. Nesta seção, vamos criar o nosso tema filho. Então vá em frente e salte para o seu editor de texto. E o que vamos fazer agora é simplesmente excluir os temas 2019, 2020 e 2021. Na verdade, não precisamos deles. Então por e apenas exclua esses. E, em seguida, na sua pasta de ardósia em branco, o que nós queremos fazer é realmente executar uma pesquisa e substituir a palavra ardósia em branco e substituí-la por qualquer nome que você quiser para o seu tema. Então o que eu vou fazer é substituir o nome em branco ardósia com curso web. E eu vou substituir tudo lá dentro. Agora, uma vez que isso é feito, eu só vou mudar o nome da pasta bem para web course. E agora, se saltarmos de volta para o painel e vamos para Temas de Aparência, ele vai mostrar um quadro em branco inativo só porque mudamos todos os nomes de ardósia em branco para o que quer que você o nomeou, esse tema realmente não existe mais. Então tudo que você tem que fazer é apenas ativar seu novo. E estamos prontos para ir. Então você pode ver o tema atual, web corps versão 2019 0.3. coisas arrumadas, por favor leia tags e coisas assim para que possamos realmente editar todas essas informações. Este é o nosso tema agora, então nós realmente não precisamos ter nada disso lá dentro. Podemos, é claro, mantê-lo para o tema dos pais, mas para o nosso tema infantil, podemos nos livrar disso, limpá-lo um pouco. Portanto, volte para o código do Visual Studio ou para o editor de texto. E o que queremos fazer agora é criar uma nova subpasta dentro da pasta temas. Então vá em frente e faça isso. O que você quer fazer é nomeá-lo exatamente a mesma coisa, traço criança. Uma vez que você tem essa pasta, o primeiro arquivo que vamos criar dentro desta nova pasta tema filho é chamado style.css. E então o próximo arquivo que queremos criar será chamado de funções PHP. E então o que precisamos fazer é começar a editar o arquivo style.css, CSS. Então, para realmente associar este tema filho com o tema pai, nós só precisamos adicionar algumas linhas de código para obter os dois se reconhecerem. Então o que vamos fazer aqui é começar um comentário. E então vamos dizer o nome do tema, criança do curso da web. E então vamos dizer tema, URI. E eu estou realmente indo para saltar sobre o tema pai curso web e apenas agarrar isso aqui. E depois a descrição. Podemos dizer curso web, criança sendo autor. Você pode dizer seu nome, autor, seu, podemos dizer se você tem um site portfólio, você pode fazer isso. Se você está construindo isso muito acompanhar, você pode colocar isso como você pode colocá-lo lá também. Na verdade, vou me livrar disso. Não é necessário. Modelo, esta é a linha mais importante aqui. Precisamos que isso corresponda exatamente ao nome do tema pai, que é o meu caso, uma versão de curso na web. Podemos fazer 1. E o domínio de texto pode ser filho do curso da web. E então vamos fechar esse comentário. Então, a linha mais importante aqui é o curso web template. Este será o nome do seu tema. Isso é realmente o que vincula esse tema filho ao tema pai. Portanto, certifique-se de que corresponde corretamente. Vá em frente e guarde isso. Se você quiser saltar de volta para os temas WordPress. Agora você já deve ver a palavra, o tema filho que criamos. Você pode ver que este é o tema infantil de webcasts, tão bom. Isso é exatamente o que precisamos até agora. Agora o que vamos fazer é editar o arquivo functions.php para começar a puxar folhas de estilo. Então, nossa primeira folha de estilo e nós vamos puxar para dentro é realmente olhar a folha de estilo tema pai ardósia em branco. Então, uma mudança renovada para o arquivo functions.php dentro do feixe filho. E o que vamos fazer é começar com uma tag de abertura do PHP e depois fechá-la. E o que vamos fazer é começar a digitar a função para basicamente puxar essas folhas de estilo. Então vamos fazer Adicionar ação, WP, enqueue, script, curso, estilo enqueue, ponto-e-vírgula, função, web é claro. E este é o nome do seu tema. Estilos. Pode ser P e Q estilo tema filho, folha de estilo, BRI sobre um número. Nós vamos dizer lidar pai, WP, tema, versão Git. Isso, ele só funcionará se você tiver a versão definida e o cabeçalho de estilo. E então vamos fechar isso e salvá-lo. Então agora podemos virar para WordPress e ativar o nosso tema infantil. E então, se realmente visualizarmos a página, ela parecerá um pouco diferente. Na verdade, estamos puxando estilos do tema pai, que formatam as coisas um pouco melhor para nós. Então este é um grande começo. Na verdade, usaremos essa função aqui para incluir recursos adicionais, como folhas de estilo personalizadas, quaisquer bibliotecas ou estruturas que precisamos adicionar. É aqui que vamos carregar esses arquivos. Nós realmente não queremos colocar links para recursos externos e o cabeçalho, o rodapé, apenas a maneira que o WordPress carrega os recursos. Esta é, na verdade, uma forma mais eficiente de o fazer. Então, a partir daqui, realmente temos tudo configurado que precisamos para começar a construir nosso tema personalizado, o que é ótimo. Então, no próximo capítulo ou na próxima seção vamos entrar em que. Vou usar o Bootstrap para construir o tema para que vocês possam acompanhar isso. Ou use qualquer estrutura que você quiser. 7. Trabalho no tema: Muito bem, nesta secção vamos começar a construir o nosso tema. Então, uma coisa que eu esqueci de mencionar na seção do editor de código foram extensões que você pode realmente adicionar ao Visual Studio Code. Assim como Adam, eu acho que é apenas um pouco de um processo diferente em Adam ou em outros, em seguida, Visual Studio Code. Mas um realmente importante que eu uso muito é chamado de embelezar. Sua idéia do que isso está fazendo. Quando você chama. Ele realmente formata seu arquivo de código e uma maneira muito mais legível. Então, voltando para o tema pai e eu vou abrir o arquivo de cabeçalho. Você pode ver que o tema em branco Slate que instalamos Originalmente tem todos os arquivos que precisamos. No entanto, eles não são formatados bem ou algo assim. Mas o que é bom sobre esta extensão é que você pode embelezar o arquivo, dizer que é HTML e, em seguida, formata tudo corretamente. É muito mais fácil de ler e apenas parece mais agradável, mais fácil de trabalhar. Então isso é uma coisa que eu recomendo é instalar extensões ajudar a formatar o código, embelezar o que eu uso para o Visual Studio Code. Não tenho certeza se eles têm um para átomo, mas vale a pena investigar. Então, agora que, isso está fora do caminho, o que vamos começar fazendo com o nosso tema é criar um menu de navegação no topo. Queremos um logotipo aqui, talvez um par de links em cima. E como eu disse anteriormente, eu vou usar o Bootstrap para isso, e eu vou usar o Bootstrap versão cinco. Então o primeiro passo para isso é realmente conectar Bootstrap ao tema. Então vamos saltar para o tema filho, para o arquivo functions.php. E então vamos fazer uma nova linha. E quando eu digo WP enqueue style, e quando eu digo Bootstrap core, e então nós vamos fazer vírgula e, em seguida, abrir aspas. E vamos pular para o site do Bootstrap. E o que vamos fazer é saltar para os médicos e começar. E você pode ver aqui, copiar colar o link da folha de estilo em sua cabeça antes de tudo isso, nossas folhas para carregar nosso CSS. Este é grande passarinho não vai realmente colocá-lo na seção da cabeça. Vamos colocá-lo no arquivo functions.php. Então vá em frente e copie esse link. Mude para o editor de código e, em seguida, cole-o lá e salve-o. E depois volte para o site do Bootstrap. E então vamos fazer a mesma coisa com estas botas ou com este JavaScript. Em seguida, copie e, em seguida, volte para o editor. Vamos fazer uma nova linha, WP enqueue script. E isso pode ser o script principal Bootstrap. E, em seguida, colá-lo lá também. E segura. Então, apenas fazendo isso, se formos atualizar nosso site, a formatação deve parecer um pouco diferente novamente. Desta vez, estamos realmente incluindo estilos Bootstrap. Então vamos em frente e mudar para isso e ver o que isso fez. Então você pode ver nossos links agora são azuis que famílias de fontes um pouco diferentes espaçamentos, um pouco diferentes. Então isso é um bom sinal. Isso significa que temos estilos e scripts Bootstrap conectados ao nosso tema corretamente. E podemos começar a construir a navegação real. Então vá em frente e volte para o editor de código. Podemos fechar functions.php por enquanto. E o que queremos fazer é criar o cabeçalho que o arquivo PHP dentro do nosso tema filho. E o que podemos fazer para tornar as coisas mais fáceis para nós é abrir o tema pai, ir para o cabeçalho dot arquivo PHP, abri-lo e, em seguida, basta copiá-lo e colá-lo sobre o nosso cabeçalho de tema filho e, em seguida, fechar aquele. Ótimo. Então este é o nosso cabeçalho para o nosso tema infantil. Kinda nos ajuda ao longo de apenas copiar e colar dessa forma temos toda a estrutura necessária de um documento HTML. Tudo o que vamos estar fazendo aqui hoje neste curso vai realmente ser um monte de HTML, CSS e JavaScript. Isso é realmente todos os sites WordPress são. É apenas uma maneira de construir um site e conectar-se ao banco de dados para extrair informações do uso do PHP dentro do HTML. E então nós formatamos todo o seu CSS. Então você vai ver um monte de estrutura familiar à medida que passamos por este curso quando construímos páginas e coisas assim. Então temos o código HTML padrão aqui em cima, body, body class. Esta é uma função específica do WordPress. A mesma coisa com isto. E então é aqui que nós começamos a construir nosso cabeçalho real. Então você pode ver que temos o cabeçalho com o ID de cabeçalho. Podemos nos livrar de tudo isso. E então podemos começar a colocar em nossa navegação bootstrap. Então eu vou começar com isso e dizer classe de navegação é igual a navbar. Navbar expandir uma grande barra de navegação. Luz. BG, como E eu vou fechar isso. E dentro deste NADH, vamos abrir um contentor. Fluido. Vamos fechar isso. Ok. E, em seguida, dentro deste recipiente vai fazer a classe de marca navbar é igual a navbar marca HRF, ou apenas deixar isso lá por enquanto. E vamos dizer Navbar. Tudo bem, vá em frente e salve isso e podemos voltar para o nosso site e ver como isso se parece. Ótimo. Então temos navbar e a esquerda, que é a marca. E podemos ir em frente e inspecioná-lo. Podemos ver que temos a nossa barra de navegação, que abrange toda a largura. Dentro disso temos um contêiner. Marca Navbar, ótimo. E temos o estilo está puxando de Bootstrap, tão perfeito. Em seguida, vamos criar o botão para alternar o menu em telas móveis. Então vamos fazer uma quebra de linha aqui e vamos dizer classe botão, navbar criança. Botão Tipo igual. Dados de alternância colapso fechado. O destino é o conteúdo suportado pela barra de navegação . Controles de área. suportada pela barra de navegação Área de conteúdosuportada pela barra de navegação. Expandido, etiqueta de área falsa, alternar, navegação. Vamos fechar isso. E, em seguida, dentro deste botão, vamos adicionar uma extensão com um ícone de desfoque de gravata de barra de navegação classe. Podemos ir em frente e atualizar nossa página. E se encolhermos isto, faça-o deste lado. Deveríamos ver o botão do menu aparecer lá em cima. Nós realmente não temos o conteúdo editado a página para realmente mostrar um menu, mas o botão está lá e ele mostra e esconde de acordo com a largura da tela. Tão grande. Agora tudo o que precisamos fazer é apenas adicionar o conteúdo real que irá mostrar e o recolhido quando esse botão é pressionado, bem como mostrar. Eu sou telas mais largas. Então logo abaixo do botão fará o colapso da barra de navegação da classe Hello. E daremos a ele um ID do conteúdo suportado pela barra de navegação. Feche a div. E depois vamos abrir uma lista desordenada e um item da lista. E então isso terá uma classe de item de navegação. E que dentro deste nós teremos um novo link com o link de navegação classe e ativo, e então vamos dar-lhe área, página atual e H ref. Podemos deixar em branco por enquanto e vamos dizer: “ Esqueci de adicionar a classe da lista. Então vamos dizer Navbar, Nav e Auto e B para ser grande aqui, e essas são apenas classes de espaçamento. Esses são, estes são todos Bootstrap, classes específicas de bootstrap. Vamos continuar e salvar isso, voltar para o site e atualizar. Ótimo, então vemos casa. E então nós podemos desmoronar e então nós vemos casa lá também. Assim, a criança está trabalhando e o menu funciona como pretendido em telas pequenas e grandes. Tão grande. Uma última coisa nesta seção, em vez da palavra navbar para a marca, nós realmente queremos ter uma imagem lá. Então o que podemos fazer é nos livrar disso. E então podemos colocar uma imagem aqui e dizer o placeholder.com. E vamos dizer um 140 por 70. E esta é apenas uma imagem de suporte de lugar para mostrar como seria se houvesse um logotipo real lá. Bem, isso e atualize isso e você pode ver se este era um logotipo de marca real. Ele vai lá e ficará ótimo. Então é isso para esta seção. E na próxima seção vamos passar pelo meio da página, o conteúdo real. Podemos obter algumas imagens, fileiras e coisas assim lá dentro. E realmente obter este site construído. 8. Criando um modelo de página: Tudo bem, nesta seção nós vamos realmente estar passando por cima de modelos de página, como atribuir modelos de página, e realmente construir conteúdo para essa página específica dentro do editor de código. Então vamos pular direto para ele. O que queremos fazer agora é na nossa página inicial, queremos fazer algumas coisas. Primeiro, queremos criar uma home page. Vamos então criar um arquivo de modelo de página. Vamos atribuir esse modelo de página à página inicial. E então vamos carregar apenas alguns conteúdos básicos de herói do bootstrap apenas para obter algo lá para que a página pareça um pouco mais agradável. Então vamos em frente e começar. Vamos voltar ao painel e ao WordPress. E vamos navegar até as páginas. E então o que queremos fazer é adicionar uma nova página. E nós vamos chamar este no título e vamos chamá-lo de página inicial. E depois vamos publicá-lo. Uma vez publicado, vai clicar na página Ver. E a partir daqui, o que queremos fazer é clicar em personalizar. E vamos para as configurações da página inicial. E então vamos alternar isso para uma página estática e, em seguida, homepage vamos definir para homepage e, em seguida, publicar. Então o que isso faz é toda vez que as páginas da web ou o site é carregado, ele vai carregar essa página inicial como a página principal. Ótimo, então agora o que podemos fazer é pular para o editor de código. E dentro do nosso tema filho criará uma nova pasta e vamos chamar essa página de modelos. E, em seguida, dentro dessa pasta, vamos criar um novo arquivo e vamos chamar essa página inicial no PHP. Dentro daqui, vamos começar com tags PHP e vamos dizer homepage do nome do template. Este comentário aqui basicamente só diz ao WordPress no back-end que este é um arquivo de modelo de página e permitir que ele seja selecionado a partir da lista de modelos de página para escolher ao editar a página. Chegaremos lá em um segundo depois desta linha. O que queremos fazer a seguir é incluir o cabeçalho. Então vamos obter parênteses de cabeçalho sublinhado, fechar isso, e então vamos fazer a mesma coisa para o rodapé. E então vá em frente e guarde isso. E podemos voltar para a nossa página web e atualizar. E lá vamos nós. Nada muda, está tudo bem. O que precisamos fazer agora é clicar na página de edição. Lembre-se que definimos a página inicial que acabamos de criar como a página inicial do site. Então é por isso que estamos vendo aqui ir e clique em editar página. Do lado direito. Expanda o acordeão modelo, modelo padrão, clique sobre isso e, em seguida, altere-o para a página inicial. E, em seguida, vamos em frente e clique em Atualizar. E, em seguida, Ver Página. Tudo bem, então esta página parece diferente agora, nós realmente não temos nada entre o cabeçalho e o rodapé como o modelo padrão fez. Então agora tudo o que temos é a navegação que adicionamos e, em seguida, o rodapé, que é apenas o copyright com o nome. E então alguns textos que adicionamos mais cedo no curso. Ótima. Então, o que podemos fazer agora é voltar ao modelo de arquivo da página inicial e começar a adicionar algum conteúdo de herói do Bootstrap. Então, vamos dizer div. Vamos dar uma aula a isto. Px, PY cinco e y cinco textos centro vai dentro desse div e vamos dizer H1. Quero dizer que isto é um título. Vamos dar uma aula a este. Mostrar cinco, F, W negrito. E, em seguida, abaixo do H1. E vamos dizer div com a classe de col, grande seis e auto. E então vamos dizer dentro de lá, vamos apenas dizer um parágrafo com a classe de chumbo e MB. E vamos colocar um pouco de Lorem Ipsum lá dentro. E, em seguida, abaixo desse parágrafo, dará mais uma div. Vamos colocar alguns botões aqui. Então, vamos dizer uma div com a classe de lacuna grade D para o flex, justificar conteúdo pequeno centro. E, em seguida, dentro desta div vai dizer um botão. Vamos apenas dizer primário. E, em seguida, digite igual botão, classe. Botão, botão, primário. E novamente, essas são todas as classes padrão Bootstrap, digamos botão traço grande, AX4, obter três. E, em seguida, para facilitar, vamos apenas copiar esta linha de botão, colá-lo logo abaixo, alterar o texto é secundário. Secundário. E depois mudamo-nos. A classe é apenas um pouco em vez de botão primário vai dizer contorno botão. Secundário, botão grande que podemos manter e então vamos dizer p de x. e vamos salvar isso. E podemos colocar de volta para a página web e atualizar. E nós temos essa seção de cabeçalho bonita, esta seção de herói aqui, novamente com apenas um conteúdo de espaço reservado, mas olhando muito, muito melhor. E definitivamente em chegar ao que queremos ver em um tema personalizado. Ótima. Em seguida, podemos adicionar uma linha com alguns cartões, alguns cartões Bootstrap apenas para um pouco mais de conteúdo na página. Então o que queremos fazer aqui é voltar para o editor de texto. E logo abaixo, vamos dizer div com a classe de linha. E vamos começar uma coluna, pequena seis. E então dentro de lá vamos colocar o cartão. E, dentro disso, teremos outro div com o corpo do traço do cartão. E então aqui vamos dizer H5 com uma classe de título de cartão. Vamos dizer que este é um título de cartão. E, em seguida, logo abaixo que colocará um parágrafo com uma classe de texto do cartão. E nós vamos apenas dizer que este é alguns textos vai abaixo. E logo abaixo disso, vamos jogar outro botão. Então vamos dizer um botão, botão primário. Um árbitro H é apenas um por enquanto. E vamos dizer isso, vamos apenas dizer link. E eu guardo isso. E agora podemos copiar esta coluna inteira e colá-la dessa forma temos duas colunas com um cartão em cada uma. Vá em frente e salve isso, volte para o site e atualize. E você pode ver que temos duas cartas lá dentro. Uma coisa que nos esquecemos de fazer foi colocar isto num contentor para termos algum espaçamento na lateral. Então eu só vou para cima até aqui recipiente e, em seguida, apenas embrulhar tudo isso dentro de um recipiente. Ótima. Então agora estamos um pouco mais contidos, temos algum espaçamento embutido. Agora, tudo parece bom. Tão grande. Próxima seção vamos passar para ajustar o rodapé, limpando isso um pouco e vamos a partir daí. 9. CSS personalizado: Então, esta seção, vamos estar trabalhando no rodapé. Novamente, o que vamos estar usando alguns elementos Bootstrap para tipo de formatar isso um pouco mais rápido. Mas vou mostrar-vos como se faz isso. Vamos fazer o nosso caminho até o site do Bootstrap, getbootstrap.com. E depois vamos aos documentos e procuramos no Twitter. Eu clico neste primeiro resultado aqui. E tudo o que vamos procurar aqui é apenas um exemplo de algo que queremos fazer. Então podemos ver este aqui. Parece que na pré-visualização foi um pouco diferente. Parece que foram quatro colunas. Então vamos em frente e fazer isso. Parece que tem um pouco de “scrunch “, mas vamos em frente e fazer quatro colunas. Então podemos fazer isso voltando para o editor de código. E agora temos o arquivo da página inicial aberto. Mas o que queremos abrir agora, na verdade, o que queremos criar agora é o arquivo footer.html. Então dentro do curso web, ou seja lá o que você nomeou seu tema, o tema criança aqui vamos fazer um novo arquivo, footer.html, CPI. E neste arquivo podemos simplesmente ir em frente e começar a digitar o que quisermos no rodapé. Vamos fazer algo simples. Vamos fazer uma div com uma classe de contêiner. Dentro dessa div vai fazer uma fileira. E então faremos 43 colunas de largura. Entra nisso. E então podemos dizer 1, 2, 3 e 4. Vamos guardar isso. E nós podemos ir em frente e colocar de volta para a página inicial I arquivo PHP. E ainda temos o rodapé incluído. Então vamos voltar para o navegador. Vá para o nosso site, atualize a página. E vocês podem ver que temos nossas quatro colunas aqui. A razão pela qual ele se livrou do que tínhamos antes é porque o que tínhamos antes estava no tema pai. Então nós vamos voltar para aquele rodapé PHP. Então este é o arquivo pai Temas Rodapé. Tudo aqui é imediatamente substituído assim que criamos o arquivo PHP ponto rodapé em nosso tema filho, o que fizemos aqui com nossas quatro colunas. Então foi por isso que aconteceu. Ótima. Então agora podemos voltar para esse exemplo bootstrap. E parece que eles têm um logotipo e, em seguida, três menus. Então podemos ir em frente e fazer algo semelhante a isso. Então podemos fazer, Vamos fazer um link com uma imagem. E usarei a mesma imagem que usamos no cabeçalho aqui. Isso está dentro? E, em seguida, vamos apenas fazer uma lista desordenada, item de lista simples. E vamos fazer outro lá também. E então vamos apenas copiar isso, colocá-lo nas outras duas colunas, vai atualizar. E lá vamos nós. Por isso, neste momento, está um pouco perto. Podemos adicionar alguns estilos aqui. Posso mostrar-lhe como realmente conectar sua própria folha de estilo personalizado ao site. Então vamos voltar para o editor de código. E, em seguida, dentro do tema filho, e crie uma nova pasta. Vamos chamar isso de CSS. Então, dentro disso, vamos dizer styles.css. Ótima. E então esta será a nossa folha de estilo personalizada. E então o que precisamos fazer agora para realmente conectá-lo ao site. Se você se lembra anteriormente, eu mencionei que nós realmente não adicionar essas folhas de estilo personalizadas diretamente ao cabeçalho do site. Mas o que queremos fazer é adicioná-los no arquivo functions.php. Abra isso. E para tornar as coisas um pouco mais fáceis, podemos simplesmente copiar este Bootstrap que fizemos. E eu só quero colocar isso aqui, muda um pouco. Podemos dizer CSS personalizado. E então o que queremos fazer em vez deste link, queremos obter folhas de estilo, diretório, URI, ponto, aspas abertas, e vamos dizer estilos CSS que CSS quando salvar isso. E então, se quisermos ter certeza de que nossos estilos estão funcionando, podemos voltar para nossa folha de estilo recém-fabricada. E podemos dizer, digamos que os H são vermelhos. Guarde isso. E podemos voltar para o rodapé. E só para testar isso, vamos adicionar um elemento aqui. Isto é um teste, guarde-o. E então vamos voltar para o navegador e atualizar. E agora você pode ver que já havia um H1, então este é vermelho e assim é, modo que é ótimo. Isso significa que nossa folha de estilo está conectada e funcionando. Então o que podemos fazer agora é ajustar um pouco do espaçamento aqui. Vamos nos livrar disso e nós vamos apenas dizer div com nem que nós podemos ir em frente e apenas fazer. A classe de rodapé, tem um top acolchoado de 50. Salve isso, vá para o rodapé e a classe de rodapé para o recipiente abrangente. E então isso deve nos dar um pouco de espaço. Análise perfeita. Vou me livrar disso. Um suporte de lugar lá. Tudo bem, parece bom. Então, há o rodapé e também como conectar uma folha de estilo personalizada para a coisa. 10. Conteúdo dinâmico: Então, nesta seção, vamos realmente passar sobre como extrair dados ou conteúdo do backend ou do editor WordPress e realmente mostrar esse conteúdo no front-end do site para o visitante, na verdade visitando a página. Então, o que queremos fazer é ir em frente e entrar novamente no Painel se você está, se você ainda não está. Está bem. Tudo bem. Agora que estou de volta ao Painel, vamos voltar para a página inicial. Algumas páginas na página inicial esquerda. E eu vou apenas ajustar as opções de tela aqui. Na verdade, não prefira estar no modo de tela cheia. Eu apenas gosto do modo padrão na barra lateral. Agora estamos olhando para o nome da página e seguida, este apertado para dois ou escolher um bloco. Este é o conteúdo real da página. Então, por padrão, este como o editor WordPress Gutenberg. Isso é completamente bom. Podemos mantê-lo como está. E tudo o que vou fazer aqui é dizer que isto é conteúdo de teste. Isso será mostrado na página. E eu vou apenas ir em frente e clicar em Atualizar. Então, apenas uma frase simples, 12 frases aqui, por exemplo, propósitos. Então vá em frente e veja a página. Neste momento, isto não vai mostrar nada no nosso ficheiro de modelo. Na verdade, não temos nada configurado para extrair esses dados. Então o que queremos fazer é voltar para o editor de código e queremos abrir nosso modelo de página inicial. E em vez desta frase aqui, vamos realmente querer que este seja o nosso conteúdo que acabamos de colocar no editor de páginas. Então, para fazer isso, precisamos usar o que é chamado de WordPress um loop. Em um bom exemplo disso está no tema pai no arquivo PHP de ponto de página. Então vá em frente e encontre isso, abra isso. E eu só vou embelezar este arquivo para que seja um pouco mais fácil de ler. Está bem? Então, começando na linha 3, isso é realmente o que começa o loop WordPress. Então ele diz que se tem posts, enquanto tem posts, obter o conteúdo da postagem. Estas são todas as funções padrão do WordPress. Isto não é nada personalizado. Isso é exatamente com o que temos que trabalhar. Então o que queremos fazer é pegar essa linha. Copie isso e vamos voltar para o nosso modelo de página inicial. E nós podemos realmente colocar essa linha bem aqui. Então, vamos dizer linha três colar. E então logo abaixo do rodapé, podemos realmente apenas fechar aqueles se e enquanto declarações. Então vamos em frente e acabar com o quê. Vá em frente e abra os colchetes PHP primeiro e, em seguida, vamos dizer fim enquanto salvar isso. Então agora tudo isso está dizendo é que se há um post e enquanto nós temos o post, obter os dados pós-, nós estamos visualizando uma página, então nós vamos ter um post para mostrar. Agora mesmo. Ainda vai mostrar tudo o que codificamos. Mas só para mostrar que nada vai quebrar, vamos em frente e atualizar a página. Parece exatamente o mesmo. Ótima. Então vamos mudar de volta muito rápido. E então aqui, em vez deste parágrafo, podemos apenas dizer, vamos abrir nossos colchetes PHP aqui e vamos dizer o conteúdo sublinhado. E novamente, esta é uma função específica do WordPress. Isso não é nada que tivéssemos que fazer sozinhos. Vamos em frente e salvar isso. E o que isso está fazendo, isso é realmente puxar qualquer conteúdo que está dentro do editor. Isto deve dar-nos uma sentença ao nosso titular. Bem ali está, e este é algum conteúdo de teste, conteúdo, isso será mostrado na página. Então esse é apenas um exemplo muito breve de como extrair conteúdo para a página do editor. Na próxima seção, vamos realmente passar por cima de um plug-in que eu uso em quase todos os meus sites WordPress que tipo de expandir essa funcionalidade em uma tonelada de diferentes opções de campo, imagens, qualquer coisa que você possa pensar. Na verdade, é uma ferramenta muito, muito boa para usar quando você está construindo em sites de clientes. É muito mais eficiente do que usar um plugin do Page Builder. Então eu estou realmente animado para mostrar isso a vocês na próxima seção. 11. Configuração de campos personalizados avançado: Tudo bem, então, na última seção, passamos sobre como puxar apenas uma frase simples ou duas do editor de página para o nosso modelo de página para realmente mostrar no front-end do nosso site. Nesta seção, eu realmente vou mostrar a vocês um plug-in que eu uso quase em todos os sites WordPress que eu construí para clientes. É uma ótima ferramenta para pegar essa funcionalidade que acabamos de aprender e expandi-la em um monte de elementos diferentes para extrair. Então temos imagens, temos códigos de cores, temos elementos repetitivos, temos tabelas. Há uma variedade ilimitada de elementos para realmente puxar a partir de usar este plugin. Então, os polígonos realmente chamam de campos personalizados avançados. Vou deixar um link para isso na descrição do curso. Este plug-in tem uma versão gratuita e uma versão pro. A versão pro vale a pena na minha opinião. E isso lhe dá mais alguns elementos que são realmente, muito poderosos para sites. Sem se aprofundar demais, você pode ver todos os tipos de páginas de opções, galerias, clonar campos, e assim por diante. Apenas um monte de coisas que você começa com este realmente, realmente grande plugin. De qualquer forma, a versão gratuita é mais do que suficiente para o que precisamos aprender aqui. Então, o que você pode fazer é realmente voltar para o seu painel WordPress. E nós vamos para Plugins e depois Adicionar Novo. E nós podemos realmente apenas procurar por isso. Então, vamos dizer campos personalizados avançados. E é este aqui, 1 milhão de instalações. E você pode ver que há um monte de outros plug-ins e tipo de expandir nas já enormes listas de campos que eles construíram. Então você pode ver que há uma gravidade Formas, adicionar na fonte, impressionante, adicionar na tabela sentir que em estendido e assim por diante. Assim que isso for baixado, vá em frente e clique em Ativar. E agora podemos ir para os campos personalizados e a barra lateral. E uma visão geral rápida deste, este plugin aqui. Então, o que queremos fazer, vamos voltar a isso. Então, este painel aqui, a página inicial de campos personalizados avançados, se preferir. É aqui que você vai gerenciar todos os seus campos personalizados que eles usam, configurados para o que quer que seja. Páginas postar tipos de postagem personalizados, tudo o que você pode pensar, páginas de categoria e assim por diante. Isto é que vamos gerir tudo isso. Então o que eu gosto de fazer é clicar em Adicionar Novo, e dividi-los em diferentes grupos com base na página. Então, para este grupo, eu vou apenas dar o nome de página inicial e as regras de localização. Aqui é onde você realmente irá designar este grupo de campos para mostrar apenas a publicação específica ou página específica que você deseja. Então o que precisamos fazer é dizer que podemos fazer de duas maneiras diferentes. Se quiséssemos que ele fosse apenas em qualquer página, poderíamos apenas mudar de postar uma página. E agora, sempre que criarmos uma nova página, esses campos aparecerão lá, mas queremos ser um pouco mais específicos. Então nós realmente queremos segmentar o modelo de página. E se for igual ao modelo da página inicial que criamos, queremos que esses campos apareçam. Ótimo, Então, podemos ir em frente e deixar isso e podemos clicar em Adicionar campo. Então o que eu vou fazer é em vez de usar esse editor padrão Gutenberg WordPress para a nossa frase, eu só vou dizer frase herói. E então Tad, que realmente cria o nome do campo por padrão com um sublinhado. Ele substitui espaços por sublinhados. Você também pode alterar isso se você quiser que ele seja um pouco diferente. Podemos deixar este conjunto para texto. Eu costumo configurá-lo para um editor Wysiwyg se eu vou estar construindo toda a seção. Então, na verdade, vou fazer isso aqui. Vou mudar isso para conteúdo de herói e contratenor de herói. Sê um pouco mais específico. Eu não gosto de definir nada é necessário a menos que seja absolutamente necessário. Isso fica um pouco complicado se você fosse voltar uma vez que você tem seu site construído um pouco mais. E você quer voltar e ajustar algumas configurações ou criar novas páginas, livrar-se de páginas, coisas assim. Se alguma vez precisou de campos, fica um pouco complicado. Só me certificando de que tudo combina. Então eu gosto de deixar tudo como não é necessário. E podemos deixar o resto como está. Ótimo. Então vamos em frente e publicar isso. E o que isso faz é apenas realmente salvar nossas configurações aqui. Podemos voltar para a página inicial das nossas páginas. E agora, uma vez que nosso modelo está definido para o modelo da página inicial, agora podemos ver nosso grupo personalizado aqui, que é apenas rotulado homepage com o conteúdo do herói com um editor wysiwyg. Então o que podemos fazer é copiar essa frase e depois colá-la aqui. E eu vou ver a página muito rápido antes de salvarmos qualquer coisa. E, na verdade, vou pegar este. E coloque-o aqui também. Ótimo, então temos um H1, deixe-me ter apenas um parágrafo abaixo dele. Estou a clicar em Actualizar e, em seguida, ver a página. Tudo bem, então nos livramos dessa frase, então isso se foi e então o título ainda está lá. Então isso é o que precisamos fazer agora é mudar de volta para o nosso editor de código. E nós podemos nos livrar deste alinhamento aqui, este elemento H1. E podemos nos livrar deste parágrafo aqui. E tudo o que precisamos fazer agora é dizer, ele abriu nossos colchetes PHP e dizer o conteúdo do herói de campo. Então este é o nome do campo que acabamos de criar. E o campo, este é um, este é um campo personalizado avançado função padrão que realmente chama este campo do banco de dados. Então vamos em frente e salve isso e atualize nossa página. E agora vemos nossos elementos H1 aqui. Nosso texto de parágrafo está aqui, e então os botões estavam lá o tempo todo. Ótimo. E assim você pode ver que não temos nenhum texto codificado aqui. É simplesmente puxar isso do banco de dados. E podemos mudar esse conteúdo. Podemos copiar isto mais algumas vezes só para recebermos mais mensagens. Ok. Perfeito. Então tudo está funcionando exatamente como queremos. Podemos fazer o mesmo por estas cartas. Podemos realmente utilizar campos personalizados avançados para isso também. Podemos até fazer isso pelo rodapé. Então eu vou realmente mostrar a vocês como fazer essas duas cartas nesta seção. Então, o que queremos fazer é, desculpe, voltar ao painel, campos personalizados avançados painéis são e adicionar novos. Queremos voltar para a página inicial e adicionar um campo. Então, para tornar as coisas um pouco simplificadas aqui, vamos apenas dizer esquerda, esquerda carta. E então nós vamos realmente fazer deste um grupo. E, em seguida, dentro do grupo, temos sub-campos. Então, se voltarmos à nossa página inicial, podemos fazer o título e o subtítulo. Na verdade, vamos voltar. Então nós temos um H5 e ok, ótimo, sim, nós podemos fazer isso como um editor wysiwyg e nós podemos realmente adicionar um elemento para fazer este link, vai fazer isso tanto para o lado esquerdo quanto para o lado direito. Vamos voltar para o editor de campo aqui vamos adicionar um campo. Vamos apenas dizer título e subtítulo. E só para limpar isso um pouco, vamos dizer título sublinhado subtítulo, mudar isso para editor wysiwyg. E isso é tudo o que precisamos fazer por isso. E então aqui vamos dizer botão, botão, e então podemos mudar isso para ver o que queremos para isso sozinhos. Queremos uma ligação. E bom, então agora o que podemos fazer aqui temos o cartão esquerdo. Campos personalizados avançados tornam isso muito fácil. Podemos apenas duplicar e, em seguida, mudar isso para dizer ou escrever cartão, cartão direito. E então podemos manter estes iguais. E então podemos atualizar isso e voltar para o editor da página inicial. E agora você pode ver onde o cartão esquerdo e o cartão direito. E o que vou fazer é copiar este conteúdo, colá-lo aqui, e acreditar que é o mesmo para aquele. É, vou guardar isso. E, em seguida, o botão podemos selecionar um link. Só vou fazer um link de espaço reservado. Eu acho. A mesma coisa aqui em baixo. Tudo bem, estamos prontos aqui. Vai actualizar. Será a página de novo, nada vai mudar. Mas o que quero mostrar a vocês é a documentação avançada de campos personalizados. É muito, muito bom. Ele mostra muitos exemplos sobre como usar praticamente todos os campos com alguns exemplos diferentes para cada um. Então o que você pode fazer é realmente apenas pesquisar, que é clicado na camada errada. Vamos à documentação. E então vamos dizer grupo. Vamos rolar para baixo. Assim, você pode ver o uso do modelo. Há conteúdo de exibição, há o exemplo de loop, como exibir o mesmo grupo usando a função have rows. E nós vamos apenas ir simples e apenas copiar este exemplo de conteúdo de exibição. Então o que queremos fazer aqui é que eles não se prepararam para herói, obter herói de campo sublinhado. Isso parece muito semelhante ao que já usamos em nosso template, o campo. Então a diferença aqui é se vamos salvar o valor do nosso campo personalizado dentro de uma variável. Queríamos ter o campo de sublinhado. Isso realmente não exibe o campo e o define, apenas puxa e, em seguida, o armazena na variável. Se fôssemos dizer o campo aqui, isso realmente iria errar. Não funcionaria. Então essa é a diferença entre os dois. Se você quiser apenas exibir o campo exatamente como ele é, vá em frente e apenas fazê-lo embora campo e salvá-lo em uma variável que eu fui para obter campo. Então é isso que vamos fazer. Aqui está apenas uma verificação simples para ver se isso realmente tem alguma coisa e, em seguida, você apenas exibi-lo como você normalmente faria. Parece que eles adicionaram alguns estilos aqui. E você apenas fecha a declaração if. Ótimo, então vamos em frente e fazer isso. Podemos fazer aqui na linha 16, vamos dizer que a carta esquerda é igual a e obter campo esquerdo cartão. E, em seguida, para PHP se cartão de fenda. E, em seguida, logo após o cartão vai apenas fechar que se declaração. Para não nos esquecermos. E agora, já que esse valor é definido no editor, se atualizarmos a página e ainda devemos ver o mesmo conteúdo, já que não mudamos nada. Perfeito, então ainda está lá. E agora podemos ajustar isso como precisamos. Então, em vez de o H5 e parágrafo ser codificado, vamos apenas dizer o campo. Já me esqueci do nome que lhe demos. Apenas pule de volta aqui. Demos o nome de subtítulo. Ok, eu vou copiar isso e depois apenas colá-lo lá. E agora eu vou apenas salvá-lo e atualizar a página. E não está lá. Então vamos ver o que temos de errado aqui. Bem, isso mesmo. Como estamos usando o campo de grupo, nós realmente precisamos fazer referência à variável de campos de grupo e, em seguida, dizer qual campo você deseja dentro dele. Então vamos em frente e mudar isso um pouco. Mas diz o campo que nós vamos dizer, tudo bem, ir para a esquerda, e então nós vamos dizer legendas do título. Perfeito, aí está. E você vai notar que eu realmente uso os colchetes em vez dos parênteses. Isso é exatamente o que você usa quando você está realmente referenciando um valor ou um campo dentro de um grupo. Então essa é a diferença entre os parênteses getfield e em seguida, o campo de eco de dentro de um grupo. Então podemos fazer a mesma coisa para o link. Então, em vez de apenas o link da palavra, vamos dizer PHP que vai botão de cartão esquerdo. E então, como este é um campo de link, vamos dizer título. E então nós vamos copiar isso, exatamente a mesma coisa aqui e movê-lo para onde o HRF está. E então isso em vez de título, vamos dizer URL. Então guardaremos essa atualização. E você pode ver nosso título mudar o link de teste, que é o que colocamos no editor. E se nós inspecioná-lo, você pode ver que o HRF também é alterado para o que temos no editor. Ótimo, Então, para fazer o lado direito, podemos apenas copiar e colar, vai descobrir é enorme se declaração aqui e apenas substituí-lo aqui e alterar os valores. Então, em vez de cartão esquerdo, nós só queremos direita, direita. E então temos que mudá-lo aqui também. E se atualizarmos, você pode ver que esse título alterar o link de teste para e, em seguida, o URL também é alterado. Perfeito. Então esta é apenas uma visão geral rápida de alto nível de campos personalizados avançados e como utilizar isso para extrair conteúdo do editor e realmente mostrá-lo para o visitante do site. Na próxima seção, eu vou estar passando por cima da postagem na página ou post no site. E realmente como fazer aqueles editar o modelo e realmente exibir isso em um formato de blog ou apenas nesta página inicial em algo como um layout de três colunas. Então essa será a próxima seção. 12. Publicação de blog - marcando e estilo: Espero que estejam gostando da aula até agora. Nesta seção, vamos passar por cima de postagens de blog e como fazê-los editar o modelo e realmente fazer com que eles apareçam no site. Então vamos pular direto para isso. Faça o seu caminho até o painel WordPress e clique em postagens. Então, por padrão, o WordPress dá-lhe o post, tipo de post. Isso é normalmente o que você vai usar quando você está criando um blog em seu site? Existem tipos de postagem personalizados. Não tenho certeza se vou entrar nisso neste curso ou não. É um pouco mais de um tópico de alto nível. Isto é mais para apenas os conceitos básicos de criação de um tema WordPress. Mas de qualquer forma, de modo a criar um post wordpress dá-lhe este padrão. Eu só vou ir em frente e lixar isso e apenas adicionar um novo. E vamos dizer título de teste um e apenas conteúdo aqui para o nosso post de teste. E eu só vou copiar isso algumas vezes para preenchê-lo. E eu vou publicá-lo e depois ver o post. Então, isso é realmente usando um modelo de página sem estilo, essencialmente apenas mostrou este post. É muito desformatado. Não há estilos e ainda tem nossa barra lateral antiga, mas está usando o cabeçalho e rodapé que criamos. Então isso é bom. Então vamos entrar em como realmente ajustar este modelo aqui. Então volte para o editor de código. E você pode ver no tema pai, há um arquivo chamado single.php. O PHP. Então este é realmente o arquivo que o WordPress está usando para exibir esta postagem do blog. Então vamos roubar um pouco de código dele e fazer o nosso próprio. Então, salte para o tema filho e faça um novo arquivo. E nós vamos chamar esse único ponto de PHP. E nós vamos realmente copiar tudo do tema pai único ponto PHP, e basta colá-lo em nosso arquivo de tema filho. E vamos nos livrar disso. Vamos nos livrar dos comentários. Não queremos isso no momento. E então o rodapé principal e nós vamos nos livrar da barra lateral também. Também este principal. Ótimo. Então agora temos o cabeçalho, temos o nosso loop WordPress, e então temos o rodapé. Então vamos em frente e salvar isso e atualizar a página agora ela não deve mostrar nada. Tudo bem, agora não deve mostrar nada exceto o cabeçalho e o rodapé, que é exatamente o que queremos. E então agora vamos apenas mudar de volta para o nosso editor e realmente construir esta página. Então eu vou fazer um layout muito simples de duas colunas. Então, para começar, vamos apenas dizer recipiente div com uma linha, e então nós estamos indo apenas para usá-los classes Bootstrap aqui para fazer o lado do conteúdo. E então vamos fazer uma barra lateral aqui. E vamos dizer quatro. Perfeito. Então vamos dizer grupos do lado esquerdo. E ótimo, então vamos em frente e atualizar isso e apenas ter certeza de que temos nossa configuração de formatação e layout perfeito. E então podemos usar algumas funções padrão do WordPress, um pouco de código e realmente puxar algum conteúdo post para este modelo. Então nós queremos fazer é apenas dizer o título. E então vamos dizer PHP, o conteúdo. Então agora isso só mostrará o título e o conteúdo na página. Perfeito. Obviamente, isso não parece muito bom agora. Então vamos mudar isso um pouco. Então digamos que queremos que o título seja em um H1, então vamos fazer uma nova linha. Um. Vamos mover isto para cá. E então podemos dizer título do blog. E então vamos embrulhar isso em um div por enquanto. E vamos apenas dizer conteúdo do blog. Perfeito. E então, na verdade, vamos entrar em nossa folha de estilo personalizado que fizemos. E vamos apenas dizer título do blog, peso da fonte, negrito, preenchimento, na verdade, margem inferior 25, apenas para dar algum espaço. Perfeito. E então mais uma coisa quando é realmente empurrar isso para longe, todo este, todo, recipiente para longe do cabeçalho. Então vamos voltar para o single e vamos apenas dizer post no blog. Vamos apenas dizer 50 e, em seguida, preenchimento inferior 50, bem para empurrá-lo para longe do rodapé. Atualize isso, veremos que terá efeito perfeito, já olhando melhor. Digamos que temos uma imagem em destaque para este post no blog. E, na verdade, vamos em frente e adicionar isso agora mesmo. Então, vamos apenas clicar em Editar postagem. E, em seguida, destaque imagem à direita. Só vamos carregar esta imagem. Você pode fazer upload de qualquer imagem que você quiser. Uma atualização. Neste momento, não vai mostrar nada. Então vamos saltar para o nosso editor de código e, em seguida, o nosso arquivo PHP single.php. E logo acima do título, Vamos fazer uma nova linha com uma tag de imagem. E vamos dizer dentro da fonte, É abrir alguns colchetes PHP. E nós vamos dizer, aqui em cima, dentro de nosso loop, nós vamos apenas dizer URL de imagem em destaque é igual a obter o URL de miniatura da postagem. E aí dentro vamos dizer “pegue a identificação”. E esta é apenas uma função padrão do WordPress para obter o ID do post atual que está dentro do loop. E então vamos definir o tamanho da imagem que queremos. Queremos o tamanho completo e vamos fechar isso. Ótimo. Então, agora temos o URL da imagem em destaque de tamanho completo que acabamos de enviar salvo nesta variável. Então vamos salvar o botão ou copiar isso. E nós vamos voltar para a nossa tag de imagem e dizer ecoar essa variável. E então podemos atualizar nossa página. E agora você pode ver que nossa imagem está lá. Parece que está se sobrepondo um pouco. Podemos ajustar isso também. Mas isso é ótimo. Então vamos pular em nossa folha de estilos e editar isso. Vamos dizer post no blog. Largura máxima da imagem de 100%, altura. Auto deve conter dentro de nossa coluna. Perfeito. Então, olhando muito mais como uma postagem de blog agora temos alguma configuração de espaçamento decente. Temos nossa imagem ou título e algum conteúdo no lado direito. Normalmente, é aqui que mostraríamos artigos semelhantes relacionados a categorias ou tags que você possa ter configurado. Agora, vou colocar alguns espaços reservados lá, mas podemos mergulhar nisso agora mesmo. Então, dentro do arquivo PHP de ponto único, este lado direito, Vamos apenas fazer uma div e chamá-lo de blog relacionado. E, em seguida, dentro do rural, então eles vão ter uma linha que tem uma coluna grande poro coulomb com uma imagem. Vamos deixar isso em branco por enquanto. E depois a próxima coluna. Este será o título e uma frase curta. Pré-visualização do conteúdo. Vamos salvar isso e ver como isso se parece. Ok, então não temos uma imagem, mas este espaçamento parece bom. Há um título e, em seguida, pré-visualização. Ótimo, Então, na verdade, para obter algum conteúdo para aparecer aqui, Vamos fazer um novo post de blog titular lugar. Vamos voltar para o painel. Vamos dar um nome a este teste. Vou usar as mesmas imagens para testes. E, em seguida, algum conteúdo aqui. O conteúdo antes do teste 2 é conteúdo para o teste dois. E eu só estou fazendo isso um pouco mais para que eu possa mostrar a vocês como mostrar uma prévia em vez de todo o conteúdo publicado neste post. E, na verdade, vamos voltar e ver o nosso primeiro post que fizemos. E o que queremos fazer é que o segundo post apareça aqui. Então podemos voltar ao nosso editor. E o que queremos fazer aqui é basicamente dizer se há outro post que queremos mostrar este bloco de conteúdo, esta caixa relacionada ao blog que acabamos de criar. Então o que podemos fazer é realmente executar um, outro loop WordPress para obter postagens adicionais nesta página. Precisamos basicamente puxar outro loop para a página ou abrir ups e colchetes PHP. E vamos dizer ARDS, que é abreviação de argumentos. Array. Abra isso e vamos dizer postagem por página. Vamos definir isto para três. Isso só quer dizer que só queremos três postagens dentro deste loop. Neste momento, só temos um outro lugar. Mas queríamos limitar isto a três. Vamos dizer o tipo de post, queremos olhar exclusivamente post. E então vamos dizer o status da postagem. E só queremos as postagens publicadas. Ótimo. E então podemos fechar isso e, em seguida, vamos fazer uma nova linha e dizer a consulta que queremos executar, definir essa variável, vamos dizer nova consulta WP com nossa arte que acabamos de definir. E então vamos dizer se essa consulta tem postar uma consulta. Anfitrião. Queremos pegar a imagem em destaque. E novamente, a imagem em destaque é boa, o URL da miniatura da postagem. E então agora vamos dizer obter o ID deste post e o tamanho real realmente pode obter o polegar. Agora. Feche isso. E então vamos fechar desta maneira realmente esqueci o tempo. Enquanto. Os grupos de consulta têm publicações. E aqui em baixo, só precisamos fechá-los. Simplesmente assim. Não se preocupe, receba um erro aqui em algum lugar. Livre-se desse suporte. Ótimo. Então agora temos esta linha aqui que na verdade apenas puxa o título deste post aqui que acabamos de agarrar. E, em seguida, também podemos pegar a imagem em destaque, imagem URL. E podemos salvar isso e atualizar nossa página. E você pode ver lá nós temos a miniatura e nós realmente temos ambos os posts porque agora nós estamos apenas olhando para qualquer post e, em seguida, pegando três deles. Então, por padrão, isso realmente vai pegar a postagem atual que estamos olhando, nossas postagens secundárias que acabamos de criar. Então podemos dar mais um passo adicional para realmente excluir o post atual que estamos olhando porque nós realmente não queremos ver isso em nossos artigos relacionados ou semelhantes em nossa barra lateral. E para fazer isso, é muito fácil. Vamos voltar para o editor de código. E então aqui vamos adicionar outro argumento e vamos apenas dizer post, bata em. E eu não vou dizer loops de matriz. ID da postagem. Vá em frente e salve isso, atualize nossa página. E isso não o fez. E isso seria porque acho que tenho meus sublinhados fora do lugar. Então deixe-me trocar de volta aqui. E sim, este deve ser um e isso não deve ser muito perfeito. Então isso se livra do post atual de estar na barra lateral. Eu estou realmente indo para comentar essa linha para fora apenas possamos ajustá-los estilos aqui apropriadamente. E depois vou adicioná-lo de volta. Então comente que três fresco e, em seguida, agora ver como estes estão tocando. Nós só queríamos um pouco de separação aqui. Então, tudo o que temos que fazer é pegar essa classe que demos blogue sublinhado não relacionado, e apenas adicionar margem inferior. Vamos apenas dizer 25 pixels. Perfeito. Então agora temos uma boa configuração de espaçamento. Agora só precisamos mudar essa frase de espaço reservado para puxar o conteúdo que realmente colocamos no editor de postagem. Então, para fazer isso, vamos saltar para o PHP de ponto único. E então nós vamos dizer PHP colchetes echo, obter o sublinhado x. assim. E esta é outra função padrão WordPress que apenas puxa uma certa quantidade de caracteres do conteúdo do post e exibir que na página. Então vamos salvar isso e depois atualizar isso. Agora você pode ver que nós realmente puxamos o conteúdo real para isso. Se isso fosse parágrafos e parágrafos de conteúdo, ele ainda mostraria apenas um certo número de caracteres nesta visualização. Há algumas coisas que podemos fazer para tornar isso um pouco menor. Podemos salvar o conteúdo em uma variável e, em seguida, usar uma função PHP para aparar isso. Novamente, podemos tornar a fonte menor. Podemos fazer um monte de outras coisas. Eles meio que stylus, estilizar isso um pouco mais. Mas para os nossos propósitos, este é um bom começo aqui. Então, a próxima seção, vamos apenas passar por algumas pontas soltas aqui com o seu desenvolvimento personalizado WordPress tema. Espero que vocês tenham seguido ao longo da construção seu próprio site de teste apenas para ter uma ideia de como WordPress funciona, o que você pode fazer com ele, quais plugins você pode utilizar o tipo expandir a funcionalidade no back-end. Isso é realmente ótimo para quando você está passando o site para um cliente. Dessa forma, eles não precisam entrar em código grande para fazer grandes edições. É muito, muito útil para isso. Tenho metade de um monte de outras coisas. Eu poderia torná-lo curso mais tarde sobre como você utiliza campos personalizados avançados ao máximo e realmente construir um tema real com elementos de boa aparência, elementos funcionais e coisas assim. Espero que estejam entusiasmados. Obrigado por fazerem a aula. Como eu disse na próxima seção, vamos acabar com as coisas. 13. Mostrando posts de blog na página home: Tudo bem, então nesta última seção aqui nós vamos estar adicionando nossa postagem no blog para mostrá-los lá, bem como algumas outras coisas. Então o que vamos fazer é ir para a página inicial, clique delicioso no painel e vamos visitar o site. Ótimo, então estamos de volta à página inicial. E o que queremos fazer é logo abaixo deste cartão e este cartão queremos mostrar nossos dois posts no blog. Então vamos saltar de volta para o nosso editor de código e ir para o modelo da página inicial. E logo debaixo deste contentor aqui, vamos fazer um novo contentor. Na verdade, podemos fazer isso fora do circuito. Então vamos dizer que você fez linha div container. E eu vou fazer um simples lado a lado, 5050. E então isso será deixado e isso será ou isso. Então, sempre que atualizar, certifique-se que temos isso acontecendo. Perfeito. Tudo bem, então agora tudo o que precisamos fazer é muito semelhante ao que fizemos para a barra lateral de postagens relacionadas ou similares. Podemos realmente copiar a maior parte deste código. Então eu vou apenas ir em frente e descomentar isso, copiar tudo isso, e movê-lo para a página inicial e colá-lo. E então nós podemos realmente nos livrar disso, certo um já que nós só precisamos de um, porque ele vai funcionar duas vezes. Então posso te mostrar isso em um segundo. E então nós só precisamos, novamente fechar essas declarações. Simplesmente assim. Ótima. Então agora está definido para três. Nós só temos que postar e nós só queremos postar em que mudar isso para dois. Podemos nos livrar de nada e ficar com o resto. E vamos em frente e mudar isso para o título e atualizar. E então você pode ver teste Tidal um teste intitulado dois, esses são os títulos que demos ao nosso blog espaço reservado. Então isso está funcionando exatamente como queremos. Então vamos em frente e estilo isso um pouco mais agradável. E novamente, podemos roubar um pouco neste código. Eu só vou pegar esse recurso que já está lá. Então só precisamos desta etiqueta de imagem. Títulos. Eles realmente querem envolver neste 84 e os parágrafos. Eu só vou recopiar e colar isso aqui. E depois desce um pouco e refresque-se. E então isso deve nos dar a imagem em miniatura, o título e o conteúdo. Quero ajustar isso só um pouco. Podemos ir em frente e mudar em vez de miniatura, é meio que um tamanho médio. Vamos mudar estes H2. E então eu quero embrulhar tudo dentro de sua própria div. E nós vamos dizer blog, página. Perfeito. Este arquivo só um pouco, e depois limpe-o. Mais uma. Ótima. Vá refrescar isso, ver o que conseguimos. Perfeito, então a imagem é um pouco maior. Na verdade, vou mudar a largura total só para conseguirmos. O verdadeiro efeito aqui, porque é isso que realmente queremos. Perfeito. Então, de novo, é meio que se sobrepõe. Vamos corrigir isso com alguns estilos em apenas um segundo, mas temos um, o que queremos. Então vamos pegar essa aula e pular para nossa folha de estilo personalizado. E nós vamos dizer que a imagem também deve ser largura máxima para 100% auto. Bem, nós também queremos fazer apenas esta aula. Queremos dar uma margem superior de 50, margem inferior de 50. E então vamos dar um pouco de uma borda e talvez um pouco de estofamento. Veja como isso se parece. Tudo bem, então parece bom, combinando um pouco com o tamanho do cartão, não é exatamente o mesmo. Podemos ajustar isso, dar um pouco de um raio de fronteira. Apenas diga cinco pixels. E vamos mudar isso para algo talvez um pouco mais leve, talvez um pouco leve demais, mas você entendeu. Olhando bem. Podemos continuar com isso. Poderíamos adicionar um botão que diz ler mais que links para o artigo. Poderíamos alterar o tamanho da imagem, adicionar mais conteúdo e assim por diante. Mas é basicamente assim que você puxa uma postagem de blog em um modelo de página. Nós podemos realmente vincular a isso para que eu possa mostrar que ele remonta a esse modelo. Então, cada coisa, vamos apenas embrulhar esta coisa toda aqui dentro de um link. E este link terá a largura H de eco, obter o permalink. E tudo isso faz é um modelo WordPress, nossa função novamente, que recebe o link para o post que é o post atual no loop e apenas colocá-lo aqui. Então vamos em frente, salvar isso e atualizar. E agora você pode ver tudo isso mudou para um link e nós podemos apenas clicar nele e ele vai nos levar direto para o nosso novo modelo de postagem. Muito rápido. Vou ajustar isto. Estes links, textos, cor preta. E vamos voltar Cone. E isso não está mudando o que homepage, ambos link homepage está fora. Então podemos fazer aqui é um blogs. E depois mude isto para dizer. Tudo bem, Perfeito, exatamente o que queremos. 14. Conclusão do curso: Tudo bem, então isso encerra este curso. Obrigado por fazerem o curso. Espero que vocês fizeram todo o caminho através e achou útil e sua jornada para construir seu primeiro tema WordPress personalizado. Eu realmente gosto de ensiná-lo se vocês tiverem alguma pergunta, sintam-se à vontade para perguntar. Estou ansioso para ver o que vocês montaram. Isso tem sido muito emocionante, montando este curso, espero fazer mais no futuro e espero que vocês continuem a voltar e aprender comigo. Então, obrigado novamente. Espero que tenha gostado do curso.