construindo sites e sistemas com wordpress

Construindo sites e sistemas com WordPress

Tema, plugins e como tudo se encaixa.

<?php the_title( ‘h1’, ‘h1’ ); ?>

Leo Baiano#WebDev para pagar as contasMúsico quando estou bêbadoPoeta por vocaçãoRomântico de nascençaFAZEDOR DE SLIDES nas horas vagas

https://profiles.wordpress.org/leobaiano/https://www.facebook.com/leo.baiano1E-mail: [email protected]

Planejamento do projetoSe 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?


Planejamento do projetoOs 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/)


https://wordpress.org/plugins/advanced-custom-fields/

https://wordpress.org/plugins/wordpress-seo/

Planejamento do projetoO 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…)


Planejamento do projetoQuais 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.


Eu sou #dev po***, cansei de planejar… Quando vou ver

código? Quando vou meter a mão na massa?


A etapa de planejamentoe analise do sistema faz parte do

trabalho do #dev


Criando um kick starterKick 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;


Criando um Kick StarterConstruindo sites e sistemas com WordPress

Criando um kick starterConstruindo sites e sistemas com WordPress

Criando um kick starterO 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)


Criando um kick starterPreparando 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


https://github.com/studio24/wordpress-multi-env-config

Como criar um kick starterPreparando 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 ) );


Criando um kick starterMeu tema padrão

ASSETS

- CSS e JS do bootstrape

FUNCTIONS.PHP

- Adiciona os suportes do tema

- Carrega os arquivos CSS e JS


Criando um kick starterSuportes do tema

if ( ! function_exists( 'tema_un_setup_features' ) ) {

/**

* Setup theme features.

*

* @return void

*/

function tema_un_setup_features() {

// suportes

}

}


Criando um kick starterSuportes 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’ );

……….


Criando um kick starterCarregando 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 );


Criando um kick starterTrabalhando 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;


Criando os CPT’s definidos na etapa de planejamentoMeus 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.


Criando CPT’s definidos na etapa de planejamentoSe 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!


http://migre.me/sf3G7

Criando CPT’s definidos na estapa de planejamentoQuando eu era um mau menino…

Criando CPT: register_post_type();


Quais sistemas terei que desenvolverAntes 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


Exemplos de casosMultiplos loops na página inicial!

Todo mundo sabe que é só usar

query_posts(); Correto?


… não use query_posts();

AJUDE AS FADINHAS...Construindo sites e sistemas com WordPress

Exemplos de casoMultiplos 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();


Exemplos de casosModificando 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 );


Exemplo de casosConstruindo sites e sistemas com WordPress

Exemplos de casoCriando 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’ );


#fuiConstruindo sites e sistemas com WordPress

construindo sites e sistemas com wordpress

Presentations & Public Speaking