Aprenda a iniciar um tema do zero. Pode parecer uma tarefa muito complicada mas para iniciar um tema do zero com seus próprio templates é mais fácil do que parece.
Antes de começar
Antes de começar, você precisar estar com seu WordPress rodando, se ainda não sabe como instalar da uma lida neste post e também será necessário ter acesso via ftp.
Antes de começar a codificar, saiba que será necessário algum conhecimento em PHP, HTML, CSS e Javascript, e um bom tema seguirá os padrões:
–Padrão de codificação PHP
–Padrão de codificação HTML
–Padrão de codificação CSS
–Padrão de codificação Javascript
Arquivos de um tema
Vamos criar nosso tema utilizando acesso ftp, depois de pronto vamos zipar ele e vai ser possível instalar usando o caminho “Aparência / Temas / Adicionar tema”.
Esse nosso novo tema vamos chamar de WP Interior (wpinterior daqui pra frente).
1- Crie a pasta wpinterior na pasta wp-content/themes;
2- O mínimo necessário para um tema são os arquivos index.php e style.css;
style.css
/* Theme Name: WP Interior URI: https://wordpressinterior.resorthost.com.br/wordpress Author: Sandro Graziosi Author URI: https://wordpressinterior.resorthost.com.br/wordpress Description: Este texto aparecerá na tela da seleção dos temas de seu WordPress em "Aparência -> Temas". Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
index.php
Já para ir organizando melhor o tema, vamos dividir o header e footer do index, repare que estamos chamando eles com get_header() e get_footer(), desta forma sempre que precisarmos destes trechos utilizaremos essa maneira.
<?php
/**
* Este é o principal arquivo modelo (template)
*
* Juntamente com o style.css os únicos arquivos obrigatórios para um tema.
* No entanto já vamos dividir o tema em cabeçalho e footer
*
*/
get_header(); ?>
<?php
if ( have_posts() ) {
// Load posts loop.
while ( have_posts() ) {
the_post();
the_content();
}
} else { ?>
<p>Nenhum post publicado.</p>
<?php } ?>
<?php
get_footer();header.php
Este arquivo será bastante importante, nele iremos colocar a tag do Google Analytcs e outras que serão carregadas em todas as páginas do site.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since 1.0.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
footer.php
<p>footer</p>
</body>
</html>functions.php
Como não estamos chamando o style.css no header vamos criar o functions.php para “enfileirar” este arquivos no tema.
<?php
function theme_enqueue_styles() {
wp_enqueue_style( get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
Imagem do tema
Quase acabando, é bacana ter uma imagem do nosso layout para ilustrar o tema na página dos temas, para isso basta incluir uma imagem na pasta do nosso tema. Por padrão o WordPress reconhece uma imagem com o nome screenshot.png e o tamanho recomendado de 1200x 900px.
Conclusão
Muito bem, esta é uma primeira abordagem para termos uma base para futuras dicas e também iremos evoluir para que este chegue a um nível mais maduro com menu, sidebar, template para search, page, archive, scripts e tudo mais que um tema pro tem.
Curtiu? Tem algum comentário, manda aí em baixo.