Bootstrap para o WordPress: crie temas responsivos personalizados!

1. Introdução: Bem-vindo a este curso sobre a construção de um tema WordPress responsivo personalizado usando a estrutura livre Bootstrap. Meu nome é Chris, e eu vou guiá-lo através do processo passo a passo. Vamos começar construindo uma ótima aparência e modelo de tema usando Bootstrap, um dos frameworks front-end mais populares do mundo. Uma vez que este é construído, eu vou guiá-lo através do processo de conversão deste para um totalmente funcional, grande olhar tema WordPress personalizado. Neste curso, você aprenderá coisas como criar sites usando o Bootstrap, adicionando menus de navegação personalizados, adicionando menus de navegação personalizados, o loop WordPress, como os modelos WordPress funcionam. Você aprenderá sobre widgets, campos personalizados, imagens de cabeçalho, como adicionar pontos de tradução de idiomas ao seu tema e muito mais. Então este seria o ótimo site que vamos construir ao longo deste curso. Esta é a página inicial. É um tema WordPress baseado no Spa. Vou guiá-lo em cada passo do processo. Então, não vamos apenas construir a página inicial. Nós vamos realmente estar construindo o site completo, incluindo várias páginas de blog, Contato e páginas Sobre Nós. À medida que chegarmos à seção WordPress, mais tarde no curso, áreas como a seção Últimas Ofertas, estaremos adicionando campos personalizados para, para garantir que o site é totalmente personalizável. Deslocando mais para baixo, temos uma seção Shop Online. Em seguida, a seção Foto na parte inferior com vários links, a página Sobre Nós, a página Fale Conosco. Se você rolar de volta para o topo da página, também teremos um bloco totalmente funcional. Temos uma barra lateral de trabalho, que inclui uma caixa de pesquisa, e também maneiras de filtrar os posts pelas tags, as categorias, ou os meses do ano, e, claro, isso será totalmente personalizável pelo site administrador. Também garantiremos que os usuários do seu site possam deixar comentários nas postagens. Então, se você entrar nas postagens individuais, agora você terá a versão completa. Links para postagens anexadas anteriores e a seção Comentários abaixo. Além disso, teremos uma seção Últimas Notícias, que é basicamente baseada na seção do blog. Mas aplicamos filtros WordPress para filtrar as postagens do blog por postagens que começam com a categoria de notícias, e vamos mostrar-lhe como fazer isso. Não haverá conteúdo desnecessário apenas para preencher o curso, apenas direto ao ponto de vídeos. Cada um ensinando a você uma nova habilidade para usar para seus próprios projetos ou para clientes pagantes, e você também vai pegar algum PHP ao longo do caminho. O que você está esperando? Junte-se a mim neste curso e estou ansioso para tê-lo a bordo. 2. Configuração do Bootstrap: Bem-vindo à seção Bootstrap deste curso. Nesta seção, estaremos construindo nosso site usando a estrutura Bootstrap que mais tarde no curso, usaremos para converter para um tema WordPress personalizado totalmente responsivo. Para começar, vá para getbootstrap.com e pressione o botão Download Bootstrap. Em seguida, você será levado para a seção de download. Existem três versões diferentes do Bootstrap que você pode baixar. Eu só vou para a versão padrão à esquerda. Pressione o botão Download. Uma vez baixado, se formos para os downloads e depois descompactar isso. Porque o nosso tema é chamado de spa tranquilo. Este é o modelo Bootstrap. Vou chamar isso de tranqüilidade. Então eu quero salvar isso na área de trabalho. Lá vamos nós. Você já deve ter baixado a pasta de imagens, que está incluída neste vídeo. Se você não tiver, vá em frente e faça isso agora, e, em seguida, solte isso na pasta Bootstrap. Se abrirmos a pasta Bootstrap e dermos uma olhada no que está incluído. Primeiro de tudo, temos uma pasta CSS que inclui todo o CSS Bootstrap, tanto a versão padrão quanto os arquivos minificados. Há também a pasta de fontes, que inclui todos os ícones de glifo. Como nossa própria pasta de imagens, que acabamos de colocar, há também uma pasta JavaScript que inclui os arquivos JavaScript Bootstrap. Para começar, se abrirmos o editor de texto e então eu vou arrastar em nossa pasta do projeto. Lá vamos nós. Então a pasta Bootstrap que acabamos baixar inclui praticamente tudo o que precisamos para começar. A única coisa que eu preciso adicionar agora é uma página de índice, então eu vou pressionar Command e N, ou Control+N, para criar uma nova página. Eu vou salvar isso como index.html, e colocá-lo dentro da pasta tranquil-wp. Uma vez que temos nossa página de índice, precisamos agora voltar para getbootstrap.com. Ainda dentro da seção Introdução, se nós apenas rolar um pouco mais para baixo, até encontrar o modelo básico. Vamos usar isso como um modelo inicial. Ele inclui toda a estrutura HTML básica e também os links para o Bootstrap, CSS e JavaScript. Basta apertar o botão de cópia, em seguida, de volta para a página de índice, nós podemos colar isso dentro Por enquanto, eu só vou mudar o título da página web apenas para um spa tranquilo. Em seguida, vamos apertar o botão de visualização ao vivo e, em seguida, ver como ele está olhando no navegador. Lá vamos nós. É um modelo bastante básico. Acabamos de receber o Hello, mundo! título. Mas diz que era muito tempo de criarmos uma página de índice. Nós mencionamos que o Bootstrap vem com seus próprios arquivos CSS, o que é ótimo para um ponto de partida. Mas também queremos tornar nosso modelo personalizado, então também vamos adicionar um novo arquivo CSS. Vou criar uma nova página e salvar isso como custom.css e vou colocar isso na pasta CSS. Agora vamos vincular isso na página de índice. Como você pode ver, já existe, o link para a versão minificada do Bootstrap, então se nós apenas copiar este e o comentário, nós podemos colar isso logo abaixo e nós vamos chamá-lo de CSS personalizado, e também alterar o nome do arquivo para CSS personalizado. Há apenas uma ou duas outras coisas que precisamos vincular à nossa página web para começar. A próxima é a fonte personalizada. Se nos dirigirmos ao Google, e procurarmos fontes. Isso nos levará a google.com/fonts. Assim que estivermos lá, podemos procurar no canto superior esquerdo. A fonte que vou usar nesta página é chamada Merriweather. Você pode escolher uma fonte diferente se você tiver alguma preferência, mas eu vou ficar com isso por enquanto e eu vou selecionar o Merriweather padrão. Então, o que precisamos fazer, precisamos olhar para as caixas no lado direito e clicar na segunda caixa em, que é a guia de uso rápido. O Google nos fornece diferentes pesos de fonte que podemos usar, e cada vez que selecionamos um peso de fonte para baixar, ele nos mostra o impacto nos tempos de carregamento da página. Então as fontes que vamos usar neste projeto é o peso 300, o 400, que é o tamanho normal, e também o 700 para o texto em negrito. É muito fácil de incluir no projeto. Podemos simplesmente copiar o link para a seção de cabeça e colá-lo abaixo do nosso CSS. Eu também vou colocar um comentário lá, apenas para as fontes personalizadas. Vamos salvar isso e voltar para fontes do Google, e então a última coisa que precisamos fazer é integrar nossas fontes no CSS. Então copie a família de fontes e, em seguida, vá para o nosso arquivo CSS personalizado. A família de fontes irá para a seção do corpo, e eu vou começar adicionando um comentário apenas para a seção Global. Esta seção irá manter todos os estilos que vamos usar em todo o site, e vamos começar com a seção do corpo. Cole na família da fonte e vamos adicionar o peso da fonte, vamos adicionar o peso da fonte padrão de 300, e também adicionar o tamanho da fonte para ser 16 pixels como padrão. É assim que adicionamos as fontes ao site. Então a última coisa que precisamos fazer para a configuração é voltar para o Google e procurar Font Awesome, e depois ir para a página do GitHub para Font Awesome. Este vai ser o conceito I que vamos usar para o nosso site. Se você quiser conferir os ícones que estão disponíveis, basta selecionar a guia ícones no topo e você pode dar uma olhada em todos os diferentes que estão disponíveis. Para baixar isso, precisamos ir para, Começar. Há algumas maneiras fáceis de incluí-los em nosso projeto. Nós vamos para a rota CDN, que simplesmente envolve copiar o link e, em seguida, colá-lo em nossa seção principal. Isso vincula nosso site aos ícones Font Awesome, que estão hospedados neste endereço. Por último, eu vou copiar o comentário, colar isso, e nomear isso, Font Awesome, e então salvar isso. Lá vamos nós. Então essa é a nossa seção Bootstrap, tudo configurado. Se você se juntar a mim no próximo vídeo, vamos continuar com o projeto criando a seção principal. 3. Seção de cabeçalho — HTML: Bem-vinda de volta. Agora, nós temos nosso projeto Bootstrap tudo configurado. Vamos dar uma olhada no projeto final e dar uma olhada no que vamos construir nesta seção. Então, em seguida, vamos estar adicionando o HTML para a seção de cabeçalho. A seção de cabeçalho contém uma barra de navegação na parte superior, que terá o logotipo no canto superior esquerdo. Também no lado direito, teremos os links do menu. Vamos adicionar uma grande imagem de fundo e também o texto em destaque no centro, que será alinhado horizontalmente e verticalmente. O texto e a imagem serão estáticos por enquanto. Mas uma vez que entrar na seção WordPress mais tarde no curso, o usuário será capaz de mudar o fundo e também o texto. Então, para começar com a seção de cabeçalho, vamos para o nosso editor de texto e vamos nos livrar da barra lateral por enquanto. Então, se rolarmos para baixo, podemos excluir o cabeçalho Olá mundo h1 e, em seguida, vamos começar com um comentário para a seção de cabeçalho. Ok, então a seção de cabeçalho estará entre as tags de cabeçalho. Vamos começar com a barra de navegação na parte superior da página. Então isso será em tags nav e ele vai ter algumas classes Bootstrap. O primeiro será navbar e, em seguida, navbar-padrão. Então, vamos usar muito essas classes bootstrap à medida que passamos pelo projeto. Se você está curioso para saber exatamente o que cada um deles está fazendo, podemos passar para o CSS Bootstrap na pasta CSS. Se vamos procurar o bootstrap.css, por exemplo, se procurarmos navbar-padrão. Então, indo para Bootstrap CSS, e se você usar a função de busca do editor de texto e, em seguida, digite a classe que você deseja procurar. Então eu vou procurar por um navbar-padrão. Isto irá então levá-lo para a seção do CSS que se aplica. Assim, podemos ver que adicionando um navbar-padrão, ele inclui várias bordas e cores de fundo. Então podemos usar isso se você quiser saber exatamente o que está acontecendo no CSS nos bastidores. Mas também vale a pena ter em mente que qualquer uma dessas classes bootstrap que incluímos, também podemos adicionar ou substituir em nosso próprio arquivo CSS personalizado. Então, em seguida, vamos adicionar uma div com a classe de contêiner fluido. Novamente, contêiner fluido é uma classe bootstrap. Você pode usar fluido contêiner, que fornece uma div de largura total fluido ou você pode usar a classe de contêiner por si só, que inclui uma div com uma largura fixa. Então, dentro do fluido do contêiner, vamos criar uma nova div com uma classe de navbar-header. Dentro desta div, esta será a seção que inclui as informações para leitores de tela. Além disso, damos uma olhada no projeto acabado. Você pode ver se reduzimos o navegador, é um site totalmente responsivo. Assim que chegarmos abaixo de um determinado tamanho, o menu de navegação se transforma em um menu suspenso. Assim, o cabeçalho também vai conter as informações para o botão suspenso. Então vamos começar com esse botão agora. O botão vai ter um tipo de botão. Vamos adicionar algumas aulas Bootstrap. O primeiro é navbar-toggle, e depois colapsou. Ele vai ser recolhido por padrão, então podemos adicionar o data-toggle para ser igual ao colapso e o data-target é igual a.navbar-collapse. Então, o que o data-target está fazendo, isso está ligado no botão a uma div com uma classe todos navbar-colapso. Vamos criar isso depois do botão. Aninhado dentro do botão, vamos adicionar as três barras de ícones, que estão no botão suspenso. Então, o primeiro, estes serão todos entre tags span. A primeira tag span será apenas uma classe para leitores de tela. Isso terá uma classe de sr-only e o texto para o leitor de tela será alternar navegação. Em seguida, vamos adicionar outro span com uma classe de barra de ícones. Então esta é a primeira das três barras de ícones. Então vai ser exatamente o mesmo para mais dois. Então podemos apenas Copiar e Colar ou Duplicar isso e apenas mudar a ortografia lá. Lá vamos nós. Ok, então vamos verificar isso na pré-visualização. Lá vamos nós. Então, na tela menor, temos o botão suspenso aparecendo lá. Isso deve desaparecer assim que chegarmos a um certo tamanho. Lá vamos nós. Em seguida, precisamos adicionar o logotipo ao canto superior esquerdo e também aos três links de navegação. Então, para começar, o logotipo vai ir logo abaixo do botão, mas ainda dentro da div cabeçalho da barra de navegação, e vai ser um link. Então vamos colocar o href de tags e isso vai ligar de volta para a página de índice, que é index.html. A classe bootstrap é navbar-brand. Como nosso logotipo é simplesmente texto, podemos digitar isso lá. Tão Tranquil Spa. Esse é o fim da seção de cabeçalho da barra de navegação. Então eu só vou adicionar alguns comentários. Então vamos chamar isso de navbar-cabeçote e vamos acabar com isso lá. Então, logo abaixo da div navbar-header, no dia seguinte teremos os três links de casa, blog e últimas notícias. Assim, a div recipiente terá a classe de colapso. Em seguida, adicionaremos a classe navbar-collapse, que usamos para o destino de dados. Então, dentro desta seção de colapso, vamos adicionar nossa lista não ordenada e adicionar nossas classes de bootstrap de nav navbar-nav, e também navbar-direita, que empurra os links de navegação para o lado direito da div, então itens de lista livre, que também são links. Então o href, para o primeiro link é para casa, então isso irá vincular ao index.html, e o texto estava em casa. Precisamos de mais dois itens da lista. O segundo é para o blog.html e altere o nome. O terceiro link é para a nova seção mais recente. Agora eu vou deixar o link vazio para este, estaremos criando nosso modelo para a seção de blog usando bootstrap. Mas quando se trata da última seção de notícias, isso vai ser gerado dinamicamente no WordPress. Basicamente vamos usar a página do blog, mas vamos apenas usar um filtro, apenas para filtrar as postagens do blog para ser a categoria de notícias mais recentes. Então vamos adicionar alguns comentários. Então vamos primeiro adicionar um comentário à div de fechamento de navbar-colapso, e então o último é para o fluido contêiner. Posso fechar isso lá em cima. Então vamos verificar isso no navegador e ver como isso está parecendo. Ótima. Então temos o logotipo aparecendo. Temos os três elos do lado direito. Encolhendo o navegador para baixo, que cai para um botão suspenso, que se expande para mostrar os três links. By the way, como este botão drop-down está funcionando, isso também mostra que nosso JavaScript Bootstrap, que está incluído na pasta js, está tudo vinculado corretamente e está tudo funcionando. Na parte inferior da página, você pode ver que os links já estão incluídos no modelo bootstrap, tanto para jQuery quanto para o JavaScript Bootstrap. Então sabemos que tudo está funcionando corretamente. Agora, temos nossa barra de navegação completa. Em seguida, vamos começar na imagem de fundo e também no texto. Vamos chamar isso de seção de recursos. Então vamos colocar isso logo abaixo da navegação. Vamos Copiar esse cabeçalho e, em seguida, Colar isso logo abaixo do fechamento e nav tag, mas ainda dentro do cabeçalho. Vou chamar isso de seção de recursos. Então, porque a seção de feição tem uma grande imagem de fundo que queremos esticar para toda a largura da página, vamos fazer uso do bootstrap container-fluid novamente. Em seguida, dentro do fluido recipiente, precisamos adicionar outra classe bootstrap de linha e também nossa própria classe personalizada, que é recurso. Então podemos vincular a isso no CSS no próximo vídeo. Em seguida, adicione o caminho à imagem. Então, molho de imagem. Temos a pasta Imagens dentro do projeto e, em seguida, a imagem de fundo grande é chamado lakebg.jpeg e adicionar algum texto alt lá. Só vou adicionar fundos do lago. Então vamos verificar se está funcionando bem. Volto para o nosso projeto. Então lá vamos nós, há uma imagem grande fixada no fundo. Então vamos adicionar o texto que sobrepõe a imagem. O texto estará indo em sua própria div, e vamos adicionar uma classe personalizada de texto de recurso. Em seguida, dentro deste recipiente, vamos adicionar nosso texto nas tags p. Assim, o texto foi totalmente responsivo SPA TEMA PREMIUM PARA WORDPRES Então eu vou adicionar algumas tags de quebra após a palavra responsiva e também após o tema da palavra, apenas para dividir isso em linhas diferentes. Então, se voltarmos para o navegador e ver como isso está olhando, não teremos o texto aparecendo sobre a imagem ainda porque precisamos adicionar algum CSS para que isso funcione. Mas o texto está aparecendo logo abaixo, então não precisamos nos preocupar com isso ainda. Resolveremos isso no próximo vídeo. Então, vamos apenas terminar esta seção, adicionando alguns comentários finais. Primeiro de tudo para o recipiente de fluido e, em seguida, para o div com a classe de linha, e, em seguida, o texto do recurso. Então lá vamos nós. Então esse é o fim do HTML para a seção de cabeçalho. Se você se juntar a mim no próximo vídeo, vamos continuar com a seção de cabeçalho adicionando o CSS. Eu também vou dar uma olhada nas linhas bootstrap e sistema de grade. 4. Seção de cabeçalho — CSS: Bem-vinda de volta. No último vídeo, criamos o HTML para a seção de cabeçalho. Incluímos a barra de navegação superior com os links do menu, a imagem de fundo principal e também o texto do recurso. Neste vídeo, vamos fazer nosso site parecer mais com o projeto finalizado adicionando o CSS. Vamos mudar a cor do link e o plano de fundo para a navegação. Também vamos estilizar o texto e garantir que ele esteja alinhado horizontal e verticalmente à imagem de fundo. Nós também vamos dar uma olhada no sistema de grade Bootstrap, e eu vou mostrar-lhe como adicionar uma coluna ao nosso site para torná-lo responsivo. Vamos começar no nosso Editor de Texto. Precisamos puxar a barra lateral e entrar em nosso CSS personalizado. Basta explodir o corpo, ainda dentro da seção global, a primeira coisa que eu preciso adicionar é uma largura máxima para as imagens. Vamos ajustá-los para 100%, que impede que as imagens se estendam muito. Vamos criar um comentário para a seção de navbar. Vamos começar com a seção de navbar. A navegação principal tem a classe de navbar. Esta é a parte que vamos estilizar primeiro, então ponto e depois navbar. Precisamos aumentar a cor de fundo roxo. O fundo vai ter um número de 97689c. Vamos ver se está funcionando bem. A cor de fundo mudou, mas precisamos nos livrar da margem, que está na parte inferior, empurrando a imagem de fundo para baixo. Simplesmente fazemos isso alterando o fundo da margem para ser zero. A próxima coisa que queremos fazer é remover a borda padrão. É muito difícil ver a borda padrão ao redor da barra de navegação. Mas podemos remover isso apenas definindo a borda como zero. Então agora precisamos mudar o texto para o logotipo na navegação. Bootstrap tem muitas classes e um monte de CSS, que está incluído como padrão. Por vezes, pode ser difícil encontrar exactamente qual é a classe que temos de alterar. Uma das maneiras mais fáceis de fazer isso é entrar nas ferramentas de desenvolvedor do navegador. No Chrome, você precisa clicar com o botão direito do mouse e selecionar Inspecionar elemento. Em seguida, se você selecionar a lupa e, em seguida, basta passar o mouse sobre o elemento que precisamos alterar, e clique em. Então devemos obter uma lista das classes que está afetando este elemento particular. Podemos ver que o primeiro elemento é a cor para a marca navbar padrão navbar, e isso está na versão minified Bootstrap. Podemos mudar essa cor. Só vou copiar a aula que afeta essa cor. Em seguida, de volta ao nosso CSS personalizado, vamos colar isso e mudar a cor para ser branco. Isso muda a cor do logotipo. Precisamos também fazer o mesmo para os links de navegação, que é um blog em casa sobre as últimas notícias. Novamente, faça o mesmo, selecione a lupa e escolha um dos links. Novamente, podemos substituir a cor cinza padrão padrão copiando a classe Bootstrap. Como também queremos que isso seja branco, podemos adicionar isso na mesma seção. Isso muda para branco. Em seguida, na visão móvel menor, também queremos que as barras de ícones livres sejam brancas também. Mais uma vez, selecione a lupa. Se você pode apenas selecionar uma das barras de ícones, e certifique-se de que podemos encontrar a que controla a cor de fundo. Copie as aulas. Então vamos colocá-los em nosso CSS. Vamos mudar a cor de fundo padrão, nós mudamos para branco. Refresque. Ótima. Lá vamos nós. As barras de ícones estão todas brancas agora. Esse é todo o estilo que precisamos adicionar à barra de navegação superior. Agora podemos descer para a área em destaque, e podemos começar a trabalhar na posição na imagem no texto. Vamos criar um novo comentário para a seção de recursos. Podemos adicionar o texto sobre a imagem. Precisamos usar algum posicionamento relativo e absoluto. Temos de tornar o contentor relativo. Concluir o texto dentro dele. O contêiner para a seção de recursos tinha uma classe de recurso, que é uma classe personalizada que nós mesmos adicionamos. Vamos começar adicionando isso, e definindo a posição para ser relativa. Como queremos que a imagem de fundo se estenda, seja da mesma largura que o navegador, precisamos substituir a largura máxima de 100 por cento adicionando a classe de imagem de feição. Em vez de largura máxima, vamos apenas definir a largura, desta vez de 100 por cento. Isso significa que a imagem pode esticar um pouco maior ou um pouco menor do que o tamanho original da imagem. Agora temos a posição do contêiner relativa. Precisamos agora de alterar o texto para ser absoluto. Adicionamos outra classe personalizada, cercado o texto, que era uma classe de texto de feição. Em seguida, vamos começar com isso. A primeira posição será definida como absoluta, porque estamos usando posicionamento absoluto. Vamos definir a posição superior e inferior para ser igual. Ambos vão ser zero. Agora, como isso é posicionado absoluto, o texto agora aparece sobre a imagem. Podemos começar a trabalhar para obter alinhado horizontalmente e verticalmente. Vamos começar alinhando verticalmente o texto agora. Primeiro de tudo, eu vou apenas digitar isso, e então eu vou explicar o que isso está fazendo depois. A classe de texto do recurso e, em seguida, antes. Defina o conteúdo para estar vazio. O tipo de exibição a ser inline-block. A altura para ocupar 100 por cento do recipiente. Por último, alinhe verticalmente para ser meio. Voltaremos a isso em um momento. Vamos, em primeiro lugar, adicionar os estilos para o texto. A classe de feição e, em seguida, o p, que envolve o texto. Isso também terá o tipo de exibição de bloco inline-, e tudo ficará claro em breve. Também alinhado verticalmente para estar no meio. O alinhamento de texto será centralizado na div. A largura para ser 100 por cento do recipiente. Se voltarmos para o navegador, e se dermos uma olhada no projeto finalizado, há uma cor de fundo. É bastante fraco, mas envolve o texto, que tem bordas arredondadas, que tem bordas arredondadas, e também é semitransparente. Vamos acrescentar isso agora. Para começar, podemos adicionar a cor de fundo, que tem um valor RGBA. Primeiro de tudo, precisamos adicionar os valores vermelho, verde e azul. Para criar a cor cinza, o primeiro valor é 74, 82, 95 e, em seguida, o último valor é o alfa ou a opacidade. Eu quero que seja 0,2, que é o mesmo que 20 por cento de opacidade. O fundo tem cantos arredondados, que você obtém adicionando um raio de borda de 10 pixels. A cor do texto é branca. Então, há o fundo para o texto no lugar. Então, basicamente, o que estamos fazendo aqui é criar algum texto e estamos adicionando alguns estilos a ele, e então estamos adicionando um elemento falso pouco antes do texto para que possamos usá-lo como uma referência de altura completa para alinhar o texto na div. Antes do texto, estamos criando uma div vazia, que não tem conteúdo, que são tanto a div falsa quanto o texto para ser bloco in-line. Então eles estarão lado a lado. Como os elementos falsos tem uma altura de 100 por cento, isso vai ocupar a altura total da div, e então porque esta é a altura total da div, podemos então definir o alinhamento vertical para ser meio e este fará com que o texto seja alinhado no meio da div. Para que esse truque funcione, só precisamos fazer mais uma coisa porque, por padrão, bloco in-line tem uma lacuna entre os elementos. Precisamos remover isso. Então precisamos adicionar uma propriedade que é largura zero. Se mudarmos o tamanho da fonte para ser zero, isso irá remover a lacuna entre os elementos falsos e o texto. Como definimos o tamanho da fonte para ser zero, então precisamos adicionar o tamanho da fonte nas tags p. Então um tem que ser 48 pixels. Então ele salvou isso e verificar isso no navegador. Isso parece bom. Isso agora está alinhado verticalmente à imagem de fundo, e também podemos ver a cor de fundo semitransparente. Então vamos apenas adicionar um pouco sobre ele, apenas três por cento, e espaço para fora a altura da linha para ser 80 pixels. Vamos economizar e dar uma olhada nisso. Ótima. Isso parece muito melhor agora. A próxima coisa que precisamos fazer é alinhá-lo horizontalmente na div. Vamos fazer isso adicionando algumas colunas Bootstrap. Se voltarmos para obter bootstrap.com e, em seguida, se formos na seção CSS e, em seguida, selecione o sistema de grade à direita e, em seguida, role para baixo até as opções de grade. Bootstrap tem um sistema de grade de 12 colunas e para acessar que usamos o prefixo de classe de col e, em seguida, traço e, em seguida, podemos usar o xs para o número de colunas por que queremos em dispositivos extra pequenos, sm para pequenos dispositivos ou tablets, md para dispositivos médios ou desktops, ou lg para desktops grandes. Assim, podemos criar divs, que é exibido de forma diferente em dispositivos menores ou maiores. Há um exemplo abaixo. Se quisermos criar uma div que tenha duas partes e abranja toda a largura da página, cada div precisa ocupar seis colunas cada, e o mesmo, se quisermos criar três colunas lado a lado, daremos a cada div uma classe de quatro colunas. Vamos colocar isso em prática em nosso projeto. Voltar para a página de índice. Se procurarmos a div que rodeia o texto logo após a classe de texto do recurso, vamos adicionar as colunas Bootstrap. Portanto, queremos que o texto ocupe todo o espaço disponível em uma visualização móvel, que possamos adicionar col-xs, para dispositivos extra pequenos, 12, então vamos ocupar as 12 colunas completas em um pequeno dispositivo. Se não queremos que tenha largura total em dispositivos maiores, podemos adicionar col-md-8, porque isso vai ocupar oito partes de 12 ou dois terços e, em seguida, maior ainda, em grandes desktops, col-lg-6, porque isso vai ocupar metade da largura da página web. Vamos guardar isso e dar uma olhada. Se deslocarmos para baixo até o tamanho pequeno, você pode ver que o texto ocupa toda a largura. Mas uma vez que atingimos os dispositivos médios, esta div só ocupa oito partes. Porque só ocupa oito partes, está deixando quatro colunas no lado direito. Então, para garantir que esta div permaneça no meio da página, podemos adicionar um deslocamento no lado esquerdo. Então, para centralizar essa div, precisamos adicionar um deslocamento de dois, e a maneira como fazemos isso é col, então o primeiro é md, em seguida, traço offset, e então para deslocá-lo para duas colunas, nós definimos isso para dois. Vamos guardar isso e ver se está funcionando bem. Ótima. Então, a div de oito colunas está no meio da página com duas colunas no lado agora. Vamos fazer o mesmo para os grandes dispositivos porque os grandes dispositivos são ocupados até seis partes. Precisamos adicionar um deslocamento de três. Então col-lg-offset três. Lá vamos nós. As documentações do Bootstrap obtiveram mais algumas informações sobre o sistema de grade e compensação. Há também alguns exemplos que você pode dar uma olhada na seção de compensação. Então esse vídeo está quase terminado. Só mais uma coisa que precisamos adicionar antes de irmos, é que se reduzirmos o navegador, o texto é muito grande. Então, vamos descer para o pequeno tablet ou tamanhos móveis. Temos de ter a certeza de que o texto é menor. Então, podemos fazer isso em nosso CSS adicionando uma consulta de mídia. Vamos adicionar um comentário de estilo móvel apenas na parte inferior da página. Então, vamos adicionar uma consulta de mídia, então @media tela, e vamos direcionar os dispositivos com uma largura máxima de 768 pixels. Usando 768 pixels, isso mantém em linha com as consultas de mídia do Bootstrap. Se voltarmos para o topo do sistema de grade, você pode ver os tamanhos de consulta de mídia que o Bootstrap usa. Então vamos definir em nossa consulta de mídia para dispositivos extra pequenos com menos de 768 pixels. Para reduzir o tamanho da fonte, precisamos adicionar a classe de texto do recurso, e depois p, e precisamos mostrar o espaço depois e, lá vamos nós. Portanto, precisamos reduzir o tamanho da fonte. Vamos definir isso para 28 pixels e também a altura da linha, que pode ser a mesma, que também pode ser 28 pixels. Vamos salvar isso e voltar para o navegador. Se voltarmos para o projeto e, em seguida, encolher o navegador para baixo. Você pode ver que o texto agora é dimensionado para baixo nos dispositivos menores e ajustado no contêiner. À medida que aumentamos e atingimos a consulta de mídia, obteremos o texto maior, de modo que está muito melhor. Enquanto estamos na media query, nós também podemos apenas fazer os links gratuitos na visualização móvel, aqui no centro da página, podemos adicionar isso na seção lia, porque é o nosso item de lista hyperlinks, então text-align centro. Lá vamos nós. Ótima. Então é isso para esta seção. Isso é todo o CSS concluído para o cabeçalho. Se você se juntar a mim no próximo vídeo, vamos continuar com o site e passar para a seção de boas-vindas. 5. Página inicial — seção de boas-vindas: No último vídeo, concluímos o HTML e o CSS para a seção de cabeçalho. Em seguida, se dermos uma olhada no site finalizado, vamos começar com a seção de boas-vindas. É uma seção bastante simples, há apenas um cabeçalho de nível 2 no topo, há também uma imagem dividida, e depois quatro links para diferentes partes do site. Vamos começar. Vá para a página de índice e copie o comentário para a seção de recursos. Vamos começar a trabalhar logo abaixo da tag de cabeçalho de fechamento e colar isso. Esta vai ser a seção de boas vindas. A seção de boas-vindas vai estar nas tags de seção, e a tag de seção vai ter um ID de boas-vindas, então podemos usar isso no CSS. Toda a div precisa ter uma classe de contêiner. Ao contrário das seções anteriores, vamos apenas usar um recipiente de largura definida. Não queremos nos esticar muito. Então, dentro do recipiente, adicionamos o div usual com a classe de linha. Em seguida, vamos definir o número de colunas bootstrap. Queremos que o título de nível 2 e também a imagem divisor seja metade da largura da página web, então vamos definir o número de colunas para ser seis e vamos adicionar um deslocamento de três no lado esquerdo. Vamos cercar o texto na imagem com uma div, com uma classe de col-sm-6 e também para o deslocamento, col-sm-offset-3. Em seguida, o título de nível 2, que é “Bem-vindo ao Tranquil Spa”, então logo abaixo do título, vamos adicionar a imagem, então a fonte da imagem, esta imagem também está em nossa pasta de imagens, images/divider-purple.png. Se olharmos para o projeto finalizado, você pode ver que o divisor roxo está na cor de fundo branco. Mas mais abaixo, temos cor de fundo roxo, também temos uma divisão com os potes de prata. Usaremos o divisor de prata nas seções. Após o caminho do arquivo, podemos adicionar o texto alt-do divisor, e fechar essa imagem fora, e, em seguida, vamos apenas copiar os comentários div fechamento. O primeiro é para as colunas, o próximo é para as linhas, e o último é para o contêiner. Vamos ver como isso está olhando, volta para o navegador e atualizar. Lá vamos nós. A imagem no texto é centralizada. Precisamos trabalhar um pouco com o CSS, mas está tudo bem por enquanto. Em seguida, criaremos as quatro imagens e os quatro links logo abaixo. De volta ao editor de texto, começamos logo abaixo da última linha de fechamento, mas ainda dentro do contêiner principal. Vamos criar uma nova linha. Uma classe div de linha e também vamos adicionar uma classe personalizada de instalações, podemos usar isso no CSS. Cada um dos links individuais está indo jogo de três colunas, para que possamos criar quatro divs diferentes com uma classe de col-sm-3. O primeiro, classe div de col-sm-3, então tanto a imagem quanto o texto serão um link, então vamos deixar um espaço em branco. Dentro do link, vamos adicionar a imagem primeiro. A fonte da imagem das imagens e a primeira imagem é makeup.png com o texto antigo, vamos nos livrar da barra lateral. O texto antigo é “Cabelo e maquiagem”. Então logo após a imagem, você pode adicionar o texto para o link, então cabelo, e então para obter o símbolo e, em seguida, usamos o comercial e, em seguida, amp; em seguida, Make Up, em seguida, vamos adicionar alguns comentários para as divs de fechamento. O lado de fora é para a linha e, em seguida, o interno é para a div de três colunas. Porque nós vamos estar usando essas três colunas div quatro vezes, vamos copiar a seção e depois colá-lo em abaixo três vezes mais, salvar isso, e check-out no navegador, e atualizar. Ótimo, isso está funcionando. Temos as quatro imagens, todas hiperligações. Podemos ver o sublinhado uma vez que você passar o mouse sobre e também o texto está lá. Vamos agora mudar as imagens no texto. A primeira div está bem, vamos descer para a segunda imagem. A segunda imagem tem um nome de candles.png, o texto alt é “ Instalações Spa ” e também o texto é Spa Facilities. Em seguida, a terceira seção tem uma imagem chamada lake.png e o texto é “Lakeside Retreats”, e também o mesmo para o texto alt. Finalmente, o último, o nome da imagem é pool.png, o texto é “All Our Facilities” e vamos copiar isso para o texto alt também. Vamos ver isso no navegador e atualizar. Tudo bem por enquanto. Em seguida, vou seguir em frente e adicionar alguns CSS para esta seção. Queremos ter certeza de que o cabeçalho de nível 2 é centralizado, precisamos de algum espaçamento acima e abaixo das imagens. Nós também vamos centralizar o texto e remover o sublinhado quando passar o mouse sobre, e também vamos mudar a cor do texto. Vamos fazer isso no CSS personalizado. Vamos começar com o título de nível 2 porque vamos usar isso muitas vezes no site, queremos colocar isso na seção Global no topo, então logo abaixo da imagem, podemos ter h2 lá. Precisamos alinhar texto, centro. No tamanho da fonte para ser 2em, e também para criar um pouco de espaço na parte superior e inferior, vamos adicionar um pouco de margem. Margem superior, 30 pixels, e também alguma margem na parte inferior para ser de 20 pixels. Vamos salvar isso e verificar isso no navegador. Agora, temos o texto no meio, e também um pouco de espaço acima e abaixo. Enquanto estamos também na seção global, podemos remover o sublinhado dos hiperlinks quando passamos o mouse sobre. Logo abaixo do h2, vamos selecionar um:hover. Podemos remover o sublinhado definindo a decoração do texto para ser nenhum. Vamos também definir a cor do texto enquanto estamos aqui. Quando pairado sobre, ele precisa ser 97689c. Agora, quando eu passar o mouse sobre, o texto muda para roxo e o sublinhado sendo removido. Como nós definimos o tamanho da fonte h2 para ser 2em, isso provavelmente vai ser um pouco grande demais quando chegarmos ao tamanho do celular, então vamos para a consulta de mídia. Abaixo do texto do recurso, vamos adicionar o h2. Vamos reduzir o tamanho da fonte para 1.6em. Agora, adicionamos os estilos globais, podemos começar adicionando uma seção de Boas-vindas e adicionar alguns dos estilos específicos de boas-vindas. Vamos copiar o comentário para estilo móvel e vamos colá-lo logo acima da seção de estilo móvel. Vamos chamar isso de Seção de Boas-Vindas. A seção de Boas-vindas, damos um ID de “bem-vindo”. A seção de boas-vindas tem uma cor de fundo branco. Vamos adicionar algum preenchimento na parte inferior da seção para que tudo abaixo não fique muito perto. Vamos definir o fundo do preenchimento para 30 pixels. Nós também vamos definir apenas texto nesta seção para estar no centro. Na seção global, mudamos a cor dos links quando passamos o mouse sobre eles. Mas agora, precisamos definir a cor para substituir o azul padrão. Bem-vindo e depois um, porque eles são links e a cor vai ter o valor de 494646, que é uma cor cinza mais escura. Em seguida, na seção com as imagens e o texto, queremos tornar o texto um pouco maior e também as imagens individuais, vamos torná-las um pouco menores e adicionar alguma margem na parte superior e inferior, apenas espaçando um Um pouco mais. torno desta linha, vamos olhar para trás no HTML. Os quatro divs individuais foram todos cercados por uma linha e nós damos a essa linha uma classe personalizada de instalações. Vamos usar o nosso agora. Vamos aumentar o tamanho da fonte. Tamanho da fonte, vamos definir isso para 1.5 em, e também a imagem das instalações, vamos definir a exibição para ser bloco. Para torná-los um pouco menores, podemos definir a largura máxima para 60 por cento, que pareça um pouco melhor. Em seguida, para adicionar um espaço aqui, vamos definir a margem, queremos colocar 30 pixels na parte superior e inferior, e definir a esquerda e a direita para ser auto. Lá vamos nós, isso é o que está terminado agora com a seção de boas-vindas. Esse é o fim deste vídeo e se você se juntar a mim no próximo vídeo, vamos continuar com o site e vamos descer para criar a seção mais recente do Office. Vejo você lá. 6. Página inicial — seção de ofertas: HTML: Nosso site está tomando forma agora, nós completamos a seção de cabeçalho e também a imagem e o texto em destaque. Em seguida, passamos para a criação da seção de boas-vindas, que tem links para todas as seções do site. Se dermos uma olhada no site finalizado, a próxima parte que criaremos será a seção de ofertas mais recentes. Ele vai consistir em um cabeçalho de nível 2 semelhante e divisor para a última seção, e então nós vamos criar uma nova linha com três ofertas especiais diferentes. As três ofertas diferentes são textos estáticos por enquanto, mas uma vez que chegarmos à seção WordPress mais tarde no curso, vamos nos certificar de que o usuário pode fazer login e alterar os valores, para que eles possam manter as ofertas especiais atualizadas mesmo sem qualquer conhecimento técnico. Vamos começar na página de índice, então vamos começar com um comentário. Esta seção vai ser chamada de ofertas mais recentes, e vamos fazer logo abaixo da seção de boas-vindas como fizemos no último vídeo, então vamos localizar a seção de fechamento e, em seguida, colar o comentário logo abaixo, modo que esta é a última ofertas. As últimas ofertas terão sua própria seção também e isso terá um ID das últimas ofertas, eles estão dentro da seção. Vamos criar a div usual com a classe de contêiner, e então porque a linha que vamos usar é praticamente a mesma que a última seção, podemos simplesmente copiar o div com a classe de linha e podemos reutilizar isso. Cole isso dentro do recipiente, e então precisamos mudar o nível 2 cabeçalho para as últimas ofertas. Porque desta vez estamos em um fundo roxo, vamos mudar o divisor para ser o divider-silver.png e vamos dar uma olhada nisso. Há nossa seção com o cabeçalho de nível 2 no divisor, então nós vamos apenas adicionar mais uma classe personalizada que vai ser uma classe para adicionar alguma margem para a parte inferior do divisor. Se olharmos para o projeto finalizado, precisamos ter certeza de que as divs livres abaixo do divisor são levemente empurradas para baixo da imagem, então vamos adicionar a classe à linha de margem inferior. Vamos adicionar uma margem no próximo vídeo, no CSS, vamos apenas adicionar um comentário de fechamento ao contêiner. Vamos colocar as ofertas especiais gratuitas em linha, então vamos criar uma nova div com a classe de linha. Nós vamos criar os divs oferta especial gratuita, mas precisamos colocar esses divs oferta especial livre em um recipiente, então vamos colocar um recipiente de 12 colunas de largura em torno deles. Div com uma classe de col-sm-12, e que irá criar um recipiente completo 12 coluna. Como as seções de oferta especial gratuita estão aninhadas, precisamos criar uma nova linha para que elas entrem. Dentro da linha, a primeira oferta especial será div class col-sm-4, por isso ocupa um terço da página e também para que possamos adicionar nossos estilos personalizados, também adicionaremos uma classe personalizada de oferta. Para começar, precisamos colocar o preço, precisamos colocar o preço nas tags span, e então vamos colocar o nome da oferta especial em um título de nível 3 e, em seguida, duas tags de parágrafo separadas logo abaixo. Para o preço, o intervalo, e, em seguida, entre lá o primeiro tinha um preço de US $60, e, em seguida, abaixo do nível 3 título, o nome da oferta. A primeira é oferta de família, eu só vou colocar uma tag break lá, e depois as tags, então aprimeira linha de texto foi pool família e, em e depois as tags, então a seguida, linha dois foi ótimo dia fora, então vamos ver como isso está olhando. Está tudo lá, mas ainda há um pouco de trabalho a fazer com o CSS, mas vamos continuar por enquanto adicionando o resto das ofertas. Se localizarmos o div, na verdade vamos fazer algum comentário primeiro, então basta copiar o comentário recipiente e, em seguida, o primeiro é para a classe de oferta. O segundo é chamado sm-4, e então esta é a linha, na verdade, esta é a linha aninhada, então logo abaixo é o wrapper de 12 colunas e, em seguida, o contêiner de linha final. Vamos copiar a seção completa para a oferta especial e, em seguida, vamos colar duas vezes logo abaixo. A segunda oferta especial tinha o preço de um $120 e este é um pacote de noivas, então o nome da oferta era para a noiva. A primeira linha do texto era cabelo e maquiagem, e por último foi o pacote de pamper completo, e então a última oferta especial foi o passe de fim de semana que tinha um preço de US $90, então o nome era passe de fim de semana. O texto era instalações modernas, e o último tinha o texto do presente perfeito. De volta ao navegador, tudo parece bem, é exatamente assim que queremos. Junte-se a mim no próximo vídeo, e vamos continuar com a seção adicionando o CSS. 7. Página inicial — seção de ofertas: CSS: Neste vídeo, continuaremos com a seção de ofertas mais recentes. No último vídeo, adicionamos o HTML para as ofertas separadas gratuitas e neste vídeo vamos adicionar o CSS para torná-lo mais parecido com os projetos finalizados. Vamos adicionar a cor de fundo roxo para a seção completa. Também mudaremos a cor do fundo e do texto para as ofertas individuais gratuitas. Também garantiremos que o círculo de preços esteja posicionado horizontalmente no meio da div e também se sobreponha na parte superior. Faremos isso com um posicionamento absoluto. Se formos para o nosso CSS, podemos criar uma nova seção. Vamos fazer isso na parte inferior antes do estilo móvel. Estas são as últimas ofertas. A seção de ofertas mais recentes tinha o ID das ofertas mais recentes. Vamos usar isso para criar a cor de fundo roxo. Defina a cor da fonte para ser branca e certifique-se também de que todo o texto está alinhado. Primeiro de tudo, vamos definir o text-align para estar no centro. Como estamos usando uma cor de fundo roxo ou cores de fundo escuras, queremos que a div tenha texto branco. A cor de fundo roxo tem o ID de 97689c. Vamos dar uma olhada no navegador. Agora temos a cor de fundo roxo e o texto branco, que possamos passar para as três divs oferta individual. Se olharmos para trás para a página de índice, as ofertas gratuitas, nós damos a eles uma classe personalizada de oferta, nós usamos em todos os três deles. Podemos selecionar isso agora. Então, a classe de oferta. Vamos definir a cor de fundo escuro primeiro. O fundo para as ofertas gratuitas tem um ID de 4a525f. Lá vamos nós. Como estes serão contêineres para o preço e círculos, vamos definir a posição para ser relativa. Para torná-los um pouco mais altos, vamos adicionar uma altura mínima de 350 pixels de altura e um pouco de preenchimento. Vou adicionar 40 pixels na parte superior e inferior, e depois 10 pixels à esquerda e à direita. Em seguida, podemos começar a qualquer preço e círculos. O preço e os círculos foram embrulhados em uma tag span. Selecione-os usando a classe de oferta e, em seguida, abranger. Vamos começar alterando a cor de fundo. Os círculos terão a cor de 8abbb1 e a tela será definida para bloquear. Nós damos a estes uma altura e largura de 100 pixels. Como o preço vai estar dentro, vamos definir o text-align para ser o centro. Vamos dar uma olhada e ver como isso está parecendo até agora. Temos os divs de preços gratuitos aparecendo, temos uma cor de fundo diferente. Em seguida, precisamos torná-los um círculo. Então precisamos olhar uma posição nos círculos onde queremos. Para fazer esses círculos, podemos adicionar um raio limite de 100 por cento, e isso faz dele um círculo. Em seguida, para tornar o texto alinhado verticalmente, também podemos definir a altura da linha para 100 pixels, que é o mesmo que a altura total da div, e que move o preço para o meio do círculo. Como temos um contêiner relativo para trabalhar, podemos definir esses círculos de preços para ter uma posição absoluta. Vamos começar a referenciar esses círculos do lado esquerdo do contêiner. Vamos adicionar um pouco de margem esquerda de 50% para colocar isso no meio do recipiente. Agora não está bem no meio, porque precisamos compensar metade da largura do círculo. Vamos fazer isso agora. Se definir a esquerda, podemos definir o valor para ser negativo 50 pixels, que é metade da largura e que deve torná-los horizontalmente centrados. Então, em seguida, podemos referenciar o círculo do topo. Vamos pôr o topo. Agora, se definirmos o valor do topo para ser zero, o que aconteceria é que um círculo iria para o topo do contêiner, mas precisamos que o círculo seja sobreposto pela metade da altura. Em vez de definir o topo para ser zero, podemos definir o topo para ser negativo 50, que é metade da altura. Lá vamos nós. Esse é o posicionamento exatamente onde queremos. Apenas para terminar a seção de preços, vamos adicionar o tamanho da fonte e o peso da fonte. O tamanho da fonte que termina em 2ems e, por último, o peso da fonte será negrito. Lá vamos nós. Em seguida, criaremos algum espaçamento. O nome do autor está em um título de nível 3. Vamos adicionar alguma margem para a parte inferior apenas para empurrar o texto favorecido e também podemos aumentar o tamanho da fonte também. Abaixo da seção de extensão, temos a classe de oferta e depois h3. Margin-bottom é 50 pixels e também vamos alterar o tamanho da fonte para 1.2ems. Isso nos dá um pouco mais de espaço abaixo do título. Eu também vou adicionar algum espaçamento entre as duas linhas abaixo, adicionando um pouco de altura de linha extra. As duas linhas estavam em “P”. A oferta p, podemos aumentar a altura da linha para 2ems. Isso lhe dá um pouco mais de espaçamento vertical. Agora vamos criar algum espaço entre o divisor e também as seções de oferta especial gratuita. Se você se lembrar de volta na página de índice na primeira linha, que tinha o cabeçalho de nível 2 na imagem de divisão. Também adicionamos uma classe personalizada de margin-bottom. Podemos adicionar esse CSS personalizado, e empurrar as divs livres para baixo. Vamos definir a margem inferior para 70 pixels e ver como isso parece. Ótimo. É exatamente assim que queremos que ele fique na exibição da área de trabalho. Se encolher o navegador para baixo, até um tamanho móvel e, em seguida, rolar para baixo para as ofertas gratuitas, nós só precisamos fazer uma pequena mudança na margin-bottom porque os divs gratuitos se misturam em um quando eles são empilhados em cima do outro. Podemos facilmente corrigir isso se encontrarmos a seção com a classe oferta. Em seguida, podemos adicionar alguma margem na parte inferior de 60 pixels. Vamos ver como isso parece. Parece melhor agora. Temos espaço entre as três ofertas especiais na visualização móvel. É isso. É o fim da última seção de oferta. Obrigado por ouvir, e te vejo no próximo vídeo. 8. Página inicial — seção de compras online: No último vídeo, passamos para a seção Últimas Ofertas do site. Neste vídeo, vamos completar a seção Shop Online. Agora, a seção Shop Online é uma seção relativamente simples. Vamos usar um nível semelhante ao de ir no divisor, como fizemos nas duas últimas seções. Vamos adicionar um botão, que será um link para uma seção Comprar Aqui. Haverá também uma grande imagem de fundo através do CSS. No editor de texto, vou começar na página de índice e criar uma nova seção. Vou colar o comentário logo abaixo da seção Últimas Ofertas. Isso é chamado de seção Shop Online. Isso tem uma tag de seção com um ID de shop-online, e um contêiner de bootstrap usual na linha. Então div com uma classe de recipiente. Então, dentro do recipiente, temos a linha. Copiaremos o título e dividiremos a seção da última seção. Vamos copiar a seção de seis colunas e colá-la dentro de nossa própria linha. O título de nível 2 é o texto Shop Online. A imagem, precisamos mudar para ser a imagem roxa porque está em um fundo branco. Logo abaixo do divisor, o a e href vão ficar em branco por enquanto. A classe vai ser a classe botão bootstrap, então btn btn-default. Em seguida, o papel vai ser igual ao botão. Em seguida, feche o link e não o texto Comprar aqui, e vamos dar uma olhada no navegador. Este é o nosso divisor de cabeçalho e também o botão padrão. Agora, podemos facilmente fazer o botão aparecer no centro da página apenas adicionando uma classe bootstrap. Para o recipiente, logo após o número de colunas, podemos adicionar a classe bootstrap do centro de texto. Agora pressiona o botão no meio da div. Isso é tudo HTML que precisamos adicionar para esta seção. Vamos fechar alguns dos divs com comentários. Esta é a fila de fechamento no contêiner final. Ok, então a seguir, precisamos ir para o CSS personalizado. Vou adicionar o estilo para os padrões do botão e também para a imagem de fundo grande, assim como o site final. Para o CSS personalizado, então vamos começar com o botão. Então, porque vamos usar o botão mais tarde no curso, vamos adicioná-lo à seção Global na parte superior. Eu vou logo abaixo da imagem. A classe foi btn-default. Vamos substituir os valores de bootstrap padrão que envolvem linha. Em primeiro lugar, a cor de fundo do botão não será a cor azul, que é 8393ca, e adicionaremos uma borda, uma borda de pixels livres, sólida. A cor será ecf0f1 e um raio de borda de 5 pixels, e então alguns preenchimentos para tornar a borda um pouco maior, 15 pixels na parte superior e botão e 30 na esquerda e direita, e a cor do texto será branca. Vamos dar uma olhada. O botão está com boa aparência, só precisamos adicionar o estado de foco. Se voltarmos para o CSS btn-default e, em seguida, passar o mouse, nós mudamos a cor de fundo para ser 97689c. Quando passamos o mouse sobre o botão, temos a mesma cor roxa que o fundo. Agora, vamos voltar e criar uma seção Shop Online. Vamos copiar os comentários, e logo acima da PERSONALIZAÇÃO MÓVEIS novamente, chamaremos isso de seção Loja Online. Vamos começar com a imagem de fundo. A seção tinha um ID de loja on-line. Podemos alterar o plano de fundo adicionando fundo e, em seguida, url, e, em seguida, entre colchetes, podemos adicionar o caminho do arquivo. Então ponto ponto para voltar para o diretório home, imagens de barra e, em seguida, as imagens que queremos é products.jpg, mas não estarão no centro. Por último, não repita. Como está, a imagem está no lugar, mas ela só tem a mesma altura que o conteúdo que já está no lugar. Podemos mudar isso adicionando a altura mínima. Vou definir a altura mínima para ser a mesma altura da imagem, que é 852 pixels. Em seguida, vamos alterar a cor do texto do título Shop Online. A cor terá o valor de 494646. Então, finalmente, apenas para separar o botão do divisor, vamos adicionar alguma margem ao topo, então o ID shop-online e, em seguida, o btn-default. Vamos pressionar o botão para baixo adicionando alguma margem no topo de 25 pixels e vamos ver como isso parece no navegador. Ok, lá vamos nós, o botão agora é empurrado para baixo da divisória. É o fim do vídeo. Obrigado por assistir, e se você se juntar a mim no próximo vídeo, vamos terminar a página inicial do bootstrap adicionando o rodapé. 9. Seção de rodapé — HTML: Bem-vinda de volta. Neste vídeo, vamos criar a seção de rodapé para nossa página de índice. Se voltarmos ao nosso editor de texto e abaixo da seção online da loja, vamos apenas copiar os comentários e colá-los abaixo, e chamaremos isso de Seção de Rodapé. Nós não precisamos usar as tags de seção como seções anteriores porque há uma tag de rodapé que podemos usar no lugar. Usamos as etiquetas de rodapé. Como o cabeçalho de nível 2 na imagem para a seção de rodapé é bastante semelhante às últimas seções, podemos simplesmente copiar essa seção de cima. Copiámos o contentor da secção online da loja e colamo-lo entre as etiquetas do rodapé. Não precisamos do botão. Então podemos excluir essa seção. A seção de compras on-line será “Mantenha contato” e logo após o centro de texto, vamos reutilizar a classe margin-bottom, que usamos anteriormente na seção de ofertas mais recentes. Isso vai empurrar o conteúdo para longe do divisor. Vamos salvar e dar uma olhada nisso, e atualizar. Aqui está o nosso nível 2 e o divisor. Em seguida, precisamos criar uma nova linha, que terá o endereço à esquerda e alguns dos links de navegação no meio, e então alguns dos botões de compartilhamento social à direita. Para colocar essas três seções, vamos criar uma nova linha logo abaixo da última. Então, uma nova div com a classe de linha, e então dentro da linha vamos criar mais três divs, que serão quatro divs coluna. Classe Div, depois col-sm-4. Podemos copiar esta div, colá-la duas vezes. A primeira div tem o endereçamento, então vamos ser semânticos e usar as tags de endereço. A primeira linha é Tranquil Spa e, em seguida, adicione a tag break. Vamos adicionar algumas linhas de endereço, então a linha de endereço 1, em seguida, a tag break. Duplicar isso duas vezes mais para criar a linha de endereço 2 e 3. Em seguida, a segunda div tinha a lista desordenada com a navegação. Entre as tags ul, vamos criar quatro itens de lista e entre as tags de lista vamos criar alguns links. Então um href, e o primeiro link será sobre nós. Isso irá vincular a about.html e vamos colocar esse link lá para quando criarmos isso, eo texto é Sobre. Copie e cole ou duplique isso mais três vezes. O segundo link é o Fale Conosco. Vamos mudar isso agora e o link será contact.html. O terceiro link é para o blog. O link é blog.html, eo texto do Blog. Então, por último, são as últimas notícias. Nós podemos simplesmente excluir o link lá porque nós vamos estar gerando que dinamicamente no WordPress. Então vamos dar uma olhada no navegador. Lá vamos nós, temos as duas primeiras seções. Agora, só precisamos criar a seção de mídia social à direita. Para a div, vamos começar com tags p e o texto de Siga-nos, e, em seguida, abaixo do texto Siga-nos, vamos usar os ícones Font Awesome para links para mídias sociais. Nós adicionamos os ícones Font Awesome com a tag i e, em seguida, adicionamos uma classe. Então, a primeira classe é fa. Precisamos disso para todos os ícones. Então o ícone do Facebook é fa-facebook. Em seguida, para tornar o ícone um pouco maior do que o normal, adicionamos a classe de fa-lg e, em seguida, fechamos. Em seguida, crie mais quatro links. O segundo é o link para o Twitter. Precisamos de fa-twitter. ícone 3 é o Google Plus, depois o Pinterest e, finalmente, é o YouTube. Então vamos salvar isso e ver como isso está parecendo agora. Bom, temos os cinco ícones das redes sociais onde deveriam estar. Então a última coisa que precisamos fazer é adicionar a seção de direitos autorais na parte inferior da página. Vamos acrescentar isso agora. Logo abaixo do contêiner, mas armazenado na seção de fotos, adicionaremos uma nova div com uma classe de fluído de contêiner, para que ela abranja toda a largura da página da web. Nós também adicionaremos um ID de cópia para direitos autorais e, em seguida, uma div com uma classe de col-sm-12 para criar um contêiner de 12 colunas. Em seguida, o texto entre as tags p, vamos adicionar o símbolo de direitos autorais, que é comercial e, em seguida, copiar; 2015 Tranquil Spa. Então vamos adicionar alguns comentários. Esta é a div de fechamento para a linha. Este é o recipiente de 12 colunas e, finalmente, o recipiente de fluido. Vamos dar uma olhada. Ótimo, então esse é todo o HTML que eu fiz para a página inicial. Se você se juntar a mim no próximo vídeo, terminaremos nossa página inicial adicionando o CSS. 10. Seção de rodapé — CSS: Bem-vinda de volta. Neste vídeo, vamos terminar nossa página de índice adicionando o CSS para a seção de rodapé. Se nos dirigirmos para o nosso CSS personalizado e, em seguida, copiar os comentários. Apenas para a seção de estilo móvel, chamamos isso de seção manter contato. A seção de rodapé será embrulhada nas tags de rodapé. Vamos adicionar uma cor de fundo de roxo. Para destacar o texto, vamos definir a cor para ser branca e, em seguida, mudar a cor de fundo para ser roxo, que é 97689c. Em seguida, precisamos mudar o divisor para ser a cor prateada. Em HTML, vamos mudar o divisor de divisor roxo para ser divisor silver.png e, em seguida, vamos criar algum espaço entre as linhas para o endereço e também os itens da lista. De volta ao CSS, podemos fazer isso selecionando os itens da lista de rodapé, e também a seção de endereço, e vamos aumentar a altura da linha para ser 2ems, e isso nos dá um pouco mais de espaçamento verticalmente. Os ícones de mídia social estão um pouco perfurados, então eu vou adicionar alguma margem no lado direito apenas para separá-los um pouco. Vou selecionar ícones Font Awesome com o i. vamos adicionar alguma margem, no lado direito, 15 pixels. Isso parece um pouco melhor. Em seguida, queremos alterar a cor de fundo para a seção de direitos autorais na parte inferior e alinhar o texto no centro. Para a seção de direitos autorais, daremos um ID de cópia. Vamos começar definindo o text-align como centro, a cor de fundo para ser branco, e vamos definir a cor da fonte para 494646, e as alturas da div para 60 pixels, e também definir a altura da linha para 60 pixels para alinhar o texto e, finalmente, vamos adicionar alguma margem para o topo da div, de 30 pixels, atualizar. Parece estar funcionando, então vamos ver qual é o problema. Tenho a identificação da cópia. Quando ele é alterado o erro de ortografia que volta para ID e salvar isso e atualizar. Isso está parecendo melhor. Agora temos que separar sua seção de direitos autorais na parte inferior da página. Então, em seguida, precisamos fazer algum trabalho com os itens da lista. Precisamos mudar a cor e também remover as balas do lado esquerdo. Faremos isso na seção Global no topo. Vamos adicionar isso no final da seção Global. Primeiro para remover os marcadores, removeremos o estilo da lista, podemos definir isso como nenhum. Como estes são links, podemos selecionar o link do item da lista de rodapés e alterar a cor do link para ser branco. Em seguida, faça o mesmo para o estado de foco, rodapé, li a e, em seguida, passe o mouse. A cor do mouse será a cor cinza que usamos no texto, então é 494646. Vamos dar uma olhada. Está tudo funcionando bem, bom. Tudo parece bom para a visualização da área de trabalho, então vamos reduzi-la para a visualização móvel e ver se alguma alteração precisa ser feita. Sim, nós temos alguns padrões de preenchimento no lado esquerdo, e nós também precisamos alinhar o texto para estar no centro. Ele irá mover o preenchimento padrão, abrir a seção Global. Vamos fazer isso logo acima dos itens da lista. O UL, vamos definir o preenchimento para ser zero, que parece melhor, e definir o text-align para baixo na consulta de mídia. Vamos fazer isso no rodapé, alinhar texto para estar no centro. Para separar o endereço e a lista não ordenada do rodapé, quero adicionar uma borda inferior. Então, novamente, vamos fazer na consulta de mídia, assim rodapé, lista não ordenada, e também as tags de endereço. Border-bottom, vamos definir em um pixel e a linha a ser pontilhada. Vamos dar uma olhada. Isso está parecendo bem. Se expandirmos o navegador, tudo parece estar funcionando bem. Esse é o fim da nossa página de índice para o nosso site de bootstrap. Temos apenas mais algumas páginas para fazer, como o blog, o contato e a página. Obrigado por ouvir Eu vou vê-lo no próximo vídeo. 11. Página de blog — HTML: Bem-vinda de volta. Agora terminamos nossa página de índice, nosso modelo Bootstrap. Nesses próximos vídeos, vamos criar as últimas páginas para finalizar nosso modelo Bootstrap e então podemos começar a converter para WordPress. Neste vídeo, vamos começar com a página do blog. Se dermos uma olhada no projeto finalizado, podemos ter uma idéia do que vamos criar. Vamos reutilizar a seção de cabeçalho e também a imagem de fundo. Mas vamos mudar o texto para Tranquil Spa Official Blog. Em seguida, rolando para baixo, vamos ter as postagens individuais do blog no lado esquerdo. Vamos colocar três desses em nosso modelo. Teremos alguns links para postagens mais antigas e novas. No lado direito, teremos uma barra lateral. A barra lateral terá um pouco de texto sobre o site. Teremos uma página de arquivos onde todos os posts do blog serão armazenados por meses e ano. Também vamos separar as postagens do blog em categorias, e então, se formos um pouco mais abaixo na página, também estaremos reutilizando a seção de rodapé. A maior parte da barra lateral será apenas links vazios por enquanto. Estes serão gerados dinamicamente no WordPress. Vamos apenas adicioná-los no Bootstrap como links vazios para obter a aparência do site. Vamos começar. Vamos ao nosso editor de texto com o nosso projeto. Então vamos criar uma nova página e salvar isso como blog.html, e fazer isso é salvo no mesmo nível que a página de índice. Em seguida, se você entrar na página de índice que terminamos anteriormente e selecione todos e copiar. Em seguida, podemos usar isso como um ponto de partida para a nossa página de blog e colar isso em. Como mencionei anteriormente, usaremos a mesma seção de cabeçalho. Se nós rolar para baixo até o final da tag de cabeçalho de fechamento, que está apenas lá, podemos começar excluindo a seção de boas-vindas e excluir [inaudível] seção e continuar indo até o início da seção de rodapé e, em seguida, excluir Isso. Neste [inaudível], temos apenas a seção de cabeçalho e rodapé. A primeira coisa que vou mudar é o texto do recurso. Vamos mudar isto para o Blog Oficial da Tranquil Spa. Lá vamos nós. Então vamos usar um modelo Bootstrap para nossos blogs. Se nos dirigirmos para getbootstrap.com e, em seguida, selecione a seção Introdução. Se descermos até os modelos do Bootstrap, você verá esses modelos padrão fornecidos pelo Bootstrap. Deve haver um chamado Blog. Então, selecionamos o Blog. Vamos selecionar algumas das partes deste site para usar como modelo. A barra lateral está no lado direito e também a postagem do blog à esquerda. Isso vai criar um bom ponto de partida para o nosso blog. Para obter o código para isso, precisamos pressionar-clique ou clique com o botão direito do mouse. Vá para “Exibir fonte da página”. Vamos copiar o código com a postagem do blog na barra lateral. Se rolarmos um pouco mais para baixo. Precisamos copiar o contêiner que está logo abaixo do blog-masthead. Copie o contêiner de abertura e, em seguida, para baixo, passado as Precisaremos copiar todo o caminho até a barra lateral. Está no fim da barra lateral, no fim da linha e no final do recipiente. Copie toda a nossa seção e, em seguida, volte para o editor de texto entre o cabeçalho e a seção de rodapé, vamos colar isso em. Para tornar as coisas um pouco mais claras, podemos adicionar alguns comentários. Vamos adicionar o primeiro comentário à barra lateral. Se você olhar para o final do blog e colar isso logo abaixo. Altere uma seção da barra lateral da entidade e role para cima. Em seguida, até a postagem de abertura do blog, que fica logo acima do contêiner. Cole isso. Esta pode ser a seção do blog. Em seguida, vamos dar uma olhada em como isso está parecendo até agora e veremos quais mudanças precisamos fazer. Temos nossa seção de cabeçalho, e então temos a postagem de blog de exemplo à esquerda, na barra lateral exatamente onde queríamos. Então temos a seção de rodapé na parte inferior. De volta ao editor de texto, queremos apenas remover o cabeçalho do blog bootstrap na parte superior. Vamos fazer isso agora. Vamos deixar a div completa com o cabeçalho do blog. Vamos dar uma olhada nisso. Esse é o título removido. Por padrão no modelo Bootstrap que acabamos de copiar. Há três estilos diferentes de postagens de blog. Para manter nosso site consistente, vou usar o terceiro post do blog. Voltamos para a seção do blog, e cada postagem de blog individual tem uma classe de postagem de blog. Então sabemos onde cada bloco começa e termina. Este é o primeiro. Eu quero rolar para baixo até a tag de fechamento da postagem do blog e excluir esta. Eu também vou excluir a segunda postagem do blog. Procure a div de fechamento, a postagem do blog e selecione isso e exclua. Agora, acabamos de nos deixar com a terceira e última postagem do blog. Para colocar isso de volta, queremos copiar o estilo e, em seguida, colá-lo novamente duas vezes abaixo. Vamos checar o navegador. Agora temos posts de blog gratuitos de volta em nossa página, mas com um estilo consistente. Em seguida, vamos alterar o texto na seção Sobre a na barra lateral. Role para baixo até a seção da barra lateral e se localizarmos a seção Sobre, podemos simplesmente excluir o texto de exemplo entre as tags P e vamos colocar nosso próprio texto em. Bem-vindo ao Blog oficial da Tranquil Spar. Em seguida, uma segunda frase logo abaixo, também em tags P. Aqui você vai encontrar todas as últimas notícias sobre o que está acontecendo aqui no Spa. Essa é a seção Sobre nós. Vai manter os arquivos como é por agora e vamos fazer este trabalho dinamicamente no WordPress mais tarde no curso. A seção Em outro lugar, vamos alterá-la para Categorias. Vamos adicionar algumas categorias lá por enquanto. O primeiro podemos ser transformados em notícias e, em seguida, oferece e, em seguida, finalmente, sem categoria. Então vamos colocar nossa seção de mídia social. Se copiarmos o div módulo da barra lateral e colar isso logo abaixo, podemos alterar as categorias para Siga-nos. Porque temos todos os links de mídia social já na seção de rodapé. Podemos voltar para a nossa página de índice. Pode localizar os ícones de mídia social na parte inferior do rodapé. Se copiarmos os cinco links de mídia social e, em seguida, colá-los de volta na seção do blog. Exclua esses primeiro e cole-os em. Então vamos salvar isso e ver como ele está no navegador. Isso é um [inaudível]. Temos a mensagem “Sobre nós”. Temos então os Arquivos, a seção Categoria e a seção de mídia social. Isso está quase terminado com o blog HTML. Só mais uma coisinha que eu gostaria de mudar é se formos ao contêiner do blog. Uma coisa que eu gostaria de mudar para o número de colunas no blog na barra lateral. Por padrão, o Bootstrap tem a seção de blog ocupando oito partes nos dispositivos menores. Eu gostaria que o nosso tivesse 12 colunas de largura, dispositivos menores, e então mudasse para oito em dispositivos médios. Então também precisamos ir até a seção da barra lateral e fazer o mesmo para o invólucro da barra lateral. Para fazer a barra lateral ir largura total em dispositivos menores, podemos mudar isso para 12 colunas e, em seguida, alterá-lo para col-md-3. Para pegar as três colunas em dispositivos médios. Então, porque mudamos isso para médio, também mudaremos o deslocamento nos dispositivos médios para um. Apenas um pouco de distância entre a postagem do blog na barra lateral e, em seguida, salve isso. Isso acabou de terminar para o HTML para a seção do blog. Se você se juntar a mim no próximo vídeo, continuaremos com a nossa página do blog adicionando o CSS. 12. Página de blog — CSS: Então nós temos nossa página do blog tudo no lugar agora. Então agora vamos fazer com que pareça um pouco mais com o projeto finalizado adicionando o CSS. Então precisamos adicionar uma imagem dividida abaixo do título do blog para cada post. Também adicionaremos o contorno para cada uma das postagens individuais na barra lateral. Agora, também vamos adicionar algumas margens e acolchoamentos para torná-lo um pouco melhor. Então vamos começar com o título da postagem do blog. Precisamos fazer isso parecer um pouco melhor e também na imagem logo abaixo. Então, a maneira como fazemos isso, se olharmos para cada post individual, o título de nível 2 tem uma classe de blog-post-title. Então vamos para a nossa seção CSS. Então vamos começar com nossa seção de blog logo abaixo da seção Manter contato. Então vou copiar o comentário e colar isso. Vamos chamar isso de seção Blog. Então vamos começar com o blogue-post título. Então, para obter a imagem de fundo logo abaixo do título de nível 2, podemos adicionar o url de fundo. Em seguida, entre parênteses, vamos colocar o caminho para nosso divisor roxo que usamos na página de índice. Então usamos ponto. Então, na pasta Imagens, devemos ter o divisor purple.png. Em seguida, para definir a posição, vamos adicionar centro e com a barra lateral, e, em seguida, definir a imagem para não ser repetida. Então vamos dar uma olhada nisso. Então nós temos uma imagem agora, mas ela está espalhando toda a largura do cabeçalho de nível 2. Então precisamos mudar o posicionamento. Então, primeiro de tudo, vamos definir a altura para 80 pixels e esta é a altura da div completa. Então, em seguida, podemos definir o tamanho da imagem e podemos fazer isso em tamanho de fundo. Defina o tamanho do plano de fundo para 300 pixels de largura e 40 pixels de altura. Vamos dar uma olhada. Então, parece um pouco melhor, mas ainda está sobrepondo o texto. Então vamos mover a posição de fundo. Então, primeiro de tudo, vamos definir a posição x para ser o centro e, em seguida, o y, vamos definir isso para 35 pixels. Eu deveria empurrar a imagem um pouco para baixo. Lá vamos nós. Então, agora, a imagem está clara do cabeçalho de nível 2. Então, em seguida, eu só vou adicionar um pouco de margem na parte inferior da div apenas para afastar o texto. Então vamos definir a margem inferior de 30 pixels. Em seguida, em seguida, vamos adicionar o contorno para a postagem. Então, se você olhar para o site finalizado, cada post de blog individual tem o contorno de um pixel com os cantos arredondados. Então vamos fazer isso agora. Então, se olharmos para trás no blog.html, você pode ver que cada postagem de blog individual tem uma classe de postagem de blog. Então vamos copiar isso e colar isso. Então, em primeiro lugar, vamos adicionar a borda. Isso vai ser uma linha sólida de pixel e a cor vai ser 494646. Vamos obter os cantos arredondados, vamos adicionar o raio da borda de 10 pixels. Em seguida, vamos adicionar alguma margem. Então, para garantir que as postagens do blog tenham algum espaçamento na parte superior e inferior, podemos adicionar uma margem de 30 pixels na parte superior e inferior e zero à esquerda e à direita. Em seguida, um pouco de preenchimento apenas dentro da div de 20 pixels. Vamos ver como isso está parecendo. Então está parecendo muito melhor agora. Então, em seguida, vamos para a barra lateral. Vou fazer os módulos da barra lateral se parecerem um pouco mais com as postagens do blog. Então, primeiro de tudo, vamos copiar o comentário. Esta pode ser a barra lateral do blog. Então, para estilizar a barra lateral, podemos usar a classe do módulo de barra lateral porque vamos estar usando o mesmo estilo de borda que acabamos de usar no post do blog. Podemos copiar esse CSS e colar isso lá dentro. Vamos dar uma olhada. Lá vamos nós. Então, agora os módulos da barra lateral, agora correspondem ao estilo das postagens do blog. É isso para este vídeo, obrigado por assistir e eu vou vê-lo no próximo vídeo onde estaremos criando a página Sobre o mural. 13. Página “Sobre nós”: Passando da página do blog que terminamos no último vídeo. Neste vídeo vamos criar a página Sobre Nós, que vai ser bem simples. Ele vai reutilizar o cabeçalho e a seção de rodapé de vídeos anteriores. Vamos ter um título consistente de nível dois e dividir a imagem. Vamos colocá-lo em algum texto Lorem Ipsum, que você pode mudar para qualquer texto que você quiser. Então também teremos os links que usamos na página inicial para várias partes do site. Em seguida, a seção Rodapé na parte inferior. Então vamos ao nosso editor de texto e copiaremos a página de índice. Portanto, selecione tudo e copie. Em seguida, comando e N ou Control N para criar uma nova página. Cole isso em e salve isso como about.html, novamente no mesmo nível da página de índice e salve isso. Então, da parte inferior da página, podemos manter a seção Rodapé. Isto vai ser o mesmo que a página de índice. Podemos remover a seção Loja Online. Não precisamos disso. Também podemos remover a seção Últimas Ofertas. Podemos ficar com a seção de instalações. Estes serão os nossos quatro links de imagem. Na verdade, podemos manter toda a seção de boas-vindas. Podemos reutilizar o título de nível dois e a imagem. Então, vamos começar renomeando a seção de boas-vindas para Sobre nós seção. Mas certifique-se de que alteramos o id da seção para aproximadamente. Assim, podemos manter a mesma linha de contêiner no mesmo número de colunas e alterar o cabeçalho de nível dois para About Us. Posso ficar com a imagem roxa. Então vamos ver como isso está parecendo. Isso está tudo bem. Por enquanto, podemos resolver os problemas de alinhamento em CSS em breve. Então, em seguida, queremos adicionar alguns parágrafos de texto. Então, se formos ao Google e fazer uma pesquisa por Lorem Ipsum, eu clico no primeiro link e podemos usar esta página, para obter algum texto de amostra. Então eu só vou gerar dois parágrafos. Selecione o primeiro parágrafo por enquanto e copie-o. Depois da classe e linha tag para o cabeçalho de nível dois, vou criar mais uma linha. Então, a div com a classe de linha. No primeiro parágrafo, vou criar algumas tags P. Em seguida, cole no parágrafo. Então, logo abaixo disso, criaremos outro parágrafo. Em seguida, volte para o texto de amostra e copie o segundo parágrafo e cole isso. Vamos verificar isso no navegador. Lá vamos nós. Então, em seguida, vamos para o nosso CSS personalizado. Então, para começar, queremos adicionar algum preenchimento na parte inferior da página apenas para separar esta seção do rodapé, o texto do link está todo fora de lugar, então vamos definir o text-align para estar no centro. Também criaremos um pouco de margem na parte superior e inferior dos parágrafos. Então, se voltarmos para o nosso custom.css, em seguida, criar uma seção Sobre Nós. Então dê a esta seção um id de aproximadamente. Então vamos começar adicionando o preenchimento na parte inferior da div. Vou buscar pixels e, em seguida, alinhar texto para estar no centro. Vamos dar uma olhada. Assim, o text-align alinhou o texto no centro da página. Também se certificou de que nossa imagem de divisão está no meio e o texto do link abaixo está agora a 30 pixels da margem na parte inferior da div. Então a última coisa que eu quero fazer é adicionar alguma margem para a parte superior e inferior do texto. Então vamos selecionar o about id e, em seguida, as tags p. A única coisa que queremos fazer neste p é adicionar alguma margem de 30 pixels na parte superior e inferior, e zero na esquerda e direita. Então atualize. Lá vamos nós. Então esse é o texto separado e a página Sobre Nós terminou. Então, obrigado por assistir. No próximo vídeo, criaremos a página final para o nosso modelo Bootstrap, que será a página Contato. 14. Página “Entre em contato conosco” — HTML: Então, bem-vindo de volta. Neste vídeo, vamos criar a página final para o nosso modelo Bootstrap, que será a página Fale Conosco. Então é assim que vai parecer. Então nós temos a seção Fale Conosco que tem dois contêineres de seis colunas. Então, o do lado esquerdo será para os detalhes do endereço e, em seguida, no lado direito, vamos incorporar um Google iFrame com um local à beira do lago e, logo abaixo, vamos adicionar uma seção para Enviar uma Mensagem, e isso irá abranger toda a largura da página da Web. Quando chegarmos à seção WordPress, isso será totalmente funcional. Então vamos começar em nosso editor de texto. Vamos começar com a página Sobre, eu vou copiar tudo isso e, em seguida, usar isso como um ponto de partida para a nossa nova página e, em seguida, colar isso em. Vamos salvar isso como contact.html. Esta página estará usando o mesmo rodapé, então mantemos toda a seção de rodapé lá. Por enquanto, podemos manter a seção Sobre o que, mas podemos apenas alterar isso para a seção Fale Conosco e, em seguida, alterar o id da seção para Contato. O cabeçalho de nível dois pode ser alterado para Contato e que manterá toda esta linha consistente com o resto do site, e a seguinte linha com o texto. Podemos apagar todo o texto por enquanto, não precisamos disso, mas podemos manter a linha e reutilizá-la. Então, dentro desta linha, esta vai ser as seções de duas e seis colunas. O da esquerda terá o endereço e a seção à direita terá o iFrame do Google Maps. Então vamos começar criando duas novas divs com uma classe de col-sm-6. Farei exatamente o mesmo para o Google iFrame. Então, primeiro de tudo, vamos começar na div à esquerda, que terá a informação do endereço. Primeiro de tudo, vamos adicionar alguns CSS personalizados. Então, podemos adicionar nossa própria classe de endereço e também, se dermos uma olhada no site acabado, você pode ver que o endereço tem a imagem de fundo mais escura e isso é de um poço Bootstrap. Então vamos adicionar a classe de bem e o endereço vai ser o mesmo que a seção de rodapé. Então, se nós rolar para baixo até a parte inferior da página e, em seguida, copiar as tags de endereço, e colar isso na div à esquerda e também é um ícone Font Awesome, que é apenas à esquerda do nome. Então vamos adicionar isso logo após a tag de endereço de abertura. Vamos adicionar o ícone. Ele tem i tag com uma classe de fa fa-map-marcador. Então, logo abaixo do Endereço, vamos adicionar algumas informações de e-mail e telefone. Então, tanto o e-mail quanto a seção de telefone tem um ícone Font Awesome. Então, o primeiro é para o e-mail, e esta é uma classe de fa fa-envelope-o, e então logo após o ícone, podemos adicionar o texto de e-mail. Eu só vou colocar e-mail genérico lá, então envie e-mail em mail.com e, em seguida, adicione uma tag break no segundo ícone. Isto para o telefone. Então, isso tem uma classe de fa fa-telefone e texto todo o telefone. vez, vou colocar um número genérico lá. Então vamos dar uma olhada nisso, se voltarmos para o navegador e depois atualizar. Então temos a div do lado esquerdo mostrando bem. Apenas algo para mudar na seção E-mail. Vamos voltar para cima. Então só temos algumas coisas que precisamos mudar lá, então vamos mudar isso para um cólon e depois um símbolo at, e lá vamos nós. Então, em seguida, precisamos criar o IFrame no lado direito. Então, se ir para o Google Maps, e se você encontrar um local agradável à beira do lago, e então o que você precisa fazer é clicar no Menu e, em seguida, selecione Compartilhar ou Incorporar Mapa e selecione a segunda guia que é Incorporar Mapa e, em seguida, copiar o link que o Google fornece. Então, se entrarmos em nossa segunda div, podemos colar isso e vamos ver como isso está parecendo. Lá vamos nós, então isso está funcionando bem. Vamos adicionar alguns CSS no próximo vídeo para isso, mas isso está parecendo bom por enquanto. Então esta linha terminou, então em seguida vamos descer e vamos adicionar a seção Envie-nos uma Mensagem. Então, de volta ao editor de texto, e se localizarmos a div com a classe de linha em instalações, não precisamos mais da classe de instalações, mas vamos adicionar nossa própria classe de Área de Mensagem, e então todo o conteúdo entre este linha que podemos nos livrar. Então, se olharmos para a classe no recipiente linha, é todas as imagens e todos os divs. Vamos começar a seção Mensagem. Então vamos criar uma seção de largura total. Vamos dar ao div uma classe de col-sm-12 e, em seguida, aninhado dentro, nós também vamos adicionar um div com uma classe de poço, modo que se destaca um pouco mais. Então, dentro do poço, vamos criar o formulário HTML. Vamos para o projeto finalizado e dar uma olhada. Então, para estilizar, adicionaremos o texto na parte superior de Enviar uma Mensagem, adicionaremos alguns grupos de formulários com as entradas para o nome, e-mail e a área de texto da mensagem e, em seguida, adicionaremos um botão Enviar na parte inferior. Vamos começar com o texto no topo. Vamos adicionar algumas tags p e, em seguida, o texto ou Envie-nos uma mensagem. Então logo abaixo, vamos adicionar a primeira div com a classe de form-group e esta é uma classe Bootstrap que estaremos usando para cercar as entradas livres. Então, para começar, vamos adicionar uma entrada com um tipo de texto e uma classe de controle de formulário, que também é uma classe Bootstrap. Em seguida, id do nome de entradas e, em seguida, o texto de espaço reservado simplesmente de nome e fechar. Então, em seguida, vamos adicionar um rótulo e este rótulo vai ser para os leitores de tela. Então vamos dar uma classe de sr-only. Para vincular este rótulo à entrada dentro da tag de abertura, podemos adicionar queda e, em seguida, combiná-lo com o id de entrada do nome de entradas. Em seguida, entre as etiquetas de rótulo, podemos adicionar o texto para aparecer de nome. Então, vamos copiar este formulário grupo e vamos usar isso para a seção E-mail e, em seguida, colar isso em abaixo. Então, dentro deste grupo de formulários, precisamos alterar a entrada para ser entrada-e-mail e o texto para ser e-mail e, em seguida, dentro das entradas, vamos alterar o nome de entrada para ser e-mail de entrada e o texto de espaço reservado para ser e-mail, e em seguida, cole no grupo de formulários mais uma vez. Então desta vez vai ser mensagem de entrada e o nome da mensagem. Em vez de usar a entrada, podemos simplesmente excluir isso e desta vez porque vai ser uma mensagem, podemos adicionar uma área de texto. Assim, a área de texto terá a classe de controle de formulário. O id da mensagem de entrada, que é o mesmo que o rótulo, e o texto do espaço reservado será igual a mensagem, e então o último atributo será o número de linhas que queremos aparecer como padrão. Então, eu vou definir isso para ser livre inicialmente. Em seguida, para fechar a seção de área de texto e, em seguida, logo após a área de texto, a última coisa que eu quero adicionar é a entrada para o botão Enviar. Entradas, então temos um tipo de enviar. Isso terá a classe familiar que usamos anteriormente de btn btn-default e isso terá os mesmos estilos que usamos nos botões na página de índice. Finalmente, o valor, que é o texto no botão, será Enviar e, em seguida, fechar e devo adicionar alguns comentários finais. Então logo acima da linha, esta é a tag de fechamento para a seção de 12 colunas. Então, logo acima disso, isso é para a classe do poço, então vamos salvar isso e verificar isso no navegador. Lá vamos nós. Então, há o nosso formulário na parte inferior da página. Então esse é todo o HTML que precisamos para a página Fale Conosco. Junte-se a mim no próximo vídeo e terminaremos a página de contato adicionando o CSS. 15. Página “Entre em contato conosco” — CSS: Bem-vindo ao último vídeo nesta seção de modelo Bootstrap. Adicionamos o HTML para a página Fale Conosco, em seguida, adicionaremos o CSS para torná-lo um pouco mais parecido com o projeto final. Então vamos para o nosso CSS personalizado. Se copiarmos os comentários e colarmos isso logo abaixo da seção Sobre Nós, chamaremos isso de seção Fale Conosco. Vamos dar a esta seção uma identificação de contato. Para começar, eu vou adicionar algum preenchimento na parte inferior da div de 30 pixels, apenas para dar-lhe algum espaço do rodapé. Nós também adicionaremos o text-align do centro, e isso irá certificar-se de que a imagem de divisão está no meio da página. Em seguida, começaremos na div esquerda. Então vamos começar adicionando algum estilo para a seção de endereço. Se voltarmos à página de contato, adicionamos uma classe personalizada de endereço. Esta classe estava rodeando toda a seção de endereços. Então, de volta ao CSS personalizado, podemos usar isso agora. Primeiro de tudo, vamos certificar-nos de que o texto está alinhado à esquerda. Vamos adicionar um pouco de espaço no topo, modo que é uma margem superior de 30 pixels. Para tornar o tamanho da fonte um pouco maior, nós apenas aumentamos o tamanho da fonte para 1,2 ems. Para espaçar as linhas, vamos definir a altura da linha para ser 2 ems. Vamos dar uma olhada e atualizar. Ok, então em seguida eu quero mudar a cor dos ícones para coincidir com o resto do site. Dentro da classe de endereço, podemos direcionar os ícones com o I. Então vamos mudar a cor dos ícones para 97689c. Vamos dar uma olhada nisso. Ok, bom. Isso mudou o ícone para a cor roxa mindinho. Está tudo bem por enquanto. Então a próxima coisa que eu quero fazer é combinar a margem de 30 pixels para que o iframe esteja alinhado na parte superior. Por enquanto, o iframe está se esticando um pouco grande demais, então vamos adicionar a largura máxima de 100 por cento para manter isso dentro do recipiente. Vamos selecionar o ID de contato e o iframe. Vamos combinar a margem superior da div esquerda com 30 pixels. Então o iframe não fica muito grande, vamos definir a largura máxima para ser 100 por cento. Vamos economizar e dar uma olhada nisso. Ótimo, então parece muito melhor. Agora temos os dois divs alinhados a partir do topo e também o iframe não se estica muito largo. Então a última coisa que eu quero mudar é apenas adicionar um pouco de preenchimento ou margem no topo da seção de mensagens, ele mantenha isso consistente com o resto do site. Vamos definir isso para 30 pixels. Então vamos dar a esta seção uma classe personalizada de área de mensagem. Nós só precisamos adicionar alguma margem no topo de 30 pixels e atualizar. Ótimo site, parece bom na vista da área de trabalho. Se reduzirmos o navegador até a visualização móvel, não há muito o que realmente precisamos fazer, há apenas uma coisa que eu quero mudar. Precisamos adicionar a linha de texto para estar no centro da visualização móvel. Então podemos fazer isso na consulta de mídia. Porque nós também temos a classe rodapé do centro text-align, nós poderíamos apenas adicionar isso no final. Então podemos adicionar nossa classe de endereço, e salvar e dar uma olhada nisso. Ótima. Então lá vamos nós. Então parece muito melhor. Agora que é o acabamento do modelo Bootstrap para nossos projetos, e esse é o final desta seção. Então, obrigado por ouvir. Se você se juntar a mim na próxima seção, podemos começar convertendo nosso modelo Bootstrap para WordPress. 16. Configuração do host local e instalação do WordPress: Bem-vindo de volta a esta nova seção quando eu entrar na parte emocionante do curso onde vamos começar a converter nosso modelo Bootstrap para um tema WordPress. Pouco antes de começarmos, [inaudível] precisaremos baixar um servidor web em nossa máquina. Para desenvolver sites WordPress em nossa máquina localmente, precisamos instalar um servidor web. Se você vai para MAMP, M-A-M-P, .info, e uma compilação para instalar a versão mais recente do MAMP. Se você apenas clicar no botão de download, isso está disponível gratuitamente no Mac e no Windows. Clique no botão de download para começar e, em seguida, baixe a versão mais recente lá. Até agora, estamos construindo nosso site no Bootstrap, que inclui HTML, CSS e JavaScript, todos executados no navegador. Não precisamos de ferramentas especiais para que o site apareça no navegador. Mas como estamos usando WordPress e WordPress é construído usando PHP e usa um banco de dados MySQL, precisamos instalar MAMP para criar um servidor local em nossa máquina. Isso nos permitirá construir sites WordPress sem tê-los ao vivo na internet. Basta pausar o vídeo por um minuto enquanto o download está sendo baixado e veremos você em um minuto. Bem-vinda de volta. Esperemos que você tenha agora MAMP baixado. Se apenas nos dirigirmos para nossos downloads e clicar duas vezes no instalador, isso deve levá-lo através do processo de instalação. Deve ser bastante semelhante no Mac e no Windows. Você deve obter o script de instalação. Se continuarmos e aceitarmos a licença e o acordo. Então vamos instalar para todos os usuários neste computador. Em seguida, clique em instalar, e não deve demorar muito para instalar, então nós apenas damos um momento para concluir a instalação. Temos um MAMP e o MAMP Pro foi instalado com sucesso. Só vamos usar a versão gratuita do MAMP. Isso é tudo o que você vai precisar para este curso, não precisamos pagar pela versão pro. Assim que terminar a instalação, basta clicar em Fechar. Agora temos o MAMP instalado. Se você estiver usando um Mac, se você acessar os aplicativos, ele deve ser salvo lá dentro. Se estiver a utilizar uma máquina Windows, esta deverá ser armazenada na sua localização habitual, como a Unidade C. Se passarmos ao MAMP e clicar duas vezes no MAMP com o ícone do elefante. Então você deve ter uma janela que se parece com esta. Se entrarmos nas preferências e, em seguida, clique na guia portas, as portas Apache, que é o servidor web é usado na porta 8888. Em seguida, se você clicar no servidor web. Por padrão, o caminho para a raiz do documento deve ser o htdocs. Se não estiver, basta clicar na pasta. Então, uma vez que você está na pasta, se você apenas encontrar o caminho para a unidade onde o MAMP está instalado. Então, se descermos para encontrar o MAMP e depois abrirmos. Em seguida, se você procurar a pasta htdocs, selecione-a. Qualquer site para o qual vamos usar o PHP, precisamos colocar a pasta do projeto no htdocs, mas vamos fazer isso em um pouco. Se começarmos clicando em iniciar servidores e espero que se tudo instalado bem, você deve obter a página inicial que lhe diz que MAMP foi instalado com sucesso. Ok, ótimo. Agora o MAMP está instalado. Se nos dirigirmos para o Google e se você procurar WordPress. Então, assim que for procurado, precisamos ir ao wordpress.org. Se você quiser dar uma olhada na página inicial do WordPress, sinta-se livre para fazer isso. Mas eu só vou clicar em baixar WordPress e depois baixar a versão mais recente, que é atualmente 4.3. WordPress não demora muito para instalar. Leva apenas cerca de 10 a 15 segundos se você tiver uma boa conexão com a internet. Uma vez que isso é baixado, podemos simplesmente nos livrar disso e, em seguida, ir para os downloads e, em seguida, clicar no arquivo zip WordPress e descompactar isso. Agora, esta é a nossa nova pasta de projeto para o nosso site. Vou renomear este tranqüilo-wp. Só para que não haja confusão, a pasta Bootstrap original, eu vou mudar isso para tranquil-bs. Então precisamos mover isso para o nosso htdocs. Só vou abrir uma nova janela. Então eu vou encontrar o htdocs. Se voltarmos para a pasta MAMP e, em seguida, para htdocs e, em seguida, arraste para htdocs a pasta WordPress. Agora temos o WordPress instalado em nossa raiz de documentos ou htdocs. Se voltarmos ao MAMP e, em seguida, clicar na página inicial aberta, isso deve nos levar de volta para a tela de boas-vindas do MAMP. Então, se clicar nas ferramentas na parte superior e clicar em phpMyAdmin. Isso deve nos levar para a área de administração para criar bancos de dados. Precisamos criar um novo banco de dados para WordPress. A maneira como fazemos isso, se selecionarmos a guia de bancos na parte superior e, em seguida, sob criar banco de dados, eu vou colocar nosso nome de banco de dados lá. Vou chamar o meu tranquil-spa, e depois clicar em criar. Depois, à esquerda, devemos colocar o banco de dados do tranquil-spa na lista. Em seguida, vamos criar um usuário para esse banco de dados. Em seguida, se vamos para as guias na parte superior da página e clique em privilégios e, em seguida, vamos selecionar o novo usuário, ou adicionar usuário, que está na parte inferior. Em seguida, podemos inserir as informações do usuário. O nome de usuário nos dará o campo de texto. Vou ligar para o meu usuário spa-admin. Em seguida, para o host, queremos selecionar local. Em seguida, você pode digitar a senha de sua escolha ou você pode gerar uma senha. Certifique-se, se você gerar uma senha, que você copiá-la. Vamos usar isso em um momento, e então rolar para baixo a página e clicar em Go. Há nosso usuário spa-admin criado. Então agora precisamos voltar para o WordPress e dizer ao WordPress informações do banco de dados e as informações do usuário que acabamos de criar. Fecharemos o navegador por enquanto e abriremos seu editor de texto. Então, se voltarmos para o htdocs onde salvamos nossa pasta tranquil-wp. Se você simplesmente arrastar isso para o editor de texto. Está configurado o banco de dados WordPress. Se entrarmos na pasta WordPress e selecionar wp-config-sample. Em seguida, podemos inserir as informações do nosso banco de dados. Role até o nome do banco de dados. Então você pode ver que só precisamos incluir nosso nome de banco de dados aqui. Apague isso. Chamamos nosso banco de dados de tranquil-spa, então tranquil-spa. Em seguida, abaixo do nome do banco de dados, podemos incluir o nome de usuário. Exclua o nome de usuário aqui. Chamamos nosso usuário spa-admin. Coloque spa-admin ou qualquer nome que você criou. A senha, que você deve ter copiado para a área de transferência. Podemos colar isso. Usamos o localhost, então podemos deixar o host como ele está. Em seguida, precisamos gerar as chaves em sais para a autenticação. Onde está o link do site, que nós apenas copiamos isso. Em seguida, vá para o seu navegador e cole isso. Isso deve gerar as chaves que são únicas. Selecione tudo na página e copie. Em seguida, substitua estes pelos que acabamos de copiar. Cole aqueles dentro Então a última coisa que precisamos fazer dentro deste arquivo é rolar para baixo até o final da página. Podemos alterar o prefixo da tabela do banco de dados do WP padrão. Vou mudar o meu para Tranquildb. Pode ser o que quiser, não importa. Guarde isso. Então a última coisa que precisamos fazer para este arquivo é remover a palavra de exemplo. Precisamos renomeá-lo wp-config.php. Certifique-se de que está salvo. Se você se lembra quando baixamos MAMP pela primeira vez, entramos nas preferências nas portas. Se você se lembrar que a porta era 8888. Podemos usar isso para entrar em nosso navegador. Se você entrar no navegador da web e, em seguida, digitar localhost, e, em seguida, dois pontos, e, em seguida, 8888 e, em seguida, entrar, isso deve dar-lhe um índice de todo o site que é armazenado dentro do htdocs. Por enquanto, só temos o tranquil-spa. Se clicarmos nisso, e esperamos que tudo tenha corrido bem para você, você pode obter o script de instalação do WordPress. É muito simples de acompanhar. Primeiro de tudo, precisamos selecionar nosso idioma, que meu é Inglês, Reino Unido e, em seguida, selecione continuar. Então só precisamos de um pouco de informação sobre o site. O título do site será Tranquil Spa. Eu já tenho meu nome de usuário salvo como tranquil_admin e, em seguida, criar uma senha. Tenha em mente que esta senha será diferente da sua base de dados. Isso vai ser para entrar no administrador do WordPress. Crie uma senha forte de sua escolha. Em seguida, digite um e-mail e, em seguida, privacidade, podemos desmarcar isso por enquanto. Podemos alterar isso mais tarde nas configurações uma vez que tenhamos terminado o site e, em seguida, clique em instalar WordPress. Lá vamos nós, ele começa WordPress instalado. Isso é o quão rápido e fácil é começar WordPress em sua máquina. Se você apenas ir para login e nós [inaudível] para ir para o painel de controle. Coloque o nome de usuário e a senha, e fomos levados para o painel do WordPress. Se você quiser verificar como o site WordPress está olhando até agora usando o tema padrão, podemos apenas clicar no ícone da casa Tranquil Spa na parte superior. Este é o nosso site, e este é apenas o tema padrão que vem com WordPress. Lá vamos nós, que é WordPress agora instalado. Obrigado por assistir, e veremos você no próximo vídeo onde começaremos a importar nossos arquivos Bootstrap para o WordPress. 17. Pasta de temas do WordPress: Ok. Agora temos nosso host local e WordPress todos instalados. Agora vamos começar a trabalhar na importância das pastas de bootstrap em nosso tema personalizado. Se voltarmos para a pasta MAMP e, em seguida, sob os documentos HT, podemos encontrar nossa pasta tranquilwp. Abra isso. Estes são todos os arquivos e pastas incluídos no WordPress por padrão. A maior parte do trabalho que vamos fazer para o tema personalizado será dentro do Conteúdo WP e, em seguida, dentro da pasta temas. Dentro da pasta temas, há os temas padrão que estão incluídos no WordPress. 2015 é o mais atual. Isso é um que vemos quando abrimos nosso site antes. Dentro da pasta de temas, vamos começar com o nosso tema personalizado. Se fores para a pasta nova, vou chamar isto de tranquilwp. Se abrirmos a pasta tranquilwp e também nossa pasta bootstrap, podemos começar a colocar em algumas das pastas em nosso tema personalizado. Eu só vou selecionar todos os arquivos por agora e copiar, e depois colá-los em nossa pasta. Nós não precisamos sobre o blog ou a página de contato apenas por agora. Eu só vou me livrar deles. A página de índice, precisamos alterar isso para index.php para que o WordPress o reconheça. Nós usamos uma extensão PHP lá. Precisamos manter as imagens, o JavaScript, o CSS na pasta de fontes. Mas dentro da pasta CSS, precisamos mover nosso arquivo CSS personalizado e vamos precisar movê-lo para estar no mesmo nível que nossa página de índice. Se selecionarmos o CSS personalizado, e ele moveu para cima um nível, e com a página de índice nas pastas, porque é aí que o WordPress exige que o CSS esteja. Além disso, ele requer style.css, em vez do personalizado. Vamos mudar isso para style.css. Além de ser nossa folha de estilo personalizado em nosso style.css, também podemos incluir algumas informações importantes WordPress sobre o nosso tema. Se voltarmos ao nosso editor de texto, talvez seja necessário atualizar porque alteramos alguns dos arquivos e pastas. No tranquilwp, se formos para conteúdo, temas e depois tranquilwp, podemos então encontrar a folha de estilo que acabamos de renomear. Bem no topo da página, se fizermos algum espaço, precisamos voltar para o navegador da web. Então vá para o Google. Só vou fazer uma busca. Se você procurar por codex, codex é basicamente a documentação do WordPress. Nós estamos usando isso bastante nesta seção, para encontrar muitas informações como funções PHP. Por enquanto, se você apenas procurar as folhas de estilo do tema do códice, por isso é um link superior que precisamos, mas se você apenas clicar no salto para a folha de estilo do tema, e isso vai saltar para a parte da página que precisamos. Sob o título folha de estilo tema, WordPress nos dá uma amostra do comentário que ele precisa incluir na parte superior do style.css. Vamos copiar essa amostra e, em seguida, colá-la na parte superior da nossa folha de estilos. Vamos nos livrar dessa barra lateral e podemos começar a editar as informações. Bem no topo, sob o nome do tema, vamos colocar o nosso nome do tema que é WP tranquilo. Em seguida, o site tema. Você pode colocar lá o que quiser, por enquanto. Você só quer colocar algo genérico lá, por enquanto. tranquilspatheme.com. No autor, você coloca seu nome ou o nome de sua empresa. Se você tem um site, você também pode colocar isso lá. Então você pode colocar em uma descrição para o tema. Eu só vou colocar em um tema spa WordPress totalmente responsivo, construído usando Bootstrap 3. Lá vamos nós. A versão, podemos deixar em 1.0, e a licença podemos deixar. Vamos mudar algumas das etiquetas. Agora, tenha em mente que as tags que foram colocadas na folha de estilo, não podemos simplesmente colocar em qualquer tag que escolhermos. Eles têm que ser tags aprovadas pelo WordPress, que você pode encontrar no códice. Por enquanto, vou apenas adicionar a barra lateral direita. Em seguida, estes são separados por vírgulas. Layouts responsivos, cabeçalho personalizado e menu personalizado, imagens em destaque. Então, no final, a tradução realmente. Agora, alguns desses, você pode não entender o que eles são, mas à medida que passarmos pelo curso, você entenderá cada vez mais o que cada um deles é. Vamos adicionar coisas como imagens em destaque e estamos preparando o tema para que as pessoas traduzam em diferentes idiomas, se quiserem. O domínio de texto, vamos torná-lo o mesmo que o nome do nosso tema. Isso vai ser tranqüilwp. Usaremos isso mais tarde neste curso quando estivermos preparando o tema para tradução. Podemos apagar as informações na parte inferior. Lá vamos nós. Isso é tudo o que precisamos incluir na folha de estilo por enquanto. Guarde isso. Se voltarmos para a nossa pasta de temas, que está nos documentos HT, em seguida, abri-lo, e, em seguida, ir, novamente, para o conteúdo WordPress, temas e tranquilwp. A última coisa que precisamos fazer antes de ativar o nosso tema no WordPress é, se formos para a pasta de imagens em nosso tema personalizado, se localizarmos o screenshot.png, precisamos mover isso acima de um nível para o mesmo como movemos nossa folha de estilo para antes. Em seguida, se vamos para o nosso navegador da web e, em seguida, de volta para o nosso painel WordPress. Se formos para o Spa Tranquil no canto e passar o mouse sobre e, em seguida, clique no painel. Basicamente, o painel é realmente simples de usar. No lado esquerdo, temos uma lista de todos os links onde podemos adicionar vários posts, páginas. Podemos mudar coisas como os temas. Se você descer até a aparência e selecionar temas, como você pode ver, ativo é o tema 2015, mas queremos usar o tema Tranquil Spa que acabamos de criar. Se tudo correr bem, você deve ver seu tema aparecendo nesta página e, em seguida, clique em Ativar. Lá vamos nós. Agora, se clicarmos no ícone Início no canto superior esquerdo, no site de visita, espero, que tudo correu bem para você, e seu tema deve agora ser ativado. Como você pode ver, está tudo funcionando, mas ainda há muito trabalho que precisa ser feito para torná-lo parecido com o nosso modelo Bootstrap. Vamos começar adicionando algumas das pastas que precisamos. De volta à nossa pasta de temas, nos documentos HT, uma coisa que você pode querer fazer é configurar um atalho em sua área de trabalho, ou se você estiver usando um MAC, você pode adicionar uma das tags coloridas para que você não precise ir através do processo de encontrar cada vez. MAMP e, em seguida, os documentos HT, tranquilwp, conteúdo, temas, e depois tranquilwp. Para esta pasta tranquila, eu só vou criar a tag azul, então eu posso apenas selecionar o azul e encontrá-lo muito mais rápido. Se você estiver usando um computador Windows, talvez queira salvar um atalho na área de trabalho. Precisamos adicionar mais alguns arquivos básicos em nossa pasta. Se passarmos para colchetes e abrirmos a barra lateral, pressionarei Command e N para criar uma nova página. A primeira página que precisamos adicionar é o header.php. Basta salvar isso como header.php, e certifique-se de que está incluído em nosso tema personalizado, juntamente com a página de índice. Vamos guardar isso por enquanto, e depois outra página nova. Salve isso como footer.php. Então só mais dois para criar. O próximo será para a barra lateral, e vamos salvar o sidebar.php. Vou usar um atalho desta vez, e guardá-lo com a página de índice. Então, por último, o último arquivo que vamos salvar é para as funções, então uma nova página e salve isso como functions.php. Novamente, certificando-se de que está no local certo. É isso por enquanto. Vejo-te no próximo vídeo. 18. Página de índice: Está bem. Bem-vinda de volta. Neste vídeo, vamos estar olhando para a página de índice e vamos começar a reorganizar o cabeçalho e o rodapé, e também adicionar algum conteúdo ao nosso arquivo de funções. Está bem. Então, algumas coisas antes de começarmos. Se você se certificar de que o MAMP, que você baixou no último vídeo está funcionando. Então, se você disser iniciar servidores, certifique-se de clicar neles para começar. Em seguida, no editor de texto, se você abrir o tranquilwp, que é a pasta de temas para o projeto, e, em seguida, vá para o navegador da Web e, em seguida, se você digitar o host local ,:8888 e, em seguida, barra tranqüil-wp, e isso nos levará para a página de índice que precisamos começar a trabalhar. Se você precisa voltar para o painel do WordPress, precisamos apenas adicionar /admin no final da URL, e isso nos levará de volta ao painel. Está bem. Então vamos começar. No editor de texto, criamos nosso cabeçalho e os arquivos de rodapé no último vídeo. Então, vamos colocar o cabeçalho e o rodapé nesses arquivos. Então vamos pegar o cabeçalho e o rodapé da página de índice. Então, se você for para o index.php e, em seguida, rolar para o topo da página, precisamos copiar ou citar todo o conteúdo do topo da página web, todo o caminho para baixo até chegar à tag de cabeçalho de fechamento, que está apenas lá. Então copie todo esse direito para o topo e, em seguida, corte isso, e agora a seção de cabeçalho vai para o seu próprio arquivo, que é o header.php. Então cole isso lá e salve, e então se voltarmos para a página de índice, faremos exatamente o mesmo com a seção de rodapé. Então, role para baixo até a parte inferior da página e, em seguida, abaixo da seção de compras on-line, se você olhar para o comentário de rodapé e, em seguida, cortar todo o conteúdo direto para o final da página de índice. Então corte isso e, em seguida, vá para o footer.php, e cole isso e salve. Está bem. Então, se voltarmos para o index.php. Então o que nos resta é apenas o conteúdo principal da página web. Tiramos o cabeçalho e a seção de rodapé. Então, porque agora o cabeçalho e o rodapé estão em seus próprios arquivos, precisamos vinculá-los de volta à página de índice. Não é muito simples de fazer. Se voltarmos para o topo onde a seção de cabeçalho estava, vamos começar a usar algum PHP. Então, para começar com PHP, primeiro de tudo precisamos ter o nome do arquivo com a extensão PHP, e então para usar o PHP na página, usamos um colchete angular de abertura e, em seguida, um ponto de interrogação, e depois PHP. Então esta é a tag de abertura e a tag de fechamento é o ponto de interrogação e, em seguida, o colchete de ângulo de fechamento. Está bem. Em seguida, entre o suporte de abertura e fechamento, usamos a função de cabeçalho do WordPress get. Então get_header. Porque é função, usamos os colchetes e, em seguida, um ponto-e-vírgula no final, e então fazemos exatamente o mesmo, mas usamos obter rodapé na parte inferior da página. Então, novamente, vamos usar as tags de abertura e fechamento do PHP, e, em seguida, dentro das tags, usamos uma função de rodapé do WordPress get, os colchetes e, em seguida, o ponto-e-vírgula. Então efetivamente o que criamos é um cabeçalho e um modelo de rodapé, e toda vez que queremos reutilizá-los no WordPress, vez de redigitar sobre o mesmo código uma e outra vez, podemos simplesmente usar o PHP e usar o cabeçalho get ou a função get rodapé. Então, e salvar a página de índice, e em seguida, precisamos ir para o nosso functions.php, e porque todas as funções vão estar em PHP, precisamos ter certeza de que todo o conteúdo desta página está entre a abertura e fechando tags PHP. Então vamos começar criando uma função PHP. Se você não usou o PHP antes, ele usa a palavra-chave function. Uma função é basicamente apenas um pedaço de código que damos um nome para, e podemos chamá-lo quando precisamos dele. Então, para configurar isso, use a função e, em seguida, o nome depois, que é tranquilwp_setup, e, em seguida, no final do nome da função, usamos os colchetes, e, em seguida, usar um conjunto de chaves, e todas as informações que colocamos entre as chaves vai ser o código que é executado quando o tema é configurado. Então, vamos adicionar mais a isso mais tarde, mas por enquanto vamos apenas adicionar algum suporte a temas para RSS ou arquivos automáticos. Então nós fazemos isso por add_theme_support, e nas aspas, digite automatic-feed-links, e então um ponto-e-vírgula no final, e certifique-se de que é o feed lá. Então certifique-se de que a informação RSS chegue à seção principal corretamente. Vamos adicionar suporte a temas também para a tag título, e isso permite que temas e plug-ins acessem o título do documento, para que possamos alterá-lo dinamicamente. Então add_theme_support, e não se esqueça das citações lá. Esta vai ser a etiqueta de título. Então tag title-tag. Então, em seguida, precisamos dizer ao WordPress para executar esta função ao configurar o tema. Então, se formos para fora das chaves e, em seguida, precisamos adicionar uma ação e o colchete, e, em seguida, o ponto-e-vírgula no final. Isso vai levar em dois parâmetros. Então o primeiro entre aspas é depois _setup_theme, e depois separado por uma vírgula, precisamos colocar o nome da função, que é configuração tranquilwp. Então nós vamos apenas copiar isso e colar isso entre as aspas. Só mais uma parte do PHP que precisamos adicionar no arquivo de funções antes de seguirmos em frente, é se formos até o topo. Está bem. Então vamos usar uma instrução if PHP. Então, se você não viu um desses antes, é realmente nada para se preocupar. Então eu vou começar digitando e depois conversaremos sobre exatamente o que está acontecendo. Então vamos apenas verificar se uma condição é atendida, e se for, executamos o pedaço de código entre essas chaves. Então o pedaço de código que queremos executar é que queremos adicionar uma variável chamada largura de conteúdo, e isso vai ser definido como 660 pixels. Este valor vai controlar a largura máxima de qualquer pedaço de conteúdo que está no tema WordPress, e nós usá-lo para garantir que o usuário não pode fazer upload de algo como uma imagem que é muito grande para o design e causa problemas de layout e, em seguida, colocaremos nossa condição entre os colchetes na parte superior. Então eu vou usar o ponto de exclamação e, em seguida, isset e, em seguida, entre mais dois colchetes, vamos colocar nossa variável que é a largura do conteúdo. Então esta instrução if normalmente verificaria se esta variável existe usando isset, mas porque estamos usando o ponto de exclamação antes dele, ele está verificando o oposto. Portanto, se a largura do conteúdo da variável não estiver definida, use a variável entre essas chaves e certifique-se de que o conteúdo não tenha mais de 660 pixels de largura. Está bem. Então, essas são as funções terminadas para este vídeo. Vamos adicionar mais a isso à medida que avançamos no curso, mas só mais uma coisa que eu quero mostrar antes de terminarmos este vídeo é agora vamos voltar para o nosso PHP para o nosso site. Precisamos ter certeza de que a depuração está habilitada, e eu vou mostrar exatamente o porquê. Se formos para o Chrome e, em seguida, visitarmos o site, é assim que o site está olhando agora, ele não parece muito bonito, mas está funcionando. Então, se formos para nossa página de índice e então cometemos um erro de digitação, então, por exemplo, se formos para o PHP no topo da página, e por exemplo, se não estivéssemos colocando a tag de fechamento após o PHP, e então se atualizarmos o navegador, você pode ver que temos uma tela branca. Então, porque temos uma tela branca em branco, sabemos que cometemos um erro em algum lugar, mas não temos nenhuma indicação para nos mostrar exatamente onde erramos. Então, para nos dar uma indicação de exatamente qual linha de código nós erramos, precisamos ir para a nossa pasta WordPress, que está no htdocs. Então encontramos MAMP, htdocs, tranquilwp, e então precisamos voltar para o arquivo de configuração, onde vemos nossas informações de banco de dados. Então, basta clicar duas vezes para abrir isso, e, em seguida, se você rolar para baixo todas as informações de senha e banco de dados, e, em seguida, as chaves e sais. Bem na parte inferior da página, se você procurar a depuração definir WP, por padrão, isso é definido como false. Então vamos definir isso como verdadeiro, e então salvar isso, mas não se esqueça de alterá-lo novamente para false se você estiver carregando isso para um servidor web. Então salve isso e atualize no Chrome, e então isso nos dará uma linha de erro, e isso nos dirá exatamente onde erramos. Então, em nossa página de índice na linha três. Vamos dar uma olhada. Assim, podemos ver que o problema estava na linha um, mas o WordPress não descobriu que havia um problema até que ele encontrou algum HTML na linha três. Portanto, pode não estar exatamente na linha, mas dá uma boa indicação exatamente onde está o problema. Então podemos simplesmente fechar o PHP, salvar e depois atualizar, e tudo deve estar funcionando novamente. Está bem. Então esse é o fim deste vídeo. Vejo-te no próximo vídeo. Vamos começar a trabalhar no cabeçalho e no rodapé. 19. Cabeçalho e rodapé: Agora, vamos fazer nossa seção de cabeça e rodapé mais dinâmico, WordPress amigável. Voltar para um editor de texto se você for para o arquivo header.php. No momento, só temos HTML estático. Vamos querer tornar isso dinâmico adicionando algumas funções do WordPress e alguns PHP. Vamos começar fazendo a linguagem dinâmica. Ao invés de ter a linguagem no topo, vamos abrir as tags PHP exatamente da mesma maneira que tínhamos feito antes. Então, dentro do PHP, vamos adicionar language_attributes, e então porque é uma função, usamos os colchetes e o ponto-e-vírgula, e isso permite que o WordPress adicione a linguagem dinamicamente, e em seguida, vamos adicionar o conjunto de caracteres dinamicamente. Em vez de ter o conjunto de caracteres igual a UTF-8, podemos permitir que o WordPress faça isso dinamicamente. Novamente, as tags de abertura e fechamento do PHP. Agora, se você quiser copiar estes e colá-los em vez de redigitar você pode fazer. Vou usar a função bloginfo e, em seguida, dentro dos colchetes e, em seguida, adicionamos o conjunto de caracteres entre as cotações e, em seguida, um ponto e vírgula no final. Agora, tenha cuidado ao digitar as funções PHP para fora porque como você viu no último vídeo com a depuração, se nós apenas temos um caractere digitado errado ou fora do lugar, as chances são que você vai ter uma tela branca, então tenha cuidado com isso, e em vez de nosso título estático Tranquil Spa, vamos mudar isso para permitir que o WordPress inclua isso. Novamente, entre as tags PHP, podemos adicionar o título WordPress com wp_title, e, em seguida, dentro dos colchetes, basta deixar as aspas vazias e, em seguida, o ponto-e-vírgula no final e, em seguida, role para baixo pouco antes da cabeça de fechamento logo no final lá. Se nós apenas encontrar a linha um pouco antes, e então eu não vou incluir a função wp_head, que basicamente permite que o WordPress adicione scripts para dados de volta para a seção de cabeça quando ele precisa. Novamente, entre as tags PHP digitando wp_head, então os colchetes e o ponto-e-vírgula. Em seguida, na tag corpo de abertura, podemos adicionar a classe corpo WordPress. Entre o PHP, usamos a função body_class, e os colchetes e o ponto-e-vírgula, e então WordPress irá adicionar o body_class na seção direita. Vamos rolar para baixo até a seção de cabeçalho. A próxima coisa que vamos mudar é o Spa Tranquil. O link Tranquil Spa é aquele no canto superior esquerdo da página inicial, que é nossa seção de logotipo e nosso link de volta para a página inicial. Há duas partes do PHP que precisamos incluir aqui. Só vou me livrar da barra lateral por enquanto, só para nos dar mais espaço. Primeiro de tudo, precisamos mudar o nome do site, que é Tranquil Spa. Precisamos incluir o PHP para tornar este nome dinâmico. Cole as tags de abertura e fechamento do PHP, e eu vou colocá-lo em uma linha separada apenas para que fique mais claro. Lá vamos nós. Entre o PHP. PHP usa o nome do eco para ecoar o conteúdo do navegador, e então usamos a função WordPress de get_bloginfo. O bloginfo que queremos é o nome do site. Coloque o nome lá e o ponto-e-vírgula no final. Agora, WordPress é geralmente em nome do nosso site, que é Tranquil Spa. Esse será o texto que aparece no canto superior esquerdo, onde o logotipo está. Mas precisamos fazer deste texto um link ativo. Porque não temos mais um index.html, porque estamos usando PHP. Precisamos dizer ao WordPress para vincular este nome de volta ao nosso home_url. Novamente, vamos fazer isso entre as tags PHP e, em seguida, echo. Há algumas maneiras diferentes de fazer isso no WordPress. Mas eu vou usar o URL de escape, que limpa o URL e certifique-se de que não há nenhum código malicioso lá. Echo esc_url. Então, nos colchetes depois, vamos colocar o link para o home_url. Em seguida, os colchetes de abertura e fechamento novamente e, em seguida, o ponto-e-vírgula. Aqui estão as nossas duas peças do PHP. O primeiro fornece o link para o home_url, e o segundo fornece o nome do site. Em seguida, volte para a seção da cabeça. Nós vamos adicionar os links CSS de uma maneira ligeiramente diferente. Se excluirmos o link para o CSS personalizado e também o CSS Bootstrap. Vamos adicioná-los de volta no arquivo de funções em apenas um momento. Salve isso e, em seguida, abra nossa barra lateral e vá para o footer.php. Não precisamos de muito para lidar com o rodapé. Uma das coisas que queremos mudar é o ano. Como queremos que isso mude dinamicamente a cada ano, podemos adicionar algum PHP ao fundo daqui. Ao invés de ter 2015 hard-code, podemos ecoar para o navegador a data. Então entre parênteses, podemos colocar o Y maiúsculo, que é a maneira como o PHP adiciona o ano. Usando PHP, você também pode adicionar os dias e os meses em vários formatos. Analisaremos isso com mais detalhes quando fizermos as postagens do blog. Em seguida, à direita na parte inferior da página, e logo antes da tag de fechamento do corpo. Aqui, vamos adicionar outra função PHP, que é o wp_footer. Isso permite que o WordPress adicione dados com script à seção de rodapé. Guarde isso. Em seguida, podemos excluir o JavaScript Bootstrap. Vamos vincular isso com o CSS no arquivo de funções. Como o WordPress já vem com jQuery, podemos excluir isso também. Amarre isso um pouco e depois aperte “Salvar”. Agora, nós tiramos o CSS da seção de cabeçalho e os scripts da seção de rodapé. Precisamos permitir que o WordPress os adicione de volta ao site. Vamos fazer isso da maneira que o WordPress recomenda, enfileirando os scripts. A maneira como fazemos isso é se formos para o functions.php. Se você for para a seção inferior após o add_action, certifique-se de que você ainda está dentro das tags PHP. Vamos criar uma nova função PHP. Este vai ser chamado tranquil_scripts. Em seguida, os colchetes e, em seguida, as chaves. Basta adicionar um comentário aqui para sabermos exatamente o que estamos fazendo. Esta seção vai adicionar os estilos para a função. Para adicioná-los corretamente de volta ao tema, precisamos usar o WordPress ou wp_enqueue_style. Então, dentro dos colchetes, e também entre as aspas, vamos dar um nome à primeira folha de estilo. Este é o bootstrap-core, então separado por uma vírgula. O segundo parâmetro que precisamos incluir é o caminho do arquivo para o CSS Bootstrap. Vamos adicionar isso no WordPress. Nós digitamos get_template_directory_uri e, em seguida, os colchetes. Em seguida, adicionamos o caminho do arquivo usando o ponto. Em seguida, dentro das aspas, adicionamos o link ao nosso arquivo bootstrap, então /css/bootstrap.min.css. Em seguida, um ponto-e-vírgula no final. Vamos nos livrar de uma barra lateral por enquanto. Aqui, estamos dando um nome à folha de estilo. Em seguida, estamos adicionando o diretório de modelos. Em seguida, adicionando ao diretório de modelo, o caminho do arquivo para o CSS. Porque temos um CSS Bootstrap e também temos o CSS personalizado. Podemos simplesmente copiar isso e depois colá-lo diretamente abaixo. Só precisamos mudar o nome e o caminho do arquivo. Isto é para o nosso ficheiro personalizado. Em seguida, também incluímos get_template_directory. Então precisamos mudar o caminho do arquivo. Como nossa folha de estilo personalizada está em uma raiz de documento em vez da pasta CSS, podemos apenas alterar isso para style.css. Então fazemos uma coisa muito semelhante para adicionar os scripts de volta. Adicione comentários de adicionar scripts. É JavaScript de volta, ele funciona de forma semelhante à folha de estilo. Nós apenas copiamos este link e colamos. Mas desta vez, em vez do estilo de enfileiramento, enfileiramos o script. Em seguida, adicionamos o nome do início. Vou chamar isso de “bootstrap-js”. Usamos get_template_directory da mesma maneira. Mas desta vez o caminho do arquivo está em nossa pasta JS. Não se esqueça da barra antes. Então precisamos vincular isso à versão minificada de bootstrap. Bootstrap.min.js. Isso substitui o JavaScript da seção de rodapé. Depois disso, adicione uma vírgula. Incluímos o nome do script, a origem do script. Agora, em seguida, precisamos incluir quaisquer dependências. Agora, como Bootstrap requer jQuery, precisamos ter certeza de que jQuery carrega antes do Bootstrap. Fazemos isso adicionando uma matriz. Então, entre colchetes, colocamos o nome da dependência, que é jQuery, separado por vírgula. O último valor que vou colocar é um booleano de verdade. Isso habilita o link com script para a seção de rodapé. No footer.php, incluímos a função wp_footer. Como adicionamos isso em, WordPress sabe exatamente onde adicionar o script agora. Agora, esta função está toda configurada. Precisamos fazer algo parecido com o que fizemos no início. Para a configuração do tema, precisamos adicionar a ação. Fora da função, abaixo da última chave, podemos colar no add_action e substituir after_theme_setup, temos wp_enqueue_scripts. Então o segundo parâmetro é o nome da nossa função, que é tranquil_scripts. Podemos copiar isso e colá-lo e salvar isso. Como você tem a depuração para ser habilitada, se atualizarmos o navegador, esperamos que não tenhamos problemas. Você pode começar a ver que algumas coisas estão mudando. Temos algumas cores aparecendo, que significa que o CSS personalizado deve ser vinculado corretamente. Além disso, o CSS Bootstrap deve ser vinculado corretamente. Porque você pode ver que o sistema de grade, como as seções livres, está configurado corretamente. Estamos perdendo as imagens, mas cuidaremos delas em breve. Isso não é nada para se preocupar. Por fim, se reduzirmos o navegador para um tamanho menor, para o tamanho do celular ou tablet, podemos verificar se o JavaScript está funcionando clicando no botão suspenso. Se está tudo funcionando bem para você, isso é ótimo. Se você tiver um menu suspenso, isso significa que o JavaScript está funcionando. Parabéns por chegar até aqui, e eu vou vê-lo no próximo vídeo, onde vamos adicionar a navegação WordPress. 20. Menu do WordPress usando o NavWalker: Bem-vinda de volta. Neste vídeo, vamos concentrar-nos em abrir e correr a nossa navegação. Como WordPress e Bootstrap usam diferentes classes personalizadas para a configuração do menu, precisamos incluir uma maneira de converter nossas classes Bootstrap para WordPress. Agora, felizmente, alguém já criou uma ferramenta útil chamada Bootstrap nav walker. Se você passar para o Google e tem uma pesquisa para Bootstrap navwalker, então você deve obter o primeiro link, que é a página do GitHub e você pode ver que nav walker é uma classe de andador de navegação WordPress personalizada para implementar o Twitter Bootstrap em nossos temas personalizados WordPress. Podemos começar apertando o botão “Download”. Ele deve baixar muito rápido, é apenas um arquivo zip. Então, se você descer para a instalação, a instalação é bastante simples de seguir. Começamos copiando a função. Então nós copiamos isso, e então vamos para o functions.php. Isso vai ser incluído dentro da função tranquilwp_setup. Logo abaixo da função title-tag, cole isso. Isso inclui o arquivo navwalker em nosso projeto. Voltar para o navegador. Em seguida, para o uso, copie a matriz nav walker e, em seguida, vá para um editor de texto no header.php. Ele localizará a navegação. Precisamos encontrar a navegação principal que está na página inicial, que tem os links para a página de índice, o blog, e também as últimas notícias. Precisamos substituir a lista completa não ordenada. Então, podemos excluir toda esta seção. Mas certifique-se de deixar a div circundante com a classe fora do colapso. Em seguida, cole na matriz entre essas tags. Vamos amarrar isso um pouco. Esta matriz formata corretamente o nosso tema WordPress para incluir um menu suspenso bootstrap. Podemos deixar todos os padrões como eles estão no lado direito. A única coisa que precisamos mudar é a classe do menu. Nossas classes de menu bootstrap quando nav, navbar-nav, e, em seguida, também navbar-direita, porque nosso menu estava alinhado à direita. Tudo o resto podemos deixar como padrão. Em seguida, volte para o navegador. Em seguida, precisamos registrar o menu. Copie o register_nav_menus e, em seguida, em functions.php, logo abaixo onde incluímos o link do andador de navegação. Logo abaixo disso, podemos colar isso lá. Isto registra a navegação com o tema. Nós apenas amarrar isso e, em seguida, mudar o THEMENAME para tranquilwp e salvar isso. Isso define o menu com o link inicial e os links do blog na parte superior da página para ser o nosso menu principal. Voltaremos a isso mais tarde no curso e registraremos os menus de fotos. A última coisa que precisamos fazer é esperar que isso seja baixado para você agora, vá para seus downloads e então descompacte o pacote que acabamos de baixar, e abra. Então precisamos arrastar o arquivo PHP para um tema personalizado. Em seguida, abra também sua pasta de tema e arraste dentro da pasta PHP e cole-a no diretório raiz, o mesmo que a página de índice. Vou fazer isso agora. Isso deve estar funcionando. Se formos para o editor de texto e, em seguida, salvar isso, e, em seguida, no Chrome e no WordPress e, em seguida, atualizar o WordPress. Então podemos criar o nosso menu principal. No painel do lado esquerdo, vá para a aparência e, em seguida, os menus. Em seguida, crie um menu e altere o nome do menu para Menu Principal. Em seguida, role para baixo quando estiver marcada as duas caixas na parte inferior e isso garante que o menu principal é o menu principal e também que as novas páginas que criamos são adicionadas automaticamente ao menu. Guarde isso. Então vamos visitar o site e ver se o menu está funcionando bem. Nosso menu está funcionando. Podemos ver que apareceu no topo da página. Só temos o link Página inicial e Página de amostra por enquanto porque não criamos o blog ou a seção mais recente. Mas isso é bom. Isso significa que tudo está funcionando corretamente. É isso, vamos deixar este vídeo por enquanto. Vejo você no próximo vídeo. Vamos corrigir todos os links para as imagens. 21. Caminhos de arquivo de imagens: Nosso tema WordPress personalizado, ele está começando a tomar forma agora. Um dos principais problemas que podemos ver é que as imagens que incluímos no modelo Bootstrap não estão aparecendo no site WordPress. Precisamos consertar isso agora. Para começar, a maioria das imagens está na página de índice. Nós nos dirigimos para index.php. Para que as imagens apareçam, precisamos alterar corretamente o caminho do arquivo. O primeiro está na seção “Bem-vindo”, e este é o divisor roxo. Dentro da fonte da imagem, vamos começar as tags php, as tags de abertura e fechamento. Em seguida, usamos a mesma função que usamos para incluir o caminho do arquivo para o CSS. Então echo esc_url. Em seguida, entre colchetes, vamos get_the_templates_directory_uri e, em seguida, um par de colchetes. Certifique-se de colocar o ponto-e-vírgula no final novamente. Abra a barra lateral. Estamos recebendo o uri do diretório de modelos, que é a nossa pasta de temas. Em seguida, incluiremos na pasta “Imagens”, que está no Diretório Raiz. Certifique-se de que você tem uma barra logo antes de lá porque isso não é adicionado automaticamente. Vamos guardar isso e verificar se está funcionando antes de prosseguirmos. Lá vamos nós. Aí está a nossa imagem roxa. Vamos apenas “Copiar” isso para economizar muita digitação. Se apenas copiarmos tudo da barra antes pasta de imagens até a tag Opening php, e então descer para a seção Facilidade, e então apenas “Colar” isso antes de cada uma das imagens. A maquiagem, as velas, a imagem do lago e a piscina. Então temos a imagem prateada na seção Últimas Ofertas. “ Colar” isso e role mais para baixo para ver se há mais que precisamos mudar. Há mais uma imagem na seção Shop Online. Vamos salvar isso e ver como isso está olhando e “Atualizar” o navegador. Estamos chegando a algum lugar agora. Isso parece melhor. Precisamos incluir a imagem de fundo principal, mas isso está no cabeçalho. Faremos isso agora. No header.php, role para baixo até a seção de recursos e “Colar” que na frente da imagem à beira do lago e, em seguida, salve e atualize isso. Bom. Estamos chegando a algum lugar agora. Vamos rolar para baixo até a seção de rodapé. Há apenas algumas imagens que precisamos incluir na seção Rodapé, que é a imagem divisória e também a imagem de fundo “Shop Online”. O footer.php, em seguida, role para cima para o divisor. “ Colar” isso e “Salvar”, em seguida, “Atualizar”. Diz: “Uma imagem de divisão.” Então é apenas a imagem da seção “Comprar Online” e adicionamos isso como uma imagem de fundo no CSS. Vá para o “Style.css” e, em seguida, role para baixo até a seção Shop Online. Para que isso funcione corretamente no WordPress, precisamos excluir a barra e os dois pontos. Salve isso e atualize. Essa é a imagem que apareceu em segundo plano, que precisamos ter certeza de que o botão “Comprar on-line” está abaixo do divisor. Acho que estamos perdendo uma etiqueta de quebra. De volta à página de índice, temos o título e a imagem divisória, e depois o botão logo depois. Eu só vou adicionar quebra tag para lá e, em seguida, atualizar, e espero que isso deve funcionar. Isso é ótimo. Lá vamos nós. Isso está funcionando perfeitamente agora. Acho que são todas as imagens cobertas na página de índice. Vou rolar para cima e para baixo e ver se falta alguma coisa. Ótimo. Nossa página inicial agora parece o que deveria fazer. Temos todas as imagens agora no lugar e ele se parece exatamente com o modelo Bootstrap que criamos. Obrigado por assistir e nos vemos no próximo vídeo. 22. Criando a front-page.php: Bem-vindos de volta a todos. Neste vídeo, vamos estar dando uma olhada em como WordPress lida com modelos e sistema de hierarquia para selecionar qual modelo usar. Nós dirigimos para o Google e procuramos a hierarquia de modelos WordPress. O primeiro link que surge deve ser aquele que você precisa. Se selecionarmos isso, então nós seria levado para o site WordPress e se nós apenas rolar para baixo, podemos encontrar a lista dos modelos que WordPress reconhece e eu vou dar-lhe uma idéia de como WordPress usa isso. Há um diagrama visual que vamos dar uma olhada em apenas um momento. Mas se percorrer um pouco mais abaixo na página, podemos descobrir mais alguns detalhes sobre como o WordPress lida com modelos. Por padrão, o WordPress usa a primeira página ou a página inicial para exibir as últimas postagens do blog e isso não é realmente o que queremos para este design. Em nosso design Bootstrap, temos uma primeira página e, em seguida, mantemos nossa postagem de blog separada em sua própria página de blog. Precisamos mudar o nosso tema WordPress, precisamos usar o front-page.php como nossa nova página inicial. Neste vídeo, tomaremos o conteúdo da página de índice e criaremos o front-page.php. Em seguida, usaremos nossa página de índice para ser a página padrão para exibir postagens de blog ou conteúdo WordPress. rolar para baixo, você terá uma ideia de alguns dos modelos que estamos construindo neste curso. Há um modelo para o único post que tem a página de índice como um modelo de fallback se nenhum deles existir, nós também vamos criar um modelo de página que WordPress irá usar se ele não pode encontrar um modelo mais específico. Novamente, se nenhum desses pode ser encontrado, ele irá retornar para a página de índice e há vários de um templates personalizados que podemos construir. Vamos olhar para eles mais tarde no curso. Se você quiser dar uma olhada na visão geral visual que lhe dá um bom diagrama visual de como WordPress lida com modelos, quais modelos ele procura em uma ordem mais particular. Vamos começar a criar nossa nova página inicial. Se você voltar para o painel do WordPress e, em seguida, no painel à esquerda, se você descer para páginas, eu vou apenas excluir a página de exemplo, não precisamos disso. Então vamos clicar em “Adicionar novo”. Vamos simplesmente chamar esta página de início e depois clicar em “Publicar”. Em seguida, vá para o editor de texto e vamos criar o front-page.php que procuramos antes. Primeiro de tudo, vá para a página de índice, selecione todos e copie e, em seguida, Command N ou Control N para criar uma nova página e, em seguida, cole-a em e salve imediatamente como front-page.php. Esta vai agora ser a nossa primeira página do site. Podemos excluir todo o conteúdo na página de índice, tudo entre o cabeçalho get e obter etiquetas de rodapé direto para a parte inferior. Basta selecionar todo o conteúdo e, em seguida, role para baixo e exclua, deixando apenas o cabeçalho e o rodapé. Vamos apenas salvar esta página por enquanto e vamos voltar a isso no próximo vídeo onde vamos começar a criar o loop WordPress para percorrer todo o conteúdo das postagens do blog, então salve. Em seguida, se você voltar para o painel e, em seguida, nas configurações, selecione a “guia Leitura”. Se formos para a primeira página que está no topo, mencionamos no início deste vídeo que, por padrão, WordPress usa a primeira página para exibir as últimas postagens do blog. Vamos mudar isso para ser uma página estática. Vou mudar isso para a página inicial a ser criada. Vou mudar isso e depois clicar em “Salvar alterações”. Espero que tudo esteja funcionando de novo. Clique em “Visitar Site” atualizar e agora parece estar funcionando bem. Temos alguns links de menu no topo, então vou me livrar deles agora. De volta à aparência nos menus, podemos excluir a página de amostra. Não precisamos disso no menu e também no link da página inicial e, em seguida, salve o menu. Depois de volta à nossa primeira página, por isso está tudo a funcionar outra vez. Obrigado por assistir. Vejo-te no próximo vídeo. 23. Loop no WordPress e a page.php: Então, neste vídeo, vamos dar uma olhada no famoso loop WordPress. Então, se você apenas cabeça para o Google e, em seguida, você vai procurar o loop WordPress. Deveríamos ser levados diretamente para o códice. Então, clique no primeiro link, que nos leva para o site WordPress. Então o loop é o código PHP usado pelo WordPress para exibir postagens. Usando o loop WordPress processa cada post a ser exibido na página atual e formato de acordo com a forma como ele corresponde especificar critérios dentro das tags loop. Qualquer código HTML ou PHP no loop será processado em cada post. Então, basicamente, o que isso significa é, vez do que estamos fazendo em nosso modelo de blog bootstrap, onde criamos três postagens de blog separadas. Para salvar a repetição desse código uma e outra vez, nós apenas criamos uma postagem de blog de exemplo dentro do loop. WordPress continuará fazendo loop, puxando todo o conteúdo das postagens do blog até que não haja mais posts para exibir. Então rolando para baixo. Então, para começar a usar o loop WordPress, precisamos copiar as tags de loop de abertura. Então, se copiarmos onde diz que o loop começa aqui, copie a primeira linha do PHP. Em seguida, entre o cabeçalho get e get rodapé, cole isso em e, em seguida, copie o loop final, que está logo abaixo. Em seguida, cole isso deixando um pouco de espaço no meio para o conteúdo. Então, se você conhece um pouco de PHP, isso deve parecer bastante familiar. Se não, basicamente tudo o que está acontecendo é WordPress está verificando se as postagens estão disponíveis e enquanto as postagens não estão disponíveis, ele vai percorrer o conteúdo que nós puxamos aqui muito em breve. Então, se não houver mais postagens, ele encerra o loop. Então, se não houver postagens iguais ao navegador. A palavra desculpe, nenhuma postagem corresponde aos seus critérios. Então, agora o loop está no lugar, precisamos puxar o conteúdo da coluna post. Vamos fazer isso abrindo as tags PHP. Então, entre essas tags, puxamos o conteúdo e os colchetes e ponto-e-vírgula. Então, isso irá imprimir o conteúdo dos posts enquanto postados disponíveis. No momento, não temos nenhum post no site WordPress, mas vamos criá-los no próximo vídeo. Então vamos guardar isso. Enquanto vamos usar isso como o backup ou o modelo padrão para postagens, também precisamos criar um modelo padrão para páginas se não houver nenhum modelo mais específico. Então vamos criar a página. PHP que vimos no início deste vídeo. Então, se nós apenas selecionar todo o conteúdo e copiar e, em seguida, fazer uma nova página e colar lá. Esta página será salva como page.PHP. Então guarde isso, lá vamos nós. Como este é o modelo padrão para páginas em vez de postagens, precisamos alterar a mensagem de erro, para desculpe, nenhuma página correspondeu aos seus critérios e salve isso. Então, se você se juntar a mim no próximo vídeo, vamos começar a criar algumas postagens de blog WordPress. 24. Página de índice do blog parte 1: Agora vamos começar adicionando algumas postagens de blog ao nosso site. Nós também criaremos a página do blog para que eles sejam exibidos em. Para obter algum conteúdo para as postagens do blog, eu vou até o Google e procurar algum Lorem ipsum, para obter algum texto de exemplo para as postagens. Clique em “Lorem Ipsum” e, em seguida, role para baixo até o gerador. Vou gerar cinco parágrafos de texto para que tenhamos muito conteúdo para o post. Clique em “Gerar”, copie os cinco parágrafos e volte para o painel do WordPress. Depois de chegar ao painel, clique em “Posts”. Podemos manter o post de amostra do “Olá Mundo” lá por enquanto. Vou gerar cinco novos postos. Clique em “Adicionar uma nova publicação” e, em seguida, dê a ele um título de sua escolha. Eu vou chamar este blog post um, e em seguida, na caixa de texto, colar no Lorem ipsum. Eu já criei as notícias sobre a categoria de escritório. Basta selecionar “Adicionar nova categoria” e digitar uma categoria de sua escolha, como promoções. Em seguida, clique em “Enter” e, em seguida, você obtém o novo período de categoria lá. Logo abaixo das categorias também está a área para tags. Você pode querer adicionar algumas tags também. Digite e pressione “Enter”. Eu vou criar beleza, cabelo, maquiagem, e isso vai servir por enquanto. Clique em “Publicar” e, em seguida, adicione novo no topo, e eu vou fazer cinco novas postagens no blog no total. Temos muito conteúdo para trabalhar. Você pode criar o seu próprio ou seguir comigo. A próxima será a oferta de agosto. Agora estou colando o texto de exemplo na categoria de escritório. Vou adicionar algumas tags e, em seguida, clicar em “Publicar”. No terceiro, isso pode ser notícias ou boletim informativo de agosto. Esta pode ser a nova seção sobre as tags, pode ser notícias e atualizações, colar no conteúdo e, em seguida, clicar em “Publicar”. Só vou fazer mais dois. Adicione o novo e, em seguida, exemplo de postagem. Cole isso e isso pode ser descategorizado. Agora vou publicar e depois mais um. Exemplo de postagem 2 e, em seguida, publique. Então, agora temos cinco posts no total, então temos muito conteúdo para trabalhar. Na página inicial, só temos o link de volta para a página inicial. Em seguida, precisamos criar a página do blog. Voltar para o Painel de controle a ir para Páginas, Adicionar novo, chamar isso de página do blog, e, em seguida, clique em “Publicar”. Precisamos dizer ao WordPress que esta é a página para exibir postagens de blog, então vamos para Configurações, Leitura e alteramos a página de postagens para ser o blog que acabamos de criar e, em seguida, salvar as alterações. Em seguida, confira o site e verifique se a página do blog foi adicionada ao menu. Ok, isso é ótimo. Em seguida, precisamos transferir o conteúdo do blog do nosso projeto bootstrap para o WordPress. Se encontrarmos a nossa pasta de bootstrap, minha ainda está na área de trabalho. Em seguida, abri-lo, em seguida, arraste o blog.html para o seu editor de texto, e podemos começar a copiar parte do conteúdo para o WordPress. Não precisamos do cabeçalho ou da seção de rodapé. O que precisamos fazer é rolar para baixo até a seção do blog, e então precisamos copiar toda a seção do blog. Copie isto e continue a descer até encontrarmos a barra lateral. Há os módulos da barra lateral. Em seguida, copie tudo até a seção de rodapé. Copie e, em seguida, vá para o index.php e, em seguida, cole tudo isso apenas abaixo get_header. Vou começar a trabalhar com isso agora. Estou a torná-lo amigável ao WordPress. Vamos começar cortando a barra lateral e colocando a barra lateral no arquivo sidebar.php. Se olharmos para a div de fechamento da barra lateral do blog, então olhe para a div pouco antes disso, e então copie os módulos até o número de colunas. Corte o conteúdo. Devemos ficar com o contêiner de 12 colunas. Em seguida, vá para o sidebar.php, cole isso e salve, em seguida, de volta para a página de índice, e espero que você esteja tendo uma idéia do que estamos fazendo aqui. Da mesma forma que temos o cabeçalho, e também da mesma forma que colocamos o rodapé de volta, vamos fazer exatamente o mesmo. Entre a div da barra lateral, vamos abrir as tags PHP e, em seguida, digite get_sidebar, os colchetes e o ponto-e-vírgula, e então salve isso. Espero que isso faça sentido. Cortamos a barra lateral, colocamos em seu próprio arquivo, e depois adicionamos novamente usando PHP. A próxima coisa que precisamos fazer é, precisamos adicionar nossa postagem de blog ao loop WordPress que adicionamos anteriormente. Só precisamos de uma das postagens do blog bootstrap para trabalhar, e atualmente temos três, então vamos excluir duas delas. Se localizarmos o fim das postagens do blog, há uma e há duas, então nos deixa apenas com uma postagem de blog. Na verdade, não precisamos de nenhum conteúdo ou de qualquer texto, então podemos excluí-lo para criar mais espaço. Vamos amarrar isto para sabermos o que estamos a fazer. Então nós temos o contêiner, a linha, e o número de colunas, em seguida, a postagem do blog lá. Como está, este é o conteúdo do nosso post de blog e queremos ter certeza de que este é dentro WordPress loop. Então, toda vez que ele percorre uma postagem de blog, ele imprime o título da postagem do blog, também a data, o autor e o conteúdo. Podemos começar a cercar isso com o loop WordPress. Então, se cortarmos o loop de extremidade aberta e, em seguida, colar isso logo acima da div com a classe de post do blog. Então colamos isso. Se cortarmos o fim do loop e, em seguida, colar isso no final do blog. Eu colo isso ali. Cortamos todos os parágrafos do texto, então precisamos adicionar o conteúdo de volta. Cortamos as tags PHP para o conteúdo e depois colamos isso de volta logo acima do final do loop. Então esse é o conteúdo. Agora só para ter certeza que nossos divs estão no lugar. Nós temos a div com a postagem do blog e eu acho que nós só precisamos de uma tag de fechamento após o conteúdo. Sim, isso é para cima com a div abertura do post do blog. Vou apenas colocar um comentário lá no post do blog. Vou abrir espaço entre o fim do circuito. Ele agora tem o loop e algumas informações do blog lá dentro. Vamos para o nosso site e ver como ele está olhando e dar-lhe uma indicação visual do que o loop está fazendo. Então, se você selecionar o blog e, em seguida, role para baixo. Assim, podemos ver que algumas postagens de blog começam a aparecer à esquerda e nossa barra lateral está sendo puxada de volta. Mas um dos problemas que temos até agora é criar cinco postagens diferentes. Mas à medida que rolamos para baixo, estamos recebendo a mesma postagem de blog uma e outra vez, e isso é porque na página de índice, ele está puxando o conteúdo, que é o texto Lorem Ipsum para todas as informações, como o cabeçalho, a data e a oferta é tudo HTML estático. Então precisamos agora converter isso para PHP. Assim, o WordPress pode obter as informações corretas para as postagens do blog que criamos. Então vamos começar agora. Vamos começar com o cabeçalho Nível 2 do novo recurso. Eu quero separar isso em uma linha diferente para que fique mais claro. Então abra o PHP. Novamente, eu vou apenas copiar essas tags PHP porque nós vamos estar reutilizando-as uma e outra vez. Para obter o título, digitamos o_ título. Vamos salvar isso e voltar para o blog e atualizar. Agora podemos ver que temos títulos diferentes. Estes são os títulos dos cinco posts que já fizemos antes. Você passa o mouse sobre eles, você pode ver que esses títulos são links. Normalmente, no blog, você não precisará do link para a postagem completa. Então, podemos fazer isso no WordPress adicionando o permalink. Então nós podemos cercar este PHP em uma tag link. Então um href vai ser igual a, então nós colamos em nosso PHP. Para torná-lo um link, digitamos o permalink. Não se esqueça dos colchetes e do ponto-e-vírgula. Precisamos dizer ao WordPress onde ligar esses dois. Então, faça isso adicionando um título. O título vai ser igual a, cole no PHP. Em seguida, digitamos o_title_attribute. Vamos colocá-lo em linhas separadas para que fique mais claro. Então, quando é fechar a abertura de uma tag, logo após o atributo title e, em seguida, adicione o fechamento de uma tag após o título. Então vamos dar uma olhada nisso e atualizar no navegador. Então isso é um bom começo. Nossas postagens do blog agora estão azuis, o que indica que agora é um link. Então, de volta ao editor de texto. Então faremos o mesmo com a data e o autor. Então, começando com a data, cole no PHP. Eco para o navegador get_the_date. Então, dentro dos colchetes, precisamos dizer ao WordPress qual formato gostaríamos que a data aparecesse. Então, dentro das citações, passe em três parâmetros. Então o primeiro é um F maiúsculo, que em PHP significa o mês, e então separado por uma vírgula. Um pequeno j é para o dia do mês. Então, como usamos na seção de rodapé, podemos usar o Y maiúsculo para obter o ano. No próximo vamos fazer o autor. Então vamos mudar o nome do autor, colar no PHP. O autor é bastante simples. É só o autor. Em seguida, suporte e ponto e vírgula. Vamos guardar isso e dar uma olhada. Ótima. Então agora ele postar no nome de usuário, que é tranquil_admin. Ele também nos dá a data em que o post foi criado. Deve ser tudo o mesmo, porque todos eles vão criar ao mesmo tempo. Então, enquanto estamos na seção de postagem do blog, eu gostaria de adicionar um pouco mais de informações ao blog. Logo abaixo do autor, eu gostaria de adicionar algumas informações que mostram qual categoria e qual tag usamos para todas as postagens. Então isso é muito simples de fazer. Se nós apenas ir abaixo da seção do autor que acabamos de fazer lá. Eu também vou adicionar alguns ícones fonte impressionante para fazer estes olhar um pouco melhor. Então Font Awesome é adicionado com a tag i ea classe é fa. Então, vamos adicionar as tags primeiro. Assim, o ícone de fonte impressionante para tags é fa-tag. Então feche isso. Em seguida, podemos gerar os nomes das tags digitando no_tags. Vamos salvar isso e verificar se está funcionando bem e atualizar. Então temos uma foto da aparência da etiqueta. Então vamos até uma postagem de blog onde temos algumas tags, temos notícias e atualizações, e então aqui começa tudo funcionando corretamente. Em seguida, adicione uma marca de quebra. Começaremos nas categorias. Então, um ícone incrível da fonte. Então i classe fa, e isso poderia ser fa-folder-open, e, em seguida, adicionar algum PHP. Desta vez, usamos o_category e, em seguida, salvar. Então vamos dar uma olhada. Então temos o ícone de fonte impressionante aparecendo, mas temos os nomes das categorias que aparecem abaixo. Queremos ter certeza de que eles estão em linha com a pasta. Também queríamos que fossem separados por vírgula. Então isso é muito simples de corrigir se formos dentro dos parênteses e nas citações. Tudo o que precisamos fazer é adicionar uma vírgula, que é o separador, e depois um espaço. Portanto, há um espaço entre cada uma das categorias e, em seguida, atualizar. Agora, nós também temos agora eles em linha com o Font Awesome Icon. Para fazer isso parecer um pouco mais como as tags um, vamos apenas adicionar as categorias de palavras na frente dele. Então, logo antes da categoria, vamos adicionar tags PHP e, em seguida, vamos ecoar ou podemos usar uma abreviação que é um e com um sublinhado antes dela. Então a palavra que vamos ecoar é categoria. Então, um cólon, temos coisas espaciais lá também. Então é um espaço antes do nome da primeira categoria. Então salve e atualize. Isso parece bom, parece muito melhor do que antes. Então, espero que isso tenha feito sentido para você. Bem, adicione um ícone de fonte impressionante. Em seguida, logo depois, usamos no PHP echo para ecoar a categoria de palavras. Em seguida, logo após a palavra, estamos usando a função de categoria para imprimir todas as categorias associadas à postagem do blog. Então guarde isso. Alguns de vocês podem ter notado como você está rolando para cima e para baixo página, que esses posts do blog são bastante longos. Normalmente, em um blog, você só tem uma breve introdução, talvez apenas um parágrafo ou mais. Em seguida, se você clicar no blog ou no título, você então leva para a postagem completa do blog em uma página separada. Podemos fazer isso muito facilmente no WordPress. É apenas um caso de mudar o conteúdo para ser o trecho. Então salve, e agora deve ser uma versão abreviada das postagens do blog. Simplesmente assim. Então, um pouco mais tarde no curso, vamos criar o modelo para a postagem completa do blog. Quer clicar no título. Tão feliz diria que isso veio junto por agora. Então terminaremos esse vídeo lá. Estamos fazendo um bom progresso. Vamos agora ir conteúdo WordPress, que é gerado dinamicamente em vez das postagens de bootstrap estáticas. Então, obrigado por assistir, e nos vemos no próximo vídeo. 25. Página de índice do blog parte 2: Bem-vindo de volta. Estamos fazendo um bom progresso com o nosso blog WordPress. Agora temos o WordPress puxando o conteúdo de todos os nossos posts de blog e exibindo-os na página do blog. Nós usamos o trecho do WordPress para encurtar o conteúdo das postagens, ser apenas um par de frases. Agora, queremos adicionar um botão Read More no final do texto. Isso também pode vincular a postagem completa do blog da mesma forma que o título. Para adicionar o botão Ler mais no final, podemos adicionar isso em nossa página de índice logo após a isenção. Apenas faça um pouco de espaço lá. Vamos criar um link e, em seguida, dentro das citações, colando as tags PHP. Desta vez, vamos ecoar para o navegador, get_permalink (), e ponto-e-vírgula no final, em seguida, fechar a tag “a” e adicionar a tag de fechamento lá. Agora, temos o link, precisamos adicionar o texto. PHP novamente, e nós usamos uma abreviação novamente, então _e apenas eco para o navegador. Então, dentro dos colchetes, o primeiro parâmetro será o texto que gostaríamos de exibir, que será Read More e, em seguida, curtos três pontos depois. Então salve e veja se está funcionando bem. Isso é no final de cada uma das postagens do blog, então isso é bom. Uma pequena mudança que você gostaria de fazer é, eu não gosto dos colchetes no final do texto, então eu vou apenas removê-los e apenas colocá-los nos três pontos. Vamos ver como fazer isso. Se nos dirigirmos para os codecs WordPress, e vamos procurar os codecs para WordPress. Em seguida, procure no topo o trecho e clique na referência da função para o trecho. Role um pouco mais para baixo, e ele dará algumas informações sobre como usá-lo e alguns exemplos. Mas se você ir um pouco mais para cerca de meio caminho e olhar para o título que diz remover os três pontos em um colchetes usando filtros. Se simplesmente copiarmos a função, então vá para o functions.php. Vamos colar isso dentro, mas fora da função de configuração. Role para baixo até a parte inferior da página e vamos colar isso abaixo do add_action para os scripts. No minuto, retornaremos os pontos nos colchetes, mas só queremos excluir esses colchetes e salvar isso. Ou você pode colocar em qualquer coisa que você preferir. Vamos ver se isso está funcionando. Volte para a página do spa e atualize. Bom, está tudo funcionando corretamente. Os colchetes foram removidos. Nós só queremos mudar este título novamente para ter a mesma cor que o site bootstrap, que é o cinza escuro. Se apenas clicar em Inspect Elements e, em seguida, selecioná-lo com a lupa, podemos ver que o cluster que Bootstrap usa é blog-post-title. Copie isso, eu vou mudar essa cor no style.CSS. Vamos dar uma olhada na seção do blog e, em seguida, vamos colar isso logo abaixo da seção de título que criamos antes. Como agora é um link, vamos adicionar o “a” e vamos definir a cor para ser o valor de 494646. Salve isso e atualize. O título agora tem a mesma cor do site Bootstrap. Você já deve ter notado que estamos perdendo a imagem extravagante que separa o título do blog e o resto do conteúdo, porque ainda temos os pontos e a lama. Vamos removê-los e, em seguida, atualizar, e isso coloca as imagens de volta no blog. Se voltarmos para a parte inferior da página, você pode ver que são os botões “Anterior” e “Próximo”. Agora vamos fazer com que estes funcionem no WordPress. Volte para a página de índice. Se você der uma olhada na seção Páginas, e podemos manter os links [inaudíveis] como estão. Mas não precisamos mais desses links porque vamos colocá-los de uma maneira WordPress. Podemos simplesmente excluir os hiperlinks de Anterior e Próximo. Para obter a próxima página de posts, insira o php. Em seguida, para obter as próximas postagens, digitamos next_posts_link e, em seguida, queremos que o botão diga “Posts antigos”, então digitamos isso dentro dos colchetes. Em seguida, vamos copiar este pedaço do PHP e, em seguida, vamos colá-lo logo abaixo entre os itens da lista. Mas desta vez, em vez de next_posts, ele é alterado para anterior. Em seguida, vamos mudar “Posts mais antigos” para ser “Mais recente” e salvar, e espero que, isso deve funcionar bem, em seguida, atualizar. Isso faz com que os botões desapareçam e você pode estar se perguntando por quê. Bem, a razão é porque não há uma página anterior ou uma próxima página para ir porque nós temos apenas cinco ou seis posts de blog, e por padrão, o WordPress coloca 10 posts em uma página. Apenas para testar se o pager está funcionando, volte para o painel e, em seguida, para baixo em Configurações, em Leitura, em seguida, altere as páginas do blog para mostrar no máximo de 10 para cinco e, em seguida, salve as alterações. Então, espero que, se tudo está funcionando corretamente, quando rolamos para baixo até a parte inferior da página no blog, devemos agora obter uma página aqui porque só temos cinco posts. Isso vai como o botão “Post mais velho” e há o seis post lá. Em seguida, clique em “Postagens Mais Recentes”, vamos obter os cinco primeiros. Parabéns por chegar até aqui e conseguir as postagens do blog funcionem. Obrigado por assistir. Se você se juntar a mim no próximo vídeo, criaremos uma instrução “if else” do PHP, que mudará o texto do recurso na parte superior da página dependendo da página em que estamos. Te vejo lá. 26. Texto de recurso dinâmico: Então, se entrarmos em nosso site, todas as páginas como ele está, digamos Full Responsive Premium Spa tema para WordPress no topo, e isso vai para a página inicial, a página do blog, e quaisquer outras páginas que vamos estar criando como as últimas notícias, o Fale Conosco e Sobre Nós. Então eu quero ter certeza de que o texto do recurso na parte superior da página reflete em qual página estamos em vez de ser apenas texto estático. A razão pela qual é o mesmo texto em cada página é porque se formos no header.php, temos apenas HTML estático. Então eu vou mudar isso neste vídeo adicionando uma função php. Então, se excluirmos todo o texto entre as tags P, mas certificarmos que as tags ainda estão no lugar, e então abrir o php, e então os colchetes de fechamento, vamos adicionar em nossa própria função personalizada, e Vou chamar este FeatureText, e então os colchetes e ponto-e-vírgula. Isso é tudo o que precisamos fazer na seção de cabeçalho. Vamos criar esta função de texto de recurso no functions.php. Então, se você descer para a parte inferior da página de funções, logo abaixo da última função, mas ainda dentro das tags php. Vamos abrir um pouco de espaço para essas celas. Então, a palavra-chave função, em seguida, um nome de função que era FeatureText, e, em seguida, os colchetes e, em seguida, par de chaves. Então, dentro desta função vai ser uma declaração if else. Assim, o WordPress estará verificando se uma determinada página está sendo visualizada. Se uma determinada página está sendo visualizada, então vamos definir a exibição de texto correta no FeatureText. Então vamos começar usando uma instrução if. Então, se é_front_page. Então, se estamos vendo atualmente a primeira página, em seguida, quer ecoar para o navegador, o texto que acabamos de cortar da seção de cabeçalho, que é totalmente Responsive Premium Spa Tema para WordPress. Então totalmente responsivo, e, em seguida, uma tag break, e PREMIUM SPA TEMA, seguido pela tag break, PARA WORDPRESS, e, em seguida, salve isso. Então logo após a chave encaracolada lá, vamos usar else if em vez de else porque podemos usar quantos outros ifs quisermos. Então, à medida que passamos pelo site, toda vez que criarmos uma nova página, que é a página Fale conosco, criaremos uma nova condição para essa página e, em seguida, imprimimos o texto apropriado. Então elseif, e as chaves. Então a condição para o blog é verificar is_home. Então classe WordPress é a página inicial como a área onde os principais posts do blog estão sendo exibidos. Então nós temos a primeira página, e então nós temos is_home, para a casa das postagens do blog, este irá ecoar o navegador, e um ponto-e-vírgula no final do primeiro também. Então, ecoe para o navegador. Se é o blog, queremos que este diga Tranquil Spa Official Blog. Então vamos guardar isso e dar uma olhada se isso está funcionando. Então atualize o site WordPress. Isso parece estar funcionando até agora, temos a página do blog selecionada e o texto é alterado para Tranquil Spa Official Blog. Agora, se voltarmos para a página inicial, teremos o texto original que definimos para que tudo funcione bem. Então vamos deixar isso por enquanto e vamos continuar adicionando às funções toda vez que adicionamos uma nova página ao blog. Então, obrigado por assistir. No próximo vídeo, criaremos o modelo de página para exibir todas as postagens de blog individuais. 27. Modelo para publicação única em blog: Então, em nossa página do blog, nós temos as postagens encurtadas, e neste vídeo, queremos ter certeza de que se clicarmos no botão Ler Mais ou no título, que este link para uma página que vai mostrar a postagem de comprimento total, e fazemos isso criando um modelo chamado single.php. Então vá para o seu editor de texto e crie uma nova página, e salve isso como single.php, com todo o resto dos arquivos PHP. WordPress tem dois tipos diferentes de modelos de página que podemos usar. Existe o modelo de uso único, que usaremos para a página Contato e Sobre Nós, e que só será usado em uma página específica, ou há também um modelo Global, que é um pouco mais geral modelo. Precisamos colocar um comentário no topo da página. Então, a página única vai ser vagamente baseada em nossa página de blog. Podemos reutilizar muito do conteúdo. Copie o conteúdo da página Índice e, em seguida, cole isso no single.php, e como este vai ser um modelo global, precisamos adicionar um comentário no topo. Ainda WordPress é o nome do modelo. Adicione os comentários. Vai ser o nome do modelo, por isso vai ser Single Post Template. Isso terá algumas das mesmas funcionalidades que a página do blog, mas com apenas uma ou duas pequenas mudanças. Por exemplo, na página do blog, temos o título vinculado à postagem completa, mas não queremos isso porque já estamos na postagem completa. Vamos remover o hiperlink em torno do título, remover o hiperlink, de modo que o fechamento de uma tag. Também podemos remover o atributo title, o permalink, e todo o caminho para a abertura de uma tag. Salve isso e vá para o blog e clique em uma das postagens do blog. Esta é a única página em que estamos trabalhando agora, e ainda precisamos adicionar o título ao topo da página. Agora você pode ver quando clicamos no link na parte superior, não é mais um link, é apenas o título do blog. Precisamos alterar a versão abreviada do post para ser o comprimento total. Fazemos isso alterando os trechos de volta para o conteúdo. Salve isso e atualize. Então temos toda a extensão do poste. Em seguida, eu só quero ir para a folha de estilos e adicionar um pouco de altura da linha, apenas para criar algum espaço entre as tags, a categoria e o texto abaixo. Se formos para o style.css e copiarmos um comentário, eu quero colar isso logo abaixo da barra lateral do blog, o Sobre Nós, o Fale Conosco. Vou colocá-lo antes do estilo móvel. Cole isso e chamaremos isso de Blog Single Post. Vamos dar uma olhada na turma que precisamos atingir aqui. Se entrarmos na página de índice, quero adicionar estilo às tags e à categoria. A classe que cerca esses é blog-posts-meta. Eu só notei que há um pequeno erro lá. Precisamos mover a tag P de fechamento para realmente começar antes das tags e categoria, e depois terminar logo depois. Caso contrário, isso não vai funcionar. Vamos colocar isso e salvar isso. Voltar para a folha de estilo e, em seguida, colar na classe. Não se esqueça de colocar um ponto na frente dele porque é uma classe, e então basta adicionar algum espaçamento de linha com a propriedade de altura de linha de dois M, e vamos atualizar o navegador e ver como isso está parecendo. Ok. Isso ainda não mudou, então ainda há um problema em algum lugar. Se apenas dermos uma olhada. É porque mudamos a tag de parágrafo de fechamento na página Índice, mas não fizemos isso no single.php. Então vá para single.php e, em seguida, apenas mova a tag p de fechamento, e coloque isso após a categoria, e salve isso. Vamos ver se isso está funcionando agora. Acho que está funcionando, estamos perdendo as etiquetas lá só porque eu não acho que o post tem nenhuma etiqueta, o que não tem. Se tentarmos o August Newsletter um, nós temos as tags, nós só precisamos adicionar uma tag break lá. Logo após o autor e após o fechamento de uma tag, a tag break. Espero que isso resolva tudo agora. Ótimo. Isso parece muito melhor. Agora temos alguma altura de linha entre as tags e as categorias. Isso parece bom agora. Então, se descermos um pouco mais pela página, também podemos remover o botão Read More, porque não precisamos disso. Na verdade, podemos mover todo o link e apenas puxá-lo um pouco mais e salvar, e depois atualizar isso, e lá vamos nós. Esse é o botão Read More removido. Uma coisa que precisamos estar conscientes ao construir temas WordPress é que às vezes os usuários podem fazer upload de posts que são realmente longos. Isso foi em apenas cinco parágrafos, então parece muito bom na página, mas se alguém enviar uma postagem de leitura, eles podem querer dividi-la em páginas diferentes. Talvez queiramos adicionar pager com anterior e seguinte no final do post, basta dividi-lo um pouco. A maneira como podemos fazer isso é permitir que os usuários coloquem uma tag break. Se escolhermos uma postagem de blog, escolheremos uma que estamos agora, que é a newsletter de agosto, e se escolhermos apenas um ponto no qual você deseja adicionar um pager, podemos adicionar um comentário lá, que é o mesmo que um comentário HTML, que diz Próxima página. Eu só vou copiar isso e colá-lo mais uma vez, e, em seguida, atualizar o post, e voltar para o site. Vamos dar uma olhada nisso. Agora temos nossa postagem no blog aparecendo, e ela cortada após dois parágrafos, onde colocaremos o próximo ponto de interrupção da página, o que é ótimo. Em seguida, precisamos apenas adicionar um pager na parte inferior das postagens, que nos permitirá pular para a próxima página. Podemos fazer isso no single.php e adicionar isso logo abaixo do conteúdo, então abra o PHP e, em seguida, a função WordPress que vamos adicionar um wp_link_pages, colchetes e ponto-e-vírgula e, em seguida, salvar e atualizar a página do blog. Agora podemos ver na parte inferior, temos o número de páginas, então temos 1, 2 e 3, e todas parecem estar funcionando corretamente. A última coisa que queremos fazer é adicionar um pager na parte inferior da postagem para que possamos pular para a próxima ou para a publicação anterior, se você quiser. De volta ao single.php, vá até o pager, e em vez de dizer as próximas postagens, nós apenas pegamos o S do final e que irá vincular ao anterior ou ao próximo post, e nós não precisamos do texto dentro dos colchetes, porque o nome do post é colocado em com WordPress dinamicamente. Salve isso e atualize o navegador. Lá vamos nós. Agora temos o boletim informativo de agosto e podemos ligar para o post anterior ou seguinte apenas clicando nos botões na parte inferior. Estamos fazendo um bom progresso, e a última coisa que precisamos fazer é apenas no texto no topo da página para o único post. Faremos isso novamente na página Funções e adicionaremos outra instrução da Elseif. Elseif, na verdade, em vez de adicionar uma nova instrução lá, podemos simplesmente adicioná-la ao is_home. Só porque vamos usar o mesmo texto do Tranquil Spa Official Blog. Então, logo após is_home, usamos os dois tubos, o que significa tudo, então, se estamos na página inicial ou a página é única, em seguida, imprime o texto Tranquil Spa Official Blog. Salve e atualize. Ok. Bom. Então esse é o modelo finalizado para a postagem de blog única, e se você se juntar a mim no próximo vídeo, vamos tornar possível para os usuários adicionar comentários às postagens. 28. Adicionando comentários ao blog: Bem-vinda de volta. Neste vídeo, vamos criar a facilidade para os usuários comentarem em postagens. A maneira como fazemos isso é que vamos criar uma nova página. Este vai ser um modelo de página. Salve isso como comments.php, e salve isso no mesmo diretório que todo o seu PHP. Então, para isso, não vamos reinventar a roda, vamos apenas copiar a página de comentários do tema 2014, que está incluído com o download do WordPress. Se você vai para a sua instalação do WordPress em htdocs e, em seguida, abra trunquil-wp. Então, se você entrar no conteúdo sobre temas, vou usar o tema 2014 e, em seguida, abrir o comments.php. Selecione tudo e copie, em seguida, cole o conteúdo em comments.php e salve isso. Podemos deixar praticamente todo o comments.php como está. Vamos apenas mover as referências do WordPress 2014 apenas a partir daí. Alguns benefícios de usar o modelo de um dos temas incluídos, ele tinha algumas características agradáveis, como verificar se um post é protegido por senha. Há apenas uma ou duas pequenas coisas que precisamos mudar. Se rolarmos para baixo até a linha printf, e vamos personalizar isso ligeiramente alterando um pensamento para comentar e, em seguida, na próxima linha, mudar pensamentos para comentários e, em seguida, salvar isso. Em seguida, para incluir isso de volta em nosso tema, precisamos passar para o modelo single.php. Então eu vou colocar isso embaixo do pager. Precisamos de estilo WordPress paradeiro na postagem do blog, queremos que os comentários apareçam e é geralmente na parte inferior do post. Então vamos colocar isso logo abaixo do pager. Quando eu adicionar um comentário apenas aqui, este comentário eu vou dizer carregar o modelo de comentários. Depois disso, abra as tags PHP e, em seguida, use a função template comments. Então salve. Ele irá para uma postagem de blog e atualizará. Você deve ver na parte inferior do post que temos a facilidade agora para deixar comentários. Vamos em frente e adicionar alguns comentários de exemplo, e verificar se tudo está funcionando bem. Eis os nossos primeiros comentários. Podemos também responder aos comentários. Diz olá lá dentro e depois publica os comentários e verifica se está tudo a funcionar. Há nossos dois comentários aí, então isso é bom. Em seguida, eu só quero ir para o CSS, adicionar algum estilo personalizado e certifique-se de que os comentários se encaixam um pouco mais com o resto do site. Então, vá para o nosso style.css. Então eu quero adicionar um pouco de estilo na parte inferior da página. Copie os comentários e adicione isso logo abaixo do plug single post e altere o comentário para ser a seção de comentários. Para começar, quero ter certeza de que a seção de comentários na parte inferior tem um estilo semelhante nos módulos da barra lateral e também nas postagens do blog. A maneira que eu vou fazer isso é copiando o mesmo estilo que usamos no módulo da barra lateral. Então basta copiar esta seção e, em seguida, encontrar o seletor. Então, abrimos as ferramentas de desenvolvedor do Chrome com elemento inspecionar. Precisamos encontrar o ID do recipiente que envolve toda a seção de comentários. Clique na lupa e, em seguida, encontre o recipiente circundante. É a div com ID de comentários e, em seguida, a classe de comentários área. Vamos adicionar isso agora. A div com um ID de comentários e, em seguida, a classe de comentários-área e, em seguida, cole no estilo. Vamos ver como isso parece. Bom, o estilo agora corresponde ao resto da página. Em seguida, eu só quero destacar os comentários apenas para que eles se destacam um pouco mais do resto do fundo. Vamos dar a este um fundo cinza escuro e também adicionar uma rodada de tabuleiro e também um pouco uma margem apenas para separá-los. Então a classe que precisamos é de comentar. Então, primeiro de tudo, vamos começar com o fundo e a cor de fundo é eee. Em seguida, o raio da borda é de 10 pixels para corresponder ao resto do site. Em seguida, a margem, 30 pixels na parte superior e inferior, 0 na esquerda e direita. Então, vamos salvar e atualizar. Em seguida, quero adicionar a imagem de divisão entre o cabeçalho e os comentários. Vamos descobrir o seletivo [inaudível]. Clique na lupa e no cabeçalho. Isso é chamado de classe de título de comentários h2. Vamos adicionar isso agora. Então h2 e, em seguida, a classe de comentários-título. Em seguida, ele é cortado o mesmo estilo que usamos no título da postagem do blog. Então, vamos até a seção do blog e procuramos o título da postagem do blog. Podemos copiar exatamente o mesmo CSS, que nos dá a imagem e também o estilo. Cole isso na seção de título de comentários e salve, e vamos dar uma olhada. Então, isso parece bom. Em seguida, quero adicionar um pouco de margem na parte inferior dos comentários e também uma linha tracejada para separar a seção de resposta. Para fazer isso, precisamos usar a classe de lista de comentários. Vamos adicionar algumas margens, margens na parte inferior de 60 pixels e, em seguida, borda na parte inferior de 1 pixel e a linha tracejada. Vamos dar uma olhada. Lá vamos nós. Então o que precisamos fazer agora, vamos fazer um pouco de estilo na seção de respostas. Vou fazer com que a área de texto seja a largura total. Vamos pegar a aula para isso. O seletivo para isso é a área de texto com a idéia de comentários. Então digite a área de texto e, em seguida, ID de comentários. Defina a largura da área de texto 100 por cento e adicione alguma margem na parte inferior de 20 pixels. Então atualize. Então agora isso é largura total. A última coisa e eu quero fazer é estilizar o botão enviar. Nós vamos torná-lo o mesmo que o botão enviar que usamos no site bootstrap. Tem a mesma cor azul que o resto do site. Vamos descobrir o que é o seletivo. A entrada tem um ID de envio. Podemos apenas adicionar o ID de envio para os padrões do botão na seção global. Logo após o padrão do botão separado por uma vírgula, também adicione o ID de enviar. Em seguida, faça o mesmo no estado de foco. Envie o cursor do mouse e, em seguida, volte para a seção de comentários. Sob a seção de área de texto, adicione também o ID de envio e vamos fazer o botão corresponder à área de texto, dando uma largura de 100 por cento. Então vamos salvar isso e ver como isso está olhando e atualizar. Não precisamos mais das ferramentas do desenvolvedor. Então isso parece muito melhor agora, isso parece bom. Uma coisa que você pode não saber é até agora quando estamos adicionando os comentários e clicamos no botão de resposta. Assim que você clicar em responder, nós somos levados para a parte inferior da tela na resposta. Isto é bom por enquanto, quando queremos fazer um ou dois comentários. Mas em uma página, tem dezenas ou centenas de comentários. Não queremos ser levados até o final da página. Queremos que a caixa de comentários apareça logo abaixo da postagem que comentamos. Felizmente, WordPress tem algum JavaScript para fazer isso. A maneira como podemos adicionar o JavaScript em é por nota de cabeça para o functions.php. Se procurarmos a seção de script de enfileiramento na configuração do tema logo abaixo do JavaScript do Bootstrap, vamos adicionar o script de resposta comum. Então vamos verificar primeiro se o post é singular. Agora vamos enfileirar o script como acima, com wp_enqueue_script. O nome do script é resposta de comentário, e um ponto-e-vírgula no final disso. Então guarde isso. Se você passar para WordPress e atualizar, agora se você clicar no botão de resposta, e não é trabalho por algumas razões. Então vamos apenas verificar o porquê. Isto irá levá-lo para a parte inferior da página. Vamos dar uma olhada nisso. Temos de ter a certeza de que está dentro das chaves. Então corte esta seção agora que acabamos de fazer e colá-lo dentro das chaves ou dentro da função. Guarde isso e vamos ver se está funcionando agora. Clique na resposta, e lá vamos nós. Agora, em vez de ser levado para a parte inferior da página, agora temos o JavaScript habilitado, e isso faz com que a caixa apareça logo abaixo dos comentários que responderão neles. Para que nós vamos uma seção de comentários tão totalmente funcional. Obrigado por ouvir, e nos vemos no próximo vídeo. 29. Criando nossa barra lateral dinâmica: Bem-vindos de volta, pessoal. Neste vídeo, vamos dar uma olhada na barra lateral. Vamos nos certificar de que é totalmente funcional. Vamos nos certificar de que o módulo de arquivos e a seção de categoria vai ser dinâmico, que significa que o WordPress irá preencher as categorias e os meses do ano pelos posts que estão disponíveis. Então vamos filtrá-los para baixo para como gostaríamos que eles fossem exibidos. O texto que está nos arquivos está na seção de categoria. É apenas HTML estático no momento. É só o que conseguimos do site do Bootstrap. Vou mudar isso agora. Vamos mudar isso no sidebar.php. Dirija-se a isso agora. Começaremos com o mês do ano. Se nós apenas excluir todos os itens da lista por enquanto, eu vou substituir isso por uma função PHP WordPress. Abra as tags PHP. Então, dentro disso, vamos substituí-lo por wp_get_archives, com os colchetes e um ponto-e-vírgula, e depois salvar isso, e voltar para o blog e atualizar. Agora, vamos usar todos os meses Bootstrap do ano, que colocamos mais cedo. Agora estamos apenas à esquerda com os meses gerados WordPress. Atualmente, só tenho postagens no mês de agosto. Só para dar um pouco mais de conteúdo, eu só vou adicionar mais um post. Vou copiar o texto de amostra. Então adicione mais uma postagem. Eu vou chamar isso de notícias de setembro, e depois colar um pouco de texto lá dentro. Isso pode ir para a categoria de notícias, e uma tag de notícias, e depois publicar isso. Em seguida, volte para a seção do blog. Agora temos postagens de dois meses separados. Podemos ver que o WordPress adiciona estes automaticamente. Vamos fazer exatamente o mesmo com a seção de categoria. Volte para o sidebar.php e encontre a seção de categoria, que fica logo abaixo dos arquivos, e depois exclua os itens da lista livre que temos lá. Abra o PHP, e a função PHP que usamos é wp_list_categories e salve isso, e depois atualize o blog. Agora o módulo da barra lateral sob as categorias tem as categorias WordPress, que vamos inserir na medida em que criamos os blogposts. Nós temos um título de categorias extras lá que não queremos, então a maneira de remover que está de volta em sidebar.php, dentro da função WP Lists Categories, dentro dos colchetes, podemos remover o título entre as cotações digitando em title_li é igual a, podemos deixar esse espaço em branco para que nenhum título apareça. Vamos economizar e atualizar. Acabamos de nos deixar com o nosso nível de direção que colocamos em nós mesmos. Agora WordPress colocou os meses e as categorias em. Podemos realmente selecionar esses links agora. Isso deve preenchê-lo na página do blog para mostrar posts apenas pela categoria do mês que selecionamos. Selecionamos Notícias lá e vamos apenas verificar se tudo está funcionando rolando para baixo. Temos apenas dois posts lá, ambos para a categoria de notícias. Então, se escolhermos setembro, devemos apenas obter o único post que fizemos hoje. Agora, vamos tentar mais uma. Vamos tentar a seção Ofertas. Acabamos de receber uma postagem de blog com a categoria Ofertas. Parece que tudo está funcionando bem. Se você se juntar a mim no próximo vídeo, criaremos o archive.php, que controla o layout dessa exibição. 30. Modelo de arquivos: Bem-vinda de volta. No último vídeo, corrigimos os módulos da barra lateral. Quando selecionamos o mês do ano ou as categorias, o WordPress e o [inaudível] estão em baixo nas postagens do blog para o que selecionamos. Neste vídeo, vamos criar o archive.php, que vai ser o modelo que controla a aparência do blog quando selecionamos em qualquer um desses arquivos. Para começar, vá para colchetes ou seu editor de texto e, em seguida, crie uma nova página e salve esta página como archive.php. Certifique-se de que está no diretório do projeto. Vamos usar o single.php como ponto de partida. Selecione tudo, copie e cole isso de volta em nossa nova página, que é o arquivo, e salve isso. Em seguida, de volta ao topo da página, vamos criar os comentários. O comentário que precisamos, vamos chamar isso de O modelo para exibir páginas de arquivo, e salvar isso. A página vai parecer praticamente a mesma quando clicamos nos arquivos como quando clicamos no post do blog. Vamos dar uma olhada na vista completa. Não precisamos fazer nada no modelo de arquivos por enquanto, mas queremos entrar na página de funções e ter certeza de que o texto sobre a área em destaque é alterado de volta para Tranquil Spa Official Blog. Mas vamos fazer algo um pouco diferente desta vez. Vamos adicionar um pouco mais de PHP, que será exibido logo abaixo do texto. Ele nos mostrará qual categoria selecionamos ou qual mês estamos exibindo. Volte para o editor de texto e vá para o functions.php e, em seguida, ele deve estar no final da sua página Funções. Devemos ter a função de texto do recurso. Vamos continuar esta seção com outra declaração elseif, logo após a última. Digite elseif e, em seguida, a condição e as chaves. A condição que queremos verificar é se a página é arquivada, e se for, vamos ecoar para o navegador para começar com o mesmo texto do Tranquil Spa Official Blog. Vamos copiar e colar isso. Como mencionamos antes, abaixo do texto, vamos colocar uma nova linha. Esta linha vai mostrar o mês ou a categoria que estamos exibindo, então vamos nos certificar que ele vai para a próxima linha. Eu só vou ecoar uma tag break, e ter certeza que isso vai para entre aspas, exatamente assim. Para começar, vamos ecoar a categoria ou o nome da tag. Vamos fazer isso digitando single_term_title e, em seguida, o texto que queremos que apareça antes do título é, navegando e, em seguida, dois pontos e um espaço. Vamos guardar isso e ver como está. Atualize o navegador. Agora, temos o texto do Tranquil Spa Official Blog, depois a tag break, e logo depois temos o texto de navegação que acabamos de colocar. O texto de navegação é então seguido pela categoria, que é, atualmente, ofertas. Vamos clicar nas notícias e verificar se está funcionando. Agora temos a seção de notícias. Vou tentar mais uma. Promoções. Bom. Agora, isso foi muito simples para colocar isso lá dentro, mas vai ser um pouco mais difícil de puxar no mês do post, mas vou mostrar a vocês como fazer isso agora. Primeiro de tudo, precisamos colocar em outra instrução if, que verifica se o arquivo está sendo filtrado pelo mês atual. Colocamos os colchetes, se for mês, e depois os colchetes depois, e depois criamos as chaves. Para começar, precisamos descobrir qual mês do ano é atualmente. Vou armazenar isso em uma variável, então o sinal $. Eu vou chamar essa variável de MonthNum, e vamos definir isso igual a get_query_var, e então entre colchetes, e os parênteses, e as citações. Vamos colocar o número do mês, e depois um ponto-e-vírgula no final. Em seguida, vamos criar duas variáveis, uma para o mês e outra para o ano. Começaremos com o mês. Vamos definir isso igual à data do PHP, e o primeiro parâmetro que vamos passá-lo é o formato. Os formatos que queremos retornar é um F, que retorna o mês atual na forma longa, como janeiro ou fevereiro, e depois separados por uma vírgula. Em seguida, queremos retornar o carimbo de data/hora da unidade. Vamos fazer isso digitando mktime, e então precisamos passar alguns parâmetros. A primeira é a hora. Não precisamos colocar nada aí. O segundo é o minuto. Novamente, isso é zero. O terceiro é o segundo. Isso vai ser zero. O quarto é para o mês. Como criamos uma variável chamada MonthNum, podemos simplesmente copiar isso, e podemos colar isso. Isso deve retornar o mês atual. Em seguida, criamos a variável ano. Ano será igual a, e faremos o mesmo que o número do mês, então get_query_var. Desta vez vamos passar a palavra, ano, e ponto e vírgula no final. Agora vamos criar duas variáveis com o mês e o ano. Precisamos ecoar isso para o navegador. Echo, em primeiro lugar, o texto, que vai ser, postar de, com um espaço logo após, e depois pontos na variável. O primeiro será o mês, e depois adicionaremos um espaço. Coloque as aspas simples com um espaço no meio, e então adicionaremos a última variável, que foi o ano, com o ponto-e-vírgula, e clique em “Salvar”. Em seguida, vá para o WordPress e atualize. Vamos selecionar um dos arquivos e ver se isso está funcionando. Isso parece bom. Nós temos o post do texto, e então nós adicionamos na variável mês e, em seguida, a variável para o ano. Vamos checar os de agosto e ver se está funcionando. Tudo parece estar funcionando corretamente. Temos o post mostrado do mês atual. Também temos as categorias da tag atual mostradas. Agora, se você se juntar a mim no próximo vídeo, vamos continuar com o site adicionando a página de notícias mais recentes. 31. Página de últimas notícias: Bem-vinda de volta. Neste vídeo, vamos criar a página Últimas Notícias. Agora, a página Últimas Notícias vai ser bastante semelhante à página do Blog. Mas nós vamos apenas adicionar um filtro WordPress, que vamos preencher na postagem da coluna para exibir apenas os que estão marcados com a categoria de notícias. Para começar, vá para colchetes e crie uma nova página e salve esta página como page-news.php. Então, como ele vai ser bem parecido com a página do blog, nós podemos simplesmente copiar a página de índice. Selecione todo o conteúdo e copie, e cole isso na página de notícias, e salve isso. Ao contrário dos últimos modelos que criamos, este será um modelo de uso único, então nós vamos apenas vincular isso à página Últimas Notícias. Para ter certeza de que podemos vincular isso a uma página WordPress, bem no topo, vamos adicionar um comentário que lhe dará um nome de modelo. Adicione os comentários na parte superior e, em seguida, adicione um nome de modelo. Isso é exibido no painel, e isso será chamado de Últimas Notícias, e salve isso. Agora, vamos dar a este um nome de modelo. Se nos dirigirmos para o WordPress e, em seguida, ir para o painel, selecione as páginas à esquerda e, em seguida, vá para Adicionar novo, e vamos criar as últimas notícias. Desta vez, se formos para os Atributos de Página no lado direito, podemos selecionar um modelo para usar. Desta vez, podemos selecionar o modelo Últimas Notícias porque adicionamos o nome do modelo na parte superior. Selecione as Últimas Notícias e, em seguida, Publicar, e isso deve ser adicionado automaticamente à página inicial. Temos a casa, o blog, e agora as últimas notícias. Acho que temos um erro de ortografia. Vamos editar esse título ali. Adicione o “t” no final e atualize. Ótimo, agora temos a página inicial, o blog e as últimas notícias. Agora usamos a página de índice como modelo para as últimas notícias. Precisamos agora filtrá-los para mostrar apenas os posts que têm a categoria de notícias. Volte para o page-news.php. Para adicionar o filtro de categoria, abra o PHP e, em seguida, usamos a função WordPress, que é query_posts, e, em seguida, dentro dos colchetes, vamos dizer ao WordPress quais postagens consultar; aqueles com o nome da categoria. Então category_name igual a notícias e um ponto-e-vírgula no final, e salvar. Se voltarmos para o site e atualizar, então agora quando clicarmos na seção “Últimas Notícias”, devemos apenas ser exibidos com os posts que têm a categoria de notícias. Isso está funcionando bem, então isso é bom. Você pode ter notado que precisamos adicionar o texto ou o texto do recurso na parte superior. Vamos fazer isso dinamicamente no functions.php. Desta vez vamos fazer um pouco diferente. Vamos pedir ao WordPress para puxar o nome do site, que será Tranquil Spa, e então vamos adicionar uma tag break. Em seguida, por baixo, adicionaremos o título da página, que deve ser Últimas Notícias. Vá até o arquivo de funções. Vamos adicionar outra declaração else-if. Certifique-se de que você não adicione else-if na chave de fechamento para as instruções if. Vá para o próximo abaixo. Else-if, entre colchetes é modelo de página. O modelo de página será o page-news.php. Desta vez, a instrução else-if está verificando o nome do modelo real e, em seguida, as chaves. Se for um modelo de página de notícias da página, adicionaremos o nome do site pegando as informações do blog. Entre colchetes, basta digitar um nome, e isso irá puxar o nome do site, e então vamos ecoar para o navegador uma tag break, vamos colocar isso em uma linha separada, e então vamos obter o título da página de Últimas Notícias. Basta digitar o_title e salvar e atualizar. Lá vamos nós. Agora nós puxamos o título do site e, em seguida, o título da página. Se alguma vez quisermos alterar qualquer uma dessas informações, ela agora seria exibida automaticamente. Lá vamos nós. Então essa é a seção Últimas Notícias terminou. Obrigado por assistir, e nos vemos no próximo vídeo. 32. Adicionando imagens em destaque às nossas publicações: Bem-vinda de volta. Neste vídeo, vamos adicionar suporte a temas para miniaturas de postagem e isso permitirá que os usuários ao criar uma nova postagem também carreguem uma imagem em destaque para fazer a postagem parecer um pouco mais agradável, por isso não é apenas texto simples. A maneira de fazer isso é que precisamos ir para o nosso functions.php, e então precisamos adicionar suporte ao tema para postar miniaturas. Vá para functions.php e, em seguida, faça backup para o topo dentro da configuração. Fazemos isso de forma semelhante aos feeds e à tag de título que adicionamos no início. Então, na configuração, adicione suporte ao tema. Então, dentro dos colchetes, vamos colocar as pós-miniaturas e o ponto-e-vírgula e salvar isso. Agora incluímos suporte a temas. Se passarmos para o painel do WordPress e, em seguida, se entrarmos na seção do blog. Escolha uma das postagens do blog e, em seguida, selecione “Editar postagem”. Em seguida, role para baixo até a parte inferior. Você deve ver que agora há uma caixa de imagem em destaque aparecendo. Podemos usar isso para definir uma imagem para anexar ao post. Basta selecionar isso, podemos ter um Upload Files ou podemos usar a Biblioteca de Mídia. Por enquanto, eu só vou para a seção Selecionar arquivos na seção de upload, e depois na área de trabalho na pasta bootstrap, e as imagens, eu incluí uma imagem chamada thumbnail.jpg. Podemos usar isso se você quiser, ou você pode escolher um dos seus. Então eu só vou colocar alguns textos alt da imagem do lago e, em seguida, definir a imagem em destaque e, em seguida, atualizar o post. Depois voltamos ao blog e fazemos mais uma. Desta vez eu vou selecionar o segundo post , em seguida, adicionar a imagem em destaque da mesma maneira. Desta vez, vamos apenas para ir para a Biblioteca de Mídia e usar o mesmo se você quiser, e, em seguida, definir isso e atualizar. Se você entrar no blog no minuto, não se preocupe que você não pode ver a imagem ainda. Há alguns passos que precisamos dar primeiro. Vá para o index.php e, em seguida, precisamos procurar o trecho, que é o texto. Role para baixo até as tags PHP com o trecho. Para mostrar a imagem logo acima do trecho, abra as tags PHP e, em seguida, definimos a miniatura da postagem, os colchetes e o ponto-e-vírgula, e salve isso. Se você atualizar o navegador agora, você deve obter as imagens aparecendo. Lá vamos nós. Essas são as duas primeiras imagens que colocamos antes. Isso faz com que o post pareça muito melhor. Podemos adicionar um pouco mais de cor ao post. Isso é adicionado à página de índice, mas também temos postagens de blog que aparecem na página de notícias e também no single.php. Vá até a página de índice e copie a miniatura da postagem. Então, se você entrar no single.php, e desta vez em vez do trecho, isso irá logo acima do conteúdo. Não se esqueça de salvar. Também na página de notícias, isso irá logo acima do trecho. Cole isso e seguro. Essas devem ser agora nossas imagens exibidas no post nas notícias, no índice, e também na página única. Se você quiser alterar o tamanho padrão da imagem exibida, podemos fazer isso no painel. Então, vá para o painel, configurações e, em seguida, mídia. Você pode definir as imagens padrão para a miniatura, média ou grande. Se você quiser definir, por exemplo, a miniatura como a imagem padrão no blog, vá para o blog e, em seguida, na página de índice colocaria dentro dos colchetes a miniatura e, em seguida, salve isso. Então, se você atualizar o blog, devemos agora obter a pequena imagem em miniatura por padrão. Você pode fazer o mesmo para médio ou grande. Mas vou apagar isso por enquanto e deixar o tamanho padrão da imagem. Esta página está quase pronta. Só um pouco de CSS para adicionar. Eu só quero adicionar alguma margem para a parte inferior da imagem e também fazer a imagem 100 por cento do recipiente. Se entrarmos no style.css e, em seguida, adicionaremos isso na seção do blog. Vamos dar uma olhada na seção do blog. Em seguida, na parte inferior desta seção, podemos reutilizar a classe post do blog, mas, em seguida, selecionar a imagem. Vou adicionar alguma margem na parte inferior da imagem. Apenas 20 pixels e defina a largura da imagem para 100 por cento. Salve e atualize o blog. Lá vamos nós. Isso é para olhar muito melhor e vamos agora terminar com a seção de blog. Eu vou vê-lo no próximo vídeo onde vamos adicionar o menu WordPress ao rodapé. 33. Menu de rodapé do WordPress: Bem-vinda de volta. Neste vídeo, vamos criar o menu WordPress para a seção de rodapé. Atualmente, se rolarmos para baixo até o rodapé que tem a lista desordenada que colocamos no modelo Bootstrap, queremos tornar o menu de rodapé mais dinâmico como o menu até a barra de navegação. Então vamos para o Dashboard e criar um novo menu. Vá para Aparência e, em seguida, Menus e, em seguida, selecione Criar novo menu. Vou chamar este menu o Menu Rodapé e, em seguida, criar o menu. À esquerda, sob a aba Páginas, podemos selecionar quais links queremos adicionar a este menu. não criamos a página Sobre Nós ou a página Fale Conosco, mas podemos adicionar o Blog e as Últimas Notícias. Selecione esses dois e, em seguida, selecione Adicionar ao Menu, e o blog apenas vai acima das Últimas Notícias. Salve isso, e então se nos dirigirmos para o functions.php, podemos registrar o menu. Então, de volta ao functions.php e, em seguida, procure a seção register_nav_menus que fizemos no início do curso. Então, por baixo disso, precisamos adicionar o menu de rodapé. Nós apenas copiamos o menu primário e, em seguida, colamos isso logo abaixo. O apelido é o rodapé e, em seguida, o nome do menu é o Menu Rodapé. Salve-o novamente no painel e, em seguida, atualize a página do menu. Agora a página é atualizada, certifique-se de que você ainda está no menu Rodapé e, em seguida, selecione a guia Menu Rodapé em Locais do tema e salve isso. Então vamos adicionar o andador de navegação ao arquivo de rodapé da mesma maneira que fizemos na seção de cabeça. Então vá até o header.php, e então se procurarmos a barra de navegação, que é tudo, desde wp_nav_menu até os colchetes de fechamento, que está lá. Então copie essa seção e, em seguida, vá para o footer.php, e, em seguida, procure a navegação que está logo acima dos ícones de mídia social. Se localizarmos a lista não ordenada e, em seguida, podemos excluir toda a seção lista não ordenada com a seção Sobre, o Contato, o Blog e a seção Últimas Notícias. Então exclua-os, mas certifique-se de deixar o contêiner externo, em seguida, adicione as tags PHP. Em seguida, dentro das etiquetas, cole no navwalker. Este não precisa de tanta informação quanto o cabeçalho. Para o nome do menu, este vai ser o rodapé. Podemos excluir o local do tema e também a profundidade porque é apenas um nível. Eu só vou trazer isso para cima. O contêiner é a lista não ordenada que foram excluídas antes. Então mude de div para UL. Nós não precisamos subir a classe do menu, o ID do contêiner ou a classe do contêiner para este, que possamos removê-los, e tudo o mais que podemos deixar como está, e então salvar isso. Apenas para terminar o menu de rodapé, vamos adicionar as duas últimas páginas, então vá para páginas e depois Adicionar novo. Em seguida, vamos adicionar na página Sobre Nós, então Sobre Nós e, em seguida, clique em “Publicar” e, em seguida, “Adicionar novo”. A última página que vai para o Menu Rodapé é a página Fale Conosco, então entre em contato conosco e depois “Publicar”. Em seguida, adicione essas duas últimas páginas ao rodapé, então Aparência e Menus, e selecione o Menu Rodapé, em seguida, selecione a página Fale Conosco e a página Sobre Nós que acabamos de criar aqui, “Adicionar ao Menu” e, em seguida, reorganize-os em a ordem correta. Então, a página superior era Sobre Nós, então era Fale Conosco, depois o Blog, e as Últimas Notícias, em seguida, clique em “Salvar Menu” e, em seguida, ir para o site. Então, parece que conseguimos adicionar essas páginas, o menu superior também, então vamos removê-los em apenas um momento. Mas se formos até o fundo, podemos verificar se está tudo funcionando corretamente. Então selecione o Blog, há nossa seção de blog e as últimas notícias. Isso parece bem. Ainda não criamos a página Sobre Nós ou Contato. Vamos apenas remover esses links de menu do topo. Então, de volta ao Painel, Aparência e Menus. Em seguida, selecione o Menu Principal na parte superior, e podemos facilmente removê-los do menu selecionando-os. Em seguida, selecione e remova. Faça o mesmo para a página Fale Conosco e salve esse menu. Então está olhando como deve agora. Agora, eu tenho todos os menus funcionando corretamente no site. Obrigado por assistir. Cuide-se. 34. Adicionando os widgets da barra lateral: Bem-vinda de volta. Neste vídeo, vou mostrar-lhe como tornar a nossa barra lateral mais modular adicionando widgets WordPress. Um widget barra lateral é essencialmente apenas um dos blocos que já criamos, mas vamos colocá-lo no WordPress. Isso dá ao administrador do site a chance reorganizar e alterar coisas sobre na barra lateral, se ele quiser. A maneira de começar, é se formos para os Codecs e se procurarmos a seção sobre Wigdetizing Temas. É muito fácil obter os widgets trabalhando em nosso tema. No momento, se formos para o Painel e, em seguida, se entrarmos na Aparência, não há opção para os widgets. Vamos mudar isso, adicionando-o ao nosso arquivo de funções. Se procurarmos a seção sobre como registrar uma área de widget e, em seguida, copiar o código de exemplo e, em seguida, passar para o functions.php. Eu vou colar isso em pouco antes da função de texto do recurso. Cole isso aí. Não precisamos das tags php porque elas já estão na estrela no final do arquivo de funções. Podemos removê-los. Então é apenas um caso de mudar alguns dos valores, então o nome da nossa barra lateral vai ser barra lateral. Então o ID, podemos mudá-lo para o que quisermos porque usamos a barra lateral na seção do bloco deste lado, eu vou chamá-lo de barra lateral. Vou chamar isso de blog. Então, quando é um WordPress o que vai antes e depois do widget. Se você entrar no sidebar.php, e o que estamos basicamente fazendo é substituir esses módulos da barra lateral. Precisamos dizer ao WordPress todo o conteúdo dentro desses módulos é cercado pela div com uma classe de módulo de barra lateral. Vamos mudar a div antes do widget para ter a classe igual ao módulo da barra lateral, e esta é a div de fechamento. Agora isso é bom. Então, antes e depois do título, voltamos para a barra lateral. O título como um cabeçalho h4 ou nível 4. Altere antes do título para ser h4, e depois h4 após o título e, em seguida, salve isso. Se você voltar para os codecs WordPress e, em seguida, role para baixo até a como exibir novas áreas de widget, precisamos copiar o código de exemplo e colá-lo em nossa barra lateral. Copie esta seção. Na verdade, eu só vou copiar tudo sem as tags php. Copie e vá para o sidebar.php e, em seguida, role até o topo e cole isso antes de todo o resto do código. Damos à nossa barra lateral o ID de sidebar_blog. Mude para áreas onde o direito de casa é. Vamos mudar isso para sidebar_blog, e o mesmo na parte inferior, vamos mudá-lo para sidebar_blog também. Então guarde isso. Agora, se voltarmos ao Painel e pressionarmos “Atualizar”, você verá que, quando formos para a Aparência, agora temos uma opção de widgets. Selecione isso. Agora podemos ver uma lista de todos os widgets disponíveis, e também podemos fazer os personalizados. Tudo o que precisamos fazer é apenas arrastá-los para a barra lateral, e a maioria dos widgets que adicionamos eles vão ser os personalizados, modo que eles são os mesmos que o nosso site bootstrap. Mas o primeiro que queremos adicionar é uma caixa de pesquisa. Ainda não temos uma caixa de pesquisa no site, então por que não usar um widget pré-fabricado? Basta arrastar a caixa de pesquisa para a barra lateral, e eu vou criar o widget Sobre nós. Faremos isso com a caixa de texto. Arraste o texto para a barra lateral. O título para isso era Sobre. Para o conteúdo, podemos copiar o texto do sidebar.php. Copie todas as etiquetas e cole-as lá dentro. Não precisamos da tag p para que possamos removê-los. Quero fechar a etiqueta p ali. Salve-os e selecione “Adicionar parágrafos automaticamente”. Podemos fechar essa agora, e também a caixa de pesquisa. Antes de avançarmos, vamos verificar o site, e ver se está tudo funcionando bem. Vá para o blog. Parece que temos um erro no sidebar.php. Vá para o sidebar.php e está na linha 5. Parece que estamos perdendo algumas tags de abertura, fechamento. No topo, abra o php, e então isso é o fechado lá dentro. Com o início da tag, fechando e começando tag lá. Só precisamos fechar isso e economizar, e isso deve ficar bem agora, então atualize. Bom. Agora temos a caixa de pesquisa na barra lateral. Temos a seção Sobre Nós mostrando duas vezes. Vá para a barra lateral e exclua o módulo da barra lateral para a seção Sobre Nós e salve. Agora ficamos com o widget Sobre Nós. Em seguida, faremos os arquivos e as categorias. De volta ao WordPress, no Painel, Aparência e Widgets. WordPress torna muito fácil para nós nos arquivos e categorias. Você pode ver à esquerda os arquivos e categorias já foram criados para nós. Arraste os arquivos e dê o título. Em seguida, salve e faça o mesmo com as categorias. Solte a ponta logo abaixo. Dê um título de categorias e salve. Então podemos apagar estes agora do nosso rodapé. O módulo da barra lateral para arquivos, eu posso ir e também para as categorias, nós vamos fazer isso também. Por último, vamos fazer a seção Seguidores, este vai ser um widget de texto como a seção Sobre Nós. Enquanto estamos na barra lateral, vamos copiar o conteúdo. Precisamos copiar a fonte de alguns ícones para Facebook, Google, Pinterest e YouTube. Corte-os para fora. Eu posso simplesmente apagar o módulo agora, e salvar isso. De volta aos widgets, arraste mais uma caixa de texto para a barra lateral. O título é Seguidores. Cole o conteúdo e pressione “Salvar”. Em seguida, de volta ao blog e verifique, está tudo funcionando. Bom com a seção Busca, Sobre, Arquivos, Categorias e mídia social. Ótimo. Muitas dessas barras laterais parecem praticamente a mesma de antes, agora é muito mais modular e permite que o usuário conectado ou o administrador do site seja capaz de alterar o sobre ou adicionar novos widgets. Isso é praticamente tudo feito fazer esta parte. Eu só quero adicionar um pouco de CSS, especialmente para a caixa de pesquisa só porque o botão Pesquisar precisa de um pouco de espaço. Também farei com que a caixa de pesquisa pareça mais os botões de entrada que usamos no site do Bootstrap. Vamos passar para o style.css e, em seguida, copiar um comentário. Então faremos uma seção lateral. Logo acima do estilo móvel, altere o comentário para ser barra lateral. Cada um dos módulos da barra lateral tem uma classe de módulo da barra lateral. Vamos começar com isso. A classe do módulo da barra lateral, e então vamos começar com a entrada. Para espaçamento, vamos ter alguma margem de 10 pixels. Vou definir a largura máxima para 100 por cento. Poupe e dê uma olhada. Agora há um pouco de espaçamento em torno das entradas. Em seguida, precisamos obter o ID da classe para o botão de entrada. Vá para as ferramentas do desenvolvedor, selecione a lupa e clique lá. Podemos ver que temos o ID de searchsubmit e, em seguida, voltar para a folha de estilo. Crie a ID. Na verdade, em vez de colocar os estilos ou duplicar os estilos na barra lateral, vamos apenas adicioná-los, abrir a seção global. Se procurarmos os estilos para o botão, Padrão, vamos usar exatamente os mesmos estilos para isso. Também podemos acrescentar isto no final. O ID foi searchsubmit e, em seguida, salve isso. Também adicionaremos o pairar. ID de searchsubmit e, em seguida, passe o mouse. Salve isso e atualize. Agora isso está funcionando, então temos o mesmo estilo para o botão, e o pairar também funciona. Isso vai, isso está tudo funcionando e é assim que você adiciona widgets personalizados para temas WordPress. 35. Página “Sobre nós”: Neste vídeo, vamos criar a página Sobre Nós. Nós já temos o modelo para isso no design bootstrap, por isso vai ser bastante simples de fazer. Vá para o seu editor de texto, crie uma nova página e salve esta página como um page-about.php, e para começar, vamos copiar o modelo de notícias da página. Então copie o conteúdo e cole isso no modelo sobre. Não precisamos da barra lateral ou da seção do blog, então podemos excluir tudo dessa página. Excluiremos isso e alteraremos os comentários na parte superior para que o nome do modelo seja Sobre Nós. Em seguida, vá até o Painel do WordPress e, em seguida, vamos adicionar este modelo à página que criamos. Então vá para as páginas e, em seguida, procure a página Sobre Nós e clique em Editar. Em seguida, podemos alterar o modelo para o modelo Sobre nós e, em seguida, atualizar essa página. Agora podemos ir ao site do Bootstrap. Se abrirmos a pasta e, em seguida, abrir a página Sobre Nós no editor de texto. Vou encolher isso e, em seguida, arrastar about.html para o editor de texto, e, em seguida, podemos copiar toda a seção e copiar toda a seção Sobre Nós. Não precisamos do cabeçalho. Nós já temos isso. Não precisamos da seção de recursos. Isso é feito no WordPress. Copie a seção Sobre Nós, até a tag de seção de fechamento. Copie isso e, em seguida, volte para a página Sobre Nós e cole isso entre o cabeçalho e o rodapé. Em seguida, só precisamos corrigir o caminho do arquivo de imagem, então eu vou apenas copiar o PHP da página de índice. Basta procurar uma imagem. Na verdade, precisamos da primeira página para isso. Então copie o caminho do arquivo PHP e, em seguida, vá para a página About Us. Começaremos do início. Vamos usar a imagem divisor para começar, então cole isso e certifique-se de que você tem a barra antes da pasta de imagens. Em seguida, role para baixo. Adicione isto a todas as outras imagens. Em seguida, clique em Salvar e, em seguida, vá para a página Sobre Nós e veja se isso está funcionando. Então, até a parte inferior do menu de rodapé, a seção Sobre Nós. Parece que tudo está funcionando. Só precisamos mudar o texto na imagem em destaque e fazemos o nas funções, da mesma forma que todo o resto. Então encontre a função de texto do recurso. Vamos permitir que o WordPress puxe o título da página da mesma forma que fizemos com o modelo de notícias. Então teremos o nome do site Tranquil Spa, e a próxima linha será o título da página. Se adicionarmos isso à mesma instrução elseif, copie o modelo de página. Copie cada modelo de página e, em seguida, os colchetes, e coloque o símbolo de todos, que é os dois pipes, e, em seguida, cole isso em. Mas desta vez, o modelo de página é para a página-sobre. Salve isso e atualize a página. Isso tudo está funcionando. Temos o título do site e, em seguida, o título da página abaixo. Está tudo acabado agora com a página Sobre Nós. 36. Página “Entre em contato conosco”: Esta é a página Fale Conosco que criamos no modelo Bootstrap. Agora vamos converter isso para WordPress de uma forma semelhante à página de arco que criamos no último vídeo. Então, vai ser bastante simples converter agora para a maior parte do trabalho duro no Bootstrap. Então, como de costume, vamos criar uma nova página e serviços page-contacts.php. Em seguida, vamos usar o modelo de notícias da página para começar com. Então copie todo o conteúdo e cole-o. Em seguida, faça backup para os comentários. Faremos o mesmo que antes, mas desta vez com alterações no Fale Conosco. Então guarde isso. Se você passar para o WordPress e, em seguida, para o painel e, em seguida, procurar a página que criamos. Então, o Fale Conosco e edite. Em seguida, altere o modelo que vamos usar para ser Fale Conosco e, em seguida, obtenha essa página. Em seguida, faça backup para o editor de texto. Então vamos excluir toda a seção de bloco e também a barra lateral, todo o caminho até o rodapé. Então, deixando o cabeçalho e o rodapé dentro Em seguida, precisamos encontrar a página Fale Conosco que criamos no Bootstrap. Então volte para a pasta traquil-bs. Em seguida, arrastando o contato ou HTML para o editor de texto. Então vamos copiar esta seção que é a barra de contato. Portanto, procure os comentários da seção Fale Conosco. Em seguida, copie todo o caminho até a tag de fechamento e seção, que é um pouco antes do rodapé. Então, copie isso. Em seguida, cole isto entre o cabeçalho e o rodapé. Em seguida, de volta ao topo da página. Então, algumas pequenas mudanças para fazer nesta página. Primeiro de tudo, temos o cabeçalho de nível dois, que é apenas texto estático. Então vamos mudar isso para ser WordPress php. Então php, o título de sublinhado. Então feche. Agora use php, é puxar o título da página. Precisamos corrigir os caminhos dos arquivos de imagem. Então eu vou voltar para a primeira página e também copiar a mesma parte que fizemos da última vez, que é o php. Novamente, não se esqueça da barra. Então, de volta para a página de contato e cole isso antes da imagem de divisão. Eu não vejo mais isso. Não, acho que está tudo bem. Então vamos ver se isso está funcionando. Então volte para o local. Em seguida, no menu de rodapé, selecione Página de contato. Ok, bom. Então, a única coisa a fazer é a seção de tecnologia de recursos. Então, devemos saber como fazer isso agora, se você for para Functions.php, e usaremos o mesmo nome de informações do blog e também o título da página. Então, é muito simples de adicionar. Podemos adicionar isso à mesma função. Então, copie este modelo de página e cole abaixo. Precisamos colocar o link incrível e mudar a página sobre os contatos da página. Está bem. Então salve e atualize. Então essa é a página Fale Conosco agora concluída, e junte-se a mim no próximo vídeo quando criarmos a página de queda. 37. Página personalizada de erro 404: Este vídeo é sobre a criação de uma página 404 personalizada. Uma página 404 é onde você vai quando a página não é encontrada. Então, essencialmente, quando você está um pouco perdido no site. Se formos para o URL na barra superior e escrevermos uma página não reconhecida, como um monte de A's e, em seguida, clicar em “Enter”, então esta é a página que você é levado para. Temos o loop WordPress e algumas das informações da barra lateral, que é um dos modelos de backup. Mas queremos algo um pouco mais agradável e também talvez algumas opções e alguns links para colocar o usuário de volta no caminhão. Se formos para o Editor de Texto e, como de costume, criar uma nova página e salvar esta página como 404.php, e copiar a página Sobre. Usamos isso como base para nossa página 404. Cole isso e salve. Altere o nome do modelo na parte superior. Vamos chamar esta página 404. Refresque isso. Agora temos o modelo About Us sendo usado quando encontramos a página 404. Primeiro de tudo, vou começar na área de texto do recurso. Basta adicionar um pouco de texto apenas para que o usuário saiba que eles estão perdidos e que eles precisam voltar aos trilhos. Vá para o function.php e, em seguida, na chave de fechamento após o título, vamos adicionar outra instrução elseif. Mas desta vez será se a página for 404 e depois as chaves. Então, se a página é a página 404, vamos apenas igualar algum texto. Você pode colocar o texto que quiser, mas eu vou colocar “Opa, estamos um pouco perdidos.” Então veja se está funcionando bem. Temos um pequeno problema, vamos verificar e ver o que é. Acho que falta um ponto e vírgula no final. Agora temos o texto aparecendo lá. O que eu vou criar é eu vou excluir o texto de amostra, e então nós vamos criar quatro divs separadas, que você vai compartilhar com alguns links. Os links serão para Arquivos, Categorias, Postagens Recentes, tudo pelas tags. Nós vamos colocar esses links com os widgets de uma maneira semelhante a como nós os usamos na barra lateral. Vá até o modelo 404. Em vez de About Us como o cabeçalho de nível 2, vamos apenas colocar um texto para dizer, “Vamos voltar à pista”. Abra o php_echo e feche o PHP. O texto vai ser, “Vamos voltar à pista “com dois pontos no final. Há um problema lá. Vamos dar uma olhada. Como usamos uma citação simples, precisamos mudar as cotações ao redor para ser o dobro, e então não se esqueça do ponto e vírgula no final. Parece que agora temos o, Vamos voltar à pista nível 2 rumo. Podemos excluir o texto de exemplo após o Lorem ipsum. Exclua o primeiro parágrafo e também o segundo parágrafo, mas mantenha a linha circundante vamos reutilizar. Vamos criar quatro divs separados para os widgets. Então adicione uma div com uma classe, a classe bootstrap de col-sm-6. Em seguida, basta copiar esta div e colar mais três vezes. Então temos quatro seções. Nós tocamos em widgets mais cedo no curso na seção da barra lateral. Nós também podemos usar widgets em várias partes oferta do sinal. Vamos adicioná-los aqui. Abra o PHP e então ele está puxando o widget. Usamos o_widgets e, em seguida, entre colchetes, usamos o nome do widget que queremos puxar. Primeiro de tudo, para obter os arquivos, usamos WP_Widgets_Archives, e depois um ponto-e-vírgula no final de lá. As categorias são exatamente as mesmas. Mas em vez de arquivos são categorias, e então nós forneceremos um link para postagens recentes. Então, colem isso. Mas desta vez entre parênteses, é WP_Widgets, depois Postagens Recentes ou Recent_Posts. Em seguida, para obter uma lista das tags disponíveis, em vez de arquivos, é Tag_Cloud. Então Tag_Cloud e salve isso, em seguida, atualize o navegador. Parece que há um problema com as publicações recentes. Isso precisa ser recente, então remova os s no final. Lá vamos nós. Agora o usuário pode voltar a uma página de trabalho selecionando alguns dos links abaixo. By the way, se você quiser usar quaisquer widgets diferentes ou links diferentes, você pode encontrá-los nos codecs sob a seção widget. Você não precisa usar os quatro que eu mostrei lá. Agora que tudo está funcionando, eu só quero adicionar um pouco de estilo, apenas para fazer com que ele se encaixe com o resto do site. Vamos colocar a mesma borda de um pixel com os cantos arredondados em torno de cada uma das quatro seções. Vá para o style.css e ele criará uma seção 404. Copie qualquer um dos comentários e, em seguida, vá direto para baixo. Vou fazer com que os comentários sejam a página 404. Então os widgets, você tem uma classe de widgets. Para manter o estilo consistente, vamos usar os mesmos estilos que usamos para os módulos da barra lateral ou da barra lateral. Se você ir até a seção da barra lateral, procure a classe de módulos da barra lateral e, em seguida, copie todos estes. Em seguida, cole-os de volta na seção do widget. Guarde isso e dê uma olhada. Então precisávamos disso agora, que parece muito melhor, e parece um pouco velho com as caixas em alturas iguais. Então, só para fazer isso parecer um pouco melhor, eu vou adicionar uma altura mínima de 300 pixels e, em seguida, atualizar isso. Agora certifique-se de que as seções com pouco conteúdo ocupam um pouco mais de altura. Obrigado por assistir, e esse é o fim da nossa página 404. 38. Organize o nosso código usando a função “get template part”: Ao construir sites ou fazer qualquer tipo de codificação em geral, uma coisa que queremos tentar evitar é redigitar o mesmo código uma e outra vez. Se entrarmos na nossa página inicial, temos a secção das instalações. Nós usamos é um par de vezes no site agora. Então reutilizámos o mesmo código. Então temos que ir na primeira página. Se também descermos para a página sobre nós, reutilizaremos a mesma seção na parte inferior. Também está na página 404 que criamos no último vídeo. Uma maneira de reduzir a quantidade de linhas de código em nosso site, e tornar nosso site um pouco mais organizado, é usar a parte get template. Isto é basicamente apenas uma seção do nosso site, que você coloca em seu próprio arquivo. Podemos então chamá-lo em nossa página da mesma forma que fizemos com o cabeçalho e o rodapé. Para obter o código para esta seção, vamos criar uma nova página. Vou chamar isso de content-facilities.php. Vamos começar indo para a primeira página do nosso site. Se procurarmos a secção das instalações, que é esta parte aqui. É o div com a classe de fileira nas instalações. Procure a tag de fechamento e linha. Então corte esse conteúdo. Então corte isso certificando-se de que você ainda deixar o recipiente no lugar. Então, no arquivo que acabamos de criar, podemos colar isso e depois salvar isso. Em seguida, volte para a primeira página, e na mesma seção que acabamos de remover este conteúdo, abra as tags PHP. Em seguida, usamos gets_templates_part. Então, entre colchetes, usamos o nome do modelo que acabamos de criar. Suas instalações de conteúdo. Vamos guardar isso e ir para a primeira página e ver se está funcionando bem. Sim, então está tudo aí. Só para mostrar que ele está puxando do modelo. Se cometermos um erro ortográfico lá e depois atualizarmos. Agora você verá que isso está sendo removido. Vamos corrigir isso e salvar. Copie esta seção do PHP, e faremos o mesmo na página 404 na página Bowers. Então vamos começar com a página sobre, em seguida, olhar para a div com a classe de instalações. Encontre nas tags close e row, e exclua esta seção e, em seguida, cole-a no PHP. O mesmo com a página 404, assim como a marca de fechamento de instalações de linha. Coloque colar na parte do modelo get e clique em “Salvar”. Vamos ao site e ver se está funcionando. Sabemos que tudo a partir da página está funcionando bem. Vamos para a página Sobre Nós e só lá. Vamos digitar um endereço que reconheceremos e verificamos para a página 404. Há a secção das instalações outra vez no fundo. Podemos usá-lo com qualquer seção do site que você deseja ou se você criar em seu próprio tema personalizado. Se você achar que você criar no mesmo HTML uma e outra vez, basta colocá-lo em seu próprio modelo e puxar para dentro você começa parte do modelo. Isso realmente torna o seu site muito mais organizado. Então é isso, e eu vou vê-lo no próximo vídeo onde vamos criar o modelo personalizado para a página de pesquisa. 39. Modelo de pesquisa personalizada: Bem-vindos de volta, rapazes. Este vídeo é tudo sobre a criação do modelo de pesquisa. Alguns vídeos atrás, quando criamos o widget da barra lateral, também adicionamos uma caixa de pesquisa. Se você procurar algo na caixa de pesquisa, como notícias, você pode ver que ele deve funcionar praticamente fora da caixa. Não há nada que realmente precisamos fazer para fazer isso funcionar. Mas uma coisa que podemos fazer é dar ao nosso tema um modelo de pesquisa personalizado porque no momento, é apenas padrão de volta para a página de índice. É por isso que temos um layout bem parecido com o blog. O que é bom por enquanto, porque queremos que a página de pesquisa se pareça com o blog. Mas vamos criar um modelo personalizado para que possamos adicionar o texto do recurso na parte superior e também mostraremos o termo na seção de recursos que o usuário pesquisou e também imprimir uma instrução no caso de não haver resultados de pesquisa encontrados. sobre o Editor de Texto, nova página, salve como um search.php. Parece muito semelhante à página do blog. Copie o conteúdo da página de índice para começar e cole-o em. Apenas para verificar se o modelo de pesquisa está realmente funcionando e ele está substituindo a página de índice basta digitar algum texto aleatório lá e salvar e, em seguida, atualizar. Lá vamos nós. Podemos apenas ver que o texto que criamos está no topo lá e isso significa que o modelo está entrando em vigor. Vamos mover isso agora. Praticamente todo o trabalho que precisamos fazer agora para este modelo está na página de funções, porque vamos estar trabalhando na seção de cabeçalho para criar o texto do recurso. Vá até o functions.php e, em seguida, abaixo do 404, vamos adicionar outras instruções elseif apenas na chave de proteção lá. Então elseif é_search. No topo do texto, vamos apenas fazer um Blog Oficial Tranquil Spa. Copie isso e cole isso e vamos ver se isso está funcionando. Abaixo disso, adicionaremos uma tag break e um ponto e vírgula no final. Então, por baixo disso, vamos imprimir os resultados da pesquisa ou o termo de pesquisa que o usuário procurou e em vez de ecoar isso para o navegador, vamos usar printf e, em seguida , nos colchetes, estamos vai começar digitando algum texto simples. resultados da pesquisa para e, em seguida, os dois pontos. Em seguida, para mostrar nos resultados da consulta de pesquisa use o percentual e os s e, em seguida, coloque uma vírgula após esta seção e, em seguida, use a função get_search_query, então get_search_query e tudo isso precisa ser cercado por colchetes. Então um antes, um no final com ponto e vírgula. A razão pela qual estamos usando printf em vez do eco é porque nós o usamos na formatação nos resultados da pesquisa e printf nos permite fazer isso. Salve isso e verifique se está funcionando pressionando “Atualizar”. Você pode tentar isso mais algumas vezes para verificar se está funcionando. Temos a notícia como o termo de busca atual, então vamos mudar isso para cabelo e isso parece estar funcionando bem. Vou fazer mais um. Eu não vou postar isso, então nós vamos apenas verificar Lorem, o Lorem Ipsum, e nós devemos receber muitos posts para isso. Está tudo funcionando bem. Se você notar quando procuramos algo antes, como cabelo, recebemos a mensagem de erro de desculpas nenhuma postagem correspondeu aos seus critérios. Queremos tornar isso um pouco mais específico para a pesquisa do que para os posts. Vá até o search.php e, em seguida, role para baixo para a parte inferior, e então encontramos a mensagem de erro lá, então basta excluir isso e, em vez disso, vamos adicionar nossa própria mensagem personalizada de desculpe, nenhuma correspondência para e, em seguida, ele está puxando a palavra que o usuário procurou. Vamos apenas adicionar no final lá a função de get_search_query e, em seguida, o ponto para concatenar, pequeno texto sobre isso então comece abrindo as aspas novamente e uma vírgula de, por favor, procure novamente. Vamos guardar isso e dar uma olhada. Há uma mensagem de erro lá, então vamos dar uma olhada nisso. Foi um erro ortográfico lá, que deve ser get_search_query. Agora que está funcionando temos a mensagem de erro. Desculpe, não há correspondência para, Eu só vou precisar para o espaço após a palavra para e, em seguida, atualizar. Para o cabelo, por favor, procure novamente. Obrigado por assistir, e é assim que criamos uma página de pesquisa personalizada no WordPress. 40. Campos personalizados avançados parte 1: Bem-vindo a este vídeo em campos personalizados avançados. Até agora todas as alterações que fizemos até agora para o tema, fizemos codificação no editor de texto, embora se o usuário final do seu tema quiser alterar algumas informações, algum texto ou algumas imagens, precisamos fornecer uma maneira para que eles alterem conteúdo de forma rápida e fácil sem saber como codificar e uma ótima maneira de fazer isso é adicionando campos personalizados avançados. Se você passar para o site, que é advancedcustomfields.com, este é o site para um plugin muito fácil de usar, que vamos implementar em nosso tema neste vídeo. Como este é um plugin, podemos adicionar isso facilmente no painel. Vá para o painel, selecione plug-ins e adicione novo. No caso de você não ter usado um plugin WordPress antes, é apenas uma maneira de adicionar funcionalidade extra para a chamada WordPress, e há milhares de plugins WordPress diferentes disponíveis, e realmente vale a pena uma pesquisa rápida para encontrar alguns ótimos recursos para adicionar. Vou procurar campos personalizados avançados e, em seguida, Enter. A versão que vou usar é a primeira que aparece, que é os campos personalizados avançados, e depois selecione “Instalar agora”. Depois de receber a mensagem de sucesso na parte inferior, clique em “Ativar Plugin”. Agora que isso está ativado, temos uma nova opção no painel, então vá até os campos personalizados e clique nisso. Vou mostrar a vocês como fazer isso passando pela primeira página, alterando algumas das áreas lá, como o texto nas seções do escritório. Vou inserir um grupo de campos, que é um grupo de campos que você deseja alterar. Selecione o botão “Adicionar novo” e mantenha isso organizado. Vou chamar esta seção de primeira página, em seguida, publicar isso, e então eu vou adicionar um campo, e um campo é uma das áreas que você deseja alterar. Se entrarmos na nossa primeira página, então voltamos para o anfitrião local e para o site Tranquil. Vou começar alterando o texto do recurso na frente, e isso vai ser um campo. De volta ao painel, o rótulo do campo é o nome, então vamos chamar isso de texto do recurso, e se você apenas pressionar Tab, WordPress irá gerar automaticamente o nome do campo, e este é o nome que adicionaremos ao código mais tarde. O tipo de campo é ok como texto, e, em seguida, podemos adicionar algumas instruções que aparece no painel para o usuário. Eu vou mudar isso para usar este campo para alterar o texto da característica principal, e obrigatório, sim, você não estará sempre lá. Você pode criar um valor padrão se quiser, mas como ele é necessário, ele não é realmente necessário por enquanto. Adicione este campo ali. Agora temos nosso campo de texto de recurso incluído, e temos o nome do campo de feature_text. Vou apenas copiar esse nome e, em seguida, na seção de função, se procurarmos a função FeatureText, e na seção da primeira página, podemos excluir esta mensagem de spa premium totalmente responsivo. Exclua isso e, em seguida, colocamos na função, o_field, e, em seguida, entre colchetes, colocamos no nome do campo que acabamos de criar. Nós tínhamos copiado isso antes, então cole em feature_text e salve. Se você voltar para a página inicial e atualizar. Não há nada lá por enquanto porque precisamos adicionar isso ao painel. Como só queremos que esses campos personalizados apareçam na primeira página, precisamos alterar o local para ser o tipo de página igual à primeira página, e depois atualizá-lo, então volte ao topo e pressione “Atualizar”. Agora, se formos para a primeira página e, em seguida, editar a página e, em seguida, rolar para baixo, devemos ver a seção de texto do recurso que acabamos de criar. Agora temos isso como parte do painel. O usuário pode adicionar ou alterar diferentes partes do site sem conhecer qualquer código. Você pode colocar o cabeçalho de volta, então TOTALMENTE RESPONSIVO, e a tag break, PREMIUM SPA THEME, ea tag break, FOR WORDPRESS, e atualizar e, em seguida, exibir a página. Lá vamos nós, então esse é o nosso texto de volta no lugar. Se voltarmos para editar a página, uma coisa que eu só quero remover é o editor de conteúdo porque nossa página é gerada através do modelo. Para remover isso, basta ir para os campos personalizados avançados e, em seguida, na seção ocultar na tela, basta verificar o editor de conteúdo, depois atualizar e, em seguida, atualizar a seção de edição da página, e agora isso acabou. Lá vai você, então é assim que você adiciona um campo personalizado no WordPress. Continuaremos a primeira página no próximo vídeo. Começaremos em campos personalizados para a seção mais recente do Office. 41. Campos personalizados avançados parte 2: Agora, entendemos um pouco mais sobre como usar campos personalizados avançados alterando a área de texto em destaque. Vamos continuar com a primeira página e vou mostrar-lhe como fazê-lo para a seção de ofertas mais recentes. Volte para o Dashboard e, em seguida, a guia Campos personalizados e, em seguida, clique na “Página inicial”. Porque nós vamos estar criando as ações de oferta especial grátis, o que você vai ser bastante semelhante, eu vou adicionar uma guia para a seção está desligado. Adicione um novo campo e o rótulo para isso pode ser Oferta 1 e o tipo de campo vai ser uma guia e, em seguida, adicione isso. Em seguida, uma segunda guia para a Oferta 2, e alterar o campo de texto para ser uma guia, eo mesmo para o número de oferta 3. Novamente, altere isso para ser um separador e, em seguida, feche. Agora, vamos começar com a Oferta 1. Desta vez vamos adicionar um campo. Este campo será o preço de oferta. Vamos escolher o nome do campo gerado. Porque este é o preço, precisamos alterá-lo de texto para ser número, necessário? Sim. Vou fechar o campo. Agora temos o preço da oferta. Esta vai ser a primeira oferta. Então, podemos apenas arrastar e colocar isso na guia Oferta 1. Então vamos criar agora o nome da oferta. Isso pode ser ok como texto, necessário? Sim, e depois feche. Em seguida, colocar é o nome da oferta logo abaixo do preço da oferta. Então, como cada uma dessas ofertas especiais tem duas linhas de texto, faremos dois campos separados. Então oferta Linha 1, vamos colocar isso como necessário também. Em seguida, adicione também a Linha de Oferta 2, está tudo bem. O texto é obrigatório? Sim. Vou fechar nossos campos e também fechar esse. Em seguida, arraste-os para cima na primeira guia. Agora, porque vamos usar os mesmos campos para a oferta 2 e oferta 3. Se nós apenas entrar na oferta 1 campos, poderíamos apenas clicar em “Duplicar”. Vou manter o texto do preço da oferta como o mesmo. Mas precisamos mudar o nome do campo, que eu preciso ofer_price_2, em seguida, fechar. O que acabamos de criar, que é o offer_price_2, em seguida, arraste isso para baixo abaixo da guia Oferta 2, que está apenas lá. Debaixo do preço de oferta, duplicaremos o nome da oferta. Eu apenas removo a cópia e altero isso para offer_name_2 para o nome do campo exclusivo. Então feche isso. Offer_name_2, arraste isso para a guia Oferta 2 abaixo do preço. Então eu vou precisar duplicar a Linha de Oferta 1 e a Linha de Oferta 2. Então duplique essa. Oferta Linha 1, mantenha-o assim. Isso eu vou mudar o nome exclusivo para offer_2_line_1 e, em seguida, fechar. Então offer_2_line_1, arraste isso para baixo para a segunda seção novamente, logo abaixo do nome, e podemos duplicar isso. Desta vez, sua Linha de Oferta 2. Desta vez, sua offer_2_line_2, e close up. Espero que isso faça sentido até agora. Então nós temos a guia para a linha de oferta 1 e a primeira oferta tem um preço, um nome e, em seguida, as duas linhas, e, em seguida, uma segunda guia para a oferta 2 e novamente, temos o preço, nome, e as duas linhas, certificando-se de que cada um tem um nome de campo exclusivo. Agora, só precisamos fazer uma terceira vez para a oferta 3. Então duplique o preço, mantenha o nome o mesmo abaixo offer_price_3. Em seguida, feche esse campo e arraste o offer_price_3 para baixo até a oferta 3. Após o preço da oferta, precisamos do nome da oferta novamente. Então duplicamos offer_name_3. Em seguida, feche isso e arraste o nome da oferta 3 abaixo do preço. Então, estamos quase terminando agora, só precisamos copiar a linha 1 e a linha 2. Então ofereça a linha 1 e, em seguida, o nome do campo é offer_3_line_1 e, em seguida, feche, e arraste isso para o seu lugar certo e duplicar a linha 2, desta vez o nome exclusivo é offer_3_line_1 e, em seguida, arraste isso para baixo. Agora, nós não apertamos o botão “Captura”. Vou te mostrar por que vamos colocá-lo em guias agora. Se você for até a página inicial e, em seguida, selecionar “Editar página”, agora temos a Oferta 1, a Oferta 2 e a Oferta 3 em guias individuais, enquanto que se não colocássemos as guias, teríamos uma longa lista de campos e isso pode ficar confuso para o usuário. Então, se entrarmos no front-page.php e, em seguida, podemos adicionar o PHP para vincular aos campos personalizados. Então vá até a seção de ofertas mais recentes que vai realmente decidir, mas para dar-lhe um pequeno quarto. Primeiro de tudo, se excluirmos o preço da primeira oferta e, em seguida, abrir o PHP, e, em seguida, usar o mesmo que o último vídeo, the_field, e, em seguida, entre colchetes, digite o nome do campo. O primeiro, se voltarmos ao Painel nos Campos Personalizados, o preço da oferta tinha o nome do campo da oferta neste preço de chamada. Vamos ligar isso lá, e então copiar isso e colar isso no lugar do título de nível 3. Isso é chamado de nome da oferta. Então mude offer_price para offer_name. O Family Pool, cole o PHP em, e que é o offer_line_1. Great Day Out é alterado para offer_line_2. Isso é tudo para o primeiro campo, então se nós salvar isso e, em seguida, ir para a página inicial e rolar para baixo. Agora você deve ver que temos uma seção de ofertas mais recentes vazia porque não colocamos o texto no lugar na página Editar. Oferta 1, porque está tudo em branco, não temos nada aparecendo, mas vamos consertar isso em breve. Continue indo para a segunda oferta. Este é offer_price_2 e, em seguida, offer_name_2. O texto da primeira linha. Precisamos mudar isso para offer_2_line_1, depois offer_2_line_2, depois para baixo para o terceiro. Por último, o preço. Então offer_price_3. Em seguida, abaixo dele, offer_name_3. Depois o texto. Então, sua offer_3_line_1. Então, por último, é offer_3_line_2. Então guarde isso. Agora, nossa página inicial deve estar em branco ou pelo menos a oferta deve estar em branco de qualquer maneira. Tudo o que resta agora é colocar o conteúdo de volta na seção Editar página. Então, se quiser ir e fazer isso sozinho, fique à vontade para fazer isso. Se não, siga-me. Em primeiro lugar, o preço da oferta era de US $60, o nome da oferta era OFERTA DA FAMÍLIA, linha 1 era Family Pool, depois Great Day Out, em seguida, ir para a oferta 2. Este foi $120, o nome da oferta era PARA A NOIVA, linha de oferta 1 era Hair & Make Up, linha 2 era o Pacote Pamper Completo e, em seguida, na oferta 3. O preço foi de US $90, e este foi Weekend Pass, linha 1 foi Modern Facilities, em seguida, linha 2 foi Perfect Gift. Em seguida, atualize isso e vá para a página inicial. Vamos dar uma olhada nisso. Só falta um dos campos de lá. Vamos ver qual é o problema. Offer_3_line_2, isso parece bem. Vamos entrar no painel em Campos personalizados. Vamos dar uma olhada nisso e ver qual é o problema. Acho que temos dois sublinhados lá. Vamos atualizar isso e voltar para a primeira página, atualizar. Ainda nada dentro, nenhum minuto adicionado de volta, eu vou mudar o nome do campo. Oferta número 3, que precisa adicionar o presente perfeito para isso e atualizar isso. Lá vamos nós. Isso tudo está funcionando agora. Eu só quero adicionar uma regra horizontal branca apenas para separar as duas linhas lá. Basta adicionar isso entre o offer_line_1 e offer_line_2. Offer_line_1, logo após a tag p de fechamento, adicione um hr lá. Então copie. Então o mesmo depois offer_line_2, faça o mesmo na segunda oferta. Após a linha 1 e 2, o mesmo na terceira oferta 2. Salve e atualize o navegador. Lá vai você. Então é assim que você usa campos personalizados avançados em temas WordPress. Sinta-se livre para continuar e adicionar quantos campos quiser ao site. Mas vou deixar isso aí por enquanto. Obrigado por ouvir e verá você no próximo vídeo. 42. Imagens de cabeçalho personalizadas: Nos últimos vídeos, analisamos campos personalizados avançados e permitimos que o administrador altere certas coisas, como o texto no site. Neste vídeo, vamos tornar nosso site ainda mais personalizável, permitindo que o administrador ou um determinado usuário altere a imagem de fundo em destaque sem saber como codificar. WordPress nos permite fazer isso no que chamamos de cabeçalhos personalizados. Se você acessar o Google e procurar os cabeçalhos personalizados do codex, ele deve ser o primeiro resultado. Então, indo para a seção de cabeçalho personalizado e, em seguida, se rolar para baixo a página, e se olharmos para o exemplo, então copie este exemplo e, em seguida, vá para o functions.php. Isso pode ir direto para o fundo, mas ainda dentro das tags PHP. Nós não vamos ter a largura fixa, então podemos remover isso ou a altura fixa. Eu só vou comentar essas duas linhas para fora, e então nós temos o caminho padrão da imagem no caso de o usuário não carregar uma imagem. Então a imagem padrão será o lakebg, e essa tem sido a nossa pasta de imagens, então está tudo bem. Salve isso e mostre mais uma coisa na matriz, que é uploads. Isso permite que o usuário faça upload de uma imagem, então uploads iguais ou maiores que e isso vai ser um booleano de verdade. Então, se entrarmos no header.php, podemos alterar a localização da imagem. Então encontrar esse arquivo e, em seguida, role para baixo até a seção de recursos na parte inferior e, em seguida, podemos excluir a fonte da imagem, então tudo entre as aspas duplas. Ao invés de ter essa imagem, que está sendo puxada de nossa pasta de tema, podemos usar o cabeçalho personalizado. Então, entre as tags php, usamos a função WordPress de cabeçalho sublinhado imagem e salvar isso e, em seguida, ir para o Painel WordPress, para baixo para Aparência e, em seguida, Personalizar e , em seguida, selecionar o “Cabeçalho Imagem” e podemos adicionar uma nova imagem. Então esta é a miniatura dos posts, então vamos fazer upload de uma nova imagem. Então, na sua pasta de imagens, há um segundo plano de fundo e agora que é lakebg2. Selecione isso e Abrir e, em seguida, coloque os fundos antigos do lago têxtil, em seguida, selecione isso e pule corte e, em seguida, Salvar e publicar. Então, uma vez que eu tenha salvo, basta marcar o X no canto e, em seguida, ir para Visitar Site e há a nossa nova imagem como o plano de fundo. Então agora isso torna realmente fácil para os proprietários do site para alterar a imagem de fundo. Eles só precisam entrar no Painel e personalizar como acabamos de fazer, e esse é o fim deste vídeo. Então, obrigado por assistir. 43. Adicionando a função “post class”: Bem-vinda de volta. Nosso tema WordPress está começando a tomar realmente boa forma. Este vídeo é tudo sobre tornar as postagens do blog ainda mais personalizáveis, adicionando a função post class. Se você quiser descobrir mais algumas informações sobre a classe post, basta ir para o WordPress Codex e procurar a função de post class. Bem, basicamente, adicionar uma classe post para o nosso tema permite que os autores tema WordPress para ter um melhor controle CSS sobre os posts. Assim, por exemplo, podemos definir valores CSS para as postagens por seu ID ou pelo nome da categoria. Então, talvez possamos ter o blog com cores de fundo diferentes dependendo do nome da categoria ou da tag. Então, como exemplo, vou colocar isso em nosso tema, e permitir o estilo pelo ID. Então, atualmente, se entrarmos em nosso blog, e se entrarmos na seção do blog. Então, se entrarmos nas ferramentas do Chrome Developer, clique com o botão direito do mouse em Inspecionar Elementos e, em seguida, se usarmos a lupa, e se procurarmos por um dos blogs que tem a classe de postagem de blog, e depois dar uma olhada, você pode ver que a div tem uma classe de postagem de blog, mas não há ID individual. Então, se quiséssemos estilizar postagens individuais, não poderíamos fazer isso porque todas as postagens têm a mesma classe. Então, vamos adicionar um ID individual a cada uma dessas postagens do blog. Então eu vou fechar isso por enquanto, e então se você voltar para o Codex, e abaixo do cabeçalho de uso, copie o PHP. Em seguida, vá para a página de índice, e, em seguida, encontrar a div com a classe de post de blog, e, em seguida, basta excluir esta linha e, em seguida, colar no PHP. Então, isso agora adicionará um ID personalizado a cada uma das postagens do blog. Acabamos de excluir a classe da postagem do blog. Então vamos adicionar isso de volta agora, e depois salvar isso. Então, se atualizarmos o blog e ele voltará para as ferramentas do desenvolvedor, como já fizemos antes, e então aperte a lupa e selecione a postagem do blog. Agora, se você olhar para o lado direito, você pode ver que o postal tem a classe de postagem de blog, mas logo após ele, agora há um ID gerado. Então, se quisermos estilizar essa postagem individual, agora temos uma referência para o CSS, e você pode usar isso de forma semelhante, se você quiser usar o nome da categoria ou qualquer um dos outros valores lá. Vamos até o CSS e verificar se está funcionando bem. Então nós temos uma identificação de postagem de blog de 50 lá, e então nós empurramos um único abaixo. Então este é o post todos os 40, e você pode ver que este é 38, 36, 34. Então, vamos apenas passar para o style.css. Então, se você for para a seção do blog, vamos apenas adicionar um estilo aqui. Então o id de pós-50, que é o superior, e para verificar se está funcionando, vamos apenas dar-lhe uma cor de fundo. Agora eu vou definir isso para bbb, e salvar isso, e 50 foi o top. Então eu vou apertar Refresh. Então lá vamos nós. Então as cores de fundo mudaram para cinza, e isso é porque isso tem um ID exclusivo. Portanto, o estilo só terá lugar para este post no blog. Então, espero que isso lhe dê algumas idéias de como você pode personalizar e estilizar seu tema. Obrigado por assistir e te vejo no próximo vídeo. 44. Deixando o nosso formulário de contato funcional: Bem-vinda de volta. No início do curso, criamos a página Fale Conosco e o link está na parte inferior do rodapé. Se entrarmos na página Fale Conosco, ainda temos o design de bootstrap na parte inferior da seção Envie-nos mensagem. Mas ele realmente não funciona no minuto porque é apenas HTML e CSS. Neste vídeo, vamos nos certificar de que isso funciona usando um plugin popular chamado Formulário de Contato 7. Então, vamos para o “Dashboard” e selecione os “Plugins” e, em seguida, na caixa de pesquisa, então vamos para “Adicionar Novo” primeiro, depois na caixa de pesquisa, procure o formulário de contato 7. Formulário de contato 7 é um dos plugins WordPress mais populares para criar formulários de contato. Clique em “Instalar agora”, e só tem alguns momentos para instalar, em seguida, vá para"Ativar Plugin”. Depois de instalar isso, você deve ver agora que há uma nova opção no painel chamada Contato. Clique nisso e, por padrão, já existe um formulário de contato lá como exemplo. Clique em “Editar”, e quando olharmos para fora como ele é construído. Então esta seção aqui vai ser o nosso formulário de contato. Em apenas um momento, vamos para o modelo entre em contato conosco e, em seguida, vamos cortar a seção de contato e colá-lo. Precisamos substituir alguns dos valores no formulário usando a mesma formatação que o formulário de contato requer. Ao trabalhar com este formulário, cada uma das seções é uma entrada específica. Precisamos colocar o tipo de entrada e também o resto da informação entre os colchetes. Para começar, vamos dar uma olhada no primeiro exemplo. Isto irá criar uma entrada com o tipo de texto e, em seguida, seguido pela estrela. A estrela significa que isso é necessário, então o usuário deve digitar o nome antes que ele possa enviar isso, e então seu nome, que é o nome da entrada, e então exemplos bem semelhantes abaixo. Temos o tipo do tipo de entrada de e-mail, que é um campo obrigatório, e o nome é o seu e-mail. Também podemos adicionar valores sobre entradas, como áreas de texto e enviar botões. Eu só vou apagar isso por enquanto, e então nós vamos para a nossa página de Contato. Precisamos ir para o page-contact.php, e então vamos copiar a seção completa para o formulário de contato, e então procurar a div com a classe de poço, que está bem na parte inferior, então procure por isso, e então encontre a div de fechamento ou a tag de fechamento. Copie toda esta seção. Na verdade, eu vou cortar isso porque você não precisa mais dele, e guarde isso, então nós podemos colar isso no formulário de contato. A primeira coisa que queremos fazer é excluir as tags de formulário porque estas foram adicionadas de volta automaticamente. Exclua a marca de abertura e fechamento. Então precisamos substituir nossos tipos de entrada, então basta excluir a seção de entrada completa, antes de tudo para o nome. Em seguida, vamos colocar estes de volta no mesmo formato como nós olhamos para cima antes no exemplo. Então, entre esses colchetes, o primeiro tem um tipo de texto e isso é para o nome, então queremos que isso seja necessário, então coloque a estrela lá, o nome do seu nome hífen, então precisamos colocar nossas aulas de volta, então a classe e, em seguida, dois pontos. Em seguida, o primeiro vai ser form-control, e nós também tinha um id lá, então id com os dois pontos de inputs-name, e nós também podemos adicionar o texto de espaço reservado, então placeholder, nós não precisamos de dois pontos depois disso, Então, só um espaço. Em seguida, entre as aspas, coloque o nome do nome. Isso é tudo o que precisamos fazer para a entrada do nome. Eu só vou copiar isso e então descer para a próxima entrada, que é o e-mail. Então exclua isso e substitua isso pelo código entre colchetes. Desta vez, em vez de texto, este tem o tipo de e-mail, e nós também vamos deixar isso como necessário. O nome desta vez será o seu e-mail, e ainda precisamos da classe de controle de formulário. Mas desta vez o id vai ser inputs-email. No espaço reservado, o texto é simplesmente e-mail. Em seguida, vamos substituir a área de texto para excluir essa seção e, em seguida, colar o novo código. Desta vez, o tipo de entrada vai ser textarea, vamos deixar este campo conforme necessário, mas desta vez mudar seu nome para sua mensagem. A classe de controle de formulário, podemos manter isso lá, mas precisamos mudar a entrada, é de nome de entrada para entrada-mensagem. Então, depois disso, precisamos dizer ao formulário quantas linhas para a área de texto exibir como padrão. Então vamos definir o meu para três, então fazemos isso com um x e depois 3. Em seguida, o texto do espaço reservado mudou de nome para Mensagem. Em seguida, a última parte da queda é a entrada, então exclua o botão enviar da parte inferior do formulário, em seguida, abra os colchetes. Dentro, damos o tipo de envio, a classe vai ser a classe bootstrap de btn, e depois a segunda classe de btn-default. Então, há o mesmo que usamos no site bootstrap, e, em seguida, o texto entre colchetes de Enviar, então “Salvar” que. Como tiramos o formulário de contato do modelo de contato, precisamos colocar isso de volta. Se você copiar o código curto, então copie essa parte, seguida, volte para o page-contact.php, e na mesma seção que vamos cortar o código de, abrir o php, e então nós ecoamos para o navegador, do_shortcode, em seguida, entre colchetes e aspas, cole o código curto e diga isso. Agora, se voltarmos para os sites WordPress e espero que, se descermos para a página de contato, veremos o formulário de contato funcionando corretamente, que é, então isso é bom. Então isso é tudo exibindo bem é uma ou duas pequenas coisas que precisamos mudar no “Painel”, então vá para a seção “Contato” novamente. É realmente obter este formulário para enviar para o administrador do site. Precisamos colocar o endereço de e-mail para enviar. Isso pode ser feito no formulário Contato na guia Email. Podemos alterar os valores padrão e, em vez disso o endereço de e-mail para o qual você gostaria que as mensagens fossem transmitidas. Você também pode ir para a seção Mensagens, e você pode alterar as mensagens que o usuário recebe uma vez que ele envia e-mails, e como valores padrão já definidos lá, mas eles estão todos disponíveis para alteração. Depois de ter mudado, clique em “Salvar”, e pronto. Agora, teremos um contato totalmente funcional para a seção. Obrigado por assistir e nos vemos no próximo vídeo. 45. Adicionando o núcleo de CSS do WordPress: Ok, bem-vindo. Até agora, adicionamos todo o nosso CSS Bootstrap e também adicionamos alguns CSS personalizados. Mas este é apenas vai ser um vídeo rápido, apenas para adicionar em alguns CSS núcleo WordPress, que é necessário para o tema. Então, vamos para o Google e procurar pelo CSS núcleo do WordPress. O primeiro resultado deve ser o códice com a seção CSS, então selecione isso. Em seguida, se você rolar para baixo, você deve encontrar há seção WordPress Core, que vamos copiar e colocar em nosso tema. Agora, a maioria disso é para legendas e imagens de alinhamento, e um pouco para acessibilidade. Estes são estilos essenciais WordPress necessários. Então eu quero copiar a seção, todo o caminho até o fundo. Então também leitores de tela lá. Então copie isso e, em seguida, sobre a nossa pasta tema no style.css, eu vou apenas colar isso logo acima da seção Global e, em seguida, salvar isso. Então nós temos o CSS para leitores de tela. Temos um estilo personalizado para legendas e o texto da legenda nas imagens. Há também uma margem adicionada às legendas e também algum estilo para o alinhamento, para a direita, esquerda, centro ou nenhum. Então eu vou salvar isso, e é isso. Isso é tudo o que eu queria mostrar neste vídeo. Nós só queríamos ter certeza de que os estilos do núcleo não fossem perdidos fora do nosso tema. Então é isso e vai vê-lo no próximo vídeo. 46. Preparando nossas strings de texto do tema para tradução: Ao construir temas WordPress é realmente importante considerarmos falantes não-ingleses que podem estar usando nossos temas. Esta seção é toda sobre a preparação do nosso tema, e fornecer a capacidade para que as pessoas traduzam o tema em diferentes idiomas. Agora, a maioria de nós não tem a capacidade de traduzir completamente o tema nós mesmos. No entanto, o que podemos fazer é desenvolver todo o tema para que ele possa ser facilmente traduzido por outros ou, em outras palavras, tornar a nossa tradução tema pronto. Este processo é conhecido como internacionalização, e há também um outro termo que você pode encontrar chamado localização. Vamos ver isso mais no próximo vídeo. Este é o processo de realmente traduzir as palavras do tema, mas neste vídeo vamos apenas olhar para a preparação real ou a internacionalização. Na verdade, fazendo a tradução do nosso tema pronto. Não é tão difícil como pode parecer. Há alguns passos a serem seguidos, como adicionar uma função ao nosso arquivo de funções, criar a pasta de idiomas, para armazenar todas as traduções. Nós também precisamos olhar através de nossos modelos de temas, para deixar WordPress saber quais palavras gostaríamos de disponibilizar para tradução. Para começar, vá para o editor de texto ou, na verdade, você pode ir para a pasta temas. Vamos para a pasta Tranquilwp. Em seguida, vamos adicionar uma nova pasta, e chamar este idioma. Então precisamos ir para o arquivo de funções e vincular isso na configuração do tema. Então, sobre o functions.php. Vou adicionar isto dentro da função de configuração tranquilwp. Bem no topo, precisamos usar uma função, load_theme_textdomain e, em seguida, os colchetes. Se você se lembrar do domínio de texto, nós definimos isso no style.css, no comentário no topo. Precisamos fazer isso o mesmo que o domínio de texto, que colocamos lá. Podemos copiar isso. Em seguida, de volta para as funções. O primeiro parâmetro dentro das cotações é o domínio de texto. Então precisamos colocar dentro do caminho do arquivo para a pasta de idiomas que acabamos de criar. Separamos por uma vírgula, get_template_directory, em seguida, os colchetes. Então precisamos concatenar no final, a pasta de idiomas. Eu soletrei isso direito. Dentro do diretório de modelos, temos então a pasta de idiomas. Use a barra e, em seguida, os idiomas e, em seguida, termine com um ponto e vírgula. Agora, o próximo passo é localizar quaisquer textos ou strings que queremos tornar traduzíveis. Neste vídeo vamos nos concentrar apenas nas cadeias de texto, mas no próximo vídeo vamos dar uma olhada como traduzir chamadas de função. Por enquanto, vamos começar indo para a página 404. Quero começar do início. Então vamos começar com o 404. Precisamos identificar quaisquer cadeias de texto. Na página 404, na parte superior, ecoamos no navegador, algum texto lá. Queremos disponibilizá-lo para tradução. A maneira de fazer isso, é logo após o texto, adicionar uma vírgula. Em seguida, simplesmente entre aspas, cole no domínio de texto do tranquilwp e, em seguida, salve isso. Depois, até a página de arquivos, precisamos localizar qualquer string de texto. Então, role para baixo. Há uma função de eco lá, então precisamos traduzir este texto. Novamente, vamos separar o texto com uma vírgula. Em seguida, nas citações colocadas no domínio de texto. Então o WordPress pode identificá-lo, e isso deve estar desligado. Agora vamos olhar para as funções no próximo vídeo. Guarde isso. Em seguida, descendo para os comentários, porque este é o arquivo de comentários para o tema vinte e quatorze, eu vou apenas usar uma pesquisa e substituir. Podemos ver que algumas das funções, ele já está lá incluem o domínio de texto vinte e quatorze. Por isso, temos de substituir tudo isto. Eu vou passar e fazer isso individualmente ou fazer uma busca e substituir. Entre parênteses, basta ir para Localizar, Substituir e procurar a palavra vinte e quatorze, e substituí-lo por tranquilwp ou seu domínio de texto, e clicar em “Lote” Há oito correspondências não está lá. Pressione “Substituir” e salve isso. A próxima é as instalações de conteúdo. Precisamos fazer os links para esta página. No minuto, acabamos de receber texto simples para os quatro links. Queremos mudar isso para ser uma função php echo. Comece com as tags php, e então usamos o abreviado, que é o sublinhado, e então e. Em seguida, cerque o texto entre colchetes e uma citação, com o ponto-e-vírgula no final [inaudível] e. Agora temos o anel de texto. Use a vírgula para separar isso e, em seguida, coloque no domínio de texto. Só para acelerar o processo, vou copiar isto, e depois mudar-me para as instalações de spa, substituir o cabelo e fazer as pazes com o texto do spa. Cole isso, e não se esqueça de fechar as tags php lá, e apenas lá também. Copie isso. Em seguida, temos o retiro à beira do lago. Novamente, copie o texto e substitua as instalações do spa pelo texto do retiro à beira do lago. Então fazemos o mesmo para o último link. Corte esse texto, e cole o último lá dentro. Esse é o último lá. Novamente, porque temos o domínio de texto imediatamente após a string, WordPress sabe que queremos traduzir isso. Mostraremos como fazer isso no próximo vídeo. Salve esse arquivo, e vamos passar para o footer.php. Vamos começar com o título de nível 2 na parte superior de manter contato. Precisamos transformar isso em um eco, então php, eu vou ver abreviado sublinhado e, em seguida, o texto entre parênteses. Também coloque isso entre aspas simples. Em seguida, logo após a string, coloque no domínio de texto. Então tranquilwp, e depois dos colchetes, ponto-e-vírgula e, em seguida, feche o PHP. Então é só mais um par para fazer nesta página. O primeiro é o texto Siga-nos. Então, nós deveríamos estar pegando o jeito nisso agora. Então PHP e, em seguida, echo, em seguida, envolva a string entre colchetes. Não se esqueça das citações. Em seguida, separados por uma vírgula, cole no domínio de texto, tranquilwp e, em seguida, o ponto-e-vírgula e feche-o. Em seguida, na seção de rodapé, há o nome do Spa Tranquil na parte inferior. Então vamos apenas copiar este php, apenas para acelerar isso. Em seguida, no lugar do texto Tranquil Spa, cole isso em. Em seguida, altere novamente o texto para Tranquil Spa. Guarde isso, é todo o texto para a área do rodapé. Então, depois do rodapé, é a primeira página. Então, a partir do topo, precisamos mudar o título de nível dois. Então eu só vou colar no php. Vou arrumar isso um pouco e recuar, e depois copiar ou cortar o título e substituir a seção Segue-nos. Guarde isso. Então vamos copiar isso de novo. Em seguida, rolando para baixo a página para mais strings, precisamos fazer o mesmo com as últimas ofertas. Então eu vou fazer exatamente o mesmo que antes, eu apenas vou cortar este nível dois cabeçalho e colar isso dentro Em seguida, continue indo para baixo na página, então role para baixo mais para baixo. O próximo é o título de nível dois novamente de Shop Online. Então eu vou cortar isso e adicionar isso à corda. Em seguida, apenas indo para baixo um pouco mais, nós temos o texto Shop Here, que é parte do botão. Novamente, colando o php e mude o texto para ser Loja aqui vamos nós. Então pressione Salvar e continuaremos movendo para baixo a página. Não precisamos fazer nada em funções. Então, em seguida, é o header.php, e eu não acho que há nada que realmente precisa mudar no cabeçalho. Temos o título que é dinâmico, temos o menu de navegação no topo, mas todos os nomes das páginas são puxados dinamicamente. Assim, eles serão definidos para qualquer idioma que o usuário preferiu de qualquer maneira. Então continue indo para baixo. Observe que não há nada a mudar no cabeçalho. Então, a próxima é a página de índice. Então, role para baixo e dê uma olhada em quaisquer funções de eco. Nós temos a categoria lá, então logo após o nome da categoria, coloque no domínio de texto do tranquilwp. Em seguida, continue indo mais para baixo na página. Há também o Leia mais texto. Então exatamente o mesmo lá dentro, tranqüilwp. Então é isso para a página de índice. Em seguida, temos a página sobre. Então nós temos o nível 2 sobre nós. Na verdade, em vez de tornar isso traduzível, vamos realmente torná-lo dinâmico, então vamos mudar para the_title como fizemos com algumas das outras seções. Então, tudo bem para deixar como está. Temos o parágrafo principal do texto About Us. Então eu só vou deixar esta seção porque isso provavelmente será melhor como um campo personalizado para permitir que o usuário digite suas informações. Então vamos guardar este por enquanto e dar uma olhada na página de contato. Já temos o título lá dentro e acho que não há problema em sair. Não há nada para mudar lá. Então, para a página de notícias. Vamos dar uma olhada em qualquer string para traduzir. Então temos a categoria. Então mude isso para ter o domínio de texto, o tranquilwp. Novamente, o mesmo que a página de índice, faremos o mesmo para ler mais texto. Tão tranquilwp. O pager, o post mais antigo e mais recente vai realmente precisar ser traduzido também. Mas faremos isso no próximo vídeo de uma maneira ligeiramente diferente, então podemos deixar a página de notícias por enquanto. Então, para baixo para o page.php, então o nosso modelo de página básica. Nós temos a função echo lá, então nós vamos adicionar o domínio de texto logo após lá. Tão tranqüilizante, e não se esqueça de guardar isso. Em seguida, em seguida, após a página é o modelo de pesquisa. Então leve um pergaminho para baixo. Mais uma vez temos a categoria. Então mudamos isso. Temos o Leia mais. Certo, então agora vamos para a barra lateral. Então não há strings para traduzir lá, então passamos para o single.php e damos uma olhada nisso. Então temos o título dinâmico. Acho que, de novo, precisamos fazer a categoria. Role para baixo mais para baixo, recebemos a mensagem de erro. Então adicione o domínio de texto lá. Então, isso é praticamente terminado. Eu só quero realmente ir para a página de funções porque nós adicionamos algumas strings lá com nossa função featured_text. Então, apenas uma ou duas cordas que precisamos mudar lá dentro. Então eu vou fazer exatamente o mesmo. Adicione o domínio de texto, e se eu copiar este. Então, cole esse logo abaixo. Poderíamos fazer o mesmo para o texto de navegação, então cole isso. Então só mais um ou dois no fundo. Porque este tem formatação, vamos realmente deixar isso e fazer isso no próximo vídeo. Vamos fazer isso de uma forma ligeiramente diferente. Acho que é tudo para todas as cadeias de texto. Então vamos salvar essa página. Então, quando baixarmos o software para tornar isso traduzível mais tarde, devemos obter todas essas strings de texto disponíveis para traduzir. Então é isso para todas as cadeias de texto, mas se o texto é parte de uma função, precisamos fazer isso de uma maneira ligeiramente diferente. Se você se juntar a mim no próximo vídeo, eu vou te mostrar como fazer isso. 47. Preparando nosso texto da função para tradução: Ok, bem-vindo de volta. Agora temos todas as cordas disponíveis para tradução. Vamos seguir em frente e fazer o mesmo para funções. Nós mencionamos no último vídeo, as funções como o pager para os próximos e os posts anteriores. Eles também têm texto dentro dos parênteses, então precisamos fazer isso de uma maneira ligeiramente diferente da que tínhamos antes. Ainda é muito fácil de fazer. Começamos com uma maneira semelhante a antes. Nós usamos a vírgula e, em seguida, colocar no domínio de texto do tranquilwp, mas desta vez, antes e depois, vamos cercá-los em alguns colchetes extras e, em seguida, usar dois sublinhados e, em seguida, fechar colchete fora no final e, em seguida, fazer o mesmo em publicações mais recentes. A vírgula, o domínio de texto, tranquilwp, e nos colchetes de abertura, adicione os dois sublinhados e, em seguida, feche nosso segundo colchete lá fora. Também temos um pager no modelo de notícias. Vá para a página de notícias e, em seguida, para baixo, vamos fazer exatamente o mesmo. Para as publicações mais antigas, adicione no domínio de texto do tranquilwp e, em seguida, os colchetes envolventes extras com os dois sublinhados, fechar, e o mesmo para as publicações mais recentes , lá vamos nós. Então eu só queria mudar no arquivo de funções. Então, vá para o functions.php. Agora precisamos mudar o texto de navegação, mas parece que saltamos a arma no último vídeo e adicionamos o domínio de texto lá, mas isso é realmente uma função. Precisamos fazer o mesmo intervalo com os colchetes, os dois sublinhados e, em seguida, fechar o segundo colchete fora, e, em seguida, vamos procurar a instrução printf, então role para baixo até a parte inferior. A maneira de fazer isso com uma variável lá é adicionando os dois sublinhados lá e depois da string, adicione no domínio de texto do tranquilwp e, em seguida, salve isso. É isso, é apenas uma maneira ligeiramente diferente de preparar o texto se for parte de uma função. Defina o nosso tema agora a tradução pronta. Agora dissemos ao WordPress quais palavras queremos disponibilizar para tradução. Então é isso. Vamos deixar o vídeo lá. Se você se juntar a mim no próximo vídeo, vamos baixar um software que irá extrair essas palavras que você tornou traduzível. Ele vai colocá-los todos em um modelo e nos permitir traduzir realmente as palavras. Vemo-nos lá. 48. Criando arquivos de tradução usando o Poedit: Então agora o nosso tema está pronto para ser traduzido. Vou mostrar-lhe a seguir como fazer um processo chamado localização. Isso consiste principalmente na criação de um arquivo de modelo chamado um arquivo POT, e ele significa modelo de objeto portátil. Isto será basicamente um diretório ou um catálogo de todas as palavras traduzíveis no tema. Em seguida, vamos usar o conteúdo deste arquivo POT para criar um arquivo PO, que irá realmente manter as strings traduzidas em um idioma de sua escolha. Então vamos começar com um software chamado Poedit. Então eu vou para o Google e procurar por Poedit. Em seguida, selecione “poedit.net”, que deve ser o topo. Poedit será o software que usamos para realmente fazer a conversão de idioma. É grátis para download para Mac, Windows ou Linux. Há uma versão pro que torna isso um pouco mais fácil, mas não precisamos disso por enquanto. Então, basta clicar no “Download gratuito” para o seu sistema operacional e dar-lhe alguns momentos apenas para baixar. Então, uma vez que isso é baixado, descompacte o arquivo e baixe-o da maneira usual. Então eu vou colocar o meu na pasta Aplicativos. Assim que você começar, você deve ver uma janela de boas-vindas, semelhante a esta. Agora vamos criar nosso arquivo POT ou template em Poedit. Vá para Arquivo e, em seguida, Novo e selecione o idioma do seu tema. Então o meu é inglês e depois pressione “Enter”. Então, se você for até o Catálogo na parte superior e, em seguida, vá para Propriedades. Então comece com algumas informações do projeto. Então eu vou chamar o meu Tranquil-novo. Então, precisamos dizer a Poedit as fontes das palavras traduzíveis. Então vá para a guia fontes palavras-chave e, em seguida, para adicionar algumas palavras-chave, selecione o segundo botão, que é para o novo item. Então eu vou começar com os dois sublinhados. Os dois sublinhados foi o prefixo que usamos para as funções. Então adicione isso e aperte “Enter”. Então, eu vou adicionar mais um, que era o _e, que era a função echo. Então entre. Eu também vou adicionar mais um para cordas escapadas. Então escape esc_attr_e. então nós também vamos adicionar esse em. Se houver palavras-chave que você usa em seus temas, certifique-se de adicioná-las também e, em seguida, vá para “OK”. Em seguida, vá para, “Extrair de fontes”. Na verdade, precisamos salvar esse arquivo primeiro antes de fazermos isso. Então vá para Arquivo e, em seguida, Salvar como. Então, este vai ser o nosso arquivo POT. Então vamos salvar isso em nosso tema, abrir a pasta de temas, e certificar-se de que a pasta de idiomas que criamos está aberta. Então o nome do tema que adicionamos foi tranquil_new. Então, precisamos salvar isso como um arquivo POT. Mas, por padrão, não deveria nos deixar fazer isso. Ele será salvo automaticamente como um arquivo PO. Então, podemos apenas usar PO e, em seguida, podemos apenas alterar manualmente a extensão se formos para a pasta de idiomas. Então basta clicar no arquivo que foi criado e alterar a extensão de arquivo para POT e, em seguida, usar isso. Então volte para Poedits e vamos extrair o texto a ser traduzido. Então selecione “Extrair de fontes” na parte inferior. Então, a seguir, vamos adicionar o caminho ao nosso tema? Então, abaixo dos caminhos, clique no ícone “Plus” e vá para “Adicionar pastas” e selecione a pasta do tema e, em seguida, selecione o tema tranquilwp e, em seguida, abra. Em seguida, clique em “OK”. Então agora nosso arquivo POT extraiu todas as strings de texto do nosso tema. Este é agora o nosso catálogo que podemos usar como um modelo. Então guarde isso. Em seguida, podemos usar este modelo para criar um arquivo PO, que irá conter as strings traduzidas. Então vá para “Criar Nova Tradução”. Em seguida, precisamos selecionar o idioma da tradução que queremos. Assim, podemos selecionar um idioma para o qual você gostaria de traduzir. Então vou escolher um aleatório. Assim será para o grego e depois, “OK”. Então, agora, se você olhar para o topo da página, temos um arquivo PO chamado EL, que é um prefixo grego. Então vou guardar isso. Novamente, verifique se isso está na pasta de idiomas e clique em “Salvar”. Então, agora, quando passamos pelas cordas, podemos ver que algumas sugestões de tradução apareceram à direita ou podemos digitá-las manualmente na parte inferior. Então é apenas um caso de selecionar o texto que queremos traduzir e depois adicioná-lo lá. Eu posso ir para estes principalmente admin ou clique sobre as sugestões e, em seguida, você começa a tradução grega aparecendo à direita. Assim que terminar, aperte o botão “Salvar”. Então agora, quando você voltar para o tema e a pasta de idiomas, devemos agora ter o arquivo POT que é o modelo e, em seguida, devemos ter dois arquivos com o nome do arquivo do país que você selecionou. Um deve terminar em PO, que é a tradução e então nós também temos um arquivo MO, que se você voltar para a documentação, você pode ver que esta é a versão compilada real legível por máquina do arquivo PO. Por isso, também precisamos disso. Então é isso. É assim que você traduz seu tema em diferentes idiomas. Você pode não necessariamente ter que adicionar os arquivos PO em seu tema, mas enquanto você tiver o arquivo template ou o arquivo POT, podemos permitir que os usuários finais traduzam em seu próprio idioma particular. Então, obrigado por assistir e esse é o fim da seção de tradução. 49. Temas para iniciar: Bem-vinda de volta. Neste vídeo, vou mostrar-lhe um par de temas iniciais que são realmente úteis para dar-lhe uma boa vantagem na construção de temas WordPress. Ao longo deste curso, construímos tudo do zero e isso é realmente uma ótima maneira começar até que você entenda o que acontece ao construir um tema WordPress. No entanto, se construirmos muitos temas, só queremos começar o desenvolvimento. É uma boa idéia começar com um tema inicial WordPress e um par de populares são sublinhados e ossos. Então, um tema de início é praticamente o que parece. Não são os produtos finais acabados que você pode baixar lugares como ThemeForest ou a página inicial do WordPress. É apenas o tema em seu mais básico, como todos os arquivos e pastas necessários e um monte de funções WordPress necessárias, como o loop e todos os modelos e muito fácil de começar com. Para o tema sublinhados, podemos clicar em “Opções Avançadas”. Então, para simplesmente gerar a pasta de temas, tudo o que precisamos fazer é adicionar as informações como nome do nosso tema e também algumas das informações como o slug e o autor, que serão colocadas na seção comum no template CSS. Em seguida, basta clicar em “Gerar” e podemos baixar isso e há também uma opção para adicionar SAS em vez do CSS padrão. Outro tema popular, bem como sublinhados é o tema bone starter. Assim como sublinhados, é gratuito para baixar e é um tema inicial muito popular para desenvolvedores de temas WordPress. Realmente vale a pena dar uma olhada se você está planejando construir mais temas ou construir temas para viver. Mas uma coisa a levar em consideração ao usar bones é que ele usa SAS por padrão. Portanto, se você não estiver muito confortável com o SAS, talvez seja necessário retocar isso ou usar um tema inicial diferente. Então, só para dar uma idéia melhor do que está incluído, eu só vou baixar este tema e então vamos dar uma olhada no conteúdo e ver o que está dentro. Deve ser um arquivo zip, então descompacte isso. Então, se abrirmos isso, temos os gostos da página 404. Temos a página do arquivo, coisas como os comentários, as funções, a página de índice pré-construída no cabeçalho e rodapé, bem como muitas outras páginas que temos criado, como a página de pesquisa, a barra lateral, o único ponto php e as folhas de estilo. A coisa toda é projetado para ser personalizado, então vamos incentivar apenas usar isso como o iniciador básico e, em seguida, construir a partir daí. Então, se você der uma olhada na página de índice e abri-lo em seu editor de texto. Muito disso é bastante familiar. Então nós temos o cabeçalho get, php na parte superior e direita na parte inferior, deve ser o get_footer e o get_sidebar. Há também o loop WordPress, que passamos por isso. Então ele vai como o loop aberto. Se temos posts e, em seguida, o conteúdo do loop, e deve ser uma abundância de funções familiares lá, tais como o_permalink, the_title_attribute, e o_title do_página, e, em seguida, o_contents. Então, enquanto construir um tema do zero é uma ótima maneira aprender e uma ótima maneira de começar, também vale a pena considerar usar um dos temas iniciados para economizar muito trabalho. É isso. Eu só queria mostrar alguns desses temas para começar. Há muito mais lá fora se estes dois não se adequarem às suas necessidades. Basta fazer uma pesquisa rápida no Google para temas iniciais WordPress. Espero que isso lhe dê algo para pensar sobre isso. Obrigado por assistir. Vejo-te em breve. 50. Obrigado: Parabéns por terminar este curso. Eu só quero dizer um grande obrigado por fazer este curso e especialmente bem feito se você chegou até o final. Espero que tenha gostado de fazer este curso tanto quanto eu gostei de juntar tudo. Eu realmente espero que a construção deste projeto tem dar-lhe as habilidades e confiança que você precisa para continuar a construir temas personalizados para si mesmo, os clientes pagantes, ou até mesmo fazer temas WordPress para vender. Nós cobrimos muito neste curso. Felizmente, agora você deve estar confortável usando Bootstrap. Em seguida, instalamos um localhost no WordPress para iniciar a conversão. Em seguida, configurar a nossa pasta tema WordPress na página de índice e, em seguida, os modelos de cabeçalho e rodapé. Em seguida, continuamos a conversão para WordPress adicionando o nav walker, e também alterando os caminhos dos arquivos de imagem para trabalhar com o WordPress. Em seguida, passamos para o famoso loop WordPress e começamos a construir a página de índice do blog. Nós então nos certificamos de que poderíamos adicionar comentários ao blog e passamos por todos os vários modelos de página, e então vinculamos esses modelos ao nosso código. Em seguida, organizamos nosso código usando a parte Get Template e, em seguida, passamos para recursos mais avançados, como campos personalizados avançados, adicionando uma classe de postagem e imagens de cabeçalho personalizadas para garantir que nosso tema é totalmente personalizável. Então, por fim, terminamos certificando-se de que nosso formulário de contato era totalmente funcional e também preparamos nosso tema para tradução. Mais uma vez, um grande obrigado de mim por fazer este curso. Parabéns por terminá-lo e boa sorte no futuro. 51. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que você realmente tenha gostado e ganhe algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações, e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte, e espero, eu vou vê-lo novamente em uma aula futura.