Anatomia de um tema WordPress

@abel_ribeiro [email protected] www.ribeirart.com

O que temos para hoje? • Introdução ao WordPress •
Sintaxe do WordPress • O Loop • Fundamentos dos Temas de WordPress

Introdução ao WordPress

• Poderoso CMS • "Instalação em um clique" • Comunidade
Ativa • plugins • Temas • Suporte (codex)

Sintaxe do WordPress

• WordPress e PHP • Template Tags • Include Tags
• Conditional Tags

Templates Tags

As Template Tags são essencialmente funções PHP que podem lidar
com parâmetros para executar diferentes tarefas.

<?php bloginfo('name'); ?> <img src="<?php bloginfo('template_directory'); ?>/logo.png" > Mais informações
em: http://codex.wordpress.org/Template_Tags

Include Tags

As include tags são, basicamente, funções de inclusão PHP usadas
para gerar conteúdo dos arquivos necessários dentro do seu tema.

<?php get_header(); ?> Mais informações em: http://codex.wordpress.org/Include_Tags <?php get_footer(); ?>
<?php get_sidebar(); ?>

Conditional Tags

As conditional tags são extremamente úteis. Você irá utilizá-las em
arquivos de modelo do seu tema e, como o nome sugere, elas servem para configurar diversas condições.

<?php if (is_home()) { echo '<h1>Olá Mundo</h1>'; } ?> Mais
informações em: http://codex.wordpress.org/Conditional_Tags

<?php if (is_category('news') ) { get_sidebar('news'); } else { get_sidebar();
} ?> Mais informações em: http://codex.wordpress.org/Conditional_Tags

O Loop

O loop está no coração do WordPress, e reside nos
arquivos de modelo do seu tema. Embora você possa, de fato, ter um tema sem o loop, isso dificultaria muito a fluidez da manipulação de conteúdo.

Mais informações em: http://codex.wordpress.org/The_Loop <?php if ( have_post() ) :
while ( have_post() ) : the_post(); ?> Começa assim:

Mais informações em: http://codex.wordpress.org/The_Loop E termina assim: <?php endwhile; else:
?> <p>Alguma mensagem de erro ou algo do tipo</p> <?php endif; ?>

<?php if ( have_post() ) : while ( have_post() )
: the_post(); ?> <article id="<?php the_ID();?>" <?php post_class();?> > <h1> <a href="<?php the_permalink(); ?>" title="<?php the_title(); >"> <?php the_title(); ?> </a> </h1> <?php the_content(); ?> <?php the_comments(); ?> </article> <?php endwhile; else: ?> <article class="post"> <h1>Error!</h2> <p>Houve algum problema! Por favor, tente novamente.</p> </article> <?php endif; ?>

Fundamentos dos Temas de WordPress

Um tema é composto por uma pasta com arquivos de
modelo e qualquer outro arquivo necessário. Os dois únicos arquivos de modelo que são absolutamente necessários sãos style.css e index.php.

header.php index.php sidebar.php footer.php

Style.css

A primeira coisa que qualquer tema precisa é de uma
folha de estilo. Além de conter o código com as informações do tema de fato, no topo, a folha de estilo também é o local onde a maior parte do design deve ser gerenciada.

/* Theme Name: Template Palestra Theme URI: http://templatepalestra.com.br Description: Tema
desenvolvido para exemplo em palestra no instituto infnet. Tags: clean, two-columns, right-sidebar, custom-background. Author: Abel Ribeiro Author URI: http://ribeirart.com */

header.php

Quando um tema ativo é carregado, ele começa com o
arquivo header.php. É aqui que você coloca todos os metadados, dispara o WordPress com o wp_head() e normalmente coloca o cabeçalho da sua página.

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset');
?>"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper"> <header id="main-header"> <h1> <a href="<?php echo home_url(); ?>" title="<?php bloginfo ('name'); ?>"> <?php bloginfo('name'); ?> </a> </h1> <nav id="main-navigation"> <?php wp_nav_menu('menu'); ?> </nav> </header>

index.php

Modelo principal. Deve ser incluído como arquivo de fallback para
todas as páginas, caso não possua um arquivo de modelo; provavelmente deve incluir o loop.

<?php get_header(); ?> <main id="main-content"> <?php // Buscar loop-index.php get_template_part(
'loop', 'index' ); ?> </main> <?php get_sidebar(); ?> <?php get_footer(); ?>

sidebar.php

É basicamente uma coluna vertical fornecido por um tema para
apresentar outras informações que o conteúdo principal da página web. Temas geralmente oferecem pelo menos uma barra lateral à esquerda ou à direita do conteúdo.

footer.php

Este arquivo encerra todas as tags de header.php e adiciona
informações de direitos autorais, widgets, etc.

</div> <footer id="main-footer"> <p id="copy"> copyright
&copy <?php bloginfo('name'); ?> </p> </footer> <?php wp_footer(); ?> </body> </html>

Quando usar cada arquivo de modelo?

Usado para a página inicial e para a primeira página,
respectivamente, caso uma páginaestática seja configurada como página inicial. home.php

Modelo para visualização de páginas; modelos para páginas individuais também
podem ser recriados, e page- [slug].php, bem como page-[id].php podem ser usados para ampliar o modelo á páginas específicas page.php

Modelo de visualisação de postagens individuais; single-[post type].php (ex:. single-profile.php
para um post type chamado profile), usado post type específico. single.php

Modelo para visualização de listagens de categoria; category-[id].php e category-
[slug].php podem ser usados para ampliar o modelo à categorias específicas. category.php

@abel_ribeiro [email protected] www.ribeirart.com Duvidas???

Anatomia de um tema WordPress

Anatomia de um tema WordPress

More Decks by Abel Ribeiro

Other Decks in Technology

Featured

Transcript