Como adicionar modelos e design personalizados aos formatos de postagem do blog da Divi (parte 1 de 3)

Bem-vindo ao dia 1 de 3 em nossa série sobre como adicionar estilos personalizados aos formatos de postagem do blog do Divi. Por padrão, o Divi vem com seis formatos de postagem de blog: Padrão, Vídeo, Áudio, Citação, Galeria e Link. Nesta série, ensinamos como personalizá-los com php e css.

Nos próximos 3 dias, vou orientá-lo na personalização de todos os formatos de postagem do blog da Divi: Padrão, Citação, Link, Vídeo, Áudio e Galeria. A edição de todos eles (para os designs que tenho em mente) requer a edição do arquivo de modelo single.php. Para fazer isso corretamente, devemos criar um tema filho Divi que conterá nosso arquivo de modelo Single.php alterado. E antes de fazermos isso, devemos também criar uma instalação local do WordPress usando Desktopserver. Isso fornecerá um espaço de desenvolvimento seguro para que possamos brincar sem arriscar nada em um site ao vivo.

Como sugere o título desta postagem, precisaremos de três dias para cobrir tudo do início ao fim. Hoje, vou mostrar a você como criar uma instalação local do WordPress usando Desktopserver e criar o tema filho que usaremos para abrigar nossos formatos de postagem de blog alterados.

Eu consideraria esta série mais “avançada” do que a maioria dos tutoriais publicados aqui. Mas, se você for um iniciante, esta série é na verdade uma grande oportunidade para melhorar suas habilidades de desenvolvimento e se ramificar em algo novo em uma série de postagens guiadas, gratuitas e seguras.

Vamos começar!

Uma espiada no que está por vir

Aqui está uma rápida olhada nos designs que alcançaremos nesta série. Depois de estabelecermos as bases para eles na postagem de hoje, mostrarei como editar o arquivo single.php (o modelo para todos os formatos de postagem do nosso blog) e, em seguida, como estilizar ainda mais esse modelo para cada formato com CSS. Vai ser uma jornada e tanto!

Preparando seus ativos de desenvolvimento

Aqui está o que você precisa para acompanhar o tutorial de hoje e os tutoriais que criei para os próximos 2 dias:

• Um editor de código como Atom, Sublime, Brackets ou Notepad + + (o que você preferir)
• Uma instalação local do WordPress usando DesktopServer (a menos que você já tenha um)
• Um Divi Child Theme - que iremos criar!

Eu recomendo fortemente que, se você for acompanhar esta série, faça isso em uma instalação do WordPress configurada apenas para teste e desenvolvimento. A última coisa que quero é que as pessoas experimentem seu site ao vivo e bagunçam alguma coisa.

Se você não tiver certeza de como configurar uma instalação de desenvolvimento local do WordPress, recomendo usar a versão gratuita do desktopserver. Ele deve ter instalado e executado uma instalação local do WordPress em apenas alguns minutos (sem exagero).

Configurando DesktopServer em seu computador

Aqui estão algumas etapas para começar a usar o DesktopServer.

Visite o site e baixe a versão gratuita clicando no botão “Grátis - Adicionar ao carrinho” na coluna da direita.

Na página de finalização da compra, preencha suas informações pessoais, concorde com os termos e clique em comprar.

Na página Confirmação de compra, selecione o download correto para o seu sistema operacional. Eu sugiro instalar a versão mais recente do Mac ou do Windows.

Descompacte seu download e execute a instalação do aplicativo em seu computador.

Agora você pode encontrar o aplicativo DesktopServer em uma pasta chamada “xampplite”, na raiz do seu disco local (C :) Drive.

Depois de instalar o Desktopserver, leia as instruções para ajudá-lo a começar a configurar a instalação local do wordpress.

Criando o tema Divi Child para esta série

Para criar um tema filho Divi, você precisa acessar seus arquivos de tema WordPress. Se você seguiu os padrões ao instalar o DesktopServer, seus arquivos de tema devem estar localizados na pasta de documentos dentro de uma pasta chamada “Sites”.

Localize a pasta de temas e adicione uma nova pasta chamada “filho”.

Agora você vai adicionar o arquivo style.css à pasta do tema filho. Este é o primeiro dos 3 arquivos que irão compor o seu tema filho.

Abra seu editor de texto e crie um novo arquivo com o seguinte cabeçalho CSS no topo do documento.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Você pode adicionar o resto das informações para o cabeçalho CSS do tema filho para ajustar seu site conforme necessário.

Salve seu novo arquivo com o nome e extensão “style.css”. E adicione-o à pasta do tema filho:

O próximo arquivo que você precisa adicionar à pasta do tema filho é o arquivo functions.php.

Volte para o seu editor de texto e crie outro novo arquivo e adicione o seguinte código php bem no topo do documento:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Salve o arquivo com o nome e extensão exatos “functions.php” e adicione-o à pasta filha:

O arquivo final de que você precisa para o seu tema filho é o arquivo single.php do Divi. Além de adicionar novo CSS ao arquivo style.css do tema filho, usaremos uma cópia do arquivo single.php do Divi para editar o layout dos diferentes tipos de postagem.

Para localizar o arquivo single.php, vá para a pasta do tema Divi (pai).

Copie o arquivo single.php e cole-o na pasta do tema filho:

Agora estamos prontos para fazer personalizações no arquivo single.php do seu tema filho.

Ative seu novo tema infantil

Antes de começarmos a personalizar o arquivo de modelo single.php, vá em frente e ative seu novo tema filho.

No painel do wordpress, vá para Aparência → Temas e selecione o botão Ativar em seu novo tema filho chamado Divi Criança.

Por enquanto é isso!

Eu sei que isso não é muito emocionante ainda, mas espero que você fique comigo. É importante estabelecer a base certa para seus projetos e este post é um ótimo lugar para começar.

O que vem amanhã?

Agora, com a instalação local do WordPress e o tema filho ativado, você está pronto para a próxima parte desta série. Amanhã vou mostrar como editar o arquivo single.php do Divi para criar um layout totalmente exclusivo para os formatos de postagem do seu blog.

Estou ansioso para ler seus comentários abaixo. Configurar um tema filho em um servidor local pode levar a alguns problemas para os iniciantes, então tentarei responder a todas as perguntas que puder. No entanto, se você tiver mais problemas técnicos, nossa equipe de suporte também está pronta e disposta a ajudá-lo. Sem mencionar o pessoal do Desktop Server!

Saúde!