Oficina Criando seu primeiro tema do zero

CRIANDO SEU PRIMEIRO
TEMA DO ZERO
Fellyph Cintra
domingo, 14 de julho de 13

Fellyph Cintra (@fellyph)
Gerente de ProjetosTech Center BlackBerry
http://www.fellyph.com.br/blog/

WORDPRESS
Wordpress é um sistema de gestão de conteúdo, também
conhecido como CMS( do inglês Content Management
Systems), escrito em PHP.

IDENTIFICANDO ESTRUTURAS

SE IDENTIFICARMOS UM PADRÃO
DE INFORMAÇÃO
PODEMOS UTILIZAR O WORDPRESS

TRABALHANDO LOCALMENTE
Para trabalhar com o wordpress temos que acessar o endereço:
http://www.wordpress.org
Lá temos a última versão do WordPress disponível para download.

TRÊS PASSOS MÁGICOS
1 - Montar o ambiente (local ou online)
2 - Criar banco
3 - Configurar o wp-config(arquivo de configuração do
WordPress)

PREPARANDO AMBIENTE LOCAL
Para trabalharmos localmente com o WordPress precisamos
conﬁgurar o Apache+mySQL + PHP para isso vamos
trabalhar com XAMPP, MAMP,WAMP ou LAMP. É uma
instalação pre-conﬁgurada desses recursos.
* COM O AMBIENTE PRONTO JOGAMOS A PASTA DO WORDPRESS NA PASTA
HTDOCS OU WWW DEPENDENDO DO AMBIENTE

CRIANDO O BANCO DE
DADOS
Com o nosso ambiente local instalado, agora precisamos criar
o nosso banco. Para acessar o administrador de banco de
dados no servidor local através do seguinte endereço :
http://localhost/phpmyadmin


PHPMYADMIN

EDITANDO O ARQUIVO DE
CONFIGURAÇÃO
Com o ambiente pronto e o banco de dados criado, agora
precisamos editar o nosso arquivo wp-conﬁg.php(wp-conﬁg-
sample.php)

WP-CONFIG.PHP

ESTRUTURA DO WORDPRESS

ORGANIZAÇÃO DE PASTAS
Nos arquivos do wordpress possuem três pastas básicas:
wp-admin: Tem todo o meu sistema de adiministração
wp-include: Tem todas as funcionalidades do wordpress,
funções e mêtodos especiais.
wp-content:Tem tudo relacionado a conteúdo, plugins,
uploads, e temas.

CRIANDO SEU PRIMEIRO
TEMA
O wordpress passa a reconhecer um tema com apenas
dois arquivos básicos. Index.php e style.css

DEFININDO OS DETALHES DO SEUTEMA
No arquivo style.css ficam as definições do seu tema.
Elas são configuradas em um comentário no começo do
arquivo.
Exemplo:
Theme Name: Nome do meu tema
Theme URI: http://www.urldomeutema.com
Author: Nome do autor.
Author URI: http://urldoautor.com
Description: Descrição do tema
Version: 1.0

OUTROS ARQUIVOS IMPORTANTES
•index.php
•single.php
•category.php
•search.php
•404.php
•page.php
•tag.php
•archive.php
•header.php
•footer.php

ARQUITETURA BÁSICA
HEADER.PHP
INDEX.PHP
PAGE.PHP
SINGLE.PHP
CATEGORY.PHP
SEARCH.PHP
SIDEBAR.PHP
FOOTER.PHP

INCLUDETAGS
Como o nome sugere, são comandos de inclusão de blocos de códigos para
montagem e modularização do nosso projeto, muito útil para realizar o reúso do
nosso código, são eles:
get_header() - incorpora o arquivo header.php(referente ao cabeçalho)
get_footer() - incorpora o footer.php arquivo responsável pelo rodapé do meu
tema
get_sidebar() - incorpora o sidebar.php (barra lateral reponsável por uma série de
recursos do wordpress)

LOOP
<?php while ( have_posts () ): the_post(); ?>

Conteúdo a ser executado a cada iteração...
<?php endwhile; ?>
Quando o wordpress carrega uma url ele verifica qual tipo de informação o usuário
deseja, assim consulta a informação no banco e deixa disponível para exibição, não temos
idéia da quantidade de posts que virão, assim utilizamos a função have_posts() verifica se
existem post a serem exibidos na fila.
A função the_post() faz o acesso ao post e atualiza o ponteiro de acesso da informação
a cada chamada.

WP_HEAD E WP_FOOTER
Logo quando criar o header.php é extremamente importante adicionar
antes de fechar a tag <head> adicionar a função :
wp_head();
Ela é responsável por gerenciar todos os includes do seu tema e plugins.
Com a mesma funcionalidade devemos adicionar ao footer.php antes de
fechar a tag <body> a função:
wp_footer();

RECOLHENDO INFORMAÇÕES
GERAIS DO WP
O Wordpress contém uma função bloginfo() que fornece informações do
seu site. Passamos como parâmetro qual informação queremos resgatar.

<?php bloginfo('qual o parâmetro'); ?>

exemplo :

<h1><?php bloginfo('name'); ?></h1>
A função acima resgata o nome do site

EXEMPLOS PARA O
BLOGINFO()
name: nome do blog
description: descrição do blog
admin_email: email do administrador
stylesheet_directory: url da pasta do css
stylesheet_url: url do css
template_directory: diretorio do tema
template_url: url do tema

POST_CLASS()
Essa função gera automaticamente uma série de classe
relacionadas ao tipo de conteúdo que está sendo carregado:
[loop]
<div <?php post_class(); ?> >
" <h2><?php the_title() ?></h2>
" <?php the_content() ?>
</div>
[fim do loop]
Também podemos atribuir um id único:
<div id="post-<?php the_ID(); ?>" <?php
post_class(); ?>>

QUERY_POSTS()
Query_posts() é uma função de ﬁltro sobre o dados
do loop do WordPress, independente da url o que
será exibido é controlado pelo query_posts().
Exemplo:

<?php
// The Query
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
...

EXEMPLOS DE QUERY
query_posts('cat=3'); - Todos os posts da categoria 3

query_posts( 'cat=-3' ); - Todos os posts menos da categoria 3

query_posts( 'posts_per_page=5' ); - Apenas os 5 últimos posts

query_posts('cat=2,6,17,38'); - grupo de
categorias

query_posts('tag=cooking'); - por tag


MAIS EXEMPLOS
category_name=slug-da-categoria : cria um filtro através do slug
da categoria.
p=5 : carrega um post específico
posts_per_page = -1 ou showposts = -1 : lista todos os posts de
uma categoria
year=2012 : filtra os posts de um ano específico
monthnum : filtra os posts de um mês(numeral) específico

PERSONALIZANDO A ORDEM DOS POSTS
No query_posts podemos personalizar a ordem de listagem
definindo dois parâmetros “order” e o “orderby”. O order :ASC
ou DESC.
orderby : define qual a propriedade que ele irá fazer a
ordenação(padrão é por data de publicação):
ID' - ordena por ID.
'author' - Ordena por au.
'title' - Order by title.
'modified' - Order by last modified date.
'parent' - Order by post/page parent id.
'rand' - Random order.
'comment_count' - Ordena por comentário ( disponível na versão 2.9 ou
superior).
Lista completa : http://codex.wordpress.org/Class_Reference/WP_Query#Parameters

PAGINAÇÃO
Por padrão o worpdress exibe 10 posts por loop.
Para criar uma paginação utilizamos duas funções :
next_posts_link(’texto do link'): cria um link para próxima
página
previous_posts_link(’texto do link’): criar um link para a página
anterior
A estrutura de paginação o wordpress gerência automaticamente criando links só
quando necessário

QUERY_POSTS X PAGINAÇÃO
Esta função faz acesso as informações da query do loop.
Exemplo:
<?php $page = (get_query_var('paged')) ?
get_query_var('page') : 1; ?> <h1>Você
está na página : <?php echo $page; ?></
h1>

QUERY_POSTS() X PAGINAÇÃO
$paged = (get_query_var("paged")) ?
get_query_var("paged") : "1" ;
query_posts(array( 'posts_per_page' => 5, 'paged' =>
$paged ));

BOOTSTRAP
• Scaffolding
• grid system
• ﬂuid grid system
• resposive design
• Componentes
• Dropdowns
• Navs
• Breadcrumbs..
• JavaScript Components
• Transitions
• Modal
• Dropdown
• Tab
• Carousel
• Collapse...

OUTRA OPÇÃO:YUI
http://yuilibrary.com/

REFERÊNCIAS
• SublimeTXT : http://www.sublimetext.com/
• Plugins: http://wbond.net/sublime_packages/package_control
• Emmet: https://github.com/sergeche/emmet-sublime#how-to-install
• Codex!: http://codex.wordpress.org/
• Grupo no face: https://www.facebook.com/groups/wordpress.brasil/
• BLOG: http://www.fellyph.com.br/blog/
• GIT: http://www.github.com/fellyph/

OBRIGADO PORTO ALEGRE

Oficina Criando seu primeiro tema do zero

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Oficina Criando seu primeiro tema do zero

Mais de Fellyph Cintra

Oficina Criando seu primeiro tema do zero