SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Construindo sites e sistemas
com WordPress
Tema, plugins e como tudo se encaixa.
<?php the_title( ‘h1’, ‘h1’ ); ?>
Leo Baiano
#WebDev para pagar as contas
Músico quando estou bêbado
Poeta por vocação
Romântico de nascença
FAZEDOR DE SLIDES nas horas vagas
https://profiles.wordpress.org/leobaiano/
https://www.facebook.com/leo.baiano1
E-mail: ljunior2005@gmail.com
Planejamento do projeto
Se eu tiver 5 dias para cortar uma árvore, passarei 3 deles afiando o machado
- Quais plugins vou precisar?
- O que é CPT, o que é página, quais taxonomys…
- Quais sistemas terei que desenvolver?
Construindo sites e sistemas com WordPress
Planejamento do projeto
Os plugins
- ACF (https://wordpress.org/plugins/advanced-custom-fields/)
- ACF Repeater (http://www.advancedcustomfields.com/resources/repeater/)
- Yoast SEO (https://wordpress.org/plugins/wordpress-seo/)
- Plugins de segurança (https://rafaelfunchal.github.io/wordpress-security-
checklist/br/items/)
Construindo sites e sistemas com WordPress
Planejamento do projeto
O que é CPT, o que é Página, quais taxonomys…
- CPT para áreas que precisam de vários itens (como um blog ou lista de músicas)
- Se os itens dessas áreas precisam ser categorizados você cria uma taxonomy
- Páginas para areas com conteúdo institucional/ fixo (contato, quem somos…)
Construindo sites e sistemas com WordPress
Planejamento do projeto
Quais sistemas eu terei?
Vou desenvolver? Como? Existem plugins para isso?
- O site vai precisar de uma área restrita onde os usuários fazem upload de arquivos.
- Os usuários podem se adicionar e enviar mensagens um para o outro.
- Vai ter enquete.
Construindo sites e sistemas com WordPress
Eu sou #dev po***, cansei de
planejar… Quando vou ver
código? Quando vou meter a mão
na massa?
Construindo sites e sistemas com WordPress
A etapa de planejamento
e analise do sistema faz parte do
trabalho do #dev
Construindo sites e sistemas com WordPress
Criando um kick starter
Kick starter é uma configuração inicial que você utiliza em todos os projetos.
Como é o meu kick starter WordPress?
- Todos os arquivos do WordPress;
- O DUMP de uma base de dados;
- Deve ser configurado para trabalhar com multiplos ambientes;
- Precisa trazer os plugins essenciais e utilizados em todos os projetos;
- Precisa ter a base de um tema WordPress;
Construindo sites e sistemas com WordPress
Criando um Kick Starter
Construindo sites e sistemas com WordPress
Criando um kick starter
Construindo sites e sistemas com WordPress
Criando um kick starter
Construindo sites e sistemas com WordPress
Criando um kick starter
O que são multiplos ambientes e como configurar?
Ambientes são os locais onde você vai precisar ter o projeto rodando.
- Ambiente de desenvolvimento (development)
- Ambiente de homologação (staging)
- Ambiente de produção (production)
Construindo sites e sistemas com WordPress
Criando um kick starter
Preparando o projeto para trabalhar com multiplos ambientes
Base do meu kick starter: https://github.com/studio24/wordpress-multi-env-config
- Cria um diretório env na raiz do WordPress
- Coloca os arquivos do repositório no diretório env, exceto o wp-config.php
- Substitui o seu wp-config.php pelo wp-config.php do repositório
- Incluir os dados de acesso ao banco nos arquivos de cada ambiente
Construindo sites e sistemas com WordPress
Como criar um kick starter
Preparando o projeto para trabalhar com multiplos ambientes
Definindo o WP_SITEURL e WP_HOME
No arquivo de cada ambiente
$url_admin .= '/STARTER_WP/gerenciador';
$url_site .= '/STARTER_WP';
No wp-config.php
define('WP_SITEURL', $protocol . rtrim( $hostname . $url_admin ) );
define('WP_HOME', $protocol . rtrim( $hostname . $url_site ) );
Construindo sites e sistemas com WordPress
Criando um kick starter
Meu tema padrão
ASSETS
- CSS e JS do bootstrape
FUNCTIONS.PHP
- Adiciona os suportes do tema
- Carrega os arquivos CSS e JS
Construindo sites e sistemas com WordPress
Criando um kick starter
Suportes do tema
if ( ! function_exists( 'tema_un_setup_features' ) ) {
/**
* Setup theme features.
*
* @return void
*/
function tema_un_setup_features() {
// suportes
}
}
Construindo sites e sistemas com WordPress
Criando um kick starter
Suportes do tema
Definindo a localização dos arquivos de tradução do site: load_theme_textdomain();
Registro o menu: register_nav_menus();
Adiciono suporte a thumbnails: add_theme_support( ‘post-thumbnails’ );
Adiciono suporte a title tag: add_theme_support( ‘title-tag’ );
……….
Construindo sites e sistemas com WordPress
Criando um kick starter
Carregando arquivos CSS e JS
function tema_un_enqueue_scripts() {
$template_url = get_template_directory_uri();
wp_enqueue_style( 'tema_un-normalize', get_template_directory_uri() .
'/assets/css/normalize.css', array(), null, 'all' );
// jQuery.
wp_enqueue_script( 'jquery' );
// General scripts.
wp_enqueue_script( 'tema_un-main', $template_url . '/assets/js/main.js?ver=' . md5
(date('i')), array( 'jquery' ), null, true );
wp_localize_script( 'tema_un-main', 'ajax_object', array( 'ajax_url' => admin_url(
'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'tema_un_enqueue_scripts', 1 );
Construindo sites e sistemas com WordPress
Criando um kick starter
Trabalhando com ajax
No arquivo main.js nós recuperamos a ajax_url que foi passada no functions.php e
podemos trabalhar com requisições ajax.
var ajax_url = ajax_object.ajax_url;
Construindo sites e sistemas com WordPress
Criando os CPT’s definidos na etapa de planejamento
Meus CPT’s são plugins, porque:
- O CPT é ligado ao conteúdo e não ao visual do site;
- Se eu mudo de tema não preciso me preocupar em copiar os códigos que criam o
CPT do functions.php do tema antigo;
- Eu posso reaproveitar os plugins em outros projetos;
- E se eu for um bom menino ainda posso colocar no diretório oficial para que
outras pessoas possam se beneficiar.
Construindo sites e sistemas com WordPress
Criando CPT’s definidos na etapa de planejamento
Se você tem medo de plugin leia: http://migre.me/sf3G7
Não precisa ter medo de criar plugin, é quase a mesma coisa que inserir o código no
functions.php!
Construindo sites e sistemas com WordPress
Criando CPT’s definidos na estapa de planejamento
Quando eu era um mau menino…
Criando CPT: register_post_type();
Construindo sites e sistemas com WordPress
Quais sistemas terei que desenvolver
Antes de desenvolver um sistema verifique se existe algum plugin que você possa
utilizar. Se encontrar tal plugin verifique se atende a todas as necessidades do projeto e
caso não atenda veja se é muito complexo adapta-lo a sua realidade.
Se não houver nada pronto, manda e-mail pro Claudio “Woo” Sanches #brinks
Construindo sites e sistemas com WordPress
Exemplos de casos
Multiplos loops na página inicial!
Todo mundo sabe que é só usar
query_posts(); Correto?
Construindo sites e sistemas com WordPress
…nãousequery_posts();
AJUDEASFADINHAS...
Construindo sites e sistemas com WordPress
Exemplos de caso
Multiplos loops
Para lidar com multiplos loops na mesma página vamos usar WP_Query();
$args = array (
‘post_type’ => ‘musica’,
‘ posts_per_page’ => 5
);
$musicas = new WP_Query( $args );
Não esquecer de informar o
objeto na hora de criar o loop,
assim $musica->have_posts; e
$musica->the_post();
Não esquecer de resetar no final
do loop, assim:
wp_reset_postdata();
Construindo sites e sistemas com WordPress
Exemplos de casos
Modificando o loop padrão, Preguetinho nele!
function posts_musica( $query ) {
if ( is_post_type_archive( ‘musica’ ) ) {
$query->set( ‘posts_per_page’ => 5 );
}
}
add_action( ‘pre_get_posts’, posts_musica );
Construindo sites e sistemas com WordPress
Exemplo de casos
Construindo sites e sistemas com WordPress
Exemplos de caso
Criando um saiba mais no meio do conteúdo
function saiba_mais( $atts ) {
$atts = shortcode_atts(
array( ‘tipo’ => ‘categoria’ ),
$atts,
‘saiba-mais’
);
return $atts[‘tipo’];
}
add_shortcode( ‘saiba-mais’, ‘saiba_mais’ );
Construindo sites e sistemas com WordPress
#fui
Construindo sites e sistemas com WordPress

Mais conteúdo relacionado

Destaque

Folder B-Society Brasil
Folder B-Society BrasilFolder B-Society Brasil
Folder B-Society BrasilAlex Anunciato
 
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014Ronaldo Porto
 
Historia da Tipografia-parte1
Historia da Tipografia-parte1Historia da Tipografia-parte1
Historia da Tipografia-parte1profclaubordin
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignClaudia Bordin Rodrigues
 
Disciplina de Webdesign - Literacia, Internet e orientações gerais
Disciplina de Webdesign - Literacia, Internet e orientações geraisDisciplina de Webdesign - Literacia, Internet e orientações gerais
Disciplina de Webdesign - Literacia, Internet e orientações geraisprofclaubordin
 
Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...Douglas Benjamim
 
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...Paulo Oliveira
 
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamento
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamentoCRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamento
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamentoCauê de Souza
 
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCauê de Souza
 
Metodologia de Projeto - Ex Libris
Metodologia de Projeto - Ex LibrisMetodologia de Projeto - Ex Libris
Metodologia de Projeto - Ex Librisprofclaubordin
 
CRP- 0420: Comunicação Digital - Aula 6: Projeto Digital
CRP- 0420: Comunicação Digital - Aula 6: Projeto DigitalCRP- 0420: Comunicação Digital - Aula 6: Projeto Digital
CRP- 0420: Comunicação Digital - Aula 6: Projeto DigitalCauê de Souza
 
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2Cauê de Souza
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressLeo Baiano
 

Destaque (20)

Mobile First
Mobile FirstMobile First
Mobile First
 
Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
 
Folder B-Society Brasil
Folder B-Society BrasilFolder B-Society Brasil
Folder B-Society Brasil
 
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014
ESPM // Marketing e Design Digital // PCA 1 - aula 01/04 // Jan 2014
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Historia da Tipografia-parte1
Historia da Tipografia-parte1Historia da Tipografia-parte1
Historia da Tipografia-parte1
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
 
Disciplina de Webdesign - Literacia, Internet e orientações gerais
Disciplina de Webdesign - Literacia, Internet e orientações geraisDisciplina de Webdesign - Literacia, Internet e orientações gerais
Disciplina de Webdesign - Literacia, Internet e orientações gerais
 
Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...
 
Aula CRP-0420-2015-12
Aula CRP-0420-2015-12Aula CRP-0420-2015-12
Aula CRP-0420-2015-12
 
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...
UX - Experiência do Usuário. Concepção e desenvolvimento de produtos digitais...
 
Aula CRP-0420-2015-03
Aula CRP-0420-2015-03Aula CRP-0420-2015-03
Aula CRP-0420-2015-03
 
Usuarios Mobile
Usuarios MobileUsuarios Mobile
Usuarios Mobile
 
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamento
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamentoCRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamento
CRP- 0420: Comunicação Digital - Aula 4: Pós-Moderno, inovação e comportamento
 
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
 
Metodologia de Projeto - Ex Libris
Metodologia de Projeto - Ex LibrisMetodologia de Projeto - Ex Libris
Metodologia de Projeto - Ex Libris
 
CRP- 0420: Comunicação Digital - Aula 6: Projeto Digital
CRP- 0420: Comunicação Digital - Aula 6: Projeto DigitalCRP- 0420: Comunicação Digital - Aula 6: Projeto Digital
CRP- 0420: Comunicação Digital - Aula 6: Projeto Digital
 
Identidade de marca, breve introdução
Identidade de marca, breve introduçãoIdentidade de marca, breve introdução
Identidade de marca, breve introdução
 
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2
CRP- 0420: Comunicação Digital - Aula 1: Contexto - Parte 2
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPress
 

Semelhante a Construindo sites e sistemas com WordPress

Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Anyssa Ferreira
 
Criando Sites Com CMS
Criando Sites Com CMSCriando Sites Com CMS
Criando Sites Com CMSClaudio Toldo
 
Aprendendo a criar plugins para o Wordpress - Richard Barros
Aprendendo a criar plugins para o Wordpress - Richard BarrosAprendendo a criar plugins para o Wordpress - Richard Barros
Aprendendo a criar plugins para o Wordpress - Richard BarrosRichard Barros
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPressGuga Alves
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Valério Souza
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funçõesDaniel Marcos
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 
Quem tem medo do terminal?
Quem tem medo do terminal?Quem tem medo do terminal?
Quem tem medo do terminal?Rafael Funchal
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Guga Alves
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopDiego Sana
 
Minicurso FEAPA - WordPress: Plataforma para criação de sites
Minicurso FEAPA - WordPress: Plataforma para criação de sitesMinicurso FEAPA - WordPress: Plataforma para criação de sites
Minicurso FEAPA - WordPress: Plataforma para criação de sitesJosé Stélio Malcher Jr.
 
10 coisas para fazer logo após instalar o Wordpress
10 coisas para fazer logo após instalar o Wordpress10 coisas para fazer logo após instalar o Wordpress
10 coisas para fazer logo após instalar o WordpressCarlos Barros
 
Oficina de WordPress #fisl14
Oficina de WordPress #fisl14Oficina de WordPress #fisl14
Oficina de WordPress #fisl14Tatiane Pires
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPressThiago Mendes
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
WordPress da instalação à criação de temas personalizados para seu site
WordPress da instalação à criação de temas personalizados para seu siteWordPress da instalação à criação de temas personalizados para seu site
WordPress da instalação à criação de temas personalizados para seu siteFlávio Ricardo B. Meira
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010Guga Alves
 

Semelhante a Construindo sites e sistemas com WordPress (20)

Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
 
Criando Sites Com CMS
Criando Sites Com CMSCriando Sites Com CMS
Criando Sites Com CMS
 
Cake Php
Cake PhpCake Php
Cake Php
 
Aprendendo a criar plugins para o Wordpress - Richard Barros
Aprendendo a criar plugins para o Wordpress - Richard BarrosAprendendo a criar plugins para o Wordpress - Richard Barros
Aprendendo a criar plugins para o Wordpress - Richard Barros
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Curso de WordPress
Curso de WordPressCurso de WordPress
Curso de WordPress
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Quem tem medo do terminal?
Quem tem medo do terminal?Quem tem medo do terminal?
Quem tem medo do terminal?
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
Minicurso FEAPA - WordPress: Plataforma para criação de sites
Minicurso FEAPA - WordPress: Plataforma para criação de sitesMinicurso FEAPA - WordPress: Plataforma para criação de sites
Minicurso FEAPA - WordPress: Plataforma para criação de sites
 
10 coisas para fazer logo após instalar o Wordpress
10 coisas para fazer logo após instalar o Wordpress10 coisas para fazer logo após instalar o Wordpress
10 coisas para fazer logo após instalar o Wordpress
 
Oficina de WordPress #fisl14
Oficina de WordPress #fisl14Oficina de WordPress #fisl14
Oficina de WordPress #fisl14
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
WordPress da instalação à criação de temas personalizados para seu site
WordPress da instalação à criação de temas personalizados para seu siteWordPress da instalação à criação de temas personalizados para seu site
WordPress da instalação à criação de temas personalizados para seu site
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010
 

Construindo sites e sistemas com WordPress

  • 1. Construindo sites e sistemas com WordPress Tema, plugins e como tudo se encaixa.
  • 2. <?php the_title( ‘h1’, ‘h1’ ); ?> Leo Baiano #WebDev para pagar as contas Músico quando estou bêbado Poeta por vocação Romântico de nascença FAZEDOR DE SLIDES nas horas vagas https://profiles.wordpress.org/leobaiano/ https://www.facebook.com/leo.baiano1 E-mail: ljunior2005@gmail.com
  • 3. Planejamento do projeto Se eu tiver 5 dias para cortar uma árvore, passarei 3 deles afiando o machado - Quais plugins vou precisar? - O que é CPT, o que é página, quais taxonomys… - Quais sistemas terei que desenvolver? Construindo sites e sistemas com WordPress
  • 4. Planejamento do projeto Os plugins - ACF (https://wordpress.org/plugins/advanced-custom-fields/) - ACF Repeater (http://www.advancedcustomfields.com/resources/repeater/) - Yoast SEO (https://wordpress.org/plugins/wordpress-seo/) - Plugins de segurança (https://rafaelfunchal.github.io/wordpress-security- checklist/br/items/) Construindo sites e sistemas com WordPress
  • 5. Planejamento do projeto O que é CPT, o que é Página, quais taxonomys… - CPT para áreas que precisam de vários itens (como um blog ou lista de músicas) - Se os itens dessas áreas precisam ser categorizados você cria uma taxonomy - Páginas para areas com conteúdo institucional/ fixo (contato, quem somos…) Construindo sites e sistemas com WordPress
  • 6. Planejamento do projeto Quais sistemas eu terei? Vou desenvolver? Como? Existem plugins para isso? - O site vai precisar de uma área restrita onde os usuários fazem upload de arquivos. - Os usuários podem se adicionar e enviar mensagens um para o outro. - Vai ter enquete. Construindo sites e sistemas com WordPress
  • 7. Eu sou #dev po***, cansei de planejar… Quando vou ver código? Quando vou meter a mão na massa? Construindo sites e sistemas com WordPress
  • 8. A etapa de planejamento e analise do sistema faz parte do trabalho do #dev Construindo sites e sistemas com WordPress
  • 9. Criando um kick starter Kick starter é uma configuração inicial que você utiliza em todos os projetos. Como é o meu kick starter WordPress? - Todos os arquivos do WordPress; - O DUMP de uma base de dados; - Deve ser configurado para trabalhar com multiplos ambientes; - Precisa trazer os plugins essenciais e utilizados em todos os projetos; - Precisa ter a base de um tema WordPress; Construindo sites e sistemas com WordPress
  • 10. Criando um Kick Starter Construindo sites e sistemas com WordPress
  • 11. Criando um kick starter Construindo sites e sistemas com WordPress
  • 12. Criando um kick starter Construindo sites e sistemas com WordPress
  • 13. Criando um kick starter O que são multiplos ambientes e como configurar? Ambientes são os locais onde você vai precisar ter o projeto rodando. - Ambiente de desenvolvimento (development) - Ambiente de homologação (staging) - Ambiente de produção (production) Construindo sites e sistemas com WordPress
  • 14. Criando um kick starter Preparando o projeto para trabalhar com multiplos ambientes Base do meu kick starter: https://github.com/studio24/wordpress-multi-env-config - Cria um diretório env na raiz do WordPress - Coloca os arquivos do repositório no diretório env, exceto o wp-config.php - Substitui o seu wp-config.php pelo wp-config.php do repositório - Incluir os dados de acesso ao banco nos arquivos de cada ambiente Construindo sites e sistemas com WordPress
  • 15. Como criar um kick starter Preparando o projeto para trabalhar com multiplos ambientes Definindo o WP_SITEURL e WP_HOME No arquivo de cada ambiente $url_admin .= '/STARTER_WP/gerenciador'; $url_site .= '/STARTER_WP'; No wp-config.php define('WP_SITEURL', $protocol . rtrim( $hostname . $url_admin ) ); define('WP_HOME', $protocol . rtrim( $hostname . $url_site ) ); Construindo sites e sistemas com WordPress
  • 16. Criando um kick starter Meu tema padrão ASSETS - CSS e JS do bootstrape FUNCTIONS.PHP - Adiciona os suportes do tema - Carrega os arquivos CSS e JS Construindo sites e sistemas com WordPress
  • 17. Criando um kick starter Suportes do tema if ( ! function_exists( 'tema_un_setup_features' ) ) { /** * Setup theme features. * * @return void */ function tema_un_setup_features() { // suportes } } Construindo sites e sistemas com WordPress
  • 18. Criando um kick starter Suportes do tema Definindo a localização dos arquivos de tradução do site: load_theme_textdomain(); Registro o menu: register_nav_menus(); Adiciono suporte a thumbnails: add_theme_support( ‘post-thumbnails’ ); Adiciono suporte a title tag: add_theme_support( ‘title-tag’ ); ………. Construindo sites e sistemas com WordPress
  • 19. Criando um kick starter Carregando arquivos CSS e JS function tema_un_enqueue_scripts() { $template_url = get_template_directory_uri(); wp_enqueue_style( 'tema_un-normalize', get_template_directory_uri() . '/assets/css/normalize.css', array(), null, 'all' ); // jQuery. wp_enqueue_script( 'jquery' ); // General scripts. wp_enqueue_script( 'tema_un-main', $template_url . '/assets/js/main.js?ver=' . md5 (date('i')), array( 'jquery' ), null, true ); wp_localize_script( 'tema_un-main', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); } add_action( 'wp_enqueue_scripts', 'tema_un_enqueue_scripts', 1 ); Construindo sites e sistemas com WordPress
  • 20. Criando um kick starter Trabalhando com ajax No arquivo main.js nós recuperamos a ajax_url que foi passada no functions.php e podemos trabalhar com requisições ajax. var ajax_url = ajax_object.ajax_url; Construindo sites e sistemas com WordPress
  • 21. Criando os CPT’s definidos na etapa de planejamento Meus CPT’s são plugins, porque: - O CPT é ligado ao conteúdo e não ao visual do site; - Se eu mudo de tema não preciso me preocupar em copiar os códigos que criam o CPT do functions.php do tema antigo; - Eu posso reaproveitar os plugins em outros projetos; - E se eu for um bom menino ainda posso colocar no diretório oficial para que outras pessoas possam se beneficiar. Construindo sites e sistemas com WordPress
  • 22. Criando CPT’s definidos na etapa de planejamento Se você tem medo de plugin leia: http://migre.me/sf3G7 Não precisa ter medo de criar plugin, é quase a mesma coisa que inserir o código no functions.php! Construindo sites e sistemas com WordPress
  • 23. Criando CPT’s definidos na estapa de planejamento Quando eu era um mau menino… Criando CPT: register_post_type(); Construindo sites e sistemas com WordPress
  • 24. Quais sistemas terei que desenvolver Antes de desenvolver um sistema verifique se existe algum plugin que você possa utilizar. Se encontrar tal plugin verifique se atende a todas as necessidades do projeto e caso não atenda veja se é muito complexo adapta-lo a sua realidade. Se não houver nada pronto, manda e-mail pro Claudio “Woo” Sanches #brinks Construindo sites e sistemas com WordPress
  • 25. Exemplos de casos Multiplos loops na página inicial! Todo mundo sabe que é só usar query_posts(); Correto? Construindo sites e sistemas com WordPress
  • 27. Exemplos de caso Multiplos loops Para lidar com multiplos loops na mesma página vamos usar WP_Query(); $args = array ( ‘post_type’ => ‘musica’, ‘ posts_per_page’ => 5 ); $musicas = new WP_Query( $args ); Não esquecer de informar o objeto na hora de criar o loop, assim $musica->have_posts; e $musica->the_post(); Não esquecer de resetar no final do loop, assim: wp_reset_postdata(); Construindo sites e sistemas com WordPress
  • 28. Exemplos de casos Modificando o loop padrão, Preguetinho nele! function posts_musica( $query ) { if ( is_post_type_archive( ‘musica’ ) ) { $query->set( ‘posts_per_page’ => 5 ); } } add_action( ‘pre_get_posts’, posts_musica ); Construindo sites e sistemas com WordPress
  • 29. Exemplo de casos Construindo sites e sistemas com WordPress
  • 30. Exemplos de caso Criando um saiba mais no meio do conteúdo function saiba_mais( $atts ) { $atts = shortcode_atts( array( ‘tipo’ => ‘categoria’ ), $atts, ‘saiba-mais’ ); return $atts[‘tipo’]; } add_shortcode( ‘saiba-mais’, ‘saiba_mais’ ); Construindo sites e sistemas com WordPress
  • 31. #fui Construindo sites e sistemas com WordPress