Introdução ao desenvolvimento

de temas para

WordPress

http://bit.ly/intro-tema-wp

Marlon Lacerda Amâncio

Bibliotecário por formação e Web Designer por emoção. 

 

Desenvolvo websites e aplicativos com WordPress desde 2010.

marlon@naveguefeliz.com.br

O que é um tema?

Um tema do WordPress é a parte respons​ável por exibir o conteúdo, definir o layout e design do seu site. 

Qual a diferença entre tema e plugin?

TEMA

Responsável por controlar a apresentação e aparência do conteúdo do site.

PLUGIN

Responsável por controlar o comportamento e funcionalidades do site.

Qualquer tema que você criar não deve conter funcionalidades críticas para o funcionamento do site.

Isso significa que, quando um usuário muda o tema, eles perdem o acesso a essas funcionalidades.

#ficaadica

Do que são feitos os temas?

Os temas são formados por vários tipos de arquivos agrupados dentro de uma pasta.

  • Templates (Arquivos PHP/HTML)
  • Arquivos CSS
  • Arquivos JavaScript
  • Arquivos de imagens
  • Arquivos de localização (tradução)
  • Arquivos de texto

wordpress/wp-content/themes/seutema

O que são os Templates?

Templates são os principais "blocos de construção" do seu tema. São arquivos de modelo que definem como deverá ser gerada a página final.

Os templates são arquivos PHP compostos pela marcação HTML da página a ser gerada, pelas Template Tags do WordPress e outras estruturas do PHP.

Banco de dados

<html>

</html>

<?php

the_content();

?>

Template

WordPress

Documento Web 

(HTML, CSS e JS)

Visão geral do funcionamento de templates

https://seusite.com.br/categoria/marketing

É necessário pelo menos um arquivo de template para seu tema poder gerar a visualização das páginas.

 

Esse template obrigatório é o index.php

Modularidade dos Templates

header.php

Content (Loop)

footer.php

header.php

header.php

footer.php

footer.php

Content (Loop)

sidebar.php

Content (Loop)

Form busca

sidebar.php

comments.php

index.php

index.php

index.php

Como o WP escolhe qual template ele irá usar?

Através da URL requisitada e da Hierarquia de Templates do WordPress

Hierarquia de Templates

FRONT PAGE?

front-page.php > home.php > page.php > index.php

PÁGINA?

{custom-template}.php > page-{slug}.php > page-{id}.php > page.php > singular.php > index.php

POST?

single-{post-type}.php > single.php > singular.php > index.php

ARQUIVO?

category-{slug}.php > category-{id}.php > category.php > archive.php > index.php

404?

404.php > index.php

SEARCH?

search.php > single.php > index.php

https://seusite.com.br/categoria/marketing

BLOG?

home.php > index.php

http://wphierarchy.com/

Afinal, como ficaria o meu tema?

Anatomia de um Tema

index.php

Template "backup" para exibição do conteúdo.

style.css

Folha de estilo principal do tema.

functions.php

  Arquivo de funcionalidades do tema.

page.php

single.php

archive.php

header.php

footer.php

sidebar.php

home.php

front-page.php

Obrigatório

Recomendável

Opcional

Especial

Pasta

404.php

search.php

includes

template-parts

languages

screenshot.png

Partes de Templates

Outros templates

Auxiliares

images

assets

Templates mais comuns

style.css

É a principal folha de estilos do tema. É obrigatória e contém o cabeçalho de informação para descrever seu tema.

/*
Theme Name: Nome do seu tema
Theme URI: https://site-do-seu-tema.com/
Author: Seu Nome
Author URI: https://seu-site.com/
Description: Descrição breve e explicativa do objetivo e funcionalidades do seu tema.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nomedoseutema
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
*/

functions.php

O arquivo functions.php se comporta como um plugin do WordPress, onde você pode adicionar recursos e funcionalidades ao seu tema.

Você pode usá-lo para chamar funções do WordPress e para definir suas próprias funções.

Como criar um template e exibir o conteúdo do site?

Usando as Template Tags e o Loop do WordPress

Template Tags

São funções do WP que auxiliam na construção dos templates e exibição dinâmica do conteúdo. 

 

Podemos usar uma Template Tag para inserir outro arquivo do tema ou buscar uma informação no banco de dados.

<?php the_title(); ?>
<?php get_header(); ?>
<?php bloginfo('name'); ?>
<?php is_front_page(); ?>

Tipos de Template Tags

Include Tags

  • get_header()
  • get_footer()
  • get_sidebar()
  • get_template_part()
  • get_search_form()
  • comments_template()

Template Tags

  • the_title()
  • the_content()
  • the_author()
  • the_category()
  • tag_description()
  • the_terms()
  • comment_date()
  • body_class()
  • the_ID()
  • wp_nav_menu()

Contitional Tags

  • is_home()
  • is_front_page()
  • is_single(123)
  • is_page(42)
  • is_page_template('sobre.php')
  • has_excerpt()
  • is_active_sidebar()
  • is_plugin_active(caminho)

https://developer.wordpress.org/themes/references/list-of-template-tags/

Loop

O Loop é o mecanismo de repetição padrão que o WordPress usa para exibir o  conteúdo resultante da busca (query) no banco de dados.

O Loop

<?php if ( have_posts() ) : ?>
    
    <?php while ( have_posts() ) : the_post(); ?>
        
    /* Exibe conteúdo do post */
    
    <?php endwhile; ?>

<?php endif; ?>

O Loop

<?php if ( have_posts() ) : ?>
    
    <?php while ( have_posts() ) : the_post(); ?>
        
        <h1><?php the_title(); ?></h1>
        
        <?php the_content(); ?>
    
    <?php endwhile; ?>

<?php else : ?>

    <?php echo 'Desculpe, não há posts a exibir.'; ?>

<?php endif; ?>

Loop

Início do loop

Tudo entre este ponto e o fim do loop será repetido até encerrar a lista de posts consultados no BD.

the_title()

Imprime o título do post que está sendo iterado.

the_excerpt()

Imprime o resumo do post que está sendo iterado.

the_content()

Imprime o conteúdo do post que está sendo iterado.

the_category()

Imprime a categoria do post que está sendo iterado.

the_author()

Imprime o autor do post que está sendo iterado.

Fim do loop

Retorna para o início do loop se houver mais posts ou encerra e continua execução do template.

Outras templates tags

Quaisquer outras templates tags deverão entrar no loop.

Sai e continua execução do restante do  template

Onde usar o Loop?

header.php

footer.php

sidebar.php

Query Primária

Queries Secundárias

Quer alterar a Query Principal?

query_posts()

Use o gancho pre_get_posts para alterar a Query Principal ou a classe WP_Query para queries secundárias

Juntando as partes e criando seu primeiro tema

style.css

/*
Theme Name: Nome do seu tema
Theme URI: https://site-do-seu-tema.com/
Author: Seu Nome
Author URI: https://seu-site.com/
Description: Tema exemplo para o Meetup
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nomedoseutema
*/

index.php

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
    
    <?php while ( have_posts() ) : the_post(); ?>
        
        <h1><?php the_title(); ?></h1>
        
        <?php the_content(); ?>
    
    <?php endwhile; ?>

<?php else : ?>

    <?php _e( 'Desculpe, não há post a exibir.', 'seutema' ); ?>

<?php endif; ?>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    
    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

    <div id="content" class="site-content">

footer.php

    </div><!-- #content -->

    <footer class="site-footer">		
	
        /* Conteúdo do Footer */

    </footer>

<?php wp_footer(); ?>

</body>

</html>
<?php 

if ( ! function_exists( 'meutema_setup' ) ) :
/**
 * Configura o tema e registra suporte para vários recursos do WordPress.
 */
function meutema_setup() {
 
    load_theme_textdomain( 'meutema', get_template_directory() . '/languages' );
 
    add_theme_support( 'automatic-feed-links' );
 
    add_theme_support( 'post-thumbnails' );
 
    register_nav_menus( array(
        'primario'   => __( 'Menu Cabeçalho', 'meutema' ),
        'secundario' => __('Menu Rodapé', 'meutema' )
    ) );
 
}
endif;

add_action( 'after_setup_theme', 'meutema_setup' );

functions.php

Usando
temas filhos

"Child Themes"

https://universowp.com.br/porque-usar-frameworks/

Incluindo

CSS e JavaScript

no tema

Referenciando arquivos e pastas do tema

Opções do Tema Customizer API

Outros recursos de temas

Sidebar são áreas destinas a exibir conteúdos além do conteúdo principal. Usualmente sidebars são criadas para exibir Widgets.

Widgets no WordPress são pequenos módulos que oferecem funcionalidades específicas e facilitam sua inserção nos temas através das sidebars.

Menus de navegação permitem a inserção e manutenção de menus de navegação customizados no tema.

Starter Themes e temas para referência

Underscores _S

Odin

Twenty Seventeen

Introdução ao desenvolvimento de temas para WordPress

By Marlon Lacerda Amâncio

Made with Slides.com

Introdução ao desenvolvimento de temas para WordPress

  • 839

More from Marlon Lacerda Amâncio