Site com WordPress Elementor - #3 Criando o Tema Personalizado
18/05/2020Nessa vídeoaula criaremos o tema personalizado utilizando o plugin Elementor do WordPress.
Tema personalizado com Elementor
Para acessar o painel de controle do WordPress devemos acessar http://localhost/wp-admin . O login e senha serão aqueles criados na aula anterior.
O primeiro passo para criar um tema é criar a imagem screenshot. Essa imagem deverá ter o tamanho de 1200px x 900px. Segue abaixo um exemplo:
style.css
No nosso css, além do estilo nós setamos as características do template através do comentário inicial do arquivo:
/*
Theme Name: Imob Imóveis
Theme URI: http://www.imob.com.br
Author: Webdesign em Foco
Author URI: https://www.webdesignemfoco.com
Description: Site de imóveis.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: Imob
Tags: imob, imoveis, site de mobiliaria
*/
*{margin: 0; padding:0; box-sizing: border-box;}functions.php
Criaremos também os arquivos responsáveis pelas funções do sistema:
<?php
#Link css
wp_enqueue_style('style',get_stylesheet_uri());index.php
O arquivo index será responsável por receber a base do html.
<?php get_header(); ?>
<?php
the_post();
the_content();
?>
<?php get_footer(); ?>header.php
O header manterá o cabeçalho que se repete nas páginas.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IMOB</title>
<?php wp_head(); ?>
</head>
<body>footer.php
O arquivo footer receberá o rodapé das páginas.
<?php wp_footer(); ?>
</body>
</html>Nosso diretório de arquivos ficou assim:
Para ativar o novo tema acesse no seu dashboard Aparência >> Temas >> Imob Imóveis
Posteriormente vamos acessar Elementor >> Getting Started
Para acionar a página inicial precisamos acessar Aparência >> Temas >> Personalizar >> Configuração de Página Estática e selecionar a página criada pelo Elementor.
Por hoje é só, na próxima aula começamos a colocar a mão na massa.
Sucesso nos códigos e na vida!
Precisando de um professor particular? webdesignemfoco@gmail.com
Posts Relacionados
