WordPress Curso

De Wiki REDDES

(Diferencias entre revisiones)
(Visão Geral)
Revisión actual (19:55 5 jul 2010) (editar) (deshacer)
(esqueleto do que foi apresentado no curso)
 
(17 ediciones intermedias no se muestran.)
Línea 8: Línea 8:
'''Instrutor: ''' Leo Germani (Hacklab)
'''Instrutor: ''' Leo Germani (Hacklab)
 +
 +
'''Local: ''' SALA C2
'''Participantes: '''
'''Participantes: '''
Línea 14: Línea 16:
*Fabio Montefuscolo
*Fabio Montefuscolo
*Ricardo Castro
*Ricardo Castro
 +
*Jamil Atta
*Julio Takayama
*Julio Takayama
 +
*Luciano Ramalho
*Marcos Mori
*Marcos Mori
*Vinicius Andrade
*Vinicius Andrade
 +
 +
= Agenda =
 +
<pre>
 +
09:00 - 09:15hs - Palvras iniciais e objetivos do treinamento
 +
Renato Murasaki
 +
 +
09:15 - 09:45hs - Apresentação HackLab, Tópicos, Visão geral WordPress e Dinâmica do treinamento
 +
Leo Germani
 +
 +
09:45 - 11:00hs - Desenvolvimento de temas
 +
- Template tags, Child themes e Melhores práticas
 +
Leo Germani
 +
 +
11:00 - 11:15hs - Intervalo
 +
 +
11:15 - 13:00hs - Desenvolvimento de plugins
 +
- Estrutura, API, Menus e páginas administrativas, Trabalhando com banco de dados
 +
 +
13:00 - 14:00hs - Almoço
 +
 +
14:00 - 16:00hs - Desenvolvimento de plugins (cont.)
 +
- Internacionalização, Utilizando Javascript e CSS
 +
 +
16:00 - 16:15hs - Intervalo
 +
 +
16:15 - 17:15hs - Desenvolvimento de Widgets
 +
 +
17:15 - 18:00hs - Boas práticas de desenvolvimento
 +
- WP Super Cache
 +
- Mantendo ambiente de desenvolvimento compartilhado entre a equipe e fixtures
 +
- Wp-Easy-data (framework)
 +
- EletroWidgets (plugin de gerenciamento de widgets no front-end)
 +
- Post Highlights (plugin de "carrossel" de destaques)
 +
</pre>
= Conteúdo =
= Conteúdo =
Línea 22: Línea 60:
== Visão Geral ==
== Visão Geral ==
-
Temas
+
* Temas
 +
** Child Themes
 +
** Template tags
-
Child Themes
+
* Plugins
 +
** Estrutura de um plugin WordPress
 +
** Plugin API
 +
*** Actions e Filters
 +
** Criando menus e páginas administrativas
 +
** Armazenamento de dados
 +
** Opções “Options”
 +
** Trabalhando com banco de dados
 +
** Shortcode
 +
** Utilizando JavaScript em plugins
 +
** Utilizando CSS em plugins
 +
** Internacionalização
 +
* Widgets
-
Plugins
+
* Novas funcionalidades WP 3.0
== Melhores práticas ==
== Melhores práticas ==
-
Widgets
+
* Widgets
-
Páginas de configurações
+
* Páginas de configurações
-
Meta Boxes
+
* Meta Boxes
-
adicionando JS e CSS
+
* Adicionando JS e CSS
-
Internacionalização de tema e plugin
+
* Internacionalização de tema e plugin
-
WP Super Cache
+
* WP Super Cache
-
CSS Grid para criação de temas
+
* CSS Grid para criação de temas
== Práticas HackLab ==
== Práticas HackLab ==
-
Mantendo ambiente de desenvolvimento compartilhado entre a equipe e fixtures
+
* Mantendo ambiente de desenvolvimento compartilhado entre a equipe e fixtures
 +
 
 +
* Wp-Easy-data (framework)
 +
 
 +
* EletroWidgets (plugin de gerenciamento de widgets no front-end)
 +
 
 +
* Post Highlights (plugin de "carrossel" de destaques)
 +
 
 +
 
 +
== Documentação ==
 +
 
 +
Segue abaixo a documentação da apresentação feita durante o curso:
 +
 
 +
 
 +
=== Intro ===
 +
 
 +
 
 +
* Estrutura de Temas e plugins
 +
* /wp-content/themes (temas)
 +
* /wp-content/plugins (plugins que podem ser ativados e desativados)
 +
* /wp-content/mu-plugins (qualquer arquivo php nessa pasta é incluído automaticamente. Quando usando um wordpress multisite, serve para ter um plugin automaticamente
 +
* instalado em todos os blogs)
 +
 
 +
O que vai no tema e o que vai no plugin?
 +
 
 +
plugin:
 +
* poder ativar e desativar
 +
* poder reutilizar entre sites ou temas
 +
 
 +
tema:
 +
* quando o código só é aplicável aquele tema mesmo
 +
 
 +
Ordem de carregamento -> mu-plugins, plugins, functions.php
 +
 
 +
 
 +
=== Desenvolvendo Temas ===
 +
 
 +
Ver pasta 'novo tema' com um tema minimalista com o mínimo que precisa.
 +
 
 +
template hierarchy - http://codex.wordpress.org/Template_Hierarchy
 +
 
 +
Um tema é definido por um header de comentário no arquivo style.css
 +
 
 +
<pre>
 +
 
 +
/*
 +
Theme Name: Rose
 +
Theme URI: the-theme's-homepage
 +
Description: a-brief-description
 +
Author: your-name
 +
Author URI: your-URI
 +
Template: use-this-to-define-a-parent-theme--optional
 +
Version: a-number--optional
 +
.
 +
General comments/License Statement if any.
 +
.
 +
*/
 +
</pre>
 +
 
 +
Todo request do wordpress gera uma query no banco de dados baseado na url q vc requisitou. pode ser uma listagem de categoria (?cat=1 ou /category/category1), um post especifico (?p=1 ou /2010/05/post-1), resultado de busca (?s=busca), etc.
 +
 
 +
Esse resultado fica na global $wp_query, que guarda muitos parametros uteis sobre a query.
 +
 
 +
as funções is_??() servem para saber qual é o tipo de página que vc está visitando (veja a template hirerchy)
 +
 
 +
* is_home() - true se estiver na home
 +
* is_page() - true se estiver em uma página
 +
* is_single() - true se estiver em um post único
 +
* is_singular() - true se estiver em uma página ou post
 +
* is_404()
 +
* is_category()
 +
* etc... - mais em http://codex.wordpress.org/Function_Reference
 +
 
 +
is_home() é um atalho para $wp_query->is_home() (assim como todas as outras)
 +
 
 +
Outros metodos do objeto WP_Query
 +
 
 +
$wp_query->get_queried_object();
 +
 
 +
retorna um objeto com informacoes do que foi buscado. pode ser um autor, um post, uma categoria
 +
 
 +
get_query_var() (atalho para $wp_query->get_query_var()) serve para pegar um valor dentro do atributo $wp_query->query_vars
 +
 
 +
set_query_var()
 +
 
 +
mais em: http://codex.wordpress.org/Function_Reference/WP_Query
 +
 
 +
query_posts() - sobrescreve a query padrão que foi feita pelo wordpress. Para saber os paramentros que ela recebe: http://codex.wordpress.org/Function_Reference/query_posts
 +
 
 +
dica: se vc usar essa função, nao se esqueça de sempre passar como paramentro a paginação, se não vc nunca vai conseguir sair da primeira página.
 +
O valor da paginação pode ser recuperado através da global $paged. Ou get_query_var('paged').
 +
 
 +
ex: fazer uma query que retorne os posts da categoria 1
 +
<pre>
 +
global $paged;
 +
query_posts('cat=1&paged=' . $paged);
 +
</pre>
 +
 
 +
Dica 2:
 +
existe uma global $query_string que guarda em formato de querystring todas as variáveis do request
 +
 
 +
 
 +
Para fazer uma query diferente sem precisar sobrescrever a query padrão, faça assim:
 +
<pre>
 +
$novaquery = new WP_Query('p=3');
 +
 
 +
if ($novaquery->have_posts()) {
 +
 +
while ($novaquery->have_posts()) {
 +
$novaquery->the_post();
 +
 +
the_title();
 +
 +
}
 +
}
 +
 
 +
</pre>
 +
 
 +
=== LOOP ===
 +
 
 +
Loop: http://codex.wordpress.org/The_loop
 +
 
 +
O Loop é um padrão de vódigo do wordpress que faz um loop pelos posts que foram requisistados. Veja a estrutura básica do loop no arquivo index.php dentro do 'novotema'
 +
 
 +
Dentro do Loop você pode usar as template tags: http://codex.wordpress.org/Template_Tags
 +
 
 +
 
 +
=== Desenvolvendo Plugins ===
 +
 
 +
 
 +
Veja o arquivo functions.php dentro do 'novotema'
 +
 
 +
 
 +
=== Plugins ===
 +
 
 +
Estrutura de um plugin -> ver estrutura_de_plugin.php
 +
 
 +
=== Melhores práticcas ===
 +
 
 +
==== metaboxes ====
 +
ver metabox.php
 +
 
 +
==== settings api ====
 +
ver settings_api.php
 +
 
 +
==== paginas de configuracao ====
 +
 
 +
ver plugin_configuracoes.php para ver como fazer uma página de configurações
 +
 
 +
ver plugin_configuracoes_tabela_proprira.php -> mesma pagina de configurações gravando as opções em tabela propria
 +
 
 +
ver o plugin custom_email_notices para um exemplo completo de plugin
 +
 
 +
==== shotcodes ====
 +
ver shortcode.php, ver shortcode_2.php para exemplo de embed pegando opção de largura que fizemos durante o curso
 +
 
 +
==== js e css ====
 +
ver js_and_css.php
 +
 
 +
==== widgets ====
 +
ver widget_simples.php e widget.php
 +
 
 +
 
 +
=== Banco de dados ===
 +
<pre>
 +
classe wpdb
-
Wp-Easy-data (framework)
+
Métodos:
 +
->get_results
 +
->get_col
 +
->get_row
 +
->get_var
-
EletroWidgets (plugin de gerenciamento de widgets no front-end)
+
Atributos:
 +
->prefix - retorna o prefixo das tabelas definido no wp_config.php
 +
$wpdb->users (retorna o nome da tabela de usuários já com o prefixo. No caso de multisite, já com o prefixo completo do site atual - isso vale para todas as tabelas)
-
Post Highlights (plugin de "carrossel" de destaques)
+
$wpdb->prepare usado para preparar input de usuário para query no banco evitando sql injection e erros com aspas
 +
</pre>
 +
mais em: http://codex.wordpress.org/Function_Reference/wpdb_Class
 +
Cache: ver WP Super Cache
[[Category: WordPress]]
[[Category: WordPress]]

Revisión actual

Tabla de contenidos

Objetivo

Capacitar os profissionais da BIREME/OPAS/OMS nas melhores práticas de customização, desenvolvimento de temas, plugins e widgets no sistema WordPress.

Carga horária: 8 horas

Data prevista: Dia 23 de Junho (09:00 - 17:00)

Instrutor: Leo Germani (Hacklab)

Local: SALA C2

Participantes:

  • Francis Douglas
  • Fabio Montefuscolo
  • Ricardo Castro
  • Jamil Atta
  • Julio Takayama
  • Luciano Ramalho
  • Marcos Mori
  • Vinicius Andrade

Agenda

09:00 - 09:15hs  -  Palvras iniciais e objetivos do treinamento
                    Renato Murasaki 
                    
09:15 - 09:45hs  -  Apresentação HackLab, Tópicos, Visão geral WordPress e Dinâmica do treinamento
                    Leo Germani

09:45 - 11:00hs  -  Desenvolvimento de temas 
                    - Template tags, Child themes e Melhores práticas
                    Leo Germani

11:00 - 11:15hs  -  Intervalo

11:15 - 13:00hs  -  Desenvolvimento de plugins
                    - Estrutura, API, Menus e páginas administrativas, Trabalhando com banco de dados

13:00 - 14:00hs  -  Almoço

14:00 - 16:00hs  -  Desenvolvimento de plugins (cont.)
                    - Internacionalização, Utilizando Javascript e CSS

16:00 - 16:15hs  -  Intervalo

16:15 - 17:15hs  -  Desenvolvimento de Widgets
                  
17:15 - 18:00hs  -  Boas práticas de desenvolvimento
                    - WP Super Cache
                    - Mantendo ambiente de desenvolvimento compartilhado entre a equipe e fixtures
                    - Wp-Easy-data (framework)
                    - EletroWidgets (plugin de gerenciamento de widgets no front-end)
                    - Post Highlights (plugin de "carrossel" de destaques)

Conteúdo

Visão Geral

  • Temas
    • Child Themes
    • Template tags
  • Plugins
    • Estrutura de um plugin WordPress
    • Plugin API
      • Actions e Filters
    • Criando menus e páginas administrativas
    • Armazenamento de dados
    • Opções “Options”
    • Trabalhando com banco de dados
    • Shortcode
    • Utilizando JavaScript em plugins
    • Utilizando CSS em plugins
    • Internacionalização
  • Widgets
  • Novas funcionalidades WP 3.0

Melhores práticas

  • Widgets
  • Páginas de configurações
  • Meta Boxes
  • Adicionando JS e CSS
  • Internacionalização de tema e plugin
  • WP Super Cache
  • CSS Grid para criação de temas

Práticas HackLab

  • Mantendo ambiente de desenvolvimento compartilhado entre a equipe e fixtures
  • Wp-Easy-data (framework)
  • EletroWidgets (plugin de gerenciamento de widgets no front-end)
  • Post Highlights (plugin de "carrossel" de destaques)


Documentação

Segue abaixo a documentação da apresentação feita durante o curso:


Intro

  • Estrutura de Temas e plugins
  • /wp-content/themes (temas)
  • /wp-content/plugins (plugins que podem ser ativados e desativados)
  • /wp-content/mu-plugins (qualquer arquivo php nessa pasta é incluído automaticamente. Quando usando um wordpress multisite, serve para ter um plugin automaticamente
  • instalado em todos os blogs)

O que vai no tema e o que vai no plugin?

plugin:

  • poder ativar e desativar
  • poder reutilizar entre sites ou temas

tema:

  • quando o código só é aplicável aquele tema mesmo

Ordem de carregamento -> mu-plugins, plugins, functions.php


Desenvolvendo Temas

Ver pasta 'novo tema' com um tema minimalista com o mínimo que precisa.

template hierarchy - http://codex.wordpress.org/Template_Hierarchy

Um tema é definido por um header de comentário no arquivo style.css


/*   
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

Todo request do wordpress gera uma query no banco de dados baseado na url q vc requisitou. pode ser uma listagem de categoria (?cat=1 ou /category/category1), um post especifico (?p=1 ou /2010/05/post-1), resultado de busca (?s=busca), etc.

Esse resultado fica na global $wp_query, que guarda muitos parametros uteis sobre a query.

as funções is_??() servem para saber qual é o tipo de página que vc está visitando (veja a template hirerchy)

  • is_home() - true se estiver na home
  • is_page() - true se estiver em uma página
  • is_single() - true se estiver em um post único
  • is_singular() - true se estiver em uma página ou post
  • is_404()
  • is_category()
  • etc... - mais em http://codex.wordpress.org/Function_Reference

is_home() é um atalho para $wp_query->is_home() (assim como todas as outras)

Outros metodos do objeto WP_Query

$wp_query->get_queried_object();

retorna um objeto com informacoes do que foi buscado. pode ser um autor, um post, uma categoria

get_query_var() (atalho para $wp_query->get_query_var()) serve para pegar um valor dentro do atributo $wp_query->query_vars

set_query_var()

mais em: http://codex.wordpress.org/Function_Reference/WP_Query

query_posts() - sobrescreve a query padrão que foi feita pelo wordpress. Para saber os paramentros que ela recebe: http://codex.wordpress.org/Function_Reference/query_posts

dica: se vc usar essa função, nao se esqueça de sempre passar como paramentro a paginação, se não vc nunca vai conseguir sair da primeira página. O valor da paginação pode ser recuperado através da global $paged. Ou get_query_var('paged').

ex: fazer uma query que retorne os posts da categoria 1

global $paged;
query_posts('cat=1&paged=' . $paged);

Dica 2: existe uma global $query_string que guarda em formato de querystring todas as variáveis do request


Para fazer uma query diferente sem precisar sobrescrever a query padrão, faça assim:

$novaquery = new WP_Query('p=3');

if ($novaquery->have_posts()) {
	
	while ($novaquery->have_posts()) {
		$novaquery->the_post();
		
		the_title();
			
	}	
}

LOOP

Loop: http://codex.wordpress.org/The_loop

O Loop é um padrão de vódigo do wordpress que faz um loop pelos posts que foram requisistados. Veja a estrutura básica do loop no arquivo index.php dentro do 'novotema'

Dentro do Loop você pode usar as template tags: http://codex.wordpress.org/Template_Tags


Desenvolvendo Plugins

Veja o arquivo functions.php dentro do 'novotema'


Plugins

Estrutura de um plugin -> ver estrutura_de_plugin.php

Melhores práticcas

metaboxes

ver metabox.php

settings api

ver settings_api.php

paginas de configuracao

ver plugin_configuracoes.php para ver como fazer uma página de configurações

ver plugin_configuracoes_tabela_proprira.php -> mesma pagina de configurações gravando as opções em tabela propria

ver o plugin custom_email_notices para um exemplo completo de plugin

shotcodes

ver shortcode.php, ver shortcode_2.php para exemplo de embed pegando opção de largura que fizemos durante o curso

js e css

ver js_and_css.php

widgets

ver widget_simples.php e widget.php


Banco de dados

classe wpdb

Métodos:
->get_results
->get_col
->get_row
->get_var

Atributos:
->prefix - retorna o prefixo das tabelas definido no wp_config.php
$wpdb->users (retorna o nome da tabela de usuários já com o prefixo. No caso de multisite, já com o prefixo completo do site atual - isso vale para todas as tabelas)

$wpdb->prepare usado para preparar input de usuário para query no banco evitando sql injection e erros com aspas

mais em: http://codex.wordpress.org/Function_Reference/wpdb_Class

Cache: ver WP Super Cache

Herramientas personales