Curso de desenvolvimento de temas no WordPress 5 com o Bootstrap v4

1. Introdução: Bem-vindo à WordPress Theme Development Academy usando Bootstrap. Este é um curso de desenvolvimento tema WordPress totalmente atualizado usando WordPress versão 5 e o framework bootstrap 4. Se você quiser levar suas habilidades WordPress para o próximo nível, aprendizagem desenvolvimento tema é perfeito para isso. Ele permitirá que você construa sites WordPress personalizados que olhar e sentir exatamente como você quer que eles. Ele também lhe dará uma vantagem sobre outros desenvolvedores WordPress usando os temas pré-construídos e tentando personalizá-los com base exatamente o que eles estão tentando construir. Isto é o que você poderá construir até o final deste curso. Até o final deste, você será capaz de construir quase qualquer tipo de novo site que você quer usando WordPress ou tomar qualquer site existente e convertê-lo em um tema WordPress. O que é exatamente um tema WordPress? Para ver o que o WordPress pode fazer, vamos dar uma olhada em alguns exemplos. Esta é a página do blog para o tema que vamos construir juntos. Temos o cabeçalho na parte superior; vinculando as páginas inicial e do blog, uma legenda, uma imagem de cabeçalho e uma sobreposição de texto. Então abaixo de nós temos a postagem do blog listada à esquerda e, em seguida, a barra lateral à direita. Em seguida, usando exatamente a mesma versão do Wordpress e exatamente o mesmo conteúdo, tudo o que eu fiz aqui é mudar para um tema diferente com o clique de um botão. Este tem o mesmo post de blog e também podemos ver os links de página são os mesmos, mas uma aparência completamente diferente. uma vez alternando o tema mais uma vez, é assim que vamos olhar usando outro tema pré-construído. Isso muda completamente nossa página de blog e todas as outras páginas em nosso site. Também o mesmo para este exemplo dois, mudando completamente o campo de nossos sites Wordpress. Neste curso, não estaremos apenas fazendo o tema WordPress mínimo nu, vamos começar criando uma versão HTML e CSS estático deste tema usando Bootstrap 4. Aprender Bootstrap também é uma habilidade valiosa em si, mas então passamos para a configuração do WordPress e olhando exatamente o que é necessário para converter este site em um tema. Nós cobrimos todas as etapas, incluindo alguns dos conceitos mais avançados e desafiadores, como campos personalizados, tradução de temas, formulários de pesquisa personalizados, usando ganchos, e também algumas funções personalizadas para obter a funcionalidade exata que queremos. Se você quiser levar a sério sobre o desenvolvimento do tema WordPress, inscreva-se neste curso e eu vou vê-lo na aula. 2. O que é um tema do WordPress?: Sabemos que para este curso vamos construir em um tema WordPress. Mas o que é exatamente um tema WordPress? Bem, apenas documentação oficial do WordPress. Na seção do que é um tema, podemos ver que um tema Word Press e muda um design dos sites, e muitas vezes mudando o layout, que irá então mudar como o usuário final vê nossos pontos de vista no front-end, ou seja, o que um visitar a doença. Basicamente, um tema pode ter layouts diferentes, ele pode usar layout estático ou responsivo. Estará usando Bootstrap para criar um layouts responsivos com várias larguras de coluna. Isso geralmente leva todo o outro conteúdo do WordPress, bem, se essa é a página é que criamos, vamos se que qualquer post de blog, qualquer mídia, como imagens de vídeos e exibi-los de qualquer forma que criamos em nosso tema. Indo mais para baixo, os temas são compostos de alguns arquivos necessários, como o index.php, e também o style.css, e vamos adicioná-los em nosso tema em breve. Nós também estaremos adicionando muito mais arquivos de template PHP, nós também estaremos criando arquivos para Localização, que é o que traduz nosso tema. Será usado em vários arquivos CSS e JavaScript para incluir Bootstrap e geralmente todo o resto do conteúdo que precisaremos para construir nosso tema. Se olharmos para o lado acabado aqui, esta é a pele do tema que vamos construir para todo este curso. Ele irá incluir muitas colunas Bootstrap, linhas, imagens e texto para criar a versão final, que você vê aqui. Se formos para a seção do blog, ele vai ser todos os posts do blog que vamos criar no WordPress, e ele vai percorrer através deles e exibi-los todos nesta página, juntamente com a nossa barra lateral no lado direito, que nos permitirá pesquisar através desses posts. E também filtre pelos arquivos, as categorias, ou quaisquer tags que serão adicionadas. Se formos para o painel e, em seguida, na seção tema, este é o tema spa Tranquil que temos ativado. Ao instalar o WordPress também temos temas padrão que vêm com ele. Vou ativar um tema diferente chamado 2019. Então, se voltarmos ao nosso site e atualizar, vemos essas mesmas duas páginas de casa e blog. Como ele está usando a mesma informação, que está atualmente no WordPress, vamos apenas criar em um layout diferente. Nós também temos nossos mesmos posts no blog. Embora um estilo diferente e o layout tenham sido aplicados, este é exatamente o mesmo conteúdo, mas apresentado de maneira diferente. Também temos a nossa barra lateral na parte inferior. Estes são os mesmos blocos de conteúdo que criamos em nosso tema, mas apenas dispostos de uma maneira diferente. Voltar para a seção temática, vamos dar uma olhada em mais uma. Este é o tema de 2017. Vamos dar uma olhada nisso, começando pelo lar. Isso novamente parece completamente diferente. Embora ainda tenhamos nossas mesmas páginas, ele tem uma sensação completamente diferente do nosso site original, e isso é o que um tema fará, clicando no blog. Ainda vemos todo o mesmo conteúdo, como as postagens do blog que estão todas listadas. Você vê essas mesmas imagens em destaque que foram adicionadas, e também esta barra lateral à direita tem todos os mesmos blocos de conteúdo apenas reorganizados de uma maneira diferente. Este é o poder que temos como desenvolvedor de temas. Podemos criar qualquer tipo de site que queremos usando WordPress, e isso nos permitirá criar o nosso site spa Tranquil como passamos pelo curso, juntamente com dando-lhe essas habilidades e conhecimento para construir qualquer tipo de site WordPress que você gostaria, seja para você, ou para um projeto, para o negócio ou para os clientes. 3. Configurando o Bootstrap 4: Bem-vindo à seção Bootstrap deste curso. É aqui que iniciamos as coisas com a criação do nosso tema personalizado. Esta seção é tudo sobre a criação de um HTML estático e sites CSS. Hamel criou exatamente como queremos que o nosso tema Wordpress pareça. No entanto, não se preocupe com WordPress no momento, que é cobrado isso como faríamos com qualquer site HTML normal. Em seguida, lidar com a conversão para WordPress em uma seção posterior. A primeira coisa que precisamos fazer é pegar o núcleo do Bootstrap, CSS e arquivos JavaScript. Para fazer isso, precisamos de cabeça para obter bootstrap.com. Isso nos levará para a versão quatro do Bootstrap. Estou usando a versão 4.3, e eu recomendaria que você use o mesmo, se possível. Para começar com o Bootstrap, vou passar para a documentação na seção de introdução. Aqui temos alguns links de início rápido, temos um link CDN para o CSS, e também o JavaScript. Então, abaixo disso, temos um modelo inicial para nossa página de índice, e vamos voltar e pegar isso em breve. Embora eu vá clicar no botão de download do menu e, em seguida, clique no link CSS e JavaScript compilado e, em seguida, começa o download com este botão aqui. Óbvio neste CSS compilado e JavaScript download, que vamos começar muito rapidamente. Uma vez feito isso, podemos clicar no pacote e descompactar. Assim que isso for descompactado, vou mover isso para a área de trabalho. Vamos arrastar isto, e depois vou mudar o nome disto. O nome que vou chamar a isto é tranquil-bs. Isto é para a versão de impulso tranquilo do nosso projeto. Mais tarde irá criar um tranquil-wp, que é para a nossa conversão Wordpress. A próxima coisa que queremos fazer é pegar as imagens. As imagens estão incluídas neste curso. Vá em frente e pegue aqueles se você ainda não fez isso, e então arraste isso para a nossa pasta. Eu teria o Visual Studio Code aberto aqui, e você pode usar qualquer editor de texto que você gosta para este curso. Para começar no VS Code só precisamos arrastar sobre nossa pasta do projeto, e então isso abrirá com o conteúdo em ciber-cibernético. É versão compilada usa vários arquivos CSS e JavaScript. Eu só vou estar usando o bootstrap.min.css para este curso. Que é uma versão minificada do CSS principal, que inclui os layouts e componentes disponíveis do Bootstrap que precisamos. Também há versões diferentes, se você quiser fazer uso da grade CSS ou reinicializações do Bootstrap, e você pode descobrir mais sobre o que está incluído nesses arquivos na documentação do Bootstrap, se quiser. Em seguida, temos a pasta JavaScript, que está bem no botão aqui. O mesmo vale para o JavaScript, eu só vou estar usando o arquivo bootstrap.min.js principal. Então, é claro, temos as imagens que são fornecidas para este curso. Você também saberá que não é um arquivo index.html. Isso não é fornecido, então precisamos ir e criar um nós mesmos, nas raízes deste projeto. Na rota principal, vamos clicar no novo arquivo e vamos criar nosso index.html. Se voltarmos para o navegador e, em seguida, voltar para a seção de introdução. Agora podemos copiar os modelos iniciais que procuramos antes, você pode, no entanto, selecionar todos e copiar, ou você pode simplesmente clicar no botão copiar no canto superior. Copie isso e depois para o nosso index.html. Agora podemos colar isso. Primeiro de tudo, temos o CSS Bootstrap, que está na seção principal. Este kit inicial básico aponta para os arquivos CSS e JavaScript que precisamos do bootstrap e estes hospedados em CDN. Você pode ver por esses links aqui. Vamos mudar isso para apontar para nossos arquivos locais que adicionamos em nosso projeto, começando com o CSS Bootstrap. No href, podemos remover isso e, em seguida, podemos apontar isso para a nossa pasta CSS, css/bootstrap.min.css. Abaixo, podemos então olhar para nossos JavaScripts, rolar para baixo até a parte inferior das seções de script, temos três scripts diferentes aqui. Primeiro de tudo, temos jQuery, que podemos deixá-lo por enquanto, já que não temos isso instalado em nosso projeto. Também podemos remover o Popper.js, que é o script do meio apenas aqui. Isso não é necessário para nossos projetos, e isso é necessário apenas para determinados componentes do Bootstrap, como ao usar dicas de ferramentas e links descartados. No entanto, se você pretende personalizar o modelo, recria, fazer uso destes, você pode, claro, deixar isso em, então precisamos mudar o arquivo Bootstrap JS núcleo para apontar para o nosso arquivo local. Se removermos a fonte aqui neste link CDN, então muda para nossa pasta JavaScript e o arquivo que queremos é bootstrap.min.js. Junto com o CSS bootstrap que foram fornecidos, nós também queremos adicionar nosso próprio estilo personalizado. Para substituir qualquer um dos estilos padrão Bootstrap, que podemos lidar com um arquivo CSS personalizado. Voltar na barra lateral, na pasta CSS e criar um novo arquivo, e é chamado Custom.css. Levaria a, em seguida, vincular isso no index.html para pontos para este novo arquivo. Abra na parte superior, vamos adicionar isso logo após o núcleo Bootstrap CSS. Vamos adicionar um comentário de CSS personalizado. Podemos então adicionar o nosso link. Esta folha de estilo é uma folha de estilo e href aponta para a nossa pasta CSS, e o nome era custom.css. Como acontece com qualquer projeto sobre site, devemos incluir nossas próprias folhas de estilo personalizadas por último. Eles serão então carregados por último e substituirão qualquer uma das folhas de estilo acima, se necessário. No nosso caso, o CSS Bootstrap personalizado. A última coisa a fazer é mudar este título da página para ser spa tranquilo. Podemos salvar este arquivo, eu vou para o index.html, copiar o caminho e, em seguida, colar isso em uma nova guia do navegador, para abrir isso. Você também pode ir para a pasta do projeto e clicar duas vezes na página de índice a ser levado para isso, e agora vemos o texto Hello World, que é do nosso código de exemplo, que é h1 apenas aqui. É isso agora para a configuração do nosso projeto. Eu vou vê-lo agora no próximo vídeo onde vamos começar a personalizar nosso tema adicionando Google Fonts. 4. Adicionando fontes personalizadas do Google: Uma vez que estamos criando nosso próprio tema personalizado, estamos livres para fazer uso de qualquer tipo de fonte que gostaríamos. Eu vou fazer uma notícia de uma fonte do Google em seu tema, e você pode, claro, escolher qualquer um daqueles que você preferir. Você pode fazer uma pesquisa por fontes do Google, ou você pode ir para fontes dot google.com. Dê uma olhada através destes e selecione qualquer que você preferir para o tema, ou você pode seguir junto com o mesmo que eu, que vai ser chamado de merriweather, então vamos fazer uma busca por merriweather e este é um que queremos apenas aqui. A partir do menu suspenso aqui podemos selecionar qual versão queremos. Vou usar uma versão light, que é light 300, então selecione isso, e então para adicionar isso, podemos clicar no símbolo mais aqui. Isso, em seguida, adicioná-lo na parte inferior e, em seguida, podemos expandir isso para obter algumas das informações que precisamos para incluí-lo em nossos projetos. Isso é tudo o que podemos incluir nesta folha de estilo em nosso projeto copiando o link apenas aqui e, em seguida, passar para a nossa página de índice. Feche estes para baixo, de modo que o index.html, e, em seguida, incluímos isso logo acima do nosso CSS personalizado, assim fontes personalizadas. Então, logo depois disso, podemos colar isso. Agora podemos voltar aos sites do Google Fonts e você pode ver como definir isso como uma regra CSS em nossas folhas de estilo personalizadas. Na parte inferior, podemos copiar esta linha aqui, que é para a família de fontes, e depois em nosso CSS personalizado, que é neste final. Vamos primeiro pegar o seletor de corpo e, em seguida, colar na família de fontes, que vai procurar por um merriweather se ele pode ser encontrado, se não, ele será padrão de volta para um serif padrão. Guarde isso, e depois volte para o navegador, recarregue nossa página de índice, então os fatores precisam salvar. O index.html dá que um salvamento e, em seguida, recarregue. Agora veja as fontes personalizadas entrou em vigor no navegador, e isso é tudo o que precisamos fazer para incluir fontes personalizadas do Google em nosso projeto. Em seguida, vamos passar para a criação de uma seção de cabeçalho. 5. Navegação do cabeçalho: Atualmente, temos apenas um exemplo básico Hello World a partir dos modelos iniciais bootstrap. Quando os órgãos alteram isso adicionando a navegação superior, ele irá para a versão final aqui. Esta vai ser a barra de navegação superior, que é aqui. No lado esquerdo, teremos um link inicial com o título do site. E então, à direita, teremos nossos links. Se reduzirmos o navegador para baixo, isso será totalmente responsivo, e isso também será descartado para um botão, que quando clicado nele para obter nossos links de menu em dispositivos menores. Vamos começar de novo no index.html. A primeira coisa que eu vou fazer para não ter quaisquer problemas no CSS Bootstrap, Eu quero saber se esses dois atributos de integridade e também o último de origem cruzada, em seguida, trazer isso de volta para cima na mesma linha. Também o mesmo para o JavaScript na parte inferior. A única maneira que ligamos nossa versão minificada, podemos remover a origem cruzada sobre a integridade e, em seguida, dar isso um salvamento. O próximo passo é remover o nosso HelloWorld. O código de exemplo. Não precisarei mais disso. Em vez disso, vamos começar com um cabeçalho. Abra o cabeçalho e, em seguida, aninhado dentro temos os elementos nav. No elemento nav vai conter duas coisas. Em primeiro lugar, no lado esquerdo, vamos ter o título do site, que você parece, e então o menu se liga à direita. Esses links de menu entrarão em colapso no botão suspenso em dispositivos menores. Vamos começar adicionando estes agora. Vamos começar com o nosso link, que vai ser para o título do site de spa tranquilo. Isso vai ter algumas aulas de Bootstrap, se salvarmos isso, e depois confira isso. Podemos ver que são apenas textos padrão no momento. Vamos começar nos elementos nav adicionando algumas classes Bootstrap. O primeiro é a barra de navegação simples. Se dermos a isso um salvamento e depois recarregar, podemos ver que isso agora é movido para dentro da borda superior. Podemos ver quais estilos foram aplicados indo para as ferramentas de desenvolvedor com o botão direito do mouse e inspecionar. Se, em seguida, clicar no seletor e, em seguida, ter sobre a nossa barra de navegação. Certifique-se de que esta navline está realçada e, em seguida, à direita, podemos ver quais estilos foram aplicados por bootstrap desta classe navbar. Podemos ver que ele usa a caixa flexível CSS como o tipo de exibição. Também estamos usando algum preenchimento que se moveu do canto superior, o que já vimos antes. Podemos adicionar classes adicionais a isso também assim, logo após a barra de navegação, mas adicionar navbar, expand-md, dar isso um salvamento e esses estilos serão aplicados sobre os dispositivos de tamanho médio. Se recarregar isso, podemos ver na consulta de mídia, esses estilos serão aplicados quando a largura mínima da tela é 768 pixels. Se encolhermos isto abaixo de 768. Só um pouco mais, nós carregamos. Podemos ver que agora temos a barra de navegação aplicando de antes. Já não temos a segunda classe a candidatar-se. Esta classe de expansão navbar irá definir o CSS flexionado com a linha sem rap, como podemos ver aqui, e justificar o conteúdo ser flexionado início, que é sobre no lado esquerdo. Então vamos adicionar algumas cores de fundo para que isso se destaque um pouco mais. Logo depois disso, podemos adicionar a luz navbar e também bg-light. Podemos usar qualquer combinação dessas cores aqui. Estou usando a luz da barra de navegação, que costumava ser usada com cores de fundo claras, e depois bg-light para especificar a cor de fundo real da luz do nav. Se recarregarmos, agora podemos ver toda essa diferença em segundo plano. Agora vamos trabalhar com o nosso link de spa tranquilo. Isso vai ter uma classe, uma classe bootstrap da marca Navbar e então podemos simplesmente adicionar um vazio [inaudível], o link para a nossa página inicial. Se agora salvarmos isso e recarregar o navegador, veremos que isso aplica um estilo, cor e propriedades de espaçamento ao nosso link. Em seguida, vou criar o botão, que é para o nosso menu suspenso. Apenas um botão HTML normal. Então aqui dentro, podemos adicionar algumas classes Bootstrap. O primeiro vai ser navbar-toggle, e, em seguida, os atributos de tipo de botão. Nós não vamos adicionar nenhum texto aqui dentro porque em breve estaremos adicionando um ícone e este ícone é as linhas livres que você vê na versão final do no canto. Assim, os próximos dois atributos que adicionamos o botão serão relacionados com a tela pequena e o conteúdo drop-down que ele controla. Primeiro de tudo, vamos adicionar a alternância de dados para ser igual ao colapso, e então nós também podemos adicionar o destino de dados, e vamos definir isso para ser igual a ajuda. Então vamos adicionar o hash e chamar isso de navbar nav. Aqui vemos uma boa alternância de dados e declaramos que queremos que o conteúdo colapse quando este botão foi clicado. Mas qual conteúdo queremos entrar em colapso? Bem, se olharmos para a versão final, isso vai entrar em colapso e expandir este menu de navegação. Ainda não criamos isto, mas assim que o fizermos, vamos dar este AID de navbar-nav. Este data-target pode ser qualquer seletor CSS que queremos. Então vamos usá-lo como JavaScript normal. Se você quiser classe de destino, podemos usar o ponto ou usar o hash para um ID. Pouco antes de criarmos a div que queremos controlar pelo botão. Eu vou adicionar um span, que vai adicionar nos ícones que acabamos de ver antes. A extensão vai ter a classe para adicionar esses ícones no ícone de alternância barra de navegação. Vamos verificar isso no navegador, e abaixo, até a tela mais pequena e agora temos o botão com os ícones livres do nosso spun. Se expandirmos o navegador, também devemos ver que este botão desaparece porque adicionamos isso expandir em dispositivos médios. Agora vamos criar nossos links div siga. Este vai ser o contêiner para a nossa casa e nosso link de navegação do blog e vai ser o contêiner, que é botão alterna abrir e fechar. Vamos trabalhar logo abaixo do nosso botão. Vamos adicionar o nosso div que é o nosso recipiente. A primeira classe será igual ao colapso. Isso é usado para ocultar o conteúdo quando precisamos. Em seguida, temos o colapso da barra de navegação. A segunda classe bootstrap irá agrupar todos os conteúdos juntos, e também será usado em conjunto com a barra de navegação expandir md. Ele sabe esconder este contêiner sob esses pontos de interrupção e o terceiro é para a caixa flexível CSS, isso é justificar conteúdo final e isso vai empurrar nossos links para o lado direito da navegação. Dentro desta tabela, podemos ir em frente e criar nossos links, que vai ser uma lista desordenada. Lista desordenada também leva em algumas classes são o estilo e layout eo primeiro vai ser navbar-nav. Em seguida, adicionamos nossos itens de lista. As classes itens de lista vão ser item nav, e então aninhado dentro temos um link usando um elementos com os textos de casa. Este link vai ter uma classe de link nav e, em seguida, podemos definir o rascunho de ódio para apontar para o nosso HTML ponto índice. Bom, vamos copiar isso e adicionar mais uma vez para o nosso blog. Este primeiro item da lista, cole isto em. Isto vai ser para o blog e você também pode mudar o href para ser o nosso blogue dot HTML. Claro, nós não criamos isso, mas vamos chegar a isso em um vídeo mais tarde. Então, guarde esse arquivo e depois para o navegador. Vamos recarregar e expandir isso. Vemos nas telas maiores que temos nossos links de casa e blog, e depois encontra para o botão é esconde o conteúdo nesses pequenos dispositivos. Mas se clicarmos neste botão no canto superior, não vemos os links caindo. Isso ocorre porque se formos para o nosso botão, definimos o alvo de dados de navbar-nav. Ambos não adicionou isso ao nosso recipiente. Dentro desta div, vamos adicionar o ID de navbar-nav. Dê isso um salvamento, recarregue o navegador e agora temos um trabalho no menu suspenso. Expanda isso e isso agora volta para a exibição de tela cheia. Bom, então este é agora para o menu, e vamos continuar com o cabeçalho seguinte quando adicionarmos a imagem de fundo em destaque. 6. Seção “Imagem em destaque”: A próxima etapa do nosso cabeçalho é adicionar esta imagem em destaque, que é o fundo que vemos aqui. Mais tarde no curso, também nos permitirá ser alterado no painel WordPress sobre um controle pelo usuário. Primeiro, vamos em frente e adicionar uma nova seção e ainda dentro deste elemento de cabeçalho. Vamos localizar a tag de cabeçalho de fechamento. Então podemos criar uma nova seção. A seção vai ter uma classe Bootstrap de fluido contêiner. Para colocar uma página no Bootstrap, usamos uma série de contêineres, linhas e colunas, que usa a caixa flexível CSS sob o capô. Há uma classe de contêiner que agrupa o conteúdo em um contêiner de largura de pixel responsivo, o que deixa uma lacuna no lado direito e esquerdo da página. Vamos analisar esta alternativa em breve. Há este fluido recipiente como acabamos de usar aqui, que fornece um recipiente de fluido que se estende para 100 por cento da largura da tela disponível. Com se tipo ele pode ser usado como uma referência ao centro e parte do nosso conteúdo dentro. Aninhado dentro deste recipiente, adicionamos uma classe de linha. Linhas nos permitem conteúdo NES dentro e suspira o conteúdo usando colunas, e veremos isso muito em breve. Mas, por enquanto, vamos adicionar a nossa linha. Esta vai ser uma aula em um invólucro div. Aqui dentro podemos adicionar nossa imagem, que será a imagem de fundo que já vimos antes. A fonte da imagem será da pasta de imagens que foram fornecidas com este curso. Lá dentro, há uma imagem chamada Lake.JPEG. Também podemos adicionar o texto antigo de fundos do lago, em seguida, uma classe que é uma classe personalizada, vamos chegar a breve de Header_IMG. Logo após esta imagem, nós também vamos adicionar uma div. Esta div vai ser para o texto que é colocado sobre a imagem. Em seguida, dentro podemos adicionar os elementos p para adicionar algum texto. Eu vou adicionar totalmente ágil tema caminho prémios para WordPress. Você pode adicionar qualquer texto que você gosta aqui dentro, e então vamos adicionar algumas tags de quebra, apenas para dividir isso em duas linhas diferentes. Isso depois responsivo e também depois do tema. Podemos controlar esses textos no CSS. Nós também precisamos adicionar uma classe. Esta é novamente uma classe personalizada de texto de feição. O texto do recurso é uma das nossas próprias classes personalizadas e nada a ver com Bootstrap. Nós simplesmente vamos tirar proveito de nossas próprias classes também para que possamos controlar esses textos no CSS, ou para o navegador. Em seguida, recarregue, há a nossa imagem e também o nosso texto. Nosso texto está agora sentado abaixo da imagem. Este não é o resultado que queremos para o nosso projecto final. Nós estamos indo para ir em frente e adicionar algumas classes CSS personalizadas e também algumas classes Bootstrap também, para fazer este texto sobrepor a imagem. Primeiro vamos configurar as classes Bootstrap. Podemos definir a linha circundante para ser uma posição de relativo. Vamos para a nossa linha circundante que é apenas aqui, podemos adicionar a posição de bootstrap relativa, e isso é exatamente o mesmo que entrar em nosso CSS e definir em uma posição relativa, mas desta forma é apenas uma classe bootstrap, e, em seguida, bootstrap cuida de adicionar todo o CSS que precisamos. Se salvarmos isso e, em seguida, recarregar, abrir as ferramentas de desenvolvedor, você vê a classe relativa posição acrescentou o valor de posição CSS de relativo, e, em seguida, bootstrap também é adicionado importância no final. Apenas certifique-se de que nada substitua isso. Em seguida, precisamos definir o texto para ser uma posição absoluta. Na div que envolve nossos elementos p, uma classe, nossa posição absoluta. Eles agora devem mover o texto. Se recarregarmos o navegador sobre a parte superior da imagem, definindo o texto para ser uma posição absoluta, vamos tirar o texto do fluxo normal da página web. Em seguida, posiciona-se no recipiente relativo mais próximo, que é a nossa linha, a próxima etapa, é centralizar este texto no meio da imagem. Vamos fazer isso indo para a nossa fileira, que é aqui. Podemos definir o tipo de exibição para ser flexbox com o fluxo de traço. Também podemos definir o valor flexbox de justify centro de conteúdo, que irá alinhar o conteúdo no centro do eixo principal. Salve e recarregue. Isso nos deixa no meio do caminho, agora temos o conteúdo no centro horizontalmente. Agora só precisamos do alinhamento vertical também. Estou olhando para fazer isso adicionando mais uma classe à nossa linha. Esta classe é alinhar itens, centro do navegador e lá vamos nós. Posicionamento como este costumava ser muito mais difícil antes da flexbox. Ambos os itens align propriedade central, vai alinhar nosso conteúdo agora na cruz ou eixo oposto, que nos dá alinhamento horizontal e vertical perfeito. Um pequeno ajuste que podemos fazer é definir o texto para ser centralizado também. No momento, está tudo alinhado à esquerda do contêiner. Novamente, podemos aplicar isso à nossa linha logo após o centro de itens de alinhamento. Podemos adicionar centro de texto e lá vamos nós. Agora podemos terminar esta seção com um pouco de CSS personalizado. Nós já temos uma classe personalizada de imagem de cabeçalho que vai usar agora. Agora vamos adicionar um ao nosso texto ao redor div dois. Aqui está o nosso texto e no recipiente circundante, após a posição absoluta. Vamos adicionar recurso traço BG, isso será usado para adicionar a caixa circundante. Se formos para a versão final que rodeia os textos, para que possamos escrever um pouco mais facilmente sobre a imagem. Esse plano de fundo também seria 60 por cento do contêiner em telas maiores e, em seguida, saltar para ser a largura total em telas menores. Vamos começar a trabalhar mais no CSS personalizado. primeiro passo é definir a imagem para uma largura máxima de 100 por cento. Podemos então usar a classe recurso BG para começar a criar nosso fundo. O plano de fundo será criado usando uma cor RGBA. Então nós damos a ele essa transparência agradável que podemos ver aqui. Os quatro valores vai ser 255, 255, 255 e, em seguida, o quarto é para a opacidade. Vou definir isso para 30 por cento, que é um valor de 0,3. Certifica-te de que isto é um traço. Agora, na largura, a largura será de 100 vw para as telas maiores, que abrangerão toda a largura do navegador ou da porta de exibição. O raio de fronteira de 10 pixels, nos dá um salvamento. Abra a guia e recarregue. Não mudou muito lá, acho que só precisamos salvar o índice para a classe personalizada. Dê uma chance a isso. Agora vamos fazer isso um pouco maior. Temos uma div envolvente de texto de recurso. Vamos pegar isso. O tamanho da fonte será dois REMS. Também a altura da linha que aumentam para ser quatro REMS, recarregar. O próximo passo é adicionar uma altura mínima à nossa imagem de cabeçalho. Vamos rolar para baixo até o cabeçalho sublinhado IMG, Tudo o que vamos fazer aqui é definir a altura mínima da velocidade da imagem 25 VH. O que significa que a imagem sempre terá um mínimo de 25% da altura da barra de visualização. A última coisa a fazer em nosso CSS é criar uma consulta de mídia. Se olharmos para a versão final, fazer a largura deste fundo 60 por cento nas telas maiores. Como mídia, vamos direcionar as telas. Também podemos igualar nossos pontos de interrupção com os pontos de interrupção Bootstrap. A largura mínima de 768 pixels. Indo pegar o recurso BG e definir a largura para ser 60 vw. Em telas maiores, o fundo será 60 por cento, em seguida, em telas menores, o fundo será um 100 por cento. Salve este arquivo, no navegador. Se o encolhermos e fecharmos as ferramentas de desenvolvimento para obter mais espaço, o fundo e os textos da nossa pequena tela terão a largura total. Se aumentarmos o espaço disponível na tela, isso agora cai para 60 por cento, que é exatamente o que queríamos. Isto é para o nosso cabeçalho agora. Antes de irmos, quero mostrar-vos a diferença entre o contentor e o fluido do contentor. Atualmente, definimos a seção para ser fluido de contêiner. Se nós apenas definir isso para o contêiner e, em seguida, recarregar, isso torna o contêiner uma largura baseada em pixels fixa, o que significa que há um espaço em branco no lado esquerdo e direito. Onde como fluido recipiente que tínhamos antes, vai esticar para toda a largura do navegador, e vamos fazer mais uso desses contêineres à medida que passamos pelo resto do curso. 7. Seção “Boas-vindas”: No último vídeo, terminamos a seção de cabeçalho. Se você der uma olhada na versão final, agora vamos descer para esta seção “Bem-vindo”, que vemos aqui. Isso nos dará a chance de trabalhar com colunas para colocar conteúdo em partes iguais ou três partes no nosso caso. Se encolher o navegador, vemos esta seção, juntamente com todas as pequenas seções, é totalmente responsivo. Em seguida, vamos estocar em uma visualização de tela menor. No ponto de índice HTML. Este conteúdo irá logo abaixo do cabeçalho que terminamos. Vamos fazer isso agora. Localizamos a tag de cabeçalho de fechamento. A primeira coisa a fazer é criar uma div. Isso vai ter uma classe de fluidos de contêiner, assim como a seção de cabeçalho, fez também. Em seguida, também uma classe de Tech Center, para adicionar o nosso posicionamento de texto. Então vamos adicionar um pouco de estofamento. Vamos usar isso com PY-5. Agora isso pode parecer um pouco confuso. Vamos para a documentação do Bootstrap na barra lateral. Se formos para utilitários e depois para o espaçamento. Isso explica como podemos usar margem e preenchimento como nossos nomes de classe. Precisamos construí-los com um P para preenchimento ou um M para margem. No nosso caso, usamos py-5. P para preenchimento e, em seguida, podemos usar, os valores superior, inferior, esquerda e direita. Ou podemos definir o x e y para aplicá-los à parte superior e inferior ou esquerda e direita, seguido por um tamanho de zero a cinco. No nosso caso, o py é certamente o valor de preenchimento na parte superior e inferior. Ele também pode ter um jogo com esses valores diferentes também para ver o seu projeto. A próxima coisa que eu quero fazer é criar uma linha que vai ser wrapper para nossos textos e também este ícone no meio. Dentro do nosso recipiente, vamos adicionar uma segunda div com a classe de linha. Em seguida, aninhá-lo dentro aqui podemos adicionar nossas colunas, Bootstrap usa uma grade de 12 colunas. Se definirmos uma div para ter seis colunas de largura, ela ocupará metade da largura da tela. No momento, cada uma delas tem quatro colunas, então quatro, quatro e quatro. Também podemos definir o nosso texto de boas-vindas ao spa tranquilo para ter o tamanho de seis colunas. Em seguida, deslocá-lo por um valor de três, que irá empurrar isso para o meio. Dando três colunas à esquerda e depois três colunas à direita. Dentro da nossa linha, vamos adicionar o div. A classe para definir nossas colunas será chamada -md, -six, significa que esta será a largura de seis colunas em dispositivos médios e acima, toda a largura total em dispositivos menores. Como mencionamos antes, também podemos compensar isso em dispositivos médios por três colunas. Se eu salvar e recarregar agora, você não verá nada porque ainda não adicionamos nenhum conteúdo. Se adicionarmos o nosso nível três a entrar aqui com um texto de “Bem-vindo ao Spa Tranquil”. Agora devemos ser capazes de salvar e, em seguida, ver algo na tela. O título de nível três ocupa seis colunas ou metade da grade de 12 colunas. As seis colunas restantes foram divididas em ambos os lados porque nós compensamos isso por um valor de três. Em seguida, precisamos adicionar nosso ícone ou nossa imagem logo abaixo. O código-fonte, isto está na pasta Imagens. A imagem que foi fornecida para este é divisor roxo, o texto antigo do divisor dois. Em seguida, uma classe de W25. Novamente, se voltarmos para os utilitários Bootstrap, podemos dar uma olhada no tamanho. W25 definirá a largura para 25 por cento. W50 definirá a largura para 50 por cento e assim por diante. Salve isso e, em seguida, podemos verificar isso em nossa recarga de projeto. Ok, bom. A próxima etapa é descer e adicionar essas imagens. Estas imagens também vão ter um wrapper que vai ser um div. Esta vai ser uma linha separada também porque estamos em uma nova linha. Então dentro desta linha vamos criar três novas divs. Cada um com uma largura de quatro colunas. Logo depois desta fileira aqui, mas ainda dentro do nosso contentor. Isso é apenas um erro de ortografia. Certo, logo após essa div aqui, vamos criar algum espaço e depois adicionar uma nova linha. A div com a classe de linha, também vai adicionar algumas classes adicionais a esta div. Nós também vamos adicionar alguma margem para o topo. Adicione algum espaçamento que é um valor de quatro. Indo para definir o tipo de exibição para ser flexível usando d flex e , em seguida, adicionar algum espaçamento Flexbox com justify conteúdo ao redor. Aqui dentro podemos dar uma olhada melhor em como as colunas funcionam. Podemos então adicionar uma classe de col sm quatro. O que significa que está em telas pequenas e acima desta tabela, metade da largura de quatro colunas. Se colarmos isso em mais duas vezes, digamos a, b e c. Confira isso no navegador. Cada uma dessas três divs ocupará um espaço igual. Em vez de a, b e c, queremos adicionar uma imagem e, em seguida, algumas texturas abaixo. Vamos remover esses dois divs por enquanto. Em vez de um, podemos adicionar uma imagem. A fonte da imagem será a pasta de imagens. Em seguida, o makeup.jpeg, compõem a imagem como o alt. Em seguida, podemos adicionar algumas classes Bootstrap aqui. Vou construir isto como um cartão Bootstrap. Passará para a documentação. Nós vemos como cartão vai se parecer. Se formos para os componentes, então para baixo para um cartão. Há muitas variações diferentes que podemos usar. Eu quero usar um muito simples para obter um layout muito semelhante a este. Nós vamos usar o cartão na imagem do cartão, imagem superior. Corpo do cartão para a seção de bombas. Em seguida, cartões de texto para o conteúdo real, o que nos dará algum layout agradável e estilo. Primeiro de tudo, na imagem, podemos adicionar a classe de cartões img topo. Em seguida, uma div para o conteúdo real logo abaixo. Esta div terá uma classe de corpo do cartão. Em seguida, aninhado dentro do nosso texto. Aqui uma maquiagem. Em vez do e comercial, vou usar uma entidade HTML de AMP. Este texto precisa de uma classe de texto de cartão. Certo, então guarde isso e veja como isso está parecendo. Nós só temos uma div por minuto, então isso é centrado no meio, mas isso será empurrado para o lado uma vez que adicionamos nosso segundo, e terceiro div. Se dermos uma olhada na versão final, podemos ver na imagem que tem esses cantos arredondados. Esta é uma nova classe utilitário Bootstrap que está sendo fornecido. Podemos adicionar isso como uma classe na imagem do topo da imagem do cartão. Este é um círculo arredondado. Isto é tudo o que precisamos adicionar para agora transformar a nossa imagem. Em vez de digitar todas essas classes novamente, eu vou copiar esta div e depois colar isso em mais duas vezes. O do meio, se olharmos para o projeto final, este vai ser a imagem de velas e, em seguida, precisa de textos de instalações de spa, este provavelmente maquiagem, este é candles.jpeg, o texto antigo da imagem de velas, em seguida, instalações de spa. Todo o resto das aulas permanecerá o mesmo. O terceiro será para o retiro, retreat.jpeg. A imagem de maquiagem é agora imagem de retirada. Depois o texto no final, vou fazer uma visita guiada. Ok, vamos ver como isso está olhando para trás no navegador. Refresque há todas as três imagens. Tudo bem. Ok, então agora há apenas mais uma ou duas coisas que precisamos fazer só para terminar isso. Se olharmos para a versão final, podemos ver que as imagens são um pouco menores e o texto é um pouco maior. Isso ocorre porque se olharmos para a nossa versão, usamos todas as 12 colunas disponíveis. Então quatro, quatro e quatro. Eu vou fazer isso um pouco menor mudando todos estes três para ser um valor de três. Salvar, atualizar. Agora eu tenho um pouco mais de espaçamento em torno das imagens. Todos eles ainda centrados porque justificamos o conteúdo ao redor, então temos espaço igual em todos os lados. Em seguida, podemos tornar o texto na parte inferior um pouco maior, substituindo os estilos Bootstrap. A classe Bootstrap de texto do cartão foi aplicada ao texto. Vamos para o nosso CSS personalizado, logo acima da consulta de mídia. Podemos adicionar o texto de, 'Seção de Boas-Vindas. ' O único estilo que precisamos adicionar é o texto do cartão. Vou precisar que este seja um tamanho de fonte de 1,2 rems. Abra o Chrome, recarregue. Agora isso parece muito melhor e mais parecido com a versão final. Vamos agora terminar com a seção de boas-vindas e dar uma olhada em como podemos usar colunas junto com o uso de diferentes utilitários Bootstrap. Obrigado e te vejo na próxima vez. 8. Seção “Ofertas mais recentes” - HTML: Estamos fazendo um bom progresso com o nosso tema bootstrap e agora é a hora de passar para o mais recente da seção. A seção estará logo abaixo desta seção de boas-vindas que criamos no último vídeo e se você for para a versão final aqui, esta é uma seção que vamos criar agora. Ele vai nos dar mais prática usando cartões e também colunas para layout, juntamente com olhar para pequenas classes bootstrap que estão disponíveis. Neste vídeo, vamos adicionar todos os HTML para a seção juntamente com as classes de bootstrap necessárias. No entanto, pequenas coisas como o preço acima do topo aqui serão CSS personalizado, e passaremos para o estilo no próximo vídeo. Em enfermarias com o HTML em nossa página de índice. Vamos até o fundo abaixo dos divs de fechamento. Logo acima do JavaScript, podemos criar uma nova div. Esta nova div vai ter uma classe de fluido de contêiner. Queremos que o texto seja alinhado no centro, que possamos ter classes bootstrap. Vamos ter um fundo escuro que você pode ver aqui. Podemos fazer isso com uma classe bootstrap de bg-dark e, finalmente, algum preenchimento na parte superior e inferior, que podemos adicionar com PY para o eixo y e o valor de cinco para mantê-lo consistente. Aqui dentro, adicionamos nossa linha familiar. Então adicione uma nova div com a classe de linha. É tudo o que precisamos para este. Então dentro vamos criar o título, que é o “Últimas Ofertas de Spa”. Vamos fazer isso de uma maneira semelhante a esta lá em cima. Vamos criar uma div ou uma seção com uma extensão ou largura de seis colunas e então vamos deslocar três colunas para colocar isso no centro. Então abra a div, a classe, col-md, então isso é seis colunas em dispositivos médios e ambos, significa que qualquer coisa abaixo dos dispositivos de tamanho médio será largura padrão. Nós também podemos fornecer os deslocamentos em dispositivos médios para ser três colunas, empurrando para o centro da página. Nosso título no h3, isso vai ter a classe de slides de texto. Uma vez que estamos usando cores de fundo escuras agradáveis e o texto de “Últimas ofertas de Spa”. Ok, bom. Abaixo disso, precisamos da nossa imagem. Esta imagem vai ser semelhante à acima, que é apenas esta aqui. Vai ter uma cor ligeiramente diferente, já que temos um fundo diferente que são os mesmos com a imagem. Então imj, a fonte, isto está na pasta de imagens, e este é o divider-silver.png O texto alt, simplesmente divisor e, em seguida, uma classe bootstrap. Então nós vamos apenas adicionar algum preenchimento na parte inferior deste, começa no espaçamento, então abaixo nós estamos preenchendo fundo ou pb e o valor de quatro. Além disso, podemos definir a largura para ser personalizado largura w-25, que já olhou, é uma largura de 25 por cento. Então podemos dar uma olhada, recarregar e ir abaixo da nossa seção de boas-vindas e lá está o nosso título. Agora precisamos criar uma nova linha logo abaixo para estas três cartas aqui. Cada cartão vai estar em uma largura de quatro colunas em sua própria div separada. Então vamos começar criando a primeira seção. Precisamos criar uma nova div logo abaixo desta linha. Div com a classe de linha. Feche isto e certifique-se de que isto ainda está dentro do contentor circundante. Agora podemos construir nossa div com a classe de col-sm-4. Este é um terço da largura da página em dispositivos menores em ambos. Cada um deles vai ser um cartão, adicionar uma div com a classe de cartões, e isso nos dará a chance de fazer uma coisa semelhante que fizemos no último vídeo, onde podemos adicionar um cabeçalho de cartão, um corpo de cartão, e isso irá adicionar todas as boas fotos estilo bootstrap. Primeiro de tudo, vamos adicionar um cabeçalho de cartão. Vamos adicionar isso em um título de nível quatro. Precisamos dar a isso uma classe de cabeçalho de cartão. Uma vez que é um cabeçalho no topo, vamos adicionar algum preenchimento para dar um pouco de espaçamento a partir do topo. Podemos fazer isso com py-5, e isso se aplicará à parte superior e inferior do cabeçalho. Aqui dentro vamos adicionar o texto do pacote de natação familiar. Claro, digite qualquer texto que você preferir aqui dentro, seguido de uma extensão com o preço. Eu vou adicionar 60 por isso, e este vai ser o preço que fica no topo aqui e vamos posicionar isso usando CSS no próximo vídeo. Mas agora que nós apenas adicionamos o HTML, então eu vou adicionar uma classe a este span. O custo vai ser igual a fond-peso-negrito. Isso só vai torná-lo um pouco mais ousado para que ele se destaca mais. Debaixo do nosso h4 podemos então adicionar o corpo do cartão. Nós já usamos essa classe antes, isso é card-body. Antes de avançarmos, vamos verificar isso no navegador. Atualize, e há o cabeçalho do nosso cartão e o corpo do nosso cartão logo abaixo. Este corpo do cartão vai obter o texto, que é apenas aqui, e, em seguida, outra lista com três itens da lista. Certo, vamos trabalhar dentro do corpo do cartão. A primeira coisa que vamos fazer aqui é adicionar um texto de citação. Este blockquote também significa uma classe bootstrap de blockquotes. Então, uma classe de blockquotes, e isso está na margem na parte inferior para um valor de zero. Podemos adicionar nosso texto dentro dos elementos P. Este texto vai ser o nosso pacote de natação mais popular, grande valor para famílias ou grupos de 12 pessoas. Agora precisamos ir abaixo do blockquote e abaixo deste div para o corpo do cartão. Então aqui dentro vamos adicionar uma outra lista, que vai ter uma classe de grupo de listas. Este vai ser o nosso item de lista livre. Então o primeiro vai ter uma aula. Este vai ser list-grupo-item, seguido de font-itálico. O texto é de até 12 pessoas. Você pode digitar o próximo, então eu vou copiar e colar mais duas vezes, já que ele tem as mesmas classes. O texto sobre este é sessões privadas, e, em seguida, o terceiro vai ser aulas de natação também disponíveis. Lá vamos nós até o navegador. Agora vamos para a primeira guia, recarregar, e não está boa aparência. Precisamos replicar isso mais duas vezes para nossa segunda e terceira seção. Então, para fazer isso, vou copiar isso para evitar muita repetição. Se você quiser praticar pouco, você pode ir em frente e digitar isso sozinho. Vou em frente e localizar a div de fechamento. Na verdade, só precisamos do col-sm-4, então vamos copiar este div aqui e a seção col-sm-4. Certifique-se de que você ainda tem duas tags div de fechamento no final, que é para a linha e o contêiner externo. Cole isto logo abaixo. Este vai ser para a noiva, e então o preço deste vai ser 40. O texto, este vai ser “Nossos pacotes de casamento são perfeitos para o seu grande dia”. Então podemos atender grupos, grandes ou pequenos. Então tudo o que nos resta a fazer são os itens da lista livre. O primeiro vai ser sua maquiagem e isso vai ser usando a entidade HTML de amp, adicione a maquiagem. O próximo será para grupos de qualquer tamanho. Este vai ser champanhe e coquetéis disponíveis. Só temos mais um agora. Então, na parte inferior, novamente certifique-se de usar essas duas tags div espalhadas no final e, em seguida, cole isso e pela terceira e última vez e vai ser passe de fim de semana por US $60. Eu quero pegar o texto para este aqui, e adicionar o mesmo entre os elementos P. Este vai ser piscina e sauna. Em seguida, o uso completo do nosso ginásio e o ponto e vírgula no final lá. O terceiro vai ser inclui dois tratamentos por pessoa. Ok, bom. Eu acho que é isso agora, baixo se vamos para o fundo e apenas adicionar um comentário rápido, basta dizer que este é um recipiente de fechamento e o mesmo para a linha. Bom. Então, sobre o Chrome, podemos verificar isso e podemos selecionar a guia para o projeto, recarregar e que são nossas três seções agora. Se reduzirmos isso também, podemos ver que isso será totalmente responsivo por padrão por causa das classes bootstrap que adicionamos. Vamos brincar com isso um pouco no próximo vídeo quando adicionamos algum CSS personalizado. mas por enquanto, embora a maioria esteja no lugar. Então, nos vemos em seguida. 9. Seção “Ofertas mais recentes” - CSS: Para completar esta seção “oferta mais recente”, só precisamos aplicar algum CSS personalizado. Isso vai ser muito para a seção “preços”, que está no topo aqui. Vou fazer com que pareça a versão final aqui, o que está posicionado no topo do cartão. O código que vamos escrever, que vai ser CSS padrão, que não será fornecido pelo Bootstrap. Este não é um problema, porém, como um tema WordPress pode ser composto de qualquer HTML e CSS. Independentemente se ele estiver usando Bootstrap, HTML regular, ou qualquer outro framework para esse assunto, nosso preço que criamos no último vídeo é cercado por um elemento span. Vamos subir, e este é o que podemos ver aqui. Podemos marcar isso no nosso CSS. Vamos fazer isso em nosso arquivo CSS personalizado, e vamos começar para baixo na consulta de mídia. Então isso se aplica às telas maiores, que o nosso fundo recurso. Vamos marcar os elementos span, e primeiro de tudo, podemos tirar o fluxo normal dos documentos adicionando uma posição de absoluto, e eu vou criar o fundo, que será para o círculo que o rodeia. Podemos adicionar alguma transparência, este será um valor rgba de 175, 169, 169 e o valor alfa de 0,6, que é 60 por cento, nós também vamos fazer isso em um círculo. Podemos começar adicionando uma altura de 80 pixels e também uma largura fixa de 80 pixels também. Então nosso preço está posicionado no centro. Nós também vamos adicionar a altura da linha, e isso também vai coincidir, isso vai ser 80 pixels. Então, para criar nosso círculo, vamos adicionar o raio da borda, e podemos fazer isso adicionando isso como um valor de 100 por cento. Antes de irmos mais longe, vamos ver como estamos com isso, então nosso projeto e recarregar. Há o nosso círculo com o fundo com um raio de borda de 100% para torná-lo redondo e uma largura e altura fixas de 80 pixels. A próxima etapa é posicionar isso no centro e sobre o topo do cartão. Agora, para empurrar isso para o centro, porque isso é referências absolutas do contêiner relativo mais próximo, que é este div apenas aqui. Então vamos definir isso para um valor de 40 negativo no canto superior esquerdo, portanto posicionando isso no centro da Cordova. Vamos adicionar um valor superior de 40 pixels negativos, e o mesmo para a esquerda, 40 pixels negativos, e vamos ver como isso nos deixa. Agora isto empurra isto para o canto superior. Como esta é uma largura de 80, nós deslocamos o valor em 40 pixels. Nós temos o alinhamento vertical vai precisar, e agora nós só precisamos empurrá-lo através de 50 por cento e nós podemos conseguir isso com alguma margem esquerda de 50 por cento, e lá vamos nós. O passo final é apenas aumentar o tamanho da fonte para ser 1,8 rems e então estamos prontos para ir, 1.8 rems, tanto o navegador quanto lá vamos nós. Se reduzirmos o navegador, podemos ver como essas seções se parecem nos dispositivos menores. Vamos descer para o tamanho do celular, essas seções parecem um pouco próximas na parte superior e inferior, que possamos adicionar alguma margem para a parte inferior de cada cartão fora da consulta de mídia. Vamos rolar para cima. Vamos fazer isso apenas sobre a “seção de boas-vindas”. Por isso, aplica-se a todos os cartões, incluindo estes, cartão de ponto, adicionar alguma margem na parte inferior de 20 pixels, recarregar. Agora podemos ver o espaçamento entre cada um. A última coisa que precisamos fazer é redefinir a margem de volta para 0 para essa visão maior, precisamos fazer isso de volta dentro da consulta de mídia abaixo do nosso intervalo, novamente, marcar os cartões. Tudo o que precisamos fazer para isso é definir a margem no fundo para ser um valor de 0. Bom trabalho. O modelo Bootstrap está começando a tomar forma, então continue. Em seguida, vamos começar a trabalhar com a, “seção sobre nós”. 10. Seção “Sobre nós”: Nesta versão final aqui, podemos ver, se rolarmos para baixo a partir da parte mais recente da seção, temos uma pequena seção Sobre Nós logo abaixo. Esta seção Sobre Nós é bastante básica e provavelmente algo que você poderia completar por conta própria, se você se sentir confiante em fazê-lo. Ele simplesmente contém nosso cabeçalho de About Us, uma imagem que usamos anteriormente, juntamente com uma linha de texto Lorem Ipsum. Isso é colocado em nossa página Índice, logo abaixo da última seção de ofertas que acabamos de criar. Vamos passar para o nosso index.html. Vamos criar comandos. Esta é a seção Sobre Nós. Também faremos o mesmo, logo acima, na última seção. Isto é para as últimas ofertas. Isso só nos ajudará mais tarde ao rolar para cima e para baixo. Na seção Sobre Nós, isso se tornará bastante familiar agora. Temos um div circundante com a turma. Eu quero usar novamente o fluido do recipiente para que ele se estenda a largura total da página. Eu também vou adicionar um valor de preenchimento na parte superior e inferior de cinco, posicionando textos para estar no centro, e também adicionar uma cor de fundo de luz. Isso irá compensar o valor do escuro, que está logo acima. Dentro desta div, vamos adicionar uma linha familiar. Para manter as coisas consistentes, vamos estruturar o título da mesma forma que as duas últimas seções. Fazemos isso com um div. Isso vai ter um valor de col-sm-6, então é metade da largura da página, e então deslocar isso com um valor de 3 para empurrar isso para o meio. Um título de nível 3, que será Sobre Nós, a imagem, então a fonte estará na pasta Imagens. E lembre-se desses dois diferentes [inaudível] aqui, já que estamos usando a cor de fundo mais clara, vamos usar o divisor de roxo, texto alt do divisor é bom, e então a mesma classe que usamos antes para dar-lhe um peso de 25 por cento. Vamos verificar isso. Guarde isso, e aí está o nosso título e a imagem. Em seguida, só precisamos criar uma nova linha logo abaixo para o texto de amostra. Então, de volta, temos a linha de fechamento, então as colunas de fechamento, e a linha de fechamento. Vamos adicionar algum espaço, novamente, certificando-se que isso está dentro do recipiente circundante, div com a classe de linha, coloque isso em uma nova linha. Nós também adicionaremos alguma margem no topo. Separe este do título com mt e o valor de dois. Cada linha precisa ter uma div aninhada dentro. Eu vou fazer algo um pouco diferente desta vez e apenas definir isso para ser coronel. Se nós apenas definir isso para ser col em vez de um valor, cada vez que adicionar um novo col, ele vai ocupar uma quantidade igual de espaço. Então, se quisermos ter esta div , serão as 12 colunas completas. Se tivéssemos três divs lado a lado, todos a mesma classe de col, cada um ocupará um terço igual da página. Vamos adicionar nosso texto de exemplo dentro com os elementos P e a classe do centro de texto. Então, há algumas maneiras diferentes de fazer isso. Se você estiver usando o Visual Studio Code, você pode digitar os códigos de acesso lorem, clicar em Tab e, em seguida, obter algum texto de exemplo colocado em fotos. Caso contrário, você pode ir para o navegador, e ir para lipsum.com, e isso nos dará algum texto de amostra que podemos gerar na parte inferior, e então copiar e colar isso no projeto. Uma vez que isso é feito, e dar um salvamento, e nós podemos verificar isso no navegador, e vamos ver o nosso texto. Na verdade, vou gerar um pouco mais. Em vez de fazer isso, podemos adicionar mais digitando em lorem e depois uma estrela, gerar cinco parágrafos, clicar em Tab, e isso é tudo o que precisamos fazer. Esta é a seção Sobre Nós agora concluída. Foi bastante simples, mas nos dá um pouco de prática extra usando Bootstrap. 11. Seção “Lista de preços”: Tudo feito com a seção Sobre a, que fizemos no último vídeo, se você rolar para baixo no projeto final, esta seção de lista de preços será um pouco mais detalhada do que a que acabamos de criar. Temos algumas colunas de tamanhos diferentes para layout que têm as imagens de um lado e também os preços para cada tipo de tratamento disponíveis do outro. Esta é a seção que vamos criar agora no index.html. Vamos começar por criar um título familiar e imagem, e vamos fazer isso no recipiente de apresentação lateral e primeira linha. Logo após a seção Sobre a ser criada, vamos rolar para baixo até a parte inferior e adicionar comentários. Isto vai ser para a nossa secção de preços. Logo abaixo disso, podemos adicionar nosso div, que seguirá a mesma estrutura de antes, isso terá uma classe para o invólucro de fluido do recipiente. Alguns preenchimento no eixo Y o valor de cinco. Vou definir desta vez o fundo para ser escuro. Dentro aqui precisamos de uma linha, então isso vai para metade da classe de linha dentro aqui, e esta linha então precisa ter algumas colunas aninhadas. Primeiro de tudo, podemos adicionar nosso título, como o resto do lado isso vai ter uma largura de coluna de seis. Então col md -seis, podemos adicionar o deslocamento, que é o valor de livre. É empurra para o centro e também a classe do centro de texto também. Em seguida, podemos adicionar nosso título de nível três. Nível três cabeçalho é para o nosso texto de lista de preços, e isso também precisa de uma classe, já que estamos usando um fundo escuro, podemos adicionar a classe de textos luz. Aí está o nosso título, o próximo passo é para a nossa imagem. Fonte de imagem está na pasta Imagens, e desta vez é o divisor, silver.png as classes de imagem. Primeiro de tudo, precisamos de algum preenchimento no valor inferior antes, e também disse que esta é uma largura de 25 por cento com W 25. O mesmo permite verificar isso. Dentro da aba direita abaixo do texto acima, devemos agora ter nossas listas de preços, e estamos apenas faltando a imagem disso, e verificar a pasta de imagens. Dividir uma prata existe? Talvez só precise salvar isso. Só queremos salvá-lo depois da imagem e tudo bem. O próximo estágio é criar uma nova linha. Isto vai ser para a nossa secção de tratamentos de massagens, que é esta primeira fila aqui. Isto terá imagem direita e, em seguida, uma lista não ordenada no lado direito. Logo abaixo desta linha, mas vamos adicionar um comentário, só para ficar claro o que estamos fazendo aqui, este é o recipiente de fechamento. Logo acima, precisamos de nossa div, classe ou linha e, em seguida, próxima dentro de nossas colunas. A imagem vai ser maior do que a lista não ordenada, então eu vou definir isso para ser uma largura de colunas com chamada sm-8, e na verdade, para a linha nós também vamos adicionar alguma margem na parte superior e inferior, adicionar algum espaçamento. Então, dentro de nossas colunas, podemos adicionar nossa imagem. A imagem fornecida para este é chamada de massagem. JPEG, e o texto antigo. Após o wrapper para as imagens, vamos descer e criar uma segunda div dentro desta linha, e esta tabela será para a lista não ordenada. Usamos oito colunas ou linhas, então podemos ir em frente e usar os quatro restantes. Chamamos SM-4. Isso vai levar em uma lista desordenada, mas antes de tudo, precisamos de um título em um título de nível quatro, que é este texto de massagens está aqui. Adicione nossas massagens h-4 como título. Agora podemos adicionar nossas classes Bootstrap. O primeiro vai ser título, título não é uma classe bootstrap, esta é uma classe personalizada que eu adicionei, e vamos usar isso no CSS em breve. Seguido por uma classe bootstrap de centro de tecnologia empurra para o meio. Depois disso, podemos adicionar uma lista não ordenada, que também leva em algumas classes para styling. O primeiro é o grupo de listas, e depois disso, este grupo flush, e vamos dar uma olhada no que isso faz em apenas um momento, e então, finalmente, luz de texto. Vou apenas adicionar alguns exemplos de itens da lista. O primeiro vai ser apenas massagem, avise. As classes Bootstrap para o item da lista é Item do Grupo de Lista. Então, depois disso, podemos adicionar as tags span logo após o nome, e podemos adicionar um preço. Queremos adicionar estes entre as tags M, por isso é enfatizado ou Itálico e um traço, e, em seguida, adicionar um preço aqui dentro. Dentro modelo estes álbuns que você pode colar dentro e antes e ir para baixo aqui e apenas mudar os nomes. Poderia ser mais imaginativo se você quiser, então eu vou apenas ir 1, 2, 3, 4, 5, e então dar uma olhada nisso no navegador. Para o nosso projeto, e depois atualize. Temos a nossa imagem no lado esquerdo, ocupa oito partes, e depois ocupou quatro partes, no lado direito está a nossa lista desordenada. O texto é um pouco difícil de ver, mas se destacarmos isso, podemos ver que está lá, e faremos isso em CSS em apenas um tempo. Vamos descer e criar as próximas duas seções, que é esta seção facial aqui, e então o cabelo e maquiagem. próximas duas seções, seguiremos um padrão semelhante a este. Vamos logo acima do nosso contêiner aqui, e vamos criar uma seção semelhante a esta. Vamos criar nossa div com a classe de linha. Isso também vai ter uma margem no eixo Y de quatro. Então vamos fazer o oposto do que fizemos aqui, em vez de ter oito colunas à esquerda da imagem e depois quatro colunas à direita. Vamos fazer os quatro que vêm primeiro, que possamos adicionar a lista desordenada. Então classe div do núcleo sm-4, e depois abaixo disso dentro da linha, vamos adicionar uma segunda div. Este vai ser para as oito colunas, então ligue para sm-8, e depois feche isso. Para a primeira seção que tem quatro colunas, vai ter uma lista desordenada, assim como tivemos aqui, e também um título de nível quatro, vamos cortar e colar estes em. Este é faciais, agora podemos mudar esses textos abaixo. Vamos copiar isto e colar isto em cada um. Assim, você pode mudar os preços se quiser, mas eu quero mantê-lo assim. Então, dentro de nossa seção de 8 colunas, isso leva em nossa imagem. Esta imagem vai estar na pasta Imagens, e esta é chamada facial.jpeg. Diga isso, e depois para o navegador, recarregue os projetos. Desça e lá vamos nós. Novamente, as imagens estão lá, mas o texto é um pouco difícil de ver, e vamos corrigir isso com um pouco de CSS mais tarde. O terceiro para baixo vai seguir a estrutura semelhante à nossa primeira linha com a imagem à esquerda e os links à direita, vamos até a nossa seção de Massagem, e eu vou copiar esta linha completa e depois colar isso em apenas acima do nosso contêiner. Em primeiro lugar, a seção de 8 colunas na parte superior, a imagem para este é cosmetics.jpeg. Podemos mudar o texto antigo. O texto para o título é Cabelo e Maquiagem, e em seguida, em qualquer texto que você gosta nesses links, basta colá-los em, e que deve ser ele dá uma prova de falhas, e até o navegador recarregar. Lá vamos nós, há nossas três seções, e agora podemos ir para o CSS e fazer um pouco de estilo para isso. Vamos para um custom.css precisa ir fora da consulta de mídia. Isso acrescentou comentários, esta é a seção de lista de preços aqui dentro. Quando tivemos a classe personalizada de título, eu vou definir seu título para ser uma cor de carga dourada, e depois disso, podemos adicionar o list-grupo-item. Este item de grupo, se formos para a página de índice, esta é a classe que tinha sido adicionada a cada item de lista, e o que vamos fazer aqui é remover esta imagem de fundo branco para que possamos ver o texto. Para fazer isso, precisamos fazer é definir o fundo a ser conhecido, e nós também poderíamos alterar o tamanho da fonte para ser 1.1mz. Guarde isso, e vamos ver como isso parece. Esse é o plano de fundo agora removido para cada item da lista. para que possamos ver o nosso texto. Não mencionamos antes sobre essa aula extra. Se formos para cima que é lista-grupo-flush. Então, se removermos isto dos cosméticos e depois recarregarmos no fundo, veremos a diferença. Isso tem toda a borda ao redor, enquanto o resto apenas tem as linhas no meio. Vamos adicionar este back-end e, em seguida, restabelecer nosso projeto. Este é agora para a seção vamos terminar a página inicial no próximo vídeo, completando o rodapé e também adicionando em nossos ícones Font Awesome. 12. Rodapé e adicionando o Fontawesome 5: A parte final desta página inicial é criar a área do pé. Se você descer para a versão final, esta é a área bem na parte inferior aqui, que vai ser dividida em três seções. Teremos um lado esquerdo formal para se inscrever via e-mail, teremos o Centro de configurações sobre o local e também teremos alguns links de navegação sobre direitos. Você também pode notar que temos alguns ícones muito abaixo para baixo para links de mídia social. Estes vão ser fornecidos com uma biblioteca chamada Font Awesome. Vamos começar instalando isso em nossos projetos. Eu vou para fontawesome.com. Esta tem uma versão gratuita. Então, vamos clicar neste botão aqui. Esta é uma versão gratuita mal paga. Nós só precisamos desta versão gratuita para nossas necessidades, que podemos baixar a partir deste botão apenas aqui. São maneiras diferentes de usá-lo. Podemos clicar no “Download” e começar isso. Existem diferentes maneiras de instalar para bibliotecas, como View, React, e você também pode baixá-lo usando ferramentas como esboço. Em seguida, certifique-se de que estamos na seção web aqui e clique no botão “Download”, que irá iniciar o instalador. Sites como este geralmente têm o hábito de mudar designs e layouts. Então, se parecer um pouco diferente disso, basta dar uma olhada para o download. Há também um link CDN disponível também, mas eu quero baixá-los e adicioná-los diretamente em nosso projeto. Você também pode se sentir livre para verificar os ícones com este link aqui, e você pode ver todos os ícones disponíveis que acabarão de baixar. Usaremos alguns destes durante todo o projeto. Vamos começar abrindo a pasta. O nome da pasta inclui o número da versão e eu só vou encurtar isso para baixo para Font Awesome para que seja fácil trabalhar com. Então mude isto para os nossos projectos. Se abrirmos, o tronco será como pasta no CSS. Em seguida, você pode arrastar sobre a pasta full font-awesome e colocá-la lá dentro. Agora, se você abrir a barra lateral e, em seguida, para o CSS, apenas certifique-se de que esta pasta foi incluída. Dentro da pasta Font Awesome, vou ligar para a versão minificada de todas as fontes. Isso está em CSS e, em seguida, isso é todo.min.css. Podemos adicionar o caminho do arquivo na página de índice. Se formos até nossos links CSS no cabeçalho, vou adicionar o link logo acima do nosso CSS personalizado. Vamos adicionar um comentário de Font Awesome, o link. Este está novamente na nossa pasta CSS. Ele está na pasta Font Awesome depois disso, em css/all.min.css. Isso é tudo o que precisamos fazer agora para vincular Font Awesome ao nosso projeto. Vamos testar tudo isso está funcionando em breve, quando chegarmos a adicioná-los no rodapé. Por agora, porém, vamos começar a trabalhar com a adição do rodapé, que você pode ver aqui. Podemos adicionar um contêiner na parte inferior para segurar isso. Então, na parte inferior, logo acima do nosso JavaScript. Vamos adicionar uma seção de comentário ou rodapé. Eu vou usar o elemento rodapé HTML para isso. Você ainda pode adicionar as mesmas classes de fluido recipiente e também py-5. Aqui dentro isso leva em uma div com a classe de linha, para que possamos então aninhar dentro de nossas colunas. O primeiro será para a seção de mídia social de ficar conectado no lado, que será um título, um formulário de inscrição, e então adicionaremos nossos ícones de mídia social mais tarde. Como há três seções diferentes, podemos dividir isso em quatro colunas cada uma com uma classe de col-sm-4. O texto em um título de nível 5 de permanecer conectado. Depois disso, vamos colocar em nosso formulário, não precisamos de uma ação, já que você está apenas criando estrutura HTML por enquanto. Dentro daqui vamos adicionar uma div que vai cercar ou agrupados nossos elementos de forma. Vai levar algumas aulas de Bootstrap. O primeiro vai ser linha de formulário para fazer um formulário inline, em seguida, o segundo de grupo de formulário para agrupar nossas entradas. Este formulário só irá conter as entradas de endereço de e-mail e, em seguida, o botão. A entrada à esquerda será de oito colunas de largura, e então podemos usar os quatro restantes para o botão de inscrição. Vamos criar nossas seções para isso. O primeiro é para a entrada. Então isso será chamado sm-8. Em seguida, um para o nosso botão e logo abaixo, para as quatro seções restantes. Vamos começar com a entrada do formulário. Isso vai ser uma entrada com o tipo de e-mail, as classes bootstrap de controle de formulário, e algum texto de espaço reservado do endereço de e-mail, em seguida, para baixo para a seção inferior. Então o botão vai ter o texto de inscrição. Ele também precisa de um tipo. O tipo de envia dentro aqui e, em seguida, a classe Bootstrap. O primeiro de btn, btn-primary, para dar-lhe a cor azul. Também adicionaremos um pequeno ícone Font Awesome ao lado direito do texto. Voltaremos a isto daqui a pouco. Vamos salvar e vamos ver como isso está olhando, recarregar, e não é o nosso formulário na parte inferior e vamos adicionar os ícones de mídia social muito em breve, que você vê aqui. Por enquanto, logo após o formulário, vamos adicionar um comentário. Então ícones de mídia social, e vamos voltar a estes muito em breve. Após esta div fechamento, temos mais duas seções que quatro colunas cada. O próximo será para o texto e depois para a navegação à direita. Então div com a classe de col-sm-4. Este terá um título de nível 5 e desta vez o texto é a nossa configuração, e uma vírgula. Depois, tudo o que vamos fazer é adicionar o elemento p com algum texto de amostra. Novamente, se você estiver usando o Visual Studio Code, poderá digitar Lorem e clicar em “Tab”. Isso é tudo o que precisamos fazer para nossa seção do meio. Então agora depois do nosso col-sm-4, podemos adicionar mais um, que é para os nossos itens de lista na classe certa col-sm-4. Este também terá um título de navegação de nível 5, seguido de uma lista não ordenada, que conterá os nossos links de navegação. A classe bootstrap para a lista não ordenada é um grupo de listas e itens de lista, que leva na classe de list-grupo-item. Estes serão links, então vamos adicionar o elemento a dentro aqui, o href, o link. Este vai ser para o blog para HTML. Ainda não criamos esta página, mas vamos pedir o texto do blog, copiar e colar. Este é para a página de contato. Este será contato para HTML, em seguida, o texto dos contatores e link UML para a política de privacidade. Na verdade, temos href dá-nos ir para o navegador. Esse é todo o conteúdo que precisamos agora. Agora vamos aplicar um pouco de CSS apenas para terminar esta página. Começando com esses links azuis apenas aqui, vamos passar para o nosso style.CSS, ou Custom.CSS, e fora da consulta de mídia, vamos direcionar o rodapé, começando com os links, então estes são os elementos. Podemos redefinir a cor para ser um valor de 212529. Veja como isso parece muito melhor. Agora, se voltarmos sobre o infarto podemos encolher o navegador agora primeiro, vemos as coisas precisam de um pouco mais de espaçamento, coisas como se rolássemos para baixo o título dourado que está aqui, é um pouco de espaçamento na parte superior e inferior, até o rodapé. Além disso, essas entradas e botão precisa de algum espaçamento também. Para corrigir isso no Custom.CSS, vou criar uma nova consulta de mídia direcionada a uma largura máxima de 768 pixels. Os estilos só funcionarão nas telas pequenas. Após essa consulta de mídia, você pode adicionar mais um novo na mídia quer segmentar essas telas, e também a largura máxima de 768 pixels. Adicione as chaves de calli. Vamos começar adicionando a margem superior ou o título, este é o título dourado que já vimos antes. Um em é bom para isso. Podemos adicionar algum espaçamento em nosso Botão digitando botão rodapé. Isso só terá efeito em quaisquer botões dentro do rodapé. As margens também devem ser um valor de 1em, salvar e, em seguida, recarregar. Teremos mais espaço. Em torno disso, temos nosso espaçamento acima dos títulos também. Finalmente terminar, eu quero adicionar um pouco de preenchimento e também um fundo de borda para cada uma dessas seções. As seções também do rodapé, pode pegar cada div com a classe de col-sm - 4 para uma borda inferior para começar alinhado, para separar cada um de um pixel. Uma linha sólida, e uma cor de DDD. Em seguida, algum preenchimento dentro de 20 pixels na parte superior e inferior e, em seguida, 10 pixels na esquerda e direita. Abra isso, atualize. Parece que temos uma linha extra aqui dentro, então vamos dar uma olhada. Até o rodapé, este é apenas ao lado do botão, para ter um logo abaixo. Este é o 1.5 real aqui, e estes são supostamente para dispositivos médios. Vamos mudar isso para ser MD. Estes estão nas próprias linhas nesses dispositivos móveis. Vamos invadir a estrada ao lado de cada um deles em dispositivos médios e acima, salvar e atualizar. Isso agora parece muito melhor no menor e também para as telas maiores. Tudo o que resta a fazer agora para este rodapé é adicionar os ícones de mídia social. Voltem para o rodapé. Criamos um comentário e também adicionaremos esses comentários ao botão Cadastre-se. A versão gratuita nos permite acessar dois estilos diferentes de ícone, que é chamado de marcas e sólido. Ícones sólidos como eles soam ou um ícone preto sólido, e é usado para coisas como uma empresa ou ícone de cartão de crédito. Usamos a classe CSS FAB para marcas, e FAAS para sólidos. As versões irregulares e leves também, mas estas só estão disponíveis na versão pro. Vamos começar no botão Cadastre-se. Podemos adicionar um ícone Fonte impressionante usando os elementos I. Vou adicionar estes em duas linhas separadas para que fique mais claro. Abra os elementos I, e então ele precisa de uma aula. Dentro daqui, primeiro especificamos qual tipo de botão queremos. Se quisermos os sólidos ou a versão marrom, eu vou para a versão sólida. Então, vamos digitar em FAS que é Formado Awesome Solids, e então nós digitamos o nome do ícone. Nós o seguimos pelo site Font Awesome. Você pode obter o nome de cada ícone logo abaixo. Vamos adicioná-los adicionando um nome de classe de FFA. Em seguida, o nome do ângulo duplo à direita. Dê um salvamento e, em seguida, recarregue os projetos para baixo na área de rodapé. Agora temos o ícone de direitos de ângulo duplo em que começamos. Eu vou voltar para os nossos ícones de projetos logo abaixo deste para nossa seção de mídia social então apenas sob os ícones de mídia social, nós vamos fazer exatamente o mesmo adicionando os elementos I. A aula desta vez vai começar com FAB, então são os ícones da marca, o nome de FA, que vai ser para o nosso ícone do Facebook. Então Facebook-quadrado, e, em seguida, uma terceira classe que é opcional. Isso para fazer as fontes duas vezes o tamanho. Podemos fazer isso com FA, e depois 2X. Vou copiar e colar isto em mais três vezes. O segundo substituirá o Facebook pelo Twitter. O terceiro vai ser para o Instagram. O último é o Pinterest. Todo o resto permanecerá o mesmo. Confira isso no navegador. Perdemos um Instagram, e isso não precisa ser quadrado no final, desculpe por isso. Depois, para o Chrome, recarregue e agora temos nossos quatro ícones. É isso agora para a nossa página inicial, para os nossos modelos Bootstrap. Espero que tenha gostado desta seção e aprendido muito sobre o uso de um Bootstrap. A seguir na próxima seção, vamos terminar este projeto adicionando as páginas adicionais, como o blog e a página Fale Conosco. Obrigado e te vejo lá. 13. Publicações do blog e paginação: Estamos fazendo um bom progresso com nossos modelos Bootstrap, e agora cuidamos da página inicial. Agora vamos passar para as páginas adicionais começando com o blog. Na última seção, criamos um link para uma página de blog, ainda não criamos nenhum conteúdo. Se dermos uma olhada no site acabado que estava aqui, e se formos para um dos links do blog, é assim que o blog vai se parecer. Teremos uma seção de cabeçalho que vai ser o mesmo que a página de índice. Também o rodapé, que também será o mesmo para manter o tema mais consistente. Em seguida, o blog vai consistir em nossos posts à esquerda em um recipiente chamado. Também teremos alguns links para a página anterior e a próxima, e também uma barra lateral de quatro colunas no lado direito. O único conteúdo que vamos adicionar no momento nesta página, é apenas para mostrar, é basicamente um modelo que poderíamos conectar ao WordPress com mais tarde. No Visual Studio Code, podemos criar o blog para uma página HTML. Vamos fechar isso, e podemos fazer isso na raiz do projeto ao lado do índice. Isto vai ser chamado de blog para um HTML. Puxe isso para a raiz do projeto, lá vamos nós. Certifique-se de que isso está ao lado do índice e a primeira coisa que eu vou fazer é copiar todo o conteúdo da página inicial. Selecione tudo, copie e cole-o no blog. Isso nos permitirá manter as mesmas seções de rodapé e cabeçalho e podemos simplesmente excluir todo o conteúdo de dentro. Eu vou excluir logo acima do rodapé, Eu iria selecionar este recipiente e eu tenho que ir todo o caminho até a tag de cabeçalho de fechamento. É um pouco de conteúdo para remover aqui. Há o cabeçalho, o suficiente, e tudo logo abaixo desta tag de cabeçalho aqui, podemos remover isso, dar um salvamento, e então podemos ver se isso está bem no navegador, e ir para o nosso blog e certificar-se de que temos apenas o cabeçalho e a área de rodapé parecida com isso. Se sempre se parece com isso, estamos prontos para ir e podemos começar a personalizar nossa página do blog. Vamos começar com o título, que vai ser um blog local tranquilo. Então, depois disso, também podemos alterar o texto do recurso. Em vez de um tema spa premium completo responsivo, nós mudá-lo para precisar de Tranquil Spa blog oficial. Logo após a tag break, podemos adicionar blog oficial. Salve isso e com o CSS que já fornecemos, ainda deve estar no centro aqui, então não precisamos fazer nenhum trabalho adicional com isso. A próxima coisa a fazer é ir para baixo e criar um contêiner de blog. Vamos fazer isso, logo após o cabeçalho, podemos adicionar um comentário. Esta vai ser a seção do blog. Então esta seção do blog vai ser um recipiente fluido, que será uma classe sobre o elemento principal, vai ser apenas o conteúdo principal. Vamos construir nossas classes Bootstrap de contêiner, traço fluido e também algum preenchimento y, que é a parte superior e inferior. Como sempre, também temos um div aninhado dentro com a classe de linha. Agora esta linha vai ter duas seções. Como mencionamos antes, quando olhamos para a versão final, o lado esquerdo será uma seção de oito colunas. Então, mais tarde, também criaremos uma barra lateral para preencher as quatro colunas restantes. Nossa div com a classe de col sm-8 dentro aqui, podemos construir um modelo de blog bastante simples. Lembre-se que este é apenas alguns HTML básico que podemos adaptar ao WordPress mais tarde no curso. Uma div envolvente para a postagem do blog, um título de nível dois. Vamos adicionar alguns dados de exemplo, então novo recurso, em seguida, abrir os elementos p e vamos adicionar uma data em que a postagem do blog foi criada. Podemos adicionar qualquer data aqui. Nós também temos que adicionar a oferta, que possamos dizer que isso é por e podemos adicionar o nome de um autor dentro de um link. Vou adicionar o meu nome aqui dentro, e o link pode ter apenas um h-ref vazio no momento. Mais uma vez, vamos corrigir isso no WordPress mais tarde. Em seguida, podemos adicionar outros elementos p logo abaixo. Só com uma data de amostra aqui, estou apenas digitando Lauren e a data do texto de exemplo do código VS. Vamos verificar isso na recarga do navegador e temos nossa primeira postagem no blog. Novamente, o conteúdo não importa no momento. Vamos adicionar tudo isso usando o painel WordPress. A próxima coisa a fazer logo após esta data é eu vou adicionar uma pequena seção, para exibir quaisquer tags associadas à postagem do blog, e certificar-se de que o elemento a está fechado. Lá vamos nós. Vamos criar uma seção logo abaixo disso. Isto vai ser um div. Podemos adicionar algum preenchimento na parte inferior, e adicionar uma classe de pb e o valor de dois. Isso só dará a isso algum espaçamento do texto. Dentro daqui podemos usar Font Awesome com os elementos i. Isso iria montar um ícone de tag. Este deve ser o tipo sólido com FAS e, em seguida, FA, um ícone é chamado tags. Logo depois disso, podemos adicionar um p elementos e ele vai ter o texto de marcado. W\ e vai apenas adicionar algumas tags de amostra aqui dentro. Isso novamente será gerado pelo WordPress mais tarde. Este pequeno ícone no meio é o til. Você pode precisar olhar em seu teclado para este, mas você pode adicionar qualquer ícone dentro aqui. Vamos dizer isto. Primeiro de tudo, podemos adicionar uma classe. O inline torna os elementos p em linha em vez do padrão ou nível de bloco. Isso manterá as tags que adicionamos aqui na mesma linha do nosso ícone logo acima. Confira isso, recarregue o navegador. Há um pequeno ícone Font Awesome, e então nós podemos ter nossas tags logo depois na fila. Isto parece muito bom. Para adicionar mais conteúdo, vou copiar e colar nesta postagem do blog. Se formos ao nosso div, que está em torno de todo o conteúdo aqui, copie isso, certifique-se de que ainda estamos entre o elemento col sm-8, e então cole isso em mais duas vezes. Para arredondar as coisas para este vídeo, alguns botões na parte inferior das postagens. Você apenas inferir as páginas mais antigas e mais recentes, assim como nós temos na versão final aqui. Mais para o nosso blog, para o nosso HTML, e logo após a nossa última postagem de blog que adicionamos, a página anterior e seguinte vai estar dentro de um elemento nav. Este elemento nav vai ser uma lista desordenada com a classe bootstrap de nav. A lista não ordenada terá nossos itens de duas listas. O primeiro vai ser para a próxima página, e copiar e colar isso, e este vai ser para o nosso anterior. Em seguida, para a recarga do navegador. Há nossos links agora, podemos apenas adicionar um espaço entre a entidade HTML. Ampersand, espaço não-quebrável, e lá vamos nós. Nosso blog está agora começando a tomar forma. Observe como contemos a postagem do blog com oito colunas de largura. Isso nos dará quatro colunas para trabalhar para a barra lateral, no próximo vídeo. 14. Barra lateral da página do blog: Deixaremos este espaço de quatro colunas do lado direito. É aqui que vamos adicionar uma barra lateral para o nosso blog. Assim como a versão final que você vê aqui, ele terá algumas seções com algumas informações sobre esta barra. Também podemos filtrar por categorias ou pelo mês em que foi criado. Deixe uma pequena seção de mídia social na parte inferior também de qualquer blog, para HTML. Podemos criar algum espaço logo acima desta linha de fechamento. Se isso ajudar, você pode adicionar um comentário aqui dentro. Digamos que esta é a fila de encerramento. Também podemos dizer que este é o contêiner, só para que fique mais claro que estamos certos. Então criamos nossa div. Na verdade, adicionamos isso como um aparte. Já que é uma barra lateral. Esta barra lateral vai ter uma classe, torná-lo quatro colunas de largura em dispositivos menores e acima, assim chamado sm-4. A barra lateral conterá os quatro blocos como acabamos de olhar. A primeira é só um pouco sobre este bar. Uma div circundante para este bloco ainda terá uma classe de py-3. Só para adicionar um pouco de espaçamento na parte superior e inferior. Um título para este bloco “font-italic”, e o título de cerca. Em seguida, o texto nos elementos p. Os elementos p terá uma classe, para adicionar margem e fundo de zero. Então queremos colar o texto para este. Nós só vamos pegar isso do lado acabado. Cole o mesmo, seguido de uma regra horizontal com os elementos hr logo abaixo deste. Vamos checar isso no Chrome. Recarregue nossa página do blog. Em seguida, temos a seção de arquivos. Na versão final, esta vai ser uma lista ordenada, que vai ter cada item da lista como uma data. Podemos começar com uma div circundante como um recipiente ainda dentro do col-sm-4. Meu novo surround em div. Assim como acima isso vai adicionar uma classe de py-3, então adicione o nosso espaçamento. Em seguida, vamos adicionar um título de nível quatro. Isso também vai ser itálico, seria fonte itálico classe. Em seguida, o título dos arquivos. Nossos itens vão estar dentro de uma lista encomendada. Esta lista ordenada vai ter algumas classes Bootstrap. O primeiro vai ser desestilizado na lista. List-unstyled remove o estilo de lista padrão e a margem esquerda em nossos itens de lista. Então vamos definir a margem inferior para ser zero. Esses itens da lista terão um link aninhado dentro. Podemos adicionar algumas datas aqui. Em seguida, um href para os elementos a. Podemos deixar isto vazio. Tudo o que você precisa fazer agora é copiar e colar isso em mais algumas vezes. Adicione algumas datas aleatórias aqui. Isso seria gerado pelo WordPress mais tarde, salvar e, em seguida, atualizar dentro do Chrome. Isso é tudo o que precisamos fazer agora para os arquivos. Em seguida, vamos fazer uma seção semelhante, e isso será para as categorias. Uma nova div antes da nossa seção lateral. Seguindo o mesmo padrão. A classe de py-3, um título que vai ser nível quatro, classe de fonte itálico, e o texto das categorias. Isso também levará em uma lista ordenada com as mesmas classes como acima. Este será list-unstyle para remover qualquer estilo de lista e também definir a margem inferior para ser zero. Os itens da lista também aninhados com um link dentro, um href vazio. Podemos acrescentar no noticiário. Nós também podemos adicionar nas ofertas também. A seção final é para a nossa seção de seguidores que vai ser alguns links de mídia social usando os ícones impressionantes fonte. Vamos criar nossa div, classe de py-3. Aqui dentro, vou ter mais uma vez um título de quatro, que vai voltar a ser itálico, com o texto dos seguidores. Isso vai ter alguns elementos i para nossos ícones. Primeira classe de fab e, em seguida, fa-facebook.It vai ser quadrado e, em seguida, fa vezes 2 x para torná-los duas vezes o tamanho. Vamos adicionar mais três aqui. Este próximo quer ser Twitter e, em seguida, em um surround que não precisa do quadrado. Então, finalmente, Pinterest. Salve isso e recarregue. Esta é a nossa barra lateral agora completa. Na verdade, esta é a nossa página do blog também completa. Agora temos um modelo de blog que podemos converter WordPress em uma seção posterior. Em seguida, finalizaremos nossos modelos Bootstrap adicionando uma página de contato conosco. 15. Página “Entre em contato conosco”: Com o nosso blog, agora terminado, vamos em frente e criar nossa página final, que será o Fale Conosco. Se rolarmos para baixo, teremos um link para a página Fale Conosco aqui. Também temos um link de política de privacidade. Mas não vamos criar esta página, pois isso seria algo específico para o seu negócio ou necessidades. Você pode ir em frente, e criar isso se você quiser. Agora vou criar este Fale Conosco dentro das raízes do nosso projeto, ao lado de um blog e página de índice. Vamos criar esse arquivo, que pode ser contact.html. Novamente, vamos reutilizar o mesmo cabeçalho e rodapé para manter o layout consistente e, em seguida, criar uma nova seção no meio. Para acelerar as coisas, podemos ir ao blog, copiar todo o conteúdo e, em seguida, colar isso. Assim como fizemos antes acima da seção de rodapé, vamos selecionar a partir do contêiner principal todo o caminho para cima. Queremos selecionar isso logo acima da seção de bloco, em seguida, remover todos estes. Você pode substituir a seção de cabeçalho e também o rodapé. Podemos dizer isso e verificar se está funcionando bem recarregando a página de contato, que é bom, então podemos mudar o título no topo. Podemos alterar o título da página para ser Fale Conosco. Em seguida, o texto do recurso, vamos descer para esta seção aqui. Podemos usar novamente o texto index.html que foi COMPLETO RESPONSIVO PREMIUM SPA TEMA Copie isso e substitua nossa seção de blog. Em seguida, vamos trabalhar entre a seção de cabeçalho e rodapé criando nossa seção Fale Conosco para. Vamos começar com um comentário, ajude-nos ao rolar para cima e para baixo. Isto vai ter uma div, e esta div será o recipiente de fluidos para todas as páginas. Em seguida, também alguns estofamento na parte superior e inferior um valor de cinco é bom. Aqui dentro, div com a classe de fileira. Esta vai ser a primeira fila dentro do nosso contentor. Na versão final, se você for para a nossa página de contato, esta será apenas uma linha que terá o título Fale Conosco e, em seguida, a imagem. Depois disso, vamos criar um formulário em uma segunda linha logo abaixo. Este primeiro formulário, faremos o mesmo que fizemos na página de índice. Este será um recipiente de seis colunas com um deslocamento de coluna livre, então col-sm-6, e, em seguida, fornecer os deslocamentos prestes a tornar este um dispositivo médio chamado Md. Em seguida, o valor de deslocamento de três, nível três título, que vai ser Fale Conosco. A imagem para o nosso divisor que é a pasta de imagens e queremos escolher o divisor roxo, o texto antigo, e, em seguida, uma classe de w-25 por isso é 25 por cento da largura. Novamente, se isso ajudar, você pode adicionar um comentário e isso vai ser para a linha de fechamento. Em seguida, sobre o nosso projeto no navegador, e algo não está bem lá. Temos nossos contatos de imagem, só precisamos adicionar uma nova classe de centro de tecnologia. Isso deve fazer o truque, recarregar, e é isso. Apenas estrague isso, vamos adicionar uma nova linha para o nosso formulário. Basta fazer este comentário aqui. Esta seria uma classe de linha, e, em seguida, aninhado dentro aqui, podemos fazer a nossa linha um recipiente de 12 colunas para tornar a nossa forma uma largura total para a página. Abra nossa div, vai ser col-sm-12, que seria o invólucro para nossos elementos de forma. Não precisamos de ações, já que o WordPress vai lidar com isso, mas precisamos de uma aula. Eu vou adicionar uma classe de texto à esquerda, e como parece, isso irá alinhar todos os textos para o lado esquerdo do formulário. Cada entrada vai tomar em um wrapper de grupo de formulários para que o bootstrap possa controlar o posicionamento e layout. Uma div circundante para cada entrada, uma classe de form-group. Cada entrada vai ter um rótulo também. Isto vai ser um rótulo de texto. O primeiro será o Seu Nome. Em seguida, adicionamos o atributo for que vai ser nome, e isso irá vinculá-lo a esta entrada que vamos agora criar. A entrada vai ser um tipo de texto, uma vez que é um campo de nome, uma classe de bootstrap de controle de formulário, o ID e este ID deve corresponder a este atributo aqui para que o navegador saiba que este rótulo está vinculado a esta entrada. Outro benefício de ter estes links é o usuário também pode clicar neste rótulo ou no texto, e também irá destacar a entrada para que o usuário possa começar a digitar. Um espaço reservado para os textos de Digite seu nome. Antes de avançarmos, vamos ver como isso está parecendo. Como dissemos antes, se clicarmos neste rótulo, ele também irá trazer a entrada em foco para que possamos digitar imediatamente. Vamos fazer mais um pouco. Uma vez que o próximo vai ser muito semelhante, podemos copiar o grupo de formulários, colar isso em uma vez que estamos usando as mesmas classes. Este vai ser um rótulo para e-mail. O texto de suas entradas de e-mail, e-mail e o ID também. Também precisamos mudar o titular do lugar para inserir seu e-mail, e vamos dar uma olhada nisso no navegador. Isso está parecendo bem. Na versão final, também vamos adicionar uma área de texto na parte inferior, e então um botão para enviar isso. A entrada da mensagem será uma área de texto. Vamos adicionar o nosso grupo de formulários mais uma vez. O rótulo será a mensagem, o texto da sua mensagem. Podemos remover o tipo de entrada de texto, e no lugar podemos adicionar nossa área de texto. Eu vou remover o nome, definir o ID para a mensagem para corresponder Eu vou rotular. Colunas, eu vou remover, mas eu vou definir as linhas para ser livre seguido por uma classe bootstrap de controle de formulário. A última coisa a fazer apenas para a tag do formulário de fechamento é adicionar um botão para usuário possa enviar isso com o texto de Enviar mensagem... Alguns atributos, a tag de abertura, este é um tipo de envio. Também algumas classes bootstrap de btn, em seguida, btn-primary para dar-lhe a cor azul e também o dimensionamento. Vamos dar uma olhada nisso. Isso é tudo o que precisamos saber para seguir a seção Fale Conosco. A última coisa que vou fazer é verificar se todos os links estão funcionando bem. A página inicial volta ao índice. Temos a página do blog. Na parte inferior da página de índice, podemos verificar o blog funciona e ele faz, Fale Conosco, Eu gosto disso aqui também, então isso está tudo funcionando bem. Isso nos deixa agora com uma ótima aparência bootstrap para modelo para trabalhar com para o nosso tema. Espero que agora você esteja animado para passar a converter este modelo para WordPress. 16. Instalação do WordPress usando o Flywheel: Neste vídeo e também no próximo, vamos estar olhando para duas maneiras de começar aberto rodando com WordPress em nosso computador. Podemos começar a criar temas e testá-los. Alternativamente, se você tem um provedor de hospedagem ao vivo e prefere usar isso, sinta-se livre para ir em frente e fazer isso. Este vídeo vai cobrir a obtenção de configuração com um serviço chamado Local by volante, que é o nosso local por flywheel.com. No próximo vídeo, que é opcional, abordaremos a instalação e configuração do MUMP como alternativa. Eu recomendaria seguir junto com este vídeo em vez do próximo especialmente se você é um iniciante, desde MUMP pode causar problemas para um monte de pessoas, colocar isso depende de você. Vamos começar de novo indo para a página inicial, as versões não pavimentadas para equipes e agências. Mas só precisamos da edição gratuita da comunidade, que está disponível para Mac e Windows. Flywheel nos permite configurar rapidamente projetos WordPress em nosso computador com muita facilidade, e também cuida da configuração das fotos do servidor e banco de dados. Ele não tem recursos muito grandes. Podemos ver o nosso site, e também a seção de administração com o clique de um botão. Também podemos gerar um link ao vivo para ver nosso projeto em qualquer lugar online, e também para compartilhar com outras pessoas. Junto com muitos recursos mais avançados, como a capacidade de configurar WordPress multi-site e muito mais. Para começar, clicamos no link de download, que você acabou aqui no topo aqui. Em seguida, escolha qual plataforma você gostaria, insira seus dados e clique em, Obter agora. Este download pode demorar alguns minutos, então eu retornarei assim que isso for concluído. Uma vez local terminou o download e você vem através da instalação para o seu computador, deve ser levá-lo para uma tela de inicialização semelhante que temos aqui. Isso é apenas com um site de teste de amostra, que vem com o download. Mas quando é ir para baixo para este ícone de adição na parte inferior, nós criamos nossos novos sites. primeiro passo é criar um nome e ele vai ser chamado de Tranquil Spa, continue. Depois disso, temos um ambiente que você deseja escolher. Eu vou ficar com as versões preferidas do PHP e MySQL, mas também é versões personalizadas também. Se você sentir a necessidade de alterar qualquer uma dessas versões, continue. Em seguida, precisamos adicionar um nome de usuário e senha para fazer login. Vou chamar meu nome de usuário Tranquil underscore admin, a senha é com você e quer adicionar o meu aqui. Depois o e-mail, que é um e-mail de sua escolha. Em seguida, adicione o nosso site ao local clicando neste botão, dê-nos alguns momentos para gerar o nosso site. Uma vez que seu site foi configurado, você será levado para esta página e você viu a luz verde ao lado do nome do sinal, você está pronto para ir. As duas coisas principais a observar aqui na tela são os botões no canto superior. O primeiro é ver sites, isso abre uma nova guia de imprensa palavra no navegador, então clicamos sobre isso. Esta é a nossa instalação WordPress real que estamos vendo com o tema padrão. Isto é como é fácil obter configuração com o WordPress no Local. Se agora voltar para o administrador, é também um botão de administração apenas aqui. Isso então nos levará para a página de login para o painel WordPress e este é o nome de usuário e senha que fornecemos ao configurar nossos sites. Meus detalhes eram administrador tranquilo, e para a senha. Vou clicar em Lembrar de mim e, em seguida, Login. Este é o painel WordPress que vamos nos familiarizar muito mais com a medida que percorremos o curso. Ele tem links onde podemos selecionar nossos posts, diferentes ativos de mídia que queremos adicionar. Podemos criar novas páginas, podemos criar ou visualizar nossos comentários, juntamente com a alteração de qualquer aparência e configurações de nossos sites WordPress. Mas vamos cobrir tudo isso à medida que avançarmos ao longo do curso. Você também pode clicar neste link aqui em cima, que também nos levará para o mesmo site que vê aqui. Outra grande característica sobre o uso do volante é que ele também fornece um link ao vivo. Se clicarmos em Ativar na parte inferior, habilitar isso irá gerar um link que iria para no navegador em qualquer dispositivo. Se você clicar sobre isso, você pode abri-lo em seu dispositivo móvel em um navegador diferente ou você também pode compartilhar este link com a família e amigos para mostrar seu progresso. Se você está nesta fase, agora bom para ir com a criação do nosso site WordPress, começando a nossa conversão tema de Bootstrap. Vejo vocês agora na próxima seção onde começaremos esse processo. 17. OPCIONAL: instalação do WordPress usando o MAMP: Este é um vídeo opcional se você preferir usar um serviço chamado MAMP. Configure o Wordpress no seu próprio computador. Se você seguiu com sucesso no último vídeo e configuração WordPress usando o Volante, então você pode ir em frente e pular este vídeo e passar para a próxima seção. Se você preferir usar o MAMP e ainda não o tiver instalado, você precisará ir até o mamp.info, e depois clicar no botão “Download gratuito. MAMP é um ambiente de desenvolvimento local que pode ser usado em Mac e Windows e nos fornece um ambiente que irá rodar PHP e também MySQL Database, que é um requisito para usar WordPress. O próximo passo é realmente baixar WordPress do wordpress.org. Clique em “Obter WordPress” e, em seguida, podemos baixar a versão mais recente, que está atualmente em 5.2. Baixar este é o seu um requisito se estamos auto-hospedagem WordPress em nosso computador usando MAMP. O próximo passo, uma vez que o MAMP tenha sido baixado é ir para a pasta MAMP e também abrir os downloads. MAMP aqui dentro terá um ícone de elefante. Podemos clicar duas vezes sobre isso e abrir a página inicial do MAMP. Isso vai nos permitir iniciar os servidores, e você vê as duas luzes verdes no topo para o servidor e o banco de dados, então tudo está funcionando bem. Em seguida, dentro do diretório MAMP, temos esta pasta htdocs, e é aqui dentro onde adicionamos todos os nossos projetos. Vou adicionar o nosso projeto WordPress aqui nos downloads. Vou descompactar a pasta WordPress e, em seguida, renomear isso, tranquilwp, pressionar “Enter” e agora eu posso arrastar isso para o htdocs. Se você estiver usando um Mac, talvez seja necessário adicionar uma senha nesse estágio para que possamos fechar essas duas janelas. O próximo passo é criar um banco de dados para nossos projetos WordPress. Podemos fazer isso usando MAMP a partir da página inicial da web. Se clicarmos neste ícone, vá para Ferramentas e depois phpMyAdmin. A partir daqui podemos criar um novo banco de dados a partir da guia do banco de dados. Vou ligar para o meu banco de dados Tranquil-Spa com um hífen. Clique em “Criar” e isso é feito. O próximo passo é ir para MAMP, verifique novamente qual parte em que você está executando clicando em “Preferências”. Estou correndo na porta 8888. Tudo o que precisamos fazer agora é ir para localhost 8888. Ele “Enter” e, em seguida, somos levados para o conteúdo do htdocs. Isso nos dará um link para o primeiro e único projeto que eu tenho, que tranquilwp. Se selecionarmos isso, seremos levados para os scripts de instalação do WordPress. Onde podemos começar escolhendo nossa língua. Clique em “Continuar”. Esta etapa nos diz quais requisitos precisaremos como um nome de usuário e senha do banco de dados. Já temos tudo isto. Podemos clicar em “Vamos”. O nome do banco de dados exatamente como fizemos no phpMyAdmin era tranquil-spa, com o hífen. Não configuramos adicionar usuário adicional. Se o fizermos, você precisará adicionar um nome de usuário e senha ao seu banco de dados. Caso contrário, podemos apenas digitar root e root para a senha dois. Estamos usando um host local, e também podemos, opcionalmente, alterar o prefixo da tabela e vamos mudar meu para tranquil_db. Então submeta isto. Se você vir esta mensagem, isso significa que tudo foi agora conectado ao nosso banco de dados, e estamos prontos para executar a instalação do WordPress. Isso não leva muito tempo para fazer. A instalação do WordPress precisa saber o título do site. Quero chamar isto de Spa Tranquil. Este é o nome de usuário e senha que vamos usar para fazer login no back-end do WordPress ou no painel do WordPress. Eu quero chamar o meu, tranquil_admin. A senha que você pode mantê-la como a gerada, ou você pode adicionar uma senha de sua escolha. O endereço de email e, em seguida, conclua a instalação clicando neste botão. Bom, agora estamos prontos para fazer login usando o nome de usuário e senha que acabamos de criar. Clique em “Login” e podemos inserir esses detalhes no WordPress. Então tranquil_admin, a senha Lembre-se de mim e, em seguida, Login. Uma vez que estamos logados será levado para o painel WordPress, que é a área de administração do nosso site. Isso nos permitirá controlar coisas como as páginas, os posts. Podemos fazer upload de qualquer mídia. Podemos controlar comentários e as configurações e aparência do nosso site. Vamos passar por estes com mais detalhes à medida que avançamos através do curso. Também podemos ver nosso site passando o mouse sobre Tranquil Spa e clicando em “Visitar Site”. Isso então nos levará para o tema padrão. Você verá algo parecido com isso quando chegar a este estágio. Se você precisar voltar ao painel, tudo o que você precisa fazer é clicar no título deste site ou ir até o link Dashboard e isso nos levará de volta ao Painel. Se você agora chegar a esta fase, este é WordPress tudo agora configurado em seu computador e agora você pode avançar para a próxima seção onde vamos começar a construir o nosso site WordPress. 18. Pasta de temas do WordPress: Bem-vinda de volta. Agora temos uma versão do WordPress em execução no nosso computador. Agora vamos começar o processo de transferência do nosso modelo Bootstrap para um tema WordPress. Dentro do local pelo volante, podemos fornecer a nova pasta tema navegando para o nosso diretório. Neste pequeno ícone aqui, nós podemos clicar sobre isso e então nós somos levados para onde nosso projeto é armazenado, dentro do nome do projeto, podemos ir para cima, depois para baixo para “WP content” e seguida, para “Temas” e, em seguida, dentro aqui podemos veja os temas padrão gratuitos, que são instalados com o WordPress por padrão. Se você escolheu seguir com este curso, use MAMP, precisa navegar para o diretório MAMP, abrir isso, em seguida, ir para os documentos HT, abrir o projeto, em seguida, ir para o conteúdo e, em seguida, temas e então você pode continuar exatamente como nós vamos fazer. Então aqui dentro é onde vamos colocar nosso novo tema. Para fazer isso, eu vou duplicar nosso modelo bootstrap e, em seguida, uma vez que isso é feito, eu vou renomear isso, WP tranquilo. Uma vez feito isso, podemos arrastar isso para os nossos temas, que o WordPress tenha acesso à nossa pasta de temas. O próximo passo é arrastar isso para o editor de texto. Isso abre no lugar da versão bootstrap. Agora, uma vez que o WordPress usa PHP, o primeiro passo é renomear a página de índice de index.html. Vamos mudar a extensão no final para ser index.php. Este é um dos arquivos necessários em um tema WordPress e, em seguida, dentro aqui precisamos adicionar um comentário na parte superior do arquivo. Este comentário vai estar dentro das tags PHP, em seguida, sintonizado no código PHP, então nós podemos fechar isso com outro ponto de interrogação e a seta de fechamento. Em seguida, podemos adicionar nosso comentário PHP dentro. Um comando PHP é um forward/ e, em seguida, uma estrela e, em seguida, termina com uma estrela e, em seguida, forward/. Em seguida, podemos digitar qualquer conteúdo que você quiser dentro aqui. Vou apenas adicionar o texto do arquivo de modelo principal e, em seguida, salvar isso. O outro arquivo necessário em nosso tema é o style.css. Temos um arquivo CSS personalizado dentro da pasta CSS, então eu vou pegar o CSS personalizado e arrastar isso para a raiz do projeto. Certifique-se de que isto está ao lado do resto das páginas que teremos aqui. Este arquivo para WordPress precisa ser renomeado como style.css. Por isso, é reconhecido pelo WordPress. O style.css também precisa de um comentário na parte superior do arquivo. No entanto, este comentário é um pouco diferente do que adicionamos na página de índice. Se formos até o navegador, então abra um mecanismo de busca, se procurarmos as folhas de estilo do tema do codex, o primeiro link que obtemos deve ser para o códice WordPress. Nós nos referimos ao códice muitas vezes ao longo deste curso para ver as informações sobre as funções do WordPress, que podemos usar. Nós também podemos clicar neste link para saltar para as folhas de estilo tema e esta é a seção exata que precisamos. Este é o comentário que precisamos adicionar ao topo da nossa folha de estilos e este comentário fornece informações diferentes sobre o nosso tema, como o autor, o nome do tema, podemos adicionar uma descrição, qualquer licenciamento informações junto com quaisquer tags que são relativas ao nosso tema, tipos como o tema de cor, o número de colunas, se isso é responsivo e vai chegar à tradução pronta. Nós podemos apenas adicionar quaisquer tags aqui que gostamos, nós precisamos consultar as tags WordPress disponíveis no manual de revisão tema e você pode verificar isso se você quiser. Em [inaudível], eu vou copiar este comentário como um iniciante e, em seguida, acima da seção do corpo, nós podemos colar isso e é apenas um caso de edição do conteúdo para se adequar ao nosso tema. Isto vai ser tranquilo WP. Nós não temos um link aqui, então eu vou apenas inventar um, tranquilspantheme.com, o autor, você pode adicionar seu nome aqui. Você pode adicionar seu site se quiser, também uma descrição. Eu só vou adicionar tranquilspantheme para o nosso WordPress. Eu vou deixar a versão, o licenciamento e para as tags, eu vou remover as cores, apenas me dê as cores de sua escolha, então eu vou deixar isso de fora e depois editar o resto. Eu ia estar pronto para a tradução. Adicionaremos isso em uma seção posterior. Podemos adicionar barra lateral direita. Também incluiremos cabeçalhos personalizados, teremos imagens em destaque e também um menu personalizado. Você pode, claro, depois disso mais tarde, uma vez que adicionamos mais recursos, mas apenas para terminar, eu vou adicionar o domínio de texto, que irá corresponder ao nosso nome da pasta temas de WP tranquilo e, em seguida, podemos excluir o texto direito na parte inferior e, em seguida, salve este arquivo. A próxima etapa é mover as capturas de tela, que foram fornecidas na pasta de imagens. Se você pegar o screenshots.png e, em seguida, podemos arrastar isso para a raiz do nosso projeto ao lado de nossas folhas de estilo e também todas as páginas. Esta será a imagem que aparecerá ao lado do nosso tema dentro do painel. Se salvarmos esse arquivo, é exatamente o que faremos agora. Precisamos ir para o host local no navegador ou se você estiver usando volante, podemos selecionar o botão de administração, login se necessário e o próximo passo é ir para a aparência e, em seguida, para temas. Esta seção tema terá uma lista de todos os temas que já vimos antes dentro da pasta temas, tais como os padrão fornecidos pelo WordPress e agora também devemos ter o tema que temos fornecido de WP tranquilo. Esta é também a captura de tela no fundo, que você pode ver aqui. Podemos verificar a nossa pré-visualização ao vivo, que eu vou simplesmente ativar este tema. Podemos verificar se isso está funcionando clicando no site de visita. Este é todo o conteúdo HTML para o nosso site. Você pode ver que o site precisa de algum trabalho, que é o conteúdo HTML básico, mas isso não está sob o controle do WordPress ainda, nós simplesmente estamos colocando alguns HTML básico. Para começar o processo de conversão, vou criar quatro novos arquivos, que possamos começar a trabalhar nisso. Nas raízes do projeto, o primeiro será chamado de header.php. O segundo será chamado de footer.php. O terceiro será para a barra lateral com a extensão a.php e o quarto será para nosso functions.php e o propósito desses quatro arquivos é detalhar as seções do nosso HTML, em seguida, colocá-los em seu próprio arquivo PHP personalizado e, em seguida, podemos importá-los para o nosso tema conforme necessário e vamos começar com este processo no próximo vídeo. 19. Introdução e página de índice: Uma das primeiras etapas da criação de um tema WordPress é dividir nossas seções de nossos sites em suas próprias pastas WordPress. Em momentos, criamos as pastas de arquivos no último vídeo, que vai segurar o cabeçalho, o rodapé, a barra lateral. Nós também criamos um para as funções, mas também temos o index.php também que no momento ele apenas contém nosso conteúdo do modelo Bootstrap. Vamos começar a trabalhar para levar nosso conteúdo em seus próprios arquivos separados. Vamos começar com o cabeçalho, então se nós rolar para baixo até a tag de cabeçalho de fechamento, que é esta aqui, selecione todo o caminho até o DOCTYPE. Indo para colocar isso para fora, em seguida, colar seu conteúdo no header.php dividindo nosso código em pequenos arquivos como esta é uma maneira realmente conveniente de fazer as coisas em vez de ter este cabeçalho embutido em cada página. WordPress vai tê-lo apenas em um único arquivo e, em seguida, injetá-lo em cada página conforme necessário. Nós também podemos voltar para o nosso índice e fazer o mesmo para o rodapé, para baixo na parte inferior. Role para baixo até nossa seção de rodapé, coloque a seção até a parte inferior, incluindo o HTML. Cole isso em nosso footer.php, se salvarmos isso e recarregar o navegador em nosso índice, vemos que apenas temos o conteúdo que é colocado no meio. Nós não temos mais o cabeçalho e rodapé. Para colocar estes de volta em nosso tema, precisamos ir para a página de índice onde uma vez estes em. Hop no topo, no lugar do conteúdo do cabeçalho, podemos abrir as tags PHP, que é o colchete angular esquerdo, ponto de interrogação, PHP. Em seguida, podemos usar uma função WordPress, puxando este cabeçalho. É função WordPress é chamado de “get_header” com os colchetes recheados depois. Como agora estamos voltando para o PHP e depois para o HTML normal, precisamos fechar nossas tags PHP com um ponto de interrogação e os colchetes angulares, assim como este. Então fazemos uma coisa muito semelhante na parte inferior no lugar de nosso rodapé, onde nosso rodapé estava quando dentro do PHP. Usamos uma função WordPress desta vez chamada get_footer, e depois fechamos nosso PHP, salve isso e recarregue o navegador. Ainda não parece muito nosso conteúdo está de volta no lugar, temos a seção de cabeçalho, na parte inferior, temos nosso rodapé, e isso está tudo bem por enquanto. De qualquer função do PHP, podemos começar a trabalhar com isso adicionando um comentário no topo. Isso vai ser um comando PHP, então vamos abrir e fechar os colchetes PHP. Começamos um comentário com barra e estrela, então fechamos isso com o reverso com uma estrela, e uma barra para frente, e depois uma estrela para cada nova linha. Esta vai ser uma descrição do arquivo e eu só vou adicionar definições de função para Tranquil Spa tema uma vez que este arquivo vai conter todas as funções que são necessárias para o nosso tema. Este arquivo é usado para alterar o comportamento padrão. Ele pode ser usado para adicionar funcionalidade e também novos recursos. Essas funções podem ser funções nativas do WordPress fornecidos tubérculos, ou também podemos adicionar nossas próprias funções personalizadas também. Analisaremos ambos os tipos durante este curso. A primeira coisa a fazer é criar uma função de configuração. Isso será executado assim que nosso tema for carregado. Então, dentro desta função, podemos adicionar qualquer funcionalidade necessária que precisamos ser carregados imediatamente, como nossos menus de navegação. Por baixo dos comentários, eu vou abrir o PHP, em seguida, criar uma função PHP, este nome da função vai ser Tranquil wp_setup, os colchetes logo depois. Em seguida, o nosso corpo de função, a primeira coisa que queremos fazer é adicionar suporte ao tema. Isso registrará nosso suporte ao tema para um determinado recurso. O primeiro será links automáticos de alimentação, separados pelos traços. Automatic-feed-links permite postagens e comentários RSS feeds por padrão. Esses feeds serão exibidos automaticamente na seção da cabeça. Eu vou duplicar isso e também adicionar suporte ao tema para a tag título, title-tag e os ponto-e-vírgula no final. Isso permite que o WordPress gerencie o título do nosso documento, no lugar da tag título. Isto é basicamente dizer que não vamos WordPress para controlar o título da página. Em vez de usar o nosso código rígido. Fora de nossa função, adicionamos uma ação. Isso vai levar em dois argumentos, o primeiro é after_setup_theme, e então o segundo é o nome de nossa função, que é tranquilwp_setup, um ponto e vírgula no final, e eu posso fechar o PHP. After_Setup_theme, que passamos como o primeiro argumento, é um gancho WordPress, que será chamado de carregamento de página em fila, uma vez que o tema é inicializado, ele é geralmente usado para formar uma configuração básica, registro, e também quaisquer ações necessidade para o nosso tema. Em seguida, vamos em frente e passar em nosso próprio conjunto personalizado de funções. Também execute e forneça nossa própria funcionalidade de inicialização personalizada, que você adicionou aqui. Em seguida, pode adicionar a largura do conteúdo. Primeiro, precisa verificar se a largura do conteúdo já foi definida. Este recurso nos permite definir a largura máxima permitida ou qualquer conteúdo adicionado 12 tema, como uma imagem em uma postagem. Nosso design não parece fora de lugar. Se usarmos um era ir em frente e carregar uma imagem maior do que o esperado. A primeira coisa que precisamos fazer é criar uma instrução PHP if. Para verificar se o conteúdo que já foi definido, podemos acessar o conteúdo com com a variável de content_width. Lembre-se, o PHP usa um símbolo $ para declarar uma variável. Nós, no entanto, queremos fazer o oposto, e verificar se a largura do conteúdo não foi definida. Fazemos isso com um ponto de exclamação. Se a largura do conteúdo não foi definida, queremos ir em frente e defini-la nós mesmos. Podemos pegar essa variável de largura de conteúdo e configurá-lo para um valor de pixel de 660. A largura do conteúdo também pode ser acessada por plug-ins para permitir que nossos temas se integrem com qualquer um dos plug-ins que estão instalados. Se formos em frente e salvar este arquivo, não veremos nada diferente dentro do navegador depois de recarregar, já que não fizemos nada além de uma quebra desse conteúdo em arquivos separados. No entanto, este é um primeiro passo importante para criar o nosso tema WordPress. Agora vamos avançar para trabalhar com os arquivos de cabeçalho e rodapé. 20. Tornando o cabeçalho e o rodapé dinâmicos: Agora, para o cabeçalho e rodapé. No momento, temos nosso código HTML dos modelos de bootstrap. Isso é bom para sites estáticos, mas queremos entregar o controle para WordPress. Vou começar passando para o nosso HTML e, em seguida, passando sobre o controle para o WordPress adicionando algumas tags PHP para fazer uso das funções incorporadas do WordPress, começando com o header.php. Vamos abrir esse arquivo e subir até o topo. Podemos adicionar um comentário PHP. Abra o PHP, feche isso, que é assim. Seu comentário será simplesmente o cabeçalho do nosso tema. Uma vez que o WordPress é construído na linguagem de programação PHP, precisamos adicionar qualquer uma das nossas funções incorporadas do WordPress. Também entre essas tags PHP, podemos abrir e fechar essas tags em qualquer lugar em nosso HTML. Por exemplo, vamos substituir o atributo language. Vamos excluir isso da tag HTML de abertura, abrir o PHP, fechar isso, e então podemos adicionar uma função WordPress chamada atributos de linguagem, seguido pelos colchetes e, em seguida, o ponto-e-vírgula. Estes colchetes PHP quando usados dentro do HTML, irá sinalizar o início do código HTML. Em seguida, fechamos isso e, em seguida, o arquivo retornará ao HTML normal. Atributos de idioma é uma função WordPress usada para definir o idioma da página. Mas como o WordPress sabe qual idioma você deseja usar? Vamos até o navegador e dar uma olhada. Vamos recarregar isso, clique com o botão direito do mouse e, em seguida, “Exibir fonte da página”. Se olharmos para cima na parte superior para os elementos HTML de abertura, vemos que temos o atributo de idioma definido para Inglês, EUA. sua pode ser diferente para a sua instalação, mas podemos ver que isso não é o que definimos em nosso arquivo. Nós não vemos nenhum desses códigos PHP que foram adicionados em. Em vez disso, vemos a linguagem real que estamos usando. Isso ocorre porque o PHP é renderizado no servidor. Quando recebemos esta página de volta e abrimos o navegador, nós realmente não vemos o código PHP. Na verdade, vemos o HTML que se regenera em seu lugar. Este idioma é definido no painel do WordPress. Se abrirmos o Volante, clique em “Admin”, depois desça para “Configurações” e “Geral”, temos o idioma do site, que definimos aqui. Se você quiser saber mais sobre qualquer uma das funções do WordPress que cobriremos, você pode visitar o codex.wordpress.org, e procurar o nome da função para descobrir mais algumas informações. Em seguida, vamos definir os conjuntos de caracteres. De volta ao nosso cabeçalho. Para o conjunto de caracteres meta, podemos remover nossa versão codificada do UTF8, em seguida, dentro dessas citações, podemos abrir as tags PHP, fechá-las e, em seguida, dentro adicionar uma função WordPress chamada blog info. A informação do blog que queremos definir é o conjunto de caracteres, que é definido exatamente como este. A codificação padrão no WordPress é UTF8. Isto é o que será exibido. Também podemos recarregar a fonte do navegador apenas para verificar isso. Lá vamos nós. Isso é definido para o UTF8 padrão. Em seguida, temos o título do site, que eu vou remover. Então role para baixo, temos o título usado aqui. Podemos remover completamente ou comentar isso. Isso ocorre porque no functions.php, que adicionamos recentemente, que define o suporte do tema para a tag título. Ao fazer isso, este suporte de tema permite que o WordPress gerencie com segurança fotos do título da página e também declara que não estamos usando um título codificado para o nosso tema. Voltar ao nosso header.php. Podemos usar uma função PHP chamada WP_Head. Isso dirá ao WordPress exatamente onde queremos adicionar as informações geradas automaticamente. A localização disso é importante, pois isso é usado para injetar todas as coisas de extração, como nossos arquivos CSS, quaisquer scripts e eles serão inseridos aqui exatamente onde adicionamos isso. Nós também vamos dar uma olhada em como WordPress lida com nosso CSS e nossos scripts em apenas um momento, mas primeiro, vamos passar para a classe body. Vamos adicionar isso dentro da tag body de abertura, que significa PHP. Feche isso. em seguida, adicione outra função WordPress chamada body_class; Neste também. Ainda certificando-se de fechar a tag HTML bem no final. Ao adicionar esta classe body para a seção body, isso permite que o WordPress adicione quaisquer classes CSS, que é necessário, apenas da mesma maneira que faríamos em HTML regular, adicionando os atributos de classe. Mas agora, em vez disso, isso está sob o controle do WordPress. Se salvarmos isso e, em seguida, recarregar nossa fonte de página, e se localizarmos os elementos do corpo de abertura, que é apenas aqui, agora vemos todas essas classes que WordPress adicionou. Essas classes mudam dependendo da página que estamos visualizando, nossos estados logados, se houver algum erro, e assim por diante, mas tudo isso é tratado pelo WordPress nos bastidores. Podemos até adicionar nossas próprias classes para cada página também, simplesmente adicionando-as como uma string dentro da classe body. Vamos para o costume. Dê isso um salvamento, recarga, e também devemos ver nossa classe personalizada adicionada no final. Isso é adicionado como uma string. Se tivéssemos várias classes, poderíamos adicionar isso como uma matriz. Vou digitar em array. Dentro dos colchetes, podemos adicionar nosso primeiro valor separado por uma vírgula. Podemos adicionar um segundo valor, digamos personalizado 2, “Salvar” e “Recarregar”. Isso adiciona várias classes ao nosso corpo. Não precisamos disso para este projeto, então vou removê-los e deixar a classe do corpo vazio. Ao visualizar a fonte da página, você também pode ter notado que agora temos algum conteúdo extra na seção principal. Se rolarmos para cima, temos todo esse código que está aqui e também todos os links abaixo. Todos estes sendo adicionados automaticamente pelo WordPress. Estes são todos os estilos e scripts que WordPress adicionou desde que incluímos a função WP_Head. Isso está logo abaixo do nosso CSS personalizado. Se procurarmos o nosso CSS personalizado aqui, este é todo o conteúdo WP_Head adicionado logo abaixo. Também temos o título do nosso site, que está sendo adicionado automaticamente, mesmo que tenhamos removido o título da página codificada. A mudança final para o cabeçalho que eu quero fazer neste vídeo é o título do site no topo. Se formos para o nosso projeto, este é o título do site que temos no link. Atualmente, isso é codificado e o WordPress não tem controle sobre isso. Vamos mudar agora. Lidar sobre o controle para WordPress, usamos get_bloginfo passando no nome. Se deslocarmos para baixo até o nosso nav, temos o título do site dentro do elemento A. Podemos remover isto. Vamos abrir os elementos PHP e depois fechá-lo. Dentro daqui podemos ecoar o nome do blog por get_bloginfo. Aqui dentro vamos passar a informação que queremos receber de volta. Este é o nome do site. Se salvarmos isso, e mais uma vez, se visualizarmos a fonte da página e, em seguida, rolar para baixo até nossa seção de cabeçalho meu está na linha 62, e aqui vemos o título do site de Tranquil Spa. Voltar ao nosso site e recarregar. Nós também vemos isso aqui. Para ver onde isso está definido, podemos mais uma vez ir para as configurações gerais e, em seguida, ir para o título do site. Se adicionarmos algo logo após aqui, clique em “Salvar”, “Recarregar o site”; vemos que as alterações são refletidas no navegador. Vamos mudar de volta para Tranquil Spa e depois economizar. A última coisa que eu quero fazer agora no cabeçalho é ter o link de título do site de volta para a página inicial quando clicarmos nele. Atualmente, se clicarmos agora, estamos usando um href vazio, que é definido aqui. Isso funciona por enquanto, mas queremos ter certeza que o WordPress também está totalmente no controle disso adicionando o elemento PHP. Feche estes fora e, em seguida, vamos eco URL escape, passando no home_url como uma função. Assim, o home_url recupera a página inicial do WordPress, e nós passá-lo para o URL de escape para remover ou limpar quaisquer caracteres desnecessários, como qualquer comercial, símbolos percentuais, ou geralmente qualquer caractere que não é necessário. Salve isso e agora basta verificar novamente tudo ainda está funcionando clicando em Tranquil Spa e voltar para a página inicial. Há uma pequena mudança para fazer no rodapé também. Se abrirmos o footer.php, role para baixo até a parte inferior do arquivo. Logo acima da tag body de fechamento, precisamos adicionar uma função WordPress chamada wp_footer. Vamos colocar os suportes, o ponto e vírgula. Isto é um pouco como o wp_head, que fizemos na seção de cabeçalho apenas aqui. Ele será usado pelo WordPress para injetar quaisquer scripts que você pode adicionar. Adicione no wp_footer, portanto, diz ao WordPress onde colocar esses scripts. Também precisamos de um comentário PHP no topo do arquivo. Basta seguir o rodapé, abrir e fechar o PHP. Este vai ser o modelo para exibir nosso rodapé. Dê a este arquivo um salvamento. Voltaremos para o rodapé em uma fase posterior quando olhamos para adicionar coisas como menus personalizados. Mas por enquanto, este é o cabeçalho e rodapé agora alterado para ser mais dinâmico e também para ser ligado mais profundamente ao WordPress. 21. Como enfileirar folhas de estilos e scripts: No momento, temos nossos scripts e nossos estilos diretamente adicionados à nossa área de cabeçalho e rodapé. Isso é de anteriormente quando criamos o modelo Bootstrap. Temos o CSS no cabeçalho. Em seguida, no rodapé para baixo na parte inferior, temos o nosso JavaScript. Se visitarmos a palavra precisa, não vemos nenhum estilo e também coisas como as imagens e ícones. O que vamos fazer agora é remover esses links codificados e, em seguida, movê-los para o functions.php. Podemos então incluí-los no WordPress usando funções chamadas wp_enqueue_style, folhas de estilo de linha, e para o nosso script para obedecer wp_enqueue_script. Mas por que precisamos fazer isso? Bem, há algumas razões. Mas imagine, nosso tema WordPress exigiu um jQuery para ele funcionar, e então imagine se tivéssemos dois plugins e ambos esses plugins também exigem um jQuerry. Se jQuery foi codificado no tema civil e também nos plugins. Isso significaria que o WordPress precisaria baixar jQuery três vezes separadas. Isso iria abrandar nossos sites. Depois disso, eles também podem ser versões diferentes do mesmo script, que pode causar conflitos de versão. Além disso, um script específico também pode ser empacotado com o WordPress, então talvez não seja necessário baixá-lo. Usando essas funções, isso permitirá que o WordPress adquira e carregue apenas exatamente o que é necessário. Ele também pode cuidar de quaisquer scripts adicionais que são dependências para. Vamos começar de novo no header.php removendo as folhas de estilo daqui. Nós temos todos os quatro desses, e então nós também podemos remover todos esses scripts da parte inferior do rodapé. Temos dois aqui, também podemos remover esses comandos, salvar o arquivo, e eu posso ir para o functions.php. Podemos adicionar esses back-in criando uma função PHP. Na parte inferior, ainda dentro da nossa seção PHP, vamos adicionar uma função PHP chamada tranquil_scripts como os colchetes logo depois. Primeiro de tudo, vou adicionar os estilos sem comentários sobre o topo, então adicione os estilos. Então aqui dentro, podemos começar com a função WordPress chamada wp_enqueue_style, ponto-e-vírgula no final. WP_enqueue_style pode levar até cinco parâmetros. O primeiro é o nome das folhas de estilo, que vamos adicionar como uma string de chamada Bootstrap. Esse nome também deve ser exclusivo. O segundo parâmetro que precisamos é a fonte. Aqui, podemos usar uma função WordPress chamada get_template_directory_uri, que nomeia as raízes ou o diretório home do nosso projeto. Vamos adicionar isso agora. Então [inaudível], e é o seu ponto para o nosso diretório pessoal, que é todos os nossos arquivos e pastas à esquerda aqui. Em seguida, usamos um ponto e, em seguida, podemos adicionar em um caminho de arquivo para o nosso CSS. Esta será a nossa versão minificada do Bootstrap, que está na pasta CSS. Como uma string, podemos adicionar /CSS e, em seguida, o arquivo é o bootstrap.min.css. Se dermos isso para salvar agora, feche a barra lateral, para o navegador e clique em “Recarregar”. Não vemos nenhuma alteração no nosso projeto no momento. Para realmente executar a função, precisamos adicionar uma ação, e esta ação será responsável por iniciar nossa função. Logo abaixo, podemos add_action. Isso é exatamente como nós adicionamos acima para nossa configuração. Desta vez, este vai ser o nosso guião. O primeiro argumento é wp_enqueue_scripts, e então o segundo é o nosso nome de função personalizada de tranquil_scripts. Esta ação executará nossa função personalizada de tranquil_scripts, que é esta seção aqui. Cada vez que o WordPress é wp_enqueue_scripts função é chamada. Agora, podemos salvar isso e, em seguida, atualizar o navegador. Agora, como os estilos Bootstrap foram aplicados? O também são folhas de estilo pequenas que precisamos adicionar a esta função, como Font Awesome, nossas fontes do Google, e também nosso CSS personalizado. Vamos fazer exatamente o mesmo de antes. Vou copiar e colar este estilo. Desta vez, vou chamar este fontawesome como o nome. O link desta vez precisa ser ajustado para apontar para o arquivo Font Awesome. Então este é /cssfontawesome/css, e então precisamos do all.min.css. Vamos verificar se esses ícones estão funcionando, clique em “Salvar”, “Recarregar”, e esses são nossos ícones no rodapé. É também o nosso arquivo CSS personalizado 2. Lembre-se, como requisitos do WordPress, precisávamos mover isso para um arquivo style.css, e isso está na raiz do nosso projeto. Aqui embaixo, vamos copiar e colar uma nova linha. Isso se torna B para nosso arquivo personalizado. Nós também precisamos pegar o diretório home, que é get_template_directory_uri. Desta vez, não precisamos adicionar um caminho de arquivo, uma vez que este está na raiz. Tudo o que precisamos fazer é adicionar o nome do arquivo de style.css, salvar e recarregar. Podemos ver que alguns estilos personalizados foram aplicados agora. Ainda não apresentamos as imagens, mas voltaremos a isso muito em breve. A última coisa a adicionar são nossos scripts para jQuery e Bootstrap. Podemos adicionar nosso arquivo bootstrap-js de forma semelhante aos estilos. Mas desta vez, em vez de wp_enqueue_style, executamos wp_enqueue_script, de modo que são os mesmos, logo após o nosso terceiro estilo. O nome da função wp_enqueue, e desta vez este é o script dentro. Aqui, primeiro adicionamos nosso nome, então isso vai ser bootstrap-js. Novamente, este é o nome de nossa escolha, e deve ser único. Segundo, vamos copiar o caminho do arquivo daqui. Ao mesmo tempo, também precisamos usar isso para apontar para o diretório home, e então o caminho do arquivo que vamos usar é suposto ser /js, e então encaminhar barra o nome do nosso arquivo, que é bootstrap.min.js. Também podemos adicionar coisas a isso, uma série de dependências. Eu vou adicionar uma dependência de jQuery. Podemos adicionar vários scripts aqui, e jQuery é empacotado com WordPress por padrão, então não precisamos adicionar isso como um script separado por uma vírgula. Logo depois disso, nós também podemos adicionar um quarto argumento, que é se você quiser usar um número de versão específico, então eu vou adicionar isso como um nulo, o quinto e último valor será verdadeiro. Definir este valor como true irá declarar que queremos que o WordPress adicione este script ao rodapé, Você só precisa da tag wp_footer, que adicionamos anteriormente, e este é este aqui. Finalmente, se salvarmos isso e, em seguida, recarregar nosso tema. Eu também tenho erros de sintaxe, vamos verificar isso, e podemos apenas perder um ponto-e-vírgula. Você tem que salvar. Podemos verificar se o JavaScript está sendo carregado. Se rolarmos para baixo o navegador, e sabemos que o JavaScript está funcionando porque nosso menu suspenso é totalmente funcional. Se agora expandirmos o navegador um pouco maior, e então vamos para recarregar recurso. Primeiro de tudo, vamos para o topo do arquivo. Se olharmos de perto, podemos ver nosso CSS personalizado. Podemos ver o nosso fontawesome, e também o que chamamos bootstrap-css foi carregado. Então até o fundo, também temos um script aqui, que é um dos nossos bootstrap.min.js. Agora você aprendeu como adicionar folhas de estilo e scripts ao WordPress da maneira correta. Isso permite que o WordPress controle o que é carregado e evite quaisquer problemas potenciais. 22. Menu de navegação do cabeçalho: Em nossa seção de cabeçalho, nosso menu se liga na parte superior. Se clicarmos no Início, este link para nossas versões HTML de nossa página de índice, e também se clicarmos no Blog, isso também vai para o nosso blog para HTML. Isto não é o que queremos no entanto para um tema WordPress, vez que queremos WordPress para controlar as páginas e também a navegação. Vamos começar as coisas criando um novo menu WordPress no painel. Então, vamos para o painel principal e, em seguida, ir para Aparência e, em seguida, Personalizar. A partir daqui podemos ir até o personalizador e adicionar um novo menu. Como você adivinhou, podemos fazer isso na guia Menus e, em seguida, criar um novo menu. Este é o nosso primeiro olhar para o que é chamado de customizador. Isso nos permite fazer alterações visualmente em certas partes do nosso tema, e também podemos ver uma visualização no lado direito de nossas mudanças. Assim, podemos brincar com essas configurações e ver como ele fica em nosso tema antes de se comprometer. Usaremos o personalizador para adicionar este novo menu ao nosso tema. Em seguida, adicione um nome de menu do menu principal, clique em “Avançar”, adicione itens a outras páginas que queremos adicionar ao nosso menu. O primeiro vai ser para casa, e então não temos uma página de blog ainda. Então, podemos adicionar o logo abaixo. Clique em “Adicionar” e certifique-se de que temos os links para casa e blog no lado esquerdo. Se quiséssemos, também poderíamos adicionar links personalizados. Também podemos adicionar links para vários posts e as categorias ou tags associadas a esses posts também, mas por enquanto essas duas páginas são tudo o que precisamos para refletir nossos modelos de bootstrap. Nós também podemos adicionar páginas automaticamente ao nosso menu como eles são criados clicando neste botão aqui. Mas só queremos os dois por enquanto. Então clique em “Publicar”, feche isso, e nós podemos ir e atualizar nossa página. Então, o menu é criado, mas não temos ele aparecendo em nosso tema ainda. Estes são os links do nosso HTML. Basta avançar fazer isso, vamos passar para o código WordPress, que está disponível em developer.wordpress.org. Então vá para esta página. Em seguida, podemos fazer uma pesquisa para wp_nav_menu, separados por sublinhados. Então wp_nav_menu. Procure por isso e, em seguida, vá para a referência da função. Vemos no topo wp_nav_menu é usado para exibir um menu de navegação e isso é exatamente o que precisamos. Abaixo disso temos alguns parâmetros que podemos adicionar em nosso menu. Esses parâmetros nos permitem personalizar o menu adicionando coisas como contêineres, juntamente com várias classes de clientes e IDs. Usando todos esses parâmetros nos permitirá dizer ao WordPress exatamente quais classes queremos adicioná-lo ao nosso menu, para manter nosso estilo e layout exatamente como ele está usando Bootstrap. Vou fazer isso usando o que é chamado de navwalker Bootstrap. Vamos até a guia e em busca do Bootstrap para navwalker, que nos levaria para a página do GitHub. Este navwalker nos permitirá vincular todas as classes Bootstrap e IDs e a estrutura básica para o nosso menu WordPress. Então não temos nenhuma diferença no estilo. A primeira coisa que precisamos fazer é baixar o arquivo zip. Vamos clicar em “Clone ou download”. Baixe o arquivo zip. Eu quero que ele baixe precisamos adicionar isso à raiz do nosso projeto. Então abra isso, em seguida, dentro aqui você tem uma classe que é chamada class-wp-bootstrapnavwalker.php. Então vamos copiar isto ou, na verdade, vou arrastar isto para a barra lateral. Isso colocará isso dentro da nossa pasta de temas na raiz do projeto. Se voltarmos para a página do GitHub para o navwalker, role para baixo até a instalação. Nós já completamos o primeiro passo, que é colocar nosso arquivo PHP em nossa pasta. A próxima coisa que precisamos fazer é ir para o functions.php e adicionar o seguinte código. Então eu vou copiar isso para o arquivo de funções e, em seguida, rolar para cima e eu vou adicionar isso logo após o nosso suporte de tema para a tag título, colar isso, e estamos prontos para ir. Então require once que está no início desta linha é uma função PHP, que incluirá o arquivo que especificamos. No nosso caso, estamos apontando para o diretório home principal, e depois para o arquivo PHP que adicionamos. Exigir uma vez é semelhante à função Exigir PHP. Vamos primeiro verificar se este arquivo já foi incluído no passado antes de exigi-lo mais uma vez. Com isso agora registrado vamos voltar para a documentação e o próximo passo é usar uma função WordPress chamada register_nav_menus. Então nós podemos copiar esta função apenas aqui. Isso também precisa passar para o nosso arquivo de funções, e eu quero adicionar isso apenas na linha abaixo. Cole isto. Há também uma função para criar um único menu chamado register_nav_menu em vez de menus. Mas também adicionaremos um menu de rodapé em uma data posterior. Então podemos ficar com os menus. Isto contém uma matriz de menus. Se não tiver apenas o que está nos momentos. Aqui estamos adicionando em nosso menu como primário e vamos dar uma olhada nisso em apenas um momento. Depois disso, teremos uma descrição do menu. Uma vez que chegamos à descrição, o menu de cabeçalho principal. Depois disso, temos o nome do tema. Vou apenas tranquilwp. Esse nome deve corresponder aos comentários na parte superior do style.css. Deve muito este domínio de texto, que declaramos anteriormente. De volta às funções, este domínio de texto também será usado mais tarde para quando olharmos para traduzir nosso texto no tema. Agora vamos voltar para a documentação e continuar com este menu. Se rolarmos para baixo até o uso, o próximo pedaço de código é wp_nav_menu. Isto é o que nós olhamos no códice WordPress pouco antes. Isso será usado em wp_nav_menu para registrar nosso menu, que podemos então ir em frente e mapear nossas classes WordPress com a equivalência bootstrap. Vamos copiar esta função apenas aqui para o nosso cabeçalho, que é onde o nosso menu é armazenado. Nosso menu para navegar para a lista não ordenada. Podemos ter um excluir este ou comentar esta seção para fora. Já que não estamos mais usando essa versão codificada. No lugar é que vamos adicionar algumas tags PHP, já que agora estamos pulando para o código PHP, e depois colar em nosso menu. Observe a lista de parâmetros no lado esquerdo desta matriz. Estes são os parâmetros que vimos antes quando olhamos para wp_nav_menu dentro do site WordPress. Estes são todos os que estão aqui. Em seguida, temos a opção sobre o lado direito para mapear qualquer um destes para a nossa equivalência Bootstrap. Assim, as classes Bootstrap entrarão em vigor em vez dos padrões do WordPress. Se começarmos por salvar isso e, em seguida, recarregar nossa página inicial, vemos que nosso menu agora desapareceu desde que comentamos. Nós vamos para adicionar um menu, mas eu preciso levar para o nosso menu principal que nós criamos antes. Agora precisamos definir este menu principal para a nossa localização tema do menu de cabeçalho principal. Então, selecione isso, salve nossas alterações e observe sob a aparência que agora temos um menu de menus. Podemos voltar ao nosso site clicando neste link apenas aqui. Você pode ver agora que temos o nosso Lar e os nossos links do Blog a partir do nosso menu. Isto acabou agora do lado esquerdo, mas isto é algo que podemos facilmente corrigir agora. Voltar para o menu em seu arquivo header.php torno do nosso menu e, na verdade, eu vou apenas remover esta lista desordenada. Ainda temos essa div circundante com as aulas Bootstrap. Vamos remover isto daqui a pouco. Mas, por enquanto, podemos usar isso como uma referência, já que estamos basicamente substituindo isso pelos parâmetros abaixo. O local do tema é definido como primário. Isso é bom, uma vez que este se liga com o nome em nossas funções de primário apenas aqui. Em seguida, temos a profundidade do menu. Vamos definir isto como um valor de um. Uma vez que este menu não é uma lista suspensa. Nosso contêiner também tem a classe de justify-content-end. Então eu vou copiar isso e adicionar isso no final da classe contêiner. Isso moverá nosso menu de volta para o lado direito. O ID de navbar-nav, podemos tomar isso e adicionar isso como o ID do recipiente. Também podemos remover o valor certo da margem de auto, já que não usamos isso em nosso tema. Este é o nosso contêiner agora replicado e, na parte inferior, criamos uma nova instância navwalker para usar agora tema. Tudo o que resta a fazer agora é remover a div circundante, a abertura, e também as tags de fechamento do navegador e então podemos recarregar. Muito bem, o nosso menu está agora empurrado para a direita. Se formos para as ferramentas de desenvolvedor clicando com o botão direito do mouse e inspecionar, Clique no “Inspetor”, e vá para o menu. Quando encontrar a div com o ID de navbar-nav, que agora contém todos os nossos div e classes que serão redefinidos no navwalker, e então aninhados dentro temos nossa lista desordenada e, em seguida, nossos itens de lista. Se fecharmos isso agora, podemos clicar nos links. WordPress agora tem controle total sobre onde somos levados. Não vemos mais nenhum dos links HTML na parte superior. Então nosso menu agora está funcionando como esperado e é assim que podemos adicionar um menu personalizado ao nosso tema. Em seguida, vamos trabalhar na correção de nossas imagens. 23. Caminhos de arquivo de imagens: Nossas imagens dentro do nosso tema WordPress não têm funcionado desde que começamos a conversão. Isto é algo que vamos corrigir neste vídeo. Se você ir para o botão direito do mouse e, em seguida, ir para as ferramentas de desenvolvedor com inspeções, podemos verificar o console clicando nesta guia. Temos uma lista de quatro ou quatro mensagens de NOT_FOUND. Estas quatro imagens como você pode ver aqui. Isso é algo que podemos consertar facilmente. É realmente apenas um caso de alterar os caminhos dos arquivos para a fonte da imagem. Vamos começar no topo com a imagem de fundo principal, que o em header.php. Se você quiser realocar os elementos da imagem, que é uma seção de feição limpa, role para baixo. Isso é o que precisamos ouvir. Vou substituir a fonte da imagem. Antes do nosso caminho de arquivo para entrar no PHP, abra e feche isso. Dentro daqui vamos ecoar uma string PHP. Em seguida, podemos usar a função URL de escape, que irá verificar e também limpar o URL fornecido, removendo quaisquer caracteres que não são permitidos, então assim como fizemos quando adicionamos o CSS em arquivos JavaScript nas funções, podemos fazer uso de obtenções template URI. É apontar para o diretório raiz do nosso tema. Os suportes estão nas extremidades? São ponto e vírgula no final? Também precisamos adicionar uma barra antes da pasta de imagens. Uma vez que isso não é adicionado por padrão do projeto e recarregar. Agora, agora temos nossa primeira imagem de volta na tela. Agora é apenas um caso de passar pelo resto das imagens do tema e, em seguida, [inaudível]. Você pode ter uma cópia e colar isso ou você pode digitá-lo manualmente se você preferir acelerar as coisas. Vou copiar tudo. Uma tag PHP de abertura até a barra, copiou isso. Podemos encontrar o resto das imagens em nosso index.PHP. Vamos fazer uma pesquisa com comando ou controle F, procurar as tags de imagem. Agora copie e cole nosso PHP. O primeiro, o segundo, as velas, a imagem do retiro. A divisão é necessária para continuar a descer. Temos outra imagem aqui para um divisor. Nós temos a imagem da massagem, nós temos os cosméticos faciais, e isso parece com todos eles. Vamos salvar isso e verificar o tudo ligado agora o navegador, Eu vou rolar para cima e para baixo e verificar apenas as imagens estão onde eles devem estar e tudo parece bem. Se você tiver algum problema com qualquer imagem, certifique-se de que todos têm o código PHP inserido no lugar certo. São as nossas imagens, no nosso trabalho de novo. Em seguida, vamos dar uma olhada na hierarquia de modelos, não utilizado da página. 24. Hierarquia de modelos e página inicial: Agora passamos para criar na primeira página do nosso tema. Você pode estar pensando, nós ainda não temos nossa página inicial exibindo? Sim, você está correto. Quando visitamos o tema, vemos o conteúdo do ponto de índice PHP. Isso é basicamente porque, vez que agora criamos um modelo de home page adequado, WordPress será padrão de volta para o nosso índice de ponto PHP. Para entender melhor como isso funciona, vamos ao Google e procurar a hierarquia de modelos do WordPress. Este é o link que precisamos logo acima do topo. Modelos com usos do WordPress podem ser arquivos reutilizáveis para exibir nossas páginas da web. Já usamos os modelos de cabeçalho e rodapé, que reutilizamos em nosso tema. No entanto, nem todos os modelos precisam ser usados em todo o nosso tema. Podemos criar modelos de página para exibir apenas algumas páginas, ou até mesmo usar controle de renderização condicional quando os usamos. Vamos rolar para baixo até a hierarquia de modelos na seção de detalhes, e esta é a seção apenas aqui. Estamos prestes a descobrir que, no seu mais básico, WordPress usa um sistema de hierarquia para decidir qual modelo controla qual página. Mas no momento em que isso é muito fácil, já que só temos o índice ponto PHP nos coloca nosso tema cresce, o que você vai em breve. Precisamos estar cientes da ordem de seleção, que é usado como temos mais modelos de página disponíveis. Vamos usar o arquivo PHP index dot para exibir nossas postagens de blog, que é bastante comum no WordPress, e depois criar um novo a partir de modelos de página. Se você for para a exibição da página inicial, que você vê aqui, por padrão, WordPress definirá a página inicial dos lados para exibir as postagens mais recentes do blog. Obviamente, ainda não temos nenhuma postagem de blog, e vamos olhar para mudar o tema. Ele vai primeiro procurar por um ponto home templates PHP. Se isso não for encontrado, ele irá retornar para o índice de ponto PHP. A coisa chave a lembrar aqui é que nossas postagens de blog irão padrão voltar índice página se nenhuma página mais adequada for encontrada. É então qualquer nota logo abaixo que diz que o ponto da página inicial PHP irá substituir ambos, e este é um arquivo que será criado em seguida para a nossa página inicial. Se nós rolar para baixo, agora podemos ver o ponto da página inicial PHP. Este ponto de página inicial PHP é usado para renderizar os lados da página, e é exatamente para isso que vamos usá-lo. Se o ponto da primeira página PHP não pode ser encontrado, então vamos procurar por um PHP secundário home dot. Depois disso, se esta página não puder ser encontrada, então procuraremos a página dot PHP, e finalmente o index dot PHP. Se nós rolar para baixo ainda mais, os modelos que podemos usar para o único post, uma única página, diferentes categorias, e muito mais. Faremos uso de muitos deles ao longo do curso, mas esta página é sempre uma boa referência se você precisar entender como as coisas funcionam. Agora vamos começar a trabalhar na criação dos modelos de primeira página. Se passarmos para o painel, clicando no canto superior aqui, podemos criar uma nova página indo para o nosso link páginas e, em seguida, adicionar novo. Este é o lugar onde nós criar quaisquer páginas para o nosso tema, iria começar por criar a página inicial, e, em seguida, clicar em publicar no topo. Agora podemos começar a trabalhar em mover o conteúdo do nosso índice de ponto PHP para o arquivo de página. Vamos duplicar ou copiar e colar o índice de ponto PHP, e então podemos renomear isso o ponto de página inicial PHP. Uma vez que a nossa página de índice não será mais usada para a nossa página de origem, podemos remover todo o conteúdo de entre o cabeçalho e o rodapé. Exclua todas as seções, deixando apenas o cabeçalho e rodapé. Podemos verificar se isso está funcionando bem visitando os sites, e ainda vemos todas as seções da nossa página inicial. Por que ainda vemos todo o conteúdo da nossa página inicial? Bem, isso é porque agora temos um templates mais específicos ou primeira página, e agora tem todo o conteúdo que precisamos. Voltaremos a esta página de índice na próxima seção, onde usaremos isso para renderizar nossas postagens no blog. A próxima coisa a fazer é passar para o painel, e aqui para baixo nas configurações. Em seguida, na leitura, podemos definir qual página você deseja exibi-la para a página inicial e também para todas as postagens do blog. Nossa página inicial exibirá uma página estática. Esta vai ser a página inicial que criamos antes. Salve as alterações, e agora estamos prontos para ir. Nós podemos verificar novamente se tudo está limpo em nossos modelos de primeira página apenas adicionando qualquer coisa aqui. Mudei o bar de estrangulamentos de boas-vindas. Isso é suficiente para ouvir, também primeira página, e esse é o nosso texto aqui vindo da primeira página. Bom, então essa é a nossa primeira página agora configurada e nossa primeira vamos olhar para modelos de página personalizados. Em seguida, irá voltar para o ponto de índice PHP. Vamos criar o loop WordPress, e exibir nossas postagens no blog. 25. Enfeitando o loop: Agora vamos passar para dar uma olhada no famoso loop WordPress, e como podemos usá-lo para percorrer todas as nossas postagens de blog e exibi-las na tela. Acabei de entregá-lo para os sites de desenvolvedores WordPress e, em seguida, na seção de loop, que pode nos dar um pouco mais de informações sobre o que o loop é e o que ele pode fazer. Mas eu destacou provavelmente uma das seções mais importantes e simples aqui, que basicamente diz que o loop irá percorrer cada post recuperado para a página atual um de cada vez, e então podemos executar uma ação para cada post que irá recuperar. Então, basicamente, o que vamos fazer é loop através cada post que foi criado no WordPress, e então podemos estruturar nosso post de blog de qualquer maneira que gostamos de usar HTML e também algumas funções WordPress. Se rolarmos para baixo, podemos ver como o loop parece no PHP. Então isso pode parecer um pouco estranho se você não tiver usado o PHP. Primeiro, se você tirar as tags PHP, que é um monte deles como nós entramos e saímos para o código e, em seguida, dar um passo para trás e ver Redis como ele era Inglês. Nós estamos basicamente dizendo que se postado disponível por ter posts, nós vamos então usar um loop, que é chamado de loop while e, em seguida, vamos loop através todos esses posts e, em seguida, pegar o conteúdo de cada post. Isto significa que o lado interno desta seção de loop while. Em seguida, temos acesso a todo o conteúdo disponível da postagem, como o título, a seção do corpo, quaisquer tags ou categorias ou qualquer outra coisa que criamos. Então, depois disso, tudo o que estamos fazendo é apenas fechar o loop e, em seguida, fechar a seção if de cima. Vamos em frente e criar isso agora. No momento em nosso blog para HTML. Isso é tudo apenas conteúdo estático e isso é bom para um sites HTML normais. Se queremos que o WordPress tenha controle sobre como essas postagens de blog serão exibidas na página. Então vamos criar o loop e, em seguida, vamos criar a estrutura para o nosso WordPress passando coisas como o título, a data e a descrição. Como mencionei anteriormente, vamos criar nossas postagens de blog no index.php. Podemos escrever o loop entre o cabeçalho e o rodapé. Vamos começar abrindo as tags PHP. Em seguida, vamos criar a nossa declaração if para verificar se existe alguma postagem. Ter postagens de sublinhado. Esta é uma função WordPress, em seguida, dois pontos logo depois. Este dois-pontos é uma abreviação ou uma sintaxe alternativa para PHP, o que significa que podemos adicionar nosso conteúdo logo depois se esta condição for verdadeira. Então eu vou fechar isso com um endif e um ponto-e-vírgula, fechar o PHP no final. Então, se você tem postagem disponível, o que você quer fazer? Queremos criar nosso loop while para percorrer posts enquanto eles estão disponíveis. Então, podemos usar a mesma função onde temos posts. Mas vou percorrer cada um deles. uma vez usar dois pontos, e depois declaramos depois disso o que queremos fazer enquanto postado disponível. Quando publicado disponível, queremos usar a função WordPress, o post sublinhado, que vamos chamar os dados do próximo post na linha, que estamos looping e um ponto-e-vírgula no final, e então podemos fechar o nosso loop while com terminando. Isso vai sair do loop assim que terminarmos o loop sobre todas as postagens, ponto e vírgula no final. Então agora dentro desta seção enquanto, temos a informação do post. Podemos ir em frente e criar nosso HTML para criar nossas postagens de blog. Se formos em frente e adicionar um elemento HTML como um dif, assim como este, podemos ver que o editor de texto destacou este branco uma vez que esta não é uma sintaxe válida. Isso ocorre porque estamos criando uma seção PHP com as tags de abertura e fechamento e , portanto, o editor de texto espera que todo o conteúdo seja PHP. Mas já que agora o transferimos para HTML, precisamos agora fechar nosso PHP. Para tornar isso mais legível, podemos colocar tudo isso na mesma linha. Então, depois deste HTML, estamos pulando de volta para o PHP. Por isso, temos de abrir isto outra vez. Também podemos colocar isso na mesma linha para que seja mais legível. Agora o PHP tem as tags de abertura e fechamento, agora estamos livres para adicionar o HTML onde precisamos. Agora temos nossa seção onde podemos criar nossa estrutura de postagem de blog. Eu não vou usar uma função PHP chamada o conteúdo. Abra as tags PHP, feche isso e a função WordPress chamada de conteúdo sublinhado. Isso é usado para filtrar o conteúdo da postagem do blog do banco de dados e, em seguida, renderizá-lo para a tela. Voltaremos a este assunto muito em breve e adicionaremos mais conteúdo à nossa postagem no blog. Mas por agora eu vou adicionar outra seção. Estamos dizendo aqui, se temos posts e vamos construir nossa postagem dentro. Se não, podemos adicionar outra seção, os dois pontos. Então, se nenhum postado disponível, vamos criar alguns HTML, os elementos p, e, em seguida, um texto de desculpe, nenhum post corresponde aos nossos critérios. Podemos ver imediatamente que isso é destacado branco já que precisamos fechar nosso PHP logo acima. Podemos então começar mais uma vez depois disso. Então vamos envolver nosso texto em uma função de eco. Então PHP sublinhado e para exibir isso para o navegador. Então, como uma string, podemos colar em nossos textos mais, adicionar um ponto-e-vírgula, fechar o PHP, e agora tudo está, como deveria ser. Usando esta função sublinhado e permite que o nosso texto seja traduzido mais tarde em um tema, que é uma parte bastante essencial de qualquer tema, a menos que você planeja possuir usa tema para si mesmo em um idioma particular. Então isso pode parecer bem confuso se você é novo em tudo isso. Mas apenas para recapitular, estamos verificando se o post está disponível. Se eles são, estamos fazendo loop com um loop while PHP e cada cartaz define dentro do WordPress, vamos exibir o conteúdo do post com fechamento fora do loop. Então não há mais código por baixo para a execução é este post estão disponíveis. No entanto, se essas postagens não estiverem disponíveis, a seção logo depois será executada e, em seguida, receberemos uma mensagem dizendo: “Desculpe, nenhum post corresponde aos seus critérios. Voltaremos a isso mais tarde, onde construímos o resto de nossa postagem no blog. Então, eles devem parecer um pouco mais claros em um vídeo futuro. Este índice é agora a nossa página de blog padrão. Se nenhum modelo mais específico puder ser encontrado. Nós também precisamos fazer o mesmo agora para o modelo de página também, que vai ser uma página padrão se nenhuma outra página pode ser encontrada. Vamos selecionar tudo, copiar isso, e podemos usar isso como nossa base. Dentro da nossa barra lateral, criamos os templates PHP de ponto de página, colamos isso em. Como estes são os modelos de página padrão, não para postagens de blog, podemos dizer que nenhuma página corresponde aos seus critérios. Finalmente, o modelo comenta na parte superior. Este vai ser o modelo para exibir todos os posts individuais. Então este é agora o nosso básico de loop, mas vamos continuar com isso nos próximos vídeos para construir o resto de nossas postagens no blog. 26. Publicações dinâmicas do blog: Com todo o loop básico agora, tudo configurado. Agora será um bom momento para adicionar algumas postagens de blog para realmente deixar espaço. Podemos fazer isso se formos para o site e depois vamos para o painel. Na seção de postagem, podemos ir para Todos os posts ou Adicionar Novo. A partir daqui eu vou adicionar o novo post, então simplesmente Blog post 1. Alguns texto de exemplo simples um parágrafo é bom, colá-lo em. Podemos adicionar algumas etiquetas. Vamos para notícias, atualizações. Então publicamos. Vamos adicionar mais dois. Clique em “Adicionar novo”, imaginativo com títulos se você quiser, Blog post 2. Adicione alguns contatos de amostra e, em seguida, algumas etiquetas vão para tratamentos de maquiagem e beleza. Esses tipos também serão exibidos na tela. Uma vez que você adicioná-los a um loop, podemos adicionar em algumas categorias. Quando estiver tudo bem, você publica. Então vamos adicionar um terceiro e último. Vai livre. Logo abaixo, podemos escolher um novo bloco, colar no conteúdo. Você pode, claro, clicar no ícone de mais aqui e escolher diferentes estilos de blocos, se você preferir. Subcategorias. Vamos para o cabelo e, em seguida, clique em publicar. Em seguida, precisamos de algum lugar, é realmente exibir essas postagens de blog. Lembre-se, criamos um link de blog em nosso menu. Se descermos para as páginas e clicar sobre isso, temos todas as páginas aqui que criamos a partir do nosso menu anteriormente. Além disso, se formos para o site clicando neste link, em seguida, clique no link do blog na parte superior. Sempre ver na seção de bloco é este cabeçalho e o rodapé sem conteúdo no meio. Bem, para exibir nosso post no meio, precisamos configurar isso no painel. Precisamos ir para o painel, para baixo para as configurações e, em seguida, ler a partir daqui, assim como definimos nossa página inicial anteriormente ser a página inicial. Também podemos exibir as postagens na página do blog. Salve essas alterações. Visite nosso site e, em seguida, volte para nosso link do blog. Você vê esses posts exibindo aqui, porque estamos usando a página de índice. Se você se lembrar anteriormente quando olhamos para a hierarquia de modelos, a página de índice sempre será a página padrão abaixo das postagens do blog. Se nenhuma página mais específica puder ser encontrada. Voltar ao nosso PHP indexado. Agora podemos começar a construir isso para refletir nossos modelos de bootstrap. Se formos para a nossa página de blog, que é o blog para HTML. Deseja copiar todo o conteúdo da seção principal. A partir desta seção de bloco aqui, provavelmente abri-lo na tag principal. Em seguida, todo o caminho até o recipiente principal de fechamento. Copie isso, de volta para a página de índice. Vamos colar isso logo abaixo do cabeçalho. Volte para o topo onde temos nossa postagem no blog. Vou apagar os primeiros, deixando apenas uma postagem de blog no lugar. Basta soprar este “coll-sm-8". Vamos pegar este primeiro e remover e fazer o mesmo com o segundo, deixando apenas uma postagem de blog no lugar. Esta seção vai ser muito importante. Este vai ser o único que precisamos para loop sobre dentro do loop WordPress. Em seguida, podemos usar isso como uma estrutura para cada post do blog. Ao invés de ter o texto codificado como novo recurso, vamos adicionar uma função php ou função WordPress dentro aqui, que irá pegar cada título do banco de dados e, em seguida, colocá-lo aqui. Com isso em mente, agora precisamos adicionar isso como o conteúdo do nosso loop WordPress. Criamos o loop abaixo. Vamos em frente e pegar a seção de abertura, que é esta linha de cima aqui. Podemos chamar isto de nosso lugar. Rolar backup. Acima de tudo post no blog. Vamos colar isto com uma necessidade fecha. De volta ao nosso ciclo. Podemos cortar a seção final enquanto. Leve isso para fora e, em seguida, colar é logo após o final do nosso blog post. A próxima etapa é passar por cada pedaço de conteúdo estático que temos no post do blog. Em seguida, substitua-os em com funções WordPress. Escreva rapidamente o título e as tags h2. Isso pode ser substituído por uma função chamada título. Este é o código PHP. Precisamos abrir as tags PHP, fechá-las. Em seguida, o nome da função do título, seguido dos colchetes e vírgula. Isto como esperado, irá recuperar o título da postagem do blog, para cada post. Se salvarmos isso e depois passar para o navegador, podemos ver o efeito que isso tem, recarregar. Temos o título dinâmico dos posts 3, 2, 1. Todo o resto do conteúdo acaba de ser substituído pelo HTML estático e este é o mesmo para todos os três posts. Temos de ir em frente e tornar isto mais dinâmico. Podemos fazer isso novamente com funções WordPress começando com a data, removendo assim a data codificada para o PHP. Dentro daqui vamos ecoar para exibir isso, o navegador e uma função chamada obter a data. Obter a data vai levar em argumentos livres dentro das citações. Vai ser um F maiúsculo, um j minúsculo, então uma vírgula para separar isso de um Y maiúsculo. Se você é novo no PHP, essas letras F, j e Y podem parecer estranhas. Tudo o que estamos fazendo aqui é definir os formatos que queremos que o dia, mês e ano sejam exibidos. Por exemplo, você deseja que uma postagem de blog criada em janeiro seja exibida como a palavra janeiro ou apenas janeiro, ou até mesmo um mês número de um. Se você quiser saber mais sobre esta função, você pode ir para o WordPress e procurar formatação de datas e hora. Aqui dentro, se rolarmos para baixo, podemos ver o que cada uma dessas letras representa. Por exemplo, usamos o Y maiúsculo, que será um ano de quatro dígitos, assim como vemos aqui. Podemos fazer o mesmo para o mês e os dias também, para obter o formato exato que queremos. Agora, se salvarmos isso, podemos conferir isso no navegador, recarregar nossa página do blog e vemos a data em que cada post foi criado. Em seguida, queremos criar o autor logo depois. Na mesma linha, temos um link para a oferta de postagem do blog. Em vez da versão codificada. Vamos substituir isso por uma função WordPress chamada autor. Isso é simples o suficiente, ele não leva em nenhum argumento, ele vai apenas cortar o autor dos posts, nós podemos recarregar. O autor, no nosso caso, é o usuário conectado, que é administrador tranquilo. Eu só vou adicionar a palavra um pouco antes. Basta seguir um link aqui você pode adicionar por, diga isso. Na verdade, precisa de um espaço logo depois. Recarregar. Agora, sobre estes textos abaixo. Podemos torná-los mais dinâmicos também, usando uma função WordPress chamada tags. Em vez desta versão codificada, vamos remover isto. Adicione uma função PHP, que é as tags de sublinhado. Esta função pode levar em até três argumentos dentro dos colchetes. O primeiro é o texto que você deseja adicionar antes que as tags sejam exibidas. Vou adicionar a palavra marcada, seguida de dois pontos, um espaço e uma vírgula logo depois. O próximo será o separador. Isto é o que vai aparecer entre cada tag. Por padrão, as tags serão separadas por uma vírgula. No nosso tema, usamos o ícone tilda. Vamos adicionar isso com o espaço de ambos os lados. Também podemos adicionar em um terceiro argumento opcional, que é qualquer texto que você deseja exibir após a tag. Mas só vou deixar isso como está, para o navegador. Recarregar. Nosso feed de postagem do blog não tem tags. Para o segundo tem o texto antes de tags. Temos cada tag individual com a tilda separando cada um, também conhecido como dois. Se passarmos o mouse sobre cada uma dessas tags. Estes também links também e se clicarmos sobre eles também nos levar a uma página que irá exibir todos os posts com esta tag particular. Tínhamos várias postagens com a mesma etiqueta. Tudo apareceria em uma lista. Isso é quase agora terminado com a postagem do blog. A parte final da parte inferior é o conteúdo. Já sabemos como agarrar isto. Nós já temos a função na parte inferior, que é o conteúdo. Isso poderia merecer um lugar. Em seguida, mova isso de volta para o nosso blog. Neste lugar do nosso texto lorem ipsum neste final e vamos recarregar. Agora em uma listagem de postagem de blog. Assim, a quantidade de conteúdo que temos não parece muito ruim. Mas se isso fosse muito mais longo, como cinco, seis, sete parágrafos, cada página ficaria muito longo no lugar desse conteúdo. O que muitas vezes queremos fazer em uma página como esta, é encurtar o texto que é exibido. Podemos fazer isso com uma função WordPress chamada Excerpt. Ao invés do conteúdo, vamos colocar isso no trecho. Isso agora deve exibir no navegador uma versão mais curta. Esta página não demora muito. Então, se o usuário quiser ler a versão completa, eles podem então clicar neste post do blog e eles serão levados para uma única página completa.Isto é o que vamos começar a trabalhar com no próximo vídeo. 27. Permalink: Teremos uma versão abreviada da postagem do blog no último vídeo usando uma função PHP ou WordPress chamada trechos. Em um blog típico, também queremos que este post vincule a versão completa em uma nova página quando você clicar nela. Para fazer isso, eu vou fazer este título de post do blog clicável, que irá todos link para esta única página mostrada no conteúdo completo e também criar um link ler mais abaixo deste trecho para vincular a versão completa. Para fazer isso, queremos ir até onde todos os blogs são produzidos, e isso está no índice PHP. Dentro do loop temos este título de post do blog. Eu quero cercar isso em uma tag HTML A que é antes do título e logo depois podemos fechar isso. Dentro deste link, precisamos fornecer os atributos HREF. Então isso vai se ligar ao nosso link permanente. Abra o PHP. Feche isso. Em seguida, dentro aqui podemos ligar para o permalink adicionar os colchetes logo depois e o ponto-e-vírgula. Permalink é o que o WordPress chama de URL atual. No nosso caso, será a URL de cada postagem do blog. Se salvarmos isso e depois passar para o navegador, agora podemos atualizar. Agora veja quando você passar o mouse sobre cada título da postagem do blog, este é agora um link. Podemos então clicar em e, em seguida, estamos levando para uma página com apenas esta postagem de blog. Nós também podemos ver no título, este é tem sua própria URL única, que é o mesmo que o título. Este é o post 3 do blog. Clique no número 1, e a URL é exatamente a mesma. Voltaremos a esta página mais tarde no curso para exibir o conteúdo completo da postagem do blog em vez de apenas o trecho que vemos aqui. Agora vamos passar para o texto Leia mais logo abaixo deste trecho. Volte para trás. Em seguida, em nosso índice de PHP, podemos fazer algum espaço sob o trecho e, em seguida, criar uma nova div, que vai ser o wrapper para o nosso texto. Eu vou adicionar uma classe Bootstrap, que vai ser alguma margem inferior com MB e um valor de três. O conteúdo também será um link, então podemos adicionar isso nas tags A. Feche isso. Podemos simplesmente produzir qualquer texto simples que você quiser aqui. Mas em vez disso eu vou adicionar algum PHP, que vai ser a função sublinhado E, que irá ecoar ou exibir algum texto para o navegador. Isso também significa que isso é traduzível mais tarde no curso. Podemos adicionar o texto de ler mais. Então, assim como fizemos acima com o título, também podemos adicionar o link permanente para o URL para esta postagem atual do blog. O HREF vai ser igual ao permalink. Salve isso e podemos testá-lo no navegador. Volte para o nosso blog. Clique em qualquer um destes. Consulte o texto Ler mais. Isso agora também será vinculado à nossa postagem completa do blog. Novamente com o URL definido como o título. Ainda não temos um conjunto de modelos para a página de publicação de um único blog. Ele está indo para o padrão de volta para o nosso índice de ponto PHP. É por isso que acabamos de ver a versão abreviada do nosso post no blog. Apenas aqui. Bem, isto é algo que vamos resolver daqui a pouco. 28. Paginação: Vamos nos concentrar em adicionar um recurso importante chamado paginação à nossa página do blog. No momento, temos apenas três postagens individuais, que são quatro com a amostra. Mas se tivéssemos centenas de posts, esta página ficaria muito longa. Paginação nos permite dividir as postagens em páginas separadas. Podemos então clicar em alguns botões anteriores e próximos para percorrer todas as nossas postagens no index.php de nossos modelos bootstrap, já temos nossos links para a próxima página e página anterior, então vamos fazer duas coisas neste vídeo. Primeiro vamos substituir o texto da página anterior e seguinte algumas funções do WordPress para fornecer a funcionalidade para isso funcionar. Nós também vamos remover isso fora do loop então na seção L, nós só temos o texto para baixo na parte inferior. Portanto, vamos começar cortando nossa seção de navegação, com nossa lista não ordenada, e também a div de fechamento na parte inferior, então coloque isso fora do lugar. Então isso irá logo após a seção endif, que é o fim do nosso loop. Aqui em baixo, podemos colar isto e apenas recuar isto de volta. Ok, vamos começar com a próxima página. Nós vamos substituir este texto por uma função PHP. Abra o PHP e, em seguida, vamos usar a função WordPress chamada next_posts com um s e, em seguida, link, ponto e vírgula no final. Então vamos substituir a página anterior por uma função WordPress muito semelhante. Este será o link de posts anteriores, separado pelos sublinhados, ponto-e-vírgula no final, e depois fechar o PHP. Salve este arquivo e, em seguida, para o navegador. Vamos recarregar a página. Agora, se rolarmos para baixo, ainda veremos nossas postagens no blog, mas não vemos nossos botões para a página anterior e a próxima. Isso ocorre porque não temos postagens de blog suficientes para realmente criar a paginação. Podemos ir para o Painel e depois descer para Configurações. Na seção de leitura, precisamos olhar para as páginas do blog, mostrar no máximo. Temos este conjunto para ser 10 posts, por isso não vamos criar uma nova página até que tenhamos 10 ou mais posts. Para ver isso em ação, vamos reduzir para cinco, salvar as alterações. Agora podemos ir em frente e criar algumas novas postagens no blog. Eu tenho 1, 2, 3. Vamos criar o número quatro. Copie o texto de amostra, cole isso em. Podemos adicionar algumas tags aqui. Publique este. Publicação cinco do blog, alguns exemplos de textos. Vamos para mais um, vamos fazer o número seis, blog post 6 colar isso e publicar. Agora podemos conferir nossos sites visitando a página do blog. Temos os números 6, 5, 4, 3 e 2, então são cinco posts no blog. Agora temos o próximo link da página. Se clicarmos sobre isso, temos a postagem do blog 1 e também nosso exemplo Olá mundo. Também podemos clicar no anterior para voltar. Isso impedirá que nossa página do blog fique muito longa quando tivermos muitas postagens individuais. É assim que podemos adicionar uma paginação ao nosso tema. Em seguida, vamos dar uma olhada no uso de ganchos de filtro. 29. Ganchos de filtro: A próxima tarefa é remover os colchetes, que está no final da nossa postagem no blog. Vou remover os suportes e deixar os três pontos logo depois. Isto é completamente opcional, mas prefiro a forma como isto parece. Elas são adicionadas automaticamente no local ao usar a função de trecho para exibir a versão abreviada. Também nos dá a chance de ver como podemos usar um gancho de filtro também. Se você não sabe o que é um gancho, gancho nos permite conectar ao resto do WordPress, permitindo-nos fornecer uma ação ou um filtro. No caso deste vídeo, usarei um gancho de filtro chamado 'excerpt_more'. Para saber mais sobre esses ganchos e quaisquer outras funções do WordPress, podemos ir para developer.wordpress.org/reference. Esta página muda ao longo do tempo. Não se surpreenda se isso parecer um pouco diferente. Você vê, aqui, podemos navegar através das funções disponíveis, ganchos, classes e métodos que WordPress fornece. Se clicarmos no link ganchos, somos levados para todos os ganchos disponíveis aos quais temos acesso. Há muitos destes disponíveis. Vou clicar nesta lupa e fazer uma busca por 'excerpt_more' e vemos isso aparecendo. Vou procurar por isto. Então temos a referência de código para o gancho de filtro 'excerpt_more' e podemos ver que este é um filtro que vai filtrar a string no “mais link” exibido após um trecho aparado. Isto é perfeito para o que precisamos. Vamos para o 'functions.php' até o topo. Aqui dentro já usamos alguns ganchos de ação mais cedo. Nós já usamos o 'after_setup_theme', que é este aqui. Vamos executar a nossa configuração 'tranquilwp' logo após este gancho, corrida dura. Nós também usamos 'wp_enqueue_scripts, que irá executar nossos próprios 'tranquilscripts' logo depois. Vou adicionar o nosso próprio filtro logo após esta linha. Mas ainda precisávamos do PHP. Vou criar uma função PHP. Vou chamar isso de qualquer coisa de sua escolha. Quero chamar o meu 'new_excerpt_text' separado pelos sublinhados. Abra as chaves. Todas estas funções que precisa fazer é retornar uma string. Temos tudo o que queremos exibir no lugar dos colchetes. Podemos usar a instrução return para retornar uma string. No lugar eu vou apenas adicionar os três pontos com um ponto-e-vírgula no final e a string pode ser qualquer texto que você preferir. Você pode ver que temos um erro aqui mesmo. Acho que precisamos adicionar um ponto-e-vírgula no final e isso resolverá isso. Em seguida, após a nossa função, podemos adicionar em nosso filtro com 'add_filter'. Isso leva em dois argumentos. O primeiro é o nome do filtro, que é 'excerpt_more', que acabamos de olhar na documentação, separado por uma vírgula. O segundo documento é o nome que demos à nossa função logo acima. Isso é novo e adicionar isso como uma string, novo trecho e, em seguida, texto, ponto-e-vírgula no final e depois sobre o nosso tema no navegador, ele recarrega. Agora, são apenas três pontos no final sem os colchetes. Eu acho que isso dá um olhar muito mais limpo para o nosso blog. Para o takeaway chave para isso é lembrar que cada vez que queremos fazer algo no WordPress, muitas vezes há um gancho disponível para isso para usar, e ele só leva uma pesquisa da documentação para encontrá-los. Além disso, lembre-se de nunca ser tentado a alterar os arquivos principais WordPress diretamente para usar esses ganchos em nossos temas personalizados ou nossos plugins é perfeitamente bom. 30. Reintrodução da barra lateral: Em nossa página de blog, você deve ter notado que não temos a barra lateral no lado direito, que tínhamos em nossos modelos de bootstrap. Isso ocorre porque ainda temos isso localizado dentro do nosso loop Wordpress na seção else. Isso não será renderizado para a tela enquanto tivermos postagens de blog no momento. Para corrigir isso, podemos ir para o nosso index.php e, em seguida, se formos para a nossa seção mais, logo depois, temos esta seção de lado, que é o wrapper para a nossa barra lateral. Se selecionarmos toda a seção de lado, então eles também fecham e rolam no recipiente. Desde tudo o que precisa ser contido dentro disso. Isso é apenas trazer isso à tona. Então eu vou adicionar isso logo após o próximo e anterior postlink logo acima da seção de rodapé, podemos colar isso em. Deixando no lugar a seção designada, vou tirar todos os divs aqui dentro. Então codifica todos os blocos da nossa barra lateral e agora podemos usar esse conteúdo para entrar no nosso sidebar.php. Só uns pedacinhos simples e arrumados. Pegue o conteúdo e, em seguida, abra a barra lateral e vá para o nosso sidebar.php. Podemos colar este conteúdo aqui dentro. De forma semelhante ao que fizemos com o cabeçalho e o rodapé, dentro do nosso index.php, podemos reintroduzir o conteúdo de uma barra lateral usando uma função WordPress. Aqui na parte inferior, usamos obter rodapé para a barra lateral como você provavelmente adivinhou, precisamos usar obter barra lateral. Abra e feche o PHP. Em seguida, função Wordpress que fica sublinhado barra lateral, os colchetes e o ponto-e-vírgula. Por padrão, obter barra lateral, vamos procurar um arquivo chamado sidebar.php. Se você tiver a necessidade de introduzir mais de uma barra lateral em seu tema, como um sidebar-dark.php. Se tivéssemos este arquivo, nós vamos, iria então remover a seção da barra lateral e, em seguida, apenas adicionar o nome de escuro dentro aqui. Em seguida, isso iria procurar o arquivo dark.php da barra lateral e, em seguida, adicionar isso no lugar do padrão. Não precisamos disto, por isso vou apagar isto e até que esteja vazio. Isso agora é exatamente o que tínhamos antes em nossos modelos de bootstrap. A única diferença é o conteúdo da barra lateral de agora ser terceirizado em um arquivo separado, assim como com o cabeçalho e rodapé. Agora podemos tentar isso no navegador e a barra lateral agora é reintroduzida em nossa página. Voltaremos para a barra lateral seguinte, onde vamos substituir todo este HTML com conteúdo dinâmico, dizendo ao WordPress. 31. Tornando a barra lateral dinâmica: Exibir essa barra lateral na página agora é um passo na direção certa. No momento, temos apenas os dados fictícios que foram adicionados ao nosso tema. É nisso que vamos nos concentrar neste vídeo. Primeiro de tudo, o bloco acima na parte superior, é apenas um texto simples básico. Podemos deixar isto como está. Depois disso, temos nossas seções dinâmicas de arquivos e categorias, e podemos trabalhar com elas no sidebar.php. Este é o bloco superior com o texto. O segundo é o arquivo. O que precisamos fazer, precisamos remover nossos itens de lista livre que temos dentro das listas ordenadas, e, em seguida, no lugar disso, podemos adicionar uma função WordPress chamada wp_get_archives. Colchetes e, em seguida, ponto e vírgula no final. Vamos verificar este trabalho no navegador. Recarregar. Bom, eu só criei essas postagens em um mês. Vemos apenas um mês aparecer nos arquivos. Podemos clicar sobre isso, vemos a data está sendo preenchida no URL, e também os posts plug que criamos neste mês. Agora vamos passar para as categorias logo abaixo. Podemos fazer uma coisa muito semelhante removendo nossos dois itens de lista e, em seguida, substituindo isso por uma função WordPress. Esta função WordPress desta vez é chamado wp. Estas categorias, confira isto. Você tem várias categorias, portanto, Atualizar. Temos as notícias, ofertas e também uma seção para qualquer blog-post sem categoria. Por padrão, também temos o título de uma categoria na parte superior. No entanto, já o temos como título. Podemos remover isso, se voltarmos para a função WordPress de categorias de lista. Aqui dentro como uma corda, podemos definir o título. Então title_li. Eu vou poder definir isso para ser igual a nada. Salve isso, Recarregar e o título foi desdefinido. Se você também quiser verificar a referência da função WordPress, você encontrará muitos outros argumentos também, se necessário. Como a capacidade de classificar categorias, adicionar qualquer estilo adicional e também adicionar um separador entre cada categoria. Eu só vou deixar isso por agora, já que já adicionamos o estilo usando Bootstrap. Agora podemos clicar em “Categoria”, vamos para Notícias. Vamos ver como um post de blog gratuito aqui, ofertas. Nós só temos dois que é marcado com ofertas, e então qualquer que não se enquadre em uma categoria. A última coisa que temos em nossa barra lateral são nossos ícones de mídia social. De acordo com suas próprias páginas de mídia social aqui. Eu só vou adicionar um como exemplo, então vamos para o Twitter. Você pode adicionar o link com elementos HTML. Podemos encontrar a localização do link com o href: https://twitter.com/chrisdixon161. Feche isso. Então, logo após os nossos elementos i, podemos fechar o nosso link e, em seguida, recuar isso. Vou deixar o resto para vocês se quiserem ir em frente e adicionar mais links de mídia social. Assim que acabares com isto, vejo-te no próximo vídeo. 32. Tags condicionais do WordPress: Se olharmos para os nossos modelos Bootstrap originais que eu abri aqui, temos o texto do tema spa premium completo responsivo para WordPress no cabeçalho. Em seguida, se clicarmos na seção Blog, o texto muda para blog oficial spa tranquilo. Passe o mouse de volta em nossa versão WordPress, nós apenas temos o mesmo texto se clicarmos em ambas as páginas. Uma vez que ambos os arquivos usam nosso header.php, o que significa que o texto será o mesmo. Para corrigir isso, vamos ver como podemos adicionar algum código PHP personalizado em nosso tema. Este código detectará em qual página estamos atualmente e, em seguida, podemos processar condicionalmente o texto com base na página. Esse texto é armazenado no header.php. Vamos trabalhar ali. Se localizarmos a área de texto do recurso, eu vou remover o texto daqui, então corte isso, e então no lugar vamos adicionar algum PHP personalizado. Esta vai ser a nossa própria função PHP personalizada e nada a ver com WordPress. Vamos chamar isso de capital de texto de recurso T. Agora podemos configurar isso em nossas funções dot PHP, vamos para aqui. Então logo após nosso filtro, ainda dentro das tags PHP, podemos criar essa função, que é chamada de texto do recurso. Dentro do corpo desta função, o trabalho é verificar se estamos na primeira página ou na página do blog e, em seguida, exibir o texto correspondente. Podemos fazer isso com uma declaração if para verificar primeiro usando a função WordPress, se a página é a primeira página. Se for, adicionamos algumas chaves depois. É a primeira página, é uma tag condicional WordPress, que nos permitirá definir o texto que queremos para a primeira página. Assim, podemos adicionar um sublinhado, e, o eco do nosso texto. Isto vai ser uma string, para adicionar nas aspas. Eu cito os textos fora do cabeçalho antes, então agora podemos colar isso de volta no lugar. Vamos verificar se tudo funciona no navegador. Certifique-se na versão do WordPress, oops, e temos um erro. Linha 43, ponto-e-vírgula novamente, salve isso, recarregue e há texto em nossa página inicial. No entanto, se formos para o nosso blog, vemos que nenhum texto está sendo gerado. Isso ocorre porque só definimos o texto se a página for a primeira página. Se não for a primeira página, podemos adicionar uma tag nunca condicional chamada is home. A função is home irá se referir à página de postagem do blog. Olhando para isso em uma seção else-if, dentro dos suportes, usamos nossa tag condicional de é casa. Abra as chaves e quer fazer uma coisa semelhante a antes. Vamos ecoar para o navegador e são atos de spa tranquilo, blog oficial com ponto e vírgula no final. Vamos salvar isso e recarregar. Nosso texto do blog oficial do spa tranquilo está agora sendo exibido na página do blog. Se você é novo para, se else instruções eles irão executar o código dentro das chaves. Por exemplo, se for from page retorna true, então o texto dentro dessas chaves será executado. Se não estivermos na primeira página, você voltará para a próxima seção, que é elseif. Verifique se a página é home e, em seguida, ele irá executar o código dentro do conjunto de chaves em vez disso. Também podemos adicionar várias seções elseif e faremos isso mais tarde no curso. Descobrindo no final, se nenhuma dessas condições atendeu, podemos adicionar uma seção L final. Isso funcionará como um recurso se nenhuma das duas condições acima for atendida. Se não, vamos apenas ecoar para a tela o texto padrão que temos na página inicial. Cole isso em e isso funcionará para coisas como um acompanhamento de quatro páginas ou qualquer uma das páginas que não definimos o texto personalizado. Vamos continuar adicionando a esta função à medida que criamos mais modelos de página, tanto análise, tudo o que precisamos. Em seguida, passaremos para os nossos modelos de página única. 33. Modelo Single.php: Na última seção, quando criamos esta página do blog, também adicionamos uma função permanente para permitir que este link para a página de postagem completa do blog. Quando eu clico no Título, somos levados para uma única exibição de postagem, para ver mais detalhes sobre a postagem. No momento, porém, ainda vemos a versão abreviada do post do blog, todo o trecho como é chamado, e também podemos ver o texto lido mais na parte inferior, que também precisamos remover. Isso ocorre porque o tema retornará ao arquivo index.php por padrão, se o arquivo mais específico não puder ser encontrado. Neste vídeo, eu agora quero criar um novo modelo de página Tranquil chamado single.php, e este é um arquivo que é reconhecido pelo WordPress como o modelo para exibir um único post de blog. Vamos ao nosso editor de texto na raiz do projeto. Clique em “Novo arquivo”. Este é o single.php. Podemos começar como sempre com nossos comentários no topo. Abra ou feche as tags php, e então adicionamos um comentário com a barra, e então as estrelas se fecham. Na verdade, vai ser o modelo para exibir todas as postagens do blog. Uma vez que este arquivo compartilhará muitas semelhanças com o index.php, vou até lá e copiar o conteúdo para começar. Na parte inferior do rodapé, copiamos tudo para o cabeçalho. Assuma isso e adicione isso apenas sob nossos comandos em um single.php. Vamos começar no topo deste arquivo. O título, nós só queremos exibir o título na parte superior da postagem do blog. Não precisamos deste link para o post completo já que já estamos lá. Podemos remover a ligação em torno disto. Remova isso, devemos deixar agora em nosso single.php. Se recarregarmos, veremos agora que não podemos clicar neste título da página, significa que o único arquivo que criamos agora está entrando em vigor. A próxima coisa a fazer é fazer estes textos aqui, o conteúdo completo e não o trecho. Se rolarmos para baixo até o trecho, que é esta função apenas aqui, tudo o que precisamos fazer é simplesmente mudá-lo de volta para ser o conteúdo, e esta é agora a versão completa do conteúdo do nosso blog post. Só temos um parágrafo para o momento. Podemos ver que este é o conteúdo completo que temos. O próximo passo é remover este ler mais texto. Uma vez que já temos o post completo do blog, sobre single.php, se olharmos para este ler mais texto aqui, eu vou remover o link completo ou a div completa em torno disso. Não precisamos mais de nada disso. Diga isso e o texto desaparecerá. Vamos apenas confirmar que tudo está funcionando bem, se voltarmos ao nosso blog, ainda vemos a versão abreviada. Ainda vemos o link para o título e ler mais texto. Voltar ao nosso single.php. Para encerrar este vídeo, se você notar, na parte superior, temos o texto VG padrão. Isso ocorre porque no functions.php, criamos a seção else como um fullback, se nenhuma página mais específica for encontrada em ambos. Então o padrão de volta para o texto que vemos aqui. No entanto, queremos o texto do Tranquil Spa Official Blog já que ainda estamos dentro da seção do blog. Podemos adicionar um operador dentro deste outro se seção para verificar se a página é home, ou podemos usar os dois pipes para verificar se este é se casa ou está em um único, que irá apontar para os modelos single.php. Agora, para o único arquivo e nosso texto agora está sendo exibido como o blog oficial. Voltaremos a este único post no próximo vídeo e mostraremos como incluir a paginação. 34. Paginação: Bem-vinda de volta. Neste vídeo vamos introduzir a paginação. Isso nos permitirá organizar nossa postagem de blog de duas maneiras. Em primeiro lugar, podemos dividir postagens muito longas em páginas menores e mais gerenciáveis, que então têm números de página na parte inferior, onde você pode clicar para pular entre elas. Em segundo lugar, quando estamos no único post view, podemos então adicionar um link na parte inferior do post. Isso dar para a frente e para trás para o próximo post ou anterior. Vamos começar com a adição de um pager quando tivermos uma postagem de blog muito longa. Isto é uma coisa muito simples de se fazer. Precisamos ir ao post de edição. Vá para qualquer post de blog e, em seguida, clique em editar, vai, em seguida, levar para a seção de edição do painel e aqui vemos que temos um parágrafo de texto. Se, em seguida, clicar no símbolo de adição no topo, podemos inserir um novo bloco para todos os post. Vou fazer uma busca por quebra de página. Em seguida, clique na quebra de página apenas aqui. Então podemos continuar com o nosso conteúdo que eu vou apenas copiar este parágrafo e, em seguida, adicionar um novo bloco, que vai ser um parágrafo de texto. Cole isto. Vamos fazer mais uma. Logo abaixo disso, podemos adicionar um novo bloco, adicionar uma nova quebra de página, copiar texto pequeno. Clique no símbolo de adição para obter um novo parágrafo. Cole isto. Clique em Atualizar para salvar nossas alterações e, em seguida, ver nossa postagem. Nós imediatamente vemos o nosso primeiro parágrafo de texto e isso é até a nossa primeira quebra de página. Mas não vemos nenhum número de página na parte inferior para passar para a próxima página do conteúdo. Mas isso precisamos dizer ao WordPress onde quer que esses links apareçam em nosso tema. Queremos que isso apareça no arquivo single.php e vamos usar uma função chamada páginas de link WP, que eu vou adicionar logo abaixo do conteúdo. Para a função de conteúdo abaixo aqui, abra o PHP. Em seguida, dentro, use a função de páginas de link WP, colchetes logo depois e um ponto-e-vírgula. Se agora dissermos isso e atualizar. Tão bom, agora vemos os números de página na parte inferior, que liga ambos a partir de uma página atual este CSS é um pouco confuso. Antes de corrigi-lo, vamos verificar se o resto da página está funcionando. Podemos clicar na página 2, que também mostra a página atual no URL. Vamos tentar o número 3 e está tudo funcionando também. Antes de avançarmos mais, vamos mudar o CSS. Isso se aplica porque se entrarmos nas ferramentas de desenvolvedor com o botão direito do mouse e inspecionar, vamos passar o mouse sobre esta página atual e isso é fundado em um elemento span. Os elementos span já tem algum estilo personalizado da nossa página inicial, que é para a seção de preços para cada um do escritório. Vamos editar isto. Se entrarmos na barra lateral e, em seguida, para baixo da página dentro aqui temos esses elementos span. Vou adicionar uma classe personalizada. Vamos dar o nome a este preço. Esse é o primeiro. Podemos fazer isso para o segundo período e também o terceiro para baixo perto da parte inferior, dar que salvar e depois para o nosso style.css. Nunca precisamos procurar nosso espaço, que é só aqui. Proveniência, podemos chamar isso de preço com um ponto, já que esta é uma classe. Feche esses arquivos, recarregue. Estes ainda estão funcionando bem, vamos conferir o nosso blog. Clique em qualquer um desses blogs individuais, e vá para nossas páginas gratuitas e agora para baixo na parte inferior. Em seguida, escolha um link abaixo na parte inferior aqui, que vai ser um link para o anterior ou o próximo blog post. Voltar para o single.php. Temos alguns links para baixo na parte inferior que copiamos do nosso index.php. Esses links, se formos ao nosso blog, esses links percorrerão nossa página anterior e nossa próxima ou postagens de blog. Queremos fazer uma coisa semelhante para todas as páginas. Tudo o que precisamos fazer é renomear esta função para ser post em vez de ter o S no final. Faça isso para o anterior ou o próximo, é seguro. Em seguida, entre em qualquer um dos nossos posts de blog e como nossos dois links. Estamos no blog posts 1, então o anterior será o nosso mundo Olá. Podemos então pular para a postagem do blog 1, número 2, número 3, e tudo isso funciona bem. É assim que podemos usar a paginação no WordPress. Em seguida, continuaremos com a exibição de postagem única, observando como podemos ativar comentários. 35. Formulário de comentários: Uma característica comum ao trabalhar com um blog é ter uma seção de comentários abaixo de cada post. Isso permite que nossos leitores comentar ou fazer perguntas sobre o post e também outros podem responder e comentar também. A funcionalidade de comentários será adicionada nos próximos dois vídeos. Este vídeo vai se concentrar em adicionar a entrada de formulário real e, em seguida, o próximo será o código para exibir os comentários sob a postagem do blog. Para os comentários, eu vou adicionar um novo arquivo que é chamado de comments.php. Isso vai estar nas raízes do projeto, juntamente com o resto dos modelos de página. Crie o comments.php, adicione tags PHP no topo para nossos comentários, feche isso com o texto do template para exibir comentários. WordPress tem uma função embutida que irá exibir um formulário de comentário padrão, isso é chamado de comentário na forma do crânio. Como esta é uma função PHP, você precisa abrir as tags PHP. Então isso é chamado de comentário na forma do crânio. Vamos dar a este arquivo um Salvar e, em seguida, abrir nosso arquivo single.php, recarregar qualquer postagem de blog. Não vemos nenhum novo conteúdo adicionado a esta página. Sob essa causa, precisamos configurar onde queremos que o formulário apareça neste modelo. Podemos adicionar isso em nosso single.php. Vamos logo acima da seção nav para todas as páginas, as tags PHP. Dentro daqui vamos criar uma instrução PHP if. Aqui dentro, isso vai verificar duas coisas: Primeiro, vamos verificar se os comentários estão realmente abertos. Em seguida, usamos o operador, que é os dois tubos. A segunda condição é verificar se temos pelo menos um comentário disponível para exibir. Fazemos isso com a função WordPress chamada get_comments_number. Em seguida, precisa de dois pontos no final onde adicionamos o conteúdo, que você deseja exibir é esta condição é verdadeira, o conteúdo que queremos exibir é o modelo de comentários. Este modelo de comentários será padrão para o nosso arquivo comment.php, que já criamos. Vamos checar isso no navegador. Tem erro de sintaxe na linha 52 do single, só precisamos adicionar se no final para fechar a nossa declaração if. Exibido é o formulário de comando padrão do WordPress. Deixamos isso no estado padrão ou também podemos adicionar argumentos a este comentário formar a personalização, incluindo algumas classes bootstrap para torná-lo melhor se encaixar com o resto do nosso tema. No arquivo comments.php, podemos configurar uma matriz de valores para personalizar cada campo no formulário. Vamos adicioná-los logo acima do formulário de comentário. Podemos criar uma variável com o símbolo $, que eu vou chamar args. Set é para uma matriz PHP. Podemos então passar em nossos argumentos para o nosso formulário de comando. Isso entrará em vigor e adicionará um ponto e vírgula no final. Antes de adicionar em nossos argumentos, vamos dar uma olhada rápida em nosso formulário. Vou começar com a personalização deste formulário no topo, que é o texto deixe uma resposta. Todas essas modificações são feitas fazendo alterações nos parâmetros padrão em nossa matriz. Se passarmos para o site WordPress e dar uma olhada para a seção de formulário comum. Isso nos mostrará todos os parâmetros disponíveis que podemos alterar. Se deslocarmos para baixo até a seção de parâmetros. No momento estamos trabalhando com o título. Precisamos segmentar um campo chamado título sublinhado resposta. Se procurarmos por isso, que é este campo apenas aqui, este é um campo que precisamos personalizar o título do formulário de comentário. Tornando este o primeiro argumento que precisamos adicionar no título, sublinhado, responder. Em seguida, um operador de seta, que é o símbolo de igual, e, em seguida, a seta para a direita. Podemos então definir o novo título como resposta ou comentários ou você pode personalizá-lo para qualquer texto que preferir. Este operador de seta quando usado em PHP com uma matriz, é basicamente usado para definir o valor no lado direito para a chave à esquerda. Em seguida, vá para o nosso projeto e atualize. Agora mudamos o título do formulário. Também podemos adicionar algumas classes Bootstrap para adicionar algum espaço na parte superior e inferior deste título. Podemos fazer isso adicionando uma div dentro de nossa string. Uma classe Bootstrap ou título responde um valor de três, em seguida, fecha nossa div, logo depois, ele recarrega e há o nosso espaço na parte superior e inferior. Em seguida, podemos passar para a nossa seção comum, que é esta área de texto. Para isso, usamos um campo se formos para a nossa referência chamada comentário sobre o campo do crânio, que é este aqui. Isto é para definir a área de texto e o rótulo do corpo dos comentários. Em nossos argumentos faz você adicionar uma vírgula logo após nossa resposta título. Podemos, então, direcionar esses campos comuns, configurar nossa seta e, em seguida, nossa string. Para deixar isso mais claro, vou adicionar isso em várias linhas, começando com uma seção div. Podemos adicionar classes Bootstrap assim como fizemos acima, esta vai ser a classe grupo formulário. Em seguida, podemos definir um rótulo se quatro atributos, isso vai ser para comentários, o texto de comentários, em seguida, fechar fora nosso rótulo. Em seguida, uma tag break para adicionar isso a uma nova linha. Em seguida, temos nossa área de texto, as tags de abertura e fechamento. Dentro da tag de abertura, podemos adicionar nossos atributos. O ID será igual a comentários. Tomate colocar o rótulo, o nome do comentário dois a classe Bootstrap vai ser formado controle. Então, finalmente, na última linha, isso vai ser para fechar nosso div, então o arquivo foi bem projeto e recarga. Bom. Esta área de texto agora se encaixa melhor com o nosso tema. Em seguida, também temos este botão enviar na parte inferior. Muito em breve eu também vou voltar e criar um campo de nome e e-mail. Quem vai fazer isso mais tarde, já que isso é um pouco diferente. Este é o alvo, o botão enviar. Logo após a nossa string, podemos adicionar uma vírgula. Isso é para o botão Enviar, então Enviar no botão crânio. Configurar a nossa seta, em seguida, como uma string, podemos adicionar o nosso botão Bootstrap com o tipo de envios. As classes bootstrap de btn, btn-primary. O texto a ser exibido em um botão de enviar e, em seguida, fechar nosso botão escreve no final. Ainda dentro de uma string adicione uma vírgula, pressione “Salvar” e recarregue, agora como nossas classes Bootstrap agora entraram em vigor. Em seguida, vou adicionar um campo de nome e e-mail. Se voltarmos para a documentação para o formulário comum, então o que queremos a seguir é este valor de campo. Isso vai ser para os campos de entrada de oferta, e-mail, URL e cookies. Para trabalhar com isso, precisamos configurar a matriz de campo aninhado dentro de nossos argumentos é matriz de campo também faz uso do formulário de comentário. Os campos padrão ganham para aplicar filtragem, então de volta aos comentários do PHP agora podemos ver esta inação. Suas coisas que nosso botão, certifique-se de que há uma vírgula no final. Podemos perguntar aos nossos campos. Configure isso como antes, mas desta vez vamos aplicar nos filtros do crânio nos suportes. O primeiro parâmetro dentro de nosso filtro é o nome do gancho de filtro, que vimos antes como campos padrão de formulário comum. Adicione isso como uma string, formulário de comentário, campos padrão. Em seguida, o segundo parâmetro é a nossa matriz de campos que você deseja filtrar. Dentro deste array, podemos adicionar a oferta de e-mail, URI ou cookies, que já vimos antes. No nosso caso, por isso só queremos segmentar a oferta e o e-mail. Vamos começar com a oferta como uma string. Esta é uma configuração exatamente como fizemos com qualquer outro campo logo acima. Vamos adicionar isso como uma string e criar algum espaço. Precisa de uma div envolvente com as classes Bootstrap ou grupo de formulários. Em seguida eu rotulo, fechar rótulo de dois. Podemos adicionar nossos atributos dentro. O primeiro vai ser quatro, isto é para a oferta com o texto do seu nome. Então eu vou formar entradas, isso vai ter o ID, que vai ser autor, após o link que temos rótulo, o nome da oferta, este é um tipo de texto. Então, finalmente, a classe Bootstrap de controle de formulário fecha. Então também precisamos fechar nosso div circundante. Próxima parada é o e-mail, que vai ser outro item em nossa matriz. Então eu vou copiar a seção off, adicionar uma vírgula, e então colar isso logo abaixo, este vai ser para o e-mail, vamos copiar esta seção de e-mail. Temos estes rodada e div vai ser o rótulo para e-mail, texto de seu e-mail, ID de entrada, mudanças, o nome e também o tipo. Salve este arquivo e depois para o navegador em nossos projetos. Vemos logo abaixo de nossos comentários e enviamos que não temos este nome e seção de e-mail mostrando. Isso ocorre porque esses campos não precisam ser exibidos quando estamos logados no momento. No momento, estamos logados como administrador tranquilo, então vamos clicar em sair. É assim que o formulário procura usuários não conectados. Então vamos adicionar o nome e e-mail também. O próximo estágio é adicionar o início aos campos obrigatórios. Vou adicionar isso aos comentários, oferta e e-mail. Primeiro de tudo, até a nossa área de texto para os comentários no rótulo, o que significa adicionar uma estrela, em seguida, a oferta, então logo após o seu nome. Em seguida, o e-mail na parte inferior, que é a sua lista de verificação está trabalhando com uma recarga, este é agora para a primeira parte dos comentários. No próximo vídeo, veremos como podemos realmente exibir os comentários na tela. 36. Exibindo comentários: A parte 2 desta seção de comentários será realmente exibir quaisquer comentários que foram deixados por baixo da postagem do blog. Isso novamente estará no arquivo Comentários/PHP. Vamos começar lá dentro. Começamos no topo primeiro verificando se eles não puderam postar é protegido por senha? Se nenhuma senha foi inserida pelo visitante atual, podemos sair retornando antes de carregar qualquer um dos comentários. Vamos fazer isso no topo, logo acima da nossa matriz. Vamos adicionar um PHP if instruções. Vamos verificar se o post é protegido por senha com uma função WordPress chamada post_password _ obrigatório. Se o post estiver protegido por senha, vamos simplesmente retornar sem carregar nenhum dos comentários. Com este cheque no lugar, podemos ir abaixo. Logo depois disso, vamos criar uma seção para nossos comentários, que é apenas HTML normal. Portanto, precisamos fechar o PHP logo acima, e então reiniciá-lo logo depois. Dentro daqui vamos verificar se algum comentário existe, então o PHP fará isso em uma instrução if. Podemos verificar se quaisquer comentários existem primeiro com uma função WordPress chamada have _comments, dois pontos no final, em seguida, fecha fora. Também precisamos criar algum espaço e, em seguida, adicionar uma seção endif no final. Se houver comentários, o código dentro do aqui será executado. Vou adicionar um cabeçalho de nível dois com algum preenchimento, então h2, uma classe de bootstrap, que será igual a py-3, feche nosso rumo. Ao invés de adicionar codificação em um título estático como um cabeçalho, vamos fazer essa dinâmica usando PHP, então vamos abrir e fechar o PHP dentro. Este cabeçalho vai ser dinâmico e mudar para o número de posts do blog. Por exemplo, ele pode dizer algo como comentários gratuitos em uma postagem do blog 1, e então o número aumentará para cada comentário. Se tivermos comentários queremos saber quantos, podemos acessar essa informação usando a função WordPress chamada get_comments_number. Então vamos armazenar isso dentro de uma variável, que fazemos com um prefixo de símbolo de dólar, e então eu vou chamar essa variável de number_of_comments, separados por sublinhados, e definir isso igual a get_comments_number. Agora podemos usar esta variável para alterar o texto que este cabeçalho irá exibir. Se tivermos apenas um comentário, queremos que o texto seja exibido como um comentário como um singular. Se houver vários comentários, no entanto, precisamos exibir a versão plural, como seis comentários com os s no final, isso pode ser alcançado usando um condicional if else declarações. Logo abaixo da nossa variável, vamos adicionar if seção, e vamos dizer number_of_comments, que é a variável que criamos acima, vai ser igual ao valor de um. Vamos executar este código dentro, ou vamos executar o código dentro desta próxima seção. Este bloco if e else será usado para adicionar um título mas usando a versão singular ou plural, que você mencionou antes. Estes textos podem ser exibidos usando printf, que irá produzir uma string formatada e eu quero adicionar isso a ambos os blocos. Vamos usar printf porque ele nos permite inserir variáveis em nossa string de texto, que vamos olhar em apenas um momento. Dentro desses colchetes printf, eu vou adicionar uma função WordPress como o primeiro parâmetro, que é para o formato, ou em outras palavras, o texto que você deseja usar. Mais tarde neste curso, veremos como podemos adicionar a capacidade de traduzir o texto em nosso campo, então alguns deles podem fazer um pouco mais de sentido mais tarde, mas por enquanto eu vou cercar a seção de instrução if com o _x e isso levará em três parâmetros. Vamos começar adicionando os dois primeiros parâmetros necessários, então vou explicar o que esses significam. O primeiro como uma string é o texto de um comentário e depois em diante. Depois disso, vamos adicionar algumas entidades HTML assim “ e, em seguida, o”, separados por uma vírgula. O segundo será o título do texto dos comentários, então vamos começar com o primeiro parâmetro, que é esta linha apenas aqui. Esta é a sequência de textos que serão exibidos em nosso tema. Será também uma string que podemos traduzir mais tarde no curso. Terminamos esta string com as aspas duplas à esquerda e também as aspas duplas à direita aqui. Essas entidades HTML que são a maneira mais segura de adicionar símbolos em nossos sites. Na verdade, é assim que ele será exibido nos sites, como um comenta em seguida as citações, linha dois, que é este aqui apenas. Esta é a informação de contexto para tradutores. Mais tarde no curso, adicionaremos um terceiro parâmetro opcional ao traduzir nosso tema. Entre essas citações duplas, também queremos exibir o título da postagem, então isso diria algo como um comentário em uma postagem de blog 4. Lembre-se antes que dissemos usando printf, ele nos permite a saída de uma string formatada. Bem, isso nos permite adicionar variáveis em nosso texto. Podemos adicionar uma variável adicionando um símbolo de porcentagem seguido por um valor, então apenas a letra s, o que significa que estamos esperando um valor de string. Entre as aspas, adicione um símbolo de porcentagem, e, em seguida, um s, e isso vai ser onde todos nós colocar nossa variável. Mas onde obtemos o valor para inserir? Obtemos isso adicionando um segundo parâmetro à nossa função printf, então logo após estes x adicionar uma vírgula, e então podemos adicionar uma função WordPress chamada get_the_title. Esta função irá pegar o título do post e adicioná-lo à string no lugar do nosso símbolo percentual e, em seguida s. Se eu pudesse apenas adicionar um ponto-e-vírgula logo após o printf para baixo para a seção else, esta seção também irá exibir semelhante ou ambos, mas isso também pode suportar texto que é uma forma singular ou plural. Para suportar isso, em vez de usar a função _x, usamos a função chamada _nx como o primeiro parâmetro. Novamente, vamos primeiro escrever tudo isso e então eu vou explicar logo depois. O primeiro vai ser uma string, então o%1$s comentar, e então podemos adicionar logo depois nossas citações esquerda e direita, então estes são os códigos de entidade HTML do &ldquo com um ponto-e-vírgula no final, e então a citação direita, que é o &rdquo e um ponto-e-vírgula. Entre esses dois, nós também precisamos adicionar nossas variáveis, então%2$s. Eu sei que isso parece um pouco estranho, mas apenas tenha paciência comigo por enquanto. Vou adicionar uma vírgula, em seguida, copiar e colar esta linha, e então tudo o que precisamos fazer é adicionar um s no final dos comentários. Começando pela primeira linha, vamos explicar o que está acontecendo aqui. Esta primeira linha ou este primeiro parâmetro de nossa função nx é a string singular de texto. A segunda linha é a versão plural do mesmo texto, ou seja, com o S no final dos comentários. Estas strings também têm as aspas duplas esquerda e direita do lado de fora daqui com nossas variáveis colocadas dentro. Depois disso, podemos adicionar um terceiro parâmetro, e este será o número a comparar para decidir se estamos usando a versão singular ou plural do nosso texto. Nós já temos uma variável de número de comentários, então podemos adicionar isso com símbolo dólar, número de comentários. Se esta variável é igual a um, então nós temos apenas um comentário, ele irá executar a versão singular com a palavra de comentários. Se for mais de um, não será a segunda linha que dirá a palavra de comentários no lugar. Se ambos os parâmetros, que também podemos adicionar a esta função nx, é a informação de contexto para tradutores, a menos que seja um título de sequência de comentários, e isso aparecerá no software de tradução que usaremos mais tarde. Você terá notado que temos de espaços reservados desta vez em nossas cordas. Como todos sabemos de antes, isso começa com o símbolo percentual, e então temos um valor de um e também dois. Estes valores são inseridos adicionando um segundo e terceiro parâmetro ou printf, então logo após a função nx, podemos adicionar uma vírgula. Estas variáveis são inseridas na ordem de modo que o primeiro que vamos adicionar aqui irá para o lugar titular número 1, que é o number_of_comments. Novamente, já temos isso armazenado na variável number_of_comments para permitir que este número seja localizado ou traduzido posteriormente. Vamos envolvê-lo em uma função chamada number_format _i18n. Vamos digitar isso, number_format_ i18n, abrir os colchetes e, em seguida, no final, podemos fechar o colchete para cercar nossa variável. Se você não viu i18n antes, esta é uma versão abreviada para internacionalização, então em vez de amarrar a palavra completa de 20 caracteres, às vezes você usa o prefixo abreviado, então é i, 18 caracteres, e, em seguida, n separados por uma vírgula. Podemos adicionar o segundo valor para a segunda variável, este vai ser o título da página. Podemos fazer isso através da função WordPress chamada get_the _title, feche isso fora. Agora, se fizermos isso salvar, e depois recarregar o navegador, então teremos uma chave de fechamento inesperada na linha 38, então só precisamos adicionar um ponto-e-vírgula no final do printf. Recarregar e agora isso remove quaisquer erros do nosso formulário de comentário. A próxima etapa é adicionar uma função WordPress para exibir nossos comentários. Eu vou fazer isso no formulário de comentários logo abaixo do título de nível dois. Vamos criar uma lista ordenada para exibir estes, em seguida, fechar a lista ordenada abaixo. Isso será gerado pelo WordPress, então precisamos adicionar isso como uma tag PHP. A função WordPress que vamos adicionar é chamada wp_list_comments. Lista comentários leva em uma matriz onde podemos passar em algumas configurações que queremos adicionar. O estilo padrão que podemos adicionar aqui é a lista não ordenada, mas eu quero mudar o seu para ser ol, separado por uma vírgula. Também podemos definir o tamanho do avatar, que você deseja exibir, com avatar_size. Isso é então igual a um valor de pixel, que eu vou definir como 70. WordPress, juntamente com muitos outros sites, vai pegar sua imagem de avatar de um site chamado gravatar.com. Então, se você enviou uma imagem para este site no passado, isso será exibido no WordPress. Agora, se salvarmos isso e, em seguida, ir para o site, eu vou para a seção de administração, o primeiro login, adicionar o nome de usuário e senha, e vamos marcar esta caixa para fazer login. Vá para os sites, a seção do blog, e escolha qualquer post do blog, ou seja, uma string aleatória de texto como um comentário e clique em “Enviar”. Bom, vamos tentar mais uma. Então, comente 2, aperte “Enviar”. Ótimo. Então agora todos os nossos comentários estão funcionando. Nos próximos vídeos, faremos mais algumas melhorias no nosso sistema de comentários. Então, vejo-te lá. 37. Javascript de resposta aos comentários: Neste momento, há uma pequena questão que pode não parecer um problema no momento, mas esta questão vai crescer à medida que recebemos muito mais comentários. No momento, se você der uma olhada em uma postagem de blog, e eu adicionei três comentários diferentes aqui, ele irá em frente e clicar em “Responder” para este primeiro comando. A caixa de resposta está na parte inferior de todos os comentários. Isso é bom com o número de comentários que temos, mas imagine se clicamos no primeiro comentário quando foram 50 comentários, então vamos levá-lo direto para baixo, resultando em uma má experiência do usuário. Isto é algo que o WordPress descobriu permitindo-nos carregar algum JavaScript, coloque a caixa de comentários logo abaixo dos comentários que estamos aplicando. Isso é tão simples quanto enfileirar um novo script, assim como fizemos anteriormente com nosso bootstrap. A única diferença desta vez é que vamos carregar isto dentro de uma declaração if. Nós não queremos que este script WordPress chamado comentário resposta para sempre ser carregado. Nós só queremos que ele seja carregado na única página de postagem se os comentários estiverem abertos, e também se os comentários aninhados estiverem habilitados também. Vamos passar para o nosso functions.php. Isso será adicionado logo após o nosso JavaScript Bootstrap para que saibamos [inaudível] função de scripts. Vamos fazer algum espaço, e então dentro daqui eu vou começar com uma instrução php if. Vamos digitar isso para começar, e então vamos falar sobre o que cada função faz. Primeiro de tudo, queremos verificar se is_singular, e eu vou adicionar isso em uma nova linha para que fique mais claro. Então, uma vez que eu tinha o comercial duplo, eu também vou verificar se os comentários estão abertos. Próxima linha, verifique também se a opção get de comentários de thread está habilitada. Se todas essas condições forem verdadeiras, então queremos carregar nosso script com script enqueue WP. O script que queremos carregar é o JavaScript chamado comentário resposta. Resposta de comentários é empacotada com o WordPress, então não precisamos adicionar isso ao nosso tema, então a primeira coisa que estamos fazendo é verificar se is_singular. IS_Singular é uma tag condicional WordPress, verifique se esta é a única página de postagem. Em seguida, queremos verificar se os comentários estão abertos, que é outra tag condicional. Verifique se os comentários estão ativados para este post. Isso é feito dentro do painel. Obter opção, vamos recuperar uma opção do banco de dados WordPress. As opções são basicamente pedaços de dados que ele usa para armazenar configurações. Aqui nós incluímos nos comentários do segmento, e este é um valor de opção para verificar se os comentários aninhados estão habilitados. Isso é importante, uma vez que este JavaScript que estamos carregando é usado para trazer a caixa de comentários sob as respostas aninhadas. A opção de habilitar e desabilitar comentários pode ser encontrada no painel. Vamos para lá agora, descer para as configurações e, em discussão, você encontrará todas as opções que temos relacionadas aos nossos comentários, como habilitar nossos comentários aninhados, que você vê aqui, ou certificar-se de que os usuários devem ser registrado e logado para comentar. Tudo o que temos que fazer agora é ter certeza de que este arquivo é salvo, passar para a nossa seção de blog em um comentário. Escolha qualquer postagem de blog com alguns comentários, vamos para o primeiro, clique em “Responder”, e agora esta caixa para responder está diretamente abaixo do comentário que clicamos, e isso agora deixa nossa caixa de resposta diretamente abaixo do comentário que estamos respondendo, resultando em uma experiência de usuário muito melhor. 38. Encerrando os comentários: Como autor do tema, também precisamos lidar com o que fazer quando comentários não são permitidos em um post. Se formos até o painel e depois descermos a uma postagem, clicamos em “Todos”, podemos selecionar qualquer postagem que tenha comentários, podemos ver o número de comentários dentro da bolha de fala aqui, então vamos clicar em “Publicação do blog seis” e depois “Editar”. No menu na barra lateral, aqui vemos uma seção de discussão, se clicarmos nisso, isso tem a opção de permitir ou desativar comentários. Se desmarcarmos “Permitir comentários”, clicar em “Atualizar” e, em seguida, ir para “Exibir publicação”, veremos que os comentários existentes ainda estão sendo exibidos. Vou mostrar-lhe como excluí-los no próximo vídeo, mas por enquanto, um usuário pode estar confuso, já que não há nada dizendo a eles que os comentários estão fechados. Agora podemos colocar algum texto neste caso no arquivo comments.php, então vamos lá agora no nosso editor de texto. Então, se localizarmos esta tag de seção de fechamento, que é para os comentários, queremos adicionar um php if-statements, então abra as tags php. Você pode adicionar um if-declarações e, em seguida, fechar isso fora logo depois. Queremos verificar se os comentários não estão abertos. Podemos fazer isso fazendo o inverso com um ponto de exclamação, isso fará o oposto de comentários abertos, então isso só será verdade se os comentários estiverem fechados, adicione vírgula logo depois, que executará o código na guia Próxima linha. Se a condição for verdadeira, o código será emitido é um parágrafo simples ou texto, podemos adicionar um p-elementos aqui dentro, que é apenas HTML padrão, aninhado dentro, podemos abrir o php, fechar isso fora e então queremos executar uma função chamada escape html_e. Esta é uma função que irá exibir o texto traduzido que está sendo escapado para uso seguro na saída HTML, e o texto que queremos adicionar é simplesmente “Os comentários estão fechados para este post”, adicione um ponto-e-vírgula logo depois. Agora, vamos para o navegador e, em seguida, recarregar, nós fechamos um erro de sintaxe e nós só queremos fechar nossa seção se. Então php e nossa seção se, em seguida, feche isso fora, aperte “Salvar” e, em seguida, atualizar, e lá vamos nós. Ele diz [inaudível] texto na parte inferior de “Os comentários estão fechados para esta postagem”, e podemos confirmar que não vemos esse texto se você acessar uma postagem de blog diferente. Vamos voltar para cinco, não vemos o texto, quatro, número três, e temos todos os comentários abertos, então não vemos o texto na parte inferior. Então, esta é apenas uma pequena mudança, mas este é um toque agradável que pode ajudar a experiência do usuário e impedi-los ficar confuso porque eles não vêem um formulário de comentário mostrado no post. 39. Paginação de comentários: Assim como vimos anteriormente ao adicionar paginação para nossa lista de postagens de blog, também podemos adicionar esse recurso para comentários também. Para isso, vou adicionar cinco comentários em qualquer post de blog. Vamos fazer os testes. Teste um, “Submeter”, Teste dois, “Submeter”. Teste três. Deixando estes cinco comentários sobre este post particular. Agora, se passarmos para o “Painel”, em seguida, para “Configurações” e depois “Discussão”, apenas para fins de demonstração, vou reduzir o número de comentários por página para dois. Se você procurar a opção de dividir comentários em páginas, podemos mudar isso para dois, salvar nossas alterações. Então, se voltarmos para nossos sites, meu blog da Amazon postar grátis. Vamos até lá, clique nisso. Ainda vemos que há um único comentário mostrando neste blog. Nós definimos este ser um máximo de dois, mas esta é a última página de comentários, então vemos o comentário número 5 por conta própria. Comentário um, dois está em uma página, três e quatro está em uma página, mesmo este número 5 por conta própria como as páginas. Podemos pular entre estes. Isso é tão simples como adicionar uma função WordPress chamada navegação comentários. Podemos adicionar isso mais uma vez em nossos comentários, dot arquivo php. Vamos adicionar isso logo acima da nossa declaração if que adicionamos no último vídeo. Verifique se os comentários estão abertos. Nós já temos as tags PHP então eu vou adicionar isso aninhado dentro como a função WordPress chamada navegação comentários, ponto-e-vírgula no final, aperte “Salvar” e depois para o navegador e recarregar. Agora temos um título de navegação de comentários. Podemos clicar nos comentários mais antigos, para voltar, e agora quando temos uma página, para trás e para frente, também temos o link comentários mais antigos e mais recentes. Este texto padrão de navegação de comentários é adicionado para leitores de tela. Este texto, juntamente com o texto usado para comentários mais antigos e mais recentes, também pode ser alterado adicionando parâmetros na função de navegação de comentários. Se você gostaria de fazer isso, confira a referência da função WordPress na documentação, e você verá alguns exemplos de como você pode fazer isso. Vou deixar isso como o texto padrão por enquanto, pois é bastante claro. Este é agora para os nossos comentários, então agora vê-lo na próxima seção. 40. Arquivos: No início do curso, adicionamos uma barra lateral com a seção de arquivo. Essas datas que são exibidas são dinâmicas, significa que o WordPress adiciona automaticamente nessas datas, quando uma postagem de blog está disponível em um determinado mês e ano. Se formos em frente e clicar em uma data específica, vemos que o post disponível é para o mês dado. Podemos ver este URL aberto. Vemos o ano seguido pelo mês em que a postagem do blog foi criada. Tudo isso funciona muito bem no momento, então não há muito trabalho a fazer. A única coisa que eu vou mudar é tornar esta página um modelo de arquivo personalizado, que também irá mostrar o mês que estamos vendo em vez deste índice padrão do PHP. Um arquivo chamado archive.php será reconhecido pelo WordPress, e vamos usá-lo para esta visualização de arquivos. Como todos os outros templates, vamos adicionar um novo arquivo na raiz do nosso projeto. Este é o arquivo com a extensão the.php. Acabamos de ver com toda a funcionalidade desta vista é muito semelhante ao nosso blog normal. Vou copiar e colar o conteúdo do index.php. Vamos selecionar tudo, copiar isso, colar isso nos modelos de arquivos, e então podemos alterar os comentários no topo. Em vez de este ser o arquivo de modelo principal, vamos mudar isso para o modelo, para exibir páginas de arquivo. Tudo o que precisamos fazer é adicionar uma função WordPress chamada O título do arquivo, e eu vou adicionar o meu dentro da seção do bloco, logo abaixo da seção col, md, oito aqui. Vamos fazer isto. Imediatamente abaixo disso, esta é uma função php, com o nome do título do arquivo, e os colchetes, e então o ponto-e-vírgula no final. Aqui dentro vamos adicionar dois parâmetros separados por uma vírgula. Isso vai ser cercado em um nível 3. Ele pode adicionar ao HTML de h3, a tag de abertura. Então, depois, podemos fechar nosso h3. Eu também vou adicionar uma linha horizontal. Vamos adicionar um hr, pouco antes da tag de fechamento, e isso irá adicionar uma linha logo abaixo do título. Podemos ir com o navegador, e verificar isso. Vá para os arquivos, clique em qualquer data. Esta função irá agora mostrar o mês das postagens do blog que estamos vendo no momento. O usuário sabe exatamente onde eles estão no site. Esta é apenas uma pequena alteração, mas realmente útil para a experiência do usuário, eles saibam exatamente qual página estão visualizando. 41. Página “Entre em contato conosco”: Agora passamos para a página Fale Conosco, que está localizada na navegação de rodapé logo abaixo na parte inferior aqui. Para começar a criar isso, primeiro precisamos criar uma nova página dentro do Dashboard. Onde está o painel? Em seguida, vá para Pages, Adicionar novo. Nós não precisamos adicionar nenhum conteúdo, apenas um título de página de Fale Conosco, então podemos publicá-lo. Agora um arquivo correspondente dentro do nosso tema. Abra a barra lateral, clique em adicionar uma nova página, e ela será chamada page.contactsus.php. A nomeação para este arquivo é importante aqui também, há um modelo de uso personalizado para uma página específica, e WordPress reconhece isso por causa deste prefixo traço página no nome do arquivo, seguido pelo slug de contato conosco. O slug é o termo WordPress para o URL após o seu domínio. Por exemplo, se você teve seu contato dominio.com ou barra, WordPress considerará o contato como sendo o slug. Você pode descobrir o nome do slug para qualquer página do site visitando-o no navegador. Vamos aos nossos sites. Vamos clicar no blog. Este slug, esta página é o blog, off vamos voltar para a nossa nova página Fale Conosco que acabamos de criar, clique no permalink, e podemos ver o slug URL, para esta nova página é Fale Conosco. Esta nova página Fale Conosco. Se você vai para Visitar Site e, em seguida, role para baixo até o menu de rodapé, ainda não criamos este menu de rodapé no WordPress ainda. Esses links que selecionamos, ainda estão apontando para nossos arquivos HTML que foram criados no bootstrap. Vamos criar este menu rodapé meu em um vídeo posterior, por isso, por enquanto, se queremos visitar esta nova página Fale Conosco, tudo que você precisa fazer é digitar o slug de Fale Conosco que já vimos antes, ou clique na página de exibição a partir da tela de edição. Nós não temos nenhum conteúdo ainda, então vamos para o nosso template e vamos começar a trabalhar começando com nossos comentários, então isso é php, feche isso, e nós adicionamos nosso comando da maneira usual usando estrelas e barras, o nome do modelo. Vai ser “Fale Conosco”. Nós vamos usar o mesmo cabeçalho que o resto do site, para que possamos usar a função de cabeçalho get sublinhado. Tudo está dentro. Então, depois disso, podemos adicionar nosso rodapé para baixo na parte inferior, então php obter o rodapé, em seguida, feche isso fora. Ao criar um modelo de cliente como este, ou seja, não um nome de modelo reconhecido, como o cabeçalho, o rodapé, e o único ponto php, devemos também adicionar um nome de modelo, assim como fizemos no topo aqui. Quando adicionamos um nome de modelo, ele fica disponível na seção de edição da página, possamos atribuir esse modelo de página personalizado a qualquer página que desejar. Se você voltar e, em seguida, vá para nossa página Fale Conosco. Na página Fale Conosco, descemos para os atributos da página. Isso também está disponível em qualquer página. Podemos ver que podemos selecionar quaisquer modelos que está disponível em nosso tema. No entanto, não é necessário selecionar Fale Conosco nesta instância, porque o nome do modelo de página Fale Conosco corresponderá ao slug desta página. Podemos provar isso adicionando algum texto aleatório no modelo, então no momento ainda temos o padrão selecionado. Vamos entrar aqui e adicionar algu