• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WordPress: De blogs pessoais a grandes portais - Parte 2
 

WordPress: De blogs pessoais a grandes portais - Parte 2

on

  • 1,745 views

Apresentação da segunda parte do minicurso "WordPress: De blogs pessoais a grandes portais", ministrado durante a edição 2012 da EXPOTEC, no IFRN Campus Natal/Central. ...

Apresentação da segunda parte do minicurso "WordPress: De blogs pessoais a grandes portais", ministrado durante a edição 2012 da EXPOTEC, no IFRN Campus Natal/Central.

www.grupoweblovers.org

Statistics

Views

Total Views
1,745
Views on SlideShare
1,645
Embed Views
100

Actions

Likes
1
Downloads
33
Comments
0

4 Embeds 100

http://grupoweblovers.org 88
http://localhost 8
http://feeds.feedburner.com 3
http://www.feedspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WordPress: De blogs pessoais a grandes portais - Parte 2 WordPress: De blogs pessoais a grandes portais - Parte 2 Presentation Transcript

    • WordPress:De blogs pessoais a grandes portais Parte 2 Giancarlo Lima da Silva Tecnologia em Análise e Desenvolvimento de Sistemas – IFRN EXPOTEC 2012
    • Agenda do minicurso• O que é necessário para criar um tema WordPress;• Anatomia de um tema WordPress;• Parte 2.01: Divisão do HTML;• Parte 2.02: CSS e Cabeçalho;• Parte 2.03: Página inicial e página de arquivo;• Parte 2.04: O post, os comentários e a página 404;• Parte 2.05: A barra lateral, o rodapé e as funções;• Parte 2.06: A busca;• Dicas e truques;• Para saber mais.
    • O que é necessário para criar um tema WordPress• Servidor Web instalado localmente e uma cópia do WordPress instalada no servidor; – XAMPP: Mac (http://migre.me/caIlx) e Windows (http://migre.me/caIjk) – Linux: LAMP (http://migre.me/caImV)• Editor de texto;• Navegador com ferramentas para desenvolvimento web.
    • Anatomia de um tema WordPress• HTML e CSS; – Cria-se um layout normalmente, que deve ser composto por cabeçalho, coluna de conteúdo, coluna lateral e rodapé• Arquivos que formam um tema;• PHP e os Template Tags.
    • Anatomia de um tema WordPress HTML e CSSCabeçalho:• Nome e slogan do blog ou uma logomarca;• Formulário de busca;• Menus de páginas/categorias;Conteúdo:• Postagens;• Galeria de imagens...Lateral:• Widgets...Rodapé:• Nome do site e links úteis;• Widgets...
    • Anatomia de um tema WordPress Arquivos que formam o tema• header.php: Cabeçalho, onde ficarão a logomarca/título e slogan, busca, menus, etc.;• sidebar.php: Arquivo que fará a chamada dos widgets na lateral do blog;• search.php e searchform.php: Página e formulário de busca, respectivamente;• footer.php: Rodapé;• index.php: Mostra as postagens na página inicial;• single.php: Mostra uma postagem em sua própria página individualmente;• page.php: Página estática;• archive.php: Mostra as postagens de um determinado arquivo (categorias, tags, autores, etc.);• comments.php: Formulário de comentários do blog;• functions.php: Armazena as funções PHP do blog;• 404.php: Página de erro 404;• style.css: Arquivo de estilo do tema;• screenshot.png: Foto do tema.
    • Anatomia de um tema WordPress PHP e os Template Tags• Template Tags são comandos especiais que exibem informações do banco de dados dinamicamente ou personalizam o blog WordPress de formas variadas;• As Template Tags devem ser inseridas no código HTML, em determinados locais do tema.
    • Anatomia de um tema WordPress PHP e os Template Tags• Exemplos: – <?php bloginfo(‘name’) ?> Exibe o nome do blog; – <?php the_time(m-d-y) ?> Exibe a data de publicação de uma postagem; – <?php include(TEMPLATEPATH . ‘/caminho/do/arquivo’); ?> Exibe qualquer arquivo definido entre as aspas simples.
    • Parte 01: Divisão do HTML• Divide-se o arquivo HTML em outros arquivos menores, respeitando a estrutura do layout;• Troca-se a extensão dos arquivos resultantes de .html para .php e insere-se as template tags no código;• Arquivos resultantes: index.php, single.php, page.php, archive.php, search.php e footer.php.
    • Parte 01: Divisão do HTML• No código de cada arquivo deve-se inserir as seguintes Template Tags: – <?php get_header(); ?> – <?php get_sidebar(); ?> – <?php get_footer(); ?>• Estas Tags servem para chamar o cabeçalho (header.php), a barra lateral (sidebar.php) e o rodapé (footer.php) do blog.
    • Parte 02: O CSS e o Cabeçalho• O arquivo CSS deve obrigatoriamente se chamar style.css e ser salvo na raiz da pasta do tema;• Nas primeiras linhas desse arquivo devem ser escritos os dados de identificação do blog:
    • Parte 02: O CSS e o Cabeçalho• Para criar o header.php copia-se o código HTML somente até o fechamento da tag </header>;• Edita-se o arquivo header.php substituindo trechos do HTML pelos seguintes códigos:
    • Parte 02: O CSS e o Cabeçalho• Entre as tags <head> e </head>: – <?php bloginfo( stylesheet_url ); ?> – <?php bloginfo(template_directory); ?>/css/comments.css" /> – <?php bloginfo( pingback_url ); ?> – <?php if ( is_singular() && get_option( thread_comments ) ) wp_enqueue_script( comment-reply ); wp_head(); ?>• Entre as tags <header> e </header>: – <?php bloginfo(name); ?> – <?php bloginfo(description); ?> – <?php get_search_form(); ?> – <?php wp_nav_menu(array(theme_location => cat-menu)); ?>
    • Parte 03: Página inicial e página de arquivo• No index.php deve ser inserido um laço que tornará possível a exibição dos posts do blog;
    • Parte 03: Página inicial e página de arquivo• Também é necessário adicionar códigos para criar a navegação do blog (não confundir com os menus), para permitir que o leitor procure posts anteriores aos exibidos na home:• Insira esse código entre o <?php endwhile ?> e o <?php else: ?>.
    • Parte 03: Página inicial e página de arquivo• O archive.php é exatamente igual ao index.php, mas deve-se adicionar algumas linhas de código responsáveis por exibir os posts arquivados do blog:• Em nosso exemplo, insira o código acima logo após a tag HTML <div id="post">.
    • Parte 04: O post, os comentários e a página 404• O arquivo single.php também é igual ao index.php, mas deve-se excluir a navegação, modificar algumas linhas no código do loop e acrescentar a Template Tag responsável por chamar o formulário de comentários em comment.php.Código a ser excluído:
    • Parte 04: O post, os comentários e a página 404• Substituir as linhas <?php endwhile ?> e <?php else: ?> pela linha <?php endwhile; else: ?>• <?php comments_template(); ?> - Chama o arquivo comments.php. Inserir na linha acima da <?php endwhile; else: ?>.
    • Parte 04: O post, os comentários e a página 404• Para criar o arquivo page.php, basta novamente copiarmos o código da single.php e apagar os seguintes trechos de código: – <div id="linkcomentarios"><?php comments_popup_link(Sem Comentários, 1 Comentário, % Comentários); ?></div> – <?php comments_template(); ?>
    • Parte 04: O post, os comentários e a página 404• O arquivo 404.php nada mais é do que um arquivo simples que leva apenas a mensagem de erro de página não encontrada, que pode ser escrita a seu gosto;• Basta apagar todo o código entre as tags <div id=“post”> e escrever sua mensagem no lugar.
    • Parte 04: O post, os comentários e a página 404• O arquivo comments.php é o responsável por renderizar os comentários existentes e o formulário de comentários do blog e é invocado pelo WordPress através do comando <?php comments_template(); ?>, já inserido em single.php.• Basicamente é um formulário que recebe o nome, o endereço de e-mail, uma URL e o comentário em si, com um botão para enviar.
    • Parte 04: O post, os comentários e a página 404• Entretanto, é necessário inserir uma boa quantidade de código PHP, que é necessário para mostrar o número de comentários, a navegação, a exibição do avatar do leitor, entre outros;• Confira o código de exemplo fornecido neste curso e use-o para criar o arquivo comments.php;• Também é necessário criar a estilização CSS correspondente ao formulário de comentários. Há outro arquivo CSS para isso já preparado em nosso exemplo.
    • Parte 05: A barra lateral, o rodapé e as funções• Novamente visitamos o nosso arquivo HTML e copiamos para dentro de um arquivo sidebar.php o código da coluna lateral do blog;• Dentro da div <div id=“widget”> apaga-se todo o código, substituindo-o pelo seguinte laço if: – <?php if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(Barra Lateral) ) : ?><?php endif; ?>
    • Parte 05: A barra lateral, o rodapé e as funções• O rodapé é super simples de fazer. Basta copiar a partir da tag <footer> e acrescentar a Template Tag <?php wp_footer(); ?> onde quiser (recomenda-se que seja dentro da mesma div do texto).
    • Parte 05: A barra lateral, o rodapé e as funções• O arquivo functions.php é o responsável por armazenar todas as funções utilizadas pelo tema e que são chamadas por algumas Template Tags;• Em nosso exemplo, serão definidas duas funções: uma para a barra lateral e outra para o sistema de menus personalizados.
    • Parte 05: A barra lateral, o rodapé e as funções
    • Parte 06: A busca• O sistema de busca de um tema WordPress é formado por dois arquivos: – searchform.php: Formulário de busca; – search.php: Página que exibirá os resultados de uma busca feita pelo leitor.
    • Parte 06: A busca• O searchform.php é apenas um formulário simples com um campo de texto e um botão. Acrescenta-se as Template Tags <?php bloginfo(home); ?> e <?php the_search_query(); ?> ao código.
    • Parte 06: A busca• Para criar o search.php, copia-se o código de index.php, apaga-se o conteúdo do início do loop e insere o código que exibirá um título e um trecho de cada resultado;• Também inclui-se mais acima um código que exibirá na página o tempo em que a pesquisa foi concluída (isso não é padrão do WordPress. Considere um pequeno bônus. ^^).• Confira o arquivo de exemplo e use-o para criar o arquivo search.php.
    • Tema concluído. Vamos testar?• Após todos esses procedimentos, você deverá ter todos os 12 arquivos PHP e um ou mais arquivos CSS;• Reuna todos esses arquivos em uma pasta com o nome do seu tema e salve esta pasta dentro do diretório /wp-content/themes, na sua instalação do WordPress;• Não se esqueça de tirar uma foto do seu tema e salvá-lo na raiz da pasta do mesmo, com o nome screenshot.png.
    • Dicas e truques!• Além dos arquivos PHP padrão, é possível incluir mais arquivos PHP no layout do seu tema, com o auxílio da Template Tag <?php bloginfo(template_directory); ?>, usada dentro da tag HTML <link>. Ideal para acrescentar banners de monetização (AdSense e similares);• Alguns plugins para WordPress podem complementar a aparência do seu tema, adicionar funcionalidades ou melhorar a navegabilidade. Alguns exemplos: – WP-Pagenavi: http://migre.me/cdP8d (Substitui a navegação padrão por uma navegação melhorada); – Post Highlights: http://migre.me/cdPb3 (Adiciona uma galeria de imagens para artigos de destaque); – TF Social Share: http://migre.me/cdPg4 (Adiciona botões de compartilhamento em redes sociais).
    • Para saber mais• WordPress Codex (codex.wordpress.org – em inglês) – Design e Layout de blog: http://migre.me/cdO5A – Desenvolvendo temas: http://migre.me/cdNQo• Referência deste minicurso: – Como criar um WordPress Theme (site WPTotal): http://migre.me/cdOa4
    • Dúvidas?
    • MUITO OBRIGADO! www.grupoweblovers.orggrupoweblovers@googlegroups.com twitter.com/WebLoversRN fb.me/grupoweblovers