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 Projetos Tech Center BlackBerry

http://www.fellyph.com.br/blog/


WORDPRESSWordpress é um sistema de gestão de conteúdo, também

conhecido como CMS( do inglês Content Management Systems), escrito em PHP.


IDENTIFICANDO ESTRUTURASdomingo, 14 de julho de 13

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 banco3 - Configurar o wp-config(arquivo de configuração do

WordPress)


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


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-config.php(wp-config-

sample.php)


WP-CONFIG.PHP


ESTRUTURA DO WORDPRESS


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.


CRIANDO SEU PRIMEIRO TEMA

O wordpress passa a reconhecer um tema com apenasdois arquivos básicos. Index.php e style.css


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


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ÁSICAHEADER.PHP

INDEX.PHP PAGE.PHP SINGLE.PHP CATEGORY.PHP SEARCH.PHP

SIDEBAR.PHP

FOOTER.PHP


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)


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_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();


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 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


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 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();...


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


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


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


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

• fluid 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

• 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/


http://www.sublimetext.com/

http://www.sublimetext.com/

http://wbond.net/sublime_packages/package_control

http://wbond.net/sublime_packages/package_control

https://github.com/sergeche/emmet-sublime#how-to-install

https://github.com/sergeche/emmet-sublime#how-to-install

http://codex.wordpress.org

http://codex.wordpress.org

https://www.facebook.com/groups/wordpress.brasil/

https://www.facebook.com/groups/wordpress.brasil/



http://www.github.com/fellyph/

http://www.github.com/fellyph/

OBRIGADO PORTO ALEGRE


oficina criando seu primeiro tema do zero

Technology