Your SlideShare is downloading. ×
0
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Oficina Criando seu primeiro tema do zero
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Oficina Criando seu primeiro tema do zero

1,357

Published on

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.

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,357
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CRIANDO SEU PRIMEIRO TEMA DO ZERO Fellyph Cintra domingo, 14 de julho de 13
  • 2. Fellyph Cintra (@fellyph) Gerente de ProjetosTech Center BlackBerry http://www.fellyph.com.br/blog/ domingo, 14 de julho de 13
  • 3. domingo, 14 de julho de 13
  • 4. domingo, 14 de julho de 13
  • 5. WORDPRESS Wordpress é 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
  • 6. IDENTIFICANDO ESTRUTURAS domingo, 14 de julho de 13
  • 7. SE IDENTIFICARMOS UM PADRÃO DE INFORMAÇÃO PODEMOS UTILIZAR O WORDPRESS domingo, 14 de julho de 13
  • 8. 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
  • 9. 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) domingo, 14 de julho de 13
  • 10. 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
  • 11. 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
  • 12. PHPMYADMIN domingo, 14 de julho de 13
  • 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
  • 14. WP-CONFIG.PHP domingo, 14 de julho de 13
  • 15. ESTRUTURA DO WORDPRESS domingo, 14 de julho de 13
  • 16. 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.  domingo, 14 de julho de 13
  • 17. CRIANDO SEU PRIMEIRO TEMA O wordpress passa a reconhecer um tema com apenas dois arquivos básicos. Index.php e style.css domingo, 14 de julho de 13
  • 18. 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 domingo, 14 de julho de 13
  • 19. 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
  • 20. ARQUITETURA BÁSICA HEADER.PHP INDEX.PHP PAGE.PHP SINGLE.PHP CATEGORY.PHP SEARCH.PHP SIDEBAR.PHP FOOTER.PHP domingo, 14 de julho de 13
  • 21. 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) domingo, 14 de julho de 13
  • 22. 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
  • 23. 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(); domingo, 14 de julho de 13
  • 24. 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
  • 25. 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 domingo, 14 de julho de 13
  • 26. 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
  • 27. 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 Query query_posts( $args ); // The Loop while ( have_posts() ) : the_post(); ... domingo, 14 de julho de 13
  • 28. 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        domingo, 14 de julho de 13
  • 29. 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 domingo, 14 de julho de 13
  • 30. 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 domingo, 14 de julho de 13
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. OUTRA OPÇÃO:YUI http://yuilibrary.com/ domingo, 14 de julho de 13
  • 36. 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/ domingo, 14 de julho de 13
  • 37. OBRIGADO PORTO ALEGRE domingo, 14 de julho de 13

×