oficina criando seu primeiro tema do zero
DESCRIPTION
Oficina realizada no WordCamp Porto Alegre 2013, introdução sobre criação de temas os princípios básicos para criar o seu primeiro tema do Zero.TRANSCRIPT
CRIANDO SEU PRIMEIRO TEMA DO ZERO
Fellyph Cintra
domingo, 14 de julho de 13
Fellyph Cintra (@fellyph)Gerente de Projetos Tech Center BlackBerry
http://www.fellyph.com.br/blog/
domingo, 14 de julho de 13
domingo, 14 de julho de 13
domingo, 14 de julho de 13
WORDPRESSWordpress é um sistema de gestão de conteúdo, também
conhecido como CMS( do inglês Content Management Systems), escrito em PHP.
domingo, 14 de julho de 13
IDENTIFICANDO ESTRUTURASdomingo, 14 de julho de 13
SE IDENTIFICARMOS UM PADRÃO DE INFORMAÇÃO
PODEMOS UTILIZAR O WORDPRESS
domingo, 14 de julho de 13
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.
domingo, 14 de julho de 13
TRÊS PASSOS MÁGICOS
1 - Montar o ambiente (local ou online)
2 - Criar banco3 - Configurar o wp-config(arquivo de configuração do
WordPress)
domingo, 14 de julho de 13
PREPARANDO AMBIENTE LOCAL
Para trabalharmos localmente com o WordPress precisamos configurar o Apache+mySQL + PHP para isso vamos trabalhar com XAMPP, MAMP, WAMP ou LAMP. É uma instalação pre-configurada desses recursos.
* COM O AMBIENTE PRONTO JOGAMOS A PASTA DO WORDPRESS NA PASTA HTDOCS OU WWW DEPENDENDO DO AMBIENTE
domingo, 14 de julho de 13
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
domingo, 14 de julho de 13
PHPMYADMIN
domingo, 14 de julho de 13
EDITANDO O ARQUIVO DE CONFIGURAÇÃO
Com o ambiente pronto e o banco de dados criado, agora precisamos editar o nosso arquivo wp-config.php(wp-config-
sample.php)
domingo, 14 de julho de 13
WP-CONFIG.PHP
domingo, 14 de julho de 13
ESTRUTURA DO WORDPRESS
domingo, 14 de julho de 13
ORGANIZAÇÃO DE PASTASNos 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.
domingo, 14 de julho de 13
CRIANDO SEU PRIMEIRO TEMA
O wordpress passa a reconhecer um tema com apenasdois arquivos básicos. Index.php e style.css
domingo, 14 de julho de 13
DEFININDO OS DETALHES DO SEU TEMA
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 temaTheme URI: http://www.urldomeutema.comAuthor: Nome do autor.Author URI: http://urldoautor.comDescription: Descrição do temaVersion: 1.0
domingo, 14 de julho de 13
OUTROS ARQUIVOS IMPORTANTES
• index.php
•single.php
•category.php
•search.php
•404.php
•page.php
•tag.php
•archive.php
•header.php
• footer.php
domingo, 14 de julho de 13
ARQUITETURA BÁSICAHEADER.PHP
INDEX.PHP PAGE.PHP SINGLE.PHP CATEGORY.PHP SEARCH.PHP
SIDEBAR.PHP
FOOTER.PHP
domingo, 14 de julho de 13
INCLUDE TAGS
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
temaget_sidebar() - incorpora o sidebar.php (barra lateral reponsável por uma série de
recursos do wordpress)
domingo, 14 de julho de 13
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.
domingo, 14 de julho de 13
WP_HEAD E WP_FOOTERLogo 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();
domingo, 14 de julho de 13
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
domingo, 14 de julho de 13
EXEMPLOS PARA O BLOGINFO()
name: nome do blogdescription: descrição do blogadmin_email: email do administradorstylesheet_directory: url da pasta do cssstylesheet_url: url do csstemplate_directory: diretorio do tematemplate_url: url do tema
domingo, 14 de julho de 13
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(); ?>>
domingo, 14 de julho de 13
QUERY_POSTS()Query_posts() é uma função de filtro sobre o dados do loop do WordPress, independente da url o que será exibido é controlado pelo query_posts().
Exemplo: <?php
// The Queryquery_posts( $args );
// The Loopwhile ( have_posts() ) : the_post();...
domingo, 14 de julho de 13
EXEMPLOS DE QUERYquery_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 decategorias
query_posts('tag=cooking'); - por tag
domingo, 14 de julho de 13
MAIS EXEMPLOScategory_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
domingo, 14 de julho de 13
PERSONALIZANDO A ORDEM DOS POSTSNo 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
domingo, 14 de julho de 13
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
domingo, 14 de julho de 13
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>
domingo, 14 de julho de 13
QUERY_POSTS() X PAGINAÇÃO
$paged = (get_query_var("paged")) ? get_query_var("paged") : "1" ;
query_posts(array( 'posts_per_page' => 5, 'paged' => $paged ));
domingo, 14 de julho de 13
BOOTSTRAP
• Scaffolding
• grid system
• fluid grid system
• resposive design
• Componentes
• Dropdowns
• Navs
• Breadcrumbs..
• JavaScript Components
• Transitions
• Modal
• Dropdown
• Tab
• Carousel
• Collapse...
domingo, 14 de julho de 13
OUTRA OPÇÃO: YUI
http://yuilibrary.com/
domingo, 14 de julho de 13
REFERÊNCIAS
• Sublime TXT : 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/
domingo, 14 de julho de 13
OBRIGADO PORTO ALEGRE
domingo, 14 de julho de 13