Como criar sites Wordpress de maneira eficiente com o Divi

1. Introdução: Olá e bem-vindo a como construir eficientemente sites WordPress com Divi. Meu nome é Chris, e tenho trabalhado como desenvolvedor web nos últimos três anos, muitas vezes trabalhando com WordPress. Ao longo dos anos eu vim para aprender a construir sites WordPress da maneira certa, eo que eu quero dizer com isso é como construir sites de forma eficiente que também são capazes de ser facilmente atualizado e manter abaixo da pista. Você vê quando eu construí meu primeiro site, eu decidi construir meu próprio tema do zero. Eu fiz uma aula de sete horas apenas para aprender o básico e, em seguida, passei as próximas semanas trabalhando no meu site em tempo integral para fazê-lo funcionar. Não só levei muito tempo para construir, toda vez que eu queria atualizá-lo, mesmo apenas para mudar algum texto em uma página de aprendizagem, eu precisava saltar para o código back-end e atualizar o site manualmente. Confie em mim, é um pé no saco e eu me perguntei como freelancers profissionais e agências fazem sites WordPress? Certamente eles não passam 40 horas por semana construindo um único local, o que é que eu estou perdendo aqui? Bem, não foi até que eu passei meses e anos freelancers com o WordPress, falando com outros desenvolvedores e trabalhando para agências que eu percebi a maneira certa de desenvolver sites WordPress. Agora, não me entenda mal se você quiser criar seu próprio tema para vender como um produto na floresta temática ou mercados similares, fique à vontade. Mas para construir rápido e [inaudível] personalizar sites WordPress para clientes, você não quer ter que reinventar a roda cada vez que você está encarregado de um novo desenvolvimento de site. Então, neste curso, vou ensinar-lhe como desenvolver e atualizar sites WordPress muito mais rápido, personalizando um tema premium como Divi. Divi é agora o que eu uso para desenvolver todos os meus próprios sites, bem como sites para clientes, e eu descobri que para ser um dos temas mais versáteis e eficientes para criar qualquer layout ou design que você quiser. Então, se você está pronto para aprender o caminho certo para desenvolver sites WordPress, clique no próximo vídeo e vamos começar. 2. O que você vai precisar para este curso: Antes de começarmos, vai precisar de algumas coisas. Número 1, algumas habilidades anteriores. Você vai precisar de algum conhecimento básico de HTML, CSS e PHP, e algumas habilidades básicas de webmaster, ou seja, como hospedar e usar ferramentas para atualizar seu site. Se este é o seu primeiro curso sobre desenvolvimento web e você não está familiarizado com o básico, eu definitivamente recomendo que você assista minha primeira classe de compartilhamento de habilidades “Understanding Web Development”, que lhe dará o conhecimento de iniciantes para participar nesta classe. Quanto à nossa pilha de tecnologia, é muito básico. Número 1, vamos precisar de um servidor que seja um lugar para hospedar seu novo site. Vamos precisar do WordPress e vamos precisar da Divi. Hospedagem que cobrimos na compreensão do desenvolvimento web e cobrimos um pouco de instalação do WordPress. Divi, é claro, é um tema premium personalizado, por isso vem com um custo. Finalmente, as ferramentas que você precisa para desenvolver seu site WordPress incluem, um editor de código, um cliente FTP, e se você está construindo seu site localmente, um servidor web PHP, como MAMP no Mac, ou WAMP no PC. Mas novamente, todos eles estavam cobertos na minha última aula. Portanto, você deve agora entender isso e estar pronto para colocar isso em prática. Se não, talvez revise algumas dessas partes da classe anterior, e nos visite aqui quando estiver pronto. Acho que isso cobre o que precisamos para começar. Eu vou vê-lo no próximo vídeo onde vamos discutir WordPress e Divi, e como juntos podemos construir sites WordPress super rápido, e ainda totalmente personalizável ao mesmo tempo. 3. Introdução ao Wordpress: Se você tomou o meu curso anterior compreendendo desenvolvimento web, você teria sido apresentado ao WordPress através da lição bônus no final da aula. Recapitulando, o WordPress é basicamente um sistema de gerenciamento de conteúdo livre e de código aberto baseado em PHP e MySQL. Essencialmente, é um monte de código que estabelece a base para um site baseado em conteúdo. Mas o que quero dizer quando digo site baseado em conteúdo? Bem, se você já leu um blog online ou leu páginas de um site da empresa, então você interagiu com um site baseado em conteúdo. É simplesmente um site que pode exibir conteúdo, seja um monte de páginas ou postagens de blog que são lançados regularmente. A maioria dos sites, eu diria, se encaixam neste modelo de um site baseado em conteúdo. Ou seja, o site é simplesmente uma fonte de conteúdo onde o objetivo principal do site é que os usuários consumam conteúdo. É isso. Para comparar isso com o que é chamado de Web App. Os aplicativos Web fornecem algumas funcionalidades personalizadas. Por exemplo, Google Docs. É um lugar onde você pode escrever, editar e visualizar documentos compartilhados. Facebook, outro aplicativo Web para redes sociais e conexão com amigos, e Dropbox um aplicativo para armazenamento de arquivos. Agora, enquanto sites baseados em conteúdo que são construídos no WordPress também podem ser considerados aplicativos, todos eles compartilham uma funcionalidade básica, que é compartilhar conteúdo. Considerando que todos os exemplos que mencionei anteriormente, todos eles fazem algo muito diferente. Basicamente, a menos que você queira desenvolver um novo software para rivalizar com Facebook ou ABNB, então, na maioria das vezes, quando alguém diz que quer um site, eles provavelmente estão falando sobre um site baseado em conteúdo. WordPress é definitivamente o software mais popular para o desenvolvimento desses sites. De fato, de acordo com algumas fontes, ele alimenta quase um terço da Internet. Popularidade de uma plataforma particular é uma coisa boa, porque isso significa que há uma enorme comunidade de desenvolvedores que fornecem suporte e criar milhares de temas e plug-ins para o seu site WordPress. Espere, o que são temas e plug-ins? Fico feliz que perguntou porque eu estava prestes a cobri-los agora. Quando você instala um site WordPress, você terá o seguinte design. Basicamente, eles se parecem com isso. Isso será personalizado com base no que você colocar no formulário ao instalar. Vamos rever a instalação mais tarde. Mas basicamente este é o título do seu blog e este é o seu slogan, que acaba como um subtítulo. Isso é dinâmico a partir de quando você faz a instalação. Mas este olhar com a parte eo mundo Olá aqui em baixo será o mesmo se você está lançando um site WordPress agora, ao mesmo tempo este curso foi gravado. O aviso aqui é que WordPress muda seu tema a cada ano, eles trazem um novo tema padrão. Se você estiver fazendo este curso no final do ano ou 2019, 2020, o tema padrão provavelmente mudou até então. Mas por agora, qualquer pessoa que instala WordPress recebe este tema que é chamado 2017. Mesmo que seja 2018, eles ainda não lançaram o tema 2018. O que queremos fazer agora apenas para mostrar temas e plugins é entrar em nosso Painel WordPress. No momento, estou desconectado agora, então vou ter que colocar meus detalhes de login. Eu salvei estes aqui. Estes são os que vamos usar no vídeo posterior sobre a instalação do WordPress. Mas é basicamente o que você configurar quando você instala o WordPress. O que você obtém é o painel WordPress. É isto. O front-end do seu site é o que vimos antes. Isto é o que você vai ver. Se você estiver conectado, você receberá esta barra aqui, que apenas mostra que você está logado e, em seguida, você pode entrar e fazer painel. Em seguida, dependendo dos plugins ou coisas que você não armazenou, pode haver mais aqui em cima. Na verdade, usando Divi, haverá alguns novos botões que vêm aqui. Também algumas partes da página que você é capaz de editar como Admin, você será capaz de editar, logado. Esse é o seu lado frontal do site. Este é o seu painel que só usa o seu site ver e pode entrar. Então todos esses campos, todos esses pequenos menus, coisas que só os administradores podem ver. A primeira coisa que quero falar é sobre temas. Você está indo para Aparência, clique em temas, e você pode ver aqui o tema que eu estava falando 2017 está instalado. Se você instalou isso em 2015, você teria obtido isso como seu tema padrão. Em 2016, você teria conseguido isso como seu tema padrão. Você pode entrar aqui e você pode visualizar ao vivo e ver como seu tema seria se você fosse usar esse tema. Em vez de alternar imediatamente, você pode ter um pouco de uma pré-visualização se você gosta. Ótima. Você pode ativar e publicar ou você pode alterar algumas das configurações aqui e, em seguida, ativar e publicar e você receberá esse tema. Agora, para explicar um pouco os temas, é basicamente como a pele do seu site. Organizará o layout e tal. Se olharmos para a pré-visualização de 2017 aqui, ele tem esta grande imagem com o título e subtítulo do seu blog. Desculpe, slogan é o que eles chamam no WordPress. Então você tem a barra de menu, e é uma coisa de paralaxe, então a imagem não muda, mas o conteúdo vem de baixo. Agora há, é claro, alguma personalização com isso. Podemos definir isso para uma página com conteúdo estático em vez de uma lista de todas as postagens do blog. Há muito que podemos fazer, mas basicamente a pele ou o layout são ditados pelo tema. Na verdade, uma das razões pelas quais eu gosto de usar Divi como tema, é que começa baixo bonito ou não faz nada louco com o layout. Ele só tem uma barra de menu, a barra lateral. É bastante mínimo, o que é bom porque nos dá muito espaço para personalização. Uma vez que instalamos o Divi e começamos a usá-lo, você começará a entender os temas um pouco melhor. Mas as outras coisas principais que conectamos ao WordPress é apropriadamente chamado plugins. Você pode entrar aqui e você pode ver quais plugins já instalamos. Estes são alguns plugins padrão que vieram com esta instalação WordPress. Se quiséssemos adicionar novo, existem milhares e milhares de plugins. O que são plugins? Plugins são basicamente funcionalidade extra que pode entrar em seu projeto. Se quiséssemos adicionar editar uma meta descrição, o que faremos em um vídeo futuro. Vou rever alguns dos plugins mais populares. Podemos adicionar um plugin SEO. Podemos adicionar coisas como o Google Analytics. Há alguns que fazem funcionalidade muito básica, que é apenas clonar uma página, soa muito básico, mas o WordPress não o inclui por padrão. Alguém duplique páginas. O que eu uso. Alguém fez um plugin com o qual você pode duplicar páginas. Para resumir temas e plugins. Temas como a sua pele, é o layout, é sobre o que o site é construído. Você dita o que vai nas páginas, mas o layout e o estilo básico são determinados pelo tema. Os plug-ins dão ao seu site uma nova funcionalidade que ele não tinha antes. Há um trade-off de plugins às vezes eles adicionam muito. Ele pode pesar o seu site. Se tudo o que requer é uma pequena mudança de código e você está feliz em entrar e mudar o código, então você está bem. Caso contrário, às vezes é melhor usar um plugin. Isso deve estabelecer o que é um tema e um plugin. Quero mostrar a vocês uma vez que entrarmos em um determinado tema, há uma opção para personalizar. Agora isso é configurado pelo desenvolvedor do tema. Eles escolhem o que colocar neste menu personalizado. Você está limitado apenas pelo que o desenvolvedor do tema decidir colocar aqui. Mas o que podemos fazer é colocar em nosso próprio logotipo. Podemos mudar o título e o slogan do site, que é a coisa que vem aqui. Podemos optar por não mostrá-los. Algumas dessas mudanças aparecerão ao vivo enquanto as estamos fazendo. Podemos mudar o esquema de cores. Aqui em baixo ele vai ser texto claro em um fundo escuro em vez de texto escuro em um fundo claro. Podemos criar menus aqui. Podemos criar widgets aqui, o que provavelmente é melhor fazê-los no painel de controle. Mas, basicamente, vamos criar uma mudança. Eu gosto deste fundo escuro, então eu vou clicar sobre isso e então eu vou clicar em publicar. Isso vai fazer nossas mudanças vidas. Isso foi só uma prévia. Agora está ao vivo porque diz publicado aqui. Agora, esse é provavelmente o primeiro lugar que você iria para personalizar seu tema. Mas você pode ir muito fundo. Quão fundo você pode ir é você pode realmente cavar no código. Você pode ir até aqui até o editor. Você tem controle completo do código-fonte do seu tema. WordPress está nos dando um aviso. Você tem a capacidade de bagunçar todo o seu site se você mexer com os templates PHP. Não é aconselhável fazer coisas aqui sem saber o que está fazendo e o que está tentando alcançar. Vou clicar em entender. Então vemos nossos arquivos de tema aqui. Esta é a folha de estilo que tem todos os nossos estilos. Então nós temos todos esses arquivos de modelo, que eu vou explicar um pouco mais tarde no curso. Basicamente, o que eu queria sair daqui é isso que torna o WordPress poderoso. Você tem opções de personalização de nível superior que permitem que você altere as coisas. Clicando em personalizar novamente, você pode entrar em construtores visuais e clicar em e alterar as coisas, como você faria em qualquer site sem qualquer código. Mas então se você precisa ir mais fundo, talvez haja algo aqui que você possa mudar. Você pode ir direto para o código e toda a base de código é completamente open source. Tenho uma instalação local bem aqui. Então eu posso te mostrar. Isso é algo que eu vou configurar mais tarde no curso na Instalação do WordPress localmente. Mas como você pode ver, este é WordPress bem aqui. Sim, há também um banco de dados que é completamente editável, mas aqui estão todos os seus arquivos. Se entrarmos em Conteúdo da WP e entrarmos em temas, então entramos em 2017, isso combinará com o que está aqui. Veja, temos a folha de estilo aqui. Folha de estilo ali. O arquivo functions.php, muito importante está lá, e também está lá. Você pode editá-lo aqui ou você pode editá-lo aqui. O ponto que estou fazendo é a personalização completa da base de código e também o benefício de ter um painel no qual você pode entrar e mudar as coisas sem ter que cavar no código. Isso é o que torna o WordPress realmente poderoso. É por isso que é um CMS muito popular. 4. Introdução ao Divi: Divi é um tema premium criado por uma empresa chamada Temas Elegantes. Infelizmente, como mencionamos anteriormente, Divi é um tema pago, e no momento da gravação deste curso, custa $89 por ano para ter os direitos de usar Divi. Agora, se $89 soa muito para você, apenas entenda o possível valor aqui. Com uma assinatura de US$89 por ano, você pode criar quantos sites Divi quiser. Se você está trabalhando como autônomo ou dirigindo uma agência, esses US$89 se tornam simples, pois você só paga uma vez por ano, e então você é capaz de oferecer esse valor a todos os seus clientes. Mas, cabe a você. Só posso falar por mim mesmo quando se trata de Divi, e devo dizer que vale a pena. Existem algumas alternativas que discutiremos em apenas um segundo, então fique atento. Por agora, porém, eu quero explicar mais sobre Divi, e para isso, é hora de retornar ao computador. Vamos ver como instalar Divi em um vídeo posterior. Mas apenas para lhe dar uma demonstração rápida, depois de instalar e ativar o Divi, seu site mudará para isso. Isso é basicamente Divi por padrão, e pode não parecer tão impressionante à primeira vista, mas o poder de Divi está no acúmulo de página. Então o que eu vou fazer é clicar em “Nova página” e podemos começar a ver o que os construtores de página Divi gostam. Agora, em uma página wordpress tradicional ou post wordpress sem Divi, isso é o que você usaria. Então suas opções aqui em cima e você pode colocar em um título. Então aqui em cima seria um título 1, então eu vou colocar em eles estão indo 2, e ser como bem, vamos apenas chamá-lo de cabeçalho 2 Eu não sei o que colocar lá, e então você tem parágrafo blah, blah, blah, blá, blá. Você pode ousar, você pode itálico, você pode alinhar para o centro para a esquerda, direita, fazê-lo em uma citação, inserir um link, todas essas coisas, mas isso é praticamente tudo. Você pode ir para o texto e editá-lo em estilo HTML. Então você verá que quando deixamos algo alinhado, ele está colocando em um estilo para alinhar à esquerda, então apenas para demonstrar que um align esquerdo, desculpe, texto na linha à direita, e ele muda lá, mas podemos ir para HTML e Mude para a esquerda e para a esquerda. Agora, isto é, editor normal do wordpress, mas o poder de Divi está no construtor de páginas, como eu disse antes. Vou clicar neste grande botão roxo para usar o construtor de páginas. Eu gosto de usar o editor padrão porque você pode ver a estrutura, mas você também pode usar um construtor visual que permite criar coisas, e vê-lo visualmente imediatamente. Nesta demonstração para mostrar o poder de Divi, eu acho que vai ser mais impressionante usar o construtor visual, então eu vou pular sobre isso. Ele pergunta se você quer fazer a turnê, você pode definitivamente fazer essa turnê, eu só vou começar a construir porque eu já fiz isso antes. Você tem sua página que é como em branco, mas então você tem isso que é a sua seção, você linha, você pode adicionar em outra linha. Você pode torná-lo uma linha de duas colunas e, em seguida, você pode inserir módulos. Eu só estou correndo por isso rapidamente como uma demonstração, você vai ver o que podemos fazer com mais detalhes mais abaixo da pista. Mas deixe-me ver o que vou colocar em uma imagem. Ainda não tenho imagens. Que fotos eu tenho? Tenho uma foto minha. Então eu posso colocar isso lá, e isso vai ocupar metade da página porque eu configurou um layout de duas colunas. Então aqui eu posso talvez configurar algum texto, e talvez a primeira parte do texto seja um grande título dizendo, “Oi, eu sou Chris.” Você pode ver que essas mudanças estão acontecendo vivo na sua frente, esse é o poder do construtor visual de divi. Isso é essencialmente o que um construtor de página faz, não necessariamente dessa maneira visual, mas permite que você crie uma página com base em seções, linhas, colunas e módulos. Isso difere ligeiramente entre construtores de páginas diferentes, mas geralmente é uma boa estrutura, uma boa hierarquia para ver as coisas: seções, colunas, linhas e módulos. É definitivamente assim que funciona em Divi. Então, se você gosta disso, por exemplo, talvez você queira colocar em outra seção, e pode ser uma seção de largura total ou uma seção regular, então ele vai perguntar novamente, quantas colunas você quer em sua linha? Talvez quatro colunas, você pode ver aqui. Agora, eu posso pressionar o botão e adicionar mais módulos. Você também pode adicionar um módulo de código personalizado, basta colocar o código que você quiser e ele ainda está alinhado. Eu acho que os maiores benefícios da construção de páginas é o layout, porque podemos facilmente criar esses layouts responsivos de quatro colunas. Se eu fosse, acho que não funciona quando se tem um construtor visual. Então você pode ver aqui é responsivo, que estava à esquerda e que estava à direita. Mas agora, uma vez que o encolhi, ele está entrando em um ambiente mais encolhido. Este é o poder de usar um tema premium, a propósito, é definitivamente tudo otimizado para dispositivos móveis para que você possa ter esses layouts fluidos, mas também você pode aproveitar os módulos. Então, o que seria legal, como um contador de círculo. Então tudo o que você precisa fazer é colocar um número. Você tem esse círculo que anima diretamente apenas colocando-o em como. Para codificar isso levaria muito mais tempo, mas você começa esses elementos ou seus módulos de código em Divi que você pode simplesmente jogar coisas em então digamos em 50 por cento completo. Então você pressiona “Tick”, e então você vem aqui, e então você pode publicar ou salvar rascunho. Então isso é essencialmente o construtor de página Divi e isso é o que torna Divi uma ferramenta poderosa para desenvolver na imprensa web. Mas é importante notar que Divi não é o único tema que vem com um construtor de páginas. Sinto que seria negligência da minha parte falar sobre Divi e nada mais. Um dos mais populares era anteriormente conhecido como Visual Composer e agora é chamado WP padaria page builder. Eu não sei por que eles mudaram o nome para isso, mas você ainda pode encontrá-lo usando o termo de pesquisa construtor visual. Você pode ir para sua página, e eles afirmam ser a palavra número um plugin construtor de página de imprensa. Portanto, tem a maneira muito semelhante de construir páginas com seções, linhas, módulos diferentes. Mas a grande diferença entre isso e Divi é que é para qualquer tema wordpress. Estes dois são os que eu usei pessoalmente. Eu usei este construtor de páginas em um tema chamado Fortuna. Então você pode ver se você vai para florestas temáticas, que é um lugar onde você pode encontrar temas premium, você vai encontrar alguns temas com compositor visual ou construtor de página WP Bakery como algo que está incluído. Se eu rolar para baixo aqui [ruído] é isso. Isso é um monte de demos. [ Risos]. Então o recurso destaca, obviamente tem que ser totalmente responsivo, nos dias de hoje, tudo precisa ser responsivo. Compositor visual, que eles ainda não mudaram o nome, vem com este e também plugin premium chamado Revolution Slider, então isso é apenas um exemplo. Tenho certeza que você vai encontrar outros temas que têm compositor visual instalá-lo também. Há outro chamado Elemental, qual meu amigo Louis me colocou. Ele diz que é o melhor construtor de páginas, é o novo. Ele também afirma ser o construtor de página número um wordpress. Ele não tem tantos usuários como construtor de página de padaria WP porque eles estão em torno de mais tempo. Mas ele jura por isso e na verdade tem uma versão gratuita. Então, se você está em um orçamento, eu vou apenas clicar preços aqui. Se você está em um orçamento, você pode obter a versão não pro, eu acho que a versão gratuita, tem funcionalidade semelhante. Se você quiser aprender mais sobre elemental, há um vídeo que você pode assistir aqui, eu não vou reproduzi-lo porque você pode assistir em seu próprio tempo. Eu pessoalmente não usa um antes, mas definitivamente dar-lhe uma tentativa se eu estava em um orçamento. Então, como eu disse, o resto do curso é focado puramente em Divi, porque seria muito demorado para mostrar como fazer isso em cada construtor de página, e muitos dos princípios são os mesmos. Então, o ponto que eu estou tentando atravessar aqui é o poder de usar um construtor de páginas com um tema premium, que nos permite criar sites muito mais rápido. Mas estamos usando wordpress, e se o construtor de página está configurado corretamente, ainda temos um monte de opções de personalização; podemos construir sites baseados em um design que o cliente nos dá ou que criamos nós mesmos. Isso nos dá um grande equilíbrio de ser capaz de construir páginas relativamente rapidamente, mas depois ser capaz de personalizar e editar qualquer coisa que precisamos. Se você está pronto para seguir em frente da teoria e do próximo vídeo, vamos finalmente ficar presos na construção do nosso site wordpress usando Divi. Estou animada para te ver no próximo vídeo. 5. Instalando o Wordpress — em seu computador: Neste vídeo, vamos instalar o WordPress. Há duas maneiras de fazer isso. Podemos instalar o WordPress em um host, então ele está ao vivo na Internet. Podemos fazer isso usando cPanel, e é realmente muito fácil, ou podemos hospedar localmente. Hospedar localmente significa que configuramos nosso próprio servidor, há um pouco mais de configuração que continua, mas então é completamente hospedado apenas em nosso computador. Não está na internet, basicamente. Há prós e contras em ambos, mas instalar localmente é um pouco mais complicado, então pensei em repassar isso primeiro. Se você só quer pular esta parte e ir direto para a instalação do WordPress em direto em sua hospedagem, você pode simplesmente pular em frente e verificar isso. Mas o que eu vou fazer primeiro, porque o que precisamos primeiro é o próprio WordPress. Então eu estou indo para o wordpress.org. Na verdade, antes mesmo de baixar o WordPress, vamos precisar de uma nova pasta para alojar o nosso site. Então eu vou para a minha pasta de código, e eu vou colocar, devo chamar isso, site Skillshare Wordpress. Então agora eu tenho um diretório onde eu posso armazenar nosso site. Eu vou clicar neste botão aqui em “wordpress.org” certifique-se de ir para wordpress.org, não wordpress.com, e então você só pode clicar neste botão aqui para baixar a versão mais recente. Então eu vou navegar para onde o nosso site WordPress vai ser, clique em “Salvar” e que vai salvar como arquivo ZIP para esse local. Então, se eu entrar aqui, há o arquivo ZIP, eu posso extraí-lo clicando duas vezes em “Mac”, e esta é a nossa configuração WordPress aqui. Então eu vou mover isso para aquele diretório, me livrar deste diretório que foi criado pelo arquivo ZIP, e me livrar do arquivo ZIP. Agora, a outra coisa que você vai precisar é de um servidor para executar isso. Como eu falei no último curso, o servidor que eu uso é chamado de MAMP. Isso é porque eu uso um Mac, você pode usar WAMP. Eu quero entrar em um monte de detalhes aqui porque eu fiz abordá-lo em minha aula anterior sobre compreensão de desenvolvimento web. Mas basicamente, as letras em MAMP significam Mac, Apache, MySQL e PHP. Então, as coisas importantes a observar aqui é que o WordPress é construído em PHP e MySQL, então é por isso que precisamos disso na pilha. Apache realmente não importa muito por que estamos usando o Apache. Então M significa Mac, porque eu estou executando um Mac. Se eu estivesse executando o Windows, eu usaria WAMP, que é todas as mesmas letras, exceto W para Windows, e depois LAMP para Linux. Para não confundi-lo muito, se você não tem o MAMP já baixado e instalado, você pode clicar aqui. Se você precisar de ajuda para configurar isso, definitivamente confira o vídeo sobre a instalação de um servidor da minha classe anterior. Então eu já tenho o MAMP instalado, então eu vou entrar aqui. O que eu preciso fazer, se você se lembrar do último curso, é direcionar o MAMP para o diretório do projeto. Desculpe, talvez eu tenha feito isso um pouco rápido. Aqui está um anúncio, muito irritante. Eu vou entrar em Preferências MAMP, e então eu vou para o servidor Web. Como você pode ver, links para a última classe de Skillshare que eu fiz, que eu acabei de chamar de Curso de Skillshare do Project Directory nessa. Este eu estou armazenando em código, eu vou para o site Skillshare WordPress e eu vou clicar em “Selecionar”. Então eu vou clicar em “Ok” e, em seguida, eu vou clicar em “Iniciar serviço”. Vai levar um pouco de tempo, mas então você deve esperar ver esses dois acender verde, e de repente sua página inicial MAMP começa. Então, se você quiser chegar rapidamente ao seu site, você pode clicar em “Meu site” eo que vai acontecer é que ele vai trazer WordPress. Então, nesta fase, tudo que você tem que ser claro, são os arquivos WordPress nesse diretório. Agora, há dois aspectos para WordPress. Um é o código, que é todos os arquivos de código que temos aqui. Basicamente, os templates PHP e tudo o mais que vem com ele, o material front-end que é armazenado em temas, mas estamos ficando um pouco à frente de nós mesmos. Em seguida, a outra parte é o banco de dados. Então você precisa de ambos para executar o WordPress. Temos o nosso servidor aqui, que está realmente executando o MySQL, como podemos ver aqui, mas ainda não temos um servidor configurado para WordPress. Novamente, se você estiver configurando isso no cPanel em seu host, você nem precisa fazer isso, ele simplesmente instala automaticamente. Mas como estamos fazendo isso localmente, ele vai configurar um novo banco de dados para nós. Então, depois que eu escolher o idioma, eu sou levado para esta tela, que está me informando que eu preciso configurar o banco de dados. Infelizmente, através da configuração do WordPress, eles não são capazes de afetar o banco de dados, mas as informações que vamos colocar e, em seguida, na próxima guia, vamos para o que é chamado de um arquivo wp-config, que é onde você armazenar esta informação acima aqui, que permite que o WordPress se conecte ao seu banco de dados. Novamente, se você estiver usando cPanel e você está fazendo isso diretamente em sua hospedagem, isso é feito automaticamente, então você não precisa se preocupar com isso. Então, talvez se isso for um pouco complicado demais, basta hospedá-lo via instalação de um clique, que será o próximo vídeo. Caso contrário, se você definitivamente deseja hospedá-lo localmente, continue junto. O que precisamos fazer é, como diz, criar um banco de dados. Então eu vou voltar para a página inicial aqui, ir para Ferramentas e clicar em “phpMyAdmin”. Se você perdeu essa página, o URL é apenas o host local. Em seguida, a porta, que para mim é 8888/phpMyAdmin. Agora, o que vamos precisar fazer aqui é configurar um novo banco de dados, e podemos fazer isso clicando em “Novo”. Então aqui, eu vou apenas chamar este wordpress de habilidade. Então agora temos um banco de dados em branco em nosso phpMyAdmin, que é tudo o que precisamos para o WordPress entrar e criar todas as tabelas e os dados iniciais para basicamente começar com o WordPress. Então, felizmente, nós não temos que criar todas as tabelas no banco de dados nós mesmos. Nós também poderíamos configurar um usuário aqui como eu fiz aqui, mas nós também não precisamos fazer isso. Então o que podemos fazer, é que existe um usuário padrão que podemos usar, que é apenas o usuário root. Se eu voltar aqui, vamos colocar isso em prática. Vou copiar o nome do banco de dados, colocá-lo lá, e então para nome de usuário e senha, eu posso apenas colocar root. Não é tão importante mudar seu nome de usuário e senha e ter tudo configurado porque estamos rodando localmente. Basicamente, ninguém poderia hackear seu banco de dados, a menos que eu tivesse acesso ao seu computador. Enquanto que se isso estivesse online, você provavelmente não iria querer usar root e root porque isso seria muito mais hackable. Host do banco de dados, podemos deixar como localhost e prefixo da tabela. Então é sempre uma boa idéia deixar isso como wp_ apenas para seguir a convenção. Então, quando clicamos em “Enviar” aqui, esperamos que a conexão seja bem-sucedida. Então isso confirma que todos os detalhes estão corretos, e podemos apenas clicar em “Executar a instalação” e agora WordPress vai configurar o banco de dados para nós. Então, para o título do site, vou chamá-lo de Christopher Dodd porque esse é o meu nome. Nome de usuário, vou chamá-lo de administrador. Vou usar a sugestão deles, e é sempre uma boa ideia guardar nomes de utilizador e palavras-passe. Então eu vou abrir um arquivo de edição de texto e clicar em “Novo documento”. Por isso vou pôr isto aqui para não me esquecer. Este vai ser o seu login WordPress. Sim, certifique-se de manter isso porque você vai precisar dele sempre que você entrar no seu site WordPress. Vou colocar no meu endereço de e-mail para que eu possa ser contatado sobre este site, porque estamos fazendo localmente, não precisamos desencorajar os motores de busca de indexar o site, porque ele nem está na internet. O passo final é clicar em “Instalar o WordPress”, e ele diz que ele está instalado agora. Agora, o que eu quero que você faça é voltar para o seu phpMyAdmin e apenas atualizar. Então você pode atualizar aqui ou você pode atualizar aqui, e de repente você verá que há todas essas tabelas. Alguns deles, tenho certeza, já terão muitos dados colocados. Então, para passar e fazer isso manualmente seria ridículo, então felizmente, WordPress define tudo isso para nós na famosa instalação de cinco minutos. Agora, podemos entrar no nosso site, ou se quisermos apenas vê-lo, este é o nosso site. Então, se quisermos fazer login, você pode pegar isso, e bem. Agora, o benefício de hospedar localmente é, número 1, se você quiser mantê-lo completamente privado e você definitivamente não quer que ninguém veja. Não está na internet, então ninguém pode encontrá-lo. Além disso, você tem acesso aos arquivos diretamente no seu computador, que você possa editar qualquer coisa de forma rápida e fácil. Você não precisa carregar, baixar. Poderíamos abrir e abrir com nosso editor de código. Sim, há benefícios, prós e contras em ter hospedado localmente versus desde o início. Um dos negativos disso é que vamos ter que migrar o site para obtê-lo na internet, mas isso não é grande coisa, porque eu vou estar mostrando a vocês como fazer isso no final do curso. Então é assim que instalar o WordPress localmente. Basta lembrar que toda vez que você iniciar o seu computador, você terá que iniciar o seu servidor novamente para acessar este site. Ele não funciona a menos que o servidor esteja em execução. Mas sim, é isso. Agora você tem uma nova instalação WordPress para trabalhar com. No próximo vídeo, vou abordar brevemente como fazer isso diretamente no cPanel na Nuvem, na Internet, na sua conta de hospedagem, que é apenas um pouco mais fácil. Então eu vou vê-lo no próximo vídeo. 6. Instalando o Wordpress — cPanel: No último vídeo, configuramos o WordPress localmente. Mas neste vídeo, vou mostrar-lhe como configurar WordPress no cPanel, em sua hospedagem. Na verdade, é bastante simples, cPanel torna isso muito fácil. O que eu vou fazer é abrir uma nova janela e eu vou para um domínio que eu já configurou. Se você fez o último curso comigo, você se lembraria de skillsharecourse.space. Atualmente não há nada lá, então eu vou receber esse erro. Mas você pode acessar o seu site cPanel colocando traço cPanel. Agora, se você não está seguindo bem aqui, basicamente o que eu já fiz é que eu criei um domínio e então eu tenho ligado a esse domínio para hospedagem e se isso tudo é novo para você, definitivamente voltar para a classe anterior, que está entendendo o desenvolvimento web e check-out das seções sobre como implantar seu site na Internet. Confira a diferença entre domínio e hospedagem, se você não estiver familiarizado com isso. Mas basicamente estamos começando do ponto final da última aula. Se isto não faz sentido, encorajo-te a voltar e ter essa aula. De qualquer forma, estamos agora no cPanel e como você vê, eu tenho um monte de logins já porque eu gerenciei cPanel em um monte de contas. Mas o que eu basicamente fiz para o meu site, Eu já configurou um nome de usuário cPanel. Estou usando a mesma senha que usamos para nossa instalação local. Mas eu não podia usar o administrador porque eu já tinha usado esse antes. Então o curso Skill Share é o nome de usuário na minha instância. Vou clicar em “Login” e agora estou no cPanel. Agora, quando você está no cPanel, tudo que você precisa fazer para instalar o WordPress é ir para aplicações web e, em seguida, clique em “WordPress”. A grande coisa sobre a instalação através do seu cPanel é que você não precisa configurar o banco de dados. Basta clicar neste botão, instalar este aplicativo e eu não quero um diretório, eu só vou tê-lo direito no domínio raiz. Tudo o resto está bem, o que eu vou fazer é usar os mesmos detalhes de login que definimos para a versão local. Idealmente, você não gostaria que sua senha o mesmo para cPanel e WordPress, mas depois deste curso, eu vou excluir de qualquer maneira, por isso realmente não importa muito. Para o e-mail de administrador, eu vou colocar no meu e-mail para que este site possa me contatar se houver algum problema ou uma notificação, título do site vai ser Christopher Dodd e eu vou colocar meu slogan como Desenvolvedor Web WordPress. Podemos deixar tudo como padrão e, em seguida, clique em “Instalar”. Além disso, se você fez a última aula sobre o desenvolvimento web permanente, você teria me visto fazer isso antes também, é muito rápido e muito fácil. Então, assim, seu site WordPress agora está instalado e você pode ir para aqui e de repente eu estou no meu novo site WordPress e se eu quisesse ir para o administrador, eu vou para o administrador assim e é apenas o nome de usuário e senha configurados no processo de instalação. Lá você tem, temos uma nova instalação WordPress. Então, a partir deste ponto, você pode decidir, quero dizer, você provavelmente já decidiu, mas a partir deste ponto você pode trabalhar na nuvem ou você pode trabalhar na instalação local. Parecendo que já o tenho configurado localmente aqui e geralmente é mais fácil trabalhar com arquivos locais, além disso, vou migrar em um vídeo posterior. Eu vou fazer isso na hospedagem local. Mas você pode muito bem fazê-lo diretamente da hospedagem on-line. Isso cobre a configuração do WordPress. O próximo passo é mudarmos este tema. Este é o tema padrão do WordPress e, claro, o tema que estamos usando é Divi. Mas há um conceito importante para aprender sobre a construção temas ou personalizar temas e que é tema filho. No próximo vídeo, vamos criar um tema filho e falar sobre o que é um tema infantil e por que você deve usar um. Vejo-te no próximo vídeo. 7. Criando um tema filho do Divi: Então, porque estamos falando sobre a criação de um novo tema em nosso site WordPress, eu estou começando aqui na seção Temas. Na realidade, não podemos adicionar um tema Divi a partir daqui, porque é um tema premium. Só para mostrar, se clicarmos em “Adicionar tema”, podemos pesquisar todos os temas já disponíveis no WordPress.org, e todos esses, quando você instalá-los, devem ser gratuitos ou pelo menos gratuitos para começar. Eles podem cobrar mais por uma versão premium mais tarde, mas se você quiser apenas ir com um tema gratuito, então você pode olhar aqui. Como estamos usando um tema premium, no caso de Divi, temos que pegar esse arquivo deles, e a maneira como fazemos isso é fazer login na nossa conta Elegant Themes. Na verdade, antes de eu saltar para isso, Eu só queria fazer nota que eu vou estar criando meu site WordPress no host local, então eu estou fazendo isso localmente. Lembre-se, eu também fiz isso em um domínio remoto, bem como, SkillShareCourse.space. Se você se lembra de antes, nós criamos WordPress em nossa hospedagem na internet antes, mas vai ser um pouco mais complicado para acessar esses arquivos. O que eu vou fazer com a minha instalação local é que eu posso ir diretamente aqui e editar esses arquivos. No caso em que você está executando seu site WordPress completamente em hospedagem, completamente remotamente, e você não está hospedando localmente, você terá que encontrar uma maneira de acessar esses arquivos e a melhor maneira para mim fazer que é FTP. Agora, como abordamos o FTP na última aula, eu não vou revê-lo novamente, mas se você precisar de ajuda para acessar os arquivos em seu servidor remoto, definitivamente volte a entender o desenvolvimento web e confira a lição sobre FTP. Com isso fora do caminho, eu vou para Elegant Themes e eu vou fazer login, e eu vou pegar a versão mais recente do Divi. Ao entrar em Temas Elegantes, você receberá esta Área de Membros, onde poderá ver seus downloads. Eles têm algumas outras coisas que você pode baixar aqui também, incluindo Monarch, que é um plug-in de compartilhamento social que eu uso. Vá para Divi e, em seguida, clique em “Download” e você verá que eu tenho este entre parênteses, porque eu realmente já baixei Divi, mas só para ter certeza que eu tenho a versão mais recente, eu vou salvar isso e bang, eu tenho isso baixado. Agora que você tê-lo baixado, você pode voltar para o seu WordPress Dashboard e, em seguida, em sua seção Tema, clique em “Carregar Tema”, entrar aqui e enviá-lo. Agora, porque eu sou local, ele não está realmente carregando, ele está realmente fazendo tudo no meu próprio computador. Upload é um termo falso aqui, mas não importa. É a mesma coisa. Será a mesma coisa fazer isso em sua hospedagem remota também. Se você não está convencido de que deseja ativá-lo, você pode pré-visualizar ao vivo no início, mas como estamos começando do zero, não há progresso feito. É completamente seguro apenas clicar em “Ativar”. Temos Divi instalado, e eu quero que você perceba o que acontece aqui quando vamos ao nosso site WordPress. Veja como é completamente diferente. Não me entenda mal, os tipos de postagem que tínhamos antes, ainda temos Olá Mundo, ainda temos esses comentários fictícios, e ainda temos uma página de exemplo, mas como tudo é definido é completamente diferente. Se você se lembra antes, nós tivemos esse tema indo com a pequena planta pop e o título lá, nós temos Divi agora, que na primeira olhada, parece bastante urso, mas isso é realmente uma coisa boa, porque nós pode personalizá-lo mais facilmente para o que queremos. É melhor começar a partir de um ponto de partida nu e ser capaz de construir sobre isso, do que ter todos esses layouts extravagantes e depois ter descobrir como apenas voltar para um layout regular. O que eu vou fazer agora, antes de começar a personalizar a nossa instalação Divi, é criar um tema infantil, que é o ponto principal que eu quero fazer neste vídeo. Para saber um pouco mais sobre temas filhos, copiei um URL aqui. Isso está no codec WordPress.org. Você pode ler mais sobre temas infantis aqui. Ele fala sobre por que usar um tema filho, como criar um tema filho, e os diferentes arquivos de modelo e tudo, mas talvez o que não está coberto é o que realmente é um tema filho? Um tema filho é basicamente um novo tema. Haverá um novo tema aqui, mas essencialmente ele vai ter apenas alguns arquivos diferentes lá, e ele faz referência a um tema pai. Neste caso, vai ser Divi, que vai ser o tema dos pais. O ponto de um tema filho é que podemos fazer atualizações ou edições para o tema pai, sem realmente tocar no tema pai. O que acontece é quando criamos este tema filho, e eu vou mostrar-lhe em apenas um segundo, a instalação do WordPress vai olhar para o tema filho, ele vai para esses arquivos primeiro, mas se ele não conseguir encontrá-los, Vai direto para os pais. Isto é muito limpo. Se você vai fazer a edição do tema, é melhor deixar isso limpo como está, para não entrar e mudar o que Divi ele fez, mas se você quiser fazer modificações, é melhor colocá-lo em um tema infantil. A maneira mais fácil de pensar em um tema filho, eu diria, é que é apenas um tema no qual você coloca em todas as suas personalizações enquanto ainda aproveita o tema pai, e mantendo suas personalizações e o tema principal separados, mas ainda sendo capaz de alavancar ambos os benefícios. Novamente, eu estou falando teórico aqui, nós realmente vamos ver um tema infantil agora. Primeiro de tudo, por que usar um tema infantil? Nós já conversamos um pouco sobre isso. É uma ótima maneira de aprender sobre o desenvolvimento de temas, mas a maior razão é manter as coisas limpas. Você vai ter seus arquivos modificados em um tema e você vai ter o tema original não modificado em sua própria pasta tema. Podemos seguir os passos aqui, mas porque estamos usando Divi, Divi realmente tem um tutorial sobre como criar um tema infantil especificamente para Divi. Eu vou digitar o tema infantil Divi, e aqui mesmo, eu acessei isso algumas vezes. É chamado de guia final para criar um tema infantil Divi. Porque eu estou fazendo isso localmente, eu posso ir direto para este diretório aqui. O que eu preciso fazer é ir para o diretório de temas. Eu vou fazer WP conteúdo. Vou entrar em temas. Abri os dois acidentalmente. Vou entrar em temas e você pode ver aqui Divi. Agora não queremos tocá-lo, como dissemos antes, queremos manter o Divi limpo e isso significa que quando atualizarmos o Divi, isso não quebrará nenhuma dessa personalização. Em vez disso, vamos criar uma nova pasta chamada Divi child, e você pode chamar isso do que quiser. Divi child é apenas o nome mais descritivo possível. Para que um tema filho funcione, há um arquivo essencial que você precisa, e que é um style.css. Eu vou rolar para baixo onde ele te dá o código exato para colocar dentro Aqui você pode ver a direção que eu acabei de lhe dar com a criação de um diretório Divi-Child no diretório de temas, e então o próximo passo é adicionar o style.css. Você pode simplesmente copiar e colar isso diretamente. Eu vou copiar isso e eu vou criar um novo arquivo com meu editor de código, Atom. O átomo está aberto agora. Vou criar um novo arquivo. Vou colocar essa cópia e código colado. Eu vou para “Salvar como”, e eu vou voltar para o meu diretório WordPress. Eu vou para o meu diretório de temas, encontrar meu tema filho, Divi-child, e eu não vou chamá-lo de “fz3temp-2", isso é simplesmente ridículo. Ele tem que ser chamado style.css. Definitivamente não mude isso. Este é o nome do arquivo que o WordPress vai procurar, então certifique-se de que é style.css. Essa é a base para o tema do seu filho. Uma outra coisa que você deve colocar é um arquivo PHP de funções, e que irá enfileirar sua folha de estilo de tema pai, que significa que ele vai olhar para isso primeiro, ele vai obter a informação, mas então ele vai levar os estilos do tema pai. Novamente, basta copiar e colar. Eu vou levar isso. Vou criar um novo arquivo em átomo, colar isso. Vou salvar isso como functions.php. Novamente, é muito importante o que você chama estes, porque estes são todos arquivos de modelo WordPress. WordPress vai olhar especificamente para esses nomes. Vou chamar isso de function.php. Essencialmente, isso é tudo que você precisa. Você pode criar uma miniatura para o seu tema filho Divi, mas você realmente não precisa. Você será capaz de apenas ler o nome. Se você quiser ser criativo, você pode alterar a miniatura, mas isso realmente não é importante. O que vai acontecer agora é que vamos para a nossa seção Temas do nosso site novamente. A propósito, esta área aqui, tudo o que está fazendo é referenciar as pastas aqui. Você pode ver Divi, 2015, 2017, 2016. Esses são todos os temas aqui. Então, se atualizarmos a página, você verá nossa pasta recém-criada, a criança Divi está lá e não tem uma miniatura, porque como eu acabei de mencionar, nós não colocamos em uma miniatura, mas Realmente não importa. Podemos entrar e clicar em “Ativar”, e agora vamos mudar para o nosso tema filho. Se tudo correr bem, podemos recarregar e é exatamente o mesmo site. Você pode estar pensando, bem, Chris, se vai ser exatamente o mesmo, por que criamos um tema infantil? A razão pela qual, como eu disse, é apenas colocar suas modificações em um arquivo diferente. O que podemos fazer é colocar mais funções aqui. O que podemos fazer é adicionar estilos personalizados aqui, que a propósito, vamos fazer algumas personalizações de temas neste curso, então você realmente vê como é atualizar um tema filho e quais modificações vamos realmente fazer, mas por enquanto, nossa base teórica, podemos colocar todas as mudanças que queremos neste tema e então não precisamos modificar o tema original. Espero que você entenda o que um tema infantil é agora, pelo menos de um ponto de vista teórico. Como eu disse, nós vamos realmente editar este tema filho, criar algumas modificações. É muito boa prática ter um tema infantil. Eu diria que essa é uma das coisas que eu não fiz quando eu estava começando, e eu gostaria de ter feito. É apenas uma boa prática para fazer e também torna as coisas muito mais limpas. Realmente importante que você tenha esse tema infantil configurado, e com isso feito, é hora de realmente ficar preso em Divi e fazer algumas personalizações. Vejo você no próximo vídeo. 8. Primeiros passos com o Divi: Neste vídeo, vamos abordar como começar com Divi. O que quero dizer com isso é, alterando algumas das configurações padrão aqui. Obviamente, a primeira coisa que se destaca para mim é que temos o logotipo Divi em vez do nosso próprio logotipo. O menu é terrível, temos “Página de Amostra” e “Sem Categorias”. Este é apenas um comportamento padrão, estamos mostrando em nossa primeira página uma coleção de todas as postagens do blog. Agora só temos uma postagem de blog que diz, “Olá Mundo”, que é apenas um pedaço de conteúdo fictício com o qual o WordPress começa. Mas se tivéssemos vários posts de blog este seria um índice que poderíamos percorrer. Também é colocado na barra lateral. Finalmente, ele é colocado em um rodapé com, “Desenhado por Temas elegantes” “Powered by WordPress”. É muito marca Divi no momento, os menus estão errados, o conteúdo fictício, e nós temos uma barra lateral. A primeira coisa, como mencionei, é que quero atualizar o logotipo do site. Agora, há dois lugares onde você pode personalizar seu tema. Você pode usar o “Personalizador de Temas”, como passamos antes. Divi oferece muitas opções aqui. O lugar que eu gosto de olhar primeiro quando eu estou mudando as opções para Divi é, se eu entrar no “Dashboard”, nós temos um novo menu aqui que não estava aqui antes, obviamente, ele acabou de ser colocado por Divi, onde podemos entrar em nossas “Opções de tema”. Novamente, os dois lugares que você deve olhar para personalizar Divi antes de cavar em qualquer código seria, “Theme Options”, “Theme [inaudível] “, e “Module Customizer”, Eu não tive que usar muito, mas, isso também é um lugar onde você pode criar personalizações. Agora, uma vez que você chegar às opções de tema “Geral” do Divi, que é a primeira aba que aparece, você terá o primeiro campo como “Logo”, que é apropriado porque essa é a primeira coisa que eu gostaria de mudar. Eu vou entrar em uma pasta que eu preparei de arquivos para este curso WordPress. Eu tenho este logotipo, é um logotipo muito terrível, que eu criei. Eu basicamente rastreei uma foto do meu rosto e vou usar isso como meu site. Agora, por razões SEO, você vai querer colocar algo um pouco mais descritivo aqui. Na verdade, o título provavelmente deve ser um pouco diferente. Por aqui, eu vou dizer, “Christopher Dodd, Desenvolvedor Web.” Em seguida, vou clicar em “Definir como logotipo” e esse será o logotipo. Há muitas outras opções aqui nas opções Divi, mas por enquanto eu vou apenas clicar em “Salvar alterações” e então eu vou ver o site. Como você pode ver, meu rosto é agora o logotipo do site. O que eu quero fazer a seguir é mudar esta primeira página. O que eu preciso fazer para isso é, por padrão, e isso acontece em qualquer tema WordPress, é que ele vai mostrar todos os posts do blog que ele vai fornecer um índice de blog. Muitas vezes, a maioria dos sites que você não quer apenas mostrar o índice do seu blog. É importante saber como mudar isso e é uma questão muito simples. Basta entrar em “Configurações ”, acho que está lendo. Em seguida, sua página inicial exibe o que você precisará mudar. Agora, ele exibe as últimas postagens, mas podemos criar uma página estática. Eu deveria ter criado uma página com antecedência, mas vamos usar a página de exemplo por enquanto. Vou clicar em “Salvar alterações”. Agora, quando voltarmos para a página inicial, temos a página de exemplo e é bom porque é colocado em algum conteúdo lá. Você pode ver como seria agora com uma página em vez do índice do blog na primeira página do seu site. A próxima coisa que quero fazer é atualizar meu menu. Vou voltar para o “Dashboard”. A maneira de acessar o menu é através de “Aparência” e, em seguida, clique em “Menus”. Vou dar um nome ao meu menu e vou chamá-lo de “Menu Principal”. Você pode ver que eu já fiz isso antes porque eu tenho sugestões chegando. Clique em “Criar Menu”. Agora, eu tenho este menu e antes de colocarmos páginas nele, que a propósito nós realmente não temos nenhum, eu vou clicar em “Localização de Exibição”, que é “Menu Primário”. “ Salvar Menu” para garantir que ele apareça nesse local. Porque só temos uma página, vou adicionar apenas uma página ao menu. “ Salvar Menu” novamente. Quando eu for aqui, antes de você atualizar, certifique-se de olhar para isso e você verá que quando eu atualizá-lo, ele aparece com meu novo menu, que só tem um item agora. Só para ficar claro, a razão pela qual é azul e não escuro como o resto destes é porque, esta é a página ativa. Agora só temos uma página, então vai ficar azul para a primeira página, mas podemos adicionar mais páginas. Apenas para demonstrar o menu, não temos muitas páginas para vincular, mas podemos criar nossos links personalizados. melhor maneira de criar um link fictício é apenas colocar um hash. Mas podemos dizer que talvez, queremos ter uma “Guia Portfólio”, talvez queiramos ter uma “Guia Serviços”, e talvez queremos uma “Guia para Blog”. O que você verá aqui é que você tem todos esses links agora. Eu vou me livrar de “Sample Page” porque é a página inicial, nós realmente não precisamos tê-lo como um link de menu. Mas uma outra coisa que vou mostrar sobre menus é que podemos ter menus aninhados. Vou te mostrar isso agora. Digamos que, você tinha um blog e tinha tópicos diferentes, então talvez um dos tópicos seja, “WordPress”. Ele irá adicionar a este menu. O que eu posso fazer para torná-lo um item de submenu de outro item de menu é clicar nele. By the way, eu posso arrastá-lo para diferentes posições no menu, mas, se eu arrastá-lo apenas um pouco para a direita, você pode ver que ele está um pouco recuado. Eu coloquei. Agora ele vai dizer, “Sub Item” e isso é um “Sub Item” de “Blog”. Para ver essa alteração, vou clicar em “Salvar Menu” e, em seguida, vou atualizar. Como você pode ver, nós temos o link “Portfolio”, e então você tem o link “Blog”, e então você tem o sub-link do blog que é “WordPress”. Esse é o seu cardápio. A próxima coisa de importância é provavelmente o “Theme Customizer”. Vou entrar na página. Clique em “Personalizador de temas”. Você pode fazê-lo a partir do front-end ou do back-end. Como você faria isso no back-end seria, “Aparência” e, em seguida, “Personalizar” aqui. Mas, você pode fazê-lo enquanto estiver no site. O que é poderoso em Divi é que podemos alterar as configurações de “Tipografia”, podemos aumentar o “Tamanho do Texto do Corpo”. Estas são algumas mudanças gerais como tipografia que irão por todo o nosso site, a menos que as substituamos. Ele nos permitirá alterar a fonte do cabeçalho e a fonte do corpo, para que possamos mudar o que você quiser. Vamos escolher, eu acho que [inaudível] é bonito em se eles têm isso. - Não. Que tal “Anaheim “? - Não. É um pouco boxe, não é? Você entendeu o ponto. Você pode colocar o que quiser lá. Então, a fonte do corpo. Vou fazer “Abel”. Uau, isso não é muito legível. Isso também não é ótimo. Estes são muito elegantes, mas não muito legíveis. Droid Sans, tudo bem, Droid Sans vai fazer. Podemos mudar a cor do link do corpo. Como você pode ver aqui, isso é um link. Podemos modificar e, de repente, isso muda. Vou criar padrão porque o azul tem sido historicamente a cor do link muitas pessoas saibam que um texto azul é um link, e podemos alterar a cor do corpo do texto. Talvez queiramos mais desmaios que provavelmente recomendaria ou mais preto. Podemos fazer isso também. Então você entendeu o ponto. Vou clicar em Publicar para que essas alterações estejam ativas. Vou voltar para aqui, configurações de layout. Você tem um monte de configurações em Divi para ser honesto. Você pode ficar muito empolgado e você poderia apenas ficar por aqui e, na verdade, isso é provavelmente uma boa recomendação para apenas ficar aqui e ver o que você pode personalizar. Jogue porque esta é a camada de nível superior de personalização no Divi. O nível mais profundo seria escrever código, mas este é provavelmente o primeiro lugar que você deve olhar para este e as opções de tema que eu tinha falado antes. Podemos alterar o esquema de cores geral também.Você começa a imagem. Podemos personalizar coisas que acontecerão com todo o nosso site através deste menu. Então nós temos o logotipo, nós temos nosso próprio menu, e nós mudamos a primeira página de posts para uma única página que vamos editar mais tarde. Mas a barra lateral na página inicial, não é uma boa aparência agora. Então o que eu vou fazer é ir para menus e eu vou para widgets. É um local um pouco confuso, mas sua barra lateral está configurada com widgets. Então, se você quiser encontrar sua barra lateral e personalizar os widgets dentro dele, você pode entrar lá. Agora eles jogam muito aqui que você provavelmente não precisa. Quase não vejo ninguém tendo um meta-menu na barra lateral. Categorias que você pode colocar se você acha que isso é bom, arquivos se você acha que isso é o que você quer mostrar para o seu público, mas nós provavelmente podemos nos livrar de muito disso. Então o que eu vou fazer é simplesmente apagar todos esses arquivos, comentários recentes, pesquisa. Você pode procurar a barra superior, na verdade, a barra de menu. Não precisamos procurar duas vezes. Eu só vou deixar posts recentes porque eu pessoalmente gosto de ter postagens recentes na minha barra lateral, e eu vou dar a ele um título de postagens recentes para que as pessoas saibam que são minhas postagens recentes. Eu acho que ele tem postagens recentes por padrão. Se eu atualizar a página agora você pode ver que a barra lateral aqui mudou. Em vez de ver todos esses widgets que realmente não precisamos, acabamos de receber os posts recentes. Isso é ótimo. Ao mesmo tempo, eu não quero ter uma barra lateral na primeira página do meu site de qualquer maneira. Você vai ver como nós construímos esta primeira página com Divi, vou querer que a primeira seção seja de largura total e também eu não quero confundir um usuário com muitos links na primeira página. Então eu não quero que essa barra lateral apareça. Com Divi, é muito simples desativar a barra lateral. Eu vou clicar em “Editar página” e há realmente mais à direita aqui, configurações de página Divi. Então aqui no layout da página, ele está definido para incluir a barra lateral direita agora, mas eu poderia mover a barra lateral para a esquerda se eu quisesse, ou eu posso ir para a largura que se livra da barra lateral completamente. Eu gosto disso. Vou clicar em atualizar e diz página atualizada. Então eu posso clicar em ver página e, de repente, não há barra lateral. Então, se eu for conferir um post de blog, vamos dizer olá mundo, eu posso acessá-lo assim com o URL, e se olharmos para o post podemos ver o post lá e podemos ver a barra lateral. Então, se você quiser desligar este lado completamente, há maneiras de fazer isso. Podemos escondê-lo com CSS. Também podemos alterar o modelo. Mas se você estiver feliz em editar isso para cada página individual, você pode fazer isso por meio de Editar Página. Então a última coisa que eu queria mudar era o rodapé. Agora diz Designed by Elegant Themes, powered by WordPress. Mas nós realmente não precisamos primo temas elegantes ou WordPress se não quisermos. Na verdade, esse é um bom espaço para colocar em algumas informações de direitos autorais ou um link para o nosso próprio site, ou se você é capaz e o cliente não se importa, talvez você queira colocar design por e você vai ligar lá. Mas definitivamente pergunte ao seu cliente ou a quem você está construindo o site se você pode fazer isso primeiro se você quiser fazer isso. Essencialmente, não há necessidade de ter Temas Elegantes e links WordPress abaixo em seu rodapé. Então o que eu vou fazer é eu vou mudar isso indo para o Theme Customizer. Que lembre-se, podemos ir para o nome do nosso site, rolar para baixo, clique em Personalizador de tema, ou, claro, podemos entrar em aparência personalizada através do painel também. Eu posso apenas ir para o rodapé que é na verdade apenas uma parte da barra inferior do registro completo, a parte que estamos tentando editar. Então eu posso ir para a opção da barra inferior e eu posso editar os créditos da foto. Então eu só vou dizer copyright Christopher, e então eu posso colocar em algum HTML lá também. Então eu poderia colocar em um link tag e eu posso fazer com que ele link para outro site. Novamente, eu estou apenas colocando em um hash apenas para ser um titular lugar e então você pode ver agora o texto é um pouco diferente para indicar que é um link. Você também pode desativar os créditos de fotos completamente para que ele nem precisa dizer direitos autorais Christopher em tudo. Então você pode simplesmente desativá-lo completamente ou você pode ativar isso e ter seu texto personalizado. No canto inferior direito você deve ter notado esses links que vêm de Divi. Se eu clicar em Publicar aqui, mostrarei onde você pode acessá-los. Já tenho as opções temáticas abertas aqui. Você pode colocar em seu Facebook, seu Twitter, seus links do Google Plus lá e assim quando alguém clicar neles, ele vai para esses links. Honestamente, eu tenho Facebook e eu tenho Twitter e não um grande usuário do Google Plus. Muitas vezes estou escondendo essa seção e colocando meus próprios links sociais. Também gosto de ligar a outros perfis, não apenas a esses três. Então eu não tenho certeza por que Divi escolheu esses provavelmente porque eles são os mais amigáveis blogueiros, mas eu gosto de vincular ao YouTube e Instagram. Eu costumo criar minha própria foto com esses links lá dentro. Então, basicamente, temos a base do nosso site. Temos uma primeira página e um menu que realmente não faz nada ainda, mas vamos chegar a isso. A coisa mais importante que o nosso site precisa agora é o conteúdo. Então, no próximo vídeo vamos falar sobre adicionar conteúdo, porque se você não tem nenhum conteúdo, você não tem nada para exibir e é difícil até mesmo organizar seu site quando você não tem nada nele. Então, vamos adicionar algum conteúdo no próximo vídeo, e nos vídeos a seguir vamos continuar com algumas personalizações e construção de páginas. Então, vemo-nos no próximo. 9. Adicionando conteúdo ao seu site: Tudo bem. Então este vídeo, nós vamos estar falando tudo sobre conteúdo e vamos adicionar algum conteúdo ao nosso site WordPress. Lembre-se, WordPress é a plataforma mais popular para construção de sites baseados em conteúdo e para um site baseado em conteúdo, para ser um bom site baseado em conteúdo, ele precisa ter conteúdo bastante obviamente. No WordPress, existem alguns tipos diferentes de conteúdo que podemos adicionar, no WordPress, há duas coisas chamadas Post Types, que é um pouco confuso porque um deles é realmente chamado Posts. Mas essencialmente Post Types operam da mesma maneira. Divi realmente adiciona um terceiro tipo de post chamado Projetos, e eu realmente não expliquei o que um tipo de post é ainda, mas basicamente é apenas uma maneira de adicionar conteúdo dinamicamente. Então podemos ver aqui no menu de postagens, podemos olhar para todos os posts. Podemos adicionar novas postagens, categorizar nossas postagens e marcá-las. Se eu acessar páginas, ele não permite categorias e tags, mas permite visualizar todas as páginas e adicionar novas páginas. Se formos para projetos que é adicionado por Divi, podemos ir para todos os projetos, você categorizar e tags. Então a diferença entre postagens e páginas é que postagens, você pode pensar neles como postagens de blog. Então eles têm um tempo definido e eles são adicionados ao que é chamado de seu feed RSS. Então, se alguém quiser se inscrever no seu blog por meio de um leitor de blog, quando você lançar uma nova postagem, ele será notificado. Então, de muitas maneiras se opuseram muito como uma página, mas ele só tem uma data nele e é apenas construído para ser como uma postagem de blog. Então, movendo-se para páginas, as páginas são bastante semelhantes aos posts como mencionado, o diferente é que as páginas não têm uma data sobre elas, a menos que você fosse especificamente colocar uma data dentro do conteúdo. Eles não têm categorias e não têm tags, porque as páginas são geralmente usadas para navegação ou para construir uma página especial que não representa realmente o conteúdo normal no site. Por exemplo, se formos a um dos meus sites favoritos de blogueiros chamados Nomadic Matt, em nomadic matt.com. Podemos ver aqui que a primeira coisa que estamos olhando é uma página, que está adicionando à navegação porque ele está nos ligando a seus diferentes livros aqui. Mas você pode ver aqui nesta seção que ele está nos ligando para suas postagens de blog, e essencialmente nós temos a mesma coisa, nós temos uma página e eu acho que você poderia considerar isso como uma página também. Mas se você olhar para o post, é óbvio que é um post de blog. Você tem que namorar aqui, e ele coloca a barra lateral lá. Então, sim, é uma diferença um pouco sutil, mas postagens que você pode pensar como postagens de blog e páginas são basicamente qualquer outra coisa. Claro, em Divi, É um pouco diferente no sentido de que você tem um terceiro tipo de post e que é projetos. Isto é o que faz Divi realmente bom para a construção de sites de portfólio pessoal, é porque talvez você queira colocar seus projetos anteriores, portfólio de trabalho de cliente anterior, o que você quiser chamá-lo em uma seção separada. Então Divi torna isso fácil, dando-lhe outro tipo de post, e isso é o que é conhecido como um tipo de post personalizado porque ele não vem padrão com o WordPress. Felizmente para nós, porém, Divi coloca isso automaticamente, então nós não precisávamos configurar isso nós mesmos. Tudo bem. O último pedaço de conteúdo para falar é a mídia e, basicamente, se formos para a mídia agora, eu vou abrir uma nova aba e nós temos todas as imagens que já colocamos no site aqui. Podemos adicionar novas imagens adicionando novas aqui. Então, basicamente, a mídia por si só não faz nada, a menos que eu coloque um documento aqui e ligue alguém a ele. Mas podemos incorporar mídia em páginas postais e projetos. Então a mídia a maior parte do tempo vai ser imagens que talvez você queira colocar arquivos de áudio aqui. Talvez você queira colocar arquivos de vídeo aqui e talvez você só queira armazenar documentos. Então eu acho, a mídia é apenas mais um tipo de conteúdo, mas ele anda de mãos dadas e incorporado com postagens, páginas e projetos. Então, agora que lhe dei uma visão geral, é hora de realmente criar algum conteúdo. Então eu vou entrar no post e clicar em Todos os Posts, e você pode ver aqui na tabela que podemos ver nosso primeiro post, e ele está nos dando o título, o autor, e a categoria, que no WordPress você tem que ter uma categoria. Então, se você não tem nenhuma configuração de categorias, ele vai apenas dizer sem categoria. Então o que eu vou fazer agora é porque olá mundo é apenas um post de blog fictício, eu realmente não me importo com isso. Vou acabar com isso e começar do zero. Então eu vou clicar em Adicionar novo para adicionar uma nova postagem e, a propósito, a funcionalidade entre isso e páginas e projetos praticamente a mesma. Portanto, não há nenhuma curva de aprendizagem com ter que criar páginas e projetos, isso é exatamente o mesmo basicamente. Então eu vou dizer que esta é uma postagem de blog sobre Como construir um Site Divi. Se eu pressionar tab para passar para o próximo campo, ele irá criar o URL para mim. Como este é um post de blog, o que ele vai fazer no URL, é colocar a data de publicação, que ele vai assumir é a data de hoje entre o domínio e o título da postagem na URL. Eu realmente não gosto disso e isso realmente não ajudou com SEO ou qualquer coisa. Então eu vou mudar isso em um segundo. Que há uma diferença entre posts e páginas, páginas não fazem isso. Então, depois que eu colocar em um nome e, em seguida, ir para a próxima seção, vai criar um link com isso e aqui em baixo nós temos o editor padrão WordPress para criar blogposts e nesta situação, você quer usar o padrão WordPress editor. Você poderia usar o Divi Builder, que cobrimos anteriormente. Mas eu só usaria o Divi Builder para construir páginas porque eu gosto de manter minhas postagens usando padrão, o que é chamado de editor WYSIWYG aqui, como no que você vê é o que você recebe. Uma das razões pelas quais é realmente importante criar seus blogposts usando WordPress é built-in editor WYSIWYG em vez do Page Builder é se você mudar para outro tema, toda a sua postagem do blog seria quebrada, porque o Page Builder o que ele faz é, ele insere código na página que Divi interpreta. Então, se você mudar seu tema mais tarde, todo esse conteúdo ficará preso em Divi. Então não me entenda mal, eu amo Divi e eu acho que é muito poderoso quando você quer construir páginas usando o Page Builder. Mas quanto às postagens que são o conteúdo regular do seu site, você não quer ter que voltar e reconstruí-las. Então é melhor usar esta área aqui. Tudo bem. Então eu vou para um site que apenas me dá Lorem Ipsum para colocar em algum conteúdo fictício. Deixe-me ir a qualquer um desses. Eu vou colocar isso aqui. Portanto, esse é o seu parágrafo básico que eu quero acrescentar alguns títulos. Eu vou entrar e colocar um sub-título em, e então você pode ir mais fundo com os títulos para fazer Cabeçalho 3, que é subtítulos ainda menores. Eu vou chamá-lo sub-título, e então eu vou apenas colocar no mesmo texto. Eu acho que este é um tema Divi, então você pode mudar o trecho. Quando o WordPress está mostrando uma pré-visualização da sua postagem de blog, ele mostrará este trecho. Caso contrário, ele só mostrará um trecho baseado no que já está na página. O que você pode fazer é alterar o layout para que você possa ocultar a barra lateral usando o Divi. Você pode salvar um rascunho se não quiser publicá-lo ainda e pode atribuir uma categoria. Vou fazer isso agora mesmo. Eu vou dar a este post uma categoria porque é baseado em como construir um site Divi. Eu estou indo para ir um pouco mais amplo com o tópico e eu vou dizer isso com base no desenvolvimento WordPress como a categoria. As categorias são eficientes porque você pode separar seu conteúdo com base em um determinado agrupamento. Você também pode fazer isso com tags, mas as tags são secundárias às categorias. Normalmente, você só precisa categorizar seu conteúdo, mas você também pode marcá-lo se quiser adicionar o que é chamado de taxonomia extra. A última coisa e o que é realmente importante é definir uma imagem em destaque. Eu não tenho uma imagem especificamente para estas postagens, então talvez eu vá e faça o download de uma agora mesmo. Então, eu vou apenas encontrar uma imagem, apenas uma imagem aleatória. Eu não deveria estar fazendo isso porque é de outra pessoa , mas isso é apenas para fins de demonstração. Normalmente, você deseja usar imagens às quais você tem os direitos ou você não vai ter problemas para copiar. Eu vou salvá-lo e eu vou colocá-lo nos arquivos para o curso WordPress e, em seguida, eu vou enviá-lo. Isso vai se tornar a minha imagem em destaque basicamente. Mais uma vez, vou enviar um SMS para SEO, como construir um site Divi. Eu realmente deveria ter uma foto de um site Divi especificamente para este post do blog, mas novamente, isso é apenas para fins de demonstração. Uma coisa que podemos fazer antes de clicar em Publicar, se você quiser ver como ele se parece antes de realmente publicá-lo, você pode clicar em pré-visualização e de repente você tem um título, você tem o nome do autor, você tem o data em que foi publicado, que categoria está sob, e quantos comentários, e você pode ver este é o layout adorável. Isso é tudo feito basicamente por Divi e WordPress. Vou clicar em Publicar aqui e agora a postagem do blog ficará ao vivo. Você pode visualizar um post assim que terminar o carregamento e você pode ver o seu post concluído. Lá vai você, muito bom. Agora, as duas coisas que eu disse que queria mudar foi que eu queria me livrar dessa coisa de encontro. Eu realmente não acho que isso ajuda com SEO e provavelmente não ajuda com as pessoas encontrando seu site mais fácil também. Então, se você vai para permalinks em suas configurações do WordPress, eu vou apenas ir e alterar as configurações comuns para postar nome para que você possa ver aqui no exemplo, ele não vai ter a data e, em seguida, o post. Só vai pular direto para o nome da postagem e colocar isso no seu domínio. By the way, essas configurações de permalink você pode passar e atualizar. Talvez só quisesse o ano e depois o correio. Para isso, você pode usar essas tags aqui se você realmente quiser fazer isso. Na maioria das vezes, é mais fácil e melhor ter o nome do post lá dentro. Vamos salvar as alterações e agora, se eu voltar para a postagem que criamos, vou para as postagens antigas e, em seguida, pular em frente para clicar em exibição. Ele só terá o domínio raiz e, em seguida, como construir um site Divi, o que é bom para SEO também. Você sempre tem que construir com SEO em mente. SEO para aqueles de vocês não sabem é torná-lo otimizado para motores de busca para que seja mais fácil para obter o seu site para classificar no Google ou em qualquer outro motor de busca. Agora que criamos o post, criar um projeto é basicamente a mesma coisa. Eu não vou passar por toda a criação de um tipo de post de projeto aqui, mas o que você pode ver é exatamente a mesma interface. Você pode ver aqui podemos adicionar categorias de projeto, podemos adicionar tags de projeto aqui também. Eles são separados para categorias de postagem e tags. Uma das coisas sobre este ser um tipo de post separado é que as categorias e tags disponíveis serão exclusivas para esse tipo de post. Em posts, eles terão suas próprias categorias e tags, mas essencialmente é uma duplicata de posts que apenas coloca em uma categoria diferente no sentido, por isso é seccionado completamente das postagens. A próxima coisa é Pages, que novamente é exatamente o mesmo. Podemos olhar para nossas páginas aqui e, em seguida, algumas palavras depois dele para indicar quaisquer páginas especiais. Você pode ver que esta aqui é a nossa primeira página. Tem traço, primeira página do traço. Se você estiver executando e-commerce, você pode ter traço página carrinho traço, você pode ter traço página de check-out traço, e que traço apenas significa que é uma página especial e ele apenas indica a você qual dessas páginas é o seu primeira página, sua página do carrinho e tudo isso. Este é um rascunho que eu criei anteriormente, e então, é claro, rascunho aqui é qualquer página que esteja no modo rascunho, então você realmente não publicou ainda. Essencialmente, o que você vai querer fazer do seu site é ter o máximo de conteúdo possível. É difícil categorizar seu conteúdo quando você tem apenas uma postagem de blog, e é difícil ter navegação em diferentes partes do seu site quando você tem apenas uma página. Então você deve realmente ir lá, criar novas postagens de blog, e essencialmente meu conselho para qualquer um começando um site é escrever pelo menos cinco posts primeiro, ou escrever cinco páginas e projetar tudo isso primeiro, e, em seguida, começar a colocar isso no WordPress, porque é difícil criar esses menus, criar esses layouts e criar tudo o resto quando você realmente não tem conteúdo em seu site ainda. Lembre-se, sites baseados em conteúdo devem ser preenchidos com conteúdo. O que poderíamos fazer é passar e criar todos esses novos posts, mas essencialmente o processo é o mesmo para cada um deles. Eu encorajo você a passar e criar algum conteúdo, talvez até mesmo algum conteúdo fictício se você quiser apenas jogar algum conteúdo fictício lá, isso é tudo bom. Eu vou pular um pouco adiante e eu vou colocar em algum meu próprio conteúdo e eu vou vê-lo no próximo vídeo. Na próxima, vamos construir páginas, que é um pouco mais envolvido, porque vamos usar o construtor e vamos construir a página inicial. Vejo-te no próximo vídeo 10. Usando o criador de página do Divi: Então, no último vídeo, falamos sobre adicionar conteúdo. Entre esse vídeo e este, eu adicionei mais posts de blog na seção de postagem como você pode ver aqui. Mas também em projetos, eu entrei e coloquei alguns projetos. Para ser claro, não, eu não trabalhei para a Amazon, Facebook ou Google. Eu só pensei que seriam exemplos fáceis de demonstrar o que você deve colocar em seus projetos. Agora que temos algum conteúdo aqui, temos alguns posts, temos alguns projetos, agora podemos começar a construir algumas páginas que trazem algum desse conteúdo dinamicamente. Claro, quando vamos ao nosso site, a primeira página que precisa ser consertada é a nossa primeira página. Esta é apenas uma página de exemplo que veio do WordPress, por isso é hora de entrar e alterá-lo para como gostaríamos. Como eu demorei antes, com Divi, uma vez que você clicar em Editar, você pode usar o Divi Builder. Vou apagar tudo isso e depois clicar em “Usar o Divi Builder”. Na verdade, se você quiser excluir isso, o que Divi faria é colocar o texto que você tinha antes como um módulo de texto bem aqui. Para que não o perdesse. Eu só sabia que íamos nos livrar dele, então eu me livrei dele de antemão. Mas eu poderia facilmente ter feito da maneira oposta, que eu vou apenas demo agora. Apenas como uma referência no caso de você quer mudar uma página que foi feito no WordPress Wheezy, temos que fazer isso, mas quer mudar para Divi. Se eu clicar nisso, ele irá colocar o texto que temos como um módulo de texto na primeira coluna da primeira linha da primeira seção, que por padrão é uma linha de uma coluna. Agora, eu demorei antes do uso do Visual Builder, o que para alguns de vocês vocês podem preferir isso. Só para mostrar isso novamente, basicamente você passa o mouse sobre as diferentes partes da sua página e você pode editar. Esta é a seção. Então você pode clicar no “Gear” e você pode alterar as configurações da seção assim. Você pode clicar em sua “Linha”, e você pode atualizar as configurações de linha como esta, e você pode editar suas configurações de texto para esse módulo, adicionar em outra linha com quantas colunas você deseja, e então você pode adicionar em outro seção também. Temos uma especialidade regular para largura. Eu como uma preferência pessoal, realmente não gosto de usar o Visual Builder porque é um pouco delicado com essas coisas diferentes que pairam para cima. É apenas uma preferência pessoal. Se você gostaria de usar um Visual Builder, definitivamente, por todos os meios, use o Visual Builder. Mas minha preferência é o construtor padrão. Vou voltar à edição, e aqui está o construtor padrão. Agora, por que eu gosto do construtor padrão é que é muito mais claro onde as seções estão. Então eu posso adicionar uma linha aqui, e eu posso adicionar uma linha de duas colunas, e eu posso colocar módulos aqui, e eu posso ver o nome do módulo. Ele só me dá uma boa visão da estrutura da página, enquanto a outra mostra exatamente o que ela parece na página. Mas talvez seja um pouco mais difícil de modificar a estrutura. Então, para mim eu gosto disso, talvez seja porque eu sou mais um desenvolvedor. Totalmente até você de que maneira você quer fazer isso. Agora, o que eu quero fazer é criar uma página inicial para este site. O site que estou construindo, e você provavelmente já o reuniu, é um site pessoal. Tenho um logotipo do meu rosto. Eu tenho um blog de serviços de portfólio, e o site que eu chamei apenas meu nome. Divi é bom para isso e eu só pensei que seria um tópico fácil para começar, você não precisa fazer um site sobre sua marca pessoal ou perfil em tudo. Só para que saibam, esse é o site que quero construir. Novamente, apenas como exemplo, vamos construir um site de portfólio freelancer. Mas os mesmos princípios se aplicam ao que você quer construir. Em termos de web design moderno popular, muitas vezes você verá, assim como no meu site aqui, que é o meu site portfólio real, você verá o que é chamado imagem herói. Só está demorando um pouco para carregar. Mas esta é basicamente uma imagem de largura total. Isto é tudo construído em Divi também, por isso vamos construir algo semelhante. Esta é uma imagem de largura total, e tem um pouco do que eu quero que as pessoas vejam, e o que é chamado de call-to-action. Isso é apenas um botão basicamente, mas tudo isso é um call-to-action porque eu estou levando as pessoas a tomar uma ação a partir do momento em que vêem o site. Isso é só um pouco sobre design. O que eu vou fazer é, porque eu quero que ele seja de largura total, eu tenho que realmente fazer um tipo de seção diferente em Divi. Vou clicar em “Seção de largura total” e vou arrastar isso acima do que já temos. Você pode ver aqui não há linhas porque você só obtém uma linha com a seção de largura total. Mas o que eu vou fazer aqui, Inserir módulos. Estes módulos são um pouco diferentes para nossa seção de largura total para uma seção de largura regular. Mas o que eu vou fazer aqui, é eu vou fazer um cabeçalho de largura total, que me permite colocar em textos de cabeçalho, um botão ou dois botões na verdade, e também colocar na imagem de fundo. Vou dizer bem-vindo ao meu site como o título. Faço sites WordPress. Então para este botão eu vou fazer ver meu portfólio. Você pode ter dois botões lá dentro. Não me vou incomodar com o segundo botão. Você pode colocá-lo no URL, e como nós não construímos ainda, eu vou colocá-lo em um hash como um suporte de lugar. Você pode colocar em imagens aqui, mas o que queremos é uma imagem de fundo e em Divi, você vai para as configurações de Fundo. Aqui está se você quer uma cor sólida como seu plano de fundo, aqui está se você quer um gradiente, aqui está se você quer um fundo de imagem, e aqui está se você quer um fundo de vídeo. Isso é muito legal. Você pode ter visto em outros sites, eles têm um fundo de vídeo. Divi torna isso muito fácil de fazer usando a opção de fundo de vídeo aqui. Eu vou voltar para a imagem, e eu vou para Upload Files. Eu já o tenho aqui. Esta é a imagem de herói que eu uso em praticamente todos os meus sites, e eu vou dar-lhe um nome melhor. Vou digitar meu nome. Christopher Dodd, imagem de herói. Em seguida, aqui em baixo, certifique-se de que é grande. Definido como plano de fundo. Não se preocupe, isso está cortando agora. Talvez seja necessário ajustar o tamanho do plano de fundo e a posição da imagem. Então minha cabeça ou a parte mais importante está no canto superior direito. Vou me posicionar no canto superior direito, e espero que pareça bom. Caso contrário, podemos mexer com isso. O tamanho da imagem de fundo que podemos definir para cobrir, o que significa que vai cobrir toda a seção. Isso é bom porque precisamos dele responsivo. Vou pressionar “Salvar e sair”. Agora vou pré-visualizar as alterações. Poderíamos facilmente ter batido em Atualizar. Não importa, porque ainda não estamos trabalhando em um site ativo, mas se você estivesse atualizando uma página em um site existente, você provavelmente gostaria de pré-visualizar primeiro. Então, como você pode ver, temos esta imagem de largura total, bem-vindo ao meu site, eu faço sites WordPress, visualizar meu botão portfólio. Em linha reta, eu posso ver que nós vamos precisar fazer uma mudança e isto é, isso simplesmente não é alto o suficiente. Como você pode ver aqui, meu rosto está um pouco cortado, parece assustador, na verdade ter apenas meus dentes. A parte superior dos meus dentes logo acima aqui e então o que eu vou querer fazer, é forçar isso a ter uma certa altura. Agora o que eu faço e isso é algo que eu mostrei a vocês na última aula, é brincar com seu site no navegador antes de fazer qualquer modificação permanente. Usando a opção de comando I no Chrome, usando o Mac, posso exibir as ferramentas de desenvolvedor. Você vê aqui isso já é responsivo. Então agora isso parece um pouco melhor. Mas novamente, em uma tela maior, vai cortar meu rosto. O que eu quero fazer é inspecionar aqui e isso vai trazer o título, mas se eu ir mais acima da cadeia, eu posso ver aqui e você pode reunir a partir dos nomes de classe, esta é a seção, E-T é o prefixo que Divi usa, então quando você vê e-t, p-b, e-t, p-b, e-t, p-b, também, isso é uma boa dica se você quiser ir verificar site de outra pessoa e ver se ele é construído em Divi. Você pode verificar o código e se ele tem et_pb_, então é altamente provável que eles estejam usando Divi também. Então isso é muito legal, você pode espionar os sites de outras pessoas. O que eu quero fazer aqui é apenas verificar se eu posso afetar isso antes de tudo. Vou mudar a altura. Desculpe, eu deveria recuar um pouco. Se eu selecionar isso, posso aplicar um estilo diretamente nele usando este painel. Ok. É o que estou fazendo aqui. Vou colocar 800 pixels. Ok. Isso é legal e tudo, ele fez a seção maior, mas o elemento que tem minha imagem nele obviamente não está lá. Eu só vou cancelar isso, que eu posso fazer marcando esta caixa de seleção e eu vou ir uma camada mais profunda. Como você pode ver aqui nesta camada, você pode ver que ele está fazendo referência à imagem de fundo lá e eu posso ativar e desativar isso. Agora, quando eu entro aqui em cima e dou uma altura, lá vai você, agora se torna maior. Agora 800 é um pouco demais. Eu não preciso que ele vá até o fim. Provavelmente só precisa de lá. Mesmo em uma largura total. Na verdade, eu só vou fechar porque isso é o mais largo que eu posso obter. Mesmo em uma largura total, você ainda pode ver meu rosto e um pouco de meus braços. Acho que vou fazer 500 por enquanto. É importante notar que fazer isso aqui não fará nenhuma alteração permanente. Isso é apenas para você brincar e afetar a saída na tela, que você possa descobrir o que alterar no seu painel. O que eu vou fazer, é voltar e encontrar este módulo. Estávamos nesta seção e, em seguida, uma camada mais profunda é isso também chamado seção, mas em HTML, mas como você pode ver aqui, a classe é módulo pb. O que precisamos fazer é voltar e encontrar isso no nosso construtor de páginas Divi. Eu estou indo para ir aqui, para a configuração do módulo de largura total e aqui você pode adicionar em CSS personalizado. Você também pode adicionar isso em seu style.css e tentar fazer referência a ele, mas neste caso, estamos afetando apenas um único elemento, então é seguro fazê-lo a partir daqui. Vou colocar em altura 500. Um dos recursos legais que Divi colocou em uma vez que atualizou seu tema é, uma vez que você clica em algo, ele vai te dizer qual é a classe que você vai afetar. Podemos verificar este et_pb_full width_header_0. Eu posso voltar para o nosso site aqui e eu posso verificar, é esse? Como você vê aqui, et, pb_full width, cabeçalho, zero, que corresponde aqui acima. Este estilo deve ser aplicado a este elemento. Vou rolar para baixo e clicar em “Salvar e sair”. Então eu vou pré-visualizar novamente. Isso atualizará a página. Lá vai você. Agora isso terá sempre 500 pixels de altura. Esse é um bom exemplo de como você cavaria em código para alterar opções de estilo e outras coisas. Mas como você verá no próximo vídeo, vamos aprofundar ainda mais o código para fazer algumas personalizações mais sérias. A próxima seção que vou construir neste site, será um pouco de uma seção de sinopse, ele vai falar sobre meus principais pontos de venda como freelancer. Eu só vou apagar essa seção inteira e então eu vou para aqui e começar uma nova seção, só para que eu possa começar do zero. O que eu vou fazer, é eu vou ter três blurbs e eu quero que todos eles tenham uma largura igual. Vou clicar em escolher isto. Isto é o que eu gosto sobre o padrão do construtor Divi, você pode ver claramente que existem três colunas aqui e você pode clicar em qualquer uma delas para adicionar um módulo a eles. Vou clicar no primeiro, adicionar um blurb e um blurb é basicamente apenas um elemento que tem um título, um pouco de conteúdo, um link e um ícone. Então eu vou dizer que um olho para o design, é um dos meus pontos de venda. Não precisamos ligá-lo se não quisermos. Então eu não vou colocar um link lá e então eu posso usar biblioteca de ícones de Divi clicando, “Usar ícone”. Você também pode carregar uma imagem e usar uma imagem, mas eu vou usar um ícone e eu só preciso encontrar algo que comunica design. Eu posso avançar aqui um pouco para vocês porque eu vou criar mais dois blurbs e apenas copiar o processo para este, mas apenas deixe-me encontrar um ícone que comunica design. Eu não quero passar o dia todo nisso, então eu vou escolher essa coisa de basquete que eu acho que é drible. Ok. Aqui você pode alterar o rótulo de administrador. Eu vou mudar isso para design e você vai ver o porquê em apenas um segundo. Agora eu posso ver sem entrar nele, o que vai dizer. Então eu o rotulei como design, então eu sei que essa é a sinopse do design. Vou avançar rapidamente aqui, colocar mais dois blurbs e você verá o resultado em apenas um segundo. Tudo bem. Então eu tenho meus três blurbs lá dentro e eu vou pré-visualizar as alterações agora para ver como ele se parece. Tudo bem, aqui vamos nós. Como você pode ver, parece um pouco estranho porque os títulos se alinham à esquerda e os ícones estão no meio. Além disso, seria bom ter algum conteúdo sob eles. Então eu vou voltar agora e consertar isso. Então eu só fui em frente e rápido encaminhado isso, passei por isso. Vou clicar na pré-visualização e agora você pode ver o texto está centralizado e há um pouco de uma sinopse. Como eu fiz isso só para dar a vocês uma recapitulação, eu fui para o conteúdo para adicionar um pouco de conteúdo, e então eu fui para a guia design e então eu rolei para baixo para texto e alinhei isso como centro para fazer isso. Isso parece muito bom. Lembre-se que tudo isso é responsivo porque nós construímos em Divi. Se eu for assim para baixo, ele vai empilhar um em cima do outro. Se houvesse quatro, por exemplo, teria chegado a este tamanho de tela e feito duas filas de duas, tão inteligente. Às vezes você pode precisar mudá-lo, mas na maioria das vezes Divi é muito bom em torná-lo responsivo. Na verdade, uma coisa que eu quero fazer é adicionar em outra linha aqui e colocar o título para esses blurbs. Usando o editor WYSIWYG padrão da web press, eu vou fazer um cabeçalho 2 e eu vou dizer, “Por que me contratar?” Só vou dar a isso um rótulo administrativo de direção. Agora o que eu vou fazer é adicionar uma nova seção e eu vou fazer uma linha de uma coluna e novamente, colocar na mesma coisa que eu tinha antes do texto. Esse vai ser o nosso título, indo para alinhar o centro, torná-lo um cabeçalho 2 dizer, “Confira meus clientes anteriores.” Vou ligar para este título de clientes. Você pode colocar o que quiser lá, só torna mais fácil descobrir qual seção é o que. Eu vou adicionar uma linha e eu vou colocar em uma seção de largura total. Oh, não uma seção de largura total, mas uma linha de uma coluna e aqui eu posso trazer algum conteúdo dinâmico. Há um elemento aqui. Você pode fazer um portfólio filtrável ou você pode apenas fazer um portfólio normal. Na verdade, não configuramos nenhuma categoria de portfólio, mas se você tiver categorias de portfólio, você pode filtrar. Isso vai definir o número máximo de postagens que ele vai mostrar e você pode mostrar quais coisas para aparecer. Categorias que não temos, então vou esconder isso. Paginação, nós realmente não vamos precisar disso, mas você pode ter isso habilitado. Vamos colocar isso e ver como vai. Eu vou voltar aqui para cima e eu vou pré-visualizar as mudanças. Confira meus clientes anteriores. Agora ele vai para esses blocos realmente grandes, que eu não sei por que Divi faz isso por padrão porque eles geralmente parecem feios. Esta é a guia de conteúdo, para que possamos alterar o conteúdo e até mesmo fazer o plano de fundo. Avançado é onde podemos colocar em CSS personalizado, ID e classes e mudar nossa visibilidade no telefone, tablet ou desktop, mas guia Design é o que estamos atrás e o que temos aqui é um campo chamado Layout. Podemos mudar isso de largura total para grade, o que neste caso, eu acho que vai parecer muito melhor. Você tem mais 70 opções de personalização, é ridículo. Não vou me preocupar com isso por enquanto até ver algo que quero mudar. Voltar para pré-visualizar as alterações. Você vai querer fazer esses logotipos provavelmente a mesma altura e largura se você quiser que eles apareçam bem, mas como você pode ver, isso é puxar conteúdo dinâmico. O que quero dizer com isso é assim que eu adicionar um novo item de portfólio aqui, que é chamado Projetos em Divi, que aparecerá aqui desde que não tenha atingido o máximo. Agora eu acabei de descobrir outro erro que eu tinha aqui, que é que eu esqueci de mover o cabeçalho acima. Você pode mover um módulo como este muito fácil, e esse cabeçalho agora será exibido acima. Vamos pré-visualizar isso. Agora você tem essa seção, que é a imagem de herói com o chamado à ação, você tem “Por que me contratar?” então você tem as sinopses. Você pode verificar os clientes anteriores, que por sinal, se você clicar em um deles, eu estou fazendo uma nova guia. Você pode obter uma página inteira sobre mais informações sobre esse projeto e o mesmo vale para todos eles. Ele terá o mesmo layout da página se você quiser entrar. Este é todo o conteúdo fictício então não há nada de novo para ver aqui, isso é apenas por um exemplo. Finalmente, quero colocar em outra seção. Vai ser bem parecido, então o que eu posso fazer é duplicar ou clonar a seção como eles chamam. Eu vou mudar isso em vez de Clientes, eu vou dizer, “Leia meu blog.” É aqui que podemos colocar em outro conjunto de conteúdo dinâmico. Eu vou remover o portfólio clicando aqui e eu vou me livrar desse módulo e, em seguida, inserir um novo módulo lá e eu posso ir para o blog. Agora eu posso filtrar por categoria, eu posso alterar o formato de data meta. Posso escolher mostrar a saída ou não mostrar a saída. Não vou mostrar ao autor porque foi tudo escrito por mim. Não vou mostrar categorias porque só há uma paginação. Você pode ativar a opção Ler mais, você pode desativar a imagem em destaque, se desejar. Mas a única coisa que eu sei que eu vou querer mudar é que eu não quero esse layout de largura total, então eu vou mudar isso para Grade novamente e muitas opções. Vou clicar em “Salvar e sair” e, em seguida, Visualizar alterações. Se rolarmos para baixo, temos uma bela seção disposta que mostra postagens de blog. Como você pode ver aqui o trecho vai ser o mesmo para cada um deles porque eu coloquei na mesma passagem Lorem Ipsum padrão, mas eu mudei a imagem em destaque apenas para deixar um pouco mais claro sobre o que estamos fazendo aqui e novamente, isso é totalmente responsivo. Você vê como isso está encolhendo agora e agora que está quebrando para uma nova linha. Mesmo isso tem sido centrado as coisas no rodapé. Outra coisa a notar é que o menu entrou em colapso para isso. Sim, é tudo responsivo com Divi e o construtor de páginas e temos duas seções de conteúdo dinâmico aqui. Obviamente há mais alguns elementos com os quais você pode trabalhar. A melhor coisa a fazer é provavelmente brincar um pouco, então eu entro aqui e confiro os diferentes módulos, ver o que eles fazem. Mas basicamente os princípios são com o construtor de página Divi, você tem uma seção que está em azul. Você tem uma linha, e você tem colunas, que a quantidade de colunas é configurada assim que você cria uma nova linha. Você não pode reorganizar linhas, mas você sempre pode dizer, por exemplo, que você queria mover o blog para uma das colunas. Você poderia fazer isso e, em seguida, simplesmente excluir isso, que você possa mover módulo de espaço diferente para espaço diferente. Você também pode reorganizar linhas como mostramos antes. Podemos reorganizar seções como esta se quiséssemos essa seção acima e podemos nos livrar delas. Os princípios principais são seções, linhas e colunas, e módulos. O segundo princípio é a diferença entre este conteúdo estático e conteúdo dinâmico que puxa outros tipos de conteúdo de diferentes partes do seu site. Espero que seja uma boa introdução ao Page Builder e como construir páginas com Divi e WordPress. No próximo vídeo, vamos rever a personalização do seu código. Nesta lição você viu um pouco de personalização quando eu entrei e mudei isso para ter uma altura de 500. Podemos entrar e inspecionar elemento e ver essa mudança ali mesmo, mas vamos olhar para as outras maneiras que você pode personalizar seu código, incluindo a adição de um blog de código criando estilos. Além disso, como descobrir qual parte da página deve ser estilizada e a diferença entre CSS em linha, que falamos um pouco sobre isso, mas vamos entrar em mais detalhes na próxima lição. Antes de fazermos isso, no entanto, vou me certificar de salvar isso. Eu tenho de vez em quando, apenas fechou esta página sem salvar o meu progresso. Você precisará clicar em “Atualizar” aqui e agora essas alterações são permanentes e estão ativas e você tem seu site. Vejo você no próximo vídeo. 11. Personalizando com código — básico: No último vídeo, criamos a primeira página do nosso site usando o Divi Page Builder. Como você pode ver, nós pudemos usar o construtor de páginas para criar uma boa primeira página com conteúdo dinâmico, praticamente usando código zero, além de colocar um estilo nisso. Esse é o poder do construtor de páginas, podemos construir layouts como este e usar elementos de Divi sem escrever nenhum código, e isso nos economiza muito tempo. Mas e se quisermos adicionar algum código personalizado no? Se entrarmos na página de edição aqui, e nós apenas adicionar em uma nova seção para adicionar em um módulo, esta é a lista de módulos disponíveis com Divi. Se você queria criar um contador de círculo, isso é legal, você tem isso aqui. Você quer colocar no formulário de contato, uma galeria, há algumas características muito legais fora da caixa aqui em Divi. Mas o que acontece se você quiser construir algo que é personalizado, que não está realmente nesta lista? Uma das maneiras que podemos fazer isso é usar um bloco de código. Isto é como um módulo nu em Devi, que podemos colocar o que quisermos aqui para que possamos começar a usar um pouco de código para construir algo personalizado e, em seguida, ainda usar ou aproveitar o sistema de Divi, como ele tem as seções, linhas e colunas, então ainda obtemos essas colunas responsivas, mas podemos construir nossos próprios elementos usando HTML, CSS, e podemos até colocar em um pouco de JavaScript. Acho que o melhor exemplo disso é mostrar um projeto recente de cliente. Isso é algo que eu fiz no início do ano para um cliente na Austrália. Eu construí este site baseado no design PSD e construí tudo dentro de Devi. Uma das coisas que estava no design que realmente não vem padrão em Divi, são estas, eu não sei como você chamá-los, uma galeria de imagens sobre o pairar, ele abre um pouco de texto. Provavelmente foi uma explicação terrível, mas você pode ver como funciona aqui. Há apenas essas imagens desbotadas e quando você coloca o mouse sobre ele fica um pouco mais escuro e algum texto aparece na tela. O que fiz por isso, vou entrar e mostrar-te agora mesmo. Tudo o que eu fiz para chegar a este ponto é, eu acabei de entrar com o administrador do WordPress, voltei para a página e, em seguida, usei a barra superior para editar. Agora eu posso descer aqui e você pode ver o layout. Vou abri-la lado a lado. Você pode ver a estrutura como está no Divi Page Builder, e então você pode ver o resultado aqui. Esta é a seção que eu chamei de Caixa de Imagem de Destaque, e se entrarmos nessa Caixa de Imagem de Destaque, você pode ver algum HTML personalizado, e na verdade o que dá o comportamento de pairar é algum CSS que eu próprio estilizei. Vamos realmente entrar e criar algo semelhante em nosso projeto. Estou de volta em nosso próprio projeto e apenas para fins de demonstração, eu não quero gastar muito tempo codificando elementos personalizados, eu só quero mostrar o potencial aqui é, eu vou apenas criar um Div, que vai tem uma borda que torna óbvio para ver que estamos colocando em algum código personalizado. Mas essencialmente as possibilidades são infinitas com isso, você pode codificar o que quiser. Vou colocar um Div. Vou colocar um Div com a palavra “Caixa” dentro dele, e depois dar-lhe uma borda. Vou salvar e sair e ver como isso aparece. Pré-visualizar alterações. Se descermos, podemos ver nossa caixa aqui. A altura da caixa é feita proporcionalmente ao conteúdo dentro dela. Se adicionarmos mais texto a isto, vai ficar maior. Se quisermos consertar a altura, talvez queiramos fazer isso, então voltarei aqui colocarei mais alguns estilos. Agora você pode ver que a caixa é 300. Só para deixar isso um pouco mais limpo, vou fazer outra caixa. Provavelmente fiz isso muito rápido. O que eu fiz aqui é que eu cliquei nesse botão para duplicar, mudar isso para Caixa 2. Então eu posso mover esse módulo para aqui para um layout de duas colunas, e eu posso visualizar as alterações. Lá vamos nós. Temos a Caixa 1, Caixa 2. Agora, obviamente isso não é muito impressionante, mas eu só estou tentando provar um ponto aqui. Você pode criar quaisquer elementos personalizados que você deseja e entrar em qualquer detalhe você pode basicamente inserir qualquer código que você deseja. Este é apenas um exemplo muito básico. Agora, no caso do projeto do cliente que acabei de mostrar antes, eu não fiz estilos embutidos. Especialmente quando você está repetindo estilos uma e outra vez, você vai querer colocar isso em CSS e aplicar uma classe. Você pode ver esta caixa e esta caixa são iguais, e eles têm os mesmos estilos. Sempre que você estiver copiando e colando algo uma e outra vez, em qualquer desenvolvimento, qualquer codificação, provavelmente há uma maneira melhor de fazê-lo. Você pode colocar os estilos ou qualquer código que você está constantemente repetindo em um determinado ponto, e então você pode referenciá-lo uma e outra vez. No caso desses estilos, podemos realmente colocar esse estilo no arquivo CSS, e, em seguida, referenciá-lo usando uma classe. Novamente, se isso é muito avançado para você, certifique-se de voltar e assistir deve a primeira das minhas aulas de Skillshare Compreendendo Web Development. Mas o que vemos aqui é um estilo inline. Estilos embutidos são bons se você está apenas afetando um elemento e não faz sentido construir classes e IDs e outras coisas se você não estiver indo para reutilizar este código. Mas se você vai usá-lo uma vez, definitivamente você pode colocar um estilo inline. Se você quiser torná-lo responsivo, você pode ter que movê-lo para CSS. Mas definitivamente neste caso, estamos repetindo os mesmos estilos em outra caixa. Seria muito mais limpo tirar esses estilos e colocar em uma aula. No WordPress, vou mostrar-lhe como você faz isso. Vou tirar isso, mudar isso para uma aula e vou ligar para a sala de aula com Border. Vou perder a minha prancheta, mas lembro-me do que escrevi. Eu vou copiar isso, e então eu vou para aqui e substituir isso por classe. Agora, pode não parecer que eu salvei muitos personagens, mas se eu fosse criar muito mais estilos para isso, você veria que é muito mais eficiente. Onde posso colocar no CSS? Bem, na verdade há alguns lugares. O primeiro lugar que você pode colocar em seu CSS personalizado, é indo para Divi, Opções de tema e, em seguida, rolando para baixo, e na verdade ele dá-lhe uma caixa para colocar em seu CSS personalizado. O outro lugar que você pode colocá-lo é no seu arquivo style.css, que eu posso acessar indo para a aparência, clicando no editor; ele vai dizer, “Aviso, você está editando o código-fonte aqui.” Vou clicar em entender. Se você se lembrar, nós configuramos nosso tema filho aqui para que pudéssemos colocar personalizações de código personalizado. Poderíamos colocar alguns estilos personalizados aqui. Você pode colocá-lo em um qualquer, mas neste caso, é algo a ver com o tema. Talvez queiramos reutilizar estas caixas uma e outra vez. Não é simplesmente uma personalização fixa ou de nível de superfície. Na verdade, está construindo algo. Novamente, é uma escolha pessoal, mas para mim eu gostaria de colocá-lo no meu style.css. Vou criar uma regra de classe aqui. O que foi de novo, foi caixa com borda, eu vou abri-lo e depois colocá-lo no estilo. Se eu clicar em atualizar arquivo, que irá atualizar o arquivo CSS, e eu deveria ser capaz de visualizar as alterações aqui, que por sinal, se você tem uma pré-visualização aberta e ele vai apenas atualizá-lo. Então, se eu rolar para baixo, você pode ver aqui que o estilo não se aplica. Eu só vou para ir e inspecionar elemento e ter certeza de que há uma classe sobre ele. Sim, tem uma caixa com fronteira. Mas o que eu acho que estamos experimentando aqui é um problema clássico com o desenvolvimento do WordPress e que é o cache. Se você não está familiarizado com o cache, é basicamente uma maneira que o site salva uma cópia de si mesmo para que ele possa carregar mais rapidamente no futuro. Às vezes, seu arquivo CSS será armazenado em cache e as alterações feitas, mesmo que estejam no arquivo não apareçam em seu site. Há uma maneira fácil de atualizar seu cache ou páginas específicas. Você só tem que ir para as ferramentas de desenvolvimento. Se eu clicar com o botão direito do mouse no botão de recarga agora, estou apenas clicando com o botão direito. Não vai funcionar. Mas se eu abrir ferramentas de desenvolvedor usando a Opção de Comando I, usando o Chrome no Mac e clicar com o botão direito do mouse aqui. Eu sou capaz de esvaziar o cache e recarregar. Vou clicar nisso e espero que nossas mudanças se deparem. Lá vamos nós. Temos nossas caixas, mas é claro que esquecemos de colocar no estilo que faz com que seja uma altura fixa. Vou colocar isso aqui. A coisa boa sobre este editor CSS é que ele lhe dá avisos e outras coisas. Eu cliquei em atualizar, ele está atualizado. Posso atualizar a página novamente. De repente, temos estas duas caixas. Lá você tem uma forma de personalização, construção de elementos personalizados, módulos personalizados e, em seguida, estilizá-los em linha ou colocando-o em seu styles.css, que você possa ir para as opções de tema Divi. Mas e se você usar um elemento? Você gosta, mas há algumas coisas de errado com ele. Talvez você não quisesse essa fronteira nos posts do blog. Você pode editar facilmente módulos que são criados por Divi, bem como módulos criados por você. Podemos descobrir como fazer isso inspecionando esses módulos. Vou clicar com o botão direito do mouse em um deles, clicar em inspecionar. Isso vai me levar até aqui para onde está esse elemento em particular. Neste momento, está a inspeccionar este rumo. Mas se eu subir até encontrar a coluna real, então eu tenho essa coluna. Posso ir mais fundo e ir ao artigo. Posso rolar para baixo até encontrar o que lhe dá essa fronteira. Eu posso ver aqui, há um estilo aqui, dot et_pb_blog_grid e também et_pb_post que está dando a ele uma borda de um px sólido com uma cor deste cinza. Se eu clicar nisso, você verá que para tudo que tem esse estilo ou aquela classe, ele agora está escondido e eu colocá-lo de volta e agora nós tirá-lo. Agora, o que podemos fazer é afetar isso imediatamente. Poderíamos dizer fronteira nenhuma e, de repente, não temos fronteiras naquelas grades de blog. Mas é claro, mudá-lo aqui em seu inspetor é apenas um playground não está salvando nada ao vivo para o site. O que eu gosto de fazer é cancelar esses outros estilos. Não sei por que isso não é permanente e copie toda essa seção. Então o que eu vou fazer no style.css ir para baixo e apenas se livrar de todos esses campos comentados. Esperemos que isso substitua o estilo que Divi está colocando lá. Na verdade, estou mais inclinado a colocar isso no Divi Theme Options, CSS, só porque é apenas uma modificação em algo que o crédito de Divi, mas isso é apenas uma preferência pessoal e eu acho que é uma boa demonstração de onde você pode colocá-lo diferente do seu style.css. Se você colocá-lo na parte CSS personalizado de suas Opções de tema Divi e clicar em Salvar, ele salvará. Volto aqui e atualizo a página. Como você pode ver, não há mais fronteiras, e se formos e olharmos para dentro aqui, podemos ver que nosso estilo aqui. Há o da Divi que está dentro do tema dos pais. Mas como você pode ver, nós fizemos nosso próprio estilo onde dissemos fronteira nenhuma e que substitui esse estilo aqui. Este é um pouco de CSS. Você pode definitivamente estudar mais sobre CSS e como anular coisas. Mas essencialmente o que eu queria cobrir, aqui é como você realmente iria sobre a edição de partes do seu site. Espero que esteja fazendo sentido agora que podemos construir coisas no Page Builder, podemos cuidar do trabalho pesado. Mas se precisarmos fazer algumas personalizações, seja para construir um elemento personalizado e ainda usar o sistema de grade. Posso demonstrar isso aqui. Você ainda está usando o sistema de grade ainda está respondendo. Está tirando vantagem do sistema de grade da Divi. Além disso, você pode afetar os módulos já existentes que Divi cria. Você pode substituir os estilos que vêm com esses módulos para torná-los como você deseja. Lá vai você, você pode ver que tudo ainda está responsivo. Você só está tirando essa fronteira. Espero que tudo tenha feito sentido. Se não definitivamente colocar uma pergunta nas discussões. No próximo vídeo, vamos ainda mais fundo e fazer algumas personalizações avançadas no Divi, talvez consertar algumas dessas caixas porque elas realmente não fazem nada agora. Mas no próximo vídeo, há realmente uma camada que podemos ir mais fundo e que é para afetar os templates PHP e a estrutura de nossa página. Vejo-te no próximo vídeo. 12. Personalizando com código — avançado: Estou captando esse vídeo exatamente onde paramos. Eu ainda estou em uma pré-visualização, como você pode ver na URL aqui, mas eu realmente não me importo com essas caixas. Eu não estou realmente indo para salvar alterações, Eu só vou clicar em “Ver página” e é perguntando, eu quero deixar as alterações podem não ser salvas. Se você quiser sair sem salvar, você pode clicar em “Sair”, mas isso é um bom aviso se você tentar sair do editor sem salvar seu progresso, isso é uma coisa boa de ter. Você verá aqui, porque não alteramos nenhuma estrutura da página, nosso estilo ainda se aplica, mas não temos mais essa seção com as caixas. Neste vídeo, quero mostrar como fazemos algumas personalizações avançadas. O que fizemos no último vídeo é basicamente com as caixas, nós construímos alguns HTML e com estes nós o estilizamos com CSS. Na verdade, nós estilizamos as caixas com CSS também, e o que podemos fazer, bem como colocar em algum JavaScript personalizado, mas o que acontece se quisermos mudar a estrutura de uma página dinâmica, digamos um post de blog ou um projeto ou mudar algo em espécie de uma forma estrutural? Isso pode não fazer muito sentido, só eu dizer isso, mas vamos cavar e mostrar-lhe um exemplo agora. Se eu rolar para baixo e ir para um de nossos posts, todos eles vão ser mostrados no mesmo modelo, eu vou mostrar o que eu quero dizer com isso em apenas um segundo. Abra estes em abas separadas e, como você pode ver, é o mesmo modelo. Você tem o título, você tem por, e então a pessoa que escreveu o artigo, você tem a data, você tem a categoria, desculpe, eu apenas cliquei na categoria, e então você tem a quantidade de comentários. Você tem a imagem em destaque, e então você tem o conteúdo. É exatamente o mesmo para isso, é tudo dinâmico. Mas uma coisa que eu queria mudar recentemente com um dos meus sites foi que eu não queria que este cabeçalho e metadados aparecessem acima da imagem. Eu queria que ele aparecesse abaixo da imagem, essencialmente eu queria que esta imagem em destaque mostrasse acima e também talvez eu quisesse personalizar isso também. Eu gosto do fato de que ele traz dinamicamente o nome do autor, a data e a categoria, e a quantidade de comentários. Mas talvez eu queira personalizar o texto deste talvez colocando categoria é ou postado em, que é tudo uma mudança estrutural no WordPress. Só para bater na diferença entre o que acabamos de fazer no último vídeo e neste vídeo, basicamente podemos mudar qualquer coisa a ver com o estilo usando CSS e podemos adicionar coisas ao conteúdo com HTML. Mas em termos desse conteúdo dinâmico que é puxado por um template no PHP, nós realmente vamos ter que cavar no template e modificá-lo para que essa mudança afete o template padrão do blog. A maneira como podemos fazer isso é cavando diretamente no código WordPress. Eu tenho meu diretório de temas aqui, eu vou voltar para trás para que você possa ver, este é o nosso projeto e só para que você saiba para onde ir. Aqui está o código que você provavelmente não quer tocar além do arquivo de configuração e certificar-se de que ele está conectando ao banco de dados, mas nós já temos isso, a pasta na qual você vai editar com mais frequência e praticamente nada é esta pasta Temas e, em seguida, ir para o seu tema filho, lembre-se, é por isso que criamos este tema filho. Foi para que pudéssemos colocar tudo sobre personalizações em uma pasta e referenciá-las. Como eu disse, eu quero colocar essa imagem em destaque acima deste cabeçalho e esses metadados, e a maneira de fazer isso é através do único modelo. No WordPress, vamos passar por cima hierarquia de modelos em um vídeo futuro, mas apenas por agora, saiba que se você criar uma postagem de blog ou uma página, ele usa o modelo single.php. Para fazer essa modificação, o que eu preciso fazer é ir para a pasta pai e encontrar o single.php. Eu vou copiar isso e então eu vou para o meu tema div e colá-lo. Agora, só para ficar claro o que está acontecendo aqui é porque eu estou usando um tema infantil, WordPress vai olhar nesta foto primeiro, e ele vai procurar por um single.php e basicamente todos os arquivos de modelo, e se eles não podem encontrá-lo aqui, Ele vai carregá-lo aqui. É por isso que nossos sites ainda funcionam se não temos todos os templates aqui, porque ele olha aqui primeiro para ver se é alguma personalização que precisa ser feita, e se não há nada lá, ele só vai para o tema pai. Mas essencialmente o que estamos fazendo aqui é pegar o modelo do tema pai e, em seguida, somos capazes de editá-lo na criança para fazer personalizações. Vou clicar com o botão direito sobre isso e editar no Atom. Agora, você provavelmente não vai entender tudo aqui e tudo bem, mas eu recomendo que você tente se familiarizar, aprender mais sobre a hierarquia de modelos, aprender mais sobre as funções. Este é um processo contínuo e eu certamente não entendo absolutamente tudo o que acontece nos arquivos de modelo. Mas eu posso descobrir isso apenas tendo um olhar como você pode ver este div aqui para o conteúdo principal, ele vai todo o caminho até aqui, e você tem algumas funções div. Você pode dizer que div porque eles tem et sublinhado pb. Este é um especial para div e você pode combiná-los com o que você vê na página, para que você possa ver esta div com conteúdo principal. Se eu voltar ao nosso site ao vivo e inspecionar e dar uma olhada no HTML, eu posso ver o div id main-content. Se eu descer e olhar para a área de conteúdo fino, Eu só vou copiar e colar isso porque você pode realmente clicar aqui, pressionar “Command F” no Mac e encontrar a área de conteúdo pesquisando, então você pode ver esta div aqui, área de conteúdo . É assim que eu iria sobre obter uma compreensão de como esse modelo se relaciona com isso. Mas ele tem um monte de conteúdo dinâmico, e o que nós vamos precisar fazer é descobrir onde o PHP está pegando a miniatura e colocá-lo acima do cabeçalho e não abaixo do cabeçalho. Agora, antes de fazermos nossas mudanças, eu só queria fornecer algumas instruções extras e um aviso extra para aqueles de vocês que já estão hospedando seu site na internet. Basicamente, temos feito isso localmente, então eu sou capaz de apenas ir para a pasta com meu site no meu computador e apenas clicar e arrastar arquivos e clicar com o botão direito do mouse e abri-los no meu editor. Mas se o seu site já está na internet, você terá que usar o FTP. Agora, você não precisa necessariamente usar FTP, mas é altamente recomendado, e a razão é algo que eu vou mostrar agora. Só porque eu já fiz isso antes e tem sido um problema real, então certifique-se de usar FTP. Vou até aqui, estou no meu Editor de Aparência, você pode ver o nosso style.css. Eu vou entrar em functions.php e eu vou colocar em algum código ruim. Eu vou apenas colocar em algum código ruim, eu vou atualizar arquivo, e na verdade WordPress tem incorporado agora onde eles realmente descobrir como quando você colocar em código ruim e não permitir que você atualize. Mas em tempos anteriores, se você cometeu um erro, isso permitiria que você colocasse isso e então você teria algo que eu gosto de chamar de tela branca da morte. Só para mostrar como isso seria, eu só vou jogar isso em minhas funções arquivo PHP aqui, eu vou colocar em algum código ruim e então eu vou balançar sobre o site e apertar “Refresh” e de repente o O site inteiro está em baixo. Isso é muito importante, porque se você cometer um erro em seu site no PHP, ele vai desligar todo o seu site. É importante saber que quando isso acontecer, porque inevitavelmente você vai cometer um erro do PHP em algum momento que isso vai acontecer, não surte. Você pode simplesmente voltar para seus arquivos PHP e descobrir onde está o erro e removê-lo. Vou apenas removê-lo agora, pressione “Salvar” e recarregue a página. De repente todo o meu site funciona de novo. Essa é uma das coisas ruins sobre WordPress eu acho, se você cometer um erro PHP, ele vai derrubar todo o seu site. É por isso que se você está construindo um site para alguém que já tem um site ou você está atualizando seu site existente, definitivamente desenvolva localmente ou em um local diferente, como um servidor de teste, que entraremos em preparação posteriormente neste curso. Mas eu só queria deixar isso bem claro, se você cometer um erro em seu PHP, ele pode descarrilar todo o site, é por isso que você precisa ter certeza de que você está criando essas mudanças ou fazendo essas mudanças não em um site, que você ficaria muito chateado com isso indo para baixo. O outro ponto que gostaria de fazer sobre este assunto é voltar à importância da utilização do FTP. Se eu fosse capaz de usar o editor como você costumava ser capaz de fazer na web press, e vamos apenas dizer que eu fiz isso e eu coloquei esse erro. WordPress me permite entrar e editar esses arquivos de modelo de dentro do painel. Se eu recarregar a página, posso acessar meu site. Então eu poderia ser como, “Eu vou entrar e mudar esse código, corrigir meu erro” Mas se eu entrar em WordPress admin, ele está quebrado também. Eu fiz isso, cometi esse erro em ocasiões antes onde eu editei modelos de temas e isso causou um erro do PHP e o site do meu cliente caiu, e felizmente, ele nunca esteve em um site ao vivo. Tem estado na construção. Mas se eu não tiver acesso ao FTP, é isso. Estou completamente preso. Não posso entrar e editar o código. Você precisa de acesso em nível de arquivo ao código. Isto é muito importante. Então vamos, eu removi o código e meus sites de volta. Se você pouco duvidoso no FTP, volte para a minha primeira classe de compartilhamento de habilidades, “Compreendendo o Desenvolvimento Web” e veja isso. Basicamente, você pode usar um cliente FTP que lhe dará uma interface semelhante a este. Meus favoritos são Cyberduck e Filezilla, mas se você quiser aprender mais sobre FTP, definitivamente, volte e assista isso. Estou voltando para o que estávamos falando antes. Desculpe pela pista lateral, mas isso é muito importante que você entenda esse aviso. O que eu vou fazer é realmente conectar ao FTP agora, porque eu realmente tenho o template é salvo para o meu próprio site e eu posso realmente referenciar esse código para lembrar como eu fiz isso, porque isso é um movimento algumas coisas ao redor para obtê-lo para trabalhar. Esta será realmente uma boa oportunidade para você ver como você editaria um site WordPress usando FTP. Vou abrir o Filezilla. Vou acessar meus sites e conectar-me ao FTP no meu próprio site. Vou colocar minha senha aqui e o que eu vou fazer é entrar no meu site, e isso é essencialmente como você faria isso bem usando seu próprio site, você pode ver aqui, eu tenho meu tema infantil, e eu posso cavar isso, e você pode ver aqui, eu tenho um modelo single.php. Eu posso clicar em “Exibir” e “Editar”, e o que ele vai fazer é baixar uma cópia temporária que eu possa editar e depois fazer o upload de volta para minha hospedagem. Tem que ter cuidado com isso. Certifique-se de que todas as alterações que você criar estão sendo carregadas. Basicamente, referenciando o que eu já fiz. Você pode ver aqui em baixo que eu movi esta informação em miniatura acima aqui onde ele estava aqui antes, Eu escondi esta função que cria o post meta e eu coloquei no meu próprio post meta aqui. Novamente, eu poderia entrar em um vídeo de duração de uma hora sobre como eu fiz isso , mas eu só quero obter o ponto sobre como você iria editar a estrutura de sua página. O que eu vou fazer primeiro é mover a imagem acima e apenas verificar o que eu fiz aqui. Posso fazer referência a isso e ir até aqui. Eu posso encontrar onde esta função está, procurar por ela. Como você pode ver aqui, as informações de miniatura estão sendo geradas abaixo deste meta post. O que eu vou fazer, assim como eu fiz aqui, eu vou pegar o material da imagem em destaque. Basicamente, tudo menos o título, então eu poderia ter que fazer isso em duas cópias e pastas. Eu quero colocá-lo logo após o post meta wrapper porque aqui, você pode ver o título da entrada. Então definitivamente tem que estar por trás disso. Eu posso copiar e colá-lo lá, mas eu realmente não abri minhas tags PHP. Para aqueles de vocês que não conhecem PHP, novamente, talvez, queiram voltar e fazer checkout compreendendo o desenvolvimento web. Mas eu abri alguma tag PHP, então eu posso colocar em PHP, copiar essas coisas, e recuar através. Vou voltar e pegar o resto da informação aqui. Deixe o título lá, indo para “Salvar”. Então eu vou trazer isso à tona também, porque isso precisa vir à tona. Isto é, na verdade, quando a imagem é exibida. Você pode ver que por impressão em miniatura, isso vai ser diferente, a propósito, para qualquer coisa que você usar este é o código da divi agora. Vou abrir espaço para baixo e colocar esse conteúdo lá dentro. Basicamente, está perguntando se é um vídeo? Ele colocará o vídeo em vez da miniatura e, se for uma miniatura, imprima a miniatura e, se for uma galeria, imprima uma galeria. Essas são coisas extras que Divi permite que você faça. Basicamente, na maioria das vezes, você tem uma miniatura ou uma imagem em destaque para sua postagem de blog. Eu vou salvar mais uma vez, é sempre uma boa idéia para salvar continuamente e então eu vou voltar para aqui e atualizar. Lá vai você. Agora você pode ver que a imagem aparece acima do cabeçalho e os metadados aqui. Mas lembre-se, eu queria talvez mudar isso um pouco, então o que eu vou fazer é descer, e infelizmente, há uma linha de código onde Divi descobre o que colocar aqui e coloca tudo lá dentro. Mas podemos dividir isso em nosso próprio código, se quisermos, e foi isso que fiz com meu próprio site. Eu dividi isso nesta pequena seção aqui. Vou copiar e colar isso e explicar para você. Mas antes de tudo, eu vou comentar que post meta fechar a tag PHP, abrir uma tag PHP e, em seguida, no meio, eu vou colocar meu HTML. Eu vou clicar em “Salvar” sobre isso e agora, quando eu clicar em “Atualizar” ele deve ter substituído este post meta que foi gerado pela divi post meta função e colocar em meu próprio código. Vou atualizar a página, e agora, você pode ver, tem mais algumas palavras lá dentro. Está na ordem que eu escolhi, e isso é tudo como definido por aqui. Só para percorrer um pouco, isso não acontece automaticamente, mas ao mesmo tempo, você consegue exatamente o que Divi quer. Se eu descomentar isso, pressione “Salvar”, ele deve aparecer ambos agora, então você pode ver lado a lado isso é o que divi sempre colocará para fora se você colocar nessa função. Mas se você dividi-lo como nós fizemos, você pode colocar em seu próprio código personalizado e ele ainda está usando conteúdo dinâmico. Vamos colocar isso de volta onde estava. Ele ainda está usando conteúdo dinâmico, então em vez de dizer, “Dê-me o post meta, o que você está fazendo é, você está dizendo as palavras específicas que você quer e você está colocando em suas próprias linhas e coisas, mas então você pode colocar em conteúdo dinâmico como o link do autor. Então você pode colocar em algum código para encontrar a categoria. Este é um pouco de código extra porque talvez, você não tenha uma categoria. Se você não tem uma categoria e você pediu para colocar em uma categoria, ele irá errar. Então você começa esta declaração condicional aqui para se certificar de que há uma categoria antes de exibi-lo, e se há várias categorias vai exibir todos eles aqui. Para categorias, é um pouco mais complicado. Publicado em é muito simples, é o método de data no WordPress. Então, se você estiver sempre no modelo, você pode colocar a data e ele irá produzir a data. Então, no período final, eu coloquei o número de comentários e usando esta função, número de comentários, o primeiro argumento ou parâmetro neste é, o que aparece se não houver comentários? Não coloquei comentários. O que aparece se houver um comentário? Que eu coloquei um comentário, e o que aparece se houver mais de um e este pequeno sinal de porcentagem é um pedaço de indicador dinâmico que qualquer que seja o número de comentários, ele vai entrar nessa pequena porcentagem Assine. Um pouco mais complicado aqui, você pode basicamente colocar o que quiser aqui. Eu vou me livrar disso, colocar em um intervalo aleatório dizendo, “Postar é incrível”, eu vou salvar isso, e agora, de repente, você atualizou todos os seus templates com o bit estático de código e você pode ir a cada post e você vai ver que tem isso, é o mesmo. Você vai ver que você tem este post é incrível, então você pode ver isso. Você pode jogar o que quiser lá dentro. Eu acho que faz sentido ter a data, por quem é publicado, e o número de comentários. Mas você pode fazer o que quiser. Essa é a grande coisa sobre o WordPress é, nível infinito de personalização, você começa com um construtor de página para obter uma página execução com código mínimo e, em seguida, se você quiser entrar e mudar qualquer coisa, você pode fazer através de CSS como fizemos nesta página e HTML, ou você pode entrar e afetar os modelos. Esperemos que isso não foi muito avançado para você, tenha em mente que, é uma coisa contínua com a aprendizagem de imprensa web até eu tenho que cavar um pouco e tentar algumas coisas e resolver problemas para obter as coisas do jeito que eu quero. Mas a coisa mais importante a entender aqui é o diretor. Se você vir um problema estrutural em sua página que você não pode corrigir com CSS ou JavaScript, você quer entrar em seus templates PHP e certificar-se de que essas personalizações são feitas dentro de um tema filho e que você não as está fazendo ao vivo porque se houver algum erro, ele encerrará todo o site. Mas como você pode ver se você criou corretamente, então todas as suas postagens agora terão a imagem acima do cabeçalho e os metadados. Espero que isso tenha feito sentido, se não, definitivamente, colocar alguns comentários na discussão e eu vou falar com você no próximo vídeo. 13. A hierarquia do modelo do Wordpress: Como você viu no último vídeo, editamos um arquivo de modelo no WordPress, que neste caso era o single.php. Mas se entrarmos em nossa pasta pai com divi nele, podemos ver tantos arquivos de modelo diferentes, footer.php, functions.php, header.php. Há um monte de arquivos de modelo. Neste vídeo, vamos falar sobre a hierarquia de modelos WordPress. Na minha mente, a melhor maneira de aprender sobre isso é duas maneiras. Ativar um plug-in em sua instalação do WordPress para começar com chamado show atual modelo. Se você estiver em uma página ou seção do seu site e se perguntando qual é o modelo, isso realmente ajuda. Eu só vou para “Plugins”, “Adicionar novo”. Eu estou indo para ir procurar por mostrar modelo atual. Você pode clicar em “Instalar agora”. Depois, uma vez instalado, clique em “Ativar” e, de repente, ele é ativado. Se isso estiver funcionando, devemos ser capazes de voltar ao nosso site e acima do topo veremos o modelo. Este modelo é page.php. Se formos para nossos posts de blog, devemos ver agora single.php porque é a página única, tipo de post único. Se formos a um único item de portfólio, devemos ver single também. Na verdade, há um arquivo de modelo separado chamado projeto único para isso. É realmente por isso que esse plug-in é realmente bom, porque eu teria pensado inicialmente tudo talvez isso referencia o single, mas não. Há, obviamente, um modelo personalizado para isso e você pode realmente vê-lo aqui em cima. Ele lhe dará os caminhos de modelo relativos, então isso está em nosso tema pai. Você pode olhar para todos os arquivos de modelo que estão incluídos nisso. A segunda ferramenta ou segundo recurso para entender hierarquia de modelos é, Eu estou indo apenas para ir para o site WordPress procurando hierarquia de modelos WordPress. Escrevi mal a ortografia lá, mas WordPress ou Google sabe do que estou falando. Se formos a este artigo no wordpress.org sobre hierarquia de modelos, posso rolar para baixo e ver a visão geral visual. Apenas para combinar isso com o que temos aqui agora, projeto único, este é um tipo de post personalizado, então provavelmente não está listado aqui. Mas se voltarmos a uma postagem de blog e podemos ver single.php, mas você pode combinar isso com a hierarquia de modelos. O que vai acontecer quando alguém acessa seu site ele vai passar pelo índice php, descer através do singular php e bater single.php. Se ele vai para uma página, ele irá para page.php, que vimos antes quando fomos para a página inicial. Uma página é page.php é o modelo para isso. Isso é um pouco confuso em si mesmo, mas pelo menos você pode juntar onde tudo vive vê-lo em seu site o modelo acima aqui e também vê-lo aqui. O que também é importante notar aqui é que, enquanto o WordPress vai começar no índice php e procurar archive.php, ou procurar singular, ele vai procurar um único. Não tem necessariamente de estar lá. No caso do nosso tema divi, por exemplo, se entrarmos na pasta tema divi e procurarmos archive.php, ele realmente não existe em divi. Mas se fôssemos criá-lo, WordPress procuraria arquivo na situação de uma página de arquivo. O que é uma página de arquivo? É basicamente, como você pode ver aqui, author.php, category.php. É basicamente um índice de diferentes posts categorizados por categoria, data e coisas assim, então se entrarmos em clicar em nossa categoria, você verá agora que não há modelos de arquivo, então é apenas index.php. Mas index.php cuida de todo o site. Talvez não queiramos editar index.php diretamente. Talvez só queiramos afetar esta página de arquivo. Aqui está um exemplo da hierarquia de modelos trabalhando para nós. Na verdade, vou criar uma página de arquivo aqui. Vou entrar em arquivo, novo arquivo em nosso editor de código, que neste caso é Adam e o que podemos fazer é copiar o código do índice. Eu vou ter que ir para divi, encontrar o modelo index.php então agora eu vou pegar todo o código e copiar isso para aqui. Então eu vou salvar isso como archive.php. Agora você pode estar se perguntando, bem, por que nós duplicamos algo que já está lá? Essencialmente, podemos não querer editar o arquivo index.php porque isso funciona com todos esses modelos. É um arquivo dos pais. Só queremos afetar o arquivo. Estamos criando um modelo que o WordPress procurará as mudanças lá e substituirá o que aparecer no index.php. Esta é a mesma teoria de temas filhos e temas pais. WordPress vai olhar para um lugar primeiro e se ele não encontrá-lo, ele irá para o pai. Espero que esse fluxo lógico esteja fazendo sentido para você. Caso contrário, novamente, à medida que você cresce ao longo de sua jornada de codificação, você deve começar a internalizar essas coisas mais. Mas sim, se entrarmos nisso agora e clicar em “Atualizar”, podemos ver que o modelo que está sendo usado como archive.php e não index.php mais. WordPress sabe onde procurar e ele vai fazer referência a isso. Agora, qual é a diferença entre índice e arquivo? Bem, não deve haver nenhuma diferença porque copiamos e colamos o código diretamente. Mas agora, se quisermos fazer personalizações, podemos fazer isso no archive.php. Talvez queiramos fazer referência ao facto de que se trata de um arquivo. Deixe-me investigar o código da frente e ver onde eu gostaria de colocar isso. Vejo que esta é a área de conteúdo. Este é o conteúdo principal. Talvez eu coloque aqui. Vou colocar um título. Vou dizer arquivos. Vou apertar “Salvar” nisso. Voltarei para aqui e apertarei “Refresh”. Você pode ver que Archives está lá, mas está fora para o lado porque eu não coloquei em um recipiente. Isso é culpa minha. Vou remover isso e colocá-lo no recipiente. Pressione “Salvar” nisso. Agora você pode ver em qualquer página de arquivo, você terá arquivos. Agora, isso é apenas conteúdo estático. Você provavelmente gostaria de colocar em algum conteúdo dinâmico que diz, “Aqui estão todas as postagens desta categoria”, e colocar o nome da categoria e talvez algumas informações sobre a categoria também. Você pode querer fazer isso, mas essencialmente, eu estou apenas mostrando aqui sobre a hierarquia de modelos. Você pode descobrir a hierarquia de modelos fazendo alguma pesquisa no wordpress.org, olhando para esse diagrama visual que você pode usar mostrar modelo atual para olhar para qualquer coisa que você está em seu site. Novamente, não temos muitas páginas ou lugares para ir em nosso site, mas você pode ver para isso onde eu obtive a página e como você usaria isso é, digamos, por exemplo, você queria alterar esse layout e você queria que o Imagem do Facebook ou a imagem aqui para aparecer acima do título. Bem, você vai até aqui e você vê, único project.php. Esse é o modelo que preciso modificar. Mais uma vez, voltando para divi aqui, você iria encontrar isso e você não iria editá-lo diretamente sobre o tema pai porque lembre-se, estamos fazendo bem e modificações no tema filho. Mas o que você faz é copiá-lo, entrar no tema do seu filho, colar e eu vou fazer isso muito rápido para você aqui. Basicamente, se você queria modificar algo assim, repente o título aparece antes disso e agora isso não é muito prático. Mas você pode ver aqui, eu posso afetar esse modelo e isso vai se aplicar a todos os projetos agora. Se eu for para o Google, título Google, então você pode talvez mais texto estático descritivo haveria “ Cliente anterior ”, em seguida, se voltarmos “Cliente anterior: Google” e, em seguida, isso vai comprar para todos os seus projetos, “Cliente anterior: Amazônia”. Com este vídeo e o vídeo antes, espero que eu tenha mostrado como você pode entrar e editar modelos. Se você entrar em qualquer coisa que mostre conteúdo dinâmico como uma postagem de blog, e você não gosta de como ele é exibido, talvez você queira colocar algo que apareça em cada postagem de blog ou talvez você queira reorganizar o conteúdo em uma postagem de blog é assim que você faria. Você entraria, veria quais modelos sendo usados, entraria em seu tema, criaria esse modelo se ele ainda não existisse no seu tema filho e criaria suas modificações lá. É assim que você pode modificar os modelos PHP no WordPress. Se você precisar de mais informações sobre a hierarquia de modelos, há muitas informações online. Definitivamente ter uma leitura do manual do tema wordpress.org. Vejo você no próximo vídeo. 14. Criando seu site: Agora, essencialmente, nós cobrimos todas as partes da construção no WordPress. Começamos com o tema, usamos um construtor de páginas para construir uma página em seu site, então fomos para como personalizar o estilo com CSS, e nós construímos alguns elementos personalizados que desde então estão escondidos. Então nós cavamos os modelos também. Nós passamos por todas as camadas do WordPress, começando no topo, sem código, para entrar em profundidade no código. Neste momento, você poderia teoricamente pegar esse conhecimento e executar com ele, construir o resto do seu site, mas eu só pensei que, por uma questão de completude, eu vou executar você através da construção deste site, e se você quiser ficar junto, você pode aprender mais sobre o WordPress. A primeira coisa que vejo como um problema é que temos esses itens de menu, e eles realmente não se vinculam a nenhum lugar. Essa seria a minha primeira coisa que eu faria, se fôssemos aqui para a URL e digitássemos projetos ou apenas projetássemos, podemos ver um índice ou uma página de arquivo, referenciando o que falamos no último vídeo de todos os nossos projetos. Esta será apenas uma página básica de arquivo, reunindo todos os nossos projetos. Eu vou me livrar desse pedaço de texto que diz arquivos, porque ele realmente não precisa estar lá, e realmente não adiciona nada, então voltando para o modelo, me livrei de arquivos. Legal, esta é basicamente nossa página de portfólio, podemos usar isso, mas ao mesmo tempo temos que cavar no arquivo template e bem, ir um pouco mais fundo no código para mudar o layout disso, e realmente não é necessário. O que eu vou fazer é criar outra página usando Divi page builder, para que possamos definir nossos projetos um pouco mais agradável. Eu vou para New Page, e eu vou chamá-lo de Projectos. Eu vou bater guia para que ele sai com um URL, sim, eu gosto desse URL. Se você não gostar do URL, por exemplo, pode alterá-lo para o que quiser. Muitas vezes estou mudando URLs para ser mais amigável ao SEO, então isso é apenas outro ponto. Vou mudar do editor padrão WordPress WYSIWYG para o Divi Builder. Vou colocar um título aqui, apenas para largura e colocar um pouco de texto. O texto vai dizer Cabeçalho 1, Projetos anteriores, eu vou chamar este título, então é mais fácil para mim entender. Então eu posso adicionar em um módulo abaixo que mostra meu portfólio. Eles têm um módulo de portfólio bem formatado aqui em Divi. A primeira coisa que vou fazer é ir para Design, escolher Grade porque para largura é muito grande. Só tenho uma categoria no momento, então vou escondê-la por enquanto, mas vou ficar com tudo isso. Mantenha o nome Portfolio, e vamos apenas visualizar o que temos agora. Temos nossos projetos anteriores aqui. Uma outra coisa que eu quero fazer apenas para adicionar um pouco mais de conteúdo a esta página, é mais texto para atrair a pessoa. Vou escrever uma coisa aqui. Vou para a linha central, e não me importo com o nome Texto. Eu vou mover isso acima do portfólio, então eu vou pré-visualizar isso. Clique nos links abaixo para conferir meu projeto anterior, lá vamos nós. Estou feliz com isso, então vou clicar em Publicar, e mais em meus outros links de menu, então eu tenho Portfolio, eu tenho Serviços. Vou adicionar uma nova página chamada Serviços. Isto é essencialmente como você vai sobre a construção de um site, você pode ter um design enviado para você, ou você pode apenas estar projetando ele imediatamente, mas é isso. Você constrói páginas, faz personalizações avançadas quando necessário. Mas na maioria das vezes usando o Divi Builder, você pode simplesmente construir a maior parte do que você precisa, apenas usando esta interface aqui. Mais uma vez, vou colocar um título. Eu realmente não preciso colocar em um novo módulo para o texto, eu posso realmente apenas colocar um parágrafo abaixo deste módulo real aqui. Aparentemente, nós nos livramos dessas caixas estúpidas antes, eu estou realmente indo para construir alguns elementos personalizados apenas para mostrar a vocês como vocês iriam lidar com isso, no caso de você querer fazer algo personalizado. Eu vou ter uma linha igual de três colunas, e eu vou colocar em meu próprio código. Vou colocar um div, e vou chamá-lo com a caixa de serviço da classe. Agora, o que a melhor coisa a fazer aqui é tornar tudo bom em um único módulo, e então você pode simplesmente simplesmente duplicar esses módulos, se você estiver indo para reutilizá-los. Eu só vou construir algo agora, e eu também vou para o meu editor de temas, para que eu possa colocar um pouco de CSS. Você verá como desenvolvemos uma caixa de serviço. Vou avançar um pouco aqui e depois volto logo e aviso-te o que fizemos. O que eu tenho aqui, ainda não parece muito bonito, mas parece bom. Eu tenho esta caixa que diz WordPress Web Development nele, como um dos meus serviços, eu posso duplicar isso, basicamente o que eu fiz, só tenho que div com a classe service-box, colocar um cabeçalho h2 lá, na verdade tinha uma cor de fundo usando isso antes, mas eu decidi me livrar disso, então eu posso especificar a cor de fundo em minha própria classe aqui. Como você pode ver, eu tenho uma classe de caixa de serviço onde eu defino os estilos, eu estou dando uma borda, eu estou dando uma altura mínima, textos e forro no centro, a cor de fundo foi definida como Um branco. Então eu estou usando uma regra CSS para afetar o cabeçalho para marcar dentro dessa caixa, dando-lhe uma margem superior e dando-lhe algum preenchimento à esquerda e à direita. Então, finalmente, para obter essa funcionalidade de pairar, eu posso fazer isso em CSS colocando, eu acho que isso pode ser chamado de uma pseudo-classe ou algo assim, ele vai no final do dia com dois pontos e, em seguida, pairar, então sempre que eu passar o mouse sobre ele, por que é que eu tenho muitas páginas abertas? Sempre que eu passar o mouse sobre ele, essa cor de fundo muda. Obviamente você gostaria de gastar mais tempo projetando algo um pouco mais agradável, mas para nossos propósitos eu vou seguir com isso. Vou duplicá-lo, mudar um dos serviços para Yii2 Framework Development. Arraste-o para lá, duplique novamente, altere o título, Salvar e sair e, em seguida, mova-o para cima. Vamos ver o que temos lá. Como você pode ver, os estilos estão se aplicando a tudo o que é uma caixa de serviço. Enquanto tivermos a aula lá, ela se aplicará, então temos apenas as partes que precisamos duplicar, e o resto do estilo e tudo é feito aqui. Agora nós temos isso, idealmente nós gostaríamos de colocar mais algumas informações lá, talvez link para o portfólio, mas para nossos propósitos, apenas para fazer um breve vídeo, eu vou dizer que estou feliz com isso e eu vou clicar em Publicar. Agora eu tenho uma página de serviços, eu posso clicar em Exibir página, Blog aqui, deve vincular ao índice do blog. Vamos ver se já temos um. Não, não temos. Vamos criar uma página de blog para terminar isso. Vou ligar para este Blog. Vou usar o Construtor Divi mais uma vez. Eu vou colocar em um título, todos os meus posts de blog, vou dar-lhe um rótulo de administrador de título. Em seguida, podemos facilmente adicionar em um módulo aqui para o blog, Eu prefiro grade, como eu disse antes do que largura total, mas qualquer flutuador é o seu barco. Voltando ao conteúdo, só estou passando por aqui caras. Sim, estou feliz com tudo isso, Salvar e sair. Vou clicar em Pré-visualização, todo o meu blog postado lá. Veja a rapidez com que isso estava usando conteúdo dinâmico, do que usando o construtor de páginas. Se quiséssemos colocar algum texto entre lá também podemos fazer isso como fizemos antes, mas por uma questão de tempo eu vou apenas clicar em Publicar. Agora temos todas as páginas que precisamos colocar nesses menus. Agora podemos voltar para Aparência, Menus, esses são todos links personalizados, e o que poderíamos fazer é mudar isso para projetos. Mas também, ele nos dá as páginas aqui para inserir também, e isso é provavelmente um pouco mais seguro de fazer, porque se mudarmos a URL, então ela será atualizada. Eu vou remover tudo isso, e eu vou colocar em projetos, serviços, blog. Você pode marcar todos eles e jogá-los dentro Eu quero projetos primeiro, eu quero serviços em segundo lugar, e eu não quero que eles sejam chamados de projetos para que eu possa mudar o rótulo de navegação, e chamá-lo de portfólio. Então temos a página do blog aqui. Eu posso adicionar na minha categoria lá para WordPress aqui, modo que é dinâmico, bem, pode agarrar isso, colocá-lo lá em baixo. Então, é claro que eu queria como um link sub menu, então eu vou movê-lo sobre e ele vai dizer sub item. Se eu pressionar Salvar Menu, você verá que o menu será atualizado. Você pode ver porque entre a página do blog, Blog é destacado. Se eu clicar nisso, isso será destacado se eu for para Serviços, esta página de meus serviços, se eu for para Portfolio, eles são todos meus projetos e eu posso cavar neles. Agora nós temos um concedido um site muito básico, mas nós cobrimos todos os principais princípios para construí-lo fora. Se você quer gastar mais tempo nisso, se você tem seguido junto e você quer realmente construir isso em algo que você realmente quer publicar, vá em frente. Mas na minha situação, isso é basicamente para a página Construindo e as personalizações avançadas, o que eu vou fazer no próximo vídeo é instalar alguns plugins, que eu acho que são realmente importantes, e também mostrar a vocês plugins em ação e como eles realmente atualizar o seu site WordPress. Em seguida, no próximo vídeo depois disso, vamos para um plugin específico que permite e-commerce em seu site, então, se você está interessado nessas coisas, definitivamente ficar por perto. Vejo você no próximo vídeo. 15. Instalando plugins: Agora temos a base de um site muito bom. Temos páginas, temos um menu, temos projetos aqui, temos postagens de blog, então temos um site básico configurado. Mas o que eu quero fazer é habilitar funcionalidade extra que talvez não saia da caixa com WordPress e talvez Devi não o ajude com isso também. Às vezes, quando você precisa de funcionalidade extra ou você quer adicionar algo um pouco extra ao seu site, você pode querer olhar para a instalação de alguns plug-ins. Agora apenas um aviso com plugins antes de mergulhar e instalar alguns, você pode passar por cima de ambos os plugins, definitivamente e há muitos plug-ins para as pessoas que não querem tocar código em tudo, que tudo o que eles fazem é inserir como uma linha ou dois de código. É melhor manter seu site limpo se houver uma situação em que tudo o que ele requer é que você apenas entrar em talvez seja apenas o seu editor e colocar em uma linha de código. É muito mais limpo apenas entrar e editar seu código do que instalar um plug-in. Por outro lado, há situações em que o plug-in faz muito e não é uma simples mudança, caso em que é uma boa idéia obter um plug-in. Mas o meu aviso para quem faz o desenvolvimento é manter o site o mais limpo possível, não instale plug-ins para absolutamente tudo, deve haver um propósito claro por trás de um plug-in que você instala. Depois que querendo fora do caminho, vamos entrar em plug-ins item de menu aqui e clique em Adicionar novo. Agora, um plug-in muito popular pode até estar na primeira página. Agora não é talvez no popular, um plug-in muito popular que você pode procurar por aqui. Só vou verificar se é popular. Yap, é Yoast SEO e você verá este plug-in trabalhando para você em apenas um segundo. Mas basicamente ele permite que você atualize seus metadados para SEO em seus posts e páginas do blog. Coisas muito poderosas, você não quer apenas tomar o que o WordPress gera e usar que muitas vezes. Então vamos usar Yoast, depois disso instala clique em Ativar e agora você verá aqui que Yoast está instalado e ativado. Para usar Yoast, você pode simplesmente entrar em qualquer post ou página. Vou até aqui onde já temos o nosso post e vou clicar em Editar Post. Uma vez que eu estou dentro, eu posso rolar para baixo e eu posso conferir uma nova seção e esta é a minha pré-visualização no Google. Você pode ver que é assim que o título vai aparecer no Google, esse é o URL que vai aparecer, e este é o texto. Agora, eu só tenho uma imagem, você tem um título e você tem uma passagem bem ali que vai direto para uma introdução. Isto pode estar tudo bem. Neste momento, não vejo nada necessariamente de errado com ele. Que talvez você tenha algum código no topo da sua página e o Google interpretando isso, apenas colocando um código aleatório aqui ou você sempre quer verificar essas coisas, especialmente se SEO é importante para você. Talvez às vezes você queira que o título seja um pouco diferente em sua página da Web em vez de no Google, talvez você possa escrever uma manchete melhor para atrair alguém olhando no Google do que você pode aqui, e você só quer para que isso possa ser mais relevante. Não sei, é bom verificar qual é a sua pré-visualização no Google e editá-la se precisar. É para isso que você pode usar o Yoast SEO. Tudo o que você faz aqui é editar snippet agora, ele está apenas puxando do artigo atual, mas eu posso mudar isso para como instalar. Isso é engraçado, editar o post do blog sobre como instalar plug-ins no WordPress enquanto estamos fazendo um vídeo sobre plug-ins no WordPress. Nesta situação, eu realmente não preciso editá-lo, mas você pode querer. Você também pode editar um slug. Eu gostei da lesma, mas você pode ver aqui como eu estou atualizando lá, eu estou atualizando lá. Mas talvez você queira uma descrição melhor do que a primeira introdução do seu conteúdo. Talvez você queira dizer, este é o melhor artigo de sempre sobre como instalar plug-ins. Obviamente que é uma descrição terrível, mas você começa o ponto, você pode entrar e editar como ele parece no Google. Você também pode entrar e editar como ele aparece no Facebook e Twitter. A mesma coisa se aplica aqui, talvez ele esteja puxando código ou textos que você realmente não quer na visualização para que você possa atualizá-lo aqui. Você também pode inserir uma palavra-chave de foco para que, se você está tentando classificar para uma determinada palavra-chave, você pode colocar isso lá e deixar Yoast avaliar onde quer que você esteja fazendo um bom trabalho ou não. Eu só vou atualizá-lo lá com minha nova descrição e que é essencialmente o Yoast. Outro plug-in que eu uso, que é muito importante e isso não vai realmente se aplicar em nossa configuração local porque ele não está realmente na internet, mas há um, desculpe, eu tenho que ir adicionar novo aqui. Há um código, SSL muito simples. Para aqueles de vocês que não sabem SSL é como certificado de segurança. Se eu for aqui, você pode ver que diz seguro e como s depois do HTTP. Isto é outra coisa de SEO. Há outras razões pelas quais você gostaria de ter SSL, mas uma das principais razões é para SEO e com o meu host em particular, eu só preciso instalar este plugin e, em seguida, clique em Ativar e contanto que haja um certificado de segurança SSL anexado à sua conta no host, você receberá SSL. Eu tenho aqui SSL realmente simples Eu posso clicar em Instalar Agora. Como você pode ver, quando terminar a instalação, você pode clicar em Ativar como fizemos o tempo todo. Agora tudo que você precisa fazer é ir para Configurações, SSL e você pode habilitá-lo se ele detectar que há SSL, nós estamos apenas no meu computador local, então não há SSL e essencialmente este curso não é sobre como fazer SSL ou Yoast, que está falando sobre plugins em geral aqui. Isso é essencialmente como você pode adicionar plugins ao seu site para adicionar uma funcionalidade extra permitir que você faça coisas especiais em seu site, e uma dessas coisas realmente é habilitar o comércio eletrônico. No próximo vídeo, vamos entrar diretamente em que usando um plugin chamado WooCommerce e por isso vamos dizer, por exemplo, queríamos vender algo aqui, talvez até queiramos vender o nosso serviço pré-pago nós pode colocar em algum e-commerce em nosso site WordPress usando este plugin, então eu vou vê-lo no próximo vídeo. 16. Adicionando comércio eletrônico com o Woocommerce: No último vídeo falamos sobre plug-ins e instalamos dois plug-ins que eu uso muito regularmente em todos os meus sites. Mas se você está tentando fazer e-commerce em um site WordPress, há um plug-in que é muito, muito popular e é chamado WooCommerce. No caso de você querer fazer e-commerce, Eu só vou executar através da instalação WooCommerce agora, e vai ser uma boa experiência de aprendizagem para nós para ver o que WooCommerce faz com o nosso site WordPress, e como ele pode nos obter E- funcionalidade de comércio muito rapidamente com não muito trabalho, apenas aproveitando este plugin. Eu estou procurando WooCommerce e como já fizemos antes, Eu só vou instalar agora e ativar. Assim que você clicar em “Ativar com WooCommerce”, você será levado para este seguinte assistente, que irá ajudá-lo a configurar sua loja e começar rapidamente. Você pode colocar em onde sua loja está baseada e sua moeda, eu só vou fazer os EUA $. Você pode dizer com o comércio onde quer que você quer vender produtos físicos ou digitais, ele vai selecionar produtos digitais. Podemos ficar com isso. Vou ter que colocar um endereço fictício aqui. Esperemos que aceite isso. Então eu vou ser levado para a seção de pagamento onde ele me diz o que WooCommerce pode aceitar. Ele pode aceitar Stripe e PayPal, os maiores. Eu estou bem com as pessoas me pagando como quiserem, mas eu não tenho uma conta Stripe, então eu vou apenas desativar isso e apenas aceitar PayPal. Se você entende e-Commerce e precisa colocar alguns impostos, você pode habilitar isso aqui. Você também pode conectar um Jetpack, mas eu acredito que você vai precisar de uma conta wordpress.com para isso, eu só vou pular isso por enquanto. Aqui está. Você pode pedir dicas, atualizações de produtos e inspiração para sua caixa de correio, caso contrário, você está praticamente pronto para começar. Vou voltar para o painel de instrumentos. Você pode clicar aqui para começar a criar um produto ou importar produtos de outra loja, mas eu quero voltar para o painel e apenas falar sobre o que WooCommerce fez. Agora, no seu painel, você deve ver algo novo no seu menu. Essa é a guia WooCommerce e a guia de produtos. Agora, o que produtos é, é apenas um outro tipo de post. Você verá que temos posts e páginas, esses são os tipos de postagem padrão no WordPress. Os projetos foram adicionados pela Divi, e agora os produtos foram adicionados pela WooCommerce. Agora podemos entrar aqui, e podemos criar produtos. Vou criar um primeiro produto. Você pode ver que a interface é bastante semelhante à criação de um post ou uma página e isso é porque ele está usando a mesma funcionalidade. Estamos apenas fazendo outro tipo de postagem personalizado. Eu vou dizer, “Um mês de desenvolvimento web”, e eu vou dizer, “Isso é por um mês de tempo integral dos meus serviços.” Estou inventando coisas aqui, pessoal, não leve isso muito a sério. Mas se nós rolar para baixo até aqui podemos ver dados do produto e descrição curta do produto, é aqui que é um pouco diferente dos nossos outros tipos de post aqui. Podemos fazer um produto simples que é virtual, e podemos fazer com que geralmente valha 10 mil, mas hoje é por um preço especial de apenas cinco mil. Inventário. Você pode gerenciar seu estoque e inventário aqui se não for um produto virtual. Mesmo que seja um produto virtual, você pode limitar o valor que as pessoas compram, você pode vincular produtos com vendas adicionais e vendas cruzadas. Honestamente eu não tenho quaisquer lojas WooCommerce que eu gerencio, eu realmente usar WooCommerce para vender no meu site. Eu uso essa funcionalidade básica e funciona para mim. Mas essencialmente, se você apenas publicar sobre isso e então você vai para o produto, você pode realmente simplesmente comprá-lo imediatamente. Você pode clicar em “Adicionar o carrinho”, de repente você tem um carrinho agora, e você pode clicar em “Ver”. Isto é o que é brilhante sobre WooCommerce. Olhe para todas essas coisas que é fornecido para nós imediatamente apenas instalando um plugin e colocando em um produto. É por isso que eu acho WooCommerce é muito bom e também é muito popular, outras pessoas gostam dele também. Você pode prosseguir para a finalização da compra agora. Você coloca suas informações de cobrança, e você pode colocar em suas coisas do PayPal. Agora é claro que você tem que configurar o pagamento, eu saí do painel. Você vai querer entrar em WooCommerce aqui, onde você pode acessar seus pedidos, suas configurações, cupons se você quiser oferecer cupons para as pessoas. Eu não configurei o meu PayPal há algum tempo, mas talvez seja em contas ou confira aqui, e você pode clicar no PayPal aqui, você pode definir o seu PayPal E-mail. Este é provavelmente o lugar onde você configuraria seu PayPal. Você tem todas as suas configurações aqui no WooCommerce. Quando alguém comprar seu produto, ele aparecerá aqui em seus pedidos, para que você possa ver quem comprou o quê e quanto era, e todas essas coisas boas. É realmente incrível que você pode apenas adicionar um plugin e obter tudo isso fora da caixa. Essencialmente, isso é realmente configurar como um produto e configurar pagamentos para que você seja pago, é essencialmente tudo que você precisa fazer para ter uma loja. Obviamente, se você está vendendo produtos digitais, você tem que ir até aqui. Eu vou selecionar “Transferível”, e então você pode adicionar um arquivo para que quando alguém paga, ele possa ir para uma página que tem o arquivo que pode baixar, é assim que eu vendo produtos no meu site. Obviamente, se é um produto físico, você tem que cumpri-lo. Mas, essencialmente, ao instalar este plugin, colocando em produtos, e colocando em informações de pagamento para que você possa ser pago, você essencialmente tem uma loja direita em seu site WordPress. Você pode acessar esses produtos por, aqui está a URL aqui e você pode acessar um produto individual. Mas o que WooCommerce faz, é colocar em um link aqui para um carrinho, você também pode navegar diretamente para a loja, indo para o seu domínio raiz barra loja, e então ele vai mostrar tudo aqui. Você pode personalizar sua loja, é claro, esta é uma versão antiga. Você pode voltar para aqui, e você pode personalizar sua loja e criar categorias aqui, você pode criar tags assim como você pode fazer com outros tipos de postagem no WordPress. Essencialmente, se você queria adicionar este item de menu ao seu menu WordPress, você pode entrar aqui, entrar em menus de aparência, e adicionar na loja imediatamente. Você pode ir lá Loja, Salvar Menu, atualizar a página. Isto não é lindo? WordPress está trabalhando muito bem para nós, e temos todo esse conteúdo dinâmico e funcionalidade imediatamente para nós. Além disso, você pode ver aqui que nós adicionamos alguns modelos agora com WooCommerce. Nós temos um produto de traço de arquivo, e então se eu cavar aqui, nós temos um único produto de traço. Isso diz que se você teve que editar os arquivos de modelo, você poderia totalmente fazer isso apenas encontrando esses modelos. Vamos fazer isso agora só para colocar isso em perspectiva. Podemos cavar em nossa pasta plugins aqui, ir para WooCommerce, olhar para modelos e boom. Temos todos esses modelos aqui que podemos entrar e editar, assim como fizemos quando estávamos em nosso tema filho e mudamos o single e mudamos o archive.php, podemos entrar e mudar os modelos aqui. Novamente, usando o WordPress, tudo é de código aberto, podemos usar a interface do usuário aqui para fazer o que quisermos no painel do WordPress, mas então temos personalização de edição completa, cavando no código, e isso é um pouco sobre WooCommerce e como você pode adicionar e-Commerce ao seu site. Eu acho que quase abrange todos os conceitos básicos de desenvolvimento de um site WordPress. Temos, novamente, páginas, projetos, postagens e agora, produtos. Acho que agora é hora de colocar nosso site na Internet no que chamamos de implantação. Se você estiver criando isso em um servidor de teste, podemos migrar isso para todos os tópicos que abordaremos nos próximos 1, 2 ou 3 vídeos, por mais tempo que levarmos. Se você tiver seu site hospedado localmente ou em um servidor de teste e quiser migrar, definitivamente fique por perto para saber como fazer isso no próximo vídeo. Ou mesmo se você está feliz com o seu site e você acabou de construi-lo diretamente em sua hospedagem, definitivamente ficar em torno de qualquer maneira, porque se você está querendo criar uma nova versão do seu site, você vai precisar para saber como migrar. Espero que você tenha aprendido algo esta lição e eu falarei com você no próximo vídeo. 17. Implementando seu site: Neste vídeo, vamos falar sobre como implantar seu site na internet. Se você escolheu o caminho onde não criou localmente em seu computador ou em um servidor de teste e criou diretamente no espaço em que deseja publicá-lo. Bem, não há nenhuma etapa necessária se você já construiu seu site no lugar que deseja que ele apareça. Então é isso. Você pode apenas compartilhá-lo com seus amigos ou compartilhá-lo com quem quer que seja. Comece a dirigir algum tráfego para aquele site. Esta é a nova instalação WordPress que tivemos antes em um pequeno domínio de demonstração. Se você deseja mover um site que você desenvolveu localmente ou em outro local na Internet, e você deseja movê-lo para este destino. É por isso que este vídeo vai passar. Primeiro de tudo, vamos falar sobre a migração local do site. Os mesmos princípios podem se aplicar aqui à migração além do servidor de preparação. Rapidamente, o que eu mostrei antes com o site azul celeste é um exemplo de um servidor de preparação. Basicamente, o que eu fiz foi criar um subdomínio no meu próprio domínio christhedeveloper.com e eu construí o site lá. Então, uma vez que eu estava pronto e uma vez que o cliente estava feliz com ele, eu mudei para o domínio deles. Isso é essencialmente o que um servidor de teste é. É um lugar que você constrói on-line e então você pode movê-lo para o destino final. Princípios semelhantes se aplicam se você estiver fazendo isso localmente para a Internet ou migrando de um lugar para outro. Vamos ver o que temos aqui, que é a nossa instalação local. Lembre-se de volta aqui, já instalamos uma versão do WordPress. O que vou fazer é entrar no gerenciador de arquivos e apagar isso. Eu estou indo para avançar rápido aqui como eu ir para meu cPanel e realmente excluir esses arquivos. Indo para o gerenciador de arquivos das minhas contas cPanel para este domínio, eu vou apenas ir para HTML público onde o site é armazenado e eu vou apenas remover tudo isso. Antes de fazer isso, a razão pela qual estou fazendo isso neste site em particular é porque basicamente não há nada nele. É uma nova instalação do WordPress. Se você tinha um site real lá, obviamente não vá e apague seus arquivos. Porque tenho uma nova instalação, vou começar do zero. Vou clicar em apagar e apagar todos esses arquivos. Isso não excluirá o banco de dados WordPress, você pode querer entrar e excluir o banco de dados WordPress também. Acho que posso entrar lá e apagá-lo. Você geralmente pode fazer isso no PHP meu admin quando você está armazenando localmente. Para cPanel que você quer entrar aqui e podemos apenas se livrar deste banco de dados completamente. Você pode excluir o banco de dados e agora ele se foi. Se voltarmos ao site, deve aparecer sem nada. Basicamente, ele só aparece com um diretório e não há nenhum site lá. O que podemos fazer é lembrar que temos nosso site aqui. Estes são os arquivos do nosso site. Então também temos nosso banco de dados armazenado em nosso servidor localmente. Se formos aqui e ver o nosso banco de dados WordPress, que chamamos de skillshare_wordpress. Os passos para a migração, e falamos sobre isso um pouco na compreensão do Desenvolvimento Web, que foi a primeira classe Skillshare, é mover sobre os arquivos, mover sobre o banco de dados e, em seguida, certificar-se de que esses dois estão conectados. O que eu vou fazer é mover os arquivos em nosso site Skillshare WordPress para nossa hospedagem. Então isso será idêntico. Há algumas maneiras de fazer isso, mas acho que a maneira mais limpa seria compactar isso, carregar e depois descompactar. Basicamente, o que eu fiz foi clicar com o botão direito na pasta e clicar em Comprimir. É assim que você faz no Mac, mas tenho certeza que é diferente no Windows. Você deve estar familiarizado com arquivos compactados. Eu tenho este site WordPress. Vou enviar isso como um único arquivo para a minha hospedagem e ver que ele vai ser carregado. Isso vai levar um pouco de tempo. Vou esperar um pouco e te alcanço quando terminar de carregar. Tudo bem. Então eu voltei em alguns minutos e isso agora está carregado. Podemos clicar aqui para voltar à nossa pasta. Eu posso clicar nele e depois clicar em extrair, eu vou extraí-lo. Agora é só esperar que ele extraia. Ele está acabado porque eu zip-lo em um Mac OS X. Eu vou ter isso, mas esta é a foto que estamos procurando. Só precisamos pegar tudo isso e movê-lo para a pasta HTML pública. Vou me livrar disso. Clique em mover, voltar e podemos nos livrar de, que agora vazio. Podemos nos livrar dele e podemos nos livrar disso. Também podemos nos livrar do arquivo zip porque está tudo em zipado. Só para mostrar o que parece agora em nosso navegador, podemos atualizar isso e ele vai aparecer com um erro dizendo erro estabelecendo uma conexão de banco de dados, que é claro não é surpresa, nós realmente não temos um banco de dados em nosso site. O próximo passo é migrar através desse banco de dados. O que vou fazer é clicar em Exportar aqui, escolher rápido, ir. Eu tenho algum código SQL para colocar no meu banco de dados, mas infelizmente, eu não tenho um banco de dados aqui porque nós acabamos de excluí-lo. Além disso, eu não tenho a capacidade de nomeá-lo exatamente como este porque ele está forçando um prefixo no nome do banco de dados. Tem que ser chamado de skillsharecourse_ e então algo assim. Vamos ter que modificar um pouco o banco de dados na hospedagem. O que eu vou fazer é nomear este WordPress. Vai ser skillsharecourse_ WordPress em vez de skillshare_wordpress apenas por causa deste prefixo. Vou criar o banco de dados. Eu vou voltar. Como você pode ver aqui alguém, não alguém, WordPress já criou um nome de usuário para mim. Vou apenas excluir este usuário e criar um novo. Vou entrar aqui e deletar esse usuário. Então agora temos apenas um banco de dados sem usuários. Vou adicionar um usuário e vou chamá-lo de skillsharecourse_admin. Eu vou gerar um nome de usuário desculpe uma senha para isso. Vou entrar em minha senha como sempre pegar isso. Certifique-se de que você definitivamente gravá-lo. Este vai ser o meu nome de usuário/senha MySQL. A senha está lá, o nome de usuário será skillsharecourse_admin. Eu tenho tudo isso gravado agora. Eu posso copiar e colar isso e novamente, lá vamos nós. Agora está feito. Você criou, criou com sucesso um usuário. Agora, o passo final é dar privilégios de acesso a este usuário, para acessar o banco de dados que acabamos de criar. As duas únicas opções disponíveis são as que temos. Podemos pressionar “add”. Vamos ativar todos os privilégios e pressionar fazer alterações. Se você se lembra de quando começamos a instalar nosso site WordPress para começar quando estávamos fazendo isso localmente, nós tínhamos aquele famoso instalador de cinco minutos para WordPress e WordPress basicamente disse: “Coloque em seus detalhes e vamos colocar isso no arquivo de configuração do WP.” Não temos isso disponível agora. O que vamos ter que fazer é colocar esses detalhes diretamente em nosso arquivo de configuração WP. Agora que temos essa informação será configurada, o que vamos fazer é entrar em nosso arquivo de configuração WP para que possamos simplesmente editá-lo de dentro do nosso Gerenciador de Arquivos. Você também pode editá-lo via FTP usando seu editor de código, se quiser. A primeira coisa que vamos fazer é mudar o nome do banco de dados para SkillShareCourse_WordPress. Basicamente, estamos apenas copiando os detalhes aqui. Este é o nome do banco de dados, SkillHareCourse_WordPress. Este é o nosso utilizador. Então podemos pegar esse nome de usuário e colocá-lo lá. A senha, lembre-se que salvamos em nossa edição de texto. Então eu vou copiar isso, colocar isso dentro, e eu acredito que podemos deixar estes do mesmo jeito. Vou salvar as alterações. A última coisa é ter os dados nas tabelas neste banco de dados porque se formos para phpMyAdmin agora, haverá um banco de dados aqui sem nada nele. O que vamos ter que fazer aqui é pegar isso e garantir que ele seja importado para o nosso novo banco de dados. Na verdade, vou clicar com o botão direito do mouse aqui e clicar em “Selecionar tudo”. Então vou pressionar o Comando C para copiar, e não precisamos mais disso aberto. Precisamos voltar ao phpMyAdmin. Certifique-se de entender quais phpMyAdmin localmente e quais phpMyAdmin em sua hospedagem. Você pode se certificar de que pode ver isso a partir do URL. Não quero confundi-lo. Estes são dois phpMyAdmins diferentes. O que podemos fazer aqui é que podemos ir para SQL, supondo que temos uma consulta SQL, e isso vai ser executado no banco de dados SkillShareCourse_WordPress. Vou colá-lo e vou mudar os detalhes no topo. Diz banco de dados skillshare_wordpress. Este é apenas um comentário, mas eu gostaria de mudá-lo de qualquer maneira. Se eu pressionar “Go”, e todas as coisas são boas, ele deve importar todos os dados do nosso banco de dados WordPress local em nosso banco de dados WordPress que acabamos de configurar em nossa hospedagem. Pode demorar um pouco só porque há um monte de linhas lá para inserir. Mas espero que ele termine de carregar e agora podemos ver um grande tique. Eu vou pressionar “Estrutura” e você pode ver que nós temos todas as mesas lá. Se entrarmos em, digamos Posts, podemos ver alguns posts e podemos ver alguns códigos curtos devi. Você não precisa entender completamente isso, mas você pode pelo menos ver que nossas tabelas de banco de dados e agora lá dentro. Se voltarmos para aqui e tudo estiver bem, devemos atualizar a página e o site deve funcionar como esperado. Está a aparecer muito bem, excepto que há algo bastante óbvio que não está a funcionar. Ou seja, em qualquer lugar onde tivéssemos esses ícones, eles apareceriam se tivéssemos personagens ou apenas caixas. Honestamente, estou surpreso que a maioria do site veio através ok. Porque perdemos um passo importante que vem logo no final, e que é atualizar o URL do nosso site. Basicamente, vou te mostrar isso agora mesmo. Se entrarmos em nosso banco de dados em nossa hospedagem e entrarmos em Opções, podemos ver aqui que o URL do nosso site em nossa casa ainda é localhost:8888. Mas isso não é mais relevante porque estamos neste domínio. O que vou fazer é copiar o domínio e atualizar o banco de dados. Vou entrar aqui, pressionar “Editar”, e mudar isso para http//www.skillsharecourse.space. Vou copiar isso. Então eu vou até aqui. Acho que posso clicar duas vezes nele. Lá vamos nós. Pressione “Enter”, e isso mudará. Acho que há mais um campo neste banco de dados, então você vai mudar em frente. Podemos encontrar outro lugar onde temos nossa URL local em. Basta substituir até o site WordPress com o nosso URL real. Podemos passar por ainda mais linhas, que já está atualizado também. Você pode ver HTML público lá, modo que já é o que ele precisa ser. Só passando por mais algumas filas. Eu passei por todas as linhas e eu atualizei ou esses URLs. Agora, quando eu voltar para atualizar a página, vamos ver o que acontece. Está demorando um pouco mais para carregar, provavelmente porque está carregando os novos detalhes. De repente, temos os ícones aparecendo bem. Na verdade, estou um pouco surpreso que ele não quebrou os links de imagem também. Mas sim, mudar a URL do site é muito, muito importante. Lembre-se, entre nas opções do WP depois de migrar seu banco de dados e alterar o URL do site e a página inicial. Vamos verificar se o resto do site está funcionando bem. Sim, serviços. Assim como construímos em nossa própria hospedagem ou nossa própria localmente. Isso cobre praticamente o processo de implantação. Só para recapitular aqui, o que fizemos foi pegar os arquivos que temos localmente em nosso diretório de projetos. Nós os colocamos em nossa hospedagem em uma instalação em branco. Em seguida, exportamos nosso banco de dados, criamos um novo banco de dados, importamos as tabelas desse banco de dados antigo para nosso banco de dados na Internet, e então atualizamos esses URLs e páginas iniciais desatualizados porque eles estavam fazendo referência ao host local. Basicamente, esse é o processo que passamos. É um pouco diferente se você já tem um site lá, lembre-se que estávamos começando do zero aqui. Este vídeo está indo um pouco longo, então eu vou deixá-lo lá para implantar seu site. Mas no próximo vídeo, mostrarei como migrar as alterações nas quais você está trabalhando, localmente ou em um servidor de teste para o seu destino final. Se estiver interessado nisso, fique ligado para o próximo vídeo. Caso contrário, você pode pular para o vídeo depois disso. Definitivamente ficar até o fim. Vamos falar sobre projetos de classe e falar sobre como encontrar ajuda quando você estiver lutando. Então não termine sua jornada com este curso lá. vez, se você quiser ver como migrar uma visão para um lugar onde você tem um site existente, fique atento e eu vou pegá-lo no próximo vídeo. 18. Migre as mudanças para um site online: No último vídeo, pegamos nosso site hospedado localmente, aquele aqui no nosso host local:8888 e pegamos todos os arquivos e o banco de dados e colocamos em nossa hospedagem em branco. Mas é claro, e se já tivermos um site aqui e quisermos criar uma nova compilação e depois migrar isso. É sobre isso que este vídeo vai ser. Atualmente, isso é exatamente o que temos. Temos um site existente lá. Imaginemos por um segundo que este é um site que já existe há algum tempo. Já há tráfego neste site. Você já enviou pessoas para ele e você quer ter certeza de que você não basicamente excluir este site para fazer o upload do seu novo. O que você vai fazer aqui é migrar o site por todo o lado. Agora, há serviços que gerenciam isso para você. Por exemplo, se você usar Managed WordPress, eles teriam sistemas para este um dos hosts que faz este volante. Flywheel é um provedor de hospedagem gerenciado. Você pode configurar servidores de teste e tenho certeza de que isso é um pouco mais elegante do que a solução que estamos fazendo. Mas com a minha configuração, não tenho essa opção. Eu só uso hospedagem básica e é um bom, para saber como fazê-lo de qualquer maneira. Basicamente, é um processo semelhante ao que tivemos antes. Só precisamos ser um pouco mais cuidadosos. O que eu vou fazer é eu vou entrar aqui. Eu vou para o Gerenciador de Arquivos, que eu já tenho aberto e isso vai apenas atualizar. Primeiro de tudo, vou fazer backup do meu site. Essa é a coisa mais importante. Vou entrar em HTML público. Na verdade, eu vou voltar um e eu vou zip HTML público. Não se preocupe, isso não afetará essa pasta. Ele só vai criar um arquivo zip dele. Vou criar um zip do meu HTML público, que é onde meu site é servido. Tenha em mente que isso pode ser um pouco diferente para você em seu host usando este gerenciador de arquivos, HTML público é onde meu site é servido. Agora eu tenho minha versão antiga do meu site e eu vou baixar isso como um zip. Eu vou entrar aqui e fazer dobrar um backup do site antigo. Na verdade, eu não vou fazer isso nessa pasta porque é essa que eu vou estar carregando. Eu faço isso aqui fora. Backup do site antigo. Você pode colocá-lo basicamente onde quiser. Se você queria fazer backup do banco de dados, eu proponho que você deixe o banco de dados lá, mas talvez você queira fazer backup dele e depois excluí-lo. Você pode exportar, ir para Personalizar e escolher Salvar saída em um arquivo. Você pode dar uma olhada nisso. Você pode adicionar o campo de criação de banco de dados, se desejar. Basicamente, você pode deixar tudo padrão. Isso não é problema. O que ele vai lhe dar é um arquivo SQL, que é um despejo do que é chamado de despejo de seus de banco de dados. Eu vou voltar para o backup de código do site antigo e eu vou salvar. Bem aqui, se eu der um passo para cima, backup do site antigo, eu tenho um arquivo zip de todos os meus arquivos do nosso site e eu tenho o despejo de banco de dados bem aqui. O que eu proponho que você faça é manter seu antigo site, que significa que você mantém os arquivos e você mantém o banco de dados na hospedagem se você já tem, e, portanto, você tê-lo em dois lugares e apenas movê-lo basicamente. No nosso caso, esse banco de dados é exatamente o mesmo. Mas se você tivesse um nome de banco de dados diferente, o que você faz é que você iria para o seu cPanel. Você criaria um novo banco de dados que corresponda ao banco de dados que você tem localmente no servidor de teste. Você iria colocar no nome, colocar no nome de usuário, e todos os detalhes que você tem para o seu existente. Se você tem que mudar isso, você tem que mudar isso. Basicamente, o processo é praticamente o mesmo, exceto quando você chega ao estágio onde você está colocando arquivos em um HTML público. Você não quer necessariamente excluí-los, mas colocá-los em outra pasta e também não excluir este banco de dados, mas apenas tê-lo sentado ao lado de outro. Apenas uma isenção de responsabilidade antes de avançar neste curso é sobre a construção de sites WordPress a estavam caminho certo. Tecnicamente, o que estamos prestes a fazer não é o caminho certo. Não é a maneira perfeita de fazer as coisas. Mas, a fim de fazer as coisas de uma maneira perfeita, exigiria muito mais configuração, muito mais configuração do servidor, muito mais do que o que podemos fazer com apenas cPanel. As agências WordPress para as quais trabalhei no passado tiveram servidores configurados e temos entrado em linha de comando assim, abrindo uma ferramenta de linha de comando, entrando e conectando-se a servidores via SSH e fazendo isso dessa maneira. Essa é tecnicamente a maneira certa de fazê-lo, é a maneira mais limpa de fazê-lo. Mas com cPanel, a solução não é tão elegante e eu só queria fazer referência a isso primeiro. Esta é provavelmente a parte mais baixa e suja do curso. Mas se você precisa fazê-lo e você está apenas usando cPanel, é assim que eu iria sobre isso. Isso é um pouco de isenção de responsabilidade. Agora, vamos realmente começar a migrar, que será o mesmo que implantar como fizemos no último vídeo. O que vai envolver é nós carregando nossa nova compilação em termos de arquivos e em termos de banco de dados. Então vamos trocar rapidamente com esperançosamente o menor tempo de inatividade possível e devemos ser todos doces. Novamente, seguindo o mesmo processo que tivemos antes, nosso banco de dados não mudou, mas digamos que mudou. Podemos pegar todo esse código, Comando C para copiar. O que vamos fazer é criar um novo banco de dados aqui. Como esta é a segunda instalação, vou chamá-la wordpress_2, ou tecnicamente SkillShareCourse_WordPress_2. Vou clicar em Criar banco de dados e acho que poderei usar o mesmo nome de usuário. O que eu vou fazer aqui é adicionar esse usuário ao nosso novo banco de dados e, em seguida, clique em Adicionar. Vou conceder todos os privilégios. Faça alterações. Parece que essas mudanças foram feitas. Eu vou voltar e se eu rolar até os bancos de dados atuais, nós temos os dois bancos de dados lá e o usuário privilegiado é o mesmo para ambos. Eu vou entrar aqui e eu vou atualizar para ver nosso novo banco de dados, para que eu possa recarregar a página aqui ou ali. Temos o SkillShare_wordPress_2 para uma nova instalação. Assim como antes, podemos executar a consulta SQL para importar todos os dados. Eu vou fazer Skillsharecourse_2 lá. Isso é só um comentário. Isso realmente não importa. Eu só gosto de colocar isso aí. Eu vou pressionar Go e ele vai importar todos os dados para o nosso segundo site. Novamente, isso pode demorar um pouco dependendo da velocidade da Internet e da velocidade de todas as ferramentas. Ele só vai carregar um pouco e então espero que nós vamos ter um carrapato verde. Ali está aquele carrapato verde. Se clicarmos na estrutura, temos todas as tabelas lá e deve ter todos os nossos dados. Teoricamente, deve ser diferente deste banco de dados, mas é o mesmo no nosso caso porque não fizemos nenhuma alteração. Ok, então o próximo passo que podemos fazer é carregar os arquivos, e o que eu vou fazer é a mesma coisa que antes, upload do site de compartilhamento de habilidades WordPress, e eu vou fazer isso fora do HTML público porque eu não quero afetar essa foto ainda. Vou clicar para fazer o upload de um arquivo. Eu vou encontrar o arquivo zip, e eu vou pausar o vídeo e voltar a me juntar a você assim que isso for carregado. Chegamos a 100% e isso significa que os arquivos agora estão carregados, e agora vem a parte suja. Basicamente, vamos fazer um pouco de uma dança para mover os arquivos e banco de dados e esperamos que resulte em um tempo de inatividade mínimo possível para o nosso site. Eu só vou atualizar a página e ter certeza de que temos um site de trabalho aqui, e o que eu vou fazer aqui é mover os arquivos antigos para fora do HTML público, e então eu vou descompactar os novos arquivos em HTML público, e ele vai funcionam imediatamente, espero que para nós porque os detalhes do banco de dados são os mesmos, mas então vamos mudar para o novo banco de dados, e isso concluirá a migração. Parece que temos HTML público já compactado aqui, se você fez alguma alteração desde que o compactou, você vai querer compactar novamente ou simplesmente copiar os arquivos diretamente sobre. Parecendo que temos esse zip lá e nós baixamos o zip para o nosso computador bem, eu vou realmente apenas excluir todos esses arquivos, e eu vou voltar e então fazer isso muito rapidamente porque seu site está atualmente vazio no momento, então eles vão ser tempo de inatividade para qualquer um assistindo. Rapidamente, descompacte isso, clicando duas vezes não descompacta. Clique em “Extrair”, extraia para HTML público. Espero que isso não demore muito. Tudo bem, você extraiu, mas é claro, você precisa movê-lo para fora. Vamos mover isso para HTML público. Mova os arquivos, volte, se livre disso, se livre disso clicando nele, e então, eu apenas cliquei em vista lixo, entrando aqui e pressionando excluir. Confirme, agora vamos atualizar a página e ver o que acontece. Temos um erro agora, erro estabelecendo conexão de banco de dados, que é claro exatamente o mesmo erro que tivemos antes, a razão pela qual temos esse erro é porque os detalhes no arquivo de configuração WP estão configurados para nosso banco de dados local, não nosso novo banco de dados que está na nuvem. O que podemos fazer é entrar em uma nova instalação. Vá para baixo para WP config, Editar, e nós podemos inserir esses novos detalhes. Lembre-se, esses são os detalhes antigos, os que estão aparecendo aqui. Estes são os detalhes antigos para aqueles que você tem localmente. Vou colocar o curso de Compartilhamento de Habilidades e, em seguida, sublinhar dois para o novo banco de dados. Lembre-se que usamos o mesmo nome de usuário e senha para ambos os bancos de dados para que possamos simplesmente copiar entre eles. Eu vou salvar isso, o arquivo de configuração agora está atualizado. Eu vou voltar para aqui, atualizar a página, e espero que tudo seja doce. O mesmo problema de novo. Temos os ícones que estão aparecendo corretamente. Vamos entrar e ter certeza de que nosso URL está correto, e não será obviamente, porque é o mesmo banco de dados que tínhamos originalmente, e você pode ver aqui tudo o resto é o mesmo, o mesmo processo. Vou aqui colocar isso, entrar, entrar aqui. Acho que é bom ter uma atualização. Agora, se voltarmos para a página, atualizá-la, e agora temos um site quebrado, deve ter sido algo que acabamos de fazer, lá vamos nós. Se eu voltar aqui, posso ver que fiz HTTP duas vezes. Você deve estar gritando na sua cabeça me vendo cometer esse erro, mas fácil de detectar, pelo menos depois que você cometeu esse erro. Alterei essas linhas e, em seguida, atualizando esta página. Temos nosso site de volta e os ícones estão de volta. Espero que não tenha sido muita repetição lá dentro. As principais coisas a lembrar quando você está migrando de lado, em vez de apenas colocá-lo em uma conta de hospedagem em branco, é que você deseja mover seu site antigo. Primeiro de tudo, você quer fazer backup e, em seguida, você quer mover seu site antigo para outro lugar. Eu gosto de manter meu banco de dados lá a menos que eu realmente precise deletá-lo. coisa mais importante, é claro, é sempre fazer backup. Como eu disse, esta é uma solução meio suja. Você quer ter certeza de que está sempre fazendo backup no caso de algo dar errado e, como você viu, houve um tempo de inatividade mínimo, mas houve algum tempo de inatividade enquanto estávamos apontando e corrigindo quaisquer erros, mas essencialmente, é assim que você faria upload de um local, construir em um destino existente com um lado sobre ele já. A única coisa que não cobrimos, que é novamente, praticamente exatamente a mesma, é passar de um servidor de teste para o novo servidor, e o que eu recomendo para isso é baixar o banco de dados e os arquivos de qualquer que o servidor de teste é localmente e, em seguida, carregá-los para o novo local. Você sempre o mantém no servidor de teste até ter certeza que ele está no novo domínio e, em seguida, pode removê-lo do servidor de teste. Novamente, se isso é complicado ou se você tiver alguma pergunta, definitivamente me ligue na discussão. Eu só quero mencionar novamente, se você está trabalhando para uma agência, eles provavelmente têm uma solução mais elegante que esta, mas se você está fazendo o trabalho do cliente e você só precisa trocar um site rapidamente no cliente , desde que você faça backup e certifique-se de não excluir nenhum arquivo, você deve ser muito doce. Na próxima lição, vamos falar sobre como continuar seu aprendizado com o WordPress, porque neste curto curso não fomos capazes de cobrir absolutamente tudo, e mesmo em um curso que foi de 15 a 30 horas de duração, provavelmente não seria capaz de cobrir nem metade do que WordPress é capaz, e as personalizações que você pode fazer para WordPress. É realmente, as possibilidades realmente são infinitas com WordPress porque é completamente open source, e há uma comunidade de desenvolvedores tão enorme, muitos plug-ins, muitas ferramentas que se conectam ao WordPress. Vamos falar sobre como seguir em frente quando você está preso, e como aprender mais sobre o WordPress, usando este curso como base, e então saltar sapo para aprender tudo o que você precisa saber sobre o WordPress. Estou ansioso para vê-lo no próximo vídeo. 19. Como continuar sua aprendizagem: Então, neste vídeo, eu quero compartilhar com você como continuar a sua aprendizagem no WordPress? Se você se lembra da minha aula anterior, “Understanding Web Development”, você pode se lembrar de mim falando sobre desenvolvedores web como Expert Googlers, basicamente solucionadores de problemas especializados. Muitas vezes, há um problema que você quer saber como resolver e é uma boa habilidade como desenvolvedor, você não precisa realmente saber como resolver o problema imediatamente , mas ser capaz de pesquisar uma solução. Então, neste caso, vou fazer alguns exemplos. Obviamente, o Google é um ótimo recurso, mas eu quero mostrar-lhe porque muitas vezes as soluções que você recebe de volta do Google dependem da qualidade da sua pergunta que você colocou no Google. Então, como exemplo, um problema comum que eu tenho com Divi é quando eu coloco no logotipo, ele sai um pouco pequeno. Então eu vou clicar com o botão direito “Inspecionar Elemento” e ver o que podemos fazer aqui, e eu vejo aqui que há uma altura máxima fixa. Portanto, não pode ser maior que 54% da altura da div pai. Então o que eu vou fazer aqui é aumentar isso para 100, e você verá agora que a largura máxima é 100. O tamanho da imagem por padrão é 800 por 800. Então, ele está permitindo ir para a largura total deste cabeçalho. Idealmente, queremos algum preenchimento aqui e não queremos que ele ocupe toda a largura. Então o que podemos tentar e fazer aqui é colocar em uma altura personalizada. Podemos começar com 100 e, em seguida, diminuir a escala até que possamos começar a ver uma mudança, e talvez queiramos com esse tamanho, 70 pixels. Mas digamos, por exemplo, que quiséssemos que a altura dessa imagem fosse um pouco maior, e para que isso acontecesse, talvez pudéssemos nos livrar dessa altura máxima aqui completamente. Talvez, nós queremos que ele seja desse tamanho, mas obviamente, nós não queremos que ele se sobreponha e venha sobre o cabeçalho. Então precisamos aumentar o tamanho do cabeçalho Divi. Então, se você não sabe como fazer isso, um ótimo lugar para ir é direto para o Google. Então o que eu vou fazer aqui é? Digite uma consulta, “Como aumentar o tamanho do cabeçalho em divi.” Agora, é importante notar como eu construí essa consulta porque este elemento de cabeçalho foi personalizado por Divi e eu estou usando o tema Divi, que está relacionado com estilos, eu me certifiquei de colocar em Divi no final. Eu poderia ter colocado em WordPress, mas o tema se senta como outra camada em cima do WordPress. Então eu fui com Divi e isso é algo que você tem que descobrir ao longo do tempo, qual é a palavra-chave mais relevante para colocar lá? Mas, novamente, a qualidade do termo de pesquisa afetará a qualidade da ajuda que você receberá. Então eu coloquei em um bom descritor “Como aumentar o tamanho do cabeçalho”. Às vezes é muito mais difícil de descrever, como o que você está tentando fazer e neste instante muito simples, mas às vezes, você pode ter que tentar diferentes variações de descrever seu problema, e essa é na verdade a parte mais frustrante às vezes de ser um desenvolvedor, é descrever algo que é um pouco difícil de descrever. Felizmente para nós, aumentar o tamanho do cabeçalho é muito fácil, então desconstruir o termo de pesquisa, “Como aumentar o tamanho do cabeçalho”, então eu estou perguntando “Como aumentar o tamanho do cabeçalho? Então eu estou colocando a plataforma ou coisa que eu estou olhando para pesquisar aqui também, e você verá como isso muda quando fizermos alguns outros termos de pesquisa. Então o primeiro artigo é o mais relevante e podemos descer e ver, “Oh, aqui vamos nós”. Podemos adicionar alguns CSS para Divi assim. Então eu vou copiar isso, e eu vou entrar no meu site Skillshare, e eu vou para “Editor de Aparência” e encontrar minha “folha de estilo style.css”. Eu tive que copiar e colar as senhas, eu vou copiar isso novamente, rolar para baixo, colocar isso em e “Atualizar arquivo”. Agora, nós podemos ter que mudar as alturas um pouco porque estas são apenas padrão, então ele realmente não mudou a altura para o que queremos que seja. Mas se voltarmos e inspecionarmos Element, devemos ser capazes de mudar esse estilo. Para explicar um pouco, estamos usando uma tag de mídia aqui que discutimos brevemente na última aula de Skillshare. Uma tag de mídia permite que você afete estilos em apenas determinadas larguras de tela. Então aqui, estamos aplicando apenas esses estilos, se a largura da janela da página for mínima, 981 pixel. Então, nesta situação, é maior do que 981 pixels como você pode ver aqui, se você olhar lá em cima, eu não posso apontar para ele e clicar em “Arrastar” ao mesmo tempo, mas se você olhar no canto superior direito da janela lá, você pode ver, ele vai me dizer qual é a largura do pixel. Então, entrando, vamos encontrar o cabeçalho. Então, se olharmos aqui, cabeçalhos principais, o que está afetando. Então eu vou clicar sobre isso. Vou rolar para baixo e apliquei estilos para encontrar o estilo que colocamos. Como muitas vezes acontece, não está lá. Então o que eu vou fazer é, eu vou atualizar o cache para ter certeza de que estamos puxando a versão mais recente do arquivo style.css. Voltando para o cabeçalho principal, eu vou rolar para baixo e eu posso ver aqui nossa consulta de mídia. Então, sua altura mínima, 150. Ele não se aplica em quando entramos em visão móvel que acontece em torno de 980, mas depois de 980, você pode ver o cabeçalho é agora 150 pixels. Então é só uma questão de entrar aqui, talvez estejamos felizes com 150 pixels. O segundo é quando a cabeça fica fixa, quando você começa a rolar. Se você vê, é em um tamanho e então você começa a rolar, é outro tamanho, então podemos afetar ambos para aqueles, mas o que eu queria demonstrar foi agora que temos um cabeçalho maior, podemos fazer isso um pouco maior e talvez nós não queremos 100 por cento, talvez, queremos um pouco maior 75 por cento. Vamos fazer 80, 90, e podemos colocar alguma margem no topo. By the way, precisamos mover esses estilos para a folha de estilo. Isto está a brincar e, em seguida, talvez o topo da margem seja 15. Então, eu vou voltar para aqui, e eu vou afetar o logotipo. Vou colocar em "#logo {margin top: 10px;}” e qual foi a outra coisa que mudamos? A altura máxima, 90 por cento. Pressione Atualizar arquivo. Também vou reduzir o tamanho do cabeçalho porque é um pouco alto demais. Vou entrar aqui e reduzir isso para quase lá. Você pode ver com esta linha aqui onde o cabeçalho está. Acho que vou com 100. Eu vou voltar aqui e eu vou fazer 100 em vez de 150, e aqui eu vou fazer 100 também. Atualize o arquivo e, em seguida, atualizaremos aqui. Precisamos limpar o cache e recarregar novamente. Como você pode ver, temos um logotipo maior por causa dos estilos que aplicamos aqui, que estão substituindo esses estilos e temos um cabeçalho maior. Nós provavelmente podemos trazer o cabeçalho um pouco mais também. Talvez para cerca de 85. Apenas para parar isso agora, clique em Atualizar arquivo, atualizar. Você pode ter que apertar a atualização, novamente. Na verdade, o cabeçalho é aproximadamente o mesmo, então não mudamos muito do cabeçalho, mas o ponto que estou fazendo ainda está lá. Nós tivemos uma idéia do que queríamos fazer, fomos ao Google, digitamos um bom termo, bem aqui, então fomos capazes de mudar a altura de um cabeçalho divi. Agora, como eu disse com essa consulta, há realmente duas partes nele. Está chegando com uma boa diretiva do que você precisa saber e também colocando no contexto também. Eu fui inteligente em escolher o contexto de divi porque este é um elemento de estilo que, claro, a divi controlaria. Mas digamos, por exemplo, que está relacionado ao comércio eletrônico e se eu entrar na minha loja aqui, tudo ainda está no WordPress, mas o plug-in que está gerenciando todo o e-commerce para mim é, naturalmente, Woo Commerce. Se eu quisesse dizer, talvez eu quisesse adicionar alguns upsells aqui, o que eu faria é dizer como adicionar uma venda adicional a um produto Woo Commerce. Novamente, eu tenho Woo Commerce como contexto e eu tenho a diretiva. Se eu apenas disse como adicionar uma venda adicional a um produto, não é especificar se estou no WordPress, que plug-in estou usando, eu poderia estar usando qualquer plataforma de comércio eletrônico. Você sempre precisa colocá-lo no contexto da pergunta que você está fazendo. Eu apenas vou um passo para trás, o próximo passo seria avaliar quais os resultados que surgem. Este primeiro é do próprio Woo Commerce. Obviamente, se você estiver executando um plug-in ou qualquer tipo de software, o melhor lugar para procurar informações é a documentação. Admito que a documentação para software é muitas vezes escrita de uma forma realmente técnica que pode ser difícil de entender. Definitivamente vá para a documentação primeiro e se você ainda não entender, então você pode mover para posts de blog que podem explicar isso de uma maneira mais fácil de entender ou mais amigável para iniciantes. Como podemos ver aqui, aqui está um artigo de como faríamos isso. O último que quero mostrar é uma coisa muito simples, mas mostra a importância do contexto. Como eu disse, com a mudança de algo a ver com o estilo, estilo é em grande parte a ver com o seu tema. Em um tema premium como divi, se eu quisesse mudar qualquer coisa sobre o estilo deste tema, eu usaria o contexto como Divi, mas vamos apenas dizer que eu queria mudar o tamanho da fonte e eu disse WordPress como o contexto e não Divi. Vou mudar o tamanho da fonte no WordPress. Você pode ver aqui, você terá um link muito comum que você verá em sua pesquisa WordPress se você está pedindo começar a digitar perguntas é WP beginner.com. Estes artigos neste site são bons para iniciantes, mas muitas vezes eles têm uma abordagem muito simplificada. Eles também pedem que você instale plug-ins também. Eu não sei se eles ganham dinheiro com isso, mas eles estão sempre dizendo, se você não sabe como fazer as coisas, basta usar um plug-in. Eles incentivam você a baixar um plug-in para cada pequena coisa que você quer fazer. Talvez você queira alterar o tamanho geral da fonte. Você pode ser tentado a instalar um plug-in inteiro para fazer isso. Como eu mencionei antes, você tem que ter cuidado com a instalação de muitos plug-ins, especialmente quando você pode fazer as coisas mais fáceis sem um plug-in. Sempre avalie, você realmente precisa de um plug-in? Mas, novamente, está relacionado com o contexto em que fizemos a pergunta. Eles não sabem que estamos usando Divi. Se escrevemos em como alterar o tamanho da fonte e divi, podemos ver um artigo Temas elegantes no topo aqui. Então, se eu rolar para baixo, eles vão compartilhar com você todas as diferentes opções que você tem no personalizador de tema para alterar a largura do conteúdo, largura da barra lateral. Você também pode alterar a tipografia. Você pode ver que eu posso mudar o tamanho do corpo do texto com estes mostradores. Vamos entrar agora e mostrar isso ao vivo. Posso clicar no nome do site e, em seguida, personalizador do tema. Vai abrir o personalizador do tema para mim. Posso ir para Configurações Gerais, tipografia, e aqui vamos nós, posso mudar o tamanho do corpo do texto de tudo. Como antes, podemos alterar a fonte do cabeçalho e a fonte do corpo. Você provavelmente já sabe como fazer isso porque já cobrimos isso. Mas essencialmente, novamente, eu estou apenas voltando ao ponto de perguntas de qualidade no Google e nas coisas que você está usando para pesquisa e soluções de qualidade serão divulgados. Às vezes vai ser um pouco complicado e você pode ter que ir para algo como Stack Overflow. Deixe-me pensar em algo mais complicado. Talvez usemos o exemplo de mudar a posição da imagem em destaque como fizemos antes. Eu iria digitar em como mover imagem em destaque no Wordpress. Então você tem como adicionar imagens em destaque, não é isso que procuramos. Podemos continuar rolando para baixo e verificar alguns desses links. Às vezes, você começará a ver essas discussões no fórum. Como você pode ver aqui, há um link Stack Exchange, Stack Exchange e Stack Overflow fóruns onde você pode conversar e obter ajuda sobre seus problemas da comunidade no WordPress. Mas também é um ótimo lugar para verificar os problemas de outras pessoas e verificar as soluções também. Você pode ver aqui, pode não ser exatamente o que você está procurando, mas você pode através de sua pesquisa, olhar para esses diferentes problemas de Stack Overflow, Stack Exchange e pode ajudá-lo a formar sua própria solução. Isso está acontecendo no final mais complicado, se você tem uma pergunta realmente simples, como eu mostrei antes, como aumentar o tamanho do cabeçalho e rodapé como tamanho do cabeçalho em divi e como aumentar o tamanho da fonte. Você pode ter uma resposta muito fácil. Às vezes, quando você quer mudar algo um pouco mais complicado, é quando você pode ter que investigar essas diferentes perguntas de estouro de pilha. Estes são todos mais escritos por desenvolvedores. Eles vão ser mais soluções de código e é um equilíbrio, no final do dia. É disso que se trata este curso. Usamos um construtor de páginas e uma solução sem código para fazer muitas coisas que realmente não precisamos cavar em código. Então, quando precisarmos ser esse desenvolvedor, quando precisarmos cavar em código, podemos fazer isso também. Às vezes você só precisa alterar o tamanho do cabeçalho e isso requer apenas um pouco de CSS ou o tamanho da fonte. Você pode apenas fazer isso em opções, com clique e arraste. Às vezes ele vai exigir algumas mudanças no nível de código PHP ou mudanças CSS.. Espero que isso ajude com sua pesquisa em curso sobre aprender mais sobre o WordPress. Lembre-se, perguntas de qualidade dentro, resultam em perguntas de qualidade fora e não se esqueça do contexto. Se você precisar de alguma ajuda para descobrir como pesquisar problemas no Google ou na documentação de qualquer um dos softwares que você está usando, seja WordPress ou um plug-in ou tema específico dentro do WordPress, definitivamente deixe seu perguntas na discussão abaixo. Vejo-te no próximo vídeo. 20. Bônus: sites para membros: Esta é uma lição bônus para qualquer pessoa que esteja interessada em construir um site de associação, seja agora ou no futuro. Se você quiser pular em frente, vamos encerrar o curso no próximo vídeo e entregar o projeto da aula para você. Mas se você está interessado em sites de membros em tudo, fique atento porque eu vou apenas mostrar-lhe o meu próprio site de associação, e como é fácil de configurar no caso de você querer configurar seu próprio site de associação ou fazer isso para um cliente. O site de associação que eu tenho está em um subdomínio de um dos meus sites, christhefreelancer. Como você pode ver, se você for lá, ele diz que você deve fazer login para visualizar este conteúdo. Vou fazer isso agora. Agora, eu sou um administrador do WordPress, então quando eu entrar, eu vou ter acesso total para editar o site. Vou entrar no WP admin, e você verá aqui que eu tenho todos os mesmos privilégios de acesso. Mas para uma pessoa que é apenas um usuário deste site de associação, ela terá a mesma barra de menus, mas não terá a opção de editar a página. Eles não terão este modelo de exibição atual. Eles não poderão criar novas postagens. Vai ser apenas uma barra de administração do WordPress nua aqui em cima. Então, uma vez que eles entram aqui, eles terão a capacidade de alterar suas configurações de usuário, mas não alterar nada sobre o site. Este é apenas um pequeno site de associação que eu criei como um guia de vídeo para Chiang Mai, Tailândia, que é algo que eu tenho um público que está interessado nisso. O que eu fiz é que acabei de incorporar vídeos do Vimeo. Bem aqui, este botão de edição pode aparecer para pessoas que não são administradores, mas, basicamente, tem páginas diferentes. Se olharmos aqui, há o endereço da página e está tudo restrito. O que posso fazer para demonstrar isso é abrir uma aba anônima que irá certificar-se de que estou desconectado. Eu posso colocar esse link, e como você pode ver, é totalmente restrito. Está dizendo que você deve fazer login. Se você não for um membro, clique para se inscrever aqui. É aí que você chega à página de vendas. Essencialmente, você pode transformar seu site WordPress em um site de associação facilmente usando um plugin. Você pode fazer isso provavelmente sem um plugin. Mas honestamente, um plugin só torna muito mais fácil, especialmente quando você quer receber pagamentos. Com este site de associação, se alguém vier à página de vendas, pode comprar o curso imediatamente, e eu não tenho que enviar os detalhes da associação ou qualquer coisa. Eles literalmente apenas ir para o PayPal, pagar o dinheiro, ele volta, e eles têm acesso e obter seus detalhes de login. Totalmente automatizado, e totalmente vale a pena se você quiser um site de associação. Na minha situação particular, o plugin que eu uso é chamado Restringir conteúdo Pro. O que ele faz é adicionar em um menu Restringir aqui. O que posso fazer é entrar e ver minha lista de membros aqui. Posso entrar e editar membros diferentes. Posso escolher o nível de assinatura deles, que é algo que você configurou em outro lugar. Há um tronco. Posso ver o pagamento e o que eles pagaram, a chave de assinatura do PayPal. No segundo menu é onde eu posso configurar os níveis de assinatura. Assim, você pode ditar quais páginas podem ser acessadas por quais níveis de assinante. Em seguida, ao inscrever usuários, você determina em que nível de assinatura eles estão. No lado da página, o que podemos ver é que podemos ir a uma página. Vamos dar conselhos para aprender tailandês. Como você vê aqui, é apenas um editor padrão do WordPress. Isso é exatamente o mesmo que você faria uma página para um site que não seja membro. O que eu fiz é que eu construí as páginas completamente usando HTML, porque isso é construído sobre um tema personalizado. Essencialmente, se eu estivesse fazendo isso novamente, eu estaria construindo com um construtor de páginas muito provavelmente. Então eu não tenho que codificar todas as páginas do zero. Essa é apenas uma lição que aprendi, é muito mais eficiente criar sites com o construtor de páginas. Mas eu divagei aqui. O que eu queria mostrar a vocês está indo para baixo para esta seção, que é adicionado por Restringir conteúdo Pro, e ele diz Restringir este conteúdo. Eu posso escolher quem pode acessar este conteúdo. “ Todo mundo” vai torná-lo público. Então eu também posso definir o nível de acesso, que me permitirá definir níveis, até dez ou mais. Ele apenas dá um número e torna mais fácil que se o número é maior do que o nível de acesso que você tem, então você é capaz de acessá-lo. Você também pode baseá-lo em funções de usuário no WordPress. Mas eu descobri que a maneira mais fácil é apenas criar um nível de assinatura e , em seguida, atribuí-lo a membros de um nível de assinatura específico. Então, obviamente, quando eu entro em minhas configurações aqui para Restringir conteúdo Pro, eu acho que em Configurações, eu posso escolher para onde o dinheiro realmente vai. A moeda, eu posso entrar em níveis de assinatura aqui e escolher quanto custa uma assinatura, e eu posso ver quantas pessoas se inscreveram para esse nível de assinatura. Me dá todas essas opções. Eu não tenho que codificar nada além de se eu quiser codificar as páginas. Essa é a minha solução para sites de membros. É apenas coberto isso em uma base mais teórica para você. Você pode querer usar um plugin de associação diferente. Basicamente, você pode apenas construir um site como você faria normalmente no WordPress. Mas então a diferença entre um site de associação e um site público regular é, obviamente, que as páginas são restritas aos membros. Isso é quando você pode conectar um plugin de associação e você pode restringir o conteúdo com base no status de associação das pessoas. Com o WordPress, é por padrão que o WordPress tem a capacidade de ter usuários e usuários são capazes de fazer login. Mas por ter um plugin, ele permite que você gerencie facilmente quais páginas são visíveis para quais níveis de assinatura, e, em seguida, também aceitar pagamentos no front-end. Eu só queria falar um pouco sobre sites de membros, caso você fosse publicar um site de associação. Como é algo em que tive um pouco de experiência, pensei em compartilhar minha experiência com vocês. Obrigado por assistir esta pequena lição bônus. No próximo vídeo, vamos encerrar e dar seu projeto de aula. Vejo você no próximo vídeo. 21. Encerramento e projeto do curso: Certo, é hora de encerrar esse curso e começar seu projeto de aula. Até agora você deve entender como WordPress funciona e ter uma boa idéia de como construir um site WordPress a partir da perspectiva de um desenvolvedor. Idealmente, você deve agora ter uma compreensão do WordPress e o que ele faz, Divi como um tema e um construtor de página para WordPress, como adicionar conteúdo ao seu site, como construir páginas, a hierarquia de modelos WordPress, como personalizar seu código no nível do Page Builder e no back-end, plugins e como implantar e migrar seu site WordPress. Há, obviamente, uma tonelada de mais detalhes que poderíamos entrar neste curso. Mas tenha em mente que os fundamentos são o que você precisa entender para desenvolver sites WordPress como freelancer ou agência. Como eu mencionei na minha aula anterior, você deve ser capaz de pesquisar soluções quando você está preso, e agora através de sua compreensão central de desenvolvimento para WordPress, você deve ser capaz de entender por onde começar sua pesquisa quando precisa construir algo que não foi exatamente coberto neste curso. Em nosso projeto de classe, é hora de reunir todo esse novo conhecimento para construir e publicar um site WordPress na Internet. Seu projeto de classe seguirá uma sequência muito semelhante ao que já fizemos nesta classe, é só que agora depende de você. Como sempre, se você precisar de alguma ajuda extra, basta deixar um comentário na caixa de discussão e também certifique-se de seguir minha página aqui no Skillshare para se atualizar quando eu lançar uma nova classe. Tudo bem pessoal, isso conclui o curso, quero agradecer muito por assistir e estou ansioso para ver seus projetos de aula acabados. Boa sorte, e te vejo na seção de discussão.