Academia do WordPress: aprenda a usar o WordPress passo a passo

1. Boas-vindas ao curso!: WordPress alimenta uma enorme porcentagem de sites disponíveis hoje. Você quase certamente visitou um site que é executado no WordPress. Alguns dos maiores nomes e marcas de WordPress confiáveis, incluindo Disney , PlayStation, MTV, Microsoft, Sony e muitos mais. A boa notícia é que é fácil para iniciantes começar e você não precisa conhecer qualquer codificação para criar sites incríveis. Durante este curso, vou guiá-lo através do processo de construção de vários sites WordPress. Incluindo uma página de destino do festival de música, um blog, e também um site de e-commerce também. Uma vez que você está familiarizado com WordPress a partir desses projetos, em seguida, aumentar as coisas ainda mais e introduzir algum código convertendo um site regular em um tema WordPress totalmente personalizado. Antes de arredondar as coisas, dando uma olhada em como podemos configurar uma instalação multi-site WordPress. Quem sou eu? Meu nome é Chris e sou um desenvolvedor web do Reino Unido. Para mim WordPress me permitiu criar muitos sites incríveis para clientes ou empresas ou uso pessoal a partir de uma única página de destino até um site de comércio eletrônico complexo. Ele faz isso fornecendo um núcleo flexível e, em seguida, posar como um usuário e estendê-lo com uma enorme seleção de plug-ins, estendeu a funcionalidade. Vamos começar a aprender WordPress juntos, construindo algum projeto divertido e educacional. Vejo-te na primeira lição. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição. Revise o código que você escreve e pense em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula, e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare. Não só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Por que o WordPress?: WordPress originalmente começou a vida como uma plataforma de blogs e agora cresceu para o sistema de gerenciamento de conteúdo mais popular disponível hoje, que também alimenta alguns dos sites mais populares do mundo. WordPress é totalmente gratuito para usar, gratuito para baixar, e também é construído por centenas de voluntários da comunidade, juntamente com todas as grandes características que o WordPress oferece. Vamos descobrir sobre isso durante o curso. Uma das coisas que eu realmente amo no WordPress é que ele tem algo para todos. Se você é uma pessoa não-técnica ou um iniciante, você pode comprar alguma hospedagem web simples, usar uma instalação de um clique, selecionar seu tema e você tem seu próprio site ou blog em menos de meia hora. Para web designers ou desenvolvedores ou pessoas em geral que querem saltar um pouco mais fundo, há também muitas coisas grandes que você pode fazer tecnicamente para criar um site realmente poderoso. Você pode chamar seus próprios temas e também plugins para fazer WordPress olhar e funcionar exatamente como você quer que ele seja. WordPress também está em constante desenvolvimento também, está sempre melhorando, se isso é uma correção de segurança ou um novo recurso para manter WordPress de se tornar desatualizado. Além disso, os criadores do WordPress fizeram essas atualizações muito fáceis de aplicar também. Você não precisa se preocupar com atualizações e instalações complicadas. Essas atualizações são geralmente realizadas a partir do painel do WordPress e muitas vezes apenas envolvem o clique de um botão. Como você também pode ver na página inicial do WordPress que é wordpress.org, há também muitos temas diferentes que você pode escolher. Se entrarmos na seção do tema, podemos ver que há mais de 7.000 temas diferentes estão presentes. Isso nos permitirá construir quase qualquer tipo de site que queremos criar. Quando nós realmente criar um site WordPress, todo o conteúdo permanece exatamente o mesmo, e podemos então alternar entre diferentes temas para dar ao nosso conteúdo ou ao nosso site uma aparência completamente diferente. No primeiro conjunto de WordPress alguns dos temas serão pré-instalados, ou podemos pesquisar através de qualquer um desses temas do wordpress.org. Estes são temas gratuitos para configurar nossos projetos. Junto com esses temas gratuitos também há temas premium disponíveis, que você também pode comprar em sites como ThemeForest, mas veremos isso com mais detalhes à medida que avançamos no curso. O núcleo WordPress que vamos baixar é realmente simples, mas muito poderoso, e também embalado com muitos recursos. No entanto, se houver alguma funcionalidade faltando que seu aplicativo ou site precisa, então essa funcionalidade provavelmente estará disponível como um plugin. Plugins são praticamente o que eles soam como. Eles são algo que você pode baixar para plugin e estender o núcleo WordPress. Eles adicionam funcionalidade e recursos que geralmente são simples de instalar como clicar em alguns botões, mas novamente vamos dar uma olhada em plugins com mais detalhes mais tarde no curso. Alguns dos outros benefícios WordPress são que ele é realmente motor de busca amigável. Ao usar o WordPress, muitas melhores práticas de SEO já são atendidas para nós nos bastidores. Se você quiser levá-lo ainda mais longe, há também alguns grandes plugins também, que bem dar uma olhada nele no vídeo plugins. Por último, WordPress tem um aplicativo móvel realmente útil para iOS e Android que é gratuito para baixar. O aplicativo permite que você escreva conteúdos WordPress e também atualizar seu site em movimento. Ele pode até fazer upload de fotos, gerenciar postagens de blog, gerenciar todos os comentários e também editar páginas conforme você vai. Estas são algumas grandes razões para escolher WordPress. Claro, há muitos mais e eu tenho certeza que você vai encontrar suas próprias razões para usar o WordPress como você progride através deste curso. 4. WordPress.org ou WordPress.com?: Vamos começar com o WordPress.org, que é a página inicial do popular software WordPress de código aberto. Código aberto significa que qualquer pessoa pode usá-lo ou contribuir para ele gratuitamente. Este é o site para o software oficial WordPress, que vamos usar para criar o nosso projeto através deste curso. Nós baixamos, podemos personalizá-lo e carregá-lo para um servidor ao vivo quando concluído. Ele basicamente nos dá a flexibilidade total, uma vez que é completamente auto-hospedado, e também os custos de hospedagem para WordPress um relativamente barato quando ele começou. Na navegação superior desta página, você pode ver aqui que temos os plugins disponíveis e temas que podemos então usar. Faremos uso de ambos ao longo deste curso. Há também uma seção de suporte onde podemos ter acesso total à documentação do WordPress, que vamos nos referir com bastante frequência, e, claro, tudo o que precisamos, desde a instalação de temas, até tópicos de segurança. O software real está disponível a partir de clicar neste botão get WordPress, e esta é uma das opções de configuração que vamos dar uma olhada muito em breve. Baixe este software como mencionado nos dará a total flexibilidade e controle sobre tudo o que vamos fazer com o nosso site WordPress, ou há uma alternativa que está disponível a partir WordPress.com. WordPress.com é mais um serviço que nos permitirá ter um site WordPress, fotos postadas. Ele usa o mesmo software WordPress que acabamos de olhar, ele tira essa configuração e fornece hospedagem para este software. Este site foi criado por um dos fundadores do WordPress. Para a facilidade de configuração vem com um custo. Não temos a flexibilidade que temos quando nos hospedamos. Sob também por restrições sobre quais temas plugins podemos usar, dependendo exatamente qual plano pago que você usa. Com isso em mente, se clicarmos em um Planos e Preços a partir da navegação, há vários níveis de preços diferentes, juntamente com uma opção gratuita, que podemos ver no topo, é 3ca próxima opção ao começar. Mas também coloca banners de publicidade em seu site, o que você provavelmente não quer. Em seguida, temos opções de um lado pessoal até uma loja de comércio eletrônico. Podemos ver essas opções com mais detalhes, se deslocarmos para baixo até esta tabela. Tanto quanto eu mencionei, há algumas restrições, como você pode ver aqui ao usar o WordPress.com, e essas restrições são levantadas à medida que passamos por opções de preços mais altas. WordPress.org é o único a ir para se queremos controle total sobre o nosso site, e estamos felizes em fazer um pouco de trabalho configurado. Nós vamos estar escolhendo este caminho através deste curso, ou este site que é WordPress.com é uma boa opção se você quiser que tudo cuidado para você. Mas lembre-se que há restrições a menos que você vá para os planos mais caros. 5. Onde encontrar temas do WordPress: Este curso não requer nenhuma compra para um tema ou qualquer software adicional. Embora em algum momento no futuro, você pode estar usando o WordPress para construir lotes e lotes de sites, se isso é para um trabalho, ou clientes pagantes, ou para empresas. Para este caso de uso, você também pode querer olhar para algumas opções de tema premium. Uma das opções para isso é themeforest.net. Este é um mercado para não só temas WordPress, mas também dinheiro de um código, trechos, fotos e também vídeos também. Nós vamos estar focando nos temas WordPress que podemos ir a partir desta guia. A partir daqui, podemos verificar todas as categorias diferentes, também podemos pesquisar usando a barra de pesquisa no topo e geralmente há temas disponíveis para praticamente qualquer tipo de site WordPress que você deseja criar. Por exemplo, se quisermos criar um site de casamento, podemos fazer uma pesquisa, e a pesquisa de casamento retorna mais de mil temas diferentes para escolher. Como eu mencionei, é principalmente conteúdo pago neste site, mas este preço também muitas vezes inclui suporte também. É também muitas pessoas e empresas ganhando uma vida em tempo integral, criando temas e vendendo-os em mercados como este. Se voltarmos aos itens populares, podemos ver alguns dos temas populares, como o tema Avada, este é atualmente um dos temas mais populares e tem centenas de milhares de vendas. Podemos dar uma olhada na visualização ao vivo e ver exatamente como este tema vai olhar com vários layouts, podemos percorrer qualquer um desses temas e confira todos os recursos que vem com ele e, geralmente, muitos dos esses temas têm muitas opções diferentes para layouts ou alterar a cor e eles também são muito flexíveis também para que possamos usá-lo para páginas de produtos como sites de comércio eletrônico, podemos usá-lo para blogs e também sites pessoais também. Além de ver como nosso site ficará e se sentirá com um tema específico, também é muito importante verificar todas as informações listadas abaixo. Queremos ter certeza de que o nosso tema é atualizado regularmente, queremos ter certeza de que ele tem boas críticas e também é compossível com a nossa versão do WordPress. Ao escolher um tema, não se trata apenas de como ele se parece, é também sobre os recursos e as coisas que podemos fazer com ele também. Uma das boas indicações dos recursos é as tags que está na parte inferior. Essas tags muitas vezes refletem exatamente quais recursos estão incluídos em um tema, como o número de opções de layout, se ele vai ter um layout de duas colunas, se ele vai ter um layout de três colunas, se ele for compatível com WooCommerce para lojas de e-commerce, se é tradução pronta e também quais personalizações estão disponíveis para este tema específico. Nós também podemos ver exatamente quais navegadores este é compatível com e também quais versões de plug-ins WordPress também são compatíveis com este tema também. Este particular também é widget pronto também, que significa que podemos ativar widgets que são partes independentes de conteúdo que podemos colocar em nosso site, bem como todos os temas pagos que estão disponíveis no site. Como vimos anteriormente, o site oficial wordpress.org também tem uma opção de temas no topo. Há também temas pagos desta secção comercial, mas vamos concentrar-nos apenas nos três temas que aqui enumeramos. Podemos baixar qualquer um desses temas do painel WordPress e vamos fazer isso quando configurarmos nosso primeiro projeto. Assim como os temas que acabamos de olhar, vamos ser capazes de clicar em qualquer um desses temas, podemos conferir uma prévia e isso nos dará uma idéia de como nosso tema ficará com algum conteúdo do blog. Novamente, também vale a pena conferir todas as informações adicionais, como a última vez que foi atualizado, as avaliações e classificações, e também as tags também. Podemos ver que este está pronto para acessibilidade, tem várias personalizações como o fundo, as cores, o logotipo, o cabeçalho, e também o menu. É compatível com comércio eletrônico, sua tradução pronta, e também tem vários layouts, como uma coluna e também um layout de duas colunas. Estas são coisas realmente importantes a considerar para o seu site mas não se preocupe apenas em selecionar temas com todas essas opções de tag, porque vamos descobrir exatamente o que a maioria delas são à medida que avançamos no curso. Ter todos esses temas disponíveis para WordPress nos permite dissociar o conteúdo que temos em nossos sites com a aparência e sensação. Mesmo que tenhamos um blog que chamamos de centenas e milhares de posts, abaixo da linha também podemos mudar completamente a aparência simplesmente mudando o tema. Este tema não afetará o conteúdo original e ainda temos todas essas informações ainda disponíveis e a maioria desses temas são geralmente personalizáveis a partir do painel WordPress, bem como baixar temas como este. Também podemos criar nossos próprios temas personalizados, podemos usar esses temas para uso pessoal, para um cliente pagante, ou também podemos enviá-los de volta para a loja temática. Como em tudo, se você fizer uma pesquisa online, haverá centenas ou mesmo milhares de opções que você pode escolher, mas por enquanto, porém, vamos voltar aos nossos temas e dar uma olhada em como podemos adicionar estes para os nossos sites. Primeiro de tudo, precisamos dar uma olhada em como instalar o WordPress. 6. O servidor web do WordPress: Se você construiu um site no passado usando HTML e CSS, você estará acostumado a apenas escrever isso em um arquivo HTML, abrindo este arquivo no navegador, e tudo funciona. Bem, isso é um pouco diferente ao usar o WordPress porque WordPress precisa de um servidor web para executar. Por que é isso? Bem, isso é porque o WordPress é escrito em uma linguagem de programação chamada PHP. PHP só será executado no servidor, ele não funciona dentro do navegador. Para WordPress, você não precisa entender nenhum curso PHP. Boa compreensão do PHP está sendo executado no servidor, é fundamental para entender como WordPress funciona. Se você considerar um site como Facebook ou Twitter, ou geralmente qualquer site de blog, aplicativo de bate-papo ou até mesmo rede social, todos eles têm a mesma aparência para todos os usuários, mas os detalhes na página são diferentes. Como o nome de usuário que mudará seus amigos pessoais ou conexões, suas postagens de blog e assim por diante. Podemos pensar em coisas como Facebook e Twitter como um modelo e quaisquer detalhes são injetados quando necessário, e tudo isso com base no usuário conectado. Este é um exemplo do que o PHP faz, ele pode gerar uma página web que altera os detalhes específicos para cada usuário ou cada página. Este é um exemplo do que é chamado de página web dinâmica. Está em um servidor web, onde essas páginas são geradas. No servidor, ele terá o modelo ou a configuração básica. Em seguida, ele irá colocar em todos os detalhes que você puxa para o banco de dados, como um usuário, ou as postagens de blog que acabamos de mencionar antes. Você não precisa entender completamente tudo isso no momento, mas apenas esteja ciente de que esta é a razão pela qual precisamos de um servidor web para executar o WordPress, em vez de simplesmente abri-lo dentro do navegador como podemos fazer com uma página HTML normal. Infelizmente, podemos configurar um servidor web em nosso próprio computador para executar isso. Além disso, WordPress precisa de um banco de dados também, que é usado para armazenar todas as páginas, os posts do blog, as imagens, e todas as informações que ele precisa. É este servidor web que também vamos falar sobre o banco de dados e pegar todas essas informações para nós. Isso agora nos deixa com algumas opções. Se você já comprou alguma hospedagem web no passado, que pode executar o WordPress, você pode, é claro, usar isso para este curso. Vamos percorrer algumas das chamadas opções locais, que é a capacidade de configurar um servidor web localmente em nosso próprio computador? Haverá um par de opções diferentes, então certifique-se de usar apenas um, e eu recomendaria o próximo vídeo se você vai garantir. Com isso como um fundo, agora vamos correr através de como definir um WordPress neste próximo vídeo. 7. Opção 1: instalação com o local (recomendado): Agora entendemos que o WordPress precisa de um servidor web para realmente executar. Neste vídeo e também no próximo, vamos ver algumas opções para começar a criar um servidor web em nosso próprio computador. Este vídeo vai se concentrar em um serviço chamado Local by Flywheel que nos permitirá criar um servidor web em nosso próprio computador, e então podemos criar nossos sites WordPress. Você só precisa seguir este vídeo ou o próximo vídeo, e o próximo vídeo se concentrará em uma solução alternativa chamada MAMP. Eu recomendaria que você acompanhe este vídeo em vez de e o próximo. Para começar, vamos para localwp.com. A partir daqui vamos clicar no botão de download, onde podemos baixar tanto para Mac, Windows quanto Linux. Há também uma versão paga para equipes e agências, mas só precisamos da edição gratuita da comunidade. Flywheel vai nos permitir avaliar rapidamente projetos WordPress em nosso próprio computador, que vai ser muito simples e cuidar de toda a configuração, o servidor, e também o banco de dados para nós. Local tem muitas características excelentes. Podemos ver nosso site e seção de administração com um clique de um botão. Podemos gerar um link ao vivo para ver o nosso projeto em qualquer lugar e também compartilhar com os outros também, juntamente com recursos muito mais avançados, como a capacidade de configurar o WordPress multi-site e muito mais. Escolha sua plataforma específica, baixe e siga as etapas de instalação. Uma vez que Local está totalmente instalado e configurado, você é levado para uma tela que se parece exatamente com esta. Aqui é onde podemos adicionar e também gerenciar nossos sites Wordpress. Eu já tenho alguns sites configurar apenas aqui se esta é a sua primeira vez, você não vai ver nenhum na barra lateral. Para adicionar um novo projeto, precisamos clicar neste botão verde no canto esquerdo e, em seguida, dar um nome ao nosso site. Eu vou dar este título de Festival, e nós não precisamos de nenhuma dessas opções avançadas por enquanto. Continue, vou ficar com o ambiente padrão preferido. Então precisamos adicionar um nome de usuário, uma senha e um e-mail. O nome de usuário, vamos para o festival_admin, e isso vai ser os detalhes que precisamos para entrar no back-end do nosso site WordPress. Vamos dar uma olhada nisso em um momento. A senha, certifique-se de alterar seu e-mail, se necessário. Clique em Adicionar Sites. Se você estiver usando um Mac, talvez seja necessário adicionar a senha de administrador também. Bom, uma vez que isso é feito nosso site é automaticamente iniciado. Podemos ver isso porque temos a opção de parar nosso site no canto. Se o seu é verde e diz site de início, você precisará clicar sobre isso para iniciar o servidor. Podemos ver todos os números de versão para nossos servidores, para PHP e também o banco de dados que estamos usando também. Não precisamos mudar nenhuma dessas informações, mas está tudo lá se precisarmos disso no futuro. Uma das grandes coisas sobre o uso do Local é este link ao vivo na parte inferior. Podemos clicar em Ativar, e isso nos dará uma URL ao vivo que podemos compartilhar com outros também. Isso significa que podemos compartilhar nosso trabalho com colegas, amigos ou familiares, e também é útil para receber feedback em nosso site para administrar outras pessoas. Passaremos a maior parte do tempo durante este projeto nessas duas seções no topo. Temos uma seção de administração que nos vinculará ao back-end do nosso site. Para fazer login, precisamos adicionar em detalhes que adicionamos em Local pouco antes. Meu nome de usuário era o administrador do festival e a senha. Clique em Login e isso nos redirecionará para o painel WordPress. O painel WordPress é como o centro de controle de nossos sites onde podemos adicionar novos recursos, podemos atualizá-lo, podemos alterar temas, e vamos dar uma olhada nisso em apenas um segundo. O outro botão é abrir o nosso site, e este é o nosso site WordPress real. Se o seu olhar um pouco diferente deste não se preocupe, o tema padrão muda de vez em quando. Isso agora nos dará nosso back-end ou front-end usando esses dois termos. Se quisermos alternar entre estes manualmente, se estivermos no site assim, podemos passar o mouse sobre o título do site e, em seguida, passar para o painel. Quando dentro do painel podemos fazer o oposto e depois voltar para visitar nosso site. Para o painel, analisaremos mais de perto todas essas opções no próximo vídeo. Pois é a partir daqui onde podemos atualizar nossos sites se tivermos quaisquer temas e plug-ins ou até mesmo a chamada WordPress. Se alguma atualização se tornar disponível, seremos notificados a partir desta visualização. Podemos gerenciar e atualizar nossos posts. Podemos carregar diferentes recursos e mídias, como imagens, vídeos e áudio. Podemos trabalhar com nossas páginas. Podemos editá-los, podemos adicionar novos, podemos gerenciar quaisquer comentários em nossos posts do blog. Há uma seção de aparência onde podemos personalizar a aparência do nosso site. Podemos fazer upload de temas diferentes. Podemos alterar menus, imagens de fundo e muito mais. Falamos brevemente sobre plug-ins no início e é a partir desta seção onde podemos gerenciar nossos plug-ins ou adicionar novos também. Por exemplo, se quiséssemos adicionar e-mail ao nosso site, esta é a seção de plugins onde poderíamos adicionar isso. Podemos gerenciar nossos usuários, como ver quem está inscrito. Podemos mudar as preferências. Podemos atualizar perfis e permissões e muito mais. Temos uma seção de ferramentas onde podemos fazer coisas como importar e exportar dados. Também temos uma seção de configuração onde você pode ajustar todas as opções para o nosso site. Para todos esses projetos neste curso, vamos gastar muito mais tempo neste back-end. Começando no próximo vídeo, vamos dar uma olhada mais profunda em todas essas opções. 8. Opção 2: instalação com o MAMP: Este é um vídeo de opção para configurar o WordPress usando um serviço chamado MAMP. Se você instalou com sucesso o WordPress no último vídeo usando local, você pode ignorar este vídeo. No entanto, se você usar um mês antes ou você só quer tentar algo diferente, você pode seguir junto com este vídeo e configuração usando MAMP. Vamos começar indo para mamp.info. Isso também vai criar um servidor de desenvolvimento local gratuito e também cuidar do banco de dados para estes dois, podemos baixar uma versão gratuita clicando no link aqui e, em seguida, baixar para o seu sistema operacional. Eu vou para a versão mac e dar-lhe alguns minutos para baixar. Uma vez que este tenha baixado, terá de passar pelas etapas de instalação para o seu computador aperte Continuar através de cada um destes. Também pode precisar adicionar uma senha para instalar isso. MAMP também vem com uma versão paga chamada MAMP PRO. Isso também é baixado ao mesmo tempo, mas você não precisa usá-lo. Só precisamos ficar com a versão gratuita do MAMP, pois não precisamos de nenhum dos profegos. Uma vez que MAMP tenha terminado a instalação em sua máquina você será levado para uma tela de estrela que deve ser exatamente como este. Você também pode ser solicitado a atualizar o banco de dados MySQL. Eu vou em frente e fazer isso também. Aqui dentro a coisa chave a notar são as duas luzes verdes no topo. Isso significa que nosso servidor web e também um banco de dados estão abertos e funcionando. Agora podemos baixar o núcleo WordPress e adicionar isso à nossa pasta MAMP. Para mim, MAMP é armazenado dentro das minhas aplicações, então temos esta pasta MAMP dentro daqui. A pasta chave com a qual trabalharemos é estes htdocs. Este vai ser o local onde adicionamos todos os nossos projetos WordPress ao longo deste curso. Para fazer isso, precisamos ir para WordPress.org e da página inicial terá um botão get WordPress apenas aqui em baixo. Isso então nos leva a esta seção de download onde você pode baixar o núcleo do WordPress. Este é um arquivo zip que não deve demorar muito para baixar. Uma vez feito isso, podemos clicar neste pacote e abrir isso. Esta é agora a nossa pasta do projeto WordPress. Podemos ir em frente e renomear isso, eu vou chamar este WPfestival, então podemos arrastar este projeto para o nosso HTDocs. Vamos pegar isso, colocar isso dentro do htdocs, abrir isso e podemos verificar se isso é aquilo. A próxima coisa que precisamos fazer é criar um banco de dados para o nosso projeto. Dentro da tela inicial do MAMP, abrimos a página webstar. A partir daqui podemos ir para PHPMYADMIN. Se clicarmos em ferramentas, clique em PHPMYADMIN onde podemos adicionar um novo banco de dados. Você pode ver à esquerda eu já tenho muitos bancos de dados já configurados, mas eu vou clicar em Novo e, em seguida, criar um novo banco de dados. Isso pode ser qualquer nome de nossa escolha. Eu sou o que se chama isso, o festival WP-. Clique em Criar, então não precisamos criar tabelas ou dados. Desde WordPress vai lidar com essas fotos. Com isso agora configurado, podemos voltar para MAMP, adicionar à tela inicial. Agora, as versões mais antigas do MAMP costumavam ter as preferências aqui, mas agora está disponível nas principais opções. Se você estiver usando um Mac, acesse o ícone MAMP no canto superior e clique no link de preferências. Isso terminará essa ligação para a seção onde você pode verificar qual porta estamos usando. Se clicarmos em portas podemos ver a porta padrão do servidor web é 8888. Agora vamos usar isso para acessar nosso projeto no navegador. Tudo o que precisamos fazer é clicar no localhost. Em seguida, 8888 aperte Enter. Então vamos levá-lo para o índice de nossos htdocs. Isso conterá todo o projeto que estamos dentro de um MAMP. Queremos o WPfestival. Clicando nisso, em seguida, começará a subir os scripts de instalação do WordPress. O primeiro passo é escolher o idioma. Quero ir para o inglês e depois continuar. Esta página é apenas deixe-nos saber que precisamos configurar nosso banco de dados primeiro apenas para ter acesso a todas essas informações. Clique em Vamos para o nome do banco de dados, que foi wp-festival. O nome de usuário do banco de dados, que é root e também telhado para a senha, trabalhando no localhost, e então clique em enviar. Uma vez conectado ao nosso banco de dados, podemos então executar os scripts de instalação. Precisamos antes de tudo adicionar o subtítulo. Eu vou para o WP-festival. Isso pode ser alterado mais tarde no painel do WordPress. Não se preocupe muito com isso. Em seguida, precisamos adicionar um nome de usuário e senha para fazer login em um back-end WordPress. Eu quero ir para o administrador do festival, uma senha e, em seguida, também um e-mail. Vou desmarcar isto, já que a sociedade não está viva. Em seguida, clique em instalar WordPress. Podemos então fazer login usando nossos dados, que acabamos de fornecer. Meu nome de usuário era administrador do festival, depois cole a senha. Isso então nos leva para o painel WordPress onde podemos controlar nosso site. Vamos dar uma olhada nisso com mais detalhes muito em breve. Também podemos clicar neste ícone de casa logo acima do topo. Isso mudará para o nosso site WordPress. Se você foi para o palco, parabéns, WordPress agora está aberto correndo usando MAMP. 9. O painel do WordPress: Tivemos uma prévia rápida do painel WordPress, pouco antes de configurar nossos projetos. Este é o centro de controle do nosso site onde podemos adicionar novos conteúdos, podemos atualizar e também excluir nosso conteúdo. Também podemos usá-lo para instalar novos recursos, como plugins ou temas. Mas atualmente eu não vou ir muito fundo no painel WordPress porque nós vamos estar pulando em todas essas opções em mais profundidade ao longo deste curso. Para começar, temos esta página inicial que nos dá uma atualização de status onde podemos ver nosso site está em boa saúde. Esta é também uma seção onde podemos personalizar e também podemos ver atividades recentes, como comentários recentes. Também seremos notificados de quaisquer atualizações necessárias para o WordPress e também quaisquer plugins ou temas também. A primeira opção à esquerda é a nossa postagem no blog. Quando definimos pela primeira vez um WordPress, vemos que temos um post de blog de exemplo Olá mundo. Podemos passar o mouse sobre isso e podemos editar isso, podemos remover isso. Também podemos ver quantos comentários estão sendo fornecidos para esta postagem do blog. Podemos adicionar novos e também podemos criar diferentes categorias e tags também, para que possamos organizar nossa postagem em diferentes seções. Sobre isso temos a biblioteca de mídia que é uma coleção de todos os ativos que precisamos para o nosso site. A biblioteca de mídia pode armazenar ativos, como imagens, clipes de áudio, vídeo, e todos eles são organizados em uma biblioteca fácil de usar. Também temos acesso a todos esses recursos quando criamos uma nova postagem de blog e novas páginas, então elas são fáceis de selecionar. Depois disso, temos a seção de páginas que é disposta de forma semelhante ao post do blog. partir daqui podemos acessar todas as páginas do nosso site, podemos editá-las, podemos removê-las, e também adicionar novas com este botão também. A seção de comentários está relacionada à nossa postagem no blog. A partir daqui podemos ter controle total sobre a forma como um usuário interage com nosso blog. Por exemplo, podemos moderá-los. Se alguém tiver comentários ofensivos, podemos revisá-los primeiro. Em seguida, também podemos removê-los ou permitir que eles sejam exibidos no site. A seção de aparência é onde vamos estar controlando a aparência do nosso site. Podemos fazer upload de temas diferentes, podemos personalizar nosso tema atual, podemos organizar widgets que são seções de conteúdo para exibir em diferentes partes do nosso tema. Podemos criar e editar diferentes menus para diferentes partes de nossos sites, e também brincar com diferentes layouts e esquemas de cores também. A seção de plugins é onde vamos gerenciar todas as extensões para nossos sites. Este é o lugar onde nós adicionamos a funcionalidade diferente que não está incluído com o núcleo WordPress. Por exemplo, vamos estar usando plugins, que vão adicionar funcionalidade de e-commerce, vamos adicionar funcionalidade de e-mail, e como um plugin para praticamente qualquer tipo de recurso que você deseja adicionar ao seu site. Depois disso, temos a seção de usuários onde podemos gerenciar todos os nossos usuários para o nosso site. Atualmente, nós apenas temos nós mesmos porque nós apenas configuramos este site. Cada um desses usuários recebe uma função diferente. Temos acesso total a este painel e podemos atualizar todo o conteúdo que queremos usar. Temos a função de administrador. Mas também há outras funções que são para usuários regulares, então eles não podem apenas fazer login no painel e alterar nosso site. Mas mais sobre isso depois. A seção de ferramentas vai nos permitir fazer coisas como importar conteúdo e também exportar nossos dados também. Finalmente, também temos muitas configurações ou opções diferentes para o nosso site, e também vamos ficar muito mais familiarizados com todas essas opções à medida que passamos pelo curso. Então, esta é apenas uma visão geral rápida do que está incluído com o painel WordPress e exatamente o que podemos controlar também. Em seguida, vamos dar uma olhada nos arquivos e pastas que estão incluídos quando configuramos o WordPress. 10. Arquivos e pastas do WordPress: Na primeira configuração de um projeto WordPress. Nós baixamos o núcleo WordPress. O núcleo do WordPress contém todos os nossos arquivos e pastas, que é o que uma pessoa precisa para funcionar corretamente. Agora, não precisamos saber as funções exatas de cada um desses arquivos e pastas, já que há muito código dentro deles. Mas entender o básico vai realmente nos ajudar. Para encontrar todos os arquivos e pastas, isso dependerá se você estiver usando local ou MAMP para configurar seu projeto. Se você estava usando o local, você precisa ir para a tela inicial e clicar nesta seta. Isso abrirá uma janela com a localização dos nossos projetos. Se entrarmos aqui e, em seguida, dentro do nosso aplicativo, em seguida, público, este é todos os arquivos principais e pastas que é necessário para WordPress para funcionar. Se usarmos um MAMP, assim como vimos antes precisamos ir para o htdocs e, em seguida, para a nossa pasta do projeto, e então somos apresentados com os mesmos arquivos e pastas, que é o que é chamado de núcleo do WordPress. O núcleo WordPress não se destina a ser editado, então geralmente deixamos estes como eles são. Um dos principais arquivos que temos é o wp-config, que é um arquivo PHP. Este arquivo é onde dizemos ao WordPress todas as configurações de banco de dados que teremos para nossos projetos. Este arquivo pode ser criado manualmente, mas no nosso caso, esse arquivo foi definido para nós quando criamos nosso site usando local. Ou se você optou por usar o MAMP para este projeto, esse arquivo foi criado ao executar o script de instalação anteriormente. Logo abaixo disso, temos o wp-content. Este é provavelmente o local onde passaremos a maior parte do tempo. Esta é uma pasta importante, uma vez que contém tudo o que usaremos para o nosso site, e quaisquer imagens ou vídeos que serão armazenados na pasta de uploads. Você também pode ver muitas vezes uma atualização dobrada também, que é uma pasta temporária usada pelo WordPress ao atualizar nosso site. Você também pode ver uma pasta de idiomas, se estiver usando outros idiomas para o seu tema. Se abrirmos a pasta de temas, por padrão, o WordPress fornece alguns temas padrão para começarmos. À esquerda aqui, podemos ver o tema padrão, que é atualmente 2020, e podemos alterar isso dentro do painel. Também podemos baixar novos temas e arrastá-los para esta pasta e, em seguida, ativá-los dessa forma também. Nós também temos os plugins logo acima, e este será o local onde armazenamos nossos plugins, seja através do painel ou baixando-os e adicionando-os a esta pasta. Se quisermos fazer algumas modificações em nossos temas, podemos arrastar nossa pasta de temas. Por exemplo, 2020. Podemos arrastar isso para um editor de texto e vamos fazer isso em um de nossos projetos mais tarde no curso, incluindo a criação de nossos próprios modelos de página. Esta é uma visão geral rápida de alguns dos arquivos principais, e vamos saltar para esta pasta como precisamos durante o curso. Agora, nós entendemos um pouco mais sobre o WordPress, vamos passar para a criação do nosso primeiro projeto. 11. Projeto de festival de música: o que vamos construir: Vamos começar com um projeto simples para nos acostumar funcionamento do WordPress, incluindo a configuração de páginas, incluindo temas e adição de conteúdo geral. Vamos dar uma olhada no que vamos construir durante esta seção. Esta vai ser a minha versão do projeto, que vai ser uma página inicial para um festival de música. Você pode acompanhar e criar esta versão exata ou você pode torná-la sua própria também usando um tema ou design diferente. Se você estava apenas começando e são novos para WordPress, você pode querer seguir junto com os mesmos passos em design que eu criei , então possivelmente personalizar no final quando você se sentir mais confortável fazendo isso. Este é o projeto que vamos construir nesta seção. Inclui uma barra de navegação na parte superior. Nós só vamos criar uma página de destino para que tenhamos apenas um link de menu. Nós também vamos criar o título do nosso site no topo. Teremos alguns links de mídia social no lado esquerdo, que você pode usar para vincular aos seus perfis. Teremos uma imagem de fundo de tamanho completo na seção de cabeçalho. Em seguida, rolando para baixo, vamos fazer uso do novo editor do WordPress para criar todo o layout e conteúdo para a nossa página inicial. Vamos criar diferentes linhas e blocos de conteúdo usando este editor. Aprender a adicionar diferentes tipos de conteúdo, como imagens, galerias e listas. Nós também descobriremos como colocar as coisas em diferentes colunas para que possamos estruturar nosso conteúdo exatamente como gostaríamos. Também descobriremos como usar itens como a Biblioteca de Mídia, como incluir widgets para blocos de conteúdo e também como definir um tema de arco. Vamos começar as coisas adicionando este tema no próximo vídeo. 12. Projeto de festival de música: instalação de temas: Para começar, vamos instalar um novo tema para o nosso projeto. Vou escolher um tema gratuito do wordpress.org, mas isso depende completamente de você. Eu recomendaria se você é um iniciante, para ficar com o mesmo tema que eu estou usando, vez que se você escolher um tema diferente, ele pode vir com algumas opções diferentes ou pode ter uma aparência ou sensação diferente, ou também pode tem algumas opções extras também. Se você é um iniciante, eu recomendo que você fique com este mesmo tema, ou se você quiser brincar com as coisas depois, você pode dar uma olhada em volta e escolher um tema diferente também. Vamos saltar para a instalação do nosso tema WordPress. No momento, temos apenas os temas padrão básicos que incluímos quando criamos um WordPress originalmente. Podemos ver estes se vamos para o botão de visita site ou eu ainda tenho o meu já disponível dentro do navegador. Este é o tema padrão que está incluído e podemos ver isso se vamos para o painel, e depois para a aparência e seção tema. A partir daqui, atualmente temos três temas diferentes instalados, e estamos usando o tema 2020 no momento. Também podemos passar o mouse sobre qualquer um desses temas diferentes, e também ativá-los também. É assim que o tema 2020 parece atualmente, e por padrão, vamos primeiro configurar o WordPress, todos os blogposts são exibidos na página inicial. No momento, teríamos apenas este blogueiro simples Hello World e também este comentário de exemplo logo abaixo. Nós também temos uma página de exemplo também, e nós também podemos reorganizar o conteúdo para qualquer uma dessas páginas a partir do painel WordPress. Por exemplo, podemos mover todos os blogposts que estão atualmente em nossa página inicial para estar em uma página de blog dedicada. Para começar com este projeto, vamos instalar nosso novo tema. partir do wordpress.org, podemos entrar na seção de temas e podemos incluir qualquer um desses temas disponíveis para tornar nosso site tão diferente ou pessoal quanto quisermos. As opções que você tem que instalar um tema é que podemos selecionar qualquer um destes e clicar no botão Download. Este arquivo que baixamos, nós soltamos isso na seção tema de todos os arquivos ou pastas que olhamos anteriormente. Alternativamente, e provavelmente uma maneira mais simples é voltar para o painel, e podemos clicar em “Adicionar novo”. Este projeto eu vou estar usando um tema que é chamado Asura. Podemos fazer uma pesquisa e o tema Asura vai ser este que vemos aqui. Para instalar, basta clicar no botão Instalar e, em seguida, uma vez que este foi baixado, só precisamos ativar isso como nosso tema atual. Uma vez ativado, temos a opção de personalizar nosso tema. O personalizador nos dá as opções que estão à esquerda e podemos ver uma visualização ao vivo de qualquer uma das alterações à direita. Por exemplo, se você entrar na identidade do site, podemos alterar o título do nosso site e também o slogan também. Podemos incluir um logotipo e um ícone do site e temos muitas opções diferentes para mudar a aparência do nosso tema. Só porque estamos usando um tema pré-construído, isso não significa que nós apenas manter o olhar exato que é fornecido. Faremos uso de muitas dessas opções à medida que avançamos no curso, e também podemos ver nosso tema ativo se recarregarmos o front-end. Atualmente parece um pouco diferente da aparência nas fotos, mas isso é apenas porque não temos o mesmo conteúdo configurado como a demonstração. O trabalho de um tema é apenas fornecer um esquema de pele ou cores para o nosso conteúdo. 13. Projeto de festival de música: criando nossa primeira página: Como descobrimos no último vídeo, o WordPress, por padrão, exibirá nossas postagens de blog em nossa página inicial. Podemos alterar isso para exibir essas postagens em qualquer outra página, mas primeiro precisamos criar uma nova página para exibi-las. Para o painel. A partir daqui, temos a opção de páginas à esquerda. Se clicarmos sobre isso, podemos adicionar e gerenciar todas as páginas que estão em nosso site. Vou deixar um lugar a política de privacidade que já está configurada, mas podemos remover a página de exemplo. Vamos remover isso e, em seguida, podemos adicionar uma nova página, que vai ser a nossa home page. A primeira coisa que precisamos fazer ao criar uma nova página é adicionar o título da página. Em seguida, podemos adicionar todo o nosso conteúdo abaixo. Vamos abordar a adição de conteúdo de nossa página no editor de conteúdo com mais detalhes no próximo vídeo. Também temos algumas opções para publicar esta página imediatamente, ou podemos agendar uma lista para mais tarde. Temos uma seção permalink onde podemos definir o link para esta página. Por exemplo, este seria o nosso URL e, em seguida, encaminhar barra inicial. Se você tivesse uma seção de blog este será para a frente barra blog e assim por diante. Temos uma imagem em destaque que é a imagem principal, que podemos usar quando pelo menos nesta página. Podemos ligar isto clicando neste botão, e este será enviado para a nossa biblioteca de mídia. Tenha a seção de discussão onde podemos permitir comentários para esta página, e também quaisquer atributos que você deseja adicionar, como a ordem em que esta página aparecerá. Também incluído com este tema, é algumas opções onde podemos colocar para fora a barra lateral. Podemos ter a barra lateral na esquerda ou na direita ou nenhuma barra lateral. Essas opções de layout da barra lateral foram codificadas pelo criador deste tema. O seu pode ser um pouco diferente se você escolher um tema diferente. Agora, com o título do nosso site, o que precisamos fazer é clicar em “Publicar” e depois “Confirmar” e esta página inicial está agora disponível. Voltar ao nosso front-end do nosso site e atualizar. Quero que tenhamos acesso à nossa página inicial, clique nisto. Este é o permalink que vimos antes que é a barra inicial, e, em seguida, o título da página. Ainda não temos conteúdo de página, mas há algumas coisas a observar. Em primeiro lugar, este título da página inicial está sendo exibido, e é muito ousado, então você pode querer manter isso no lugar dependendo do seu projeto. Mas vou remover isto do painel. Volte para a sua página. Em seguida, na parte inferior, onde a nossa seção de layout é, podemos ir para a seção de elementos desabilitar. A partir daqui, podemos verificar o título do conteúdo, fechar a seção para baixo. Agora temos acesso a um botão de atualização. Em seguida, atualize a página para confirmar que isso foi removido. A segunda coisa é que realmente queremos que esta home page seja a home page do nosso site, em vez da postagem do blog que vemos atualmente. Para alterar isso, podemos ir para o painel, e se clicarmos no ícone WordPress, seguida, levá-lo de volta para a seção principal painel. Na seção de configurações, podemos entrar em leitura. A partir daqui, podemos alterar o que a página inicial exibirá. Atualmente, isso está configurado para exibir as postagens mais recentes do blog, mas vamos mudar isso para ser uma página estática, onde podemos selecionar nossa nova página inicial. Clique em “Salvar”. Agora, se recarregarmos o projeto, veremos nossa página inicial vazia. Se tivéssemos uma página de blog dedicada, também poderíamos definir isso, mas vamos olhar para isso em um vídeo futuro. Pouco antes de passarmos a adicionar mais conteúdo, também podemos configurar o título do site e também o slogan para este projeto. Quanto a isso de volta no personalizador, que está disponível sob a seção de aparência. Já analisamos como podemos alterar o título do site e também o slogan usando esta seção de identidade do site. O slogan não importa no momento porque já temos isso escondido, mas se quiséssemos também poderíamos adicionar um logotipo ao cabeçalho. Mas eu vou deixar isso e adicionar isso diretamente à nossa página. Também podemos definir um ícone do site que aparecerá na guia do navegador. Queremos fazer os dois no próximo vídeo. Voltar ao menu principal. Usaremos muito mais dessas opções ao longo do curso. Mas, em seguida, podemos também fazer uso dos links de mídia social, que foram fornecidos com este tema. A partir desta seção, podemos adicionar os links para todos os nossos perfis de mídia social. Apenas como exemplo, vou adicionar minha URL do Twitter. Se publicarmos isso agora, como os testes são, podemos fechar o personalizador e atualizar o navegador. Clique no ícone do Twitter, e isso só nos levará diretamente ao nosso link de mídia social. Com esta primeira página agora configurada, vamos passar para a biblioteca de mídia onde podemos adicionar algumas imagens ao nosso projeto. 14. Projeto de festival de música: a biblioteca de mídia: Mais cedo ou mais tarde você terá a necessidade de carregar diferentes tipos de mídia, como imagens, seu projeto. WordPress nos fornece uma solução muito simples e fácil de usar, que é a Biblioteca de Mídia. A Biblioteca de Mídia é um local central onde podemos colocar todos os nossos recursos, como imagens, clipes de vídeo e áudio, ou até mesmo arquivos. Ele então nos dá acesso a esta biblioteca de mídia quando criamos coisas como novas postagens de blog ou novas páginas. Vamos dar uma olhada em como podemos usar isso agora. A partir do painel, temos esta opção de biblioteca de mídia na barra lateral. Se clicarmos sobre isso, podemos ver qualquer um dos ativos existentes que temos dentro do nosso projeto. Esta biblioteca de mídia não é apenas as imagens, mas também outros tipos de mídia, como vídeos, documentos e áudio. Você pode usar essas mesmas imagens que eu para este projeto que estão disponíveis como um download, ou você também pode selecionar o seu próprio se você preferir. partir desta visualização, podemos clicar no botão Adicionar Novo, onde podemos arrastar e soltar qualquer arquivo [inaudível], ou podemos selecionar arquivos de nossa máquina. À esquerda, tenho uma pasta que tem todas as imagens para este projeto. Podemos arrastar sobre cada um deles individualmente ou, em vez disso, podemos simplesmente arrastar sobre a pasta completa. Uma vez que estes tenham sido importados, podemos clicar em qualquer um deles individualmente. Também é recomendado se você estiver empurrando este site para produção para também preencher os detalhes adicionais, especialmente o texto alt. Também podemos editar o título, legenda, a descrição, juntamente com o URL do arquivo, que podemos vincular em qualquer postagem ou página do blog da web. Uma vez que este é um projeto de demonstração, eu vou deixar todas as informações adicionais da imagem vazia, mas não se esqueça de preencher essas informações adicionais se você estiver usando um site ao vivo, que ajudará com os motores de busca e acessibilidade. Agora, essas imagens estão incluídas em nossa biblioteca de mídia, agora podemos acessá-las em nossas páginas ou postagens de blog ou nossas páginas se entrarmos em nossa seção inicial, clicar em “Editar”. Podemos adicionar imagens diretamente em nossa página adicionando um bloco de imagens, e vamos dar uma olhada em como fazer isso no próximo vídeo. Agora, embora nós estamos indo apenas para ir para a seção de documentos e, em seguida, define a nossa imagem em destaque. Eu vou selecionar este e, em seguida, definir este como nossa imagem em destaque. Uma imagem em destaque é uma imagem que representa nossa postagem de blog ou nossa página. A página é destaque imagem pode ser exibido em um número de locais. No nosso caso, o autor de temas, você define isso para estar dentro do cabeçalho. Agora, se atualizarmos isso e atualizar nosso site, vemos agora que isso foi colocado no cabeçalho. Podemos ver aqui que temos algum espaço branco no lado direito. Isso ocorre porque para este projeto de curso, mantemos os tamanhos dos arquivos de imagem baixos. Eu não incluí nenhuma imagem enorme. Teremos algumas maneiras diferentes de consertar isso. Podemos fazer upload de uma imagem maior ou, se quisermos, também podemos ajustar o CSS. Podemos adicionar o nosso próprio CSS personalizado indo para o painel, para baixo para o personalizador, então temos uma seção CSS adicional. Podemos direcionar nossa imagem HTML, que é “img” Então, dentro das chaves, podemos definir a largura da imagem para ser 100 por cento. Atualize nosso site, e agora nossa imagem foi esticada até a largura total do navegador. Esta é a imagem em destaque para a nossa página, mas se fôssemos adicionar uma imagem em destaque a uma postagem de blog, elas geralmente são exibidas ao lado de cada postagem de blog na lista de páginas do blog. Também como uma nota lateral, essas imagens em destaque costumavam ser chamadas de miniaturas de postagem. Estes estavam em versões iniciais do WordPress, então você ainda pode ver algumas referências a isso na documentação ou também alguns guias. Voltar para o personalizador, eu também vou definir o ícone do site. De volta ao menu principal e da Identidade do Site, podemos selecionar o ícone do site. Queremos ir para a mesma imagem, selecione isso, então nós também podemos cortar isso para ser um tamanho menor. Vou buscar a imagem, as mãos, cortar isto, publicar as nossas mudanças. Agora podemos ver o ícone do site dentro da guia do navegador foi atualizado com nossa nova imagem cortada. 15. Projeto de festival de música: o editor Gutenberg: Na versão 5 do WordPress, eles lançaram um editor totalmente novo para editar nossas postagens e páginas do blog. Isso se chamava Gutenberg. Isso nos permite nos afastar de uma abordagem de editor de classificação e substituir nosso conteúdo usando blocos. Vamos agora dar uma olhada no site de Gutenberg e fazer uma rápida visão geral de como esses blocos funcionam. Estou atualmente no wordpress.org, que tem esta seção de Gutenberg. Isso vai nos dar uma visão geral de alguns dos blocos que estão disponíveis para criar nossas postagens de blog e nossas páginas. Agora não precisamos ir para esta página, mas isso vai lhe dar uma idéia exatamente do que está disponível. Temos alguns blocos de texto básicos, temos imagens, temos botões, e também alguns para ajudar com layout, como colunas. Podemos editá-los, podemos reorganizá-los, e em alguns casos também podemos aninhá-los dentro um do outro. Se voltarmos para o Painel, podemos fazer uso deles dentro de nossas páginas. Atualmente, nossa página inicial está vazia, então vamos para isso, e vamos para a seção de edição, onde podemos fazer uso de alguns desses blocos. Para adicionar um bloco podemos simplesmente começar a digitar aqui dentro. Isso nos dará um bloco de texto simples ou podemos clicar no ícone de adição no canto superior esquerdo. Podemos percorrer todos os diferentes tipos de blocos e seções que estão disponíveis. Temos praticamente qualquer tipo de conteúdo que será necessário para construir a página. Temos tabelas, temos imagens, temos galerias, temos seções de vídeo, temos esta seção de design onde podemos iluminar nossa página em diferentes seções e colunas. Podemos dividir nossas páginas. Nós editamos separadores, temos todos esses widgets pré-construídos que nos permitirão adicionar calendários e links para nossa publicação mais recente do blog. Temos links de mídia social, e também diferentes plugins podem adicionar diferentes blocos aqui também, como WooCommerce, o que nos permitirá adicionar algumas funcionalidades de e-commerce em nossas páginas. Para começar, eu vou adicionar um cabeçalho em nossa página, que vai ser um cabeçalho de nível 2. Nós clicamos nisso, certifique-se de que o H2 está selecionado. Em seguida, podemos simplesmente adicionar o texto que queremos como o nosso cabeçalho da página. Como este é um festival, eu vou dizer um fim de semana completo de música ao vivo e entretenimento. Tudo o que precisamos fazer é clicar fora disso e agora nosso rumo está no lugar. Como este é um festival e é baseado no fim de semana, o próximo bloco que eu vou criar vai ser um layout de duas colunas. A coluna da esquerda será para o sábado, e a coluna da direita será para os eventos que estão acontecendo no domingo. Volte para o nosso ícone de mais, e aqui dentro, se rolarmos para baixo até a seção de design, podemos clicar em “Colunas” Vamos para um layout 50/50 duas colunas. Em primeiro lugar, a coluna da esquerda será para o sábado. Vou aninhar um novo bloco dentro do qual será um rumo. Desta vez vamos fazer deste nosso nível 3 para que seja um pouco menor, e isto é para o nosso sábado. Também podemos formatar esta seção. Vou alinhar o texto no centro. Eu também vou para as configurações de cor e ajustar isso também. Eu vou para a cor verde para esta seção. Em seguida, com isso selecionado, podemos clicar no ícone de adição ou logo abaixo. Isso adicionará um novo bloco diretamente abaixo do nosso título de nível 3. Esta vai ser uma lista que vai listar todos os eventos ou todas as informações sobre este sábado. Vamos dizer oito bandas ao vivo. Então, se apertarmos “Enter”, podemos continuar com a nossa lista. Vamos dizer 20 cantores, dois DJ's, oito barracas de comida e bebida, quatro palcos e três arenas. Então, finalmente, acampar grátis com ingressos. Assim que terminarmos, podemos sair disto, e vamos remover o último ponto de bala. Então esta é a seção de sábado completa. Agora à direita, podemos criar a seção de domingo, começando de novo com um título de nível 3, que terá o texto de domingo sobre isso, e vamos alinhar isso no centro. Em seguida, combine a cor da esquerda. Então, se clicarmos no ícone de mais, podemos adicionar nossa lista logo abaixo. Este domingo vai ter 10 bandas ao vivo, 18 cantores, três DJs, oito barracas de comida e bebidas, mesmos quatro palcos e três arenas. Finalmente a festa de encerramento. qualquer momento, podemos clicar em “Atualizar” e podemos verificar como isso está parecendo. Vamos visitar a nossa primeira página. Vá para baixo. Vemos o nosso título e também as duas listas à esquerda e à direita. Talvez você também queira centralizar esse título de nível 2, então vamos até isso. Se passarmos o mouse sobre, podemos alinhar este texto no centro. Atualize isso. Em seguida, vamos introduzir um bloco de mídia e texto. Se clicarmos no ícone de mais, podemos realmente fazer uma busca por isso ou dizer Mídia e Texto. Então, no lado esquerdo, podemos adicionar uma imagem ou um vídeo. Se formos até a Biblioteca de Mídia, podemos selecionar qualquer uma dessas imagens pré-carregadas. Eu quero selecionar a imagem da guitarra, e então dizer bilhetes cedo pássaro agora disponíveis. Entre cada um desses blocos, eu também vou adicionar um separador. Se clicarmos no ícone de adição, podemos usar a busca por um separador. Em seguida, podemos clicar no ícone para cima para reorganizar isso e colocar isso acima de nossa mídia e texto. Faremos o mesmo logo abaixo, também adicionaremos um separador. Desta vez manteremos isto abaixo da nossa secção. Mesmo que esta seja uma mídia e uma seção de texto não estamos limitados apenas a adicionar texto nesta seção. Se apertarmos “Enter” podemos então clicar no ícone de mais, e também podemos adicionar um botão dentro aqui. Este botão vai nos permitir vincular aos tickets que estamos oferecendo atualmente, então vamos dizer agora. Para dar um pouco de estilo, eu também vou usar a mesma cor verde que usamos antes. Vamos atualizar isso e ver como isso está parecendo no front-end. A próxima coisa que vamos passar é uma galeria de imagens do evento do ano passado. Na próxima seção vamos adicionar um título de nível 2, que vai ter o texto do evento do ano passado. Também podemos colocar isso no centro. Em seguida, logo abaixo deste clique no ícone de adição e podemos adicionar uma galeria de imagens. Mais uma vez, podemos fazer upload de imagens novas ou podemos usar a Biblioteca de Mídia para reutilizar as imagens existentes. Vamos selecionar quatro desses, e podemos selecionar várias imagens ao mesmo tempo. Clique em “Criar uma nova galeria” e insira. Clicar em qualquer uma dessas imagens nos permitirá clicar nos botões esquerdo e direito para que possamos reorganizar a ordem dessas imagens. Depois disso, vamos adicionar nosso separador, mantê-lo consistente. A última seção será para a informação dos ingressos. Vamos dar a isto um título de informação do bilhete. Também vamos alinhar isto no centro. O bloco final que vamos usar na parte inferior vai ser para um layout de três colunas. Vou selecionar as colunas. Aqui dentro podemos ir para três colunas iguais. Isto vai ser colocado para fora como uma mesa para todos os nossos preços de bilhetes. Teremos uma seção de pré-venda, uma seção de madrugada e, em seguida, as taxas padrão de ingressos. Nós também poderia adicionar esta tabela com um bloco de tabela que está disponível. Mas eu vou criar o meu próprio usando três colunas, embora não tenhamos as bordas em torno de cada seção. Da mesma forma que fizemos com a seção de duas colunas logo acima, dentro de cada uma de nossas colunas, podemos adicionar novos blocos. Estas serão apenas seções de texto. Clique no “Parágrafo” para cada uma destas peças de texto. O primeiro é pré-venda. Uma vez que este é um cabeçalho, vamos fazer isso ousado. Certifique-se de que está tudo selecionado e, em seguida, clique em “Negrito” Também vamos colocar isso no centro. Pode ser um pouco complicado clicar no ícone de adição no ponto correto. Se acabarmos de sair deste, o próximo ícone de adição vamos criar esta seção abaixo deste layout de três colunas inteiro. Em vez disso, com o nosso texto selecionado, se apertarmos “Enter”, então temos a opção de adicionar uma nova linha de texto. Vamos dizer que tudo se foi. Introduza isto. Como esta é uma seção esgotada, vamos mudar a cor do texto para ser vermelha. Clique dentro de nossa seção de texto e, em seguida “Enter” O próximo será para o preço. Como esta é uma seção esgotada, destacaremos nosso texto. Então vamos adicionar um strikethrough para mostrar que isso está sendo vendido para fora. Coloque isso no centro. Nossa primeira coluna está pronta. Na secção do meio isto vai ser para a secção dos primeiros pássaros. Coloque isso no centro e também faça isso ousado. Aperte “Enter” Isto vai estar à venda agora. Esta é a seção ativa, então em vez de ter isso como vermelho, vamos destacar isso como a cor verde. Mais uma vez aperte “Enter” e podemos adicionar um preço para 35. Depois da seção de madrugada, a última será para a taxa padrão. Selecione tudo, eu vou fazer este arrojado, colocar no centro. A segunda linha será depois de 20 de agosto. Coloque no centro. Então, finalmente, o preço para a seção padrão de 49. Coloque isso no centro, e nossa seção está pronta. Atualize isso. Há a nossa galeria de imagens e as informações dos bilhetes lá em baixo. 16. Projeto de festival de música: widgets: O tema que eu escolhi, juntamente com muitos outros, suporta widgets add-in. Um widget é um pequeno recurso ou um pequeno pedaço de conteúdo que podemos colocar em nosso tema. Agora, não podemos simplesmente ir em frente e colocar esses widgets em qualquer área que gostaríamos. Estas áreas de widget onde podemos soltá-los em tem sido predefinido pela oferta de temas. Vamos dar uma olhada em como podemos trabalhar com widgets com nosso tema atual. Se voltarmos para a nossa página inicial e para a seção de edição, bem na parte inferior abaixo de todos os nossos blocos com o sob a seção de layout, temos esses widgets de rodapé. O autor deste tema nos permitiu avaliar quantas áreas queremos personalizar dentro do rodapé. O valor padrão é livre, o que significa que o rodapé é dividido em três seções onde podemos adicionar nossos blocos de conteúdo. Além disso, lembre-se de um pouco acima disso, temos esta seção da barra lateral, onde podemos colocar nosso conteúdo ao lado de uma barra lateral. Bem, tanto a seção de barras laterais e também a seção de rodapé e ambos widget exato. Para acessar nossos widgets, voltamos para o painel principal e, em seguida, para a seção de aparência onde temos um menu de widgets dedicado. Esta página foi dividida em duas seções, onde à esquerda temos os widgets disponíveis que podemos adicionar ao nosso projeto, como calendários, menus, caixas de pesquisa, e também coisas relacionadas ao nosso blog, então apenas comentários e postagens recentes. Então, à direita, temos todas as áreas temáticas disponíveis onde podemos adicionar esses widgets também, todas essas seções podem ser personalizadas, e agora vou adicionar alguns widgets no rodapé. Rodapé Widget 1 é a primeira posição dentro do nosso rodapé. Isto vai ser colocado no lado esquerdo. Este primeiro widget vai ser um simples blocos de texto para que você possa arrastar sobre os widgets de texto, o título de Go VIP, e, em seguida, algum texto no bloco abaixo de atualização para VIP, e desfrutar de seu fim de semana ainda mais. O editor de texto é bastante simples, vou adicionar uma lista com marcadores logo abaixo. Na primeira linha vai ser exclusivo VIP apenas bares, o próximo vai ser para instalações de banheiro exclusivas, e o final vai ser a área de acampamento perto dos principais palcos. Agora, vamos para a área de rodapé 2. Esta será a seção do meio da nossa livre. Aqui dentro, vamos criar um link para nossas postagens mais recentes do blog. Para fazer isso, temos um widget post recente que podemos arrastar sobre. Se quiséssemos, também poderíamos adicionar vários widgets em qualquer uma dessas seções. Não estamos restritos a apenas um. O título de manter-se atualizado com o nosso blog, e então podemos definir quantas das postagens recentes queremos mostrar. Nosso site, atualmente, tem o único post de blog que foi criado quando instalamos o WordPress. Bem, além de que podemos restringir isso para ser cinco e nós também podemos exibir a data do post um também como este e salvar o nosso widget. O terceiro será um clipe de áudio dos eventos do ano passado. Para fazer isso, tenho um clipe de áudio que acabou de ser salvo na minha área de trabalho. Agora eu não incluí este arquivo de áudio com o custo, já que este era um pedaço licenciado de áudio. Mas você pode usar um clipe de áudio próprio ou pesquisar online e, em seguida, incluir isso se você quiser. Isso vai entrar no Rodapé Widget 3. Arraste sobre a seção de áudio, adicione um título de, ouça uma amostra dos eventos do ano passado. ' Podemos então acessar a biblioteca de mídia onde podemos arrastar sobre nosso clipe de áudio neste e, em seguida, salvar o nosso widget. Vamos agora verificar nossa área de rodapé na frente. Vá até o fundo e aqui estão nossas seções gratuitas que acabamos de recriar. Temos nossos widgets de texto, temos a seção de blog, e podemos clicar em qualquer um desses links. Nós só temos este exemplo de post do blog Olá mundo. Mas lembre-se que isso mostrará um máximo de cinco. Então, na terceira seção do nosso rodapé, temos este clipe de áudio, que é um reprodutor de áudio totalmente funcional. Podemos tocar, podemos pausar, podemos pular por diferentes partes da nossa faixa, e também podemos controlar o volume de áudio também. Este é agora o nosso primeiro projeto agora concluído. Temos um bom projeto em um curto espaço de tempo. Esta página da Web também é responsiva por padrão. Se reduzirmos isso para um tamanho menor, ele irá ajustar o layout e também a escala para se adequar a este dispositivo. O próximo projeto vamos ir um pouco mais fundo no WordPress, onde vamos construir nosso próprio blog pessoal e também vamos aprender sobre coisas novas, como agora menus, usuários, comentários e muito mais. 17. O que construiremos: Para esta seção, vamos estar construindo um novo projeto. Como você pode ver, este é um blog de desenvolvimento web, e isso vai nos ensinar algumas técnicas diferentes. Usamos algumas opções diferentes das seções anteriores. Vamos usar um tema completamente diferente. Nós estaremos fazendo uso de muitos widgets diferentes, nós estaremos adicionando um carrossel deslizante, assim como vemos aqui, e isso irá vincular a páginas diferentes. Essas páginas também estão disponíveis em diferentes seções abaixo. Temos algumas áreas de widget. Nós vamos estar construindo esta página usando algum modelo que deve ser fornecido com este tema. Temos algumas áreas em destaque que se concentrarão em certas seções do nosso site, e todas elas serão vinculadas a páginas diferentes. Nós temos alguns banners, temos alguns depoimentos, temos alguns estudos de caso, temos uma área de foco em uma seção particular. Então temos um rodapé no fundo. Este rodapé também irá vincular a todas as páginas, temos um calendário que irá vincular a postagens anteriores do blog, vamos integrar ícones de mídia social, e também link para comentários recentes também. Os ícones de mídia social também serão colocados em diferentes locais. Podemos vê-los pairando sobre o canto superior direito do nosso site, e estes são totalmente funcionais. Vamos ver como mover nossas postagens de blog para páginas diferentes, veremos como alterar o layout e o estilo, e fazer uso pesado do personalizador para mudar a aparência do nosso site. Para qualquer uma dessas postagens de blog, também podemos clicar na versão completa, onde também veremos uma barra lateral à direita, e também podemos deixar comentários para cada usuário. Além disso, teremos páginas diferentes, como a About Us, quais podemos clicar e ser levadas até esta página. Também teremos uma página Fale Conosco. Este é um formulário de Contato totalmente funcional, e também vamos dar uma olhada em como personalizar isso e também adicionar e remover campos diferentes. Este projeto é fortemente baseado em adicionar e atualizar posts de blog, como incluir mídia para fazer nosso post parecer realmente bom. Também nos concentraremos em como podemos trabalhar com diferentes usuários, diferentes níveis de permissão e também em que tipo de acesso cada usuário tem ao nosso site. Trabalharemos com menus de navegação, os modelos de página do personalizador, adicionando um controle deslizante, trabalhando com plugins e muito mais. No final deste projeto, você terá uma boa idéia de como personalizar seu site mesmo usando um tema pré-existente. Para completar as coisas, também vamos dar uma olhada em como podemos melhorar a otimização do nosso mecanismo de busca do site, e também como realizar backups regulares, garantir que não perderemos todos os nossos dados valiosos. Espero que você esteja animado com este projeto, e vamos começar no próximo vídeo configurando este projeto. 18. Blog do WordPress: configuração do projeto: Vamos começar com o nosso próximo projeto que vai ser um blog WordPress. Agora, um blog era tradicionalmente o que WordPress era bem conhecido para nos primeiros dias, embora tenha crescido e expandido para ser capaz construir qualquer tipo de site que você deseja criar. Para começar, vou começar com local para criar os sites. Abaixo nós gostaríamos apenas no conjunto de vídeos para o último projeto, ele também pode escolher [inaudível] se você preferir. Uma vez que Local está aberto, se você já tem um site existente aberto, você pode precisar clicar no botão “Parar Site” no canto superior, embora eu não tenha nenhum projeto atualmente em execução, embora possamos clicar no botão ícone verde mais para começar com um novo projeto. Como sempre, vamos dar a este um nome de site, e vamos chamar o meu novo webdev-blog. Não precisamos de nenhuma dessas opções avançadas, então podemos continuar com a configuração preferida 2. Em seguida, os detalhes de login para o administrador. Primeiro de tudo, o nome de usuário. Queremos ir para o administrador do blog, uma senha, e espero que o seu seja mais forte do que o meu, e também um endereço de e-mail também. Podemos adicionar os sites e apenas nos dar alguns momentos para configurar. Assim como no último projeto, se você estiver usando local, talvez seja necessário adicionar a senha administrativa se estiver usando um Mac. Ok, bom. O meu está tudo pronto agora. Vou entrar no painel com os detalhes que você acabou de fornecer. Foi blog-admin e também uma senha. Todos nós entramos e podemos abrir o front-end de nossos sites. Eu vou ver como WordPress se parece com o tema padrão. Voltando ao painel, a única mudança que faremos neste vídeo é apresentar nosso novo tema. Para fazer isso, vamos até a aparência na seção tema, e podemos adicionar um novo tema com este botão. Agora, assim como com qualquer projeto dentro deste curso, você pode escolher qualquer tema que você gosta para o seu projeto. No entanto, se você é um iniciante, eu recomendo que você fique com os mesmos temas que eu estou usando. Você viu coisas como as mesmas opções que estão disponíveis para que você não fique muito confuso. O que vou usar vai ser espaçoso. Vou digitar isso e podemos procurar por isso. Este é o tema aqui. Você pode visualizar se você gostaria de ver como isso ficaria, mas eu vou clicar no botão “Instalar” e, em seguida, ativar isso uma vez pronto. Com isso agora como nosso tema ativo, podemos voltar para o front-end. Se recarregarmos a página, agora você verá uma configuração diferente para todos os projetos. Tem exatamente o mesmo conteúdo. Temos o blog de exemplo Hello World, temos alguns comentários de amostra, e também uma página de exemplo sobre os 2 primeiros, mas isso está sendo coberto com um tema completamente diferente. É este tema com o qual vamos trabalhar no resto deste projeto. Começando no próximo vídeo, vamos extrair alguns dados de amostra para que possamos ver exatamente como esse tema ficaria com muito mais conteúdo. 19. Blog do WordPress: importando dados amostrais: Bem-vinda de volta. Agora temos o nosso novo tema instalado para o nosso projeto. Agora vamos ver o que parece com algum conteúdo. No momento, temos apenas alguns dados de amostra, o blogpost, o comentário e também a página de amostra também. Uma maneira de adicionar conteúdo é escrever vários blogposts diferentes, adicionar muitas páginas diferentes e, geralmente, criar muito conteúdo. À medida que avançamos através deste projeto, estaremos adicionando muito do nosso próprio conteúdo. Mas, por enquanto, vamos colocar em alguns dados de amostra, para verificar este tema com mais conteúdo. A maneira de fazer isso é dirigir-se ao site do WordPress e baixar os dados do Teste da Unidade Tema. Estes são os mesmos dados de teste que é usado pela equipe do WordPress para rever quaisquer temas recém-carregados. O objetivo é garantir que você tenha todos os ângulos cobertos. Por exemplo, se criarmos um novo tema próprio e queremos enviá-lo para o WordPress.org, se não o testamos totalmente com muitos dados, podemos achar que o layout parece um pouco estranho quando temos um certo tipo de imagem, um certo número de blogposts. Ao preencher isso com todos esses dados, podemos ter certeza de que nosso tema parece bom para todas as situações. Mas no nosso caso, vamos baixar isso para nos dar uma vantagem com nosso novo projeto. A maneira de instalar isso é ir até a seção Configuração e podemos baixar uma cópia deste link. Vou clicar com o botão direito do mouse nisso e, em seguida, Salvar link como e, em seguida, salvar isso na área de trabalho. Para importar isso, voltamos para o painel do WordPress e, em seguida, descemos para a seção de ferramentas, e aqui dentro temos este importador. Já há vários importadores ou configuração para apenas se queremos importar dados de um blogger ou um feed RSS. Mas o que precisamos é este importador WordPress na parte inferior puxando nossos dados de um arquivo de exportação. Clique em Instalar agora, configure isso. Em seguida, execute o nosso importador, selecione o nosso arquivo e o meu é salvo na área de trabalho, e este é o arquivo XML apenas aqui. Abra isso, clique em Upload. Pouco antes de toda essa informação ser baixada, também podemos atribuir vários autores a esses novos blogposts e essas páginas que estão sendo criadas. Poderíamos ter criado um novo nome de usuário, ou podemos selecionar qualquer um que você já tenha configurado, e no nosso caso, só temos este blog admin. Podemos atribuir isto se quisermos. No entanto, eu só vou deixar isso vazio, ou eu vou verificar a seção de anexos de importação. Isto irá baixar coisas que, como as imagens, que vamos precisar para o nosso projeto. Clique em Enviar e dê alguns momentos para baixar. Ótima. Uma vez terminado, podemos ir para o front-end do nosso site, clique em Atualizar. Todos esses dados de exemplo agora foram importados. Podemos ver todas as nossas páginas no topo, também temos alguns menus suspensos. Temos todos os nossos blogposts. Se rolarmos para baixo, podemos ver alguns dos meios de comunicação que foram baixados, temos várias imagens. Estes têm várias datas, eles têm várias ofertas, também algumas delas terão comentários e também várias tags e categorias. Você vê os comentários à direita, podemos clicar neles. Isso agora nos deixa com alguns dados de blogpost para trabalhar em nosso projeto. Se você teve algum problema ao baixar esses dados, não se preocupe, este é apenas alguns dados de exemplo para trabalhar. Em seguida, vamos passar para o próximo vídeo onde vamos ver como podemos adicionar nossos próprios blogposts e também atualizar quaisquer já existentes. 20. Blog do WordPress: adicionando e atualizando publicações: No vídeo anterior, adicionamos muitos exemplos de conteúdo e, em particular, agora vemos muitas postagens de blog em nossa página inicial. Neste vídeo, vamos adicionar nossa própria postagem de blog e também dar uma olhada em como podemos editar os existentes também. Como sempre, a maneira de fazer isso é ir para o painel. Em seguida, vamos para esta seção de Posts apenas aqui. O layout de hoje é semelhante às páginas, uma que vimos no último vídeo. Podemos rever isso e clicar em todos os nossos posts. Podemos adicionar diretamente um novo e também podemos pular para quaisquer categorias e tags também. Vamos para o All Posts e podemos ver todos os que foram criados com nossos dados de exemplo. Nós também temos este mundo Hello! um que nós configuramos quando nós configuramos pela primeira vez a nossa instalação Wordpress. Podemos ver o autor de qualquer um destes, este Tema Buster um e o Tema Reviewer é dados de exemplo. Com qualquer postagem de blog que nós mesmos adicionamos, teremos o nosso autor logado atual. Podemos ver quais categorias isso foi atribuído e também quaisquer tags que foram adicionados. Depois disso, podemos ver os comentários que estão sendo criados. Este em particular tem um único comentário que foi atribuído a este post de blog. Se quiser, podemos clicar nisso. Você será levado diretamente a esses comentários, onde podemos aprovar isso, podemos responder, podemos editá-lo, e também podemos remover quaisquer comentários inadequados também. Clique no botão Voltar para ser levado de volta para Todos os Posts. A última seção é a data em que foi publicada. Quando criamos uma nova postagem de blog, podemos publicar isso imediatamente ou programá-los para um tempo futuro. Se você passar o mouse sobre qualquer uma dessas postagens de blog, também podemos editá-las. Também podemos removê-los. Por enquanto, vamos clicar no botão “Adicionar novo” na parte superior e criar nossa própria postagem no blog. Ao adicionar uma nova postagem de blog, isso também vai tirar proveito do editor Gutenberg baseado em blocos, assim como vimos quando criamos nossas páginas no projeto anterior. Na parte superior, adicionamos um título de postagem de blog. Eu só quero ir para o My First Post. Então, abaixo disso, podemos adicionar vários blocos de conteúdo, como imagens, texto e qualquer outra coisa, que já vimos nos vídeos anteriores. Eu só vou adicionar algum texto de amostra e a maneira que eu vou fazer isso é fazendo uma busca por lorem ipsum. Isso nos levará ao lipsum.com, que é apenas um site simples para gerar alguns dados de amostra. O que precisamos fazer é rolar para baixo e podemos gerar um certo número de parágrafos de palavras, cinco parágrafos é bom, clique em “Gerar”. Então isso nos dará nossos cinco parágrafos, que agora podemos copiar e colar em nosso projeto, colar isso em. Temos agora cinco parágrafos de dados. Podemos passar o mouse sobre qualquer uma dessas seções e também ver um menu pop-up. Podemos fazer coisas como reorganizar a ordem. Podemos deixar o texto em negrito, itálico. Podemos criar links selecionando qualquer parte deste texto e, em seguida, uma URL que você deseja vincular. Também podemos definir coisas como o alinhamento. Também temos várias opções com este menu suspenso à direita. Também com este texto selecionado, temos cinco opções na barra lateral. Podemos alterar o tamanho padrão da fonte. Podemos alterar as configurações de cor. Se você quiser que a primeira letra seja maior, também podemos selecionar isso, e se clicarmos no botão Postar no topo, isso agora lhe dará algumas configurações gerais para nossa postagem no blog. Em primeiro lugar, temos a visibilidade e podemos selecionar isso para ser público para que qualquer um possa ler nosso post. Podemos disponibilizar isso apenas para administradores e editores do site. Tudo isso se baseia nas funções específicas que damos aos usuários. Teremos um vídeo dedicado sobre isso muito em breve. Se tivermos algumas informações confidenciais, também podemos proteger nossa postagem de blog com senha. Então temos a data, podemos publicar isso imediatamente, ou podemos agendar isso para qualquer data futura. Em seguida, muitas dessas opções semelhantes que vimos nos vídeos anteriores, onde criamos em páginas diferentes. Temos o permalink, que é um link direto para este post. Podemos atribuir as várias categorias ou tags. Podemos selecionar quaisquer categorias existentes ou adicionar uma nova também. O mesmo para as etiquetas. Temos uma imagem em destaque que você também pode adicionar. Esta é uma imagem que aparecerá ao lado da nossa postagem de blog, qualquer lista de páginas de blog em. O trecho, esta é uma pré-visualização ou uma versão abreviada do nosso post do blog. Isto é o que vemos se formos para o front-end do nosso site. Estas são todas as versões encurtadas que você vê aqui. Uma vez que não queremos mostrar a postagem completa do blog nesta listagem, porque esta página será muito, muito longa. Se não adicionarmos nenhum trecho aqui, o WordPress tomará automaticamente as primeiras seções do nosso blog. Depois disso, também podemos definir se discussões ou comentários são permitidos para este post. Este tema em particular também nos permite selecionar um layout diferente. Podemos adicionar barras laterais à esquerda e à direita. Podemos remover a barra lateral e ter um conteúdo de tamanho completo. Vou deixar isto como padrão. Até o topo, vamos publicar isso para que possamos ver isso em nosso site. Confirme. Vá até o front-end e atualize o navegador. Você vê Meu Primeiro Post está aparecendo agora. Como este é o post mais recente do blog, você pode esperar que ele apareça bem no topo, e isso geralmente será o caso, mas no entanto, ao importar todos os dados de amostra, uma dessas postagens foi definida ser pegajoso. Se clicarmos nisso, então levamos para a versão completa do nosso post e vamos para “Editar Post”. Em seguida, nas configurações à direita, podemos ver que isso foi preso no topo da página. Podemos desmarcar isso, atualizar nossa postagem e voltar ao nosso site. Isso agora leva nossa primeira postagem no blog bem no topo. Aqui podemos ver o nosso editor personalizado e podemos ver as cores diferentes. Podemos ver a primeira letra maior e também podemos fazer praticamente qualquer coisa que quiséssemos com todos os nossos blocos de conteúdo. Além disso, se o nosso post está se tornando muito longo, também podemos inserir uma quebra de página. Clique no ícone Plus. Pesquise a quebra de página. Isso agora dividirá nosso conteúdo em duas páginas. Podemos adicionar quantas dessas quebras de página quisermos. Só vou ficar com essa por enquanto. Atualize esta postagem. Agora, se atualizarmos nosso site, veremos que a metade inferior do nosso conteúdo foi removida. Também podemos alternar entre as nossas páginas na parte inferior. É assim que podemos adicionar uma nova postagem de blog e também editar postagens existentes. Se você quiser, você pode ir em frente e adicionar quantos posts diferentes quiser ou até mesmo atualizar qualquer um dos existentes também. Uma maneira de realmente dar vida à nossa postagem no blog é adicionando diferentes mídias, como imagens. É para isso que vamos passar nos próximos vídeos. 21. Blog do WordPress: onde encontrar fotos incríveis para suas publicações do blog: Bem-vinda de volta. A última coisa que você quer fazer é gastar muito e muito tempo escrevendo excelentes postagens de blog. Se você não conseguir encontrar nenhuma grande imagem ou mídia para acompanhar. Este vídeo é sobre mostrar alguns recursos que podem ajudá-lo a encontrar algumas imagens de alta qualidade. Além disso, ilustrações, gráficos vetoriais e vídeos. Todos eles podem ser incluídos em seus sites ou em suas postagens de blog. O primeiro recurso é um site chamado Pixabay, e esse é o nosso pixabay.com. Ele tem milhares de fotos stock grátis, vetores e também vídeos. Podemos fazer uma pesquisa usando a caixa de pesquisa no topo, ou se você rolar um pouco mais para baixo, há abas, espera, ilustrações, gráficos vetoriais e também vídeos. Uma das grandes coisas do Pixabay é, como você pode ver, todos os vídeos e imagens são liberados sem direitos autorais sob o Creative Commons. Isso basicamente significa que você é livre para baixar, livre para mudar, livre para distribuir as imagens, e você não precisa pagar quaisquer royalties para o escritório e também atribuição não é necessária. Isso basicamente significa que às vezes a fotografia de estoque é gratuita para baixar e usar gratuitamente, mas às vezes você precisa fornecer um link de volta para o site do qual você baixou ou um link para a oferta em troca da imagem ser fornecido gratuitamente. Mas isso não é necessário no Pixabay. Se você quiser saber um pouco mais sobre os direitos de uso, basta clicar no botão “Saiba mais”, e há uma lista de perguntas freqüentes. Uma vez que você está no site e você encontrar uma imagem que você gosta, basta clicar na imagem e você pode baixar a imagem em vários tamanhos. Você precisa estar conectado para baixar as versões maiores, mas as imagens ainda são gratuitas para download. Há também uma confirmação de que a imagem é gratuita para uso comercial. Também não há nenhuma atribuição necessária para Pixabay ou para o autor. Então o próximo site que vou olhar é um site chamado Unsplash.com. Unsplash.com também é um recurso gratuito para fotos stock. Se você clicar no link “fazer o que quiser”, poderá obter mais informações sobre a licença. Assim como no Pixabay, todas as fotos publicadas no Unsplash são licenciadas sob o Creative Commons Zero. Podemos copiar, modificar, distribuir e usar as fotos gratuitamente, e isso também inclui uso comercial. Também não precisamos da permissão do fotógrafo ou da Unsplash. Também não precisamos fornecer atribuição se não quisermos. Volte para a página inicial. É muito simples procurar fotos, e também podemos navegar pelo que há de novo e também várias coleções. Há também uma opção para se inscrever e obter 10 fotos novas a cada 10 dias. O próximo recurso é uma empresa chamada Shutterstock. Isso está disponível na Shutterstock.com. Estes são provavelmente os maiores de todos. Há uma imagem, um videoclipe de praticamente qualquer coisa que possa imaginar. No entanto, o site não é livre para usar. Existem vários planos de preços diferentes que você pode escolher, mas você pode encontrar quase tudo o que você está procurando. Vamos procurar por tigres. Ele me leva à busca que tem muitas fotos de tigres, ambos tirados por fotógrafos, e também imagens tiradas por ilustradores. Se você rolar para baixo, você pode ver que a pesquisa sozinho tem 1.147 páginas diferentes. Além disso, só esta semana foi 924.000 novas imagens stock adicionadas esta semana. Isso dá-te uma ideia do tamanho da Shutterstock. O próximo recurso que também é gratuito para usar é o site da Wikimedia Commons. Este é um banco de dados de 31 milhões de arquivos de mídia livremente reutilizáveis para os quais qualquer um pode contribuir. Estes são organizados em imagens, sons e também vídeos. Estes são todos licenciados sob a Creative Commons. Mais uma vez, estes são todos gratuitos para download. Mas basta verificar cada imagem individual. Basta verificar os contratos de licenciamento e também se há alguma atribuição necessária. Por último, se você só quer fazer uma pesquisa no Google. Vamos procurar os tigres novamente, e depois ir para as imagens. Uma ferramenta útil que podemos usar são as Ferramentas de Pesquisa. Clicamos em “Ferramentas de Pesquisa” e depois em “Direitos de Uso”. Podemos então filtrar as imagens pelo tipo de licença. Vou procurar tigres etiquetados para reutilização com modificação. Então estes são filtrados para os que podemos modificar. Mas, novamente, clique na imagem individual e vá para o site. Basta verificar novamente se a imagem está livre para baixar e se é ou não necessária qualquer atribuição. Claro, você pode encontrar muitos mais sites de fotografia de estoque gratuitos e pagos com uma pesquisa rápida do Google, mas estes são alguns ótimos sites para você começar. 22. Blog do WordPress: incluindo mídia: Até agora, criamos nossa própria postagem de blog com um texto simples e podemos realmente dar vida à nossa postagem de blog adicionando as várias peças de mídia, como imagens, videoclipes e também áudio também. Agora, para fazer isso, vamos primeiro começar adicionando uma imagem em destaque. Já analisamos a adição de imagens em destaque no primeiro projeto, onde as adicionamos às nossas páginas. Com este projeto ao adicioná-los à nossa postagem de blog, neste tema, a imagem em destaque será exibida ao lado nossa postagem de blog, exceto apenas dentro desta listagem de postagens de blog. Se deslocarmos para baixo até nossas postagens de blog de exemplo, podemos ver a imagem em destaque aqui. Vamos adicioná-los se entrarmos em nossa postagem do blog ou também podemos acessar diretamente do nosso painel também, também podemos entrar no link de edição da postagem. À direita, temos a seção de imagens em destaque do menu onde podemos definir isso para o nosso post no blog. Você pode selecionar sua própria imagem para carregar ou acessar diretamente a Biblioteca de Mídia. Todas essas imagens foram fornecidas quando baixamos os dados de amostra. Então temos algumas imagens para trabalhar para este projeto. Selecione qualquer um destes e convenientemente também temos coisas como o texto alt já preenchido para nós. Podemos apenas definir isso como a nossa imagem, Atualizar, em seguida, voltar para o nosso projeto, visitar o site. Agora temos uma imagem para a nossa postagem no blog. Agora, esta é uma ótima maneira de adicionar uma imagem quando mostramos uma lista de todas as postagens do nosso blog como esta. Mas e se clicarmos nisso para ver a postagem completa do blog? Queremos também, às vezes, adicionar imagens entre todo o conteúdo deste blog post também. Agora, para fazer isso, eu realmente vou voltar para a exibição do painel, e vamos apenas atualizar isso para que tenhamos a versão atualizada. Imagens também podem ser adicionadas como um bloco. Podemos passar o mouse sobre a área onde queremos adicionar um novo bloco. Clique em “Adicionar”. Este bloco de imagem está atualmente no topo ou também podemos pesquisar. Clique nisto. Em seguida, também podemos carregar uma nova imagem ou selecionar uma da Biblioteca de Mídia. Assim como antes, nós levamos para todas as nossas imagens que temos atualmente. Podemos selecionar qualquer um destes, atualizar nosso post, e também para o front-end do nosso site, podemos atualizar. Agora vemos que nossa imagem foi inserida. Tal como acontece com a maioria desses blocos de conteúdo, também podemos clicar sobre estes ou passar o mouse sobre e podemos ver oito opções menu. Temos muitas opções diferentes, como cortar a imagem, podemos vincular a diferentes URLs. Também podemos reorganizar nosso conteúdo para estar acima ou abaixo de blocos diferentes e também à direita, temos algumas opções também. Podemos brincar com o estilo da nossa imagem arredondando os cantos, podemos mudar os textos alt, podemos mudar o tamanho, e assim como eu adicionar uma única imagem como esta. Também podemos carregar várias imagens na forma de uma galeria. Uma galeria também é um bloco de conteúdo também e só precisamos selecionar um local onde queremos isso, fazer uma busca pela galeria. Então, a partir daqui, temos as opções familiares de carregar novas imagens ou também acessar a Biblioteca de Mídia. Uma vez que ficamos com a Biblioteca de Mídia, podemos selecionar várias imagens para exibir dentro desta galeria e escolher qualquer uma delas. Queremos selecionar estes cinco. Clique em “Criar”. Pouco antes de inseri-los em nossa galeria, também podemos arrastar e soltar essas imagens para reorganizar. Assim que estivermos felizes, insira estes. Essas imagens de galeria também podem ser vinculadas a URLs também, e também podemos alterar o número de colunas que você deseja. Isso é realmente flexível de usar. Atualize isso e sobre o site e atualize nossa postagem no blog. Primeiro, vemos que nossa imagem tem os cantos arredondados. Se formos para a página 2, agora temos uma bela galeria de imagens. de imagens, também podemos inserir diferentes tipos de mídia, como clipes de vídeo. Isto é inserido praticamente da mesma forma se voltarmos para a nossa tela de edição. Então, se encontrarmos qualquer local onde queremos adicionar qualquer bloco, clique em “Adicionar”. Procure o vídeo. Se você já tiver um videoclipe salvo em seu computador, é claro que você também pode usá-lo. Vou para pixabay.com. Se você clicar no menu suspenso, podemos procurar vídeos. Aperte “Enter”. Ele nos dará uma lista de todos os vídeos que podemos selecionar neste site. Este parece bem. Clique neste “Downloads”. Eu só vou para a versão mais pequena por enquanto. Então, uma vez terminado, lembre-se que este não está inserido atualmente na Biblioteca de Mídia, então precisamos ir para Upload, para os Downloads. Selecione este clipe e, ao carregar isso, o colocará automaticamente na Biblioteca de Mídia 2. À direita, temos várias opções de vídeo, como fazer o loop deste vídeo, silenciá-lo quando ele é carregado inicialmente, também podemos adicionar o controle, como reproduzir e pausar, e também reproduzir também. Uma imagem de cartaz, esta é uma imagem estática que será exibida quando o vídeo não estiver sendo reproduzido. Este é um recurso muito útil para ter também. Novamente, você também pode reorganizar esses blocos e alterar algumas das opções. Quando estiver feliz, clique em “Atualizar”. Podemos verificar se isso está funcionando atualizando nossa postagem no blog. Temos os controles no fundo com o tempo. Clique em “Play” e tudo isso funciona bem. Em seguida, você também pode querer adicionar clipe de áudio em sua postagem de blog e este lugar para baixo na parte inferior. Clique no botão “Inserir bloco”. Como você pode esperar, isso é chamado de bloco de áudio. Para pegar um clipe de áudio, vou até bensound.com. Isso dará alguns exemplos de áudio gratuitos que você pode baixar. Ou você também pode usar o seu próprio, se você preferir. Clique no botão Download para qualquer um destes e podemos baixar uma versão gratuita para usar com atribuição. Atribuição significa que precisamos creditar o benson.com com este clipe de áudio. Para fazer isso, só precisamos copiar este exemplo na parte inferior. Baixe isso. Assim como fizemos com o clipe de vídeo, de volta ao post, selecione isso de nossos downloads. Este clipe de áudio está agora inserido. Temos o botão Play e também podemos alterar as configurações de áudio à direita também. Estes padrões são bons para mim. Vou apenas clicar abaixo deste clipe de áudio e, em seguida, inserir a atribuição. Atualize esta postagem do blog, atualize o navegador e podemos testar se isso está funcionando. Talvez não consiga ouvir isso do seu lado, mas está tudo funcionando bem. Se dermos uma olhada através de todos os diferentes tipos de blocos também varia de acordo com os tipos de blocos em mídia que você pode inserir nesses posts de blog também. A última coisa que vou mostrar é como inserir algumas mídias diretamente de uma URL. Para isso, vamos colocar em adicionar bloco de imagem, e então podemos usar a terceira opção que é inserir a partir de URL. Mas isso, é claro, precisamos de um URL de mídia para vincular. Um bom lugar para agarrá-los é o site da Wikimedia Commons, que está disponível em Commons.wikimedia.org. Você pode pesquisar através da enorme biblioteca de imagens gratuitas para selecionar. Tudo o que eu vou selecionar esta imagem do dia. Clique sobre isso e, em seguida, somos levados para a versão de tamanho completo onde podemos clicar com o botão direito do mouse. Poderíamos salvar essa imagem e adicioná-la à Biblioteca de Mídia. Mas em vez disso, vou copiar o endereço da imagem e , em seguida, colar isso como nosso URL. Aperte “Enter”. Há uma prévia da nossa imagem. Atualizar, recarregar. Esta é apenas uma maneira diferente de adicionar imagens em vez de usar a Biblioteca Medial. Nossas imagens também agora são exibidas na parte inferior. Esta é apenas uma maneira alternativa de adicionar imagens em vez de acessar a Biblioteca de Mídia. 23. Blog do WordPress: usuários, permissões e gerenciamento de comentários: Agora é hora de pensar sobre quem realmente vai usar nosso blog e também quanto acesso cada usuário realmente tem. Quando dentro da exibição do painel assim, você já deve ter notado que temos essa opção “Usuários” à esquerda. Se eu passar o mouse sobre isso, temos a opção de ir para todos os usuários, podemos adicionar diretamente um novo, ou podemos entrar em nosso perfil atual. Nosso perfil atual tem algumas opções, como alterar o esquema de cores, também podemos atualizar nossas informações pessoais, nossas informações de contato, nossa foto de perfil e também redefinir a senha também. Mas este vídeo não é sobre eles, sobre adicionar novos usuários, e também verificar as diferentes permissões que eles têm também. Vamos para a seção Todos os usuários. No topo vemos nosso blog admin, que é o único usuário que temos configurado. Também podemos adicionar um novo nome se quisermos a partir da tela de edição. Podemos ver o nosso e-mail. Também temos esse papel de administrador. Um administrador é um usuário que tem todas as permissões necessárias para fazer ou alterar qualquer coisa que desejar neste site. É por isso que temos todas estas opções à esquerda. Podemos excluir, postar, adicionar novas páginas, aprovar comentários e também alterar a aparência deste site. Quando temos apenas um único site, assim como fazemos aqui, este é o papel de nível superior. Criamos duas postagens de blog quando, na verdade, só criamos uma. Mas quando configuramos o WordPress pela primeira vez, o exemplo “Olá mundo” foi atribuído ao nosso usuário também. Este, nós adicionamos os dados de amostra. Também foram incluídos com esses dados dois usuários adicionais. A diferença entre estes dois e nós mesmos é esse papel de assinante. Vamos dar uma olhada nisso com mais detalhes em apenas um momento. Como estamos logados no momento como administrador, também temos o poder de selecionar qualquer um desses usuários adicionais. Também podemos ir para a tela de edição e alterar qualquer um dos detalhes. Além disso, muito importante, também podemos mudar o papel atual. Se quiséssemos ter um administrador adicional, poderíamos, e também, geralmente, atualizar ou fazer downgrade de qualquer função de usuário. Acessar todos os usuários, se quiséssemos, também poderíamos remover usuários. Fazemos isso de forma semelhante a quando lidamos com as páginas e posts do blog. Tudo o que precisamos fazer é passar o mouse sobre qualquer um desses usuários e selecionar o botão “Excluir” ou também podemos aplicá-los em massa também selecionando vários, e então você vê-lo suspenso de cima. Como acabamos de ver com o menu suspenso na tela de edição, juntamente com o administrador e assinante, temos várias outras funções também. Para saber mais sobre essas configurações, podemos ir para o nosso motor de busca e fazer uma pesquisa por funções WordPress. Minha pesquisa principal é do site WordPress.org e ele nos leva diretamente para as funções e capacidades. Clique nisso, role para baixo e, em seguida, veremos um resumo de cada uma dessas funções. Eu mencionei antes, quando temos um único site como temos, que o administrador é o papel de nível superior. Como podemos ver, este é alguém que tem acesso a todos os recursos administrativos dentro deste único site. No entanto, como descobriremos mais adiante neste curso, também podemos criar uma rede WordPress ou uma instalação multi-site WordPress. Este tipo de configuração do WordPress também gera um novo tipo de função chamado de super administrador. Um super administrador é alguém responsável por todos os recursos de administração na rede de sites. Nós não precisamos nos preocupar com este super administrador ainda, tudo o que precisamos nos concentrar é nos cinco papéis logo abaixo. Logo abaixo do administrador, também temos o editor. Este editor também tem alguma responsabilidade. Eles também podem publicar e também gerenciar suas próprias postagens de blog, e também postar para outros usuários também. Depois disso, temos o autor. Este é alguém que pode publicar e gerenciar apenas seu próprio post e não qualquer post de qualquer outro usuário. Depois disso, temos um colaborador que é alguém que pode escrever seus próprios posts, mas eles não podem publicá-los diretamente sem uma confirmação do administrador. Então, finalmente, a função mais baixa é o assinante. Este é apenas alguém que pode se inscrever em nossos sites e também gerenciar seu próprio perfil também. Eles não podem criar nenhum conteúdo, não podem gerenciar o conteúdo de outras pessoas. Tudo o que eles podem efetivamente fazer é se inscrever e alterar os detalhes de seus usuários. Também podemos ver aqui que nossa conta de administrador foi criada automaticamente quando configuramos o WordPress pela primeira vez. Agora, com isso em mente, podemos adicionar manualmente um novo usuário ao nosso site. Vá até o painel e temos o botão “Adicionar Novo” na parte superior, que também podemos acessar da barra lateral. Eu clico sobre isso e eu vou adicionar um usuário de teste de amostra e um e-mail. Basta testar por enquanto, uma senha terrível. Do teste 2, irá confirmar que isso é bom porque estamos apenas criando um usuário de amostra. Então, na parte inferior, também podemos mudar o papel também, que queremos deixar como assinante, que era o nível inferior das funções. Confirme isto. Um novo usuário foi criado. Também podemos editar qualquer um desses detalhes, se quisermos. Mas agora vou sair do perfil de administrador passando o mouse sobre esta seção no canto. Clique em “Logout” e, em seguida, podemos fazer login como nosso usuário de teste, que foi test @test, uma senha super-forte. Faça login e agora vamos para o perfil do usuário de teste. Já vimos antes a partir das funções e capacidades que um assinante só pode gerenciar seu próprio perfil. Eles não têm acesso a nenhum dos outros recursos de administração, e é por isso que não vemos nenhum dos recursos de administração na barra lateral. Não podemos criar novos posts ou páginas ou geralmente ter qualquer entrada no site. Além disso, qualquer conteúdo que é criado também precisa ser aprovado pelo administrador. Podemos ver isso se formos ao nosso site e depois atualizarmos. Vemos que nosso usuário foi atualizado para o nosso teste. Vá até a página inicial e selecione qualquer uma dessas postagens de blog. Lembre-se de que os comentários foram ativados para este post. Vou deixar um comentário na parte inferior de “Olá”, depois clique em “Postar”. Temos uma mensagem de “Seu comentário está aguardando moderação”. Como não temos aprovação para publicar qualquer conteúdo neste site, o que agora precisamos fazer é fazer logout novamente de nosso próprio nome. logout e, em seguida, faça login novamente como nosso administrador, que era o administrador do blog. Mais uma vez, temos acesso a todos os nossos recursos de administração. Então, à esquerda, podemos ver que temos quatro comentários aguardando aprovação, vá para esta seção. Podemos ver, incluindo nossos dados de amostra, temos 34 comentários no total, 30 foram aprovados, e temos quatro que está pendente. Clique nisso também, filtre isso para baixo, e nós temos os comentários do nosso usuário de teste no topo ao lado dos três comentários dos dados de amostra. Podemos passar o mouse sobre estes manualmente e aprovar. Podemos editar o conteúdo. Podemos remover isso se não quisermos que ele seja publicado em nosso site, ou se quisermos aprovar todos esses comentários de uma só vez, vamos clicar nesta caixa de seleção. Nas “Ações em Massa”, podemos aprovar, aplicar isso, e os quatro comentários já foram aprovados. Para as nossas postagens de blog e atualizar. Os comentários de saudação já foram aprovados e estão visíveis logo abaixo da nossa postagem no blog. Por padrão, quando registramos nossos usuários, vimos que isso tem a função de assinante. Também podemos mudar isso dentro de nossas configurações, se quisermos, para a opção “Configurações” e depois para “Geral”. Uma das opções aqui dentro é a “Função padrão de novos usuários”; atualmente, ela está definida como assinante. E se tivéssemos um certo caso de uso para um maior nível de papel? Também podemos definir isso para ser um padrão diferente. Além disso, como administrador, também temos muito mais opções para controlar as configurações da discussão ou os comentários. Ainda dentro das configurações temos essas discussões link, e isso realmente nos permite ajustar todas essas configurações relacionadas aos nossos comentários. Podemos ter coisas, como confirmações por e-mail quando um novo comentário é postado. Podemos verificar se o autor deve preencher seu nome e e-mail. Podemos verificar se eles precisam ser registrados e logados para comentar. Podemos fechar comentários após uma certa quantidade de dias, e também várias outras opções também, como colocar em lista negra certas palavras que podem ser incluídas em um comentário. Lá vamos nós. É assim que podemos gerenciar diferentes usuários em nosso site WordPress, como podemos alterar as permissões de um usuário, e como podemos controlar com segurança os comentários que estão sendo postados em nosso blog. 24. Blog do WordPress: adicionando páginas: Agora, temos nos concentrado principalmente em nosso blog e também em nossas postagens de blog, mas neste vídeo, vamos ver como podemos adicionar algumas páginas personalizadas, como uma página Sobre Nós e também uma página Fale Conosco também. As páginas que foram adicionadas com o conteúdo de amostra anteriormente foram adicionadas automaticamente ao nosso menu na parte superior. Não precisamos de nenhuma dessas páginas para o nosso projeto, então vamos removê-las e, em seguida, criar as nossas próprias, para a visualização do Painel e para as páginas selecione “Todos”. A partir daqui, podemos passar o mouse sobre e excluir qualquer um deles manualmente ou podemos clicar na caixa de seleção superior e, em seguida, excluí-los com as ações em massa, mover para o lixo, e aplicar isso a todos eles. Nós também temos uma segunda página. Vou remover estes também, Add New. Esta primeira página será sobre nós, então adicione o título da página. Então podemos ir em frente e adicionar algum conteúdo logo abaixo. Você pode criar qualquer informação sobre nós que você quiser, mas eu vou para Lorem Ipsum e, em seguida, pegar algum conteúdo de amostra, colocar aqui dentro. Procure por “Lorem Ipsum”, dirija-se a lipsum.com. Podemos gerar tantos parágrafos quanto gostaríamos. Vou ficar com cinco. Copie tudo isso de volta para uma nova página e, em seguida, podemos colar isso no bloco logo abaixo. Além disso, assim como anteriormente, podemos passar o mouse sobre qualquer uma das seções e podemos editá-las, podemos alterar as cores, podemos alterar todas as configurações da fonte. No entanto, vou deixar isto como texto simples por enquanto. Mas esta é uma opção de adicionar conteúdo por página, bem como adicionar todos esses blocos de conteúdo, se formos para a seção de página sobre a direita, entre todas as outras opções temos os Atributos de Página onde pode selecionar um modelo. Um modelo é algo que é fornecido pelo Temas Creator e nos permite criar diferentes layouts e em diferentes tipos de conteúdo para nossas páginas WordPress. Estes modelos são arquivos especiais que são inseridos em nosso tema, e podemos usar em qualquer uma única página como esta, por isso só se aplica a uma ou única página, ou podemos ter um modelo mais genérico que você deseja aplicar várias páginas. Por exemplo, poderíamos ter um modelo que é para uma página 404, então poderíamos ter um diferentes modelos multi-uso, que é aplicado a todas as páginas para nos dar uma aparência consistente. Analisaremos os modelos com mais detalhes quando começarmos a criar nosso próprio tema do zero, que faremos mais tarde no curso. Mas, por enquanto, vamos ficar com este conteúdo da página que você adicionou dentro dos blocos, publicar nossa página, confirmar. Agora, se atualizarmos, todas essas páginas de amostra foram removidas e a página Sobre nós foi adicionada automaticamente a este menu. Clique nisto. Há todos os textos que adicionamos à nossa página. Claro, somos livres para usar quantos blocos quisermos. Podemos adicionar mídia e todos os diferentes tipos de blocos que vimos em vídeos anteriores, bem como este conteúdo e também os modelos, clicamos sobre isso. Também temos diferentes opções de layout na parte inferior. No momento, estamos usando esse layout padrão, que você pode ver é o texto à esquerda e a barra lateral à direita. Também podemos alterar isso, por exemplo, se uma dessas barras laterais substituídas à esquerda, podemos atualizar isso, atualizar. Também podemos remover a barra lateral e ter o conteúdo de toda a largura da página. Isso é realmente útil para mudar a aparência de nossas páginas. Quero deixar isso como padrão, que é a barra lateral à direita. Lembre-se, todas essas opções estão disponíveis por causa do tema específico que escolhemos. Você pode estar pensando, “Bem, como sabemos exatamente quais opções estão disponíveis antes de baixar um tema?” Bem, isso está disponível ao baixar um tema do wordpress.org e também alguns dos provedores de temas gerais também. Se entrarmos na seção do tema, vamos dar uma olhada no nosso tema espaçoso. Este é um aqui, então podemos clicar em “Mais informações” e então vemos que isso tem 13 áreas de widget diferentes; ele tem quatro layouts de página diferentes, modelos de página diferentes, é responsivo, e tudo mais com layout diferente e opções de cores também. Agora, embora tenhamos analisado essas opções de tema no passado e também as tags que estavam disponíveis, espero que agora você tenha visto inação dentro de um site. Você deve estar agora muito mais confortável com o Slack e um tema específico, com base nessas opções. Vou para o nosso escorrega. Agora, eu vou adicionar o resto das páginas que precisamos, que vai ser a página Fale Conosco e também a página do Blog. Certifique-se de que isto está atualizado e, em seguida, podemos clicar no “Ícone do WordPress”, nós somos levados de volta para todas as páginas, “Adicionar novo”. Este será para o Fale Conosco. Logo abaixo disso, vou adicionar um bloco de conteúdo que é uma lista. Vamos procurar por isso e apenas algumas linhas de dados de endereço de exemplo, linha de endereço 1. Copie isso, aperte “Enter” e podemos adicionar quantas linhas quiser dentro aqui. Isso realmente não importa para esta demonstração. Como em todos os seus blocos, podemos selecionar qualquer uma dessas linhas. Podemos mudar isto para ser uma lista ordenada com os números, mas vou manter isto como a lista com marcadores, que não está ordenada. Assim como com a maioria dos blocos de texto, podemos formatar o texto, podemos mudar a cor, e também alterar os links se quisermos. Agora, nós poderíamos ir em frente e publicar esta página se quiséssemos, e esta página será automaticamente adicionada ao nosso menu ao lado do link Sobre Nós. No entanto, embora eu vá fazer isso um pouco diferente, o que eu gostaria para a página Fale Conosco é que isso só apareça quando passarmos o mouse sobre o link Sobre Nós. Então, quando colocamos o mouse sobre este, é terá um menu drop-down onde podemos selecionar nossa página de contato. Faça isso, em vez de publicar isso diretamente, vamos para as configurações da página e, em seguida, para baixo para a “Página pai”. Nós só temos esta página Sobre Nós, para que possamos selecioná-la. Se tivermos várias páginas, também podemos reorganizar o pedido. Mas por enquanto clique em “Publicar”, “Confirmar”, atualizar nosso blog. Em seguida, passe o mouse sobre o link Sobre Nós irá revelar nossa nova página de contato. Também podemos selecionar isso e seremos levados para nossa página Fale Conosco, que está aninhada dentro do link Sobre Nós. Agora isso é apenas alguns dados que vai ser exibido, mas mais tarde vamos voltar a esta página e adicionar um formulário de contato. Só para arredondar este vídeo de volta ao Painel para as páginas onde vamos adicionar nossa terceira e última página para o blog. A página do blog será a casa das postagens do blog em vez da página inicial padrão, que temos atualmente, se clicarmos em nosso “Ícone do Site”. No momento, todas essas postagens de blog estão listadas nesta página inicial, mas mais tarde teremos uma página de blog dedicada onde elas seriam colocadas dentro. Tudo o que precisamos fazer é publicar isso, atualizar e agora esta página vazia agora também está sendo colocada dentro da barra de navegação. Estas são todas as páginas de que precisamos por enquanto. Em seguida, vamos dar uma olhada em Menus de Navegação e como adicionar um menu personalizado ao nosso site. 25. Blog do WordPress: adicionando nosso menu de navegação: Como descobrimos no vídeo anterior, cada vez que adicionamos uma nova página, ela é automaticamente adicionada ao nosso menu e também, este menu já foi criado para nós. Nós não fizemos nada para criá-lo nós mesmos. Este menu específico foi adicionado quando criamos os dados de amostra nos primeiros vídeos. Mas, é claro, não queremos confiar nos menus de amostra. Queremos saber como criar o nosso próprio. Como acontece com tudo o resto no WordPress, precisamos ir para o painel e, em seguida, para as principais opções. Para criar ou gerenciar nossos novos menus, precisamos ir para a aparência. Este tem um link de menu dedicado. Na parte superior, temos um menu suspenso com todos os menus disponíveis que estão sendo fornecidos com os dados de amostra. Atualmente temos todas as páginas selecionadas e no momento vemos que temos alguns erros dentro deste menu e todos eles foram alterados para esta cor rosa, então sabemos que há um erro. Cada um desses blocos cor-de-rosa será um link de menu. Temos uma página de blog, temos a primeira página, temos o sobre os testes e todos estes são sub-páginas que estão aninhadas logo abaixo desta página também. A razão pela qual vemos esses erros é porque removemos todas as páginas não utilizadas do nosso site. Esta é apenas a maneira do WordPress de nos avisar que não temos mais acesso a nenhuma dessas páginas. Podemos ir em frente e remover qualquer um desses links ou também pode remover o menu completo também. Mesmo para qualquer um desses menus existentes, podemos selecioná-los. Podemos ir para “Select”. Em seguida, também podemos remover qualquer um desses menus não utilizados. Mas no momento, eu vou apenas ir em frente e criar nosso novo menu com este link apenas aqui. Este menu vai substituir o nosso no topo. Vou dar a isto um título de navegação superior. Crie o nosso menu e, em seguida, podemos selecionar algumas opções das configurações logo abaixo. A primeira opção é adicionar automaticamente novas páginas de nível superior a este menu. Isso significa, assim como no vídeo anterior, que cada vez que criarmos uma nova página, ela será automaticamente adicionada ao nosso menu. Este tema já vem com três locais diferentes onde podemos colocar o nosso menu. Este vai ser o menu principal. Vamos clicar nisto. Poderíamos salvar isso e conferir, mas ainda não temos páginas para exibir em nosso tema. O que precisamos fazer é ir para adicionar itens de menu e, em seguida, podemos selecionar o conteúdo que queremos colocar neste menu. Na aba Páginas, vou selecionar tudo, adicionar isso ao nosso menu, e agora temos nossos três links de menu. Nós também podemos escolher vários posts de blog que você deseja adicionar. Também podemos criar links personalizados para acessar sites externos. Para isso, basta adicionar um URL para o qual você deseja vincular e, em seguida, alguns textos que você deseja exibir para o nosso link de menu. Finalmente, também temos categorias onde podemos selecionar diferentes categorias onde queremos fornecer um link direto para. Mas por enquanto, todas as três páginas estão bem, então vamos salvar este menu. É tudo dimensionado e atualizado. Há nossos três links no lugar. Poderíamos deixar isso estruturado exatamente como está. Ou se você quiser ter um sub-menu como já vimos antes, onde o contato é colocado abaixo do link Sobre Nós, precisamos voltar para nossas páginas e, em seguida, o link filho, precisamos clicar em, mover isso para a direita. Coloque isso no lugar e isso agora é classificado como um subitem. Se quisermos que isso novamente seja movido para o nível superior do nosso menu, podemos arrastar isso de volta, ou ir para o nosso item e clicar no link Fora de abaixo Sobre Nós. Guarde isso, recarregue. Eu quero passar o mouse com menu suspenso no lugar. Vamos também ir em frente e adicionar mais um menu, que vai colocar para baixo dentro da área do rodapé. Isso será colocado ao lado do nosso texto no lado direito, na opção do nosso menu. Poderíamos criar um novo menu e colocar isso na área do rodapé ou em vez disso, se formos para gerenciar locais, podemos reatribuir menus diferentes para diferentes locais. O menu de rodapé, vamos para o menu social pré-existente. Salve nossas alterações. Agora, se atualizarmos, vemos que nossos links de mídia social são colocados na parte inferior. Se quisermos reorganizar a ordem de cada um desses links, basta selecionar o menu que deseja editar. Por exemplo, o menu social. Selecione isso e, em seguida, podemos reordenar cada um de nossos links. Além disso, se quisermos alterar isso de uma forma mais visual, também podemos ir para o personalizador de temas, eu seleciono novo link personalizado, e o personalizador nos dará uma visualização visual de todas as alterações que fizemos no nosso site. Tem uma seção de menu onde podemos acessar todos os locais e todos os menus existentes. Por exemplo, o menu social, podemos clicar sobre isso. Também podemos alterar nossos links e todos eles mudam em tempo real. Se mudarmos um dos rótulos e, em seguida, ir para baixo, podemos ver que isso foi visualizado dentro do navegador. É assim que podemos adicionar menus, como podemos excluir menus, também como podemos editar, e reorganizá-los e na próxima seção vamos ficar muito mais familiarizados com este personalizador. Eu tenho para você muitas das opções de personalização disponíveis para tornar este tema mais pessoal. 26. Blog do WordPress: o personalizador em mais detalhes: Nos vídeos anteriores, já tivemos uma breve olhada no personalizador, que está disponível na guia Aparência dentro do painel. O personalizador é uma maneira de fazer alterações em nosso tema e ver uma prévia ao vivo dessas alterações antes de salvá-las e fazer com que elas se apliquem ao nosso projeto. Agora vamos rever o personalizador e fazer algumas alterações na aparência do nosso site. Na minha área de trabalho, eu tenho uma pasta Imagens para este projeto e isso está incluído neste curso. Você pode baixar isso sozinho e usar as mesmas imagens que eu. Em vez disso, se preferir, você pode escolher o seu próprio e usá-los para a biblioteca de mídia. Temos estes disponíveis. Vamos para a biblioteca medial agora, e então podemos arrastar sobre a pasta completa do projeto, e soltar isso dentro daqui. Você tem vários logotipos e imagens, você tem alguns ícones, e também uma textura que usaremos em breve. Com isso agora no lugar, agora podemos voltar para a aparência e depois para a opção de personalização. Algumas dessas opções terão vídeos dedicados chegando. Não vamos passar por todas as opções neste vídeo, mas vamos começar no topo dentro da seção de cabeçalho e começar adicionando um logotipo. Podemos fazer isso dentro da opção Cabeçalho e, em seguida, na Identidade do Site. A partir daqui vamos adicionar um logotipo que vai aparecer ao lado do título do nosso site. Você pode escolher qualquer logotipo, é claro. Eu vou usar este que está incluído com o curso como este. Também podemos cortar isso se preferirmos. Vou fazer isto do tamanho normal. Você pode cortar. No momento, não vemos nenhuma alteração aparecendo dentro de nossa pré-visualização. Isso ocorre porque se rolarmos para baixo, também temos uma terceira opção, quer queiramos mostrar o logotipo, ou os textos, e podemos realmente selecionar ambos, então estes aparecem lado a lado. Ao lado do título, isso está sendo definido automaticamente quando criamos um site WordPress no início, e você pode alterar isso se quiser. Eu vou deixar isso como está, mas eu vou mudar a linha de tag logo abaixo. Isto vai ser tudo o desenvolvimento web. Podemos ver como estamos digitando, isso é atualizado automaticamente dentro da visualização, e a última coisa que eu vou atualizar na seção vai ser o ícone do site. Esta é a pequena imagem que aparece dentro da aba do navegador. Podemos selecionar um ícone, eu vou para este, abaixo deste. Vemos que isso está sendo aplicado automaticamente ao nosso topo. Se você quiser, você também pode alterar a cor do texto do cabeçalho também, mas estou feliz com a cor, que é fornecida como padrão. Algumas outras coisas a observar também aqui é que também temos algumas opções para ver como o site parece em diferentes tamanhos de tela. Na parte inferior, estamos atualmente na exibição da área de trabalho, também podemos visualizar a aparência deste em um tablet. Podemos clicar no botão do meio para fazer isso, e também a visão móvel de tela menor também. Isso nos dá uma boa chance de visualizar como as coisas seriam se talvez enviássemos uma imagem que é muito grande, texto incrível que não se encaixa perfeitamente, mas geralmente um monte desses temas que você enviou para a loja de temas, são geralmente totalmente responsivos. Não podemos publicar nossas alterações quando estivermos felizes, e elas também serão refletidas dentro do nosso site. De volta ao personalizador, temos muitas opções diferentes aqui dentro. Vemos alguns atalhos à direita. Podemos clicar no ícone de lápis ao lado de qualquer uma dessas áreas editáveis, e então levamos direto para a seção personalizador, onde podemos fazer nossas alterações. Voltando ao menu principal no topo, temos esta opção global onde podemos aplicar algumas configurações para diferentes cores, nossa tipografia, e também nossos layouts e fundo também. Se você quisesse, você poderia mudar todas as cores. Temos uma cor primária definida pela oferta de temas, e podemos alterar isso para que ela se aplique a todas as áreas verdes de nossos sites. Você também pode mudar isso para ser um modo escuro também. Se você preferir isso para o seu blog, a opção de tipografia nos dará a chance alterar as fontes padrão que vamos usar para o nosso projeto, e podemos mudar isso para ser ou algumas dessas fontes padrão fornecidas, ou um dos selecionados do Google também. O que mudou tanto o corpo como as tags de cabeçalho para ser Roboto, publique isso. A cor de fundo, podemos selecionar qualquer cor de fundo diferente que se aplica a fora da nossa área de conteúdo principal. Atualmente, esta é uma barra de cor cinza claro que você pode ver. Podemos mover a cor para qualquer uma dessas cores e mudar a sensação do nosso site. Se quiséssemos, também poderíamos carregar uma imagem de fundo ou uma textura para substituir essa cor padrão. Layout, isso nos dará uma chance de definir a largura do conteúdo, que é esta cor escura, cinza. Podemos ter uma caixa exatamente como vemos aqui com uma certa largura, ou podemos ter que ser o layout mais amplo e então vamos para conteúdo boxy no centro. Ao lado de quando alteramos nossas páginas para a partir deste personalizador, também podemos alterar o posicionamento da barra lateral a partir daqui se quiser ter um jogo ao redor e ver como isso se sente com diferentes opções de layout. Este é o layout padrão para começar, que se aplicará a todas as páginas, e então temos um layout que é mais específico para páginas e também para postar blog também. Talvez nesta listagem de postagens de blog, não queremos nenhuma barra lateral, então podemos selecionar essa exibição, e então quando clicarmos em qualquer uma dessas postagens, para ser levado para a exibição completa da postagem. Podemos então reintroduzir uma barra lateral em qualquer lado que queiramos. Novamente, isso também pode ser diferente para todas as páginas, portanto, se entrarmos na página “Sobre nós”, ainda veremos uma barra lateral dentro aqui, e também podemos remover isso. Vou publicar essas alterações e, em seguida, clicar no logotipo do site para ser levado de volta à nossa página inicial. Se eu pudesse tornar isto um pouco mais estreito. Sim, parece melhor, publica isto. Voltem para o topo. Teremos vídeos dedicados para muitas dessas opções, mas apenas uma última coisa que eu gostaria de mostrar é o botão adicional de download CSS. Se você sabe como usar CSS, este é um lugar onde você pode adicioná-lo. Mas não se preocupe se você não conhece nenhum desses códigos, será apenas um exemplo do que podemos fazer. Por exemplo, se quisermos segmentar qualquer texto, que é um elemento EP, poderíamos aplicar nosso CSS personalizado assim, dado como controle total sobre todo o estilo e layout do nosso tema. Não se preocupe se você não sabe nada disso, isso é apenas algo extra que você pode talvez usar no futuro. Este é o personalizador e também uma coisa a lembrar ao usar o painel, algumas das opções aqui dentro também nos vincularão de volta ao personalizador também. Por exemplo, se você for para a aparência e, em seguida, para baixo para o link de cabeçalho, isso nos levará para a seção de cabeçalho do personalizador. Eu vou deixar o site como ele é por agora e você pode fazer algumas alterações adicionais se você preferir, usando o personalizador sem a necessidade de aplicar qualquer codificação. Deixaremos este vídeo lá porque cobriremos o resto das opções à medida que avançarmos nesta seção. 27. Blog do WordPress: adicionando imagens de cabeçalho: Vamos agora fazer um pouco mais de personalização com o cabeçalho do nosso projeto. Além disso, adicione esta imagem de cabeçalho que você pode ver dentro da pré-visualização do tema espaçoso. A imagem de cabeçalho é esta grande imagem de fundo com este livro e este telefone, que aparece na parte superior do nosso site. É ideal para branding e dá ao nosso site uma aparência única. Isso também pode ser feito no painel dentro do personalizador. Voltar para a aparência e para a seção personalizador onde vamos saltar para o cabeçalho. Para alterar essas imagens, precisamos ir para a seção de mídia de cabeçalho onde podemos fazer upload de um novo vídeo ou uma nova imagem de cabeçalho. Poderíamos reproduzir um vídeo em segundo plano se quiséssemos, ou criar um link para um URL do YouTube. Em vez disso, eu vou para a imagem de cabeçalho. Clique em “Adicionar nova imagem”, onde podemos fazer upload de uma nova ou saltar para a Biblioteca de Mídia. A imagem que vou usar é esta aqui. Selecione isso e também podemos cortar o tamanho se quisermos ou clicar em “Cortar”. Este será carregado no topo do nosso projeto. Também podemos adicionar várias imagens. Há um segundo fornecido com este curso. Esta é a imagem do computador. Novamente, selecione e recorte. A partir do personalizador, podemos ver que este é o cabeçalho atual e também temos alguns anteriormente carregados também. Se quiséssemos, poderíamos ficar com uma única imagem, ou em vez disso, podemos clicar em “Cabeçalhos carregados aleatórios”. Em seguida, um aleatório é exibido cada vez que a página é carregada. Por padrão, isso está aparecendo acima de nossa seção de cabeçalho. Podemos mover isso logo abaixo clicando em “Posição abaixo” dentro desta seção na parte inferior. Se agora publicarmos essas alterações e passarmos para o nosso site, atualize. Se continuarmos atualizando o navegador, vemos que uma imagem aleatória é selecionada cada vez que a página é carregada. Nós também voltaremos a esta imagem de cabeçalho mais tarde no projeto onde vamos substituir isso por um carrossel. Agora, isso é bom. Vamos voltar para o personalizador. Se voltarmos um nível para a seção de cabeçalho, também podemos clicar no menu primário também. A partir daqui, vamos ativar o ícone de pesquisa no cabeçalho. Isso nos dará uma caixa de pesquisa que podemos procurar por qualquer post de blog, ou página em nossos sites. Por exemplo, incluímos alguns Lorem Ipsum. Se procurarmos por isso, vamos ver isso, em seguida, retornar de volta a nossa postagem no blog com o texto de Lorem. Também podemos mudar isso para ser o novo menu responsivo também. Para isso, deixamos cair o tamanho do navegador. Esta é a aparência do menu suspenso regular. Se quiséssemos, também poderíamos mudar o novo menu responsivo, que está aparecendo no canto superior direito, assim como este. A escolha do menu depende completamente de você, mas eu quero deixar isso desmarcado e, em seguida, publicar nossas alterações. Agora nós temos essas imagens realmente amplas, eu vou voltar para as configurações globais e para o layout. Onde eu vou é mudar isso de volta para o layout da caixa. Isso apenas impedirá que a imagem se torne muito maior do que o resto do conteúdo. Publique nossas alterações, atualize o navegador. Nossas alterações agora foram atualizadas. No próximo vídeo, vamos dar uma olhada em como adicionar uma imagem de fundo. 28. Blog do WordPress: adicionando uma imagem de fundo: Anteriormente, ao olhar para o personalizador, adicionamos uma cor diferente ao nosso plano de fundo. Esta é a cor que envolve todos esses conteúdos mais escuros no meio. Fizemos isso no personalizador, no painel, na aparência e na personalização. Nas opções globais, tínhamos uma opção de plano de fundo apenas aqui, e é aqui que definimos essa cor de fundo. Outra coisa que mencionamos foi que também poderíamos mudar a imagem de fundo. Podemos selecionar qualquer imagem que gostaríamos de colocar no fundo ou até mesmo uma textura de fundo. Fornecido com as imagens para isso, claro, é uma cor de textura cinza, que eu vou aplicar a este fundo. Podemos ver imediatamente que esta textura foi aplicada em todo o nosso projeto. Temos várias predefinições onde podemos repetir a imagem, podemos preencher a tela, mas podemos ver que nossa imagem já está preenchendo a tela porque isso é repetido. Mesmo que a textura fornecida seja apenas um pequeno quadrado, se desmarcarmos a Repetir Imagem de Fundo, podemos ver que temos apenas este pequeno quadrado no canto. Isso é colocado no canto devido à posição da imagem. Eu nunca tive uma imagem diferente que você queria colocar em qualquer canto em particular ou mesmo no centro. Poderíamos mudar a localização com estes botões. O tamanho da imagem também pode ser atualizado. Outro recurso que temos na parte inferior é a capacidade de rolar a imagem de fundo com a página. O que isso significa é que se isso estiver marcado, e se rolarmos para baixo, podemos ver a imagem de fundo é empurrada para cima com o resto do conteúdo. Se isso, no entanto, estiver desmarcado assim, a posição de fundo permanece em um local fixo. Não vou rolar com o resto do conteúdo. Prefiro do outro jeito. Vou clicar no Rolar com Página e também repetir isso para que ele cobre a imagem de fundo completa. Muitas dessas opções não são realmente úteis quando se usa uma textura pequena assim. Repetindo isso geralmente é bom para nossos propósitos. No entanto, se você estiver usando uma imagem diferente, muitas dessas opções serão muito mais úteis. Clique em “Publicar” para salvar nossas alterações, atualizar o navegador e as alterações entrarão em vigor. 29. Blog do WordPress: plug-ins e integração com redes sociais: Bem-vindo de volta a este vídeo sobre plugins. Plugins são uma parte realmente importante do WordPress e eles nos permitem estender o núcleo WordPress. Agora com isso, queremos dizer que temos um WordPress downloads quando inicialmente configurar qualquer um dos nossos projetos WordPress. Em seguida, podemos estendê-lo para fornecer muito mais recursos diferentes e um conjunto diferente de funções. Para que pudéssemos incluir coisas como formulários de contato. Poderíamos adicionar ferramentas para SEO. Neste vídeo em particular, vamos dar uma olhada adicionando um plugin para adicionar alguns ícones de mídia social da página inicial wordpress.org. Podemos ir para a seção de plugins, assim como fizemos no início com os temas. Podemos ver atualmente que temos mais de 50.000 plug-ins disponíveis para estender nosso site WordPress. Temos coisas como agendas de reservas, temos galerias, temos formulários de contato. Podemos adicionar proteção anti-spam, a capacidade de fazer backup do nosso site e se não gostamos do novo editor do Gutenberg, que é aplicado na versão cinco e acima, também podemos reverter para o editor clássico se preferirmos. Para adicionar esses plugins e também para ver quais plugins estão disponíveis para o nosso site, podemos voltar para o painel, certificar-se de que quaisquer alterações são salvas no personalizador. Temos uma seção de plugins dedicada. Clique nisto. Atualmente, temos a palavra política premente, que usamos anteriormente. Isso foi ativado quando instalamos os dados de amostra. Logins são muito simples de adicionar basta clicar no botão adicionar novo. O isolamento é muito semelhante a um tema. Podemos ver todos os recursos e também os plug-ins populares e podemos instalá-los diretamente a partir da tela. Ou como vimos, há tantos plug-ins diferentes disponíveis que também pode precisar procurar o desejo de querer. No nosso caso eu vou fazer uma busca por redes sociais, preencher todos os ícones de mídia social. O que vou usar é este, que é finalmente social. Também é muito importante notar que ao instalar quaisquer plug-ins, vale a pena verificar quando foram atualizados pela última vez para garantir que estes são mantidos regularmente e também garantir que eles também são compatíveis com a sua versão atual do WordPress. Normalmente, os comentários uma boa indicação de se você está instalando um plugin útil ou não. Tudo o que precisamos fazer é clicar em Instalar, que irá baixar este plug-in e, em seguida, uma vez feito isso, podemos então ativar isso para usá-lo em nosso site. Ative este plugin. Uma vez que permitimos este plug-in podemos então ver a partir da barra lateral, agora temos um novo ícone dentro do Dashboard. Podemos clicar nisto. Tomamos em nossas opções, vamos precisar executar através da configuração do nosso plugin. Vamos fechar isso e, em seguida, executar algumas das configurações necessárias. Temos três configurações diferentes que precisamos configurar no topo. O primeiro é qual ícone deseja mostrar em nosso site. Isso é completamente com você. Eu vou para o Twitter e também para o YouTube. Mantenha isso bem simples. Vamos confirmar a ativação. Também o feed RSS, podemos remover isso. Se você tiver alguma conta com qualquer um desses outros provedores, fique à vontade para verificar esses botões também. Salve nossa primeira opção. Próxima opção dois é o que queremos que esses ícones façam? Por exemplo, com o Twitter, quando o usuário clica no ícone do Twitter, você quer que ele visite nosso perfil, quer que ele nos siga ou quer tuitar sobre a página específica. No meu caso, vou definir isto para ser, siga-me no Twitter. Em seguida, adicione o meu identificador do Twitter. No YouTube, também podemos inserir o URL do YouTube, que você vai vincular à sua página do YouTube. Você também pode permitir que as pessoas se inscrevam diretamente no seu canal também, salvar a opção. Então o terceiro é onde esses botões serão exibidos? Poderíamos permitir que eles fossem flutuados sobre as páginas do site. Definimos a posição desses ícones para estar nos cantos superiores ou no centro do nosso site. Poderíamos também adicionar alguma margem no canto superior direito, inferior ou esquerdo. Este é algum espaçamento que irá empurrar sobre os ícones de qualquer lado particular. Isso talvez seja útil se esses botões estiverem cobrindo um determinado conteúdo e queremos apenas ajustar os layouts para que eles não encobrir nenhuma informação importante. Também podemos verificar quantas dessas opções gostaríamos. Se você quiser, também podemos colocar esses botões em um widget. Isso permitirá que o widget de mídia social seja arrastado para qualquer um de nossos temas, áreas de widget. Vou desmarcar isto, já que não precisamos. A próxima opção é colocar através de um shortcode. Ainda não cobrimos um código curto, mas este é um pequeno trecho de código que você pode colocar em qualquer um de nossos posts ou páginas do blog. Também veremos isso mais tarde, mas por enquanto, podemos inserir isso copiando o código dentro desses colchetes. Ao copiar esta seção, podemos colocar nossos widgets em qualquer uma de todas as páginas ou posts. Vamos ver isso em ação, salvando. Podemos ir para uma de nossas páginas, selecionar qualquer um destes e entrar em edição. Então tudo o que precisamos fazer é colar isso em uma atualização de bloco de texto. Em seguida, podemos conferir a nossa página sobre nós dentro do navegador. Vá para baixo e abaixo de todos os nossos textos agora podemos ver esses ícones de mídia social foram inseridos com este shortcode. Isso é realmente útil se quisermos incluir isso em uma página específica, em um post de blog específico. Vou deixar estes ícones nesta página sobre nós uma vez que pode ser útil para o usuário compartilhar esta página com outros. Voltar ao painel, clique no ícone do WordPress. De volta aos nossos ícones, agora podemos terminar a configuração. A localização, vou colocar a minha no canto superior direito. Podemos deixar o código curto. Se você quisesse que você também poderia colocar isso no cabeçalho do tema e também mostrar isso depois de todos os nossos posts. Há também algumas configurações opcionais logo abaixo também. Por exemplo, se você quiser brincar com o design e a animação destes, você pode alterar a aparência e a sensação de todos os nossos ícones. Podemos adicionar um contador ao lado de cada um desses ícones e geralmente, personalizar como eles irão agir em nosso site. Eu vou deixar todas essas opções e salvar o nosso plugin sobre o site. Agora podemos ver se visitamos qualquer uma de nossas páginas, temos esses ícones aparecem no canto superior direito. Podemos clicar no ícone do Twitter, que é um botão seguir, onde somos imediatamente levados para o nosso perfil e podemos seguir diretamente este usuário. Nós também temos um link do YouTube que provavelmente não funcionará, já que não adicionamos um URL, mas você pode ir em frente e adicionar seu próprio URL aqui, ou qualquer outro ícone de mídia social, se você quiser. Bom, com nossos ícones de mídia social agora tudo no lugar e configurado. Em seguida, vamos passar para modificar esta página inicial e também introduzir alguns widgets. 30. Blog do WordPress: configuração da página inicial e widgets: Neste vídeo, vamos nos concentrar nesta página inicial e reconstruí-la usando widgets. Nós demos uma olhada em usar widgets no início deste curso, no outro projeto. Widgets, se você se lembra, é como um pedaço de conteúdo auto-suficiente que podemos arrastar para um determinado local dentro do nosso tema. Com o tema espaçoso, nós também temos acesso a alguns widgets personalizados que tinham sido fornecidos com este tema. Também fornecido ao lado desses widgets é um modelo de página inicial que vai nos permitir reorganizar esta página inicial, olhar mais como ele fez quando nós primeiro check-out este tema no WordPress.org. Agora, para fazer isso, vamos mover toda essa seção de blog, todas as postagens de blog, para a página de blog personalizada. Então isso vai nos deixar algum espaço para criar uma nova página inicial onde podemos adicionar este novo modelo. Vamos começar de novo dentro do painel. Vamos até as páginas e adicionar nossa nova página inicial. Então, o título de Lar. Em seguida, à direita, dentro da seção de atributos de página, podemos selecionar um modelo que queremos usar. No momento, estamos apenas usando esse modelo padrão. Mas podemos ver, temos alguns outros modelos que estão sendo fornecidos com este tema. O que vamos usar para esta página inicial é este modelo de negócio, publique isto. Se atualizarmos, veremos nossa página inicial no topo aqui. Mas como mencionamos pouco antes, vamos fazer desta nossa página inicial real quando visitarmos a raiz do nosso projeto. A maneira de alternar em torno de nossas páginas é voltar para o painel, baixo para as configurações. Precisamos ir para a opção de leitura. Em vez de nossa página inicial, está trazendo nossos últimos posts, vamos mudar isso para ser uma página estática que é a página inicial recém-construída. Em seguida, mova toda a postagem para a nossa página de blog personalizada. Salve nossas alterações. Vamos verificar se tudo isso entrou em vigor dentro do navegador. Bom. Ali está a nossa página inicial. Ainda não temos nenhum conteúdo, mas voltaremos a este, o blog. Veremos que as postagens do blog foram movidas para este link do blog. Para construir esta página inicial, vamos adicionar alguns widgets. Assim como anteriormente, vamos para a Aparência na seção Widget, e então podemos arrastar sobre qualquer um desses widgets disponíveis para as áreas de widget temas. Este tema em particular também tem alguns widgets personalizados, terá todos os widgets personalizados começando com ATG. Sabemos quais são fornecidos por este tema real. Temos os ícones de mídia social que foram fornecidos pelo plug-in, e, em seguida, a maioria dos acima são apenas widgets WordPress gerais que estão sempre disponíveis até que você construa esta página inicial. Estes foram os modelos de negócios. Vamos fazer uso dessas quatro seções de negócios. Começando com o top do negócio. A seção do meio é dividida entre a esquerda e a direita, então temos uma seção inferior. Do topo, abra isso, e podemos ver que tipo de widgets são adequados para esta área. O que vou usar é este Serviços TG. Como você pode ver, isso é usado para exibir algumas páginas como um serviço. Coloque isso na seção superior, e então nós vamos vincular isso a novas páginas livres. No momento, não temos nenhuma página que exiba os serviços do site, então o que vamos fazer é ir até nossas páginas, adicionar três novas páginas. O primeiro será para web design e desenvolvimento. Então vamos apenas adicionar um texto simples logo abaixo. Eu vou dizer que criamos projetos responsivos impressionantes usando WordPress. Você pode colocar em qualquer texto que você gostaria dentro daqui, e você também pode ver na parte inferior, temos uma seção de mídia social que tinha sido adicionado usando o plug-in. Este é um recurso premium, então vamos apenas ignorar isso. Se você quiser remover isso, você pode clicar nessas configurações na parte superior, descer até as preferências e, em seguida, podemos fechar o painel de mídia social. Agora, de volta à nossa página, vamos apenas adicionar uma imagem em destaque para esta seção e, em seguida, colocar o ícone do WordPress. Essa é a nossa imagem em destaque, e depois publicar. Isto é tudo o que precisamos fazer. Agora, se voltarmos para nossas páginas, adicionar uma nova página, e esta segunda será para branding. Em seguida, algumas mensagens no bloco logo abaixo, eu vou dizer vamos cuidar de todas as suas necessidades de branding. A seção da página tem a imagem em destaque. Este é o ícone do lápis. Defina isso e publique. A terceira e última página será para o serviço de desenvolvimento móvel. Adicione uma terceira página com o título de Mobile Development. Em seguida, algum texto que eu vou dizer, nós criamos aplicativos móveis personalizados impressionantes para todos os dispositivos. Voltar para a guia da página na imagem em destaque, este vai ser para o Android Icon. Publicou isto. Agora, se voltarmos para nossos Widgets em Aparência, podemos adicionar essas três novas páginas aos nossos Serviços TG. Nós temos o web design, nós temos a marca, o desenvolvimento móvel, e então nós podemos salvar este widget. Antes de avançarmos, vamos atualizar a página inicial. Clique em Logotipo. Agora veremos nossas três páginas nesta área do widget. Logo abaixo disso, vamos para a próxima seção Call to Action que irá solicitar ao usuário para entrar em contato. Para fazer isso, temos uma chamada à ação widget que é logo aqui. Arraste isso para baixo e para dentro da mesma seção. O texto principal do Call to Action será : “Precisa falar com alguém sobre suas ideias?” Em seguida, os textos adicionais de, “Entre em contato hoje.” Isso também terá um botão no qual o usuário pode clicar e dirá: “Entre em contato”. Então também queremos que este botão redirecione para um determinado link. Agora, antes de fazermos isso, vamos salvar isso. Queremos que este link para a página Fale Conosco. Para obter o link para a página Fale Conosco, precisamos ir para a guia Páginas, em Contato. Então podemos pegar o permalink da barra lateral. Esta é toda esta seção apenas aqui. Se clicarmos sobre isso, podemos então pegar o URL de volta para os widgets na barra lateral, em seguida, colar em nosso permalink. Guarde isto e vamos testar isto. Refresque. Temos o nosso Call to Action. Clique no botão, e isso agora nos vincula à nossa página Fale Conosco. Lembre-se, isso terá um formulário de contato mais tarde, mas por enquanto, tudo está funcionando bem. Em seguida, temos a seção do meio que é dividida nas seções esquerda e direita. À esquerda, vou adicionar alguns depoimentos recentes, e a direita vai apresentar uma única página. Vamos começar com a esquerda que é TG Testimonial. Arrasta isto. O título de Depoimentos Recentes. Em seguida, a descrição na parte inferior. Coloque em qualquer descrição de depoimento dentro daqui. Podemos então colocar em um nome logo abaixo, eo título que é CEO. Salve este widget. Nós também podemos fechar essas seções e, em seguida, vamos para a seção do meio direito. Esta vai ser a única página em destaque. Largue isto. Este vai apresentar qualquer uma das páginas do nosso site. Para este exemplo, vou colocar o foco na seção de desenvolvimento móvel. O título que aparecerá ao lado deste é Leia Mais Sobre Nossos Serviços de Desenvolvimento Móveis. Então também temos a opção de remover a imagem em destaque se quisermos, mas vou deixar isso como está. Finalmente, temos a seção inferior do negócio que vai ser para um widget em destaque, e isso nos permitirá adicionar alguns estudos de caso. Arrastar isto. Título de Estudos de Caso. Então podemos adicionar uma descrição, eu vou dizer, Aqui, vamos dar um mergulho profundo em alguns de nossos projetos mais recentes para mostrar o que acontece nos bastidores. Então, abaixo disso, podemos vincular a várias páginas. Agora, poderíamos ir em frente e criar três novas páginas com alguns estudos de caso. Poderíamos adicionar alguns textos a algumas imagens e criar essas páginas, se você quiser. No entanto, no entanto, apenas para economizar um pouco de tempo, eu estou indo apenas para vincular a três páginas existentes que é o Web Design, o Branding, e também o desenvolvimento móvel também. Você pode criar estes se você quiser, mas eu vou salvar este widget e verificar isso no navegador. Refresque. Teremos nossa seção superior que você já viu, temos a seção do meio, e esta é dividida com a seção esquerda para depoimentos e, em seguida, a página de desenvolvimento móvel em destaque à direita. Então, finalmente, no fundo, podemos nos conectar a alguns estudos de caso. Este é tudo completo, e você pode ter um jogo ao redor com este se você quiser e torná-lo mais pessoal. Pouco antes de terminarmos isso, eu vou remover os links adicionais que estão sendo adicionados ao nosso menu automaticamente. Vou para a seção de menu sobre a aparência, precisamos selecionar a navegação superior, podemos remover o link inicial, e também as três páginas adicionais. Salvar menu. Nossa página inicial está agora configurada. No próximo vídeo, vamos dar uma olhada em como podemos criar nosso rodapé. 31. Blog do WordPress: criando o rodapé: Vamos agora rolar para baixo até a parte inferior do nosso projeto e trabalhar nesta área de rodapé. Para a área de rodapé, também vamos fazer uso de widgets para criar até quatro seções diferentes. Para fazer isso, passamos para o painel, para a aparência e para a seção do widget. O autor dos temas forneceu quatro locais de rodapé diferentes. A barra 1 fica no canto inferior esquerdo, depois dois, três e quatro. Assim como quando usamos widgets no passado, podemos arrastar e soltar qualquer um desses widgets em nossas quatro áreas de widget diferentes. Você nem precisa usar os mesmos que eu vou usar. Barra lateral 1, que é sobre na parte inferior esquerda, queremos arrastar no widget páginas. Encoste isto. Como podemos ver aqui, esta é uma lista de páginas do seu site, mas isso é basicamente como um menu onde o usuário pode clicar em todas as páginas e, em seguida, ser levado para a página inteira. Podemos adicionar um título opcional se quisermos. Nós também podemos resolver essas páginas pelo título, a ordem das páginas que está disponível quando vamos para a tela de edição de páginas, ou até mesmo o ID da página. Este ID de página também pode ser usado logo abaixo de dois se quisermos excluir determinadas páginas que não queremos que apareçam dentro desta seção. A maneira de pegar o ID de uma página é se entrarmos em nosso link de páginas, clique sobre isso. Se clicarmos em qualquer uma de nossas páginas ou até mesmo entrar na tela de edição, podemos ver o ID das páginas aparecer dentro da URL. Este em particular é 1872. Vamos tentar um diferente para entrar em contato conosco. Isto é 1874, mas a sua pode ser uma identidade completamente diferente da minha, e tudo bem. O mesmo também se precisarmos acessar qualquer um dos posts ID, podemos clicar sobre isso. Esta é a identificação número um. Vamos tentar mais uma. Aqui é 1788. Isso é realmente útil se você precisar saber o post ou o ID da página. Eu vou aos widgets. Isso é tudo salvo e isso é tudo o que precisamos para a nossa barra lateral 1 na barra lateral 2. Vou arrastar e soltar sobre um widget de calendário. Este é um calendário de postagens do nosso site. Se você tiver uma postagem de blog disponível em uma determinada data, isso se torna um link dentro do calendário onde o usuário pode clicar e ser levado para qualquer uma das postagens desse dia específico. Veremos como isso se parece em um momento. Podemos adicionar um título opcional, mas eu vou deixar isso como padrão, já que isso é bastante auto-explicativo. Buffering site, este é um vai ser ocupado por alguns botões de mídia social. Este é o plugin de mídia social final. Arrastem isto. Esta foi gerada quatro linhas da nossa página de mídia social. Podemos ir para esta página se quisermos ajustar qualquer uma das preferências com este link. Também podemos mudar o título, mas tudo bem. Barra lateral 4 que está no canto inferior direito da nossa página. Vou arrastar alguns comentários recentes. Agora, os comentários recentes são apenas os comentários que tinham sido colocados em nossas postagens de blog. Por padrão, estas são as cinco postagens mais recentes que podemos ajustar, mas cinco está bem por enquanto. Todos eles são salvos automaticamente, então, se formos para o navegador, atualize a página. O primeiro bloco é nossas páginas e podemos clicar em qualquer um deles para ser levado para a página inteira. Temos uma seção de calendário e podemos clicar em qualquer um desses dias e ver qualquer post disponível para esse dia específico. Também podemos rolar para trás e para a frente através das datas e ver a exibição de calendário para cada mês. A seção de mídia social, principalmente o Twitter e também os links do YouTube que criamos anteriormente. Então, finalmente, os cinco comentários mais recentes, que você também pode clicar em se quisermos. Agora temos uma seção de rodapé. Nós também podemos remover os links de rodapé para baixo na parte inferior, mas isso é bom para nosso uso. Apenas uma última coisa sobre o personalizador não é muitas opções para este tema específico para personalizar o rodapé. As únicas opções que temos se formos para o link de rodapé é alterar o número de áreas de widgets. Estamos atualmente definidos para o padrão, que é quatro, mas também podemos reduzir isso para você três, dois, ou um, se preferirmos se tivermos menos conteúdo para colocar dentro do rodapé. 32. Blog do WordPress: adicionando um controle deslizante: No início do curso, adicionamos duas imagens de cabeçalho diferentes exibidas logo abaixo desta seção do logotipo. Essas duas imagens serão exibidas aleatoriamente, então podemos obter uma imagem diferente cada vez que recarregarmos esta página. Neste vídeo, vamos mostrar como podemos usar essas mesmas imagens, ou você pode até escolher imagens diferentes, se preferir. Mas nós vamos incorporá-los em um controle deslizante. Como com muitas coisas, WordPress tem muitos e muitos plugins deslizantes diferentes, que podemos integrar em nosso site ou este tema real vem com sua própria ferramenta de controle deslizante, que é realmente simples de usar. Primeiro, precisamos entrar no personalizador. Esta é uma das opções dentro da aparência e personalizador. Então vamos ver que temos esta opção de controle deslizante apenas aqui. Entra aqui. A primeira opção é que realmente precisamos ativar o controle deslizante. Então, vamos clicar neste e, em seguida, temos a opção se você quiser que este controle deslizante apareça em nossa página Post. Nós realmente não precisamos que o controle deslizante apareça quando vemos a postagem do blog. Então, vou desmarcar isto. Bem, isso é totalmente com você. Então, abaixo disso, adicionamos nosso conteúdo, que são as imagens. Para exibir em nosso controle deslizante, podemos selecionar uma imagem da biblioteca de mídia ou fazer upload de uma imagem totalmente diferente. Vou ficar com essas mesmas duas imagens que já usamos dentro do cabeçalho. Você pode ver imediatamente que esta imagem apareceu ainda abaixo do cabeçalho, mas desta vez também temos um botão Read More. Também podemos sobrepor alguns textos logo acima desta ferramenta adicionando um título e também uma descrição. Então o título para este será Desenvolvimento Móvel. Podemos ver essas atualizações na visualização. Na linha abaixo, também podemos adicionar uma ferramenta de descrição. Eu vou dizer de design para App Store. Se você quiser, você também pode alterar o texto do botão Ler mais. Primeiro, vou deixar isso como está, mas isso também vai vincular a uma determinada página. Uma vez que esta imagem específica nesta seção é para desenvolvimento móvel, faria sentido vincular a nossa página móvel. Para fazer isso, se formos ao nosso site e, em seguida, se clicarmos no “Desenvolvimento móvel”, tudo o que precisamos fazer é pegar o link da página, que é a seção logo após essa primeira barra. Comando ou controle C para copiar isso e, em seguida, colar isso dentro de nosso link. conteúdo do controle deslizante 2 é ativado em nossa segunda imagem para girar entre elas. Mais uma vez, vou usar o mesmo que o cabeçalho. Um título de Web Design & Desenvolvimento. Uma descrição, este será o desenvolvimento WordPress dos especialistas. Também precisamos vincular a esta página, que é a página de Desenvolvimento Web. Para voltar para a nossa página inicial, podemos clicar no “Web Design e Desenvolvimento”, link e, em seguida, pegar o link para esta página, colar isso em. Oops, errado. Cole isso no número 2 e, como você pode ver, você pode ir ainda mais longe adicionando mais imagens logo abaixo de duas. Então, é claro, não queremos o controle deslizante e também a imagem de cabeçalho ao mesmo tempo. Então o que podemos fazer é voltar para a seção Imagem do Cabeçalho, ou podemos clicar neste ícone de lápis para ir diretamente para a nossa seção. Ocultar esta imagem e, em seguida, temos apenas o controle deslizante feito efeito. Publicar. Para a frente e atualize. Esse é o nosso controle deslizante. Isso alterna entre nossas duas imagens disponíveis. Vamos tentar se esses links funcionarão. Esta é a página Web Design e Desenvolvimento. Este está bem. Voltar para a página inicial. Nosso link de desenvolvimento móvel também está funcionando. Então tudo isso agora está funcionando e isso é o quão rápido e fácil é adicionar um controle deslizante. No próximo vídeo, vamos começar a trabalhar em nossa página Fale Conosco e substituir este texto sem formatação por um formulário de contato. 33. Blog do WordPress: criando o formulário de contato: Ei, bem-vindo de volta. No início, quando criamos nossas páginas no topo, vou passar o mouse sobre a página Sobre nós. Isso revelará uma página Entre em contato conosco. Nós dissemos cedo que nós apenas colocamos em algumas linhas de endereço de exemplo apenas aqui e então nós vamos voltar para esta página e adicionar um formulário de contato de trabalho. Bem, isto é o que vamos fazer neste vídeo. Isso será disponibilizado adicionando um plugin chamado Formulário de Contato 7. Isso nos permitirá adicionar tantos campos diferentes quanto gostaríamos aqui dentro. Isso irá capturar a entrada do usuário, como o nome de usuário, o endereço de e-mail, uma mensagem, potencialmente quaisquer endereços ou números de telefone, e tudo isso pode ser enviado com este formulário. Você adivinhou, vamos voltar para o Painel, e a partir daqui vamos para a seção de plugins. Como você pode imaginar, há muitos e muitos plugins diferentes que podem fazer formulários de contato, mas eu vou usar um popular chamado Formulário de Contato 7. Podemos adicionar isso como um novo plugin no topo, então, se você quiser talvez disponível em algumas das abas, como um popular que você vê aqui. Caso contrário, você precisará procurá-lo com a caixa de pesquisa na parte superior. Este é o formulário de contato específico que vou usar, então vamos instalar isso. Como podemos ver, tem sido regularmente atualizado e também compatível com esta versão atual do WordPress. Ativar, e isso agora nos dará uma opção dedicada dentro da barra lateral. Clique sobre isso e isso irá então revelar todos os formulários de contato que temos atualmente disponíveis para o nosso site. Nós apenas temos este que está sendo criado automaticamente para nós, e podemos ir em frente e adicionar tantos formulários de contato diferentes quanto gostaríamos. Podemos ter um diferente para diferentes seções do nosso site, e cada um pode coletar informações diferentes. Em vez de editar este, vou adicionar novo no topo e, em seguida, dar a este formulário de contato um nome descritivo. Eu vou dizer formulário Fale Conosco, em seguida, abaixo deste, teremos o layout do nosso formulário. Agora, se você não sabe nenhum código e isso parece um pouco louco, não se preocupe no momento. Se olharmos mais de perto cada um desses campos, não será muito difícil de entender. Cada um deles é uma entrada de formulário diferente. Por exemplo, se queremos coletar o nome do usuário, e-mail do usuário, e temos uma seção para o assunto do e-mail, e então temos a mensagem que vai ser enviada para o administrador. Este, por exemplo, como o resto deles é cercado no rótulo e , em seguida, o texto que vai aparecer ao lado de cada uma dessas entradas. Este também é opcional ao contrário dos três acima, significa que este formulário pode estar vazio quando este é enviado. Em seguida, dentro dos colchetes, temos o tipo de entrada de formulário que está sendo usado atualmente. Não se preocupe com tudo isso, pois podemos gerar cada um deles automaticamente usando essas opções no topo. Por exemplo, se quisermos criar uma nova entrada de texto, coletar um endereço de e-mail, se quisermos reunir um número de telefone, uma data, uma área de texto, caixas de seleção ou botões de opção, tudo isso pode ser gerado clicando nesses botões apenas Aqui. Finalmente, para um formulário, precisamos também da capacidade de enviar isso. Quando todos os dados acima foram inseridos, então precisamos de um botão para realmente clicar, e enviar isso de volta para o administrador do site. Isto é o que este botão Enviar faz aqui. Vou deixar praticamente todos os padrões aqui. Vamos adicionar um campo extra. Este campo vai ser uma caixa de seleção onde podemos perguntar ao usuário como eles ouviram sobre o nosso site. Então eu vou clicar na caixa de seleção e, em seguida, todas as opções que adicionamos aqui dentro irá então resultar em uma entrada de formulário gerado como nós já temos. Primeiro, queremos saber se este é um campo obrigatório, então o usuário deve inserir um valor dentro daqui antes que o formulário possa ser enviado. O nome, podemos deixar isso como padrão. Este é apenas um nome exclusivo gerado. Para este campo específico, podemos adicionar várias opções onde adicionamos uma opção por linha. Cada nome que estamos adicionando aqui dentro irá gerar uma nova caixa de seleção. O primeiro que vou adicionar é para o motor de busca. Lembre-se que essas opções descrevem como o usuário ouviu falar sobre o nosso site. Podemos também dizer uma recomendação. Na próxima linha, diremos usar anteriormente, e então o quarto e último é para outro. Quero deixar todas essas configurações padrão logo abaixo. Eu também vou adicionar um ID opcional ou atributo de classe para esta entrada. Isso é apenas para que possamos segmentar isso nós adicionamos alguns CSS. Se você queria aplicar algum estilo adicional, nós não precisamos fazer isso, tudo o que precisamos fazer é clicar em “Inserir” e então nós geramos nossa nova seção de caixa de seleção. Salve isso e, em seguida, uma vez que isso é feito, em seguida, vemos um shortcode acima na parte superior entre estes colchetes. Isso novamente é um código curto como usamos em um vídeo anterior, onde procuramos adicionar os ícones de mídia social a qualquer uma de nossas páginas ou postagens de blog. O mesmo se aplica ao nosso formulário de contato. Só precisamos copiar isso e então podemos ir para nossas páginas e inserir isso em nosso formulário de contato. Escolha nesta seção, e eu vou remover este bloco específico, logo abaixo, cole isso em como um bloco de texto. Podemos então escolher qual dos nossos formulários de contato queremos exibir. Este é o contato, então está tudo bem. Atualize nossa página ou para o navegador e atualize na página Fale Conosco, agora vou ver nosso formulário apareceu. Temos uma entrada de nome, temos um e-mail, temos o assunto e, em seguida, nossas caixas de seleção personalizadas que adicionamos em. Assim, o usuário pode dizer como ouviu falar sobre nós ou ter a mensagem opcional na parte inferior, e então ele pode enviar isso de volta para o administrador. Claro, é um pouco inútil ter um formulário Fale Conosco se a mensagem for opcional. Então, vamos mudar isso rapidamente de volta no Painel. De volta à seção Contato, vamos editar nosso novo formulário. Tudo o que precisamos fazer é remover este texto opcional apenas aqui e, em seguida, salvar este texto. Isso agora foi removido, bem como realmente criar no formulário de contato, há também algumas opções que podemos mudar também. Temos vários termos no topo, como correio. Estas são algumas das opções para alterar o layout de nossos e-mails. Se qualquer que é colocado dentro destes colchetes é efetivamente alguns dados que podem mudar. Então é um pouco como uma variável. Estas são todas as seções que o WordPress irá injetar dinamicamente. Então, quando recebemos um e-mail do usuário final, vemos coisas como o título do site, então sabemos exatamente de qual desses sites esse e-mail é enviado. Vamos então receber os assuntos e isso será puxado dentro do campo assunto juntamente com todas as outras seções, nós também vamos obter o e-mail do usuário, que será puxado para dentro do campo de e-mail e nós podemos então construir o corpo da mensagem para baixo na parte inferior ou mudar isso em torno de se quisermos. Eu não vou fazer nenhuma mudança nisso já que está bem disposta. Temos o campo De com o nome e e-mail. Temos o assunto no campo correto e, em seguida, a mensagem dentro da seção do corpo. Uma vez que estamos felizes com isso, também podemos ir para a aba Mensagens e a partir daqui podemos alterar todas as mensagens padrão que são enviadas para o usuário. Por exemplo, quando o usuário publicou com sucesso a mensagem em nosso site, ele verá essa mensagem apenas aqui. Vemos falhas de envio de mensagens, vemos erros de validação. Isso ocorre quando um campo específico não foi inserido ou o tipo de dados incorreto foi usado. Por exemplo, se tivermos um campo de número e alguém tentar inserir algum texto, isso causaria um erro de validação. Também vemos coisas como o comprimento máximo e mínimo da entrada, o que é permitido, e muitas outras opções para alterar todo o texto padrão. Finalmente, temos as configurações adicionais onde podemos ir para o site do formulário de contato e puxar em quaisquer opções adicionais se quisermos. Eu quero deixar isso como este é e salvar nosso formulário de contato, mas este é um plugin realmente útil para coletar informações em nosso site. Lembre-se, você pode criar vários formulários Entre em contato conosco e colocá-los em diferentes seções também. 34. Blog do WordPress: melhorando o SEO: Não adianta colocar em muito esforço para fazer o nosso site parecer realmente bom e ter lotes de conteúdo incrível se nenhum usuário pode encontrá-lo em motores de busca. Mencionamos anteriormente no curso que WordPress por padrão é bastante amigável motor de busca. No entanto, como tudo, há sempre espaço para melhorias. Neste vídeo, estaremos cobrindo um grande plugin chamado Yoast SEO, que leva o nosso núcleo WordPress SEO para outro nível. Se você quiser filmar do que SEO é, ele deve cair otimização motor de busca. É basicamente o processo de otimizar nosso conteúdo em nosso site para aparecer mais alto na ordem dos resultados do mecanismo de busca. Otimizamos palavras-chave, descrições e também otimizamos coisas como nossas postagens de blog. O mais relevante em motores de busca é plugin realmente ajuda destacando todas as coisas que estamos fazendo bem e todas as coisas que precisamos melhorar, como todas as nossas palavras-chave, nossas descrições, o comprimento do nosso conteúdo, e as imagens alt texto. Ele também pode ajudar com algo chamado metadados, que é a informação sobre nossos sites tornados visíveis para os motores de busca. Você também pode gerar sitemaps e enviá-los para o Google, juntamente com muitas outras coisas. Vamos para a seção de plugins onde podemos procurar por este plugin em particular. Vá para adicionar novo. Há uma boa chance que isso apareça dentro da seção popular. Caso contrário, você precisará fazer uma pesquisa por Yoast SEO na caixa de pesquisa no topo. Isto é o que precisamos. É compossível com a nossa versão do WordPress. Vamos instalar isto, ativar isto. Isso também nos deixará com uma opção SEO no menu também. Você pode ver uma visão geral da nossa configuração, juntamente com quaisquer problemas nas notificações. Mas geralmente muitas das coisas que vão estar lidando com Yoast vão estar realmente dentro do nosso conteúdo. Por exemplo, se você vai para qualquer página em particular, eu quero ir para o web design um. Se voltarmos para a tela de edição, seu agora fornecerá uma nova seção dentro desta tela de edição. Do início, a primeira coisa que precisamos fazer é fornecer uma frase-chave de foco para esta página. Uma frase-chave de foco é a palavra-chave principal na qual você deseja focar para esta página. Esta é uma página de web design. Vou definir a frase chave para ser web design. Habilite tudo isso, vimos uma visualização de como exterior aparecerá dentro de uma pesquisa do Google. Nós também podemos verificar isso para o celular e também o resultado desktop também. Se quiséssemos também, também poderíamos brincar com o título SEO e também inserir variáveis diferentes para alterar a ordem e a aparência de como todos esses dados aparecerão. Também podemos mudar esta bala, se quisermos. [ inaudível] isso é web design e desenvolvimento. Podemos ver isso no link permanente também. Uma meta descrição se quisermos substituir toda a descrição desta visualização. Nós também podemos mudá-lo dentro daqui também. Como você pode ver, isso será atualizado automaticamente em nossa pré-visualização. É assim que ele ficará em uma pesquisa do Google. Eu vou deixar isso vazio, mas é uma boa idéia fazer isso em todas as páginas web ao vivo. Também podemos inserir variáveis como o título do site, o título da página, e também as categorias também. Abaixo disso, temos uma análise de SEO, que vai ser uma parte muito importante para você. Isso nos dirá quais partes de nossas páginas são boas para SEO e quais partes precisam de alguma melhoria. No fundo vemos que temos luz verde. Esta é a parte boa. Temos uma boa terra fora da frase chave. Essa chave também é única e não é usada em outras páginas ou postagens de blog. Temos a frase-chave e o título. Se formos para o topo, vemos que isso é web design e desenvolvimento. Teremos nossa frase-chave aqui. Se fôssemos mudar isso, assim como este, então atualize e atualize. Voltando à análise, vemos que isso está faltando e agora também é uma melhoria recomendada. As outras melhorias recomendadas são o texto alt da imagem. Vamos alterar isto dentro da barra lateral. Sob a imagem em destaque, clicamos sobre isso. Podemos então adicionar a frase-chave no texto alt. Isto foi web design, atualizar nossa página, atualizar. Este problema foi removido agora. Também reverteremos este título da página. Voltar para as melhorias. Temos então uma secção vermelha, que é as melhorias mais graves que temos de fazer. Muito disso se resume ao fato de que não temos nenhum conteúdo nesta página. Temos apenas um título e uma descrição muito curta logo abaixo. Também é recomendado adicionar um pouco mais de conteúdo, como o comprimento do texto. Atualmente só temos sete palavras, embora o mínimo recomendado seja, na verdade, 300. Nós também poderíamos fazer uso de alguns deste texto descritivo e também colocar isso na meta descrição também. Se não fizermos isso, como veremos abaixo, o mecanismo de busca irá pegar automaticamente uma seção desta página para nós. Esta seção que ele pega pode não ser a parte exata do conteúdo que queremos exibir. Todo este texto também deve conter nossa frase-chave no parágrafo de abertura. Também é recomendado ter alguns links internos e externos também. Devemos adicionar alguns links para outras páginas em nosso próprio site e também links idealmente para alguns outros sites também. Depois disso, uma vez que passamos por todas essas melhorias, teremos uma frase-chave relacionada. Esta é uma frase-chave secundária que queremos adicionar. Mas isso só está disponível para a versão paga deste plugin. Vou deixar esta secção. Em seguida, temos o conteúdo da pedra angular. Para qualquer uma de nossas páginas ou postagens de blog, podemos ativar ou desativar isso. Um pedaço de conteúdo fundamental é a parte mais importante do conteúdo em nosso site. Por exemplo, se o seu site WordPress é famoso por brownies de chocolate, a página brownies de chocolate deve ser marcada como o conteúdo da pedra angular. Mas isso é algo para você decidir com base no seu conteúdo. Finalmente, temos uma guia avançada para baixo na parte inferior onde podemos definir, se quisermos, esta página específica para aparecer nesses resultados do mecanismo de pesquisa. Vamos deixar isso como “sim”. Bem, nós também podemos desligá-lo. Você vai querer que os motores de busca sigam links nesta página. Podemos selecionar “sim” ou “não”. Temos uma seção avançada de meta robô onde podemos ajustar como queremos que nossos meta robôs se comportem. Não vamos cobrir nenhuma dessas configurações avançadas, mas você pode fazer uma pesquisa no Google e descobrir mais sobre os meta robôs. Finalmente, temos a URL canônica. Uma URL canônica é uma maneira de lidar com conteúdo duplicado em nosso site. Por exemplo, se tivéssemos uma loja de comércio eletrônico, tínhamos dois produtos idênticos listados em nosso site. Temos de dizer aos motores de busca qual deles devem usar. Se não fizermos isso e tivermos muitos pedaços de conteúdo duplicado, os motores de busca acreditarão que estamos tentando jogar o sistema apenas duplicando coisas em vez de criar novos conteúdos. Se tivéssemos uma loja de e-commerce, por exemplo, e tivéssemos uma camiseta azul. Talvez tenhamos um nome de produto como este. Para o URL, podemos ter isso dentro da seção da camisa. Teríamos o nosso nome de e-commerce e, em seguida, o URL que se parece com este. Mas e se acontecer de colocarmos esta camisa azul também em uma categoria azul? Também podemos ter a mesma camisa dentro de uma categoria de celular. Agora temos três dos mesmos produtos em três seções diferentes em nosso site. É claro que não estamos tentando enganar os mecanismos de busca fornecendo conteúdo duplicado dessa maneira. Precisamos marcar um desses pedaços de conteúdo como o principal que você deseja exibir. Para isso, precisamos deixar isso vazio para o conteúdo principal. Então, para as outras duas seções, que era a categoria azul e também a categoria de venda. Em seguida, precisamos apontar de volta para a nossa URL, que era a camisas/camisa azul. Só para esclarecer, a parte principal do conteúdo está vazia e em seguida, vamos apontar todas as partes duplicadas de volta para a URL principal. Estas são todas as opções. Atualizaremos nossos sites. Também podemos repetir este processo para todas as nossas outras páginas, bem como para todas estas páginas. Também podemos fazer o mesmo para todas as postagens do nosso blog. Se tivéssemos aqui dentro, à direita, também sabemos que temos essa pontuação de SEO. Temos uma pontuação de legibilidade e também o número de links desta página também. Se entrarmos em qualquer um desses, obtemos exatamente a mesma seção de SEO que podemos passar por cada pedaço de conteúdo em nosso site. É assim que podemos usar o plugin Yoast SEO para melhorar o nosso posicionamento nos resultados dos motores de busca. É algo que você realmente deve estar ciente, mesmo se você apenas usá-lo para atingir as vitórias rápidas, como otimizar suas páginas e postagens. Há, é claro, outros plugins SEO, que também fazem um bom trabalho também. Mas este é um muito popular que eu uso pessoalmente. Também é muito eficaz. 35. Blog do WordPress: fazendo backup do seu site: Se todos os cuidados do mundo, as coisas podem e fazem dar errado ao lidar com a tecnologia. Se o pior estava para acontecer e perdemos todos os dados do nosso site, queremos ter certeza de que todo o nosso trabalho duro não é perdido. Poderíamos passar horas, dias, semanas, anos criando muito conteúdo diferente, muitas postagens de blog, e não queremos que tudo isso seja perdido. Faz sentido cobrir esta possibilidade através da criação de cópias de segurança dos nossos sites. Temos lotes de grandes plugins disponíveis para fazer isso facilmente. Não há desculpa para não o fazer. Enquanto este caso de uso, nós também vamos fazer uso de outro plugin. Faça logout na seção de plugins e vá até o Add New, procure o que vamos usar, que é BackWPup. Este é o que eu vou usar, então clique em “Instalar” e ative isso uma vez baixado. Aqui também temos esta seção BackWPup. Se clicarmos neste ícone, podemos então ir para os passos dentro desta seção. O primeiro passo é verificar a instalação, que nos levará a uma página de configurações. Você pode ver todas as informações sobre o nosso site e também os resultados de vários testes. Tudo parece estar bem dentro desta seção. Além disso, se tivermos quaisquer problemas com este plugin, precisamos entrar em contato com o suporte BackWPup. Nós também podemos clicar neste botão apenas aqui para obter todas essas informações de depuração, que também podemos enviar sem dúvida. Está tudo bem aqui. Não vemos nenhum problema. Então podemos ver todos os termos diferentes que temos no topo. A maioria destes pode ser deixada como padrão. Mas também podemos alterar as coisas para alterar o número máximo de arquivos de log, que está dentro da guia logs. Isto significa que só guardaremos um máximo de 30 ficheiros de cópia de segurança. Nós também podemos optar por comprimir estes, se você quiser. A partir daqui, também podemos selecionar onde queremos que esses backups sejam colocados. Em seguida, temos a localização padrão que está dentro de nossos projetos na pasta Conteúdo WP. Em seguida, a partir daqui, podemos selecionar exatamente qual pasta queremos armazenar isso dentro. Aqui podemos ver que estamos salvando estes dentro de uma pasta de uploads. Eu quero deixar isso como padrão, mas você pode mudar isso se quiser. Em seguida, de volta ao painel, precisaremos ir para a etapa 2, que é realmente criar um trabalho de backup. Primeiro, damos um nome ao trabalho dele, queremos chamar isso de “Backup Semanal”. Em seguida, podemos selecionar exatamente quais partes de informação queremos fazer backup. Queremos fazer backup do banco de dados em todos os nossos arquivos, e também uma lista de quaisquer plugins que foram instalados também. Por padrão, não temos as exportações XML ou as tabelas de banco de dados verificadas. Isto é bom. Em seguida, podemos selecionar como queremos nomear nosso novo arquivo. O botão padrão para nossos arquivos salvos será o ano, o mês, o dia, a hora em formato de 24 horas. O i minúsculo, que é a representação do minuto. Em seguida, o s minúsculo, que são os segundos. Você pode brincar com esse nome de arquivo se quiser, mas ele já está salvo em um formato sensato. Vou deixar isto como está. O arquivo zip está bom. Vou fazer o backup para a pasta de uploads que já vimos antes. Mas se você quiser, você pode fazer backup disso em diferentes locais, como o Dropbox. Você poderia ser enviado um e-mail com o backup, e também vários serviços de nuvem que você vê aqui, veja isso? Em seguida, temos a guia Programação. A partir daqui, vamos agendar exatamente quando queremos que este backup ocorra. Não podíamos agendar e deixar isso como manual. Precisamos ativar isso manualmente ou vamos usar um Chrome WordPress. Isso nos permitirá agendar um determinado dia ou hora em que queremos que esses backups ocorram, é quase semanalmente. Também podemos definir o dia em que queremos que isso aconteça. Também a hora e o minuto também, domingo de manhã é bom para mim, então salve nossas mudanças. Em seguida, temos o backup de banco de dados. Aqui podemos selecionar exatamente quais tabelas de banco de dados queremos fazer backup. Atualmente, todas as nossas tabelas de banco de dados são selecionadas. Mas você pode desmarcar qualquer um destes se você não quiser incluí-los com o backup, se você não tiver certeza, basta deixá-los como eles estão. Temos a aba Arquivos a seguir. A partir daqui, podemos optar por excluir todos os arquivos que não queremos incluir no backup. Por exemplo, se você tem vários plugins que você não quer um backup, nós podemos verificar estes para excluir qualquer um deles. Se tivermos alguns temas que não estamos usando, como o 2019. Também podemos verificar qualquer um deles para excluí-los dos backups, juntamente com qualquer conteúdo antigo de anos anteriores, também podemos excluir qualquer um desses dados. Em seguida, temos os plugins, onde tudo o que podemos fazer dentro aqui é mudar o nome do arquivo e também adicionar compressão de arquivos se quisermos. Para Pasta, já lidamos com, este é o local onde todos os backups serão salvos. Também podemos alterar o número de arquivos para manter nesta pasta. Se você tiver feito alguma alteração, clique em “Salvar”, de volta ao painel. Em seguida, vamos realmente executar o trabalho criado. Clique no passo 3. Isso nos levará para a guia Jobs, onde podemos ver nosso backup semanal. Sobre isso, podemos editar isso, e também podemos executar esse backup imediatamente. Clique sobre isso e, em seguida, nos dê alguns momentos para executar nosso primeiro backup para o nosso site. Uma vez que isso atinja 100% e isso estiver terminado, podemos ver quando foi a última corrida. Também podemos ver a data para a próxima corrida. Se você quiser verificar se isso funcionou, podemos ir para o local. Vamos abrir. Traga o administrador principal e a partir deste botão, apenas aqui, podemos entrar em nossos arquivos e pastas salvos. Dentro do nosso projeto, precisamos entrar no aplicativo, público. Como vimos a partir da localização do arquivo, isso está dentro do Conteúdo WP, e criamos esta pasta de upload apenas aqui, e aqui, então podemos ver uma lista de todo o nosso conteúdo que foi salvo. Se entrarmos aqui, este é todo o conteúdo, como nossas imagens de fundo, nossos cabeçalhos, nosso logotipo. Este é todo o conteúdo do arquivo agora salvo. Junto com isso, vemos os logs e, em seguida, se entrarmos na pasta de backups, vemos que temos um único backup. Também podemos ver isso se voltarmos para o painel e clicar na opção de backups, há confirmação do nosso primeiro backup que acabamos de criar. Também podemos excluir ou baixar isso se quisermos. Como você pode imaginar, fazer backup do seu site WordPress é realmente importante. Esta é uma maneira fácil de fazê-lo com este plugin. Este é agora o fim deste projeto e também esta seção, então eu vou agora vê-lo na próxima seção onde queremos aprender tudo sobre WordPress e-commerce. 36. E-commerce do WordPress: configuração do projeto: Aqui vamos nós com nosso próximo projeto, e este vai ser uma loja de e-commerce. Para começar com isso, vou criar nosso novo site usando local. Clique no ícone “Plus” na parte inferior, e eu vou dar a este o nome do site de shirtstore. Lembre-se também, se você estiver usando [inaudível] configure o projeto com as mesmas instruções que fizemos anteriormente. Mas eu quero prosseguir com o uso local. Clique em “Continuar” com as configurações preferidas, depois o nome de usuário e a senha, que usaremos para entrar no meu administrador. O meu vai ser o shirtstore_admin. A senha. Você pode usar os mesmos e-mails e senhas que você usa no projeto anterior. Isso é completamente bom e ainda permitirá que você faça login para esses novos projetos no site. Além disso, se estiver usando um MAC como anteriormente, talvez seja necessário adicionar uma senha para concluir a instalação. Bom, estamos todos feitos, e podemos ver que nosso site está funcionando e, assim como em projetos anteriores, podemos clicar no “Admin” para ser levado para o back-end do nosso site. Vemos shirtstore admin e também a senha. Mais uma vez, e está tudo bem. Também podemos clicar em “Abrir Site” e dar uma olhada no front-end do nosso projeto padrão. Isto é o que vamos fazer neste vídeo. Temos o nosso site na nossa configuração. No próximo vídeo, vamos apresentar WooCommerce para começar a transformar nosso site WordPress em uma loja de comércio eletrônico. 37. E-commerce do WordPress: primeiros passos com o WooCommerce: Agora eu tenho esta loja WordPress vazia que tem o tema padrão atual. Para transformar isso em uma loja de e-commerce, vamos precisar de algumas ferramentas adicionais. Depois disso, vamos aproveitar WooCommerce. Isso nos permitirá transformar nossos lados de duas maneiras. Primeiro de tudo, vamos fazer uso do tema vitrine, que é um tema para transformar a aparência do nosso site para ser mais como uma loja de comércio eletrônico. Em segundo lugar, pelo mesmo autor também teremos acesso ao plugin WooCommerce, que nos dará a funcionalidade de transformar nosso site WordPress em uma loja de e-commerce. Ele fornece todos os recursos essenciais que precisamos, como a capacidade de adicionar produtos, criar taxas de envio, adicionar impostos, cuidar de nosso inventário, gerenciar nosso estoque, integrar com provedores de pagamento e tudo o mais que vamos precisar. Primeiro de tudo, o tema, se você vai para o mercado, em seguida, para baixo para o link do tema e dentro daqui nós vamos fazer uso dos temas vitrines. Há também temas infantis disponíveis e vamos dar uma olhada no que eles estão no próximo vídeo. Embora precisamos do framework vitrine e podemos adicionar isso assim como o resto de nossos temas dentro do painel. Mas, por enquanto, podemos dar uma olhada rápida no que está incluído neste tema. Tem praticamente tudo o que você esperaria. É totalmente responsivo, o que significa que nossa loja ficará ótima em todos os tamanhos de tela. Integra-se perfeitamente com o plug-in WooCommerce. É um motor de busca amigável, e geralmente fornece uma ótima aparência e sensação que podemos usar como um bom ponto de partida para o nosso projeto. Tal como acontece com todos os temas, também é totalmente personalizável. Nós não precisamos se preocupar em ser preso com o tema padrão exato, bem como WooCommerce é próprio [inaudível]. Ele também se integra com o personalizador para que possamos atualizar facilmente toda a marca, as cores, a aparência e a sensação, e geralmente fazer com que pareça exatamente como eu quero. WooCommerce tem sido em torno de um longo tempo e é bem desenvolvido, e também alimenta dezenas de milhares de lojas de e-commerce disponíveis on-line hoje. Vamos passar para o nosso painel e podemos primeiro começar instalando nosso tema em aparência na seção tema em novo e procurar vitrine. Este é um [inaudível] necessário apenas aqui, instalar e vamos ativar isso e verificar isso no front-end. O2O lados e recarga. Podemos ver instantaneamente que temos uma mudança no nosso tema. Atualmente, tudo o que temos é a nossa página inicial padrão, que mostra nossas postagens de blog individuais e também estas páginas de exemplo aqui. Atualmente não se parece muito com uma loja de e-commerce, mas lembre-se, o objetivo do tema é apenas mudar a aparência do nosso conteúdo atual. No momento, não temos muitas páginas, não temos muitas postagens de blog, não temos nenhum produto ou qualquer coisa parecida com essa configuração. Isto é algo que o plugin WooCommerce vai fornecer para nós. A segunda parte, se você voltar para o painel, é instalar o plugin, pressione “Adicionar novo”. Vamos fazer uma busca por WooCommerce. Isto é o que precisamos aqui por automático e recentemente atualizado e também compatível com a nossa versão do WordPress. Isto vai dar-nos as nossas páginas predefinidas. Ele vai nos dar toda a funcionalidade que precisamos para começar. Se houver alguma funcionalidade extra que não está incluída, se estamos procurando algo especialista, também há muitos outros plugins de terceiros que podemos integrar em nosso site. Ótimo, vamos ativar isso. A primeira coisa que vemos é que somos levados através de algumas etapas de instalação. Também podemos ignorar isso porque todas essas opções estão disponíveis no painel. Vou passar por alguns passos simples de configuração. Também basta adicionar alguns dados fictícios. Não precisamos adicionar nosso endereço exato no momento, mas o que é benéfico é também adicionar o país. Isso ocorre porque isso vai deixar WooCommerce configurar certas coisas com base em nossa localização, como a moeda e também algumas taxas de envio também. Após este continuar ou indústria, estes ainda são opera. Nós vamos criar a loja Ásia, então eu vou clicar em “Moda”. Então teremos uma seleção de diferentes tipos de produtos que vamos listar. Em seguida, podemos selecionar o tipo de produtos que vamos listar. Produtos físicos são produtos reais que vamos enviar para o cliente em seu local. Podemos ter downloads que são produtos virtuais, e então também teremos várias opções, como assinaturas, assinaturas , reservas, pacotes e também produtos personalizados. No entanto, estes são todos cobráveis, mas só precisamos dos produtos físicos por enquanto. Continuando. Eu vou dizer que não temos nenhum produto ainda e também não estamos vendendo em outro lugar e vamos desmarcar todos esses produtos. Podemos também reativá-los mais tarde, se quisermos. Como o tema, vamos ficar com a vitrine padrão. Nós também temos algum acesso a diferentes temas pagos e também gratuitos também. Agora, vamos deixar de fora mochila a jato, mas também podemos reativar isso mais tarde. Quando terminarmos, somos levados de volta ao painel. Tal como acontece com a maioria dos plugins, isso também nos dá muitas configurações dentro do painel. Podemos gerenciar nossos pedidos, nossos clientes, nossos cupons e várias outras configurações que vamos passar durante este projeto. Temos também uma opção de produto dedicada dois. Agora isso está habilitado. Vamos voltar ao nosso front-end e atualizar. Instantaneamente podemos ver que temos mais algumas páginas adicionadas ao nosso menu. Temos um carrinho de compras. Nós ainda não adicionamos nenhum produto a este carrinho, então este está vazio. Nós também temos um dedicado uma página de check-out. Há uma página de conta de cliente onde podemos ver coisas como nossos pedidos anteriores. Podemos baixar qualquer produto virtual que compramos. Podemos gerenciar nossos endereços, detalhes da conta e editar qualquer uma dessas opções conforme necessário. Finalmente, temos também a opção de loja. No momento, não temos nenhum produto aqui dentro. O que vamos fazer para nos dar um início rápido é adicionar alguns dados de amostra. Isto é apenas para coisas como vários produtos para nos ajudar a começar com a nossa loja. Claro, vamos dar uma olhada em como adicioná-los manualmente, mas por enquanto, vamos para o painel na seção de ferramentas. Então podemos importar nossos dados. Isso usará o importador WordPress. Uma vez que esta é a primeira vez que vamos estar executando o importador WordPress. Precisamos instalar isso e depois clicar em “Executar”. Aqui tudo o que precisamos fazer é escolher nosso arquivo que contém nossos dados de amostra e, em seguida, ir para o local do seu projeto local. O meu está na minha área de usuário e, em seguida, em sites locais, na loja de camisas, no aplicativo e, em seguida, público. Então, a partir daqui, precisamos entrar no conteúdo e na seção de plugins. Os plugins no momento contém o nosso importador Wordpress, que comumente usamos em e também nosso plugin WooCommerce. Isto tem uma pasta de dados de exemplo que contém este arquivo XML que precisamos importar nossos dados. Se você estiver usando mamãe para isso, você precisará ir para a pasta mãe e, em seguida, para os documentos HD e, em seguida, para seus projetos de loja de compartilhamento. Com isso agora selecionado, vamos fazer upload disso. Como WooCommerce está criando coisas como produtos para nós, também precisamos adicionar um autor ou um criador. Podemos criar um novo ou podemos usar a nossa loja de camisas, que já configuramos anteriormente. Clique nos anexos de arquivo de importação e, em seguida, envie. Bom, agora fazemos, podemos clicar no link deste produto e podemos ver quais dados foram incluídos. Eu tenho muitos produtos diferentes com nossas imagens, nós temos nossas unidades de manutenção de estoque, que é o código do produto. Temos a bandeira em estoque, temos um preço, as categorias. Também podemos adicionar tags. Também com a loja, podemos apresentar todos os produtos para aparecer na primeira página de seu site, na atualização de front-end. Agora, porque estamos no link da loja, podemos ver todos esses produtos e agora exibe. Automaticamente temos os botões, você adiciona qualquer um desses produtos ao nosso carrinho. Podemos então ver nossos carrinhos e ver todos os produtos que você adicionou. Podemos alterar os detalhes, a quantidade. Podemos aplicar cupons diferentes. Nós também temos uma página de checkout. Podemos passar para o usuário, podemos adicionar todos os detalhes de faturamento. Podemos ver uma visão geral do pedido. No momento, não temos nenhum método de pagamento disponível porque ainda não configuramos nenhum. Vamos corrigir isso em um vídeo posterior. Cada um desses produtos, se voltarmos à loja, também tem uma página de detalhes do produto. Podemos clicar sobre estes para ser tomadas através visualização detalhada completa onde podemos ampliar a imagem. Temos descrições estendidas, informações adicionais. Podemos ver quaisquer comentários anteriores. Além disso, quando configuramos esses produtos, podemos vincular esses dois produtos relacionados também. Isso nos permitirá fornecer upselling e cross-selling também. Ótimo, este é agora o nosso tema e também nossa funcionalidade WooCommerce tudo incluído com o plugin. Também assim como uma nota lateral rápida também, automática que cria o plugin WooCommerce, também é o criador original do WordPress também. Estamos em boas mãos usando este plugin. Em seguida, vamos dar uma olhada em como podemos usar temas infantis e por que isso são realmente importantes para sites WordPress. 38. E-commerce do WordPress: por que usar temas infantis?: Pouco antes de começarmos a trabalhar para fazer alterações para a nova loja de comércio eletrônico, vamos primeiro dar uma olhada no que é uma criança e também um tema pai. Até agora, temos usado o que é chamado de Tema dos Pais. Este é um tema completo que temos usado em nossos projetos anteriores, e também este tema vitrine também. Era como um tema principal ou de alto nível. Por outro lado, um tema filho é um sub-tema que é baseado em um pai. Qualquer tema pai atual, como nossa equipe funciona, pode ser usado como uma base ou um ponto de partida. Então podemos criar um tema infantil que vai herdar todo o estilo e funcionalidade de seus pais. Estamos efetivamente selecionando um tema, ramificando fora deste tema, e então ele criando todas as alterações para esta nova versão. Mas por que quereríamos fazer isso em vez de fazer todas as alterações nesse tema principal? Bem, é várias razões diferentes pelas quais queremos fazer isso, e provavelmente a razão mais importante é preservar o tema original. Se você fizer alterações ao longo do tema a partir do painel usando ferramentas como o personalizador, layout alterável, esquemas de cores alteráveis ou menus, tudo isso está bem. Todas essas ferramentas de painel, como o personalizador, é uma maneira segura e aprovada de editar e atualizar a aparência do nosso tema. No entanto, se quisermos ir ainda mais fundo e entrar em nossa pasta de temas, podemos adicionar novos arquivos, podemos adicionar novos modelos, podemos atualizar os existentes, e geralmente fazer alterações mais extensas. Queremos fazer isso em um tema infantil. Se você fizer qualquer uma dessas alterações no tema pai, ele ainda funcionaria completamente bem. No entanto, embora o problema surge, quando precisamos atualizar este tema. Se os temas oferecerem, crie uma nova atualização e uma nova versão de segurança, em que geralmente faz alterações no tema pai. Assim que baixarmos esta nova versão, todas as nossas alterações serão perdidas. No entanto, se estamos usando este tema como um modelo ou um ponto de partida, podemos então fazer nossas alterações em nosso tema filho, e então podemos atualizar com segurança os pais. Isso também tem muitos de um benefício também. Por exemplo, é uma boa maneira de começar a criar nosso tema. Não podemos fazer uso de todo o trabalho testado e testado a partir de um tema comprovado. Então podemos ramificá-lo e criar nossa própria versão baseada nisso. Ele também nos permite organizar melhor nosso código, já que sabemos exatamente onde todas as nossas próprias alterações personalizadas serão armazenadas. Além disso, se quiséssemos, também poderíamos criar um tema filho diferente com base nesse tema infantil também. Geralmente, se estamos fazendo quaisquer alterações extensas em nosso tema, incluindo quaisquer alterações dentro dos arquivos e pastas. Queremos fazer um tema infantil para tornar isso muito mais seguro. É por isso que precisamos de um tema infantil. Em seguida, vamos dar uma olhada em como configurar um tema filho para o nosso projeto atual. 39. E-commerce do WordPress: configuração de tema infantil: Agora sabemos o que é um tema infantil e quais são os benefícios de criar um. Para este projeto, vou criar um para a loja de comércio eletrônico da loja. Antes de fazermos quaisquer alterações a este tema pai, configurar um é bastante simples. A primeira coisa que precisamos fazer é ir para a pasta do projeto, então eu vou abrir Local, e depois encontrar a localização da nossa pasta. Podemos clicar neste botão “Atalho” apenas aqui e, em seguida, para o aplicativo, para o público, o conteúdo e, em seguida, para o nosso diretório de temas. Aqui, podemos ver a nossa vitrine que baixamos ao lado dos temas padrão que baixamos quando configuramos WordPress. Se você estiver usando MAMP, vá para o htdocs e siga os mesmos passos para chegar ao diretório de temas. Vamos criar um novo tema, e vamos fazer isso dentro de um editor de texto. Você não precisa saber nenhum código para começar com isso. Tudo o que precisamos fazer é seguir alguns passos simples. Primeiro de tudo, vamos criar uma nova pasta que é a nova pasta tema para o nosso projeto. Podemos chamar isso de qualquer nome que quisermos. Dê este descritivo. Vou chamá-lo de criança vitrine, que possamos facilmente reconhecer isso dentro do painel. Você pode usar qualquer editor de texto que você deseja editar isso. Vou usar um editor de código chamado Visual Studio Code. Você pode baixá-lo a partir do link na tela apenas aqui. É gratuito para uso no Windows, Mac e Linux. Vou usá-lo para criar nossos arquivos necessários para este tema filho. Se você não tiver um editor de texto, pause este vídeo, download deste link e volte quando isso estiver configurado. Já tenho isto instalado, por isso vou abrir isto dentro de uma nova janela. Tudo o que precisamos fazer para começar é arrastar sobre nossa pasta do projeto. Podemos ver a partir do painel que isso abre isso na barra lateral, e então precisamos criar dois novos arquivos. O primeiro arquivo que precisamos criar, se passarmos o mouse sobre a barra lateral, podemos clicar neste ícone “Novo arquivo”, ou podemos ir para Arquivo e selecionar um “Novo arquivo” a partir daqui. Este será chamado de style.css. CSS é uma maneira de adicionar qualquer estilo e layout ao seu site. Não adicionaremos CSS personalizado a este projeto, mas o que precisamos fazer dentro deste arquivo style.css é adicionar algumas informações necessárias do WordPress. Esta informação contém algumas configurações que precisamos para o nosso tema. Para fazer isso, vamos até o navegador e entrar nesse link no topo. Precisamos ir para developer.wordpress.org/themes/advanced-topics e, em seguida, para a seção tema filho. partir daqui, vemos as informações que vimos no vídeo anterior. Então, se deslocarmos um pouco mais para baixo, veremos como criar um tema filho. O primeiro passo é criar pasta tema filho, o que já fizemos para que possamos pular isso, e descer para a Etapa 2. Passo 2, nós já criamos o nosso style.css, e então vamos ver um exemplo desta declaração que precisamos adicionar a este arquivo. Depois disso, vamos “Comando ou Controle C”. Pouco antes de colarmos isso em nosso editor de texto, vemos que as seguintes informações são necessárias, como o nome do tema, que vamos adicionar na parte superior. Em seguida, também um modelo. Esta seção de modelo é realmente importante. Isto irá apontar para o nosso tema pai que queremos herdar todas as informações de. Volte para o Visual Studio Code, cole isso na parte superior. Passo 1, mudaremos o nome do tema. Este é qualquer nome de nossa escolha. Também podemos adicionar um URI tema, que é a localização do site do tema, se tivéssemos um. Não temos um, por isso vou deixar isto vazio. A descrição do tema criança vitrine. O autor, coloque em seu nome. Você pode adicionar o seu site se você quiser, seguido por este modelo importante apenas aqui. Isso vai herdar toda a funcionalidade do tema da vitrine, então certifique-se de que isso está correto. Também podemos adicionar um número de versão para o nosso tema, se quisermos, e uma licença. Em seguida, na parte inferior, vemos algumas tags de exemplo. Essas tags incluem quaisquer recursos que estão disponíveis com este tema, como se você tiver modos claros e escuros, se for um layout de duas colunas, se incluir barras laterais, se for um layout responsivo, se for Pronto para a acessibilidade. Uma vez que este é apenas uma demonstração, vou remover todas essas tags de amostra. Se você quiser adicionar suas próprias tags para este tema, podemos ir para este URL apenas aqui. Poderíamos ver todas as tags de tema disponíveis. Podemos simplesmente ir em frente e criar as tags que quisermos. Temos que usar uma seleção das tags desta página. Por exemplo, o tema, podemos selecionar um máximo de três destes, como se esta é uma loja de e-commerce, se é uma loja de alimentos e bebidas, se é um portfólio. Em seguida, rolando para baixo, temos muitas outras seções. Se tivermos um determinado layout, que é uma grade; se tivermos um número de colunas, se você tiver barras laterais à esquerda e à direita. Podemos colocar qualquer uma dessas tags para que o usuário saiba exatamente quais opções de layout estão incluídas com nosso tema. As características. Muitos desses recursos, você já saberá do personalizador, como cores personalizadas, fundos personalizados e cabeçalhos, menus personalizados, se ele suporta imagens em destaque. Podemos adicionar tantos destes ao nosso tema como gostaríamos. Se este tema é apenas para seu próprio uso pessoal, as tags realmente não importam muito, mas quando importam, é se você planeja publicar isso no diretório de temas sobre os sites wordpress.org, no seção de tema. Se entrarmos nos detalhes de qualquer um desses temas, este é o local onde todas as tags serão exibidas. É aqui que o usuário pode dizer exatamente quais recursos estão incluídos no seu tema. De volta ao Visual Studio Code, e a última coisa que precisamos cuidar é esse domínio de texto. O domínio de texto é um recurso importante. É um identificador único para o nosso tema, e também é usado para traduzir o nosso tema também. Isso também deve corresponder ao nome da pasta para o nosso projeto, então precisamos alterar isso para ser storefront-child e, em seguida, dar este arquivo um salvamento. O próximo arquivo que precisamos adicionar dentro da nossa barra lateral, clique no botão “Novo arquivo”. Este é o functions.php. Não vamos adicionar nada dentro deste arquivo no momento. Este é um arquivo que contém toda a funcionalidade personalizada que queremos codificar no tema nós mesmos. A extensão PHP apenas significa que este arquivo será escrito na linguagem de programação PHP. Vamos dar uma olhada no que é isso mais tarde. A última coisa que precisamos adicionar a este tema filho é uma imagem de tema personalizado. Fornecido com este curso são algumas imagens que podemos usar para este projeto. Um deles é o screenshot.png. Ele também inclui um ícone do site que podemos usar no navegador, e também algumas imagens diferentes que usaremos no controle deslizante de e-commerce enquanto percorremos esta seção. Para incluir isso em nosso projeto, o que precisamos fazer é arrastar sobre essas imagens para a barra lateral. Isso colocará isso ao lado de nossas funções e nosso style.css. Este é agora o mínimo que precisamos para o nosso tema filho, então a última coisa a fazer é realmente ativar isso no painel, então até a seção Aparência e Tema. Aqui está o nosso tema infantil, aqui mesmo. Vemos este nome de criança vitrine, uma vez que isso é o que colocamos dentro da nossa folha de estilo, apenas aqui. Além disso, vemos nossa imagem, que foi o screenshot.png. Vamos ativar isto. Agora, para o frontend do nosso site e atualize. Nós vamos ver praticamente o mesmo site, porque nós não adicionamos nenhuma personalização para o tema. Como você pode ver, ele parece exatamente o mesmo que fez com o tema da vitrine, uma vez que ele herda todo o estilo e funcionalidade. Apenas para confirmar que estamos usando o tema filho em vez do pai, podemos passar para o style.css. Nós não precisamos saber nenhum CSS para que isso funcione. Vou apenas adicionar algumas linhas simples de código, só para verificar se está tudo ativado. Primeiro, selecionaremos a seção de corpo, que é o conteúdo principal da nossa página. Então, entre as chaves, assim como esta, podemos definir a cor de fundo para ser igual a vermelho. Agora, se salvarmos esse arquivo e atualizar o navegador, essa alteração já foi aplicada. Apenas para confirmar que isso só é aplicado ao nosso tema filho, podemos voltar ao painel e ativar o pai deles. Refresque. Isso agora é aplicado somente a este tema filho. Como agora sabemos que isso está funcionando, podemos remover essa seção do corpo e, em seguida, reativar o tema filho. Agora podemos fazer alterações com segurança neste tema filho. Sei que não afetará os pais. Isso agora está tudo pronto, e agora podemos seguir em frente com o resto do nosso projeto, mas apenas um lado rápido antes de seguirmos em frente. De volta à seção de tema filho, há também uma Etapa 3, e isso é para enfileirar uma folha de estilos. Dentro do nosso tema filho, criamos o style.css. Como este é um arquivo obrigatório, nosso pai da vitrine também tem um desses, então a Etapa 3 é uma maneira de carregar essa folha de estilo do pai. Isso é algo que geralmente precisamos fazer ao criar um tema infantil. Temos algumas funções aqui que podemos colá-lo em nosso functions.php. No entanto, ao usar o tema da vitrine, isso é algo que irá cuidar automaticamente para nós. Você não precisa entrar nesse link. Eu só quero mostrar a vocês que isso já está carregado para nós, que possamos deixar isso fora do nosso tema. Podemos ver aqui que não precisamos adicionar essa função de enfileiramento já que este tema de vitrine já fez isso para nós. Isso agora deixa nosso tema filho configurado, então agora podemos seguir em frente com o resto do projeto. 40. E-commerce do WordPress: categorias, tags e atributos de produtos: Temos um tema filho agora configurado dentro do nosso projeto. WooCommerce, como olhamos anteriormente, nos dá muitas opções diferentes que temos dentro da barra lateral. Tenha todas essas opções aqui e nós configuramos algumas das noções básicas quando instalamos o plugin pela primeira vez. Vamos passar por algumas dessas opções nos próximos vídeos, mas para este, queremos nos concentrar nos produtos e em todas as informações adicionais que você precisará adicionar aos nossos produtos. Se clicarmos sobre isso, podemos ver uma lista de todos os dados de amostra que trouxemos, em um vídeo anterior, precisa saber todos os produtos de amostra que vemos dentro de nossa loja. Então, no próximo vídeo, vamos começar a trabalhar na adição de nossos próprios produtos e como podemos editá-los. Para este vídeo, pouco antes de fazer isso, vamos dar uma olhada em como podemos adicionar todas as informações extras que precisamos para adicioná-lo aos nossos produtos. Isso inclui adicionar novas categorias, novas tags e também atributos. Isso significa que todas essas informações estão prontas para selecionar quando adicionamos nosso próprio produto personalizado. Primeiro na seção de categoria, podemos ver mais à direita, temos uma lista de todas as categorias que tinham sido trazidas com nossos dados de amostra. Esta é apenas uma maneira de categorizar nossos produtos, que possamos colocá-los em determinados grupos. Também podemos usá-los para filtrar nossos produtos no front-end. É realmente útil ter todos estes configurados nas ações em massa. Se selecionarmos esta caixa de seleção superior aqui, usando as ações em massa, podemos selecionar esta caixa de seleção e excluir todo o conteúdo dos dados de amostra. Então vá em frente e crie o nosso à esquerda. Primeiro, damos um nome a esta categoria e eu vou usar camisetas. Esta é a categoria principal para a nossa loja. O Slug, que é uma versão amigável para URL do nosso nome. Esse nome geralmente é minúsculo e contém apenas letras, números e hífens. Vamos para camisetas e isso vai aparecer no final do nosso URL. Então, se clicarmos na categoria de camisetas, esta seria a nossa URL com camisetas de barra no final. A categoria Pai. Quando criamos categorias para nossos produtos, podemos colocá-los em uma categoria pai ou filho. Uma categoria Pai é o nível superior, e então podemos ter várias subcategorias aninhadas dentro. Vamos deixar isso como um nível superior. Também podemos adicionar uma descrição opcional se quisermos, e, em seguida, também definir o tipo de exibição. Por exemplo, se clicarmos na categoria T-shirt, queremos definir o que podemos ver dentro do navegador e ver uma lista de todos os produtos que se enquadram nesta categoria. Vemos uma lista de todas essas subcategorias se esta é uma categoria Pai. Então, por exemplo, se tivéssemos duas subcategorias chamadas camisetas infantis e camiseta adulta, veríamos as subcategorias nesta página, nas quais podemos clicar e ser levadas para os produtos apropriados? Ou, em vez disso, poderíamos até mostrar os produtos e também as categorias na mesma página. Vou deixar isso como padrão e, em seguida, adicionar uma imagem em miniatura e, em seguida, entrar na Biblioteca de Mídia. Poderíamos escolher qualquer uma dessas imagens que teremos aqui. Eu vou para as imagens Shirt Store que são fornecidos com este curso, e arrastá-los para a biblioteca de mídia. Como as camisetas e o texto antigo, então use essa imagem para nossa categoria, vamos adicionar isso. Se você quiser, você pode ir em frente e adicionar várias categorias, mas como esta é uma loja de camisetas, eu vou apenas manter isso como uma única categoria principal. Em seguida, desça até a opção Tags. Uma etiqueta é apenas uma forma de adicionar algumas informações adicionais ao nosso produto. Então nós poderíamos marcá-lo com certas informações, como se fosse um intervalo de verão, um intervalo de inverno, se é para homens, mulheres, se é unissex, se é de marca, e muitas informações adicionais que podemos precisar. O primeiro, vamos para o verão, também o Slug. A descrição opcional, vamos adicionar isso. Não temos outras etiquetas à direita, então estas são todas nossas. Próximo, inverno. Clique nisso, então vamos para a marca. Vamos para unissex. Então, finalmente, adicionamos macho e fêmea. Isso é suficiente por enquanto e todas essas opções estarão disponíveis quando criarmos nossos próprios produtos personalizados. Até os atributos. Atributos é apenas algumas informações adicionais para descrever o nosso produto. À direita, podemos ver que temos a cor e o tamanho já configurados. Isso significa que podemos criar várias versões do mesmo produto, mas a única variante pode ser esse atributo. Podemos ter uma camiseta, e ao invés de criar uma camiseta em pequeno, médio e grande, poderíamos criar a mesma camiseta única e criar três versões diferentes com base nesses atributos. Vamos ver um exemplo de como podemos adicionar isso. Já temos a cor e o tamanho que são úteis para a nossa loja. Vamos adicionar outra coisa que é o tipo de manga. A diferença entre o nosso próprio costume e estes dois que foram adicionados, é estes termos mais à direita. A cor tem essas várias opções. Temos vários tamanhos, mas não temos termos para o nosso tipo de manga. Para isso, clicamos em configurar termos e adicionamos nossas próprias opções personalizadas. Para o tipo de manga, vamos primeiro para manga longa, depois Slug, e adicionar isso aos nossos atributos e também a manga curta. Acrescente isto. Agora, se voltarmos para nossos atributos, nossos termos adicionais, e agora ao lado de nossos atributos, vamos para mais um. Este vamos para o estilo e, em seguida, para os nossos termos. Este primeiro, vamos dizer claro. Bem, isto é para todas as camisas simples, impressas, e por último, listras. De volta aos nossos atributos, o estilo está agora lá com os nossos termos ao lado. Isto é tudo o que vou acrescentar para este vídeo. Você pode adicionar mais, se preferir. Você pode obter as categorias, as tags e atributos, e todos eles estarão disponíveis no próximo vídeo quando criarmos nossos próprios produtos personalizados. 41. E-commerce do WordPress: adicionando produtos: Com tudo isso no lugar, agora temos todas as informações que precisamos para ir em frente e criar nossos próprios produtos para a loja. Vá para o painel e para a opção Produtos à esquerda. Como já sabemos, temos todas essas opções que foram criadas com os dados de amostra WooCommerce. Para editar ou remover isso, tudo o que precisamos fazer é passar o mouse sobre qualquer um desses produtos, assim como fazemos com uma página ou uma postagem de blog. Isso, então, revela as opções logo abaixo. Estes produtos também têm uma unidade de manutenção de estoque que é um código de produto. Temos uma bandeira em estoque apenas aqui, e isso é criado porque WooCommerce também permite a gestão de estoque. Podemos configurar uma quantidade para cada um dos nossos itens e WooCommerce nos alertará quando chegarmos a um nível baixo de estoque. Preço e, em seguida, também vemos as categorias e as tags que adicionamos nos vídeos anteriores. Podemos clicar sobre esta estrela e isso é para um produto de recurso. Um produto em destaque aparecerá em um local especial em nosso site, que tem uma área dedicada na primeira página, e vamos dar uma olhada nisso em um pouco. Também a data de publicação. Estamos interessados em adicionar nossos próprios produtos. Isso é apresentado de forma semelhante a uma postagem de blog ou uma página, basta clicar em “Adicionar novo” e então podemos adicionar nosso primeiro novo produto. Eu vou fazer ficar com o tema das camisetas e chamar isso de T-Shirt Ninja, e algumas informações: manga curta e na cor de cinza, dentro dos suportes vamos dizer que esta é a versão pequena. Podemos adicionar uma descrição, e isso aparecerá junto com o produto na exibição completa do produto. Você pode criar qualquer descrição que desejar. Eu vou dizer: “Traga o ninja em você com esta incrível camiseta ninja em cinza. Esta camisa de manga curta é ideal para o verão, fabricada em um material fresco e leve.” Rolando para baixo, temos toda a nossa seção de dados de produtos apenas aqui. Em primeiro lugar, temos o tipo de produto que é um produto simples. Esta é apenas uma versão única de um produto, então uma camiseta pequena, poderíamos ter uma camiseta média, e estes são todos produtos independentes separados. No próximo vídeo, vamos dar uma olhada em como podemos criar automaticamente diferentes versões da mesma camisa usando um produto variável. Este é um produto físico, por isso não é transferível ou virtual, por isso vamos desmarcar estes também. Um preço, vamos para US $19,95, e WooCommerce também nos dá a opção de adicionar um preço de venda, se quisermos, e agendar isso para uma data futura. Próximo inventário, como mencionamos anteriormente, isso nos permitirá atualizar nossos níveis de estoque e também ser alertado quando atingirmos um nível baixo de estoque. Se você quiser isso, você pode manter isso marcado e podemos definir a quantidade de estoque atual. Podemos permitir backorders que é uma maneira para o cliente para encomendar um produto se não temos atualmente nenhum em estoque, então quando obtemos nosso estoque em, podemos então enviá-lo para o cliente. Em seguida, também o limite de estoque baixo que é o número quando WooCommerce nos notificará se ele atinge esse valor, então vamos adicionar 10 produtos diferentes dentro aqui. Não permitiremos pedidos de atraso e manteremos isto como dois. Se você quiser, você também pode restringir isso para vender apenas uma quantidade de cada vez. Outra coisa que é necessária é um código SKU e este é um código de produto ou uma unidade de manutenção de estoque. Este é um valor único para esses produtos, você pode dar a este um número aleatório ou um código aleatório. Digamos uma camiseta, cinza, e o tamanho do pequeno, que corresponde à nossa descrição no topo. Nós também poderíamos adicionar uma manga curta aqui dentro também. Em seguida, temos a opção de envio onde podemos adicionar o peso e as dimensões e também adicionar uma classe de envio, se quisermos. Nós não temos qualquer uma dessas classes de envio configuração no momento, mas estes estão disponíveis dentro das opções WooCommerce. Se tivermos vários produtos, também podemos vinculá-lo a outros produtos em nosso site. Nós podemos vincular isso a produtos para upsells e também cross-sell também. Upsells é uma forma de oferecer ao cliente um produto de maior valor que, por sua vez, traz mais receita. Uma venda cruzada é quando pegamos o produto atual e oferecemos ao cliente outra coisa que ele também pode gostar de comprar, e esses itens são todos exibidos para o usuário quando passar pelo processo de finalização da compra. Os atributos sejam quais forem, estes são o que w adicionado em um vídeo anterior. Podemos adicionar a cor, o tamanho, o tipo de manga e também o estilo. Primeiro, vamos adicionar a cor. Esta é a lista suspensa que mencionamos anteriormente, vou selecionar a cor cinza. Se quisermos, podemos clicar no botão “Selecionar tudo” também. Em seguida, temos o tamanho, esta era uma versão pequena. O tipo de manga, esta era uma manga curta. Em seguida, a última opção foi o estilo, simples, em seguida, salvar todos os atributos. Na seção avançada, podemos adicionar uma nota ao usuário que é enviada depois que ele comprou este item. Isso pode ser algumas informações adicionais ou algumas instruções de download, mas geralmente algo muito específico para este item. Podemos vender nosso produto em uma determinada ordem e também podemos ativar ou desativar avaliações também. Na parte inferior, teremos uma versão curta da descrição, e isso aparecerá logo abaixo do título do produto. Então, vamos copiar a versão curta de nossa descrição completa, colar isso, e isso é todos os detalhes do nosso produto agora no lugar. À direita, temos muitas opções semelhantes das postagens do blog nas páginas. Podemos definir onde queremos que este item seja publicado, quer queiramos que seja imediatamente ou em uma data definida no futuro. As categorias, isto é, naturalmente, uma camiseta. Também podemos adicionar algumas tags adicionais e também selecionar entre as mais usadas também. Na imagem do produto, você pode fazer upload de uma imagem personalizada para isso ou selecionar uma das existentes a partir daqui. Este produto era cinza, então eu vou selecionar a camiseta cinza, o texto alt para esta imagem do produto. Também podemos adicionar uma galeria de imagens diferentes, se quisermos. Acho que esta é toda a informação de que precisamos. Vamos clicar em publicar e verificar isso em nosso site. Refresque, certifique-se de que você está no link da loja apenas aqui. Desloque-se para baixo e existe o nosso produto personalizado. Podemos clicar sobre isso para ser levado através para as informações adicionais do título, o preço. Esta aqui é a nossa breve descrição que adicionamos na parte inferior. Ativamos o controle de estoque, então vemos o número de itens em estoque. Podemos adicionar isso ao nosso carrinho e há todas as informações adicionais, como nosso código de produto, nossas categorias e a descrição completa na parte inferior. Isso tudo parece bom. Agora vá para o painel e para o produto, uma vez que esta é uma camisa então eu vou remover todos os produtos de amostra que não são uma t-shirt para que os chapéus, os bonés, os óculos de sol. Nós podemos remover os moletons e apenas remover qualquer um desses produtos que você não quer, seu gorro, seu cinto. Podemos excluir tudo isso com as ações em massa. Pouco antes de terminarmos este vídeo, vamos adicionar mais um produto. Vamos criar uma versão média deste mesmo produto. Podemos começar de novo a partir do botão “Adicionar novo”, ou podemos usar todas essas opções como ponto de partida duplicando este produto. Vou remover a cópia, e para isso, tudo o que precisamos fazer é ajustar isso para ser a versão média. A descrição está boa, o preço está bom. Vamos mudar isso para oito. A unidade de manutenção de estoque também precisa ser alterada para ser o meio. Remova o um, uma vez que este era um duplicado, e, em seguida, para os produtos de link, também podemos cruzar este. Também exibiremos a versão pequena para o cliente. Tudo o resto deve ficar bem, então vamos publicar isso na sua antiga loja. Há também a nossa versão média, e ficamos apenas com as camisetas dentro da nossa loja. Bom, então é assim que podemos adicionar um único produto à nossa loja. Em seguida, vamos dar uma olhada em produtos variáveis. 42. E-commerce do WordPress: produtos variáveis: Anteriormente, adicionamos dois novos produtos, que era a mesma camiseta tanto no tamanho pequeno quanto no médio. Para fazer isso, precisávamos criar dois produtos separados, e isso poderia ser muito trabalho. Você terá muitas variantes diferentes do mesmo item. Para ajudar com isso, WooCommerce fornece uma opção de produto valioso. Isso significa que podemos adicionar um produto base. Usando este exemplo, esta seria uma camiseta ninja, manga curta em cinza, e então usaríamos os atributos, que é o tamanho, para criar duas versões separadas dos mesmos produtos. Na verdade, também criaria uma versão grande. Isso economizaria muito trabalho, mas veja isso em ação no nosso painel. Primeiro de tudo, vamos adicionar um novo produto. Eu vou para o mesmo item, mas desta vez em uma cor diferente. A camiseta ninja, manga curta , e desta vez, esta vai ser verde. Vamos também copiar a descrição, a partir da descrição completa daqui. Cole isto está dentro Anteriormente, acabamos de usar este produto simples, mas desta vez vamos descer para o produto variável. Para as unidades de manutenção de estoque, removeremos o tamanho e as alterações para ficarem verdes. Eu não vou habilitar a gestão de ações para este. Podemos deixar o transporte, os produtos ligados. Mas desta vez para os atributos, vamos descer para o tamanho. Neste, selecione todos os nossos valores que são pequenos, médios e grandes. Mas desta vez queremos usar essas quatro variações. Isso significa que você criará versões gratuitas do mesmo produto em pequenas, médias e grandes. Dê-nos um salvamento. Em seguida, até a opção de variações. A partir daqui, podemos ajustar os detalhes de cada uma de nossas variações. Então, nosso pequeno, médio e grande. Ou se quiséssemos, poderíamos criar uma variação de todos os nossos atributos. Para o nosso menor, vá em frente e adicione uma variação. A variação será o tamanho. Então, se clicarmos nisso, obtemos uma opção suspensa. Podemos personalizar todas as opções para um único produto. Precisamos de um preço para isso, 19,95. Isso vai ser, de fato, o mesmo para todas as nossas três versões. Mas você poderia fazer isso diferente se quisesse. Podemos ajustar coisas como o estoque, as dimensões de peso, e também o transporte na classe também. Salve isso. Em seguida, vá para adicionar variação. Desta vez, isto é para o médium. Clique neste, no menu suspenso. Isso também precisará de um preço. Salve nossas alterações. Então, finalmente, para o grande, isso acabou de ser feito. Nós também podemos copiar a descrição curta, colar isso na parte inferior. Coloque uma imagem. Este era verde, então selecione a versão verde. Como não selecionamos uma imagem individual para nossa variação livre, esta será a imagem padrão. Selecione a categoria de camisetas e, em seguida, podemos publicar este produto em nossa loja ou em nosso site. Esta é a versão verde que você acabou de criar. Em vez de adicionar isso diretamente ao carrinho, como podemos ver com os outros produtos, agora temos a chance de selecionar nossas opções. Podemos escolher um tamanho, temos pequeno, médio e grande. Depois de selecionar isso, podemos então ir em frente e adicionar isso ao nosso carrinho. Se formos em frente e alterarmos os detalhes de cada uma dessas versões, como um preço diferente, todas essas informações serão atualizadas quando selecionarmos uma versão diferente. Rolando para baixo, nós também temos a descrição genérica para todas essas variantes e também produtos um pouco relacionados também. Lá vamos nós. É assim que podemos adicionar produtos variáveis à nossa loja. Pode realmente nos poupar muito tempo, teremos muitas versões diferentes de um produto similar. 43. E-commerce do WordPress: layout da página inicial e controle deslizante: Bem-vinda de volta. Se formos para a nossa página inicial clicando no título do nosso site sobre o topo, todo este link inicial dentro do menu. Somos levados para a página inicial, que por padrão, com qualquer tema WordPress, é apenas uma página de blog. O início do tema por padrão não é diferente disso, então o que vamos fazer nesta página inicial é transformá-lo, para parecer mais loja de e-commerce. Vamos adicionar muitas seções novas. Vamos exibir nossos produtos mais bem avaliados, nossos itens em destaque, nossos itens que estão à venda, categorias diferentes e muito mais. Para fazer isso, primeiro precisamos de uma casa para realmente colocá-los em. Volte para o painel e para as páginas, Adicionar novo. Este vai ser para a nossa página inicial. Se quiséssemos, poderíamos construir isso com todos os blogs que vimos em vídeos anteriores. Poderíamos criar todas essas seções e se formos para o canto superior, para a seção do bloco, descer. Nós realmente temos uma seção WooCommerce com todos os blocos diferentes, que pode colocar nesta página. Temos controle total sobre a personalização deste. Podemos adicionar categorias, produtos em destaque, podemos colocar em avaliações, podemos filtrá-los por categorias, tags e atributos, e também por um filtro de preço também. Isso é realmente flexível e podemos ir desta forma se quisermos, ou outra alternativa é usar um modelo pré-construído que vem com este tema. Na guia página na barra lateral, desative os atributos. No momento, estamos usando esse modelo padrão. Mas WooCommerce também fornece um modelo Homepage, que podemos usar como um início rápido. Que é tudo o que precisamos fazer, e publicar esta página e ir para o nosso site, atualizar. Ainda não vemos nada diferente, a única diferença é que agora temos dois links da página inicial. Vamos resolver isso muito em breve. Como sabemos de projetos anteriores, para remover as postagens do blog da página inicial, precisamos ir para o painel e alterar isso nas configurações. partir daqui, vá para a opção de leitura, e então podemos alterar esta página inicial para exibir uma página estática, que vai ser a casa. As postagens, também podemos mudar isso para uma seção de bloco se queremos criar uma nova página também. Mas vou deixar isto vazio por enquanto. Salve isso. Agora, se voltarmos à nossa loja e atualizarmos, a página inicial foi transformada, temos o título, temos a seção de categoria, temos o novo produto que criamos recentemente, recomendado, favoritos, e também os Best Sellers na parte inferior também. É assim que parece fora da caixa com WooCommerce. Mas às vezes queremos fazer mudanças nisso, e torná-lo mais pessoal. Por exemplo, uma vez que só temos esta categoria de camisetas, não queremos que esta seção de categoria seja exibida, e também seria bom se pudéssemos remover esses textos caseiros também. Para fazer isso, podemos adicionar em um plugin por WooThemes, que é chamado de controle Homepage. Isso significa que podemos editar a seção, podemos reorganizar as coisas, e também podemos remover quaisquer seções também. Vá para o painel, isso é instalado como um plugin. Vamos adicionar um novo e pesquisar o controle da página inicial. Este é o plugin que precisamos por WooThemes, instalar este, ativar até acessar plugin. Precisamos ir para os plugins e depois para o personalizador. Personalizador agora tem a opção de controle Homepage onde podemos marcar e desmarcar qualquer uma dessas seções que deseja adicionar ou remover. Mas antes de tudo, o conteúdo da página inicial, se desmarcarmos isso, que só vai remover o título inicial. Este é o único aqui. Não precisamos disso, das categorias. Ele também remover isso até que tenhamos mais algumas categorias para exibir. O resto destes são muito bons como eles são. Nós também podemos arrastá-los, e reorganizá-los em uma ordem diferente. Podemos personalizar isso para exibir as seções em qualquer ordem que você quiser. Você também pode verificar como ele fica em uma tela menor. Se você clicar na exibição móvel, isso reduz todos os produtos para ser a largura total da tela. Vamos publicar isso, e para a página inicial na atualização. Tudo isso agora está sendo atualizado. Outro recurso popular que vemos em lojas de comércio eletrônico é um controle deslizante de imagem, e isso geralmente é colocado logo abaixo da seção de cabeçalho. Como o projeto anterior que criamos, este tema em particular não inclui seu próprio controle deslizante embutido, mas isso é bom. WordPress tem uma centenas de slides que podemos usar como plugins. Volte para o painel na seção de plugins e Adicionar novo. Você pode escolher qualquer plugin que você deseja, mas eu vou fazer uma pesquisa para MetaSlider. Este é um que precisamos apenas lá, instalar. Ativar este plugin e agora temos uma opção dentro da barra de slides. Lá em baixo. Clique nisto. Temos uma seção de início rápido e podemos soltar nossas imagens diretamente aqui. Mas eu vou criar uma apresentação de slides em branco com este botão apenas aqui. Isso então precisará adicionar vários slides que vão exibir nossas imagens. Fornecido com o download de imagens é dois slides diferentes, que eu vou adicionar agora. Mas antes de tudo, três para dois em camisetas simples. Podemos adicionar isso à nossa apresentação de slides. Poderíamos inserir uma legenda se você quiser adicionar algum texto a ser sobreposto, mas já que isso já tem as etiquetas de três para dois em camisetas simples. Vou deixar esta imagem sem a legenda. Também podemos colocar em um URL dedicado. Se você tem uma página que ligue isso também. Há também opções de mecanismo de busca onde podemos adicionar coisas como o texto antigo. Podemos cortar a imagem, podemos reorganizar isso em locais diferentes. Também são outras opções se adicionarmos o pacote Pro. Bem, este é um upgrade pago. À direita, podemos mudar a altura e a largura da apresentação de slides. Podemos adicionar efeitos de transição. Podemos mostrar as setas, que é a seta à esquerda e à direita, a alternância entre essas imagens. Esse é o nosso segundo slide, que será a impressão gratuita em sua primeira ordem. Novamente, temos todas as mesmas opções, mas eu vou deixar isso como o padrão e depois salvar isso. Você colocar isso em WooTheme terá várias opções. Uma das maneiras mais simples de fazer isso, é adicionar isso como um widget na aparência, seção widgets. À esquerda, agora vemos um widget MetaSlider, que agora podemos substituir em todos os locais. Passar para isso, logo abaixo do cabeçalho, podemos adicionar isso em, todos os nossos sites e atualizar. Como nosso controle deslizante com nossas setas, e também temos esses botões para baixo na parte inferior, para alternar entre essas imagens, o controle deslizante, uma vez que é lugar abaixo do cabeçalho será visível em todas as páginas adicionais também. Mas se queremos filtrar isso apenas para apelar em determinadas páginas, como nossa casa, onde podemos fazer isso, é removendo widgets. Então, se voltarmos para a nossa apresentação de slides, na parte inferior, temos uma seção Como usar. Temos a versão de codificação, que é copiar esta seção completa do PHP, e podemos copiar e colar isso em nossos templates de página. Este precisa ir para o nosso tema e, em seguida, encontrar o modelo exato que controla a página inicial. Ou outra maneira de fazer isso sem qualquer codificação é copiar esta seção laranja no meio. Em seguida, podemos colar isso em qualquer página que queremos. Quero ir à página inicial. Então, como vimos no passado, colamos isso em blocos de um volt. WordPress reconhece que este é um código curto, sei que precisa fazer é atualizar esta página sobre o nosso site e atualizar na página inicial, e não vemos o controle deslizante aparecendo na parte superior. Na verdade, se deslocarmos para baixo, não o vemos em nenhum lugar nesta página. Isso pode parecer bastante confuso, mas isso ocorre porque se formos para o painel, e depois para o personalizador, mais cedo quando configuramos nossa página inicial com seu plugin de controle da página inicial, desativamos a página inicial conteúdo. É conteúdo da página inicial foi remover o título da página, e este era todo o conteúdo ou todos os blocos que está dentro da nossa página. Infelizmente, isso também está removendo nosso bloco de apresentação de slides também. Se verificarmos isso, podemos ver nosso controle deslizante, mas também podemos ver nosso título no topo também. Então, como vamos sobre ter um controle deslizante, mas não este título? Bem, em primeiro lugar, vamos publicar. Em seguida, volte para esta seção CSS adicional. Isso tem algumas opções diferentes de como podemos remover o título da página. Se quiséssemos, poderíamos saltar para o tema e fazer alguma personalização com o código. Mas em vez disso, vamos fazer isso com alguns CSS. CSS é apenas um código que você pode adicionar à seção, que vai mudar a aparência do nosso site. Mas nós fazemos isso. Primeiro precisamos cortar o título da página, então vá para o painel, para as páginas e clique na seção “Editar” da nossa página inicial. Precisamos tomar nota deste número de post no topo, e este é o ID da página inicial. O que precisamos fazer é um ponto, página traço ID traço, e então seu número de página e o meu é 76, e então entrada de ponto, título de traço, então este é o nosso número de página. Então esta é a classe que aponta para o título da nossa página. O que vamos fazer aqui é definir o tipo de exibição para ser nenhum, ponto-e-vírgula no final. Isso removerá todo o título apenas nesta página inicial, publicará este e voltará ao nosso site. Volte para o front-end, e agora temos um controle deslizante no lugar para nossa página inicial. Além disso, o título da página foi removido. Agora nosso site está mais parecendo uma loja de e-commerce. seguir, vamos dar uma olhada em algumas outras opções de personalização configurando algumas cores diferentes que eu estou branding. 44. E-commerce do WordPress: personalizando o visual da nossa loja: Nosso site agora se assemelha e funciona como uma loja de e-commerce. Parece que quando muitas empresas, nós também queremos fazer isso mais personalizado para nossas próprias cores, nossos próprios layouts, e também geralmente torná-lo mais marca para nossa própria empresa ou nossa própria imagem pessoal. Tal como acontece com muitas das personalizações, podemos ir para a aparência e, em seguida, para a seção personalizada. Aqui, vamos apenas adicionar algumas marcas personalizadas e também algumas cores. Teremos muitas opções diferentes para fazer isso em páginas diferentes. Ou também podemos adicionar um mesmo esquema de cores a todos os nossos links, todos os nossos textos e todos os nossos fundos para cada uma das páginas. Primeiro de tudo, antes de fazermos isso na identidade do site, na qual você já esteve antes, vamos primeiro que tudo, essas mudanças serão capitalizadas, então esta será Shirt Store, e então o slogan que estará logo abaixo do subtítulo. Este aqui diz camisetas personalizadas e de marca. Então também, podemos adicionar um ícone do site, que vai aparecer dentro da parte superior do navegador. Daqui, é como essas camisetas, o texto antigo, como este, eu corto isso para ser o formato quadrado para caber dentro do topo. Se estamos felizes com isso, vamos publicar isso. Podemos ver nosso ícone na parte superior, e depois voltar, e podemos começar a trabalhar através do resto das opções. O próximo é o cabeçalho. Podemos definir uma imagem de cabeçalho, mas não precisamos fazer isso. Eu só vou mudar a cor de fundo e também o texto e links também. Primeiro de tudo, a cor de fundo, você pode mover este seletor de cores e escolher qualquer cor que você gostaria. Mas eu vou para a cor que é a4c1c4, e é apenas esta cor verde claro que vemos aqui. A cor do texto, Vou selecionar 43454b. Em seguida, a cor do link para baixo na parte inferior, este será f2f2f2, que é uma cor branca. Publique isto. Em seguida, de volta do cabeçalho para as opções principais. O rodapé para baixo na parte inferior, vamos apenas manter isso consistente com o cabeçalho e aplicar as mesmas cores. O plano de fundo, para corresponder ao cabeçalho, era o valor de a4c1c4. Como esta cor de fundo apenas aqui a cor do texto, esta era 43454b, e então a cor do link, que era f2f2f2. Publique isto. Em seguida, também podemos personalizar a cor desses botões também. Este é o botão Adicionar ao carrinho e também o botão Selecionar opções para os produtos variáveis. Isso terá uma opção de botões dedicados apenas aqui. Além disso, se quiséssemos alterar a imagem de fundo ou a cor, poderíamos fazer isso com a opção de fundo. Também podemos alterar a cor da tipografia, que se aplicará a todo o nosso site, em vez de apenas as seções de cabeçalho e rodapé. Para os botões, eu vou usar a mesma cor que usamos no fundo para o rodapé e também o cabeçalho. Esta cor era a4c1c4. Além disso, a cor do texto mais clara, que era f2f2f2. Publique se você estiver satisfeito com essas mudanças e, em seguida, volte para o menu principal. Já passamos por muitas outras opções, como o layout. Podemos mudar a posição da barra lateral e podemos ir para o controle da página inicial, que já vimos. Isso é para reorganizar essas seções e também remover qualquer uma delas também. Os menus e widgets que já cobrimos. As configurações da página inicial, estas são também as mesmas configurações que temos da barra lateral. Se formos para as configurações que estou lendo, esta é apenas uma chance de alterar a página que usamos para a primeira página do nosso site e também qual página é usada para nossos posts do blog. Mas já os definimos anteriormente, mas também temos algumas opções de Woo Commerce do cliente na parte inferior. Podemos definir um aviso de parada, que podemos habilitar para mostrar na tela se ainda não publicamos nosso site ainda. Também podemos usá-lo para mensagens promocionais e também se tivermos alguns eventos chegando. Vamos habilitar isso. Podemos ver na parte inferior, isso foi preso na parte inferior do nosso site. Isso também é útil para coisas que são vendas, mas também para que o usuário saiba se há alguma manutenção planejada no futuro. De volta a partir daqui, seu catálogo de produtos, muitas dessas opções são exatamente as mesmas que temos dentro da página de produtos ou as configurações Woo Commerce. Podemos configurar nossas páginas para mostrar produtos ou apenas categorias ou uma combinação de ambas, se você tiver categorias de gráficos. Podemos personalizar a classificação desses produtos, quantas linhas queremos na página e quantos produtos para cada uma dessas linhas. Mas vou manter isso como padrão. A página do produto, temos a opção de tornar o botão Adicionar ao carrinho pegajoso, que é atualmente. Isso significa que ele vai ficar no topo da página. Você vê isso. Se entrarmos em um de nossos produtos, não o vemos no momento porque atualmente temos o botão Adicionar ao carrinho em nossa visualização. Mas se nós rolar isso fora de vista, este é o pop-up apenas no topo aqui. Isso nos dá a chance de remover isso se não quisermos que isso apareça. A paginação. Estes são os botões à direita e à esquerda , são mantidos entre estes produtos. Podemos desmarcar estes. Elas agora são removidas, então teremos que nos concentrar em um único produto. Em seguida, as imagens do produto, podemos definir como queremos as imagens, cortar ou fazer upload de novas imagens. Também é uma opção para personalizar os campos dentro do formulário de finalização da compra também. Se você quiser, você também pode criar algumas páginas adicionais para a política de privacidade e também os termos e condições. Mas eu quero manter todas essas opções como padrão como a maioria deles são bastante padrão para uma loja de e-commerce. Publique todas as alterações que você fez. Feche isso, e se voltarmos para o nosso front-end e atualizarmos. Todas as mudanças entraram em vigor. Vá para baixo. Temos os botões e também a área do rodapé também. Do topo, nosso título lateral e nosso slogan também foram atualizados. Como nota lateral, se a largura do slide é um problema e você prefere que ele seja mais amplo, não podemos alterar isso em nossa página inicial. As configurações para isso não estão disponíveis dentro das opções da apresentação de slides porque a largura deste foi restringida pelo nosso bloco Gutenberg. Lembre-se de quando adicionamos isso com o nosso widget, esta era uma seção muito mais ampla. Se formos para a nossa página inicial e, em vez de colá-la, mostrarei um código diretamente como este. O que podemos fazer é adicionar um novo bloco e o bloco que precisamos para isso, clicamos no ícone de mais, vai ser este grupo. Este grupo tem algumas opções de largura onde podemos selecionar a largura larga ou a largura total da tela. Vamos para a opção ampla e, em seguida, clique neste ícone mais. Em seguida, você pode adicionar um código curto. Vamos primeiro copiar isso, o código curto, e colar isso em, atualizar. Se eu remover esta apresentação de slides original, topo, auto site e atualizar. Isso agora nos dá uma apresentação de slides muito mais ampla. Em seguida, vamos analisar como podemos criar mais algumas páginas, mas desta vez usando uma ferramenta chamada Page Builder para criar um layout realmente flexível. 45. E-commerce do WordPress: layouts flexíveis usando o construtor de página: Nós já sabemos como podemos criar páginas a partir do painel com este link Adicionar Novo apenas aqui. Também analisamos como usar o editor de texto do Gutenberg para adicionar vários blocos de conteúdo diferentes às nossas páginas. Neste vídeo, vou mostrar-lhe uma maneira diferente de criar algumas páginas. Isto é usando um plugin chamado Page Builder. Vamos voltar para o painel e podemos dar uma olhada em como podemos adicionar isso ao nosso site. Primeiro de tudo, este é um plugin para adicionar novo. Então, eu preciso procurar por um Page Builder, que é filtrado para baixo. Este é o que precisamos, que é Page Builder by SiteOrigin, instalá-lo, e isso vai nos permitir criar alguns layouts flexíveis, podemos dizer quantas linhas e a largura de cada uma dessas seções vai ser. Em seguida, podemos colocar em um pedaço diferente de conteúdo, como widgets, ativar isso, e bem como os widgets padrão que vêm com WordPress. Page Builder também nos dá alguns widgets extras também que também podemos baixar. Isso, de volta a Adicionar Novo, faça uma busca pelo pacote de widgets de origem do site. Isto é o que precisamos aqui. Instale isto. Como estes são do mesmo autor, você espera que esses widgets sejam totalmente compatíveis com este Page Builder. Activar isto. Lá vamos nós. Se entrarmos na aparência e também na área de widgets, aqui dentro, agora temos acesso a alguns novos widgets SiteOrigin. Ele inclui coisas como botões, carrosséis de imagem, Google Maps, widgets de imagem e também um editor de texto. Como exemplo, vamos criar uma nova página com páginas e adicionar novo. Este é para uma página Fale Conosco. Como este plugin está agora instalado junto com o visual e o editor de texto, também temos acesso a uma nova aba chamada Page Builder. Para começar, podemos clicar no “Widgets”, podemos adicionar novas linhas, ou usar alguns dos layouts pré-construídos, se quisermos. Vamos encostar isto à esquerda. Em seguida, vou começar com uma nova linha. Você verá uma visualização de todas as alterações. Nós também temos este botão Live Editor dirigindo para aqui. Primeiro, vamos adicionar nossa nova linha, eu vou adicionar isso com este botão apenas aqui e isso nos dará a chance de reorganizar a largura de cada uma de nossas seções. Podemos fazer um lado pequeno ou maior clicando neste botão no centro e também aumentar ou diminuir o número de colunas também. Vamos manter isso como dois, que vai ser uniformemente espaçados. Se você quiser ajustar coisas como o CSS, também podemos fornecer a cada uma dessas linhas algumas informações do cliente, como um ID personalizado ou uma classe personalizada, ou também podemos adicionar diretamente declarações CSS aqui se quisermos. Também podemos afinar o estofamento na margem. Se você não tem certeza do que margem e preenchimento é, a margem é o espaço que podemos adicionar fora desta linha. Um preenchimento é o espaço que aparece dentro da linha. Podemos personalizar todos esses valores em cada um dos lados. Se quiséssemos, também poderíamos personalizar um valor diferente para o layout móvel e também personalizar a cor de fundo e a imagem também. Estou feliz com esses padrões, então eu vou inserir isso. Em seguida, no lado esquerdo, podemos adicionar alguns novos widgets com este botão apenas aqui. Podemos adicionar qualquer um dos widgets WordPress existentes ou estes com os ícones azuis, os que devem ser adicionados com o SiteOrigin Widgets Bundle. Primeiro à esquerda, podemos adicionar um bloco de texto que é algumas informações sobre o nosso endereço. Edite isso. O título é para o nosso endereço, então vamos dizer, “você pode nos encontrar em”, e depois dois pontos. Em seguida, apenas algumas linhas de endereço de exemplo dentro daqui. Duplicar isto. Linha número 2, linha número 3. Você também pode mudar isso para ser uma lista, se você quiser, destacando e clicando neste botão apenas aqui. Inserir isto. Vemos uma pré-visualização apenas aqui, e abaixo de um segundo widgets de texto. Este irá conter o e-mail e também o URL do nosso site. Edite este um título de contatos úteis, endereço de e-mail, e também um URL também. Em seguida, à direita, podemos adicionar um widget diferente, destacar esta área nos widgets. À direita, pode ser útil adicionar algo como um mapa do Google com a localização da nossa loja. Podemos ir em frente e adicionar isso se quisermos, mas algo que você precisa agora com o Google Maps é o acesso a uma chave de API. O Google Maps é gratuito para usar, mas você precisa adicionar um cartão de crédito em arquivo. Eu não vou passar por isso para este projeto. Pode ser apenas algo que talvez você queira adicionar no futuro se você for morar com sua loja. Você pode usar este link na parte superior para ser levado para o painel do Google, você pode criar um código de API se quiser usá-lo em um projeto. Eu só vou deixar isso fora, mas pode ser útil adicionar um mapa na página de contato se você tem um site que está indo ao vivo. Ter um jogo ao redor com estes, você pode olhar através de todos os widgets disponíveis. Você pode ir em frente e criar muito mais páginas novas. Veja também se esta é a sua opção preferida para criar páginas ou se prefere o editor original do Gutenberg. Finalmente, vamos salvar isso, clique neste permalink, e essa é a nossa nova página Fale Conosco. Em seguida, vamos também adicionar esta página Fale Conosco ao nosso menu. Veja também como podemos reorganizar menus também. 46. E-commerce do WordPress: reorganizando os menus: No momento, nossa seção de cabeçalho, ele só tem um único menu, ele tem todos os links que foram fornecidos por padrão ao adicionar o plug-in WooCommerce. Algumas coisas para saber com este menu é, no vídeo anterior, quando criamos nossa página Fale Conosco, isso não foi adicionado automaticamente. Ainda temos a página de exemplo que precisamos remover. Também podemos dividir este menu em menus menores, se quisermos. Vou dividir isso em dois menus separados. Um deles vai ser o menu do usuário, que irá conter links, como as Contas, o cesto dos usuários, e também o Checkout, e então outro menu que vai ser mais uma navegação no site, e conterá links para diferentes páginas do nosso site, como o Lar, o Fale Conosco e também a Loja. Primeiro de tudo, vamos rever a página de exemplo do link Páginas e apenas remover esta única página. Em seguida, em Aparência e Menus. O primeiro, o nome do primeiro menu será o menu Navegação. Este será o local do menu principal. Isto será no lugar deste menu atual apenas aqui, por este menu, e então podemos adicionar as páginas que queremos exibir. Isto, eu posso ver tudo e eu vou para a página inicial. O Fale Conosco, que era uma nova página que acabamos de criar, e também a página Loja. Acrescente isto. Você pode reorganizar estes se preferir, mas estou feliz com este pedido. Salve isso. Se clicarmos na “Visualização ao vivo” na parte superior, seremos levados para a visualização Personalizador, que tem as mesmas opções, onde podemos ver todas essas mudanças em tempo real. Há todos os três novos links de menu no local principal. Agora vou criar um novo menu que vai estar no topo do nosso cabeçalho, e isso irá conter os links relacionados ao usuário. Criar novo. Este será o local do Menu do Usuário. Isso será secundário, então isso aparecerá no topo do cabeçalho, e agora podemos começar a trabalhar com a adição de nossos links. Adicionar itens. Isso também vai vincular a algumas páginas. Vou selecionar a Minha Conta, o Checkout e também o Carrinho de Compras também. À medida que clicamos sobre estes, estes são adicionados ao topo da nossa seção de cabeçalho. Podemos publicar isso e fazer essas mudanças ao vivo. Dentro dos locais do menu, também temos este menu portátil. Este é um menu dedicado que podemos exibir nos dispositivos de tela menor. Clique na visualização Mobile apenas aqui. Em seguida, podemos adicionar um menu de mão dedicado. Volte para trás. Crie um novo menu. Vamos ver, Menu Móvel. Isto está no local de Portátil. Em seguida, e então podemos adicionar nossos itens. Por favor, selecione todas as páginas que estão disponíveis. Publique o nosso menu. Agora sobre a pré-visualização, se você clicar sobre isso, podemos ver todos os links que acabamos de selecionar. Você queria, você também poderia reorganizar isso. Faria sentido ter a casa no topo. Salve essas alterações. Isso agora está sendo refletido dentro do nosso menu. A tela do tablet, isso também exibe o mesmo menu também. Então, quando vamos para os dispositivos de tela maior, nossos dois menus separados estão agora sendo exibidos. Vamos apenas atualizar nossa loja e verificar se todas essas alterações foram atualizadas. Lá vamos nós. Há nossos dois menus separados, embora na maioria dos temas não seja necessário manter o menu padrão ou o local padrão. Muitas vezes, podemos colocar em vários menus em diferentes locais. Em seguida, vamos passar para a edição da área do rodapé. 47. E-commerce do WordPress: a área de rodapé: O conteúdo final, que precisamos adicionar ao nosso site está na parte inferior dentro desta área de rodapé. Podemos adicionar até quatro seções separadas em nosso rodapé, colocando quatro partes de conteúdo separadas. A primeira seção sobre a esquerda e a quarta seção será sobre a direita. Podemos colocar dentro dele lotes de conteúdo, como widgets. Podemos colocar menus, best-sellers, produtos top rated, e tudo o mais a que temos acesso na seção widget. Para fazer isso, vá para o Painel e para a Aparência e, em seguida, Widgets. A primeira localização do menu de Rodapé Coluna 1 vai ser dois menus separados. Já temos esses menus criados a partir do vídeo anterior. Podemos reutilizar isso dentro de um widget também. Para fazer isso, arraste sobre o Menu de Navegação e, em seguida, selecione o Menu de Navegação que você deseja colocar neste local. Primeiro, menu Usuário, Salve isso. Também podemos adicionar o nosso Menu de Navegação. Fazemos isso exatamente da mesma maneira. Arraste isso, selecione nosso segundo menu e, em seguida, atualize a página. Aí está a nossa primeira secção. Na segunda seção, isso vai ser para a informação do endereço. Vai ser muito parecido com a nossa página Fale Conosco. Coluna 2. Este é um widget de texto. Arraste isto para a Coluna 2. Assim como fizemos com a página Fale Conosco, o texto, Você pode encontrar em, e, em seguida, adicionar algumas linhas de endereço de exemplo dentro aqui. Copiar. Adicione o mesmo mais algumas vezes. Se você quisesse, você também poderia mudar isso em uma lista, mas eu vou manter isso como texto normal. Salve isso. Em seguida, logo abaixo, configure um segundo bloco de texto. Assim como a página Fale Conosco, ela conterá nossos contatos úteis, o título e, em seguida, nosso texto, que será o e-mail e também o URL. Podemos pegar isso na nossa página de Contato. Estas são as nossas duas ligações lá em baixo. Cole isso e salve este widget. Podemos verificar se isso está funcionando bem, volta para a página inicial. Role para baixo até o rodapé, o que é bom. Agora podemos passar para a Coluna 3. Nossa Área de Rodapé número 3, eu vou arrastar sobre os Produtos por Classificação, que é uma lista de todos os produtos mais bem avaliados, e o padrão de cinco é bom. Nós carregamos. Esta é apenas uma versão abreviada de cada um dos produtos em ordem do top rated. Geralmente, essas áreas de widget são muitas vezes suficientes para nossas necessidades, porque se tivermos um caso de uso muito mais complexo para cada uma dessas seções, você também pode fazer uso do construtor de páginas, assim como usamos para a página Fale Conosco. O construtor de página também tem um widget, e está contido dentro deste widget do Construtor de Layout. Na Área 4 do Rodapé, podemos arrastar isso. Esta área de widget pode ser disposta exatamente da mesma forma que uma de nossas páginas. Podemos dividir nosso conteúdo em várias linhas e colunas para nos dar um layout realmente flexível. Eu quero fechar isso e remover este widget, mas esta é uma maneira realmente flexível de controlar o layout de nossas seções. Colocando uma coluna extra, se quiser, mas vou deixar isso aqui. Este é agora todo o conteúdo da nossa loja. No próximo vídeo, vamos finalizar este projeto observando todas as configurações adicionais que vêm com o comércio eletrônico, como adicionar cupons, criar relatórios, adicionar diferentes métodos de pagamento e também o fluxo de pedidos integrado dentro do nosso painel. 48. E-commerce do WordPress: configurações do WooCommerce e gerenciando sua loja: Não só o plug-in WooCommerce e tema, foi a chance de construir uma loja de e-commerce totalmente personalizável. Ele também nos fornece muitas das ferramentas essenciais, que precisamos para executar um negócio de e-commerce, e a maioria dessas opções estão disponíveis no painel abaixo da opção WooCommerce. Primeiro de tudo, antes de entrar ao vivo com qualquer loja, primeiro precisamos verificar todas essas configurações e também precisamos configurar nosso provedor de pagamento. Claro, é essencial ter nossos detalhes de endereço todos definidos, e a maioria disso já foi resolvido para nós desde quando passamos pelo assistente de instalação. Para o endereço, também precisamos filtrar os locais de envio se enviarmos apenas para determinados países ou áreas. Podemos ativar cupons, e vamos dar uma olhada em como criá-los em apenas um momento, e também, certificar-nos de que as opções de moeda estão todas corretas também. da moeda, também podemos adicionar o separador e o número de casas decimais para que possamos ajustar a aparência dos nossos preços em nossa loja. Os produtos, a maioria dessas opções são auto-explicativas. Podemos alterar as unidades de medida, podemos ativar ou desativar avaliações e classificações, e também, se tivermos nosso produto em uma página diferente, também podemos alterar isso aqui. As opções de envio ou algo que é muito específico para o seu país, e também o país para o qual você deseja enviar. Podemos configurar várias zonas de envio, onde vamos pegar uma determinada área e aplicar vários métodos de envio ou preços para esta área específica. Por exemplo, se fosse uma área difícil de alcançar com um determinado CEP ou CEP, poderíamos adicionar uma lista dessas regiões aqui dentro e configurar um método de envio dedicado para essa zona específica. Em seguida, na parte inferior, adicionamos nosso método de envio, e podemos escolher entre uma tarifa fixa, que é um preço fixo. Podemos adicionar frete grátis a esta área específica ou restringi-la para ser apenas retirada local. Claro, os pagamentos são algo que é realmente importante em uma loja de comércio eletrônico. Infelizmente, WooCommerce nos permite vincular muitos provedores de pagamento usando diferentes plug-ins, ou podemos escolher entre essas opções padrão. Podemos receber pagamentos via transferência bancária direta, podemos receber cheques, dinheiro na entrega, ou também configurar PayPal também, que é simples de fazer. Tudo o que precisamos fazer é entrar na seção de configuração e, em seguida, configurar nosso endereço de e-mail PayPal, começar a receber nossos pagamentos. Salve essas alterações. Temos uma área de contas onde podemos fazer coisas como configurar um checkout de convidado para que o usuário não precise se registrar antes de fazer um pedido. Podemos configurar a forma como as contas são criadas e também alterar o texto da nossa política de privacidade. E-mails, aqui é onde nós configuramos as notificações, que você usa, eu acho, em cada fase do checkout. Então, se eles fizeram um novo pedido, se o pedido falhou, se ele foi reembolsado, podemos configurar a mensagem, que é então enviada para o usuário. Por padrão, WooCommerce já tem algumas mensagens simples no lugar, mas é assim que podemos mudar essas mensagens se você quiser. A guia de integração é uma forma de adicionar serviços de geolocalização à nossa loja, e você pode configurá-los com este link apenas aqui. Finalmente, também há uma seção avançada. Já analisamos algumas dessas opções no passado, como mudar em torno de nossas páginas. Podemos usá-los se quisermos criar nossas próprias páginas personalizadas e atribuí-los a determinadas funções. Além de todas essas configurações, WooCommerce também nos fornece a capacidade de gerenciar totalmente uma loja de e-commerce. Como seria de esperar, temos a chance de olhar através de ordens. Esta é a página onde todos os pedidos entrarão quando fizermos uma venda em nosso site. Se você quiser, você também pode adicionar manualmente um pedido. Para isso, basta adicionar os detalhes dos nossos clientes na parte superior. Em seguida, podemos colocar em diferentes itens da nossa loja. Então produto, podemos fazer uma pesquisa, selecionar qualquer um destes e, em seguida, adicioná-los ao nosso pedido. Podemos criar este pedido e também enviá-lo para o endereço de e-mail do cliente. Podemos gerenciar nossos clientes a partir deste link apenas aqui e podemos ver todos os clientes, que foram registrados em nosso site. Temos muitos dados sobre cada um dos clientes, como seus valores de pedidos, suas regiões e também os detalhes de endereço. Cupons. Podemos criar e gerenciar cupons para dar aos nossos usuários um desconto em determinados produtos. Isso também é realmente flexível. Podemos ajustar exatamente quais produtos este cupom se aplicará. Podemos definir obedecer descontos de preço fixo, um desconto percentual, um desconto de um determinado produto ou do cesto de compras total. Este cupom também pode ser usado para permitir frete grátis e também podemos colocar uma data de validade. Nas restrições, podemos colocar em um gasto mínimo ou máximo, para que este cupom seja aplicado, ou também apenas aplicá-lo a determinados produtos ou categorias também. Na parte inferior, isso também pode ser restrito a determinados e-mails de clientes, se não quisermos que isso se aplique a todos os usuários em nossa loja. Finalmente, os limites de uso. Este é bem simples. Podemos configurar quantas vezes queremos que este cupom seja usado, e também limitar o número de vezes que um determinado usuário pode usar este cupom também. Além disso, quando sua loja estiver funcionando, também queremos ter acesso ao máximo de informações que pudermos. Temos uma seção de relatórios onde podemos descobrir muitas informações, como nossas vendas totais. Podemos exibir isso até a última semana, o último mês, o último ano, ou uma data personalizada também. Esses dados podem ser baixados em um formato de planilha. Podemos verificar nossas vendas por produto, as vendas por categoria. Podemos verificar como os cupons são usados. A guia “Clientes” nos mostrará quantos pedidos para um cliente registrado versus um convidado. Além disso, temos uma guia de estoque onde podemos gerenciar nossos baixos níveis de estoque se tivermos ativado isso dentro do produto. Como você pode ver, WooCommerce é mais do que apenas construir uma loja de e-commerce. Ele pode ser usado para gerenciar nossa configuração completa de e-commerce. Além disso, se ele está faltando alguma funcionalidade específica, que você precisa, muitas vezes há um plugin disponível também. Este é o fim do nosso projeto de e-commerce, e eu vou vê-lo agora na próxima seção. 49. Noções básicas de PHP: introdução: Para esta próxima seção, vamos dar uma breve olhada em alguns conceitos básicos do PHP e como podemos escrever algum código que tem que nos ajudar nas próximas seções onde vamos começar a criar nossos próprios temas WordPress personalizados. Agora, não precisamos ser um especialista em PHP, tudo o que precisamos fazer é ter alguma compreensão básica. Isso realmente nos ajudará a entender o que está acontecendo bastidores e como podemos aplicar código PHP aos nossos sites WordPress. Lembre-se, no início do curso, mencionamos que o WordPress é escrito na linguagem de programação PHP. Como já vimos, se queremos apenas usar temas pré-construídos e plugins pré-construídos, não precisamos conhecer nenhum código PHP. Mas agora vamos aprender alguns dos conceitos básicos que vão nos ajudar com o desenvolvimento do nosso tema. PHP é uma linguagem que roda em um servidor web. Então, assim como no início, quando definimos nosso WordPress que também requer um servidor web por causa disso. Também tivemos dois vídeos de opções diferentes. Tivemos a opção um, que usa local, e local configura um servidor web e um banco de dados que nos permitem construir nossos sites WordPress. Agora, local é realmente ótimo para hospedar sites WordPress, mas não é tão bom em apenas deixar-nos brincar com algum PHP normal. Para esta próxima seção, temos algumas opções diferentes. No início do curso, como uma alternativa ao local, também analisamos como poderíamos criar um site WordPress usando MAMP. Se você veio com esta opção, você pode ir para o htdocs onde você também terá instalado seus sites WordPress. Você pode ir em frente e criar os arquivos PHP aqui, assim como fizemos com os próximos vídeos. Ou, alternativamente, se você não estava usando MAMP, se você continuou com este curso usando local, você pode usar uma alternativa que é um playground online. Este é um deles, que é T-E-H e depois playground.com. Esta é uma maneira rápida e fácil de escrever nosso código PHP e ver o resultado no lado direito. Nos próximos vídeos, vamos escrever nosso código PHP, que começará exatamente como fizemos aqui. Em vez de escrevê-lo dentro do editor de texto, como fazemos nos vídeos, você pode, em vez disso, escrever o código aqui. Vamos fazer algo assim. Estaremos configurando variáveis para que possamos armazenar nosso nome, como Chris, e vamos ecoar esse nome. Não se preocupe se isso não parecer familiar, vamos cobrir exatamente o que isso faz nos próximos vídeos. Uma vez que escrevemos nosso código PHP, assim como fazemos nos vídeos, clique em “Salvar e executar”. Então vamos ver as saídas no lado direito em vez do que fazemos nos vídeos, que é executar isso dentro do navegador. Só para recapitular, para esta próxima seção, precisamos executar um servidor web para executar nosso código PHP. Se você tem seguido junto, até agora nós tivemos usando local. As duas opções que você tem que continuar é instalar o MAMP ou você pode usar um playground PHP online como vemos aqui. Alternativamente, no início do curso, se você escolheu a opção MAMP, você também pode continuar usando isso se preferir. Vamos pular para o próximo vídeo onde vamos dar uma olhada no nosso primeiro código PHP. 50. Noções básicas de PHP: olá mundo: Ok pessoal, então este vídeo é tudo sobre como começar a usar o PHP. Vamos dar uma olhada na sintaxe básica do PHP, a maneira como ela é escrita, e fazer um exemplo de olá mundo. Para começar, vamos para o ht-docs dentro de seu host local e, em seguida, criar uma nova pasta. Vou chamar esta pasta os conceitos básicos do PHP. Em seguida, arraste esta pasta para o editor de texto. Vou usar colchetes da Adobe e, em seguida, arrastar isso para lá. Para começar, vou criar uma página PHP para começar a trabalhar. Crie uma nova página, com Command ou Ctrl N, dentro dos colchetes. Primeiro de tudo, eu quero salvar esta página como hello-world, e ter certeza que ela tem a extensão PHP no final. Salve isso dentro do básico do PHP. Então precisamos criar um esqueleto HTML básico para começar. Estou usando o plugin Emmet. Se você não estiver usando isso, você precisará digitar manualmente, mas se você baixar Emmet, tudo o que você precisa fazer é digitar HTML dois-pontos 5 e, em seguida, clicar na aba. Então isso preenche todo o esqueleto HTML:5 para você. Vamos chamar isso de “Olá Mundo”. Agora vamos trabalhar dentro da seção do corpo. Para trabalhar com PHP, precisamos fornecer uma tag de abertura e fechamento. A tag de abertura no PHP se parece com isso, são os colchetes angulares, interrogação e, em seguida, php. Isso indica que o código PHP está prestes a começar. Então, no final do php, precisamos adicionar uma tag de fechamento, que é o ponto de interrogação nos colchetes angulares retos. Todo o código PHP vai entre aqui. A primeira coisa que queremos fazer, é apenas imprimir algum texto para o navegador. Vou fazer isso com um eco. Digite echo, e então, como isso vai ser texto, precisamos colocá-lo entre aspas, então, “Olá Mundo”. Então, no final, fechamos uma declaração com um ponto-e-vírgula. Guarde isso. É assim que imprimimos algo para o navegador, usando PHP. Vá até seu navegador e digite o host local. Em seguida, vá para o arquivo que você colocou dentro do ht-docs. É php-basic, e então olá mundo. Lá vamos nós. Exibido no navegador é o nosso texto que acabou de ecoar de Hello World. Podemos misturar e combinar PHP entre o HTML. Em vez de ter o título como digitado lá, devemos ter o que é chamado de hard-code. Em vez de digitar lá, podemos abrir o PHP, e depois fazer o eco, Hello World. Certifique-se de que o PHP está fechado, com o ponto de interrogação nos colchetes angulares. Guarde isso. Então, se nós, “Refresh”, devemos agora ver que o título no topo do Hello World, agora está sendo produzido com PHP. Apenas certifique-se de que vamos digitar PHP e, em seguida, “Refresh”. Agora todos nós vemos que isso está sendo gerado com o PHP. Podemos misturar e combinar o PHP entre o HTML, pois só temos as tags PHP de abertura, e as tags PHP de fechamento definidas corretamente. Comentários em PHP são semelhantes a muitas outras linguagens. Podemos comentar algum código que já não precisamos, ou podemos usar um comentário para digitar algumas notas para nós mesmos, ou dos programadores que queremos que o programa ignore. Por exemplo, se não quiséssemos mais exibir isso, e quiséssemos que o programa ignorasse, poderíamos usar duas barras. Você pode ver que o editor de texto torna a linha cinza. Podemos dizer que está sendo comentado corretamente. Se “Salvar” isso, e depois “Atualizar”, isso deve desaparecer, porque não está mais sendo processado. Vamos apenas remover isso. Os comentários também são úteis para criar notas. Podemos fazer uma nota para nós mesmos, dizendo exibir Olá Mundo para o navegador. Isto é o que é chamado de um comentário de linha única. Se quisermos apenas comentar uma única linha de código, apenas usamos as duas barras. Se quisermos comentar mais de uma linha, podemos usar isso com um comentário multi-linha. É uma barra dianteira, e uma estrela. Então podemos comentar mais de uma linha. Vamos colar no Hello World duas ou três vezes, e terminamos com uma estrela e uma barra. É assim que comentamos uma linha, e é assim que comentamos mais de uma linha. Nesta seção inteira do PHP, somente o eco único de Hello World será exibido no navegador. Antes com o título, nós olhamos para adicionar PHP entre o HTML. Nós também podemos adicionar tags HTML entre PHP. Estes serão exibidos da mesma forma como se fossem HTML. Por exemplo, no eco Hello World, se quisesse que este fosse um título HTML nível um, poderíamos colocar as tags HTML de h1 antes do texto, e então poderíamos colocar uma tag de fechamento h1 depois disso. Em seguida, em vez de ser exibido como texto normal, este será agora um título de nível um. Se “Salvar” isso e, em seguida, “Atualizar”, agora obtemos Hello World como um cabeçalho no tamanho de fonte maior. Você poderia colocar em qualquer alvo que você quiser. Podemos fazer o mesmo, enquanto isso tem um h2 e “Salvar”, e vamos para o navegador, e há o nosso cabeçalho nível dois também. Essa é a sintaxe básica do PHP. É assim que podemos ecoar ou imprimir textos para o navegador, e também como podemos comentar código, bem como combinar PHP com HTML. 51. Noções básicas de PHP: strings, variáveis e constantes: Bem-vindo de volta. No último vídeo, demos uma olhada em alguns conceitos básicos do PHP, como ecoar textos para o navegador, comentários e também como fazer PHP e HTML. Neste vídeo, vamos passar a dar uma olhada em strings, variáveis e constantes. Eu só vou apagar o código entre as tags PHP da última seção. Primeiro de tudo, vamos dar uma olhada nas cordas. Uma string é uma sequência de caracteres, como uma única letra, uma palavra ou uma frase. Uma string é o que usamos no último vídeo, onde estávamos fazendo um eco. Imprimimos uma string entre aspas. Isto é uma corda. Não se esqueça do ponto-e-vírgula no final. A string deve ser cercada por aspas simples ou duplas. Ambos funcionam perfeitamente bem. Então eco e, em seguida, desta vez, uma única aspas. Esta é também uma string. Vamos dar uma olhada nisso no navegador enquanto atualizamos. Esta é uma string e esta também é uma string. Na maioria das vezes não importa se usamos aspas simples ou duplas. A única vez que realmente importa é se você quer cercar uma dessas palavras com aspas. Por exemplo, se você queria que a string da palavra tivesse as aspas impressas na tela, precisamos ter certeza de que as citações que usamos em torno da palavra são opostas ao que está ao redor da frase. Então, se salvarmos isso e, em seguida, atualizar, a seqüência de palavras tem as aspas duplas. Mas se fôssemos fazer isso e todos tivessem o mesmo estilo de citações, guarde isso. O editor de texto pegou um problema, então ele está fazendo uma cor diferente. Se fôssemos atualizar, veremos que a página do host local não está funcionando porque temos um erro. Mas se mudarmos isso para ser aspas simples e em seguida, os circundantes de volta para o dobro e, em seguida, atualizar. É assim que podemos adicionar aspas simples e duplas dentro de uma string. Há muitas outras maneiras de trabalhar com strings usando funções de string. Por exemplo, se quisermos reverter uma string, vou usar esse exemplo lá. Se quiséssemos reverter uma string, poderíamos usar a função reversa string, que é strrev (). Então precisamos cercar a corda dentro dos suportes e depois salvar isso. Então vamos verificar o navegador e ver o que acontece. Isso inverte todos os caracteres dentro da string. Então agora está de volta à diferença. Também podemos fazer outras coisas, como fazer todas as palavras maiúsculas ou minúsculas. Para torná-los todos em maiúsculas, podemos usar a string para a função superior. Então strtoupper (), e, em seguida, salvar isso e, em seguida, atualizar, e agora todos os caracteres dentro da string são maiúsculas. Podemos fazer da mesma forma corda para baixar. Então strtolower (), salve e atualize. Agora não há maiúsculas na corda. É claro que há muitas funções de string mais diferentes que você pode encontrar com um Google rápido. Procure por funções de string PHP. Nós somos imediatamente levados para uma lista, e é ou um PHP.net ou W3Schools, que tem muitos exemplos. Como você pode ver, há uma bela lista. Há muitas coisas diferentes que podemos fazer com strings, como dividir uma string em uma matriz. Podemos aleatoriamente embaralhar todos os caracteres em uma string. Podemos verificar o comprimento da string, que retorna o número de caracteres. Ter um jogo por aí com isso. Talvez você não precise dessas duas funções que acabei de mostrar, e tenho certeza que se você trabalha com PHP regularmente, você encontrará muitas dessas funções diferentes. Em seguida, vamos passar para variáveis. Como muitas outras linguagens de programação, PHP usa variáveis como contêineres para armazenar informações, e as informações dentro dessas variáveis podem mudar. Só vou apagar esta corda. A maneira como declaramos uma variável é usando primeiro um sinal de $ e, em seguida, atribuindo um nome de variável. Por exemplo, número um. Vou definir o valor para ser igual a uma string, um número, um booleano, ou várias outras coisas. Vou definir o número um para ser igual a dez. Quando estamos lidando com números, não precisamos colocar as citações em ambos os lados. O que estamos fazendo é criar uma variável com o nome do número um, e atribuímos o valor de dez a este número. Então podemos fazer o mesmo. Podemos criar uma segunda variável. Desta vez eu vou chamá-lo de número dois, e desta vez eu vou definir o valor para ser 20, e agora podemos usar o eco que olhamos antes. Em vez de ecoar uma string, podemos ecoar o nome da variável, número um. Agora acabou de ser impresso para o navegador o valor de dez. Refresque-se e lá está o nosso número dez. Também podemos adicionar variáveis em conjunto. Podemos ecoar o valor do número um, mais o valor do número dois. Devemos agora obter 30 no navegador. Também podemos combinar strings com variáveis. Se eu tiver uma variável, então o número de posts, vamos definir isso para ser sete. Então temos um nome de variável. A variável chamada nome atribuído a uma string. Vou chamar isso de Chris. Se o usuário chamado Chris criou sete posts, podemos então imprimir isso para o navegador. Echo, e então porque é string, precisamos colocar isso entre aspas. Se quiséssemos imprimir Chris tem sete posts, poderíamos começar com o nome da variável. Coloque nosso nome, de modo que será Chris, e então tem, e então nós queremos o valor dos posts, então coloque isso lá dentro. Atualmente diz, Chris tem sete, e depois postagens, e, em seguida, como mencionamos antes, podemos colocar uma tag HTML dentro de lá. Eu só vou adicionar uma tag break lá dentro. Vamos salvar isso, e espero que nós devemos obter o valor de Chris tem sete posts que nós fazemos, então isso está funcionando bem. Mencionei que os valores de uma variável podem ser alterados. Se voltarmos ao nosso exemplo de número, então número um igual a dez e, em seguida, eco número um. Agora devemos obter o valor de dez, imprimi-lo para o navegador. Mas mais adiante no programa, se você quiser alterar o valor do número um, podemos reatribuir o valor. Número um, podemos mudar isso para 20, e então quando ecoarmos número um, devemos obter o valor de 20, imprimi-lo para o navegador, o que fazemos. Isso ocorre porque o programa é lido linha por linha. Quando chega à linha 11, o número um é definido para o valor de dez e, em seguida, move-se para baixo para a próxima linha e, em seguida, percebe que o número um está agora definido para 20. Quando ecoamos número um, temos o valor de 20. A última coisa que quero ver neste vídeo são constantes. Em constantes, assim como variáveis, pode armazenar algumas informações ou armazenar um valor. No entanto, ao contrário das variáveis, o valor pode mudar depois de definido. É assim que você define uma constante no PHP. Primeiro de tudo, usamos a função define ou a palavra-chave define para declarar uma constante, e então abrimos os colchetes. Então precisamos passar em dois parâmetros. O primeiro parâmetro entre as citações e em letras maiúsculas é o nome da constante. Por exemplo, se você quiser armazenar o valor do seu próprio nome, podemos chamá-lo de nome e, em seguida, separados por uma vírgula. Nós adicionamos o valor da constante. Este será o meu nome, e depois um ponto-e-vírgula no final. Definimos uma constante com o nome de NAME, e então adicionamos o valor de Chris a essa constante. Podemos imprimir isso para o navegador da mesma maneira que antes. Tudo o que precisamos fazer é ecoar o nome, e então devemos obter o valor de Chris dentro do navegador. Lá vamos nós. É assim que usamos strings , variáveis e constantes no PHP. 52. Noções básicas de PHP: tipos de dados e operadores: Bem-vinda de volta. Até agora, nos últimos dois vídeos, demos uma olhada em como as variáveis podem armazenar dados no PHP. Analisamos números ou inteiros, e demos uma olhada em como podemos armazená-los em variáveis. Um inteiro, podemos ter vários tipos diferentes. Você pode ver alguns exemplos, como um número positivo, um número negativo ou um número hexadecimal. Também demos uma olhada nas cordas, que você sabe que são uma série de personagens. Posso cumprir as strings de diferentes maneiras, como aspas simples ou duplas. Mas também há muitos tipos diferentes de dados que podemos usar no PHP. Por exemplo, há um booleano. Um booleano é um simples verdadeiro ou falso. Assim, por exemplo, podemos ver se algo retorna verdadeiro, e se isso acontecer, podemos executar uma determinada ação. Há também um tipo de dados, como arrays, que veremos na seção. Mas a seguir vamos dar uma olhada em alguns operadores PHP. Então, para começar, vamos dar uma olhada em alguns operadores aritméticos. Vamos usar o nosso exemplo de número que olhamos antes. Então número um igual a 100. Uma segunda variável de número dois igual a 200. Então podemos fazer um eco. Eco número um mais número dois. Devemos obter um valor de 300 no navegador. Então este símbolo de adição é um operador aritmético. Ele adiciona o valor do número um ao número dois. Nós também podemos tirar esses valores com o símbolo take away. Agora teremos menos ou menos 100 negativos. Nós também podemos multiplicar, e para fazer isso no PHP, precisamos usar o símbolo da estrela. Temos um valor de 20.000. Nós também podemos dividir com a barra para a frente. Também podemos descobrir o restante. Podemos fazer isso com o símbolo percentual. O símbolo percentual nos dá o restante após a divisão. Para fazer isso, precisamos mudar os valores para algo mais adequado. Número um é igual a 10. Número dois é igual a três. Em seguida, atualize e devemos obter o valor de um. A razão é porque três entra em 10 três vezes e, em seguida, deixa um valor de um como um restante. Então vamos dar uma olhada em mais alguns exemplos no site W3 Schools. Vá para W3 Schools e, em seguida, operadores PHP. Vamos rolar para baixo. Nós olhamos para alguns dos operadores aritméticos, que você pode ver aqui. Há também operadores de atribuição. O operador de atribuição mais básico é o símbolo igual. Nós olhamos para eles em vídeos anteriores. Atribuímos o valor de 10 ao nome da variável do número um. Há também outros operadores de atribuição, como adição, subtração, multiplicação, divisão e módulo, que é o restante. Há também comparação e operadores lógicos. Podemos verificar se dois valores são iguais ou menores ou maiores que. Mas vamos dar uma olhada neles com mais detalhes na seção de declaração if/else. Também podemos incrementar e diminuir o valor. Podemos incrementar, por exemplo, um valor por um ou podemos decrementar um valor por um. Vamos olhar para incrementar e diminuir operadores mais no vídeo loops. Mas, por enquanto, vamos dar uma olhada em alguns exemplos básicos de como podemos usá-los. Então nós tivemos uma variável chamada número, e nós simplesmente definir isso para o valor de um. Se ecoarmos isso para o navegador, só obtemos o valor de um impresso. Mas podemos incrementar esse valor por um a cada vez, definindo o nome da variável de número e, em seguida, usando mais. Guarde isso. Agora o valor de um deve ser incrementado por um. Então devemos ser impressos para o navegador, o valor de dois. Refresque. Desculpe um ponto-e-vírgula no final disso, e depois atualize. Então deve ser a única e salvar. Atualize o navegador e, em seguida, obtemos o valor de dois. Podemos continuar repetindo isso. Se quiséssemos incrementar por um mais uma vez e tomar o valor para ser o número três, podemos adicionar isso e novamente, e então devemos obter o valor levado para três. Se quiséssemos decrementar, poderíamos usar o símbolo negativo e se o usarmos duas vezes, devemos obter o valor de negativo. Refresque. Lá vamos nós. O valor de um é decretado para ser zero e, em seguida, decrementado novamente para ser um negativo. Então isso é uma rápida olhada em tipos de dados e operadores no PHP. Eu vou vê-lo no próximo vídeo, vamos dar uma olhada em arrays PHP. 53. Noções básicas de PHP: matrizes: Bem-vindos de volta, rapazes. Neste vídeo vamos dar uma olhada em arrays php. Então, em vídeos anteriores, analisamos variáveis, que são ótimas para armazenar dados que podem ser alterados. No entanto, eles só podem conter um valor, mas se quisermos armazenar mais de um valor, precisamos usar uma matriz. Podemos armazenar tantos valores dentro dessa matriz quanto quisermos. É assim que criamos uma matriz usando php. Então, há dois métodos diferentes que vou mostrar a vocês. O primeiro, podemos definir o nome da matriz, assim como um nome de variável. Eu vou criar uma matriz de formas, e então definir isso para ser uma matriz. Então precisamos seguir a palavra-chave da matriz, com os colchetes e, em seguida, um ponto-e-vírgula. Tudo o que fizemos lá foi criar uma matriz vazia com o nome das formas. Para adicionar alguns valores dentro desta matriz vazia, vamos usar o nome da matriz, e depois seguido por um conjunto de colchetes, e então precisamos colocar no número do índice. Começamos com zero, que é a primeira posição de uma matriz. Vou definir isso para ser a primeira forma, então um quadrado. Isso agora adiciona o valor de quadrado dentro da matriz, e vamos adicionar um ou dois mais, então molda e, em seguida, posicione um. Isso pode ser um círculo e, em seguida, formas, posição dois, então um triângulo. Ok, então nós definimos uma matriz vazia para ter o nome das formas, e então nós adicionamos três valores para a matriz de quadrado, círculo e triângulo. Então, para verificar se isso está funcionando, podemos fazer um eco, então é eco o nome da matriz de formas, e então os elementos da matriz que queremos imprimir então vamos começar com o número dois. Então você deve imprimir para o navegador o valor do triângulo, então salve isso, e depois atualize, e lá vamos nós. Essa é a posição número dois da matriz, que tem o valor de triângulo. Vamos mudar isso para o número um, então devemos pegar o círculo. Esta é uma longa maneira de escrever uma matriz. Há uma maneira mais simples de escrever uma matriz, isto é usando o método literal. Então, em vez do que estamos fazendo acima, podemos definir o nome da matriz de formas, e então podemos definir isso para uma matriz, e então podemos colocar os valores diretamente dentro da matriz. Primeiro de tudo, podemos colocar no quadrado, e depois separar por vírgulas, o círculo e, em seguida, o triângulo. Vamos apagar este por enquanto, e depois podemos fazer o eco como fizemos antes. Então vamos ecoar o nome, que é formas e, em seguida, entre colchetes novamente, precisamos colocar no número do índice, então vamos começar com zero, que é o quadrado. Guarde isso e, em seguida, atualize, e nós obteremos o valor de quadrado. Então, qualquer um desses dois métodos funcionou perfeitamente bem. Então, alguns vídeos atrás, demos uma olhada nas funções de string, onde invertemos a ordem da string e, em seguida, mudamos o texto para ser maiúscula. Arrays também têm funções semelhantes, e como uma lista de funções disponíveis são php.net, mas eu vou apenas passar por um ou dois exemplos, apenas para mostrar o que podemos fazer com funções de array. Assim, o primeiro é a função de contagem, que conta o número de itens dentro da matriz. Usamos a função de contagem, e então vamos colocar o nome da matriz dentro dos colchetes, para que possamos excluir esse zero. Você deve ecoar para o navegador, o número de itens dentro da matriz de formas para atualizar. Há três itens dentro da matriz. Isso também varia de acordo com funções como, o pop da matriz, que remove e retorna o último item do final de uma matriz. Para fazer isso, vou criar mais uma variável. Vou chamar-lhe a última forma. Então a última forma que eu quero pegar é um triângulo. Para pegar o valor deste, eu vou definir este valor para ser igual a array_ pop. Em seguida, para soltar o valor do triângulo, ou o último item, nós só precisamos colocar no nome da matriz, que é formas. Então agora o que fizemos é definir o último item na matriz, dentro deste nome da variável. Agora podemos apenas ecoar esse nome de variável para o navegador, e devemos obter o valor do triângulo. Então, ecoe o nome da variável de lastshape, e depois atualize, e lá vamos nós. Então esse é o valor do triângulo. Também podemos encontrar o valor mínimo e máximo de uma matriz. Vamos criar uma matriz com números desta vez, então números são iguais a uma matriz. Não precisamos colocar nenhum número dentro das citações. Vamos colocar alguns números lá dentro, e depois podemos ecoar. Se quiséssemos descobrir o maior número, poderíamos usar a função max e, em seguida, dentro dos colchetes, o nome da matriz, que é números. Agora devemos ser impressos na tela, o número máximo, que é 67, o que fazemos. Também podemos substituir max com min, e devemos obter um valor de um. Ok, ótimo. Então é assim que você pode criar uma matriz usando php, e também algumas funções básicas do array php. Então, obrigado e eu vou vê-lo no próximo vídeo, onde vamos dar uma olhada nas funções php. 54. Noções básicas de PHP: funções: Neste vídeo, vamos dar uma olhada em como podemos usar funções em PHP. Uma função é basicamente um bloco de código. Atribuímos um nome a este bloco de código e o chamamos de programa Juno, quando queremos executá-lo. É realmente útil quando temos o mesmo código mais de uma vez em nosso programa e ao invés de digitar todo o código uma e outra vez. Podemos colocar um código dentro de uma função e chamar a função quando é necessário. PHP também tem muitas funções embutidas que eu descarte. Vimos um ou dois destes nos últimos vídeos. Começamos criando uma função, usando a palavra-chave function, e depois disso, damos à função um nome, seguido pelo parêntese ou os colchetes, o nome pode ser MyFunction e em seguida, use os colchetes depois e, em seguida, o conteúdo da função está dentro de um conjunto de chaves. Toda vez que esta função é chamada de código dentro destas chaves será executado. Por exemplo, uma forma básica de dada função é apenas um eco. Minha primeira função, por conta própria, esta função não faz nada até que a chamemos, e a maneira como a chamamos é você simplesmente digitando o nome da função, MyFunction, e então o parêntese seguido por um ponto-e-vírgula. Agora, quando executamos MyFunction, devemos obter o texto da minha primeira função imprimi-lo para o navegador, e dentro da função, podemos até ter diferentes variáveis lá dentro. Assim como vimos alguns vídeos atrás, podemos usar um nome de usuário. Nome de usuário igual a Chris e a segunda variável de posts igual a 5, e então podemos ecoar para a tela. Chris tem cinco posts, eco dentro das citações, o nome de usuário tem cinco posts, agora, quando chamamos essa função, devemos levar a mensagem para a tela dentro do eco. Salve isso e, em seguida, atualize o navegador, e podemos levar funções ainda mais longe, passando em parâmetros. Vamos criar uma nova função, e se você quiser criar uma função para multiplicar números. Desta vez, em vez de apenas deixar os colchetes vazios, podemos passar em dois parâmetros ou até mais. Vou usar isso para multiplicar duas variáveis. Variável Número A e, em seguida, separados por vírgulas, variável Número B. Cada vez que esta função é chamada, quero que ela multiplique o valor de A com o valor de B. Vamos eco variável A, multiplicar pela variável B, e, em seguida, passar os números irá chamar a função pelo seu nome. Multiplicar os números e os dois números que queremos multiplicar irão bússola dentro destes colchetes. Doze e dois por exemplo, agora quando chamamos essa função, agora temos o valor de 12 multiplicado por 2. Devemos obter o valor de 24 na tela. Ótima. O que acabamos de fazer é que efetivamente criamos uma variável de A e B e então precisamos pegar os valores de 12 e 2 e depois multiplicá-los juntos e exibir os resultados para o navegador. É assim que trabalhamos com funções em PHP, e é também como podemos passar parâmetros para funções e eu vou vê-lo no próximo vídeo, vamos dar uma olhada em declarações condicionais e mais operadores. 55. Noções básicas de PHP: declarações condicionais e mais operadores: Bem-vinda de volta. Neste vídeo, vamos dar uma olhada em declarações condicionais e alguns operadores mais úteis. Instruções condicionais são usados quando deseja verificar se uma determinada condição é verdadeira. Se assim for, podemos então dizer ao programa o que fazer a seguir. Por exemplo, podemos verificar se um usuário está conectado. Se eles são, então podemos mostrar as informações do usuário na tela, como o nome de usuário. Vamos primeiro começar olhando para as instruções condicionais mais básicas, a instrução if. Vou começar criando um par de variáveis para trabalhar. Use um cifrão, e a primeira variável será LoggeDin. Vou definir isto como um valor booleano. Se você se lembrar, isso pode ser verdade ou falso. Vamos inicialmente definir isso como verdadeiro. Em seguida, a segunda variável, este vai ser o nome de usuário. Isto é uma corda. Vou adicionar o nome de usuário lá. Então vamos usar uma instrução if para verificar se uma condição é verdadeira. Vou começar usando a palavra-chave if, e depois disso, um conjunto de colchetes. Dentro disso, esta é a condição que temos de verificar. Queremos verificar se o usuário é LoggeDin. Vamos testar se LoggeDin é verdadeiro, apenas dentro do nome da variável LoggeDin, lá dentro. Em seguida, adicionamos o par de chaves encaracoladas. Se esta condição for verdadeira, então executamos o código que está entre as duas chaves. Como exemplo, se nosso usuário for Loggedin, vamos apenas ecoar para o navegador uma mensagem para você dizendo, bem-vindo de volta. Em seguida, uma vírgula, e então podemos apenas adicionar com o ponto ou ponto, o nome de usuário, que é armazenado na variável chamada usuário. Então não se esqueça do ponto-e-vírgula no final das declarações. Apenas guarde isso. Então vamos para o navegador e, em seguida, atualizar isso. Ótima. Recebemos a mensagem dizendo: “Bem-vindo de volta, Chris”, porque nossa condição está definida como verdadeira. Se mudarmos isso para ser falso, não devemos obter nada na tela, então nossa mensagem não é exibida. Tais afirmações básicas se. Agora vamos passar a dar uma olhada usando operadores de comparação. Vou para o site da W3Schools. Estou na seção de operadores de comparação. Também podemos usar essas comparações com declarações if. Assim, pode verificar se dois valores são iguais. O duplo igual é para verificar se dois valores são iguais ao volume. É também um triplo igual, que verifica se os dois valores são igual valor e também o mesmo tipo. Por tipo queremos dizer se ambos são uma corda ou ambos são um número. Também podemos combinar com um ponto de exclamação para fazer exatamente o oposto. Isto não será igual. Podemos usar o símbolo menor ou maior do que para verificar se a condição é menor ou menor do que. Nós também podemos usar menor que ou igual a, ou maior que e igual a. Vamos colocar isso dentro de nossas declarações se como um exemplo. Só vou usar uma nova variável. Este é um número. Vou definir isto para ser um valor inicial de 10. Então agora, que novamente, se a variável de número é maior que cinco, então nós poderíamos fazer uma declaração de eco dizendo é verdade. Tal check-out. Nosso número é maior que cinco, então devemos obter a declaração é verdadeira impressa para o navegador. Vamos verificar isso e atualizar, e claro que sim. Se mudarmos isso para ser menor do que, isso é claro que é falso. Na verdade, desapareceu. Assim como no site da W3Schools, podemos verificar usando qualquer um desses operadores. Podemos usar menos ou igual a. Definimos isso para ser 10. Isto é, naturalmente, igual a 10. Esta afirmação deve ser verdadeira, o que é. Olhamos antes para o símbolo duplo e o triplo é igual. Vamos começar com o duplo igual, e em vez de número, vamos colocar isso dentro das citações. Vamos nos transformar em uma corda, lama ou salvar isso e atualizar e ver o que acontece. Temos a declaração como sendo verdadeira. Embora os valores acima de 10, isso é classificado como uma string porque nas aspas. Vamos apenas colocar um terceiro símbolo igual lá e salvar e depois ver o que acontece. Vamos usar a declaração do taxane é verdadeira. Isso ocorre porque usar um triplo igual verifica tanto o valor. O valor é igual e também o tipo. O tipo não é igual porque esta é uma string e este é um número. Usando se declarações são realmente boas se queremos testar apenas contra um resultado. Mas se quiser testar contra mais de um resultado, precisamos usar um if else declarações ou mesmo se. Vamos primeiro começar usando instruções if else, e isso apenas muda de volta para ser um número. Se o número for menor que 10, as trocas para ser número é menor do que 10. Como você sabe, desta vez irá verificar se o número é menor que 10 e, em seguida, imprimir isso na tela. Mas também podemos fornecer um segundo teste de resultados contra caso isso não seja verdade. Podemos usar a palavra-chave else. Então, dentro das chaves, podemos fornecer um segundo eco. Então o número não é inferior a 10, e o ponto-e-vírgula. Inicialmente verificamos se esta afirmação é verdadeira. Caso contrário, isso será impresso na tela. Vamos salvar isso e depois atualizar. O número a não é inferior a 10. Claro que não é porque é o número 10. Podemos colocar um novo operador lá dentro. Teste se o número é menor ou igual a 10. Então, guarde isso, e devemos agora mudar para dizer que um número é menor que 10 ou, na verdade, igual a. Mas e se quiséssemos testar contra condições livres ou mais? Bem, este é o lugar onde mais se entra. Vou colocar estes em linhas separadas apenas para torná-lo um pouco mais legível. Entre o if e o else, podemos alterar isso para ser elseif e em seguida, usar os colchetes para uma condição para testar contra. Primeiro, estamos checando se o número é menor que 10. Podemos então usar o elseif para testar se o número é igual a 10. Novamente, a variável de número igual a 10. Nós mudamos isso para ser o número é 10. Então, finalmente, se essas opções forem ambas falsas, obterá o backup. Quando ele disse a outra declaração de volta hoje como uma queda para trás. Desta vez, podemos eco número não é menor ou igual a 10. Vamos testar isto. Em primeiro lugar, vamos definir o número para ser menor que 10. Devemos obter o número é menor que 10 e atualizar. Então o número é menor que 10. Se o número foi alterado para ser igual a 10, porque devemos obter esta declaração de número é 10. Então, finalmente, se o valor for maior que 10, então mude para 14, devemos obter um número não é menor ou igual a 10. Então, atualize. Lá vamos nós. É assim que podemos usar se else e else if declarações para testar contra múltiplos resultados. A última coisa que queremos dar uma olhada neste vídeo é operadores lógicos. Vamos voltar para o exemplo W3Schools. Vamos dar uma olhada nos operadores lógicos, que é um pouco mais abaixo. Assim como os testes que usamos antes, o teste se as condições são menores que, maiores ou iguais a, por exemplo. Também podemos usar o operador e para verificar se mais de uma condição é atendida e. Também podemos verificar se um valor ou ninguém é verdadeiro. Também o ponto de exclamação para testar se uma condição não é verdadeira. Vamos começar criando duas variáveis, então número 1 e, em seguida, também número 2. Esse valor pode ser 10. Então poderíamos remover tudo além das declarações “if”. Se quiséssemos testar contra ambas as condições em vez de apenas uma, então se o número 1 fosse igual a cinco, eu também quero verificar se o número 2 é igual a 10, para que possamos usar o comercial duplo ou a palavra e. Então eu vou usar isso. Então o número 1 é igual a cinco e também o número 2 é igual a 10. Então, a declaração de eco é verdadeira. Apenas mude de volta para ser o dólar. Lá vamos nós. Claro que ambas as declarações são verdadeiras, então devemos colocar esta impressão na tela. Mas se todas essas declarações retornarem falsas, não devemos conseguir nada. Vamos mudar isso para dois. Claro, o número 1 não é verdade quando os dois são verdadeiros para que isso seja impresso. Agora, se salvarmos e atualizarmos, devemos remover a mensagem. Mas podemos mudar isso para ser ou, que são os dois tubos. Assim como já vimos antes, podemos usar os dois tubos ou o operador ou. Agora só precisamos de uma dessas declarações para avaliar como verdadeira. O número 2 é verdadeiro e o número 1 é falso. Agora eles devem ter a mensagem impressa novamente na tela. são seus dados de teste, e depois atualizamos, o que fazemos. Tais que seguem este vídeo. Esse é um olhar básico para instruções condicionais e alguns operadores PHP. Obrigado, e verei você de novo. 56. Noções básicas de PHP: declarações “switch”: No último vídeo, observamos as declarações if-else e como podemos usá-las para dizer ao programa o que fazer, com base em se uma determinada condição é atendida. Agora vamos seguir em frente para olhar para um switch declarações, que é uma ótima alternativa para as declarações if-else se precisamos verificar contra muitas condições. Eu vou começar criando uma variável chamada comida favorita, eu vou definir isso para ser uma cadeia de pizza. Em seguida, vamos usar uma instrução switch para verificar muitos tipos diferentes de alimentos e, em seguida, verificar se há correspondência com a variável de comida favorita. Para iniciar uma instrução switch, usamos a palavra-chave switch. Em seguida, dentro de um conjunto de baldes, em seguida, passar na variável, Eu quero verificar contra. Coloque isso lá dentro. Então, assim como a instrução if que usamos antes, usamos um conjunto de chaves. Em seguida, dentro dessas chaves, podemos colocar em todas as expressões que queremos verificar e, em seguida, também fornecer um resultado se esta expressão for atendida. Com instruções switch, verificamos casos diferentes, então usamos a palavra-chave case. O primeiro caso podemos verificar se a comida favorita é um curry. Vamos testar se isso é igual ao curry. Então precisamos usar dois pontos, e então uma vez que tenhamos feito o cólon, podemos então fornecer um resultado se isso for uma correspondência. Eu só vou usar um eco e então eu vou dizer, “Eu amo curry”, com um ponto-e-vírgula no final. Depois de cada uma dessas expressões, precisamos usar a palavra-chave break com o ponto-e-vírgula. Isso sai da instrução switch se isso for verdade, e se não, nós apenas passamos para o próximo caso. Usamos a palavra-chave case novamente e desta vez vou verificar se o caso é chinês. Novamente, o cólon e o eco de “Eu amo chinês”. Então, como antes, usamos a palavra-chave break e, em seguida, mais uma. Case e desta vez “Pizza”. Echo, “Eu amo pizza.” Se isso for verdade, podemos sair das instruções switch. É assim que preparamos uma instrução switch. Há mais uma peça que precisamos adicionar aqui antes de testá-la. Precisamos escrever um caso padrão, apenas no caso de qualquer uma dessas expressões acima não coincidir. Isso é mais um backup, então padrão e, em seguida, os dois pontos, e então eu quero ecoar, eu não sei. Vamos guardar isto e testá-lo. Você provavelmente pode descobrir o que vai acontecer aqui. Temos nossa comida favorita, digamos que é pizza, então devemos combinar a caixa de pizza e depois ecoar “Eu amo pizza”. Como é que nos saímos? Vamos mudar isso para ser chinês e isso deve mudar para “Eu amo chinês”. Então curry, isso funciona bem, eu amo curry. Agora vamos testar o padrão, que possamos mudar isso para “Pasta”. Nós não temos um caso para macarrão, então nós devemos obter o padrão de “Eu não sei”, o que nós temos, então isso é bom. É assim que podemos usar uma instrução switch no PHP para testar contra vários resultados. 57. Noções básicas de PHP: loops: Na programação, podemos usar loops para tornar tarefas repetitivas muito mais fáceis. Por exemplo, podemos percorrer os nomes de todos os seus amigos dentro de um banco de dados e, em seguida, exibi-los na tela. Isso salva o tipo e na mesma linha de código uma e outra vez para cada amigo. Neste vídeo, vamos dar uma olhada nos quatro tipos de loops que podemos usar no PHP. Vamos começar com o que é chamado de loop de tempo. Enquanto loops basicamente executam um bloco de código, desde que uma condição seja verdadeira, então vamos dar uma olhada em como o loop while se parece no PHP. Vou criar um conjunto de variáveis para ser um. Um loop while é definido um pouco semelhante a um se declarações que olhamos para alguns vídeos atrás. Mas a palavra-chave while, a condição dentro dos colchetes para testar e , em seguida, o resultado para executar entre as chaves. Quero começar por verificar se a nossa variável de número é menor que 10. Enquanto nosso número é menor que 10, vamos criar um eco de número, e você só vai se digitar primeiro, e então eu vou explicar o que está fazendo. É menos de 10, e também vamos precisar de um segundo de trança lá, e você vai ver o porquê em apenas um momento. Em seguida, o número da variável, vamos incrementar com o mais. Você pode estar olhando para isso, um imaginando o que está acontecendo. Basicamente estamos criando um loop, e vamos começar a testar se o número é menor que 10, o que é, então nesse caso vamos imprimir o número, então será o número 1 é menor que 10. Então, uma vez que isso é impresso, eu vou incrementar o número usando o mais, então isso vai mudar o valor do número para o número 2. Então essa condição ainda é verdadeira porque o número 2 ainda é menor que 10. Então, na segunda vez no loop devemos ser impressos, o número 2 é menor que 10. Então novamente ele é incrementado, e então número torna-se o valor de 3, que novamente ainda é menor que 10, então vamos obter o texto impresso na tela. número 3 é menor que 10, e assim por diante. Isso continua repetindo até que a condição não seja mais verdadeira, ou no nosso caso, até chegarmos ao número 9. Vamos alterá-lo novamente para 1, salvar e atualizar. Lá também temos o número 1 todo o caminho até 9 para ser menor que 10, e é por isso que precisamos inserir uma tag break apenas para que cada uma delas esteja em uma linha separada e seja mais legível. A próxima vamos dar uma olhada em uma variação do loop while, e isso é chamado de loop do-while. O loop while que acabamos de olhar só funcionará enquanto uma condição for verdadeira. No entanto, o loop do-while sempre será executado uma vez primeiro antes de verificar se uma condição é verdadeira, s o código entre as chaves será sempre executado no mínimo de uma vez. Vamos dar uma olhada em como podemos fazer um loop do-while no PHP. Começamos com a palavra-chave do, e então podemos deixar os colchetes lá porque isso vai ser executado uma vez o que quer que façamos. Nós vamos imprimir para a tela o valor do número da variável e, em seguida, uma tag break, então ele está em sua própria linha. Esta seção sempre será executado e vou escrever um tempo, e esta é a condição que estamos indo para testar contra, então enquanto número novamente é menor que 10. O que quer que façamos sempre terá o número impresso na tela, e então o loop continuará enquanto uma condição é verdadeira. Como esta condição é verdadeira, devemos obter um loop todo o caminho até 9, na verdade isso precisa colocar os incrementos dentro de lá, então número mais e salvar, e depois atualizar. Temos os valores até 9. Vamos ver o que acontece se mudarmos isso para ser o símbolo maior que. Claro, 1 não é maior que 10, então isso é falso. Usando um loop while, não conseguiríamos nada impresso. A seção de fazer sempre será executada uma vez, e então não devemos obter nada depois disso. Vamos testar isso, e vamos apenas obter o número 1 porque o loop não se repete. Há mais dois tipos de loops que podemos ver no PHP, o loop for e o para cada loop. Em seguida, vamos dar uma olhada no loop for. Para loops são úteis para quando sabemos quantas vezes queremos repetir o loop. Um loop while será executado até que uma condição não seja mais verdadeira enquanto um loop for precisamos definir quantas vezes o loop será executado. Vamos dar uma olhada no loop for. Usamos a palavra-chave for e, em seguida, os colchetes e, claro, as chaves, assim como os outros loops, mas desta vez precisamos passar três parâmetros para os colchetes. O primeiro volume que precisamos entrar é o inicializador, e isso é efetivamente vai ser como variável antiga que usamos no loop while. Vou definir a variável mais uma vez de número e, em seguida, vamos inicializar isto para ser 0. Em seguida, cada um desses parâmetros precisa ser separado com um ponto-e-vírgula. O segundo parâmetro é nossa condição para testar contra, então eu vou usar a variável número. Queremos testar se isso é menor ou igual ao valor de 5. Mais uma vez, o ponto-e-vírgula, e o terceiro que vou usar para incrementar. Toda vez que passarmos pelo loop, vamos incrementar a variável de número por um em cada loop, então número mais. Assim como os outros loops entre as chaves, vamos ecoar o número, então o número, e então o número da variável, e então a tag break, e não se esqueça do ponto-e-vírgula no final, Isso é o que para loop parece. Mais uma vez, começamos dizendo um valor inicial de 0, e cada vez que nós loop em torno de nós verificamos se o valor é menor ou igual a 5, se for, nós vamos ecoar o número, e também incrementa por um em cada loop. Permite salvar e, em seguida, atualizar. Ótimo. Nós temos todos os valores, nós temos o valor inicial de zero, e então nós percorremos até chegarmos ao valor de cinco. O último tipo de loop que veremos neste vídeo é o para cada loop, ele é projetado para trabalhar em arrays. No vídeo de arrays, nós olhamos para como criar uma matriz e como imprimir um valor para o navegador selecionando-o pelo seu número de índice exatamente como este, então nós tivemos um formato de nome de matriz, e nós definimos isso igual a uma matriz com os valores de quadrado, círculo, e também triângulo. Então, se quisermos exibir qualquer um desses valores dentro do navegador, precisamos dele para ecoar a matriz de formas, e então dentro dos colchetes, precisamos que ele selecione a forma pelo seu número de índice, então 0, 1 e 2, então triângulo será o número 2, então obtemos o valor do triângulo. Criar um novo eco para cada item de matriz, pode ser uma tarefa longa e chata, e na programação, devemos sempre tentar evitar a repetição. Vamos dar uma olhada em como podemos criar um para cada loop. Não precisamos desse eco porque vamos fazer isso dentro do loop. Comece um para cada loop com o para cada palavra-chave, e como os outros loops têm um conjunto de colchetes e, em seguida, as chaves. A primeira coisa que precisamos fazer é passar no nome da matriz, modo que é o nome das formas. Então toda vez que percorremos a matriz de formas, precisamos armazenar os valores dentro de uma nova variável, então faça isso declarando como e, em seguida, um novo nome de variável, então eu vou chamar esse valor, e então vamos criar O nosso eco. Como todos os novos valores são armazenados em nossa variável de valor, precisamos ecoar a variável de valor, e então vamos colocar uma tag break dentro lá e um ponto-e-vírgula, modo que é assim que um para cada loop é colocado para fora. Toda vez que percorremos a matriz de formas, vamos instalar esses valores dentro de uma nova variável, que chamamos de valor, e também com cada passagem do loop, ele também passa para o próximo item na matriz. Isso significa que o loop continuará a viver através todos os valores da matriz até encontrar o último. Digamos isso e, em seguida, atualize o navegador. Lá vamos nós. Nós percorremos o primeiro item, o segundo item e o terceiro, e essa é uma maneira muito mais conveniente de imprimir todos os valores de uma matriz em vez de selecionar cada número de índice individual. Espero que este vídeo deixe você com uma melhor compreensão de como os loops funcionam no PHP. 58. Noções básicas de PHP: o codex: Olá a todos. Então, eu espero que esta seção tenha lhe dado uma melhor compreensão do básico do PHP, e que o conhecimento virá em realmente útil, na próxima seção onde vamos estar construindo nosso próprio tema WordPress personalizado, e converter um site existente para WordPress. Então, à medida que você passar pela próxima seção, estaremos nos referindo ao Codex WordPress, bastante regularidade, que você pode descobrir o codex.wordpress.org. Então, o Codex é o manual on-line para WordPress. É um repositório para informações e documentação do WordPress. Ele cobre praticamente tudo que você precisa saber sobre WordPress, incluindo desenvolvimentos de temas, desenvolvimentos de plugins, e como contribuir para WordPress, e se envolver com você mesmo. Nós vamos usá-lo muito na próxima seção para navegar através de referências de função. Então, por exemplo, se quisermos saber como trabalhar com uma função específica, como as tags, podemos digitar a pesquisa e, em seguida, procurar a referência da função, que é as tags, e então podemos descubra exatamente como usar essa função específica. Podemos descobrir uma descrição sobre a função. Também teremos um exemplo de uso. Assim, muitas vezes podemos simplesmente copiar e colar a função em nosso próprio tema. Então este particular inclui as tags que estão associadas a uma postagem de blog, as exibe na tela, e muitas vezes você pode descobrir pequenas informações, como os parâmetros, que a função absorve. Então, por exemplo, este toma antes, depois e um separador. Então, antes e depois simplesmente define qual texto exibir, antes e depois da tag individual. O separador é um valor como uma vírgula ou um traço que você quer colocar entre cada uma das tags, e se você não encontrar bem a função que você está procurando, rolando para baixo para baixo, muitas vezes tem uma lista de tags relacionadas, que você pode dar uma olhada, e encontrar exatamente o que queremos. Portanto, vale a pena marcar o Codex como um ótimo recurso para aprender coisas novas sobre o WordPress, e também para verificar o uso de exemplo para coisas como funções, e veremos mais do Codex à medida que vamos para a próxima seção. Então, obrigado, e agora vamos passar para a próxima seção, onde vamos converter um site existente para WordPress. 59. Desenvolvimento do tema: configuração de banco de dados e instalação do WordPress: Bem-vindos de volta, rapazes. Tenho certeza de que todos estão ansiosos para começar estamos criando seu próprio tema WordPress. Como de costume, como o par anterior de projetos, vamos começar configurando o banco de dados e também baixando a pasta WordPress do wordpress.org Vamos começar certificando-se de que o MAMP está tudo pronto e funcionando. Então, se formos para a página inicial, podemos então começar a configurar nosso banco de dados dentro do “phpMyAdmin”. Em “Bancos de Dados”, queremos criar um novo banco de dados; isso será chamado “pró-fones de ouvido”, que é o nome do nosso site estático que vamos converter, então clique em criar e isso é tudo o que precisamos fazer lá dentro. Em seguida, vamos para o wordpress.org. Como de costume, basta baixar o WordPress e selecionar a versão mais recente. Tenho certeza de que alguns segundos para baixar. Para os downloads e, em seguida, descompacte o pacote. Vou chamar isso de “pró-fones de ouvido” e depois guardar isso. Em seguida, abra o “htdocs”; Eu vou abrir uma nova janela, em seguida, ir para os “Aplicativos”, e depois “MAMP”, o “htdocs”, e depois drogar sobre o nosso novo site lá dentro. Vou fechar estes. Então você deve saber o que fazer a seguir agora; precisamos ir para o host local, em seguida, para a nossa nova pasta pró-fones de ouvido, então vamos começar por percorrer o país; então selecione o seu país de escolha e então nós podemos vá para o script de instalação. Então vamos lá, o nome do banco de dados era “pro-headphones”, nome de usuário novamente era “root”, senha root: o “localhost” e o prefixo da tabela que vou deixar como padrão. Em seguida, execute a instalação. O título do site é, naturalmente, “Pro Headphones”, o nome de usuário: “proheadphones-admin” ou seu nome de usuário de escolha. Claro, só para fins de demonstração, vou chamar isso de “profones de ouvido”. Confirme que você usa uma senha fraca; tudo bem, apenas para esta demonstração, e defina um e-mail, instale e faça login. Vou marcar “lembrar de mim” e depois clicar em “login”. Estamos prontos para ir. Então isso é um banco de dados e também WordPress instalado. Bom. Certifique-se de chegar ao palco onde tudo está funcionando antes de seguirmos em frente. Vejo você no próximo vídeo. 60. Desenvolvimento do tema: o tema Underscores para iniciar: Está bem. Então, antes de começarmos este vídeo, devemos ser todos vento WordPress. Devemos ter todos instalados em nosso host local e também o banco de dados e todos prontos para ir. Você já deve ter baixado o modelo estático, o site pro-fones de ouvido, que está sendo fornecido com este curso. Neste vídeo, vamos baixar um tema inicial WordPress chamado underscores. Então eu estou indo apenas para ir para o Google e, em seguida, vai procurar para sublinhados tema inicial. Então esta é a URL que precisamos, que é underscores.me. Então sublinhados não é como os temas que vamos encontrar na floresta tema ou os temas que encontramos na página inicial do WordPress. Estes são todos temas completos que basicamente pronto para ir e pronto para começar a adicionar suas próprias cores e você próprios toques. No entanto, iniciar tema é exatamente o que parece. É uma base para começar a construir. Ele inclui todos os arquivos e pastas necessários WordPress e inclui muitas melhores práticas WordPress. Então podemos pensar nisso como um tema abafado rápido. Muitos dos principais temas lá fora em sites como floresta temática é construído sobre o tema de início sublinhado. Então, é uma base realmente sólida para construir. Então, se você der uma olhada na página inicial, você pode ver todas as coisas que ela está incluída, como folhas de estilo, layouts diferentes, coisas como cabeçalhos personalizados, modelos 404. Então, basicamente, poupa-nos um monte de trabalho que se destacaria. Então, para começar, tudo o que precisamos fazer é gerar nosso tema. Então eu vou chamar isso de pro-headphones-wp e, em seguida, clique em “Gerar” e então você deve iniciar um download. Então vamos abrir isso e, em seguida, descompactar o pacote e esta vai ser a nossa nova pasta de temas para nós começarmos a trabalhar. Então vamos abrir uma nova janela do Finder. Então eu vou para a nossa pasta MAMP e, em seguida, vamos descobrir pasta WordPress dentro dos documentos ht. Então pro-fones de ouvido e, em seguida, precisamos adicionar isso na seção tema. Então o conteúdo do WordPress, temas e, em seguida, basta arrastar isso para a pasta de temas. Vamos abrir e olhar para dentro. Então dentro há tudo o que precisamos para começar a trabalhar para o nosso novo tema. Existem vários modelos de página e coisas como a página 404, as funções e todas as páginas básicas que precisamos, como o index.php, o page.php, a pasta layouts, pasta para adicionar idiomas, JavaScript e também ordenadamente organizado temos os modelos de peças. Então, estamos prontos para ir. Então eu vou para o Painel do WordPress e, em seguida, descer para Aparência e, em seguida, Temas e, em seguida, há o nosso tema pro-fones de ouvido. Então vamos ativar isso e, claro, você pode mudar a imagem se quiser. Então, basta ativar isso e então vamos visitar o site. É muito básico no momento, mas é para ser um tema inicial para nós construirmos. Então vamos começar no próximo vídeo adicionando o cabeçalho e as seções de rodapé. 61. Desenvolvimento do tema: entendendo os modelos do WordPress/PHP: Bem-vindos a todos. Neste vídeo, nós só queremos tomar alguns momentos antes de começar o nosso tema WordPress. Apenas para olhar para as diferenças entre sites HTML tradicionais e como WordPress lida com temas. Esta é uma aparência bastante padrão na página index.html muitas vezes teria um cabeçalho e uma seção de rodapé na parte superior e inferior da página. É bastante comum ter uma barra lateral se é algo como uma notícia ou um site de blog, e, claro, uma seção de conteúdo principal no meio. Normalmente todo o conteúdo ou todo o HTML para esses sites são todos armazenados dentro do mesmo arquivo, mas muitas vezes encontramos com sites HTML em certas áreas, particularmente o cabeçalho e a área do rodapé. Temos o mesmo código em todas as páginas. O cabeçalho e o rodapé geralmente o mesmo, e a página de índice, a página Sobre Nós e a página de contato. Terminamos com um monte de código duplicado do site. WordPress lida com as coisas um pouco diferente no entanto. No lado esquerdo temos nosso index.html tradicional, e no lado direito, e no lado direito, podemos ver como WordPress ou PHP em geral podem ser usados para dividir as várias seções do site. Cada uma dessas seções pode ser colocada em seu próprio arquivo com a extensão PHP. Como você pode ver na parte superior da página, o cabeçalho, nós codificamos o código da seção de cabeçalho, e colocamos em seu próprio arquivo chamado header.php, e isso também pode ser feito no WordPress com o sidebar.php e também o footer.php. A área de conteúdo é muitas vezes feito um pouco diferente no entanto. Pode haver mais de um arquivo de modelo que controla a exibição para cada página, ou até mesmo o loop WordPress, mas vamos olhar para eles com mais detalhes à medida que passamos por esta seção. Uma vez que temos todos esses arquivos PHP ou cada uma dessas áreas salvos em seus próprios modelos, podemos então preencher a página WordPress usando várias funções WordPress. Por exemplo, o arquivo header.php que acabamos de salvar pode ser incluído dentro do modelo WordPress usando a função get_header, e também é as funções get_footer e get_sidebar entre muitos outros. Mais uma vez, o conteúdo é tratado de uma forma ligeiramente diferente, e você aprende mais sobre isso novamente ao passar pelo resto da seção. Isto é o que parece realmente em código. No lado esquerdo, temos um editor de código e um layout bastante comum para a página WordPress. No topo, você pode ver a função get_header, que puxa em todo o conteúdo do nosso cabeçalho de seu próprio arquivo separado. O conteúdo, e no caso deste arquivo específico, ele está sendo puxado de uma reprodução de som pop chamada página, e seu varia de acordo com as formas de incluir conteúdo em sites WordPress. Vamos olhar para uma ou duas dessas técnicas à medida que avançamos. Mais abaixo na página, temos a função get_sidebar. Então, na parte inferior, temos a função get_photo. Fazê-lo desta forma tem muitos benefícios. Por exemplo, se quisermos alterar uma área do cabeçalho, como adicionar um link de menu em vez de ir para a página Sobre Nós, a página de índice, a página de contato conosco e alterar o link em cada página. No caso do WordPress só precisa ir para o arquivo header.php, alterá-lo uma vez, e isso mudará o cabeçalho em cada página do site. Espero que esta visão geral lhe dê uma idéia um pouco melhor de como WordPress lida com páginas e modelos de página. Agora vamos passar para o próximo vídeo, vamos criar o cabeçalho e os arquivos footer.php, e então vamos trazer o conteúdo do nosso site estático e adicioná-los aos novos arquivos. 62. Desenvolvimento do tema: seções de cabeçalho e rodapé: Bem-vinda de volta. Então, agora sabemos como WordPress lida pesava modelos de página. Sabemos como o WordPress divide as coisas em várias seções, como o cabeçalho e o rodapé. Neste vídeo vamos começar a trabalhar criando o cabeçalho e a seção de rodapé, e depois converter as partes que precisamos de todo o site estático em WordPress, e, em seguida, incluir joelhos em nosso tema. Na área de trabalho eu tenho uma cópia do site estático, que está sendo fornecido com este curso. Agora vou abrir meu editor de texto. Eu vou abrir os colchetes, ea primeira coisa que eu quero fazer um é droga na pasta tema WordPress de dentro do htdocs. Arraste a pasta de fones de ouvido profissionais para isso. Então eu também vou arrastar sobre o site estático e, em seguida, apenas deixa na pasta quando precisamos dele. Eu vou voltar para o tema WordPress e, em seguida, vamos começar na seção header.PHP. Se olharmos para baixo todos os arquivos e pastas, devemos ver o wp-content. Na verdade, vamos tornar isso um pouco mais fácil para nós mesmos. Vá para fones de ouvido profissionais, conteúdo, temas, e nós vamos realmente apenas drogar a pasta tema. Eu deveria tornar isso um pouco mais fácil. Vá para o arquivo header.PHP. Como você pode ver, este é o cabeçalho para o nosso tema. Nesta seção inclui toda a área na seção de cabeçalho, todo o caminho até a tag de conteúdo de abertura. Muito disso parecerá familiar se você usar para construir em sites HTML normais. Temos as tags HTML habituais, a seção head, várias metatags, a tag viewport. Então, um pouco mais abaixo, temos a seção da cabeça mais próxima, e depois a seção do corpo. Eu vou descer um pouco mais e encontrar a seção de cabeçalho. Procure a seção de cabeçalho de abertura e, em seguida, procure o fechamento em uma seção que é a área de masthead. Eu só vou realmente excluir esta seção de cabeçalho, e então nós podemos substituí-lo com nossa própria seção de cabeçalho. Vá para o modelo estático na versão HTML e, em seguida, vamos para o index.html. Em seguida, para substituir a seção de exclusão, vá para a nossa seção de cabeçalho. Vou copiar toda a ação da cabeça todo o caminho para baixo. Na verdade, vamos continuar indo para a seção de recursos, porque as imagens de fones de ouvido estão sempre no topo do site. Eu também vou incluir isso no cabeçalho. Eu só vou copiar essa seção, e depois voltar para a nossa pasta de temas. Na seção de cabeçalho que acabamos de excluir, basta colar este novo para isso. Vamos guardar isso. Agora, se passarmos para o navegador da web e, em seguida, atualizar. Podemos ver que temos uma mudança. A nova seção de cabeçalho, ele não parece muito outro mineable nós realmente temos alguns da aparência de conteúdo. Há o link para o nosso logotipo, nós temos os itens do menu. Temos uma barra de pesquisa, e também uma imagem de fones de ouvido. Se você abrir a versão HTML, então index.html, você pode ver que essas são as áreas que copiamos, a navegação, a pesquisa e também a imagem grande. Está instalado no minuto, mas o principal é que está tudo ligado e está tudo a funcionar. Agora vamos começar a trabalhar com a substituição da seção de fotos. Salve o header.PHP e, em seguida, se entrarmos na barra lateral e procurar o footer.PHP e role para baixo. Precisamos basicamente fazer a mesma coisa que não temos o cabeçalho. Exclua a seção de alimentos existente e, em seguida, vá para o nosso modelo na área de trabalho para a página de índice e role para a direita para a variável em e, em seguida, procure a seção de rodapé. Copie tudo de volta para a etiqueta de rodapé de abertura e, em seguida, de volta para o nosso tema. Eu me certifico que isso é colado na mesma área que acabamos de excluir. Salvar, e então agora quando atualizamos nosso site, novamente é uma mudança a área que acabamos de adicionar, os contratantes, a seção sobre nós, o endereço em também o texto da parte inferior está aparecendo. Você pode ver que são as mesmas informações que estão incluídas na parte inferior da nossa versão HTML. É assim que podemos adicionar o cabeçalho e a seção de rodapé. Só mais uma coisa antes de seguirmos em frente, eu só quero mostrar a página index.PHP. Você pode ver na parte superior da página há uma função chamada get header. Isso está puxando a seção de cabeçalho e, em seguida, role mais para baixo. Temos uma função “get photo”. Isto é puxar o conteúdo do rodapé. Ao invés de ter todas essas áreas colocadas em um arquivo, nós temos todas elas segregadas nas próprias seções, e então nós estamos apenas puxando-as para dentro com as várias funções. Ele também recebe barra lateral, que irá trabalhar com mais tarde também. Eu só vou deixar este vídeo lá, e nós vamos voltar no próximo vídeo e vamos começar a trabalhar com o CSS para tornar o site mais parecido com a nossa versão HTML. Eu também vou adicionar nas imagens, como as imagens de fones de ouvido para torná-los disponíveis para o novo tema WordPress. 63. Desenvolvimento do tema: adicionando o CSS e imagens: Bem-vindos de volta, pessoal. Agora temos o cabeçalho e a área de rodapé agora em nosso tema WordPress. Eles não se parecem muito com o site acabado. Isso porque precisamos trazer o CSS e também a pasta de imagens do nosso modelo de site. Vamos começar abrindo as pastas. Vou abrir duas para encontrar as janelas. Então este primeiro à esquerda é o modelo de site estático e eu vou abrir mais uma janela. Eu vou abrir o tema WordPress a partir do htdocs. Vamos descer e procurar MAMP, htdocs, pro-fones de ouvido e, em seguida, dentro do conteúdo, os temas. Ok, então a primeira coisa que eu quero fazer é trazer a pasta CSS para a nossa pasta tema. Basta copiar e, em seguida, colar isso em nosso tema, e, em seguida, enquanto estamos lá, nós também podemos fazer o mesmo para a pasta de imagens. Copie e cole ou arraste-os. Pode começar a trabalhar, incluir estes no nosso tema. Então, primeiro de tudo, eu vou para o Google, e então eu vou fazer uma pesquisa para WordPress, incluindo CSS, JavaScript. O que precisamos é o site do desenvolvedor WordPress, que está incluído em CSS e JavaScript. Vamos dar uma olhada nesta página. Esta página do site WordPress lhe dará todas as informações que você precisa para incluir CSS e JavaScript em seu tema. Se descermos um pouco mais. Estamos procurando a combinação de funções de enfileiramento. Isso nos dará uma demonstração de como podemos adicionar folhas de estilo e também como podemos adicionar arquivos JavaScript em uma única função. Normalmente precisa copiar esta seção ou digitar, assim como fizemos no último projeto, e depois adicioná-lo ao nosso arquivo de funções. Mas como estamos usando o tema inicial de sublinhado, isso já foi incluído no arquivo functions.php. Isso já está lá fotos. Você pode estar se perguntando por que precisamos enfileirar scripts e também enfileirar folhas de estilo, em vez de simplesmente adicioná-las na cabeça ou na seção de fotos, como fazemos com sites HTML normais. Bem, a razão pela qual fazemos isso, é porque WordPress lida com muitos temas e plug-ins diferentes. Ele garante que todos os scripts e estilos necessários são carregados como e quando necessário. Portanto, não há conflitos entre diferentes plugins, e basicamente carrega em um peso que tudo funciona em conjunto, vez de diferentes scripts lutando uns contra os outros. Vamos passar para o nosso arquivo function.php, que está apenas lá, e a função que precisamos está localizada na parte inferior. Isto é o que precisamos. Tomamos olhar para a função pro_headphones_wp_scripts. Esta é a função para enfileirar os scripts e também os estilos. Vamos dar uma olhada no que está acontecendo. Primeiro de tudo, temos uma função wp_enqueue_style. Isso está puxando nossa folha de estilo, que está localizada apenas lá. Este é o style.css. Isso é obtido chamando a função get_stylesheet_uri. É feito em enqueue_script. O script está na fila, está na pasta js, que é apenas sublinhado fornece um par de arquivos JavaScript para começar. Um para a navegação e, em seguida, um segundo arquivo chamado skip-link-focus-fix. Este é o arquivo que ajuda com acessibilidade para usuários de teclado. Vamos trabalhar com a nossa folha de estilo a seguir. Como eu mencionei antes, temos o arquivo style.css sendo incluído por padrão. Vamos pegar todo o nosso CSS personalizado, que incluímos em nossa pasta CSS, e depois ir para o nosso custom.css. Estes são todos os estilos personalizados, que foram fornecidos para o site dos fones de ouvido. Eu vou apenas selecionar tudo, e depois copiar, e depois ir para o style.css, e então eu vou adicionar estes diretamente na parte inferior. Eu só rolar para baixo e, em seguida, adicioná-los na parte inferior. Na verdade, vamos apenas adicionar um comentário. Nós apenas copiamos esta seção de comentários e colamos isso antes de outros estilos personalizados. Estilos personalizados e salve isso. Como acabamos de ver, já existe um monte de estilos, que tinham sido incluídos por padrão com o tema sublinhados. Muitos desses estilos são úteis para começar. Mas, claro, se houver algum estilo que tenha sido adicionado, que entre em conflito com o seu tema, sinta-se livre apenas para remover qualquer um deles. Bem, eu só vou guardar isso, e depois retomar o nosso tema. Agora, você pode ver que houve algumas mudanças. Agora temos a área de rodapé escuro e também um pouco de estilo para as outras áreas do site. Você pode ver que nossos estilos personalizados foram levados em efeito. Agora, os estilos personalizados foram copiados para o style.css. Nós podemos realmente simplesmente excluir esse estilo personalizado de nossa pasta CSS porque isso não é mais necessário. Percebemos que dentro da pasta CSS que acabamos de copiar para o nosso tema. Há mais de um arquivo CSS. Agora precisamos começar a trabalhar com a vinculação de todo o resto das folhas de estilo. As folhas de estilo para a estrutura de fundação, que incluímos com o site estático. Além disso, folhas de estilo para os ícones de fundação, que também usamos. Vamos adicionar esses links agora no functions.php. Nós adicionamos estes em duplicando a função wp_enqueue_style. Vou duplicar isto e separá-lo, para ficar mais claro. Eu vou trabalhar com a parte superior porque a inferior, assim como quando estamos trabalhando com HTML, precisa ser nossas folhas de estilo personalizadas para que eles precisam estar na ordem correta. O topo vai ser para a nossa fundação CSS. Vamos dar a este um nome exclusivo “CSS fundação”, e então precisamos adicionar o caminho do arquivo. Então o get_stylesheet_ uri se refere ao diretório de template principal, que tem o style.css, mas no nosso caso temos uma pasta CSS separada, então só precisamos concatenar ou add-on para o final, o resto do link. Então, o “ponto” para adicionar isso, em seguida, abra as cotações, “/css/foundation.css” e deve levar aqueles dentro da pasta CSS e, em seguida, vincular ao arquivo foundation.css. Em seguida, vamos duplicar isso mais duas vezes, e vamos apenas separá-los. Em seguida, precisamos adicionar o “app.css”. Então nós apenas mudamos o nome para app.css. Novamente está na pasta CSS, mas só precisamos mudar isso para “app”. Então o terceiro é para os ícones da fundação. Então, os que queremos adicionar é o “foundation-icons.css”. Então mudamos o nome para ser “ícones”, e a pasta CSS. Desta vez, há uma subpasta chamada “foundation-icons/foundation-icons.css” e salve isso. Na verdade, apenas uma coisa que precisamos fazer primeiro é [inaudível] o “stylesheet_uri”, que usamos como a folha de estilo principal, que precisa de alterações para “get template directory”, então “template_directory_uri”. Então copie isso e substitua todos os três. Cole aqueles dentro Este “get_template_directory_uri” nos leva às raízes principais do tema, e então nós apenas adicionamos a extensão. Isso nos leva ao arquivo correto. Vamos salvar e depois clicar em “Atualizar”. Agora isso parece um pouco melhor. Você pode ver que alguns dos estilos personalizados foram adicionados no. Esses são os links para os ícones na parte inferior. Além disso, se entrarmos nas ferramentas do desenvolvedor, clique com o botão direito do mouse e “Inspecionar” se você estiver usando o Chrome. Vamos abrir a seção “cabeça” no topo. Também podemos ver que nossas folhas de estilo que acabamos de adicionar devem estar listadas aqui em algum lugar. Há o nosso foundation.css, que é visto, bom. Temos o app.css, acabamos de adicionar, os ícones da fundação também e, finalmente, nosso arquivo style.css. Estão todos ligados. Nós também podemos fazer a mesma coisa que nós apenas fazendo para as folhas de estilo adicionando arquivos JavaScript extras, usando a função wp_enqueue_script. Tudo o que precisamos fazer é apenas fazer o mesmo que acima copiando a função mas alterando o nome do arquivo para vincular aos nossos arquivos JavaScript personalizados. Vamos guardar isso. A última coisa que eu quero fazer neste vídeo é incluir a dos fones de ouvido para que a imagem dos fones de ouvido que adicionamos no arquivo header.php. Esta é a imagem aqui. Precisamos adicionar a nossa imagem no peso WordPress. Dentro das citações para a fonte da imagem, precisamos adicionar uma função PHP para abrir as tags PHP, as tags de abertura e fechamento. Então lá dentro, precisamos adicionar “bloginfo”. Em seguida, abra os colchetes e, em seguida, as cotações. Para adicionar o caminho do arquivo, precisamos fazer isso de forma semelhante às folhas de estilo. Vamos usar o “template_directory”. Vou deixar isto um pouco mais largo. Adicione um ponto-e-vírgula após os colchetes. Então precisamos nos juntar no resto do caminho do arquivo. Depois do diretório de modelos, temos a pasta de imagens, então vamos adicionar isso no final, e depois adicionar uma barra antes da pasta da imagem. Espero que isso faça sense.We esteja usando uma função PHP chamada bloginfo, que é plugin para o diretório template e, em seguida, estamos adicionando no final a pasta da imagem e o resto do caminho do arquivo para nos levar para a imagem dos fones de ouvido, o que você acabou de fazer. Vamos salvar isso, depois ir para o site e atualizar. Há um pequeno problema lá, vamos ver o que é isso. O diretório de modelo de função, na verdade isso precisa estar na mesma linha, ele precisa ser contínuo. Vamos guardar isso. Vamos tentar isso. Lá vai você. Agora nossa seção de cabeça está mais parecida com nossa versão final. Também a área de rodapé na parte inferior também está parecendo o site acabado. Isso é todo o nosso CSS agora entrando em vigor. Ainda há muito trabalho a fazer, mas se você voltar no próximo vídeo, continuaremos com a página inicial criando o front-page.php. 64. Desenvolvimento do tema: convertendo a página inicial: Até agora em nossa versão WordPress do site, temos a área de rodapé e também a área de cabeçalho, praticamente concluída. Neste vídeo, vamos continuar trabalhando com a primeira página criando um novo modelo de página chamado page.php frente. Se formos para o nosso modelo de sublinhados, você pode ver que existem vários modelos de página diferentes, como o page.php. Se você der uma olhada em um tópico e ver que este é o modelo que exibe todas as páginas por padrão. Este será o modelo de página que é usado a menos que um modelo de página mais específico seja criado. Vamos dar um pouco mais de uma olhada nos modelos de página WordPress. Vá para o Google e apenas vai fazer uma pesquisa rápida para a hierarquia de modelos de codex. O que precisamos é do Manual do Desenvolvedor do Tema. Uma vez que estamos na seção hierarquia de modelos, podemos ver que isso explica todos os modelos de página diferentes. Ele nos mostra qual modelo controla qual página individual. Primeiro de tudo, temos a visão geral visual, qual você pode clicar e ver como os modelos são organizados. Se você rolar mais para baixo, podemos começar com a exibição da página inicial. Nós olhamos até agora e isso causou as postagens do blog WordPress por padrão exibidas na página inicial. Estes são controlados pelo modelo home.php. Se isso não existir, WordPress procura o index.php. Vamos continuar a usar a página de índice, o blog mais adiante nesta seção. Neste vídeo, vamos nos concentrar no modelo front-page.php. Este é o arquivo de modelo usado para renderizar os sites da página. Você pode ver abaixo a prioridade dos modelos de página. O principal é do page.php. Se isso não existir, WordPress procura o modelo da página inicial e, em seguida, se isso não existir, ele usa o page.php padrão, que vimos antes em um modelo. Então, por último, se nenhuma outra página puder ser encontrada, ela usará o modelo index.php. Claro, sinta-se livre para rolar mais para baixo e dar uma olhada em mais informações sobre as páginas individuais, postagens individuais e também como podemos criar diferentes modelos de página para diferentes categorias e tags. Mas eu vou começar a trabalhar com o page.php frente, vá para o tema WordPress. Eu vou criar um novo arquivo dentro deste vai ser chamado fronts-page.php. Para começar, vou copiar todo o conteúdo do page.php, selecionar tudo e copiar e colar isso em nossa página inicial. Não precisamos dos comentários na parte superior porque este é o modelo de página padrão para exibir a página inicial. Também vai ser incluindo o nosso próprio html do site estático exclui todo o html da medula. Você também pode excluir a barra lateral e salvá-la. Isso ocorre porque nossa versão finlandesa não tem uma barra lateral na primeira página. Agora precisamos ir para o Painel do WordPress e precisamos realmente criar uma nova página, ir para “Novo” e depois “Página”. Esta vai ser uma página onde podemos vincular nosso modelo de primeira página. Vamos chamar isto de casa. Tudo o que precisamos fazer é clicar em publicar, e depois ir para as configurações, até a guia de leitura. Precisamos mudar nossa primeira página para exibir uma página estática. O que precisamos exibir é em casa, e depois salve isso, então vamos visitar o site. Agora esta é a primeira página e tudo o que temos é a seção pesada na seção de fotos. Isso ocorre porque em nosso modelo de primeira página, nós só temos o cabeçalho e a função de rodapé. Agora podemos soltar o conteúdo da página principal do nosso site estático. Vá até os fones de ouvido Pro e depois o index.html. Nós já incluímos toda a seção de cabeçalho. Já incluímos a seção de recursos. Eu tenho um pouco mais para baixo quando ele copiar o conteúdo principal. Tudo, desde a seção com o ID do alcance, até a área do rodapé, copie isso. Em seguida, volte para a nossa versão do WordPress e, em seguida, cole isso logo abaixo do cabeçalho e, em seguida, salve isso, vamos dar uma olhada. Agora há nossa seção de conteúdo no meio, a única coisa que realmente falta são as imagens. Agora vamos corrigir os caminhos dos arquivos de imagem, assim como fazemos no header.php. Vou copiar toda a função php, pegar tudo entre a fonte da imagem entre as citações, copiar tudo isso, e depois voltar para a primeira página e então precisamos encontrar as imagens gratuitas. O primeiro está na pasta de imagens, e é chamado 1.jpg. Vamos apenas excluir isso e, em seguida, colar na função WordPress e, em seguida, as imagens pasta precisa ser alterado para você. Número 1, 1.jpg, então mude isso. Em seguida, faça o mesmo para a segunda imagem. Exclua a fonte da imagem com base na função WordPress. Em seguida, basta alterar o nome para ser número 2.jpg. Em seguida, role para baixo até a imagem número 3. Aconselhamento para quaisquer alterações no número de imagem 3.jpg, e salve isso. Vamos dar uma atualização. Isso parece muito bom, vamos dar uma olhadinha para cima e para baixo. Deve parecer exatamente o mesmo que a nossa versão finlandesa. Sim, tudo fica bem neles. Esperamos que correu bem para você e estamos feitos para terminar a página de, e em seguida vamos passar para converter no menu para ser integrado com o WordPress. 65. Desenvolvimento do tema: convertendo nosso menu: Bem-vinda de volta. Neste vídeo, vamos começar a trabalhar em conectar nosso menu ao WordPress. Atualmente, temos alguns links no topo, que você apenas itens básicos da lista HTML, e se clicarmos neles, eles realmente vinculariam em qualquer lugar, porque os links estão procurando a página blog.html, ou o about.html do nosso site estático. Então, para corrigir isso, precisamos substituir nossos itens de lista HTML com menus WordPress. Então, se formos para o Codex WordPress, e se procurarmos menus de navegação, e este é o link que precisamos, que possamos ver que a primeira coisa que precisamos fazer, é registrar o menu dentro dos temas functions.php arquivo. Se estivéssemos fazendo isso do zero, precisamos copiar essa função e, em seguida, colar manualmente. Mas porque estamos usando o tema inicial sublinhado, se formos para o function.php, e vamos fazer uma pesquisa por register_nav, e isso é o que precisamos, menus register_nav. Então o tema inicial que estamos usando já registrou um menu primário e podemos usar isso como nosso menu principal na seção de cabeçalho. Então de volta ao Códice. Se percorrermos um pouco mais para baixo, há uma seção chamada menus de exibição sobre o tema. Precisamos usar uma função PHP chamada wp_nav_menu. Então precisamos colar isso dentro do nosso tema, exatamente onde queremos que o menu apareça. Então eu vou copiar esta seção, e então nosso menu está no header.php, e nós encontramos os itens da lista para o blog, na página sobre nós, vamos apenas excluir esses dois itens da lista, e eu vou colar no que acabamos de copiar e esta função precisa ser cercada em tags LI. Então eu vou colocar um conjunto de tags de item de lista lá dentro, e então colar na função que acabamos de copiar, e então tudo o que precisamos fazer é excluir o menu de cabeçalho, e muda para ser primário, que é o mesmo que nossas funções arquivo, só aqui. Só vou me certificar de que você está salvo, e então vamos visitar os sites, e atualizar. Então, agora nosso menu está sendo substituído por uma versão WordPress. Temos a página inicial, e também a página de exemplo padrão. Vou para o painel, e depois para baixo para os menus. Para começar, quero fazer deste o menu principal. Então certifique-se de que está selecionado, e eu vou também, automaticamente, adicionar novas páginas ao menu, assim que as criarmos. Então vou guardar isso. Também podemos remover a página de exemplo e, de fato, nosso site finalizado não tem o link da página inicial. Então, vamos apenas remover esses dois links e, em seguida, salve isso. Ele é realmente removido todo o link do menu para que não precisamos, mas pelo menos sabemos que o menu está funcionando. Então, quando voltarmos no próximo vídeo vou criar a página do blog. A nova página do blog que adicionamos será automaticamente adicionada à navegação superior. Então esse é o nosso menu WordPress agora adicionado ao tema. Vemo-nos no próximo vídeo. 66. Desenvolvimento do tema: configurando a página de índice do blog: Bem-vindos de volta, rapazes. Neste vídeo, vamos configurar nossa página de índice para exibir nossas postagens mais recentes do blog. Vamos converter nosso blog em duas etapas. Este vídeo focará em trazer os contêineres de páginas, as classes CSS e o layout geral da página do nosso site estático, que é o blog.html. Se formos até a seção do blog e localizarmos a postagem do blog, basicamente vamos copiar tudo o que envolve essas postagens, como os contêineres e as linhas. No próximo vídeo estaremos nos concentrando nas postagens individuais do blog. Estou colocando-os dentro de um arquivo chamado Content.php. Vamos começar no painel do WordPress. Estamos criando uma nova página. Esta vai ser a nossa página do blog. Vamos chamar isso de Blog e depois publicar. Em seguida, precisamos definir esta página para exibir nossas postagens de blog. Então, vá para Configurações e, em seguida, Leitura. Em seguida, na Página Postagens, selecione o blog. Então guarde isso. Agora, quando visitamos o site, a página do blog foi adicionada automaticamente ao menu, o que é bom. Porque este é agora um menu WordPress, se clicarmos no link, devemos ser levados para a página que exibe as postagens do blog, que fazemos e há o nosso post do blog Olá mundo. Como já sabemos, o modelo de página, que controla o blog é o index.php. Vá até a pasta do tema e localize o index.php. Rolando para baixo, podemos ver que há um loop PHP while. Se você se lembrar do vídeo de loops while, um loop while sempre será executado enquanto uma condição for verdadeira. No caso do WordPress, enquanto é postagens de blog disponíveis. Podemos então exibir as postagens do blog na página da web, que está incluída no arquivo de conteúdo. Tudo o que vamos colocar entre este loop enquanto vamos correr para cada post do blog. Trabalharemos com o loop e postagens individuais do blog no próximo vídeo. Por enquanto, só queremos configurar a página para os mesmos contêineres e as mesmas divs que o site estático. Basicamente, vamos copiar tudo sobre as postagens do blog. Vá para o nosso site estático na área de trabalho e, em seguida, vá para o blog.html. Primeiro de tudo, vamos abrir isso no navegador e dar uma olhada. Logo abaixo da seção de cabeçalho, temos uma seção de chamada que é bem-vinda ao nosso blog. Vamos copiar isto para o local principal. Vá para o blog.html. Copie esta seção de texto explicativo e todo o caminho até a div com a classe de oito médios. Basicamente, todo o caminho até o post do blog. Copie isso de volta para o nosso tema. Porque isso está logo abaixo da seção de cabeçalho. O texto explicativo está logo abaixo da imagem de cabeçalho no site finalizado. Precisamos colar isso, logo abaixo da seção de cabeçalho. Cole e salve. Vou limpar isso um pouco. Em seguida, volte para o site estático no blog. Em seguida, role para baixo. As áreas que acabamos de copiar é a linha e a div com a classe de oito médias. Clique na linha da classe div e, em seguida, role para baixo para localizar a div de fechamento, que é apenas aqui. É a última tag div de fechamento logo após a barra lateral. Eu vou copiar isso e ir até o fim, incluindo a barra lateral. Copie isso. Certifique-se de que você tem a área completa, incluindo toda a barra lateral e a div de fechamento, logo acima da seção média livre. Então copie e volte para o tema, role para a direita até a parte inferior e cole isso logo após a seção primária e salve isso. Copiamos o conteúdo de antes e depois das postagens do blog para manter nossos contêineres de página e as classes CSS exatamente iguais ao nosso site estático. A única diferença é que substituímos as postagens do blog HTML por este loop WordPress, que é apenas aqui. Isso significa que o WordPress pode gerar as postagens do blog, que podemos criar dentro do painel. Salve essa página e, em seguida, volte para o site e, em seguida, clique no blog. A postagem do blog começará a trabalhar no próximo vídeo. Temos nossa barra lateral no lado direito, que é uma que acabamos de copiar. Também temos uma segunda barra lateral, que fica no fundo. Está a ser puxado da nossa página de índice. De baixo, ficávamos na barra lateral. Vamos arrumar as barras laterais em alguns vídeos, mas por enquanto vamos passar para configurar as postagens individuais do blog no arquivo content.php. 67. Desenvolvimento do tema: configurando as publicações do blog: Bem-vinda de volta. Agora vamos nos concentrar em nossas postagens individuais do blog e como fazê-los trabalhar dentro de um WordPress. Primeiro de tudo, vamos criar um par de novos posts para trabalhar. Adicionar uma nova postagem de blog, então novo post wall. Vamos pegar um pouco de Lorem Ipsum. Quero gerar cinco fotografias e copiar tudo isto. Em seguida, adicione isso em nosso post. Eu também vou pegar uma imagem em destaque. Agarro no nosso projeto, dentro da pasta de imagens. Eu vou ficar bem e realmente bateu um ou dois mais dentro que para uso posterior. Defina a imagem em destaque e publique. Se formos até Visitar Sites, confira o blog. Você notará que a postagem do blog que acabamos criar agora foi incluída na parte superior do nosso blog. No entanto, ele não se parece com o nosso blog dentro do site de acabamento, que é exatamente assim. Vamos mudar isso agora. Se voltarmos para o index.php e dentro da seção de loop, você pode ver que o loop está puxando um modelo chamado conteúdo. Este é o modelo que contém todas as informações sobre o post do blog. Vá para o seu diretório e, em seguida, procure uma pasta chamada partes de modelo. Em seguida, lá dentro, abra o content.php. Podemos ver que esta é a parte do modelo para exibir postagens. Este é um com o qual precisamos trabalhar para torná-lo mais parecido com o nosso site de acabamento. Vou limpar isso um pouco. Primeiro de tudo, vou remover o cabeçalho. Exclua a abertura na tag de fechamento. Vou rolar para baixo e excluir a seção de conteúdo de entrada completa e também a seção de rodapé de entrada. Devemos remover isso, para que possamos excluir todas essas seções e eu adicionaria nosso próprio conteúdo conforme necessário. Na verdade, podemos apenas remover esta entrada meta tipo dois. Apague isso. Vamos salvar isso e, em seguida, se atualizarmos, devemos descobrir que todo o conteúdo está sendo removido, exceto o título. Vamos corrigir isso agora indo para o nosso site estático a partir da área de trabalho, ir para o blog e, em seguida, ir para baixo para nossas postagens de blog. Se você localizar a div com a classe de post de blog e, em seguida, copiar esta seção completa. Eu voltar para o nosso tema WordPress e eu colar logo após a declaração if. Salve isso e atualize a página do blog. A primeira coisa que você vai notar é que a postagem do blog tem dois títulos de postagem de blog diferentes. Um que o WordPress gerou, e um da nossa seção de blog que acabamos de copiar. Vamos consertar isso agora. O WordPress gerado está aberto na parte superior. Há uma declaração if else, que está exibindo o título da postagem do blog. Primeiro de tudo, estamos verificando se a página é única e isso significa se a postagem do blog está sendo clicada e vinculada através da postagem completa e, se tiver, ele exibirá o título da página com um título de nível 1. Todas as páginas terão o título exibido como um nível 2. Para corresponder ao nosso site, não mudará o título de nível 1 para nível 2 e também fechará. Para todas as páginas, eu vou mudar isso para ser cabeçalho de nível 3 que corresponde ao nosso post do blog, que você pode ver que está aqui em baixo. Agora, WordPress está gerando o título do nosso blog. Podemos apagar os nossos. Remova isso disso e, em seguida, visite o blog e atualize. Agora, acabamos de receber o título do New Post 1. Como você pode ver, não temos a imagem exibida que definimos como a imagem em destaque. Ainda temos a imagem de espaço reservado, então vamos para content.php. Sobre o conteúdo, vamos deixar a imagem placehold e, em seguida, substituir isso por uma função WordPress. Abra o php e, em seguida, a função que precisamos, é chamada de miniatura post. Então theme_ postar _ miniatura e pressione Salvar. Então, agora, se atualizarmos o blog, teremos a imagem em destaque exibida. Agora vamos começar a trabalhar em funções WordPress adicionadas, exibir o autor, o número de comentários, e também a data em que o post foi criado. Entre as tags p, vamos apagar todos os textos. Vou substituir isso por uma função WordPress. Abra o php. Precisamos incluir o trecho. Esta é a versão mostrada do conteúdo completo, que só vai ser exibido abaixo da imagem. Agora, há a versão abreviada do texto Lorem Ipsum. Em seguida, vamos substituir o autor, então exclua o nome dos autores, abra as tags php, e este é simplesmente the_author (); e então atualize os dados. Agora, depois do autor, temos o proheadphones-admin, que é o criador desta postagem de blog, e depois o número de comentários. Então, novamente, abra as tags php, abrindo e fechando tags. Este é chamado pela função chamada número de comentários. comments_number (); Então salve isso, atualize. Lá vamos nós. Não há comentários sobre este post, mas o exemplo Hello World um, que está incluído no WordPress, tem um comentário. Então, por fim, vamos tornar a data dinâmica. Então podemos deixar o postado no texto, mas vamos apenas adicionar uma função php logo depois disso. Na verdade, vamos colocar em uma nova linha para que fique mais claro. Eu quero ecoar obter as datas. Mas desta vez dentro dos colchetes, vamos adicionar alguns parâmetros para garantir que os dados sejam exibidos no formato correto e, em seguida, dentro dos colchetes, eu vou adicionar um F maiúsculo, um j pequeno, e então uma vírgula e uma maiúscula Y e você vê Y quando atualizamos a página. Agora, vamos copiar as datas. A capital F esquerda foi para o mês, o pequeno j é uma maneira php de incluir o dia, e então uma vírgula e então um Y maiúsculo foi o ano no formato de quatro dígitos. Se você está interessado em diferentes formatos de data php, um rápido Google irá puxar todas as letras diferentes que você pode usar. Existem diferentes formatos de data. Agora espero que tudo esteja funcionando. Eu ia adicionar mais duas postagens no blog só para verificar se estão funcionando. Nova Post 2, vamos copiar sobre o texto de amostra, uma imagem em destaque, e depois publicar, e depois mais uma e então vamos visitar o blog. Esperemos que quando rolamos para baixo, há nosso novo post 3, nosso novo post 2, e o original que criamos. Isso acabou de terminar agora para a seção de isenção de blog, você pode fazer muito mais, como, adicionar funções WordPress para exibir as categorias ou as tags associadas a cada post. Tudo o que é preciso é uma pesquisa rápida no Google ou confira os codecs WordPress para descobrir como fazê-lo. Agora, vamos passar para o próximo vídeo. Vamos dar uma olhada nessa barra lateral. 68. Desenvolvimento do tema: barra lateral: Bem-vindos de volta, rapazes. Neste vídeo vamos nos concentrar na barra lateral. Atualmente, se passarmos para a nossa seção de blog, exibido na página há duas barras laterais. Primeiro de tudo é uma barra lateral no lado direito, que está sendo chamada de nossa página de índice. É a seção que retirámos do nosso local estático. O segundo, está sendo chamado a partir da função get barra lateral. Isso está sendo exibido na parte inferior da página, que inclui as publicações recentes, comentários, arquivos, categorias. Se passarmos para um arquivo chamado sidebar.php, podemos ver que a barra lateral está sendo gerado a partir de uma barra lateral chamada sidebar-1. Podemos encontrar o conteúdo da barra lateral, indo para a seção widgets do painel. Vá para o painel e selecione “Widgets” Esta é a seção da barra lateral, que está na parte inferior da nossa página do blog. Nossa barra lateral do site acabado inclui apenas as categorias e o escritório. Vamos começar a trabalhar excluindo todos os widgets, exceto as categorias. Abra e, em seguida, clique em “Excluir” postagens recentes podem ir, comentários e os metadados também podem ir. Ficamos com os arquivos e as categorias. Eu vou para a página de índice, você pode ver que as categorias é a primeira e depois os arquivos. Vamos reorganizar isso para ser o mesmo. Agora arrumamos a barra lateral. Se passarmos para a página de índice e, em seguida, usar a função get barra lateral. Vou clicar nisto e depois colocá-lo dentro do contentor da barra lateral. Coloque-o logo abaixo da div com a classe de pegajoso. Abra as tags php, cole na barra lateral get e, em seguida, feche. Em seguida, salve isso e atualize nosso blog. Role para baixo. Temos as categorias e os arquivos. A primeira seção é dos widgets que acabamos de adicionar, e então a segunda seção é HTML simples, que é apenas a partir desta seção aqui. Vou deletar esta seção em um momento. Mas primeiro, eu quero ter certeza de que o estilo para os widgets corresponde ao nosso site acabado. Para fazer isso, eu vou passar para o nosso arquivo functions.php, e então eu vou fazer uma pesquisa para a barra lateral de sublinhado de registro. No meu caso, está na linha 88. Esta é a barra lateral que queremos, que é a barra lateral 1, e esta é a que estamos trabalhando atualmente. Há também áreas onde podemos adicionar HTML, como divs, seções, IDs e classes. Podemos colocar isso antes ou depois dos widgets ou até mesmo o título. Nossos títulos de widget, como arquivos, categorias acima de títulos de nível 4. Vamos mudar o nível 2 para quatro. Isto é antes e depois do título. Guarde isso e, em seguida, atualize, e isso parece mais com ele agora. No nosso caso, tudo o que precisávamos para mudar era o título de nível 4 para o título. Se você tem barra lateral mais complexa, você pode precisar ir para o widget antes e depois, e adicionar divs diferentes ou classes diferentes para torná-lo muito o site original. Agora há muito [inaudível] que podemos voltar para a página de índice e excluir o conteúdo HTML estático. Exclua a primeira seção e também a seção de arquivamento. Vamos amarrar isso um pouco, lá vamos nós. Isso deve remover os segundos conjuntos e atualizar. Ótimo, agora WordPress está puxando as categorias e também os arquivos. Agora temos a capacidade de clicar nos itens individuais e ser levados para uma página. Por exemplo, este filtra todas as postagens do blog para um determinado mês. O mesmo se você tiver mais de uma categoria, teremos uma lista de categorias diferentes. Poderíamos selecionar uma dessas categorias, WordPress irá aplicar filtros. Essa é a nossa barra lateral agora terminada. Passarei agora para o próximo vídeo. 69. Desenvolvimento do tema: página com publicação única: Olá a todos. Neste vídeo vamos dar uma olhada na página de postagem única. Quando nós a minha visão em nosso blog, podemos clicar no título das postagens individuais e somos levados para uma página que exibe apenas este post de blog e nada mais e esta visão é controlada por um arquivo chamado o único ponto PHP. Ainda não fizemos nenhum trabalho dentro do arquivo PHP de ponto único. Se tornarmos o site um pouco menor e esticarmos o conteúdo, você pode ver que o cabeçalho está centrado e também o rodapé. Mas o conteúdo real do PHP de ponto único não está alinhado dentro de um contêiner. Vamos consertar isso. Vamos passar para o PHP de ponto único e adicionar os contêineres. Podemos pegar estes a partir do nosso índice de ponto PHP. Corte a div com a classe de linha, e também os oitos médios, que são os recipientes. Copie isso e cole-os logo abaixo do cabeçalho get e, em seguida, se você rolar para baixo até a parte inferior da página, logo acima da tag PHP open-end, podemos fechar essas duas divs assim. Vamos salvar isso e, em seguida, atualizar e agora, quando fazemos a página de largura total, podemos ver que as postagens do blog estão todos centrados no meio da página. Agora nosso conteúdo parece muito melhor. Agora vamos adicionar a barra lateral para estar no lado direito. Vamos voltar para a página de índice e vamos copiar a seção da barra lateral de baixo. Copie a div com a classe ou média três. Em seguida, volte para o PHP de ponto único, porque queremos que a barra lateral ainda esteja dentro da linha. Coloque isso entre as duas divs ou as duas tags div de fechamento que acabamos de adicionar, certificando-se de que está logo acima da div de fechamento da linha. Guarde isso e, em seguida, atualize e devemos obter a barra lateral, o que é ótimo. Se você olhar para a postagem do blog, você pode ver que ainda temos a versão abreviada ou o trecho, em vez das cinco fotografias de Lorem Ipsum, que você colocou no bloco. Quero que esta página exiba o conteúdo completo em vez de apenas a versão abreviada. Assim como na página de índice, o PHP de ponto único puxa o conteúdo da postagem do blog de um arquivo chamado content dot PHP. Vamos ver nosso arquivo agora. Já dissemos a este modelo para exibir apenas uma versão abreviada com a função de trecho. Como podemos mudar isso para ser o conteúdo completo ao mostrar a postagem completa? Bem, podemos fazer isso usando instruções condicionais, como vimos na seção PHP. Usando uma instrução if else, podemos mostrar a versão abreviada ou completa dependendo da página que visualizamos. Vamos ver como podemos fazer isso no WordPress. Vou ao Google e, em seguida, fazer uma pesquisa rápida por tags condicionais WordPress. Procure o códice sob tags condicionais. Ok. As tags condicionais podem ser usadas em seus arquivos de modelo para alterar o conteúdo exibido e como esse conteúdo é exibido em uma página específica. É exatamente o que queremos. Vamos dar uma olhada mais abaixo. Podemos exibir conteúdo dependendo se a página é inicial, se a página é a primeira página ou, por exemplo, se é admin, se estamos em uma única página, que é exatamente o que queremos. Se o modelo é uma única página, queremos exibir o conteúdo completo. Se o modelo for home, queremos apenas exibir o trecho, e a casa é onde a página do blog está sendo exibida. Vamos voltar para o conteúdo dot PHP. Ok, então vamos começar criando nossas declarações if-else e fazendo um pouco de espaço. Queremos exibir o trecho se a página for home, o que significa que a página é o blog. Vamos fazer isso abrindo as tags PHP e, em seguida, começar uma instrução if. Então, se, em seguida, vamos cortar esta função home e colá-lo entre os colchetes. Se a página é a página inicial, e abrir a chave, em seguida, exibir o trecho e, em seguida, precisamos fechar calibragens fora. Abra o PHP. Feche a chave e feche o PHP. Agora, só devemos pegar o trecho se for o blog. Se formos até o site e atualizarmos, perdemos o trecho, então eles só devem ser exibidos quando formos ao blog, que é apenas lá. Vamos agora criar uma seção l, para exibir o conteúdo completo se estiver usando o único modelo. Colocamos no PHP, criamos a instrução else na chave de abertura e na verdade, podemos simplesmente copiar esta linha e colá-la. Mas em vez do trecho, podemos usar o conteúdo e, em seguida, fechar a declaração else com a chave de fechamento, lá vamos nós. Vamos dar uma olhada no site e ver isso em ação. Espero que tudo isso funcione. Refresque. Na seção do blog, então vamos obter a versão abreviada e então vamos clicar no título da postagem e lá vamos nós, então há o conteúdo completo dentro do único arquivo, que é os cinco parágrafos, de Lorem Ipsum. Começa a trabalhar como queríamos. Ok, então é assim que podemos trabalhar com o modelo de página única, e também como podemos trabalhar com declarações condicionais e tags condicionais no WordPress. 70. Desenvolvimento do tema: convertendo a página “Sobre”: Bem-vindos, rapazes. Neste vídeo, vamos criar a página sobre nós. Esta página tem muitas semelhanças com a página inicial, como a seção de navegação na parte superior, a imagem principal, a seção que tem as diferentes faixas de fones de ouvido disponíveis, e a área de rodapé na parte inferior. Mas com apenas um pouco de conteúdo adicionado no meio, como o título sobre nós e também os parágrafos de texto no meio. Vamos começar a trabalhar indo para o nosso tema. Vamos criar um novo modelo de página. Isso vai ser chamado page-about.php. Se você se lembra de vídeos anteriores, olhamos para o modelo chamado page.php, que é o modelo de fallback genérico para exibir todas as páginas. Mas vamos criar um modelo mais específico criando um novo arquivo chamado page-about.php. Por causa das semelhanças com a página inicial, vou começar copiando todo o conteúdo da primeira página. Selecione todos e copie e, em seguida, cole isso em nossa página sobre. Precisamos manter a área do rodapé, e então eu vou rolar para o topo da página e adicionar um comentário. Logo abaixo da tag php aberta, abra um comentário php e, em seguida, adicione um nome de modelo. Nome do modelo: Isto é sobre nós, ea estrela e, em seguida, fechando barra. Esse nome será o nome do modelo, que você pode selecionar ao criar a página sobre nós no painel. Vamos em frente e fazer isso agora. Vá até o painel e, em seguida, vá para uma nova página. Vou chamar esta página Sobre e, em seguida, o modelo. Vou selecionar o modelo sobre nós que acabamos de criar e, em seguida, clicar em “Publicar”. Então vamos para visitar o site e nosso link foi adicionado automaticamente ao menu. Clique na página “sobre nós”. Atualmente, temos apenas o mesmo layout da página inicial. Em seguida, precisamos copiar sobre o cabeçalho sobre nós, e também os parágrafos de texto do sinal estático. Vá até os modelos estáticos e, em seguida, vá para about.html, role para baixo. Precisamos copiar a seção da coluna, que é este dev, e isso contém o cabeçalho sobre nós, copiar isso, e, em seguida, rolando para baixo, copiar a linha que contém todo o texto e também os dois desenvolvedores de fechamento logo após ele. Copie isso e volte para o nosso tema na página about.php, e então esta seção vai logo abaixo do cabeçalho. Cole abaixo da função de cabeçalho get e, em seguida, salve. Vamos checar isso pressionando “Atualizar”. É isso. Sobre a seção de cabeçalho, temos o cabeçalho sobre nós, temos todos os parágrafos de texto, a seção com os vários modelos, e, em seguida, a área de rodapé na parte inferior. Essa é a página sobre nós tudo terminado, e se você voltar no próximo vídeo, vamos adicionar alguns toques finais aos nossos sites, bem como fazer a caixa de pesquisa funcionar dentro do WordPress. 71. Desenvolvimento do tema: caixa de pesquisa e toque finais: Neste vídeo, vamos adicionar alguns toques finais ao nosso site, bem como fazer com que a caixa de pesquisa na seção de cabeçalho funcione corretamente. Então, atualmente, se escrevermos algo dentro da caixa de pesquisa, nada funciona. Isto é porque é apenas HTML simples. Então, neste vídeo, vamos substituir esta pesquisa por uma função WordPress. Então vamos para o Google e procurar o WordPress, a consulta de pesquisa, e vamos para o Codex. Vamos rolar para baixo e dar uma olhada nos exemplos. Portanto, este exemplo mostra a consulta de pesquisa em uma caixa de pesquisa. Então eu vou copiar o exemplo e, em seguida, passar para o cabeçalho e, em seguida, uma vez no header.php, precisamos rolar para baixo e encontrar a seção com a caixa de pesquisa em. Procure a div com a classe de barra superior direita e, em seguida, dentro da lista desordenada, colando a função da pesquisa WordPress, vamos nos livrar do buffer lateral agora para dar-lhe mais espaço. Então vamos para o site e depois atualizar. Então agora temos duas caixas de busca. Um é o WordPress gerado um, e nós temos nossa própria caixa de pesquisa. Agora, precisamos ter certeza de que a versão gerada pelo WordPress é estilizada da mesma forma que a nossa. Então vamos fazer isso agora. Então a primeira coisa que você percebe nas entradas de abertura para a pesquisa é o tipo de entrada é texto, enquanto o nosso é pesquisa. Então, as mudanças também combinam. Também temos um valor de espaço reservado, e este é o texto que aparece dentro da caixa. Então, isso também está lá dentro. O WordPress Então mips um é uma entrada, enquanto o nosso é um botão. Então vamos mudar entradas para ser botão como vamos adicionar esta tag fechar e botão. Vamos copiar o texto de pesquisa e colar isso aí. Nós também temos o tipo de botão em vez de enviar, então vamos adicionar isso lá dentro também. Nós também temos a classe no botão, então vamos copiar isso e, em seguida, colar isso também e salvar. Vamos ver como está parecendo até agora. Está olhando para muito mais como a versão final. Então, vamos agora mover o botão enviar para estar no lado direito. Então nossa versão tem as entradas e o botão dentro das tags de itens de lista, então vamos adicioná-los também. Então a tag de abertura e uma tag de fechamento, e fazer exatamente o mesmo para o botão, copie isso e cole lá. Precisávamos disso agora, então vamos remover nossos itens de lista do nosso site estático, e então precisamos adicionar a lista não ordenada com a classe de menu, que estava originalmente em torno dos dois itens da lista. Então coloque isso, e cole-o acima do primeiro item da lista. Na verdade, podemos apenas substituir o div lá, e o div de fechamento que é agora a lista desordenada de fechamento. Então vamos limpar tudo isso. Certifique-se de que você tem o formulário, abertura e a tag de fechamento e, em seguida, aninhe-o dentro da lista não ordenada com a classe de menu e a tag de fechamento, o primeiro item de lista e, em seguida, o segundo item da lista e, em seguida, salve isso. Agora, quando atualizarmos, devemos colocar a caixa de pesquisa na linha, e agora ela parece exatamente como fez na versão estática. Agora vamos fazer uma pesquisa e ver se funciona. Procure por olá, e agora vamos descer. Diz os resultados da pesquisa para olá, e como nosso post no blog HelloWorld. Vamos apenas procurar por mais, postar, e então vamos, ele diz que o nosso novo post 3, novo post 2, número 1, e, claro, o exemplo HelloWorld tem palavra post lá. Agora, quando está nos contêineres, como fizemos na única página do blog, porque quando esticamos a página antes da largura, os resultados não são centralizados no meio da página. Então, quando está nos contêineres para a página search.php, então vamos para o index.php, e então vamos copiar a linha no meio uma div. Então, copie essas duas linhas e vá para o search.php, que é o modelo de página para exibir os resultados da pesquisa. Então exatamente como fizemos na única página, cole-o apenas explodir o cabeçalho, e depois feche as duas divs logo após a seção primária, a primeira e depois a segunda. Salve isso e atualize. Agora o conteúdo está sendo movido para dentro do contêiner. Novamente, assim como fizemos com o single.php, vamos adicionar a barra lateral ao lado direito, voltar para a página de índice, e depois ir para baixo, e depois copiar a barra lateral, que é um div com a classe de médio 3, em seguida, para a página de pesquisa e colar estes entre os dois divs que acabamos de adicionar. Como isso tem a função get barra lateral, podemos excluir a barra lateral get da parte inferior da página, e então vamos dar uma olhada nos resultados da pesquisa, e isso é tudo feito. Agora há uma barra lateral do lado direito. Vou postar blog ou vou procurar resultados todos nos contêineres corretos. Em seguida, eu vou passar para vincular o logotipo para a página inicial. Então, se clicarmos nos minutos, somos levados para uma página 404, que é uma página não encontrada. Então agora precisamos adicionar uma função WordPress para vincular o logotipo à nossa página inicial. Isso é simplesmente feito no header.php. Então, se procurar o item da lista com classe de texto do menu. Fones de ouvido Pro é um nome no canto superior esquerdo, então em vez de vincular o index.html, que é uma página que não temos mais. Vamos remover isso e, em seguida, abrir as tags php, php tag fechamento. Ele é colocado em sua própria linha por isso é mais legível, php, e então nós vamos eco, e a função que precisamos é escape URL, que é esc_url, e então os colchetes, e então dentro do colchete é a função que need, é home_url. Isto irá criar um link para o URL inicial do site e um ponto-e-vírgula. Vamos verificar isso, então atualize. Agora, se clicarmos no logotipo ou título do site, isso não parece funcionar, então vamos ver o que está errado. Vamos começar com o cibernético para conseguir mais espaço. Isso é apenas um erro de digitação, então o ponto de interrogação lá dentro, vamos salvar isso, e depois atualizar. Então, se clicarmos no logotipo ou no título no canto, agora somos levados de volta à página inicial. Vou adicionar mais uma função PHP. Em vez de ter o título de fones de ouvido pro, queremos que o WordPress construa políticas e dinamicamente. Então vamos colocar isso em uma linha separada. Abra uma função PHP, e a função que queremos é echo get_bloginfo, e a informação do blog que queremos é o nome dos blogs, e não se esqueça do ponto-e-vírgula, e então salve isso e atualize a página. Então, em vez de um título codificado, isso pega o nome do site que entramos, que podemos ver dentro do personalizador e, em seguida, até a identidade do site. Então este é o título que foi puxado para dentro. Então vamos apenas para excluir isso e salvar. Isso mudará o título, então vamos apenas mudá-lo de volta, e depois salvar isso. A última coisa que queremos olhar para mudar é as cores do link, então no minuto as cores do link foram todas alteradas para roxo, que não se encaixa com o resto do tema. Então vamos para as ferramentas de desenvolvimento e encontrar o seletor. Então vá para Inspeccionar. Em seguida, vamos selecionar o item que queremos alterar. Vamos arrastar isto para cima. Assim, podemos ver nas ferramentas de desenvolvimento que os links, que é um visitado, tem a cor de roxo. Vamos entrar em nossas folhas de estilo personalizadas e verificar se isso é alterado. Então style.css, e precisamos ir direto para a própria bomba. Então, em nosso estilo personalizado, nós já temos as tags a e também os estados a pairar. Então, vamos adicionar um visitado logo acima do estado de foco. Vamos apenas copiar a cor dos links do romance e, em seguida, atualizar. Então eu me livro da cor roxa. Vamos ver o blog também. Bom. Então, se todas as ligações roxas foram removidas. Ótima. Então esse é o fim da seção, e é assim que podemos converter um site normal para ser um tema WordPress. Então eu espero que você tenha gostado desta seção. Agora, vamos seguir em frente com o resto do curso. 72. Multisite do WordPress: introdução: Bem-vindos a esta nova secção. Esta seção é tudo sobre como apresentá-lo à rede WordPress ou recurso Multisite. Isso é realmente útil se você quiser criar mais de um site ou permitir que outras pessoas criem um site como parte de sua rede. Todos esses sites são controlados pela mesma instalação do WordPress. Assim, você poderia administrar todos os sites a partir do mesmo painel. Uma ou duas coisas só para que saibam antes de continuarmos. A primeira coisa é usar um recurso Multisite, você precisa de alguma forma de postagem na web ao vivo, porque o recurso WordPress Multisite não joga bem com o host local. Há uma solução alternativa disponível, e eu quero colocar um link na tela para um guia, se você quiser tentar e dar uma chance. No entanto, se você puder fazer isso, eu recomendaria o uso de um servidor web ao vivo. A próxima coisa é, é claro, ao usar um servidor web ao vivo, você também precisará de seu próprio nome de domínio. Podemos pegar um nome de domínio e também algum host em muito barato, se você quiser apenas usá-lo para a seção. No entanto, não se preocupe se você habilitar para concluir esta seção porque você não tem a hospedagem. Você sempre poderá voltar a esta seção no futuro se quiser configurar um Multisite em um servidor ativo. Para o resto desta seção, eu vou estar usando um provedor de hospedagem chamado Bluehost. Isso está disponível em bluehost.com. Você pode usar qualquer provedor de hospedagem web que você preferir. Não sou afiliado à Bluehost de forma alguma. Eu só acho que eles são realmente bons para WordPress e eles são até mesmo recomendados no WordPress.org. Então é isso. Se você tem alguma hospedagem na web, vamos em frente e continuar com o resto da seção. Novamente, não se preocupe se você não pode concluir esta seção porque você não precisa hospedar, esta seção estará sempre disponível para o futuro. Vamos agora passar para o próximo vídeo, vamos dar uma olhada no que é um Multisite, alguns bons casos de uso e exemplos, e também alguns casos de quando evitar o uso do Multisite. Vamos seguir em frente e dar uma olhada nisso agora. 73. Multisite do WordPress: o que é um multisite?: Uma característica realmente grande do WordPress, que está disponível a partir da versão 3.0, é a capacidade de criar uma rede de sites, aproveitando o recurso multisite. Ao longo desta seção, vamos criar uma rede de sites, que é basicamente mais de um site, que todos compartilham a mesma instalação WordPress. A rede não parece muito diferente do que temos feito até agora. Mas uma vez que habilitamos vários sites, temos várias opções diferentes disponíveis para nós, como adicionar novos sites que queremos controlar dentro da rede, permitindo o acesso a esses sites através da atribuição de administradores, e também decidir quais plugins e quais temas gostaríamos de disponibilizar para cada site. Estou atualmente no Codex, na seção Criar uma Rede. Como você pode ver, uma rede multisite pode ser muito semelhante à sua versão do WordPress.com. WordPress.com é um site que vamos dar uma olhada em apenas um momento, que permite que as pessoas criem seus próprios sites ou seu próprio blog. Efetivamente, todos os sites que você pode criar no WordPress.com são todas partes de uma rede. Se você gostaria de ler mais sobre a criação de uma rede, basta procurar Criar uma rede dentro do Codex e você será direcionado para esta página. No entanto, todas as etapas que estão incluídas nesses sites, vamos passar à medida que avançamos nesta seção, então temos uma sensação prática de exatamente como fazer isso. Em seguida, eu só vou para o Blog de Temas Elegantes. Dentro desse blog, há um artigo que é chamado 15 Amazing WordPress Multissite Exemplos in the Wild. Basta fazer uma pesquisa rápida no Google, tenho certeza que você será capaz de encontrá-lo. Este site passa por algumas das melhores instalações multissite, que você não poderia encontrar na web. Como esperado, o primeiro que vem à mente é WordPress.com. Esta é uma plataforma multisite que tem sido em torno de algum tempo. Na verdade, tem milhares de sites que são ativados como partes da rede. WordPress.com permite que qualquer pessoa se junte a esta rede e crie seu próprio site ou seu próprio blog. É muito simples e fácil de usar. Se você acabou de ir para WordPress.com, é muito simples começar com estes vários planos diferentes. Para obter um site WordPress habilitado, é muito simples como selecionar seu domínio, seu tema, o preço e o plano que você gostaria de ir com, e você pode começar a partir daí. Voltar para o site Temas Elegantes, vou dar uma olhada em um ou dois mais. Um de um grande site usando o multisite WordPress é o site da BBC America. Este site em particular tem cada show em seu próprio site. Cada um desses sites usa um tema filho e tudo pode ser administrado separadamente, se necessário, ou podemos atribuir vários administradores a um grupo de sites. Rolando para baixo, também temos as páginas do blog do The New York Times. Ele diz que tem mais de 60 blogs, que significa mais de 60 sites separados, todos fazendo parte da mesma rede WordPress. Como você pode ver, há algumas empresas bastante grandes que usam o recurso multisite WordPress. Mas, assim como com qualquer recurso ou qualquer pedaço de software, há sempre alguns prós e contras e multi-site não faz diferença. Haverá sempre ocasiões em que é bom usar e quando não é certo para você. Vamos dar uma olhada em alguns usos multissite e também algumas das desvantagens. Você pode criar sua própria rede de blogs ou sites para uso pessoal ou comercial. Se você tem seu próprio blog pessoal e você pode ter vários nichos diferentes e você quer manter esses interesses diferentes separados, você pode fazer isso usando uma rede. Você também pode ter uma empresa e você pode querer que alguns desses departamentos ou seções de negócios tenham seu próprio site ou seu próprio administrador, e um multisite é ideal para isso. Ok, então o site da sua empresa requer seções diferentes gerenciadas por equipes diferentes. Este é um exemplo que é semelhante ao exemplo da BBC America que acabamos de olhar, onde diferentes seções, como um show diferente, podem ser gerenciadas por equipes diferentes ou podem exigir um estilo diferente, ou um tema diferente, ou um conjunto diferente de plugins. Outro bom caso multisite pode ser um negócio com várias filiais ou locais diferentes, que você deseja gerenciar de forma independente, ou você também pode querer permitir que qualquer pessoa crie seu próprio site, seja um site gratuito ou uma assinatura paga. Este caso é semelhante ao WordPress.com que acabamos de olhar antes, onde podemos convidar os usuários finais para se juntarem à nossa rede e criar seu próprio site. Claro, há muitos mais que eu tenho certeza que você pode pensar, mas o último que eu incluí neste exemplo é para hospedar sites de clientes. Depois de criar um site para um cliente, você pode querer incluir o site dele como parte de sua própria rede. Depois de construí-lo, você pode continuar a cuidar do site ou administrá-lo, bem como todos os outros sites que fazem parte de sua empresa ou agência. Todos os outros apenas tirar um pouco do controle de alguns dos usuários finais. Ele também fornece muitos benefícios, como você pode atualizar todos os seus sites ao mesmo tempo, que inclui o núcleo WordPress ou quaisquer temas ou plugins que você instalou, tais algumas boas razões para usar um multisite WordPress. Agora, vamos dar uma olhada em alguns contras ou algumas razões quando não usar um multisite. O primeiro é bastante óbvio. Se você só precisa de um site e você não tem quaisquer planos para qualquer mais ou para qualquer expansão, obviamente uma instalação padrão WordPress é mais do que bom para isso. Se você tem um site e você quer ser capaz de gerenciar seus próprios temas ou gerenciar seus próprios plugins, então um site autônomo é definitivamente o caminho a seguir. Ou se o seu site tem uma boa razão para exigir seu próprio banco de dados, seja por segurança ou qualquer outro motivo, então um multisite não é necessariamente uma boa escolha. Se o seu site é hackeado ou se o seu site está inativo por qualquer motivo particular, isso significa que todos os sites individuais na rede está inativo porque todos eles compartilham a mesma instalação WordPress. Alguns plugins podem não funcionar bem em uma rede multissite, isso é algo para ficar de olho. Antes de passar pelas razões para adicionar todos os seus sites de clientes no multisite, você também pode achar que um determinado cliente pode ter sua própria hospedagem ou pode querer ter mais controle sobre o site. A última razão pela qual eu listei é que você pode não ter acesso ou as permissões necessárias para editar os arquivos que estão no seu servidor web, e isso causará um problema ao ativar o multisite. Vamos dar uma olhada exatamente em quais arquivos esses estão nos próximos vídeos. Agora, vamos passar para entrar em nossa conta de hospedagem e ativar o multisite WordPress. 74. Multisite do WordPress: ativando uma rede do WordPress: Bem-vindos de volta, rapazes. Neste vídeo, vamos dar uma olhada em como podemos ativar o nosso multisite WordPress. Como mencionei no início da seção, vou estar usando uma conta de hospedagem ao vivo da Bluehost. Claro, você pode usar qualquer host que você preferir. Mas eu quero ver esses vídeos com uma conta Bluehost. Se você estiver usando um provedor de hospedagem diferente, talvez seja necessário dar um ou dois passos diferentes apenas para seguir adiante. Mas muitos provedores de hospedagem diferentes têm uma instalação WordPress de um clique. Com sorte, você não deve ter muito problema seguindo junto. No momento, estou logado na conta. Dentro do painel de administração Bluehost, há um conveniente aplicativo de ferramentas WordPress, que clicamos na parte superior. Então, uma vez que você está dentro das ferramentas WordPress, precisamos clicar no “New Install”, e você deve ser dada uma escolha para selecionar um nome de domínio. Tenho um nome de administrador de domínio disponível chamado reactacademycause.com. Eu quero instalar o WordPress neste domínio. O caminho que você pode deixar como em branco, a menos que você deseja adicionar uma subpasta para instalar o WordPress dentro. Mas vou deixá-la no domínio principal. O título do site, e todo o resto das opções são bastante auto-explicativas. O título do site, eu deveria chamar meu Multisite. Para fins da demonstração, eu quero adicionar um simples nome de usuário e senha de multisite e multisite para a senha também. É claro que os sites ao vivo precisarão de uma senha mais forte. Em seguida, adicione seu e-mail e, em seguida, precisamos clicar em “Instalar WordPress”. Isso só leva alguns momentos para instalar, e esta é apenas uma instalação padrão do WordPress, como vamos estar olhando para fora para o resto do curso. Não é diferente dos três primeiros projetos que criamos, mas vamos convertê-lo em um multisite muito em breve. Mas, por enquanto, clique em “Atualizar”. Deve ser isso, esse é o nosso WordPress instalado em nosso próprio domínio. Para testar, eu só vou passar para o URL, e então precisamos ir para o login. Eu seleciono multisite, multisite também e, em seguida, login. Isso significa que estamos todos prontos para ir. Temos o painel ou o back-end do WordPress, com o qual todos devem estar familiarizados agora. Eu só vou clicar em, eu não preciso de nenhuma ajuda só por agora, só para me livrar dessa página. Vou procurar no painel do WordPress. Se clicar no ícone da página inicial no canto superior esquerdo, irá então levar para a nossa página inicial. É só uma página em branco por enquanto. Agora eu tenho uma instalação bem sucedida do WordPress. Agora, para transformar isso em um multisite, precisamos encontrar alguns dos arquivos para editar. Se voltarmos para o nosso provedor de hospedagem, e se passarmos para a guia de hospedagem, e então eu vou entrar no cPanel, que está logo abaixo. Seu provedor de hospedagem novamente, pode ser um pouco diferente, então nós apenas encontrar uma maneira de entrar no cPanel. Então eu vou rolar para baixo para a seção final, que é apenas aqui. Então eu clico no “Gerenciador de arquivos”, então todos os arquivos para todos os WordPress estão em public_html. Devemos ver alguns arquivos e pastas que são familiares de nossas seções localhost. A primeira coisa que precisamos fazer é encontrar o arquivo wp-config. Se deslocarmos para baixo e encontrar wp.config.php. Vou destacar este arquivo e depois ir para o topo onde há um editor de código. Clique nele e selecione editar. Agora vamos abrir o conteúdo do arquivo de configuração. O primeiro passo que precisamos fazer é rolar para baixo, e então precisamos encontrar a linha que diz, isso é tudo, parar de editar. Logo acima desta linha, precisamos digitar uma linha de código. Comece com definir dentro de um conjunto de colchetes e as cotações. Vou digitar WP_ALLOW_MULTISITE e, em seguida, uma vírgula, e então vamos definir isso como verdadeiro com ponto-e-vírgula no final, e então clique no botão “Salvar” na parte superior para salvar o arquivo e, em seguida, basta fechar. Então, agora, o último, vamos para o nosso site, e então clique em “Atualizar”. Em seguida, uma pedra de toque, vá para as ferramentas, você deve ver uma nova opção aparecer, que é a configuração de rede. Clique nisso, e isso nos leva para a configuração da rede. A primeira coisa que precisamos fazer é desativar os plugins. Basta clicar no link, que está lá. Eu só tenho um plug-in para desativar, então basta clicar nisso. Então, uma vez feito isso, podemos voltar para o nosso aplicativo de redes dentro das ferramentas. Agora temos uma tela diferente. Estamos agora no processo de instalação da rede. Temos algumas opções onde precisamos decidir sobre a estrutura de URL do nosso site. Para esta demonstração, vou usar subdiretórios. Vou me certificar de que é selecionado lá. Um subdiretório é o nosso próprio URL seguido por uma barra, e depois o nome do nosso site. Você pode ter subdomínios, que é exatamente como a demonstração acima, onde teremos o nome do site seguido por nossa URL. Se você não quiser usar a opção de subdomínios, talvez seja necessário ativar subdomínios curinga. Para fazer isso, talvez seja necessário verificar com seu provedor de hospedagem ou a documentação para obter instruções sobre como fazer isso. Mas, por enquanto, vou clicar em subdiretórios. No entanto, esteja ciente de que esta opção só está disponível em novas instalações do WordPress. Se a sua instalação for um mês mais antiga, você será forçado a usar a opção de subdomínios. Apenas tenha isso em mente. A rolagem para baixo manterá o título da rede como sites multissite e, em seguida, clique em “Instalar”. Agora WordPress nos dá algumas linhas de código que você precisa adicionar, primeiro lugar para o arquivo wp-config que olhamos antes, e depois o arquivo htaccess. Comece dentro do arquivo de configuração, vamos clicar nas linhas de código que precisa em, e depois copiá-los. Em seguida, volte para o nosso Gerenciador de Arquivos e, em seguida, edite o arquivo wp-config.php. Clique em “Editar” e, em seguida, role para baixo como antes também, isso é tudo. Em seguida, cole isso e clique em “Salvar”. Pesquise o primeiro botão, e no próximo precisamos adicionar algum código ao arquivo htaccess. Copie o código e, em seguida, volte para o Gerenciador de arquivos. Em seguida, com dentro do public_html, um problema que você pode encontrar é por padrão o arquivo htaccess não é visível. Você pode precisar verificar com seu provedor de hospedagem para obter detalhes sobre como encontrar o arquivo htaccess. Se você estiver usando Bluehost, que também oculta o arquivo, você pode adicionar uma string ao final da URL, que é o símbolo e comercial. Em seguida, mostrar oculto é igual a um e, em seguida, retornar. Então você deve encontrar dentro do arquivo público, lá está o nosso htaccess, clique nele, e então edite. Em seguida, o código que acabamos de copiar, precisamos colar entre o módulo IF e, em seguida, terminar em etiquetas de módulo IF. Exclua todos os padrões e, em seguida, cole no que acabamos de copiar, clique em “Salvar”. Então, agora, se tudo correr bem, devemos ser capazes de ir para o nosso domínio, clicar em “Atualizar” e, em seguida, fazer login. Então, uma vez que você estiver de volta dentro do painel, teremos uma nova opção no topo, que são meus sites. Parabéns se você tem meus sites aparecendo no topo da navegação. Isso significa que a configuração da rede foi um sucesso e agora você tem acesso ao administrador da rede. Agora você tem acesso ao administrador da rede. Vamos deixar este vídeo lá. Vamos passar agora para o próximo vídeo, vamos dar uma olhada em como podemos adicionar sites à nossa rede. 75. Multisite do WordPress: adicionando sites a uma rede: Até agora devemos ter a rede Multisite habilitada, com seu provedor de hospedagem. Se você não tiver a opção Meus sites disponível na barra de navegação superior, certifique-se de voltar e concluir as etapas antes de continuar com este vídeo. Então sabemos que este irá passar o mouse sobre o ícone Meu Site na parte superior, temos o Administrador de Rede, e também temos o nosso site WordPress Multisite, e este é o único site que temos disponível na rede. Este é o site principal para a rede. Vamos começar a trabalhar na adição de um novo site à nossa rede. Dentro do painel, clique em “Meus Sites”, Administrador de Rede e, em seguida, para baixo até Sites, e depois que carregar, clique em “Adicionar Novo” na parte superior. Temos a opção de adicionar um subdiretório, que habilitamos no último vídeo. Para fins desta demonstração, vou criar uma loja de telefones, e também uma loja de laptops, mais dois sites de rede. Então, para a loja telefônica, vamos adicionar a extensão URL da loja telefônica. O título do site também é Phone Shop, o idioma de sua escolha e, em seguida, adicione um e-mail. Então você pode ter apenas notado lá ao digitar o e-mail, o WordPress reconheceu que este é um usuário existente, ou um administrador existente e, portanto, a loja telefônica que adicionamos ao painel de administração para este usuário. Assim como diz golpe, se um endereço de e-mail é inserido que não é reconhecido, WordPress irá criar automaticamente um novo usuário para este endereço de e-mail administrador. Clique em “Adicionar Site”. Agora, se voltarmos para Meus Sites no topo. Mais uma vez, temos o Multisite, que é o site que tínhamos de antes. Também logo abaixo, desde que eu me criei como usuário inserindo meu e-mail para a loja telefônica, ele também aparece na minha lista de sites sobre os quais temos controle. Vamos em frente e criar mais um. Então, novamente no Administrador de Rede, adicione Sites, vá para Adicionar Novo. Então o terceiro site será chamado de loja de notebooks. No título do site, coloque esse tempo dentro do e-mail de administrador, vou adicionar um e-mail diferente. Por enquanto, vou inventar um. Então test@test.com e, em seguida, clique em “Adicionar Site”. Aqui está o nosso terceiro site criado. Se voltarmos para a parte superior em Meus Sites, ao contrário de antes, não teremos a loja de laptop aparecendo em nosso administrador porque adicionamos um e-mail de administrador diferente para este. No próximo vídeo, vamos dar uma olhada nos usuários e também vamos fazer login na tela de administração da loja de laptop. Mas, por enquanto, vamos apenas passar para a nossa URL, e apenas verificar se os dois sites extras estão funcionando corretamente. Temos o curso da Academia de Reação. Primeiro de tudo, vamos verificar a loja telefônica. Então, por fim, vamos até a nossa loja de notebooks, e depois apertamos “Enter”, e lá vamos nós. Portanto, há a nossa loja de computadores portáteis e os nossos sites de rede gratuitos estão todos ativados. Então é assim que podemos adicionar diferentes sites à nossa rede, e vejo vocês agora no próximo vídeo. Vamos dar uma olhada em diferentes permissões de usuário e também o super administrador. Então nos vemos lá. 76. Multisite do WordPress: usuários e o super administrador: Bem-vindo de volta a este vídeo chamado Usuários e Superadministrador. Para começar, queremos ir para o painel. Se formos até Meus Sites e dentro do Administrador de Rede, clique no painel. Então, se descermos para a opção Usuários, então percebemos isso, bem como nosso nome de usuário. Também temos o administrador da loja de laptops, que deveria ter sido criado automaticamente pelo WordPress quando terminamos hoje. Um endereço de e-mail diferente para a nossa loja de computadores portáteis. Uma coisa que você pode notar é o seu próprio usuário pode ter a palavra Super Admin logo após ele, e isso é diferente do administrador que estamos acostumados a quando criamos um único site WordPress. Vamos ao Google. Se formos para o códice e, em seguida, funções e, em seguida, capacidades, você deve ser levado para este link do códice WordPress. Então, nós rolamos para baixo, podemos ver um resumo das várias funções dentro do WordPress. Até agora, neste curso, ao construir o projeto, tivemos o administrador como o principal papel. O administrador é alguém que tem acesso a todos os recursos de administração em um único site. No entanto, agora tem um novo papel que é o super administrador. O super administrador é alguém com acesso a todos os recursos de administração da rede do site e também a todos os outros recursos. Tão efetivamente, o super administrador cuida de toda a rede de sites. Isso também significa que a função de administrador não tem exatamente os mesmos privilégios, o que tem em um único site. Isso está relacionado a coisas como temas e plug-ins. Vamos olhar para eles em mais detalhes no próximo vídeo. Mas, por enquanto, vamos voltar para o painel. Se olharmos para o segundo usuário que é para a loja de laptop, se clicarmos no usuário, temos todas as configurações habituais para editar um usuário. A primeira coisa que você percebe é, se você rolar para baixo, o nome de usuário foi definido, e ele não pode ser alterado. Nós temos a opção de conceder permissões de super administrador ao usuário, se quisermos, mas a primeira coisa que queremos fazer é rolar até a parte inferior e, em seguida, criar uma nova senha. Para manter isso simples, eu só vou ligar para este multi-site--laptop, e então confirmar o uso da senha fraca, e então atualizar isso. Então eu vou para o nosso login. Faça logout, para que o super administrador agora esteja desconectado. Agora eu quero fazer login como loja de laptop, em seguida, como multi-site-laptop. Agora estamos conectados na área de administração para a loja autônoma de notebooks. Se formos para Meu Site na parte superior, agora estamos no controle de um site por esse usuário, que é a loja de laptop, nenhum dos controles que tínhamos como super administrador, como a capacidade de adicionar sites extras. No entanto, clicamos nos usuários, vemos que nosso usuário tem a função de administrador, para que possamos executar a maioria das tarefas usuais de administração do site que vimos antes, como adicionar páginas, alterar configurações e também gerenciando comentários. No entanto, há algumas coisas que estão faltando, como a capacidade de adicionar novos temas e plug-ins, e isso é algo que vamos dar uma olhada com mais detalhes no próximo vídeo. 77. Multisite do WordPress: plug-ins e temas: Vamos começar este vídeo olhando para adicionar temas à nossa rede. Isso precisa ser instalado pelo superadministrador e pode ser disponibilizado para todos os sites na rede ou em uma base site a site. Nós vamos procurar plugins também neste vídeo, mas vamos começar olhando para os temas. Uma coisa que você pode achar útil para este vídeo e também para o próximo par de vídeos, é que eu fiz login como dois usuários. No lado direito, abri um navegador diferente. No meu caso, estou usando o Firefox, e usei isso para fazer login como Laptop Shop ou um de nossos Administradores de Rede. Você pode achar muito mais fácil ter uma segunda navegação aberta e conectada como um dos sites de rede. Usando o navegador Chrome normal, estou conectado como superadministrador. Assim, podemos alternar entre os dois, não precisamos fazer login ou logout o tempo todo. Primeiro, vamos dar uma olhada em como habilitar um tema para estar disponível para toda a rede. Como superadministrador, se eu for para o Painel e, em seguida, Meus Sites, Administrador de Rede e, em seguida, para baixo para Temas, temos a lista de temas disponíveis e também as opções Adicionar Novo. Eu vou até lá e você pode procurar por qualquer coisa que eu gosto, então eu vou apenas procurar o tema da vitrine que nós usamos neste curso. Este é um dos projetos de comércio eletrônico. Vou passar o mouse sobre isso e depois clicar em “Instalar”. Uma vez feito isso, você saberá que o botão Instalar muda para Ativar rede. Este botão torna um tema disponível para todos os sites da rede, então vamos clicar sobre isso. Voltamos à lista de temas disponíveis. Há nosso tema de vitrine que acabamos de habilitar, e também temos a opção de desativar a rede se quisermos fazer isso no futuro. Também o mesmo com todos os sites que são instalados por padrão, nós também temos a opção de habilitar e desabilitá-los. Se queremos apenas adicionar um tema para ser habilitado para determinados sites, também podemos fazer isso. Se voltarmos para Adicionar Novo, e novamente apenas escolher tema extra, vamos para o tema espaçoso do primeiro projeto, e então uma vez que ele é encontrado, pressione “Instalar”, mas desta vez não clicamos em Ativar Rede, porque só queremos que isso esteja disponível para determinados sites. Agora está instalado. Se voltarmos para o Administrador de Rede e, em seguida, para a nossa lista de sites, se formos para a nossa Loja de Laptop e, em seguida, ir para Editar e, em seguida, selecionar a guia Temas, farei uma lista dos temas disponíveis que podemos ativar para o site. Está no topo, dizemos que é temas habilitados para rede. Eles não são mostrados na tela. Isso é por razões óbvias, porque o tema já foi disponibilizado para todos os sites da rede, por isso não precisamos ativá-lo a partir desta tela. Para a Loja de Laptop, vamos ativar o tema espaçoso. Agora que está feito. Se formos para o nosso segundo navegador, vamos para Aparência e depois Temas, temos o tema padrão 2017, temos o tema Storefront, que está sendo habilitado para rede para todos os sites, e também temos habilite o tema espaçoso. Vamos apenas tentar desativar o tema espaçoso como o super administrador e, em seguida, tentar atualizar e fazê-lo ir. Agora só temos disponível o tema padrão e o tema de rede habilitado. Esta é uma maneira de controlar exatamente qual tema queremos ter disponível para qualquer site específico. Vamos agora dar uma olhada em adicionar plugins à nossa rede, e assim como ao usar temas, plugins também precisam ser instalados pelo super administrador. Primeiro, vamos começar ativando um plugin para toda a rede, então volte para o nosso administrador principal. Você tem que ir para Meus Sites e, em seguida, Administrador de Rede. Há também uma opção Plugins, então basta ir lá e de uma maneira semelhante a antes, clique em “Adicionar novo”. Agora, para esta demonstração eu vou para o plugin Jetpack. Vou procurar por Jetpack, e isso é o que queremos por Automattic, e depois Instale Now. Dê um momento para instalar. Então, uma vez feito isso, nós temos o mesmo botão Network Activate. Vou clicar nisso. Então somos levados de volta à nossa lista de plugins. Em cada um dos plugins instalados, também temos a opção de Ativar Rede ou Desativar Rede. Agora este plugin em particular é ativado pela rede. Ele está disponível para todos os sites na rede, mas não pode ser removido pelos administradores de site individuais. Vamos voltar para você, nossa Laptop Shop e depois atualizar. Agora, no painel, temos a opção de plugin Jetpack, como faremos em todos os sites de rede. Isto é ideal se quisermos que o plugin esteja disponível para todos os sites da rede. Mas se queremos apenas um plugin habilitado em alguns outros sites, precisamos fazer as coisas um pouco diferente. Voltar para o super administrador, vamos instalar um novo plugin indo para Adicionar Novo. Vou adicionar um plugin chamado Advanced Custom Fields e, em seguida, procurar por isso. Vou instalá-lo, mas desta vez, quando estiver tudo pronto, não clicaremos no botão Ativar Rede. Podemos ativar este plugin em um site individual por site, indo para Meus Sites. Então, se descermos para um dos sites sob nosso controle, então vamos para a Loja de Telefones e, em seguida, clique no “Painel”. Podemos ir até os Plugins, e então há o plugin Advanced Custom Fields que você tem a opção de ativar. Uma vez ativado, ele só é ativado no único site para o qual o ativamos. No nosso caso, é a loja telefônica. Alguns de vocês podem notar que, se acessarmos Meus Sites, só temos o Multisite e a Loja Telefônica disponíveis sob nosso controle. Não há opção para acessar o painel da Laptop Shop. Isso ocorre porque precisamos nos adicionar como administrador para o Laptop Shop. Agora podemos fazer isso facilmente indo para o Administrador de Rede e descendo para Sites. Se você for ao Laptop Shop e clicar em “Editar”, podemos ir para a aba Usuários na parte superior, e então tudo o que precisamos fazer é ir para Adicionar Usuário Existente e o nome de usuário. No meu caso é o multisite, então eu vou apenas clicar lá e dar a si mesmo um papel, então eu estou indo para Administrador, Adicionar Usuário. Agora, se formos para Meus Sites, na parte superior, agora temos controle total de nossos três sites em nossa rede. Isso também nos permitirá entrar no painel e habilitar plugins para cada site individual. Isso só pode ser feito como o super administrador. Como você pode ver se vamos até a Loja de Laptop, assim como o administrador padrão, não temos a opção no painel de controle de selecionar os plugins, como fazemos no lado esquerdo. Agora também somos administradores na Loja de Laptop. Agora temos a opção de acessar Meus Sites. Você vê que o Laptop Shop está agora habilitado, o que nos permitirá entrar no painel e podemos fazer coisas como adicionar os plugins. Vamos para os Plugins, e vamos adicionar os Campos Personalizados Avançados e ativar isso. Em seguida, volte para a Loja de Laptop e, em seguida, atualize. Como acabamos de fazer login como administrador, não temos a opção de plugins no painel. No entanto, temos o Jetpack e agora também o plugin Custom Fields, porque isso foi habilitado pelo super administrador. Isso é praticamente tudo. Isso é uma visão de como podemos adicionar temas e plugins para nossa rede. Agora vamos passar para o próximo vídeo onde mostrarei como permitir que usuários registrados adicionem sites à nossa rede. 78. Multisite do WordPress: permitindo que usuários adicionem sites à rede — parte 1: Neste vídeo, vamos dar uma olhada em permitir que os usuários se registrem em outros locais em nossa rede. Se formos a um de nossos sites em nossa rede, e novamente, assim como no último vídeo eu tenho dois navegadores abertos. Tenho o Google Chrome no lado esquerdo, e estamos logados como superadministrador multissite. No lado direito, abri o Firefox. Estou logado na loja de notebooks como administrador padrão. Se formos até a loja de laptop real e visitar o site, uma coisa que você notará se rolarmos para baixo na barra lateral, baixo no assunto, temos a opção de fazer login e logout e ir para coisas como a tela de administração, mas não temos a opção de se registrar como um novo usuário. Esta é uma configuração padrão de redes WordPress e é algo que podemos facilmente mudar. Então, de volta na tela super admin, se eu for para meus sites e para o administrador da rede e, em seguida, para baixo para configurações, deve haver uma opção para configurações de registro. Se você rolar para baixo, isso nos dá quatro opções diferentes. O primeiro é o registro está desativado. Isso significa que novas contas de usuário não podem ser criadas quando um usuário visita nosso site. A segunda opção é permitir que as contas sejam registradas. Se mudarmos isso e depois descermos para salvar. Então, se formos para o Firefox, e, se nós deslocarmos e em seguida, você apenas ir para o site e rolar para baixo para a barra lateral. Agora, temos a opção de se registrar, bem como fazer login. A terceira opção é permitir que usuários conectados criem um novo site na rede. Esta opção restringe novos sites a serem criados, mas apenas por usuários conectados que tenham uma conta. Isso significa que, como superadministrador, temos a opção de fornecer contas somente a pessoas autorizadas para configurar novos sites na rede. Então, por fim, temos a opção de permitir que qualquer pessoa se registre como usuário e também criar um site na nossa rede. Esta última opção é aquela que vamos usar para permitir que qualquer pessoa se junte à nossa rede. Certifique-se de que a última opção é clicada e, em seguida, desça para salvar as alterações e, em seguida, volte para o Firefox. Agora, se você ir em frente e se registrar como um novo usuário. Se você adicionar um nome de usuário e também um endereço de e-mail, sobre o qual você tem controle, porque você precisará clicar em um link de ativação para habilitar o novo usuário. Você também terá a opção de criar um novo site de rede. Mas, por enquanto, se você clicar na opção apenas para criar um novo usuário, vamos em frente e criar o site assim que você voltar. Vá em frente e crie um novo usuário e volte em alguns instantes. Espero que você tenha registrado um novo usuário e ativado o e-mail. Se você avançar e fazer login como suas novas contas de usuário. Em seguida, você vai para o seu perfil clicando no nome de usuário no canto superior. Eu sou levado para o painel e você verá que o painel não tem muitas opções. Não há opção para adicionar seus próprios sites. Se quisermos adicionar nosso próprio site, precisamos adicionar wp-signup.php logo na parte superior após a URL e isso nos leva a uma tela onde podemos adicionar um novo site à rede, adicionando uma extensão à URL e também adicionando um título de site e, claro muitos usuários não saberão que precisamos adicionar isso no final da URL. Então, para torná-lo um pouco mais fácil de usar, eu vou adicionar um link na navegação superior para registrar um novo site. Há também muitas maneiras de fazer isso, como criar widgets e adicionar links para várias partes da página, mas eu vou apenas ir em frente e adicionar um link de menu. Como administrador, precisamos fazer isso no site principal da nossa rede. Então eu vou para meus sites e depois multisite, que são os principais sites de rede, e depois para o painel e, em seguida, se formos para a aparência, em seguida, para baixo para menus, eu vou adicionar um novo menu chamado navegação. Crie o menu. Precisamos adicionar este menu ao local principal do seu tema. No caso do tema que estou usando, é chamado de menu superior. Então selecione isso. Então, se formos para o menu esquerdo, para os links personalizados, vamos adicionar um novo botão de menu chamado sites de áudio. Em seguida, o URL está disponível apenas no topo lá. Copie isso e cole-o e, em seguida, adicione isso ao menu. Há o nosso botão que apareceu sob a estrutura do menu. Vamos salvar isso e atualizar o Firefox e [inaudível] nossas opções para outros sites. Se acabarmos de passar para o site principal como nosso usuário conectado, você ainda pode ver que esta opção está lá. Então agora podemos clicar sobre isso e, em seguida, ir para a página de inscrição. Esta será a página de inscrição padrão que os usuários registrados podem ver. Se formos para o Chrome e visitarmos nosso site como super administrador e se descermos para adicionar seus sites, você verá que ele parece semelhante, mas temos uma ou duas pequenas diferenças, como alertar para o fato de que estamos permitindo todos os registros para que qualquer um possa criar um site e também nos dá uma lista de sites que já somos membros e, em seguida, as mesmas opções para outros sites e também o título do site. Então agora nosso site está tudo configurado para permitir que usuários registrados adicionem sites à rede. Vamos deixar este vídeo lá e continuar no próximo vídeo, onde iremos em frente e registrar um novo site em nossa rede. 79. Multisite do WordPress: permitindo que usuários adicionem sites à rede — parte 2: Bem-vindo de volta à segunda parte de como permitir que usuários registrados adicionem sites à nossa rede. Na primeira parte, alteramos as configurações como um super administrador para permitir que novos usuários se registrem e também para criar um novo site como parte de nossa rede. No lado direito, estou logado no Firefox como nosso novo usuário registrado. Se você ainda não fez isso, clique em, Adicionar seu site botão e você será levado para esta tela. A primeira coisa que precisamos fazer é adicionar o nome do nosso site. Esta será a extensão da URL após a URL principal da nossa rede. Eu quero chamar o meu Guia Multisite WordPress. Vamos dar-lhe uma URL do guia multisite. O título do site chamado WordPress Multisite Guide. Então temos a opção de permitir que os motores de busca indexem. Então eu vou apenas manter como Sim. Em seguida, clique em “Criar Site”. É tão simples assim. Assim, podemos ver o URL completo que nos leva ao nosso site. Agora, se formos para o nosso Perfil e depois para o Painel, agora temos um painel de aparência mais familiar com as opções de administração do site. Estas são todas as coisas que estamos acostumados, como a capacidade de adicionar postagens, páginas, e tudo deixar uma administração geral opções. Se você passar para o topo em Visite Site, este é o nosso novo site que acabamos de criar com o título do nosso site. Não há muito para o momento, porque não adicionamos nenhuma personalização. Mas agora devemos construir ver se voltarmos para o super administrador, se passarmos para o Painel e depois para baixo para Sites, devemos obter agora o guia multisite listado como nosso quarto site. Claro que, como super administrador, também temos as opções para editar o site. Também podemos removê-lo se quisermos. Ainda temos controle total sobre quaisquer sites de terceiros. Assim, ao permitir novos usos para registrar sites em nossa rede, também podemos querer personalizar coisas como e-mails de registro e configurações. Se formos para o Administrador de Rede e, em seguida, para baixo para Configurações, bem como as configurações de registro que olhamos antes, temos algumas novas opções relacionadas ao multisite. Podemos personalizar as configurações do novo site. Isso inclui itens como o e-mail de boas-vindas, que é enviado para os usuários registrados assim que eles criarem um novo site. Mesmo com o e-mail do usuário e várias outras coisas, como novas postagens ou novas páginas. Podemos adicionar nomes aqui dentro, separados por um espaço. Isso bloqueará qualquer usuário registrado de criar o site com esses nomes. Então podemos reservá-los para nós mesmos e, claro, coisas como admin é obviamente bloqueado porque precisamos disso para fazer login. É assim que podemos permitir que um usuário registrado crie um novo site como parte de nossa rede. Então eu espero que este vídeo e seção tenham sido úteis para você. Se você ainda não tem um multisite útil que você pode precisar no futuro, e é útil saber como fazê-lo. Então, obrigado e tchau por agora. 80. Palestras de bônus: fazendo upload para um servidor ativo: Bem-vindos a todos. Este vídeo é sobre mostrar-lhe como você pode colocar seu site WordPress em funcionamento em um servidor ao vivo. Nós vamos usar um plugin para tornar este um processo realmente simples e é possível exportar seu site de um host local para um servidor live em apenas alguns minutos. Então, a primeira coisa que você precisa fazer, se você quiser colocar seu site ao vivo na Internet, é comprar alguma hospedagem na web, e você também precisará de um nome de domínio. Então, para este tutorial, eu vou estar usando o cPanel e também as instalações WordPress One-Click, que estão disponíveis com os provedores de hospedagem mais populares. Então você precisa fazer login na conta de hospedagem. Eu vou para gerenciar, e vamos levá-lo para o cPanel. Então, dependendo de qual é o seu provedor de hospedagem, você pode achar que ele parece um pouco diferente para isso, mas tudo que você precisa fazer é procurar a instalação WordPress One-Clique. Então, sob as aplicações web, eu quero clicar no WordPress e isso vai definir WordPress no meu nome de domínio escolhido. Então eu vou clicar em instalar este aplicativo. Eu vou salvar o meu para o wordpressacademycourse.com. Você também pode alterar várias versões, e também há muitas opções diferentes, mas vou deixá-las como padrão. Vou adicionar um administrador e também uma senha @ e-mail. Está bem. Então, o título do site e o slogan, eu vou deixar esses como eles estão por enquanto, porque nós vamos importar todos os dados do nosso localhost. Então nós não precisamos mudar isso e então eu vou clicar em instalar e deixar isso fazer isso é coisa. Então lembre-se que algumas instalações de um clique são um pouco diferentes desta, mas tenho certeza que podemos resolver isso. Então, basta dar alguns momentos para instalar, e eu vou procurar o aplicativo WordPress instalado. Então, agora, vou passar para uma nova guia, e digitar meu nome de domínio. Então wordpressacademycourse.com, e lá vamos nós. Então, há a nossa instalação WordPress, e esse é o tema padrão. Então, eu só vou para a seção de administração, então adicione uma barra e, em seguida, admin no final, e, em seguida, faça login com seus detalhes. Lá vamos nós. Está bem. Então, porque estamos importando todas as informações que precisamos para este site, eu vou apenas clicar em não obrigado. Levado direto para o painel. Está bem. Pesquisar configuração WordPress agora no servidor ao vivo, e ele só tem uma instalação padrão. Então eu vou começar a trabalhar com a exportação dos detalhes da nossa versão localhost. Então eu vou para a versão local, e selecionar fones de ouvido pro, e você pode fazer isso com qualquer um dos sites que nós construímos, e então entrar em admin, e então nós precisamos ir para os plugins, e em seguida, adicione novo. Então, se você apenas procurar por All-in-One WP Migration, e isso é o que precisamos por ServMask. Então eu já tenho este plugin instalado. Então, tudo o que você precisa fazer é clicar em instalar e, em seguida, ativar da maneira usual, e então você deve obter uma opção de menu no painel. Então, se você vai para a nova opção no painel, e, em seguida, clique em exportações e isso irá exportar nosso site como um pacote, que você pode então importar para o nosso site WordPress ao vivo. Está bem. Então a primeira coisa que você sabe é que há uma instalação para encontrar e substituir. Então podemos encontrar qualquer palavra que quisermos no pacote, e substituí-la por outra coisa. Então, se temos alguma informação sensível, ou quer mudar o nome de usuário do administrador, por exemplo, a partir do root, podemos fazer isso aqui. Há também algumas opções avançadas, onde podemos deixar de fora várias coisas como spam, temas e plugins que você não quer exportar, mas eu vou deixar como padrão. Clique em exportar para, e eu quero exportar o meu para um arquivo. Então eu vou apenas clicar no arquivo e deixar isso fazer isso é coisa, e então uma vez que isso é feito, nós podemos clicar no botão baixar localhost. Agora temos o arquivo, salvo em nossos downloads. Então eu vou fechar isso e então nós vamos para o meu site ao vivo e então fazer a mesma coisa. Então é plugins, adicionar novo. Então, tudo em um WP Migration, e, em seguida, instalar e ativar, e, em seguida, precisamos ir para as opções, e, em seguida, ir para importar e, em seguida, encontrar o arquivo que acabamos de baixar, e, em seguida, arrastar isso para o arrastar e e geralmente isso leva um minuto para importar. Está bem. Logo recebemos uma mensagem dizendo que isso substituirá nossos bancos de dados, plugins e temas, mas sabemos disso, então clique em continuar. Está bem. Então, se tudo correr bem, devemos receber a mensagem dizendo que seus dados foram importados com sucesso. Então agora só temos mais dois passos a fazer. Uma é que precisamos salvar nossos permalinks, então clique nas configurações permalinks, e ele deve abrir uma nova janela, e você vai notar se você tentar entrar com os detalhes que usamos quando configuramos o WordPress ao vivo que não poderemos fazer login usando esses mesmos detalhes. Isso ocorre porque a importação que acabamos de fazer, também importou nosso usuário. Então precisamos usar os mesmos detalhes de usuário que usamos para o localhost. Então o meu foi proheadphones-admin, adicione a senha e, em seguida, faça login. Então agora devemos estar logados com os dados de usuário existentes do localhost e agora precisamos confirmar nossas configurações de permalink. Então, uma vez que estamos felizes com um dos formatos, só precisamos clicar em salvar as alterações, e depois que você fizer isso, podemos visitar site e tudo deve parecer como ele foi no localhost, então vamos basta dar uma olhada na página inicial, e tudo parece bem lá. Então, a página do blog diz nossas postagens no blog. Selecione estes e como a versão completa. A página Sobre Nós. Tudo parece bom. Vamos apenas adicionar um novo post e verificar se tudo está funcionando bem. Então, novo post 4, realmente não importa sobre o conteúdo por enquanto. Também temos as imagens na biblioteca de mídia. Então, isso é bom. Vamos definir um desses e publicar. Vamos voltar para o blog, e como nosso novo post 4. Então tudo parece estar funcionando bem. Apenas tente a busca. Sim, isso é ótimo. Então é assim que rápido e fácil pode ser exportar seu site de um localhost para um servidor web ao vivo, ao usar um plugin como a Migração de WP All-in-One. Claro que existem outras maneiras de fazer isso, como exportar novo banco de dados do seu localhost, e também usar o software FTP, mas esta é uma maneira muito rápida e fácil de exportar seu site, e espero que você ache útil para quando você estiver pronto para passar de um host local para um servidor web ativo. 81. Palestras de bônus: plugins de tema criança leste: Então, mais cedo no curso, quando criamos a loja de camisetas. Criamos um tema infantil do tema da vitrine. Então, quando criamos um tema filho, criamos manualmente, criando a nova pasta de temas. Adicionamos coisas como o arquivo de funções e também a folha de estilo personalizada. Então, neste vídeo, nós só queremos mostrar uma alternativa rápida e fácil para criar temas filhos usando um plug-in. Se passarmos para o painel e, em seguida, ir para baixo para plugins e, em seguida, adicionar novo. Eu só vou fazer uma busca por temas infantis. Existem vários plugins diferentes que podemos selecionar. Mas para este curso, eu vou apenas usar o criador de tema filho fácil e clique em instalar agora e, em seguida, ativar. Assim como tínhamos muitos outros plugins, temos uma opção no painel. Então o que precisamos fazer é ir para o criador de tema infantil fácil. Selecione e crie um tema filho, basta clicar na guia Criar tema filho. Tudo o que precisamos fazer é, antes de tudo, selecionar um tema pai. O tema pai que queremos pode ser qualquer um dos temas instalados, como o tema da vitrine. Podemos dar-lhe um título, como a criança de frente de loja dois. Eu só vou deixar os detalhes do tema como eles são e clique em criar. Então é isso, tema filho criado com sucesso. Se formos para a aparência, e depois temas, deixarei você verificar se está sendo instalado. Ali está a nossa filha da frente da loja dois que acabamos de criar, aperta Ativar. Então vamos visitar o site e ver como ele parece. Aqui está o tema infantil da loja. Agora pode ir sobre personalização da maneira usual, sem afetar qualquer uma das funcionalidades do tema pai quando atualizamos. Se entrarmos no personalizador, podemos apenas verificar se estamos trabalhando com o tema filho certo. Se olharmos para a seção tema ativo, podemos ir em frente e alterar qualquer um dos detalhes como fizemos anteriormente. Então essa é uma alternativa rápida e fácil para criar temas filhos. Obrigado por assistir, e te vejo no próximo vídeo. 82. Palestras de bônus: removendo dados amostrais e redefinindo nosso banco de dados: Uma das coisas que você é perguntado bastante é uma vez que concluímos nossos dados de amostra ou de nossos dados de teste de tema em um projeto, como podemos então ir em frente e remover isso? Os dados de texto do tema com todas as informações que você baixou dentro de um arquivo XML. Isso nos dá algum conteúdo de amostra para trabalhar, como algumas postagens de blog de exemplo e também algumas imagens com várias coisas, como ofertas diferentes também. Se entrarmos em um post de blog, podemos ver esses comentários diferentes sobre ele. Há vários arquivos, bem como diferentes categorias e tags também. A maioria dessas informações é adicionada com o arquivo XML, bem como uma ou duas postagens de blog e páginas que foram adicionadas a0. Na verdade, havia até alguns links de menu que também foram incluídos com os dados de amostra. Bem, a maneira de remover os dados da amostra, na verdade, há duas maneiras diferentes. A primeira maneira é percorrer manualmente todos os posts, todos os menus, todas as páginas, e também todas as outras coisas, como a mídia, as imagens que foram adicionadas e removê-los manualmente uma por uma. Claro que isso leva tempo e é muito repetitivo. Há também um plug-in que podemos usar para remover todos esses dados. Uma palavra de aviso antes de começar. Isso irá remover todo o conteúdo que você adicionou aos sites, não apenas os dados de teste tema que foram adicionados com arquivo XML. Também todas as nossas páginas e posts também serão perdidas. Este é basicamente um reset do ciclo de tema de volta a como começamos. Vou instalar um plugin. [ inaudível] plugins e, em seguida, adicionar novo. Sob plugin que eu vou procurar é, WordPress Reset. O que vamos usar está aqui e é um chamado WordPress Reset por Matt Martz. Vamos em frente e instalar agora. Este WordPress Reset redefinirá nosso banco de dados WordPress de volta para o padrão. Todas as personalizações e conteúdo, como acabamos de mencionar, desaparecerão. Uma vez instalado, selecione “Ativar” como de costume. Uma vez que isso é feito, devemos agora ver sob a opção de ferramentas, agora temos um ícone de menu reset adicionado. Selecione isso e, em seguida, para completar a redefinição, precisamos digitar reset dentro da caixa de entrada na parte inferior e, em seguida, clique em, “Redefinir”. Mais uma vez, cuidado com isso irá excluir todo o conteúdo do banco de dados e restaurar de volta para o seu padrão. Só siga e aperte reset se for isso que você quer fazer. Vou clicar em “Está bem”. Este é um momento apenas para limpar todas as entradas do banco de dados e agora eu estou indo para, Visite site. Nós levamos para o tema padrão. Se voltarmos ao painel e, em seguida, Temas, ainda podemos ver que nosso tema espaçoso ainda está disponível. Podemos ativar isso. Todos os nossos temas ainda estão preservados. Visite o site e é assim que nosso site parece uma nova instalação. Se voltarmos para o painel, como acabamos de ver lá nos sites, todos os posts e páginas que foram adicionados nós removemos. Nós apenas temos o mundo Olá padrão como fizemos quando instalamos pela primeira vez. É assim que podemos remover todos os dados de amostra e todo o conteúdo do nosso banco de dados WordPress para nos dar um novo começo para trabalhar com. 83. Palestras de bônus: configurando um segundo projeto usando a hospedagem do Siteground: Se estiver usando a hospedagem na web SiteGround, uma vez que você terminou um dos projetos neste curso, e precisa passar para o próximo; uma maneira fácil de fazer isso, é criar um novo URL. No momento, se você acessar “Minhas contas” provavelmente verá apenas um link para seu site. Podemos adicionar um segundo. Se você for para “Adicionar instalação manualmente”, e podemos iniciar um novo projeto. Tudo o que precisamos fazer é clicar no “Script WordPress” e depois clicar em “Instalar”. Ao invés disso, instalando imediatamente, ele nos dá uma opção para alterar o URL de instalação. O padrão é nosso URL atual. Podemos adicionar um diretório no final. Aqui dentro podemos adicionar o nome de nossos novos projetos. Se quisermos profones, podemos adicionar isso aqui. Podemos rolar para baixo e podemos criar um novo administrador, adicionar um nome de usuário e também uma senha. Tudo o que precisamos fazer é rolar para baixo e clicar em “Instalar”. Isso levará apenas alguns momentos para instalar os novos sites no URL escolhido. Uma vez concluído, agora temos um novo URL no qual você pode clicar e também o link de administrador também. Se clicarmos em “Minhas Contas” mais uma vez, também veremos o novo link e o link para o painel de administração aqui também. Podemos clicar nisto. Vou abrir isto numa nova conta. Agora nos dá uma tela em branco para começar nosso próximo projeto. 84. Obrigado: Então você chegou ao fim deste curso. Grandes parabéns de mim e você deveria estar muito orgulhosa por chegar ao fim. Espero que você tenha aprendido tanto, que agora você pode tirar e usar em projetos futuros por conta própria. Então, cobrimos tanto terreno de onde começamos. Começamos com o blog de desenvolvimento web, onde chamamos o básico do WordPress, como encontrar e instalar temas. Também analisamos coisas como adicionar posts e como obter posts existentes. Nós cobrimos vários recursos, para encontrar e como incluir mídia em nosso blog. Também trabalhamos com a adição de páginas ao nosso blog, como a página Sobre Nós, a página Contato e lidar com usuários e comentários. Você aprendeu a adicionar menus de navegação e depois passamos para a próxima seção e personalizamos o site ainda mais adicionando logotipos, fundo e imagens de cabeça. Trabalhamos com o personalizador e também trabalhamos com widgets de página para auto a primeira página e também mover o blog para sua própria página personalizada. Aprendemos como adicionar controles deslizantes e também como adicionar formulários de contato. Em seguida, no final da seção, olhamos para vários extras, como como melhorar a otimização do mecanismo de busca e como fazer backups do nosso site, caso algo pior acontecesse. Em seguida, passamos para a criação de um segundo projeto, que envolve a criação de um banco de dados WordPress e a instalação do WordPress. Nós também começamos com Woo Commerce, tanto para a funcionalidade de e-commerce como também para o tema de vitrines. Também demos uma olhada no uso de temas infantis em várias funcionalidades relacionadas ao comércio eletrônico, como categorias de produtos, tags e atributos. Nós até olhamos para a criação de layouts flexíveis usando Page Builder, irá incluir o conhecimento básico do PHP, que você vai precisar para converter um site HTML e CSS sobre um tema WordPress totalmente funcional e grande aparência. Esta seção mergulhou ainda mais nos bastidores do WordPress e como as páginas do WordPress são dispostas e como ele usa modelos para organizar e exibir páginas da web. Então, adeus por agora e espero, eu vou vê-lo novamente em breve em um curso futuro. 85. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido 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 que te veja de novo em uma aula futura.