http://bit.ly/intro-tema-wp
Bibliotecário por formação e Web Designer por emoção.
Desenvolvo websites e aplicativos com WordPress desde 2010.
marlon@naveguefeliz.com.br
wordpress/wp-content/themes/seutema
Banco de dados
<html>
</html>
<?php
the_content();
?>
Template
WordPress
Documento Web
(HTML, CSS e JS)
https://seusite.com.br/categoria/marketing
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
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
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
/*
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
*/
<?php the_title(); ?>
<?php get_header(); ?>
<?php bloginfo('name'); ?>
<?php is_front_page(); ?>
Include Tags
Template Tags
Contitional Tags
https://developer.wordpress.org/themes/references/list-of-template-tags/
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
/* Exibe conteúdo do post */
<?php endwhile; ?>
<?php endif; ?>
<?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; ?>
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
header.php
footer.php
sidebar.php
/*
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
*/
<?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(); ?>
<!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">
</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' );
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.