Não é porque funcionou que significa que esta certo!

Não é porque funcionou que significa que esta certo! Boas
práticas de programação no WordPress

Atualmente temos mais 28 mil plugins e 2 mil temas
no repositório oficial do WordPress. Somando com plugins e temas pagos, projetos pessoais, snippets e etc, chegamos em um número incontável de linhas de código escritos por diversas pessoas ao redor do mundo.

E o resultado disso muitas vezes é o CAOS!

Este CAOS existe porque não basta apenas saber programar em
PHP e JavaScript para trabalhar com WordPress. É necessário conhecer o WordPress, os seus padrões de código e boas práticas de desenvolvimento.

Não importa se você desenvolve projetos Open Source ou não!
Um dia você vai precisar dar manutenção no projeto ou morrer (e ai alguém vai assumir o filho no lugar)...

O seu código ganha: • Legibilidade • Durabilidade • Compatibilidade
• Segurança • Fácil manutenção Com padrões e boas práticas

O WordPress tem o seu próprio padrão de código que
esta documentado em "Make WordPress Core Handbook". Os padrões estão dividos em 4 partes, sendo elas CSS, HTML, JavaScript e PHP.

Padrões de Código (Coding Standards)

• Indentação com tab (\t) e não com 4 espaços
(\s\s\s\s) • Espaçamento para melhorar a legibilidade Regras gerais

#az-1, .bd_2 { background:#ffffff; color:#000000 } #x-12 {background:#fff;color:#000} CSS -
Errado

#comment-form, .comment, .entry-content { background: #fff; color: #000; } CSS
- Certo

<input TYPE=text name=email disabled> <BR/> <?php if ( ! have_posts()
) : ?> <div id="post-1" class="post"> <H1 CLASS="entry-title">Oi Mundo!</H1> </div> <?php endif; ?> HTML - Errado

<input type="text" name="email" disabled=" disabled"> <br /> <?php if (
! have_posts() ) : ?> <div id="post-1" class="post"> <h1 class="entry-title">Oi Mundo!</h1> </div> <?php endif; ?> HTML - Certo

var map = { ready: 9, 'you are': 15 };
for(i=0;i<100;i++){ ul.append('<li>VT é chato vezes '+i+'</li>'); } JavaScript - Errado

var map = { ready: 9, 'you are': 15 };
for( i = 0; i < 100; i++ ){ ul.append( '<li>VT é chato vezes ' + i + '</li>' ); } JavaScript - Certo

<?= $var ?> echo "<a href=\"http://wordpress.org/\" >WordPress</a>"; if(condition) functionExample2($param1,$param2); else
new classExample($param); PHP - Errado

<?php echo $var; ?> echo "<a href=\"$url\">WordPress</a>"; if ( condition
) { function_example_1( $param1, $param2 ); } else { new Class_Example($param); } PHP - Certo

Padrões de Projeto (Design Patterns)

is_home() is_front_page() is_single() is_page() is_category() is_admin() wp_is_mobile() … Tags Condicionais
(Conditional tags)

add_filter( 'the_content', 'example' ) apply_filters( 'your_filter', $param1, $param2, $param3, $etc...
) add_action( 'publish_post', 'example' ) do_action( 'your_action', [$params...] ) Filtros e Ganchos (filters and actions)

NÃO USE query_posts()! Loops principais devem ser alterados pelo gancho
pre_get_posts. E os secundários devem ser feitos usando WP_Query. Query/Loop de posts

function exclude_category( $query ) { if ( $query->is_home() && $query-
>is_main_query() ) { $query->set( 'cat', '-1,-1347' ); } } add_action( 'pre_get_posts', 'exclude_category' ); Query/Loop de posts

<?php $the_query = new WP_Query( $args ); ?> <?php if
( $the_query->have_posts() ) : ?> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> Query/Loop de posts

wp_remote_post( $url, $args ) wp_remote_get( $url, $args ) Argumentos: timeout,
headers, body, method e etc. Conexões Remotas

sanitize_email() sanitize_text_field() sanitize_title() sanitize_title_with_dashes() esc_html() esc_url() esc_attr() esc_js() … Higienização
e validação

NUNCA adicione CSS e Javascript direto do <head> do seu
tema. Todo script deve ser registrado no functions.php usando as funções: wp_enqueue_script() e wp_enqueue_style() CSS e JavaScript

function js_fn() { wp_enqueue_script( 'name', $path . '/js/custom_script.js', array( 'jquery'
) ); } add_action( 'wp_enqueue_scripts', 'js_fn' ); CSS e JavaScript

NUNCA USE JQUERY DO GOOGLE! function js_fn() { wp_enqueue_script( 'jquery'
); } add_action( 'wp_enqueue_scripts', 'js_fn' ); CSS e JavaScript

Forma correta de usar jQuery: jQuery( document ).ready( function( $
) { // agora você pode usar $ aqui! }); (function( $ ) { // $ funciona aqui! })( jQuery ); CSS e JavaScript

Exemplos de funções que substituem plugins: wp_trim_words() paginate_links() wp_extract_urls() Funções
nativas

Toda vez que você ver uma função do WordPress, procure
ela no Codex! Esta é a melhor forma de conhecer e dominar o WordPress.

Dúvidas?

Padrões de código: http://make.wordpress. org/core/handbook/coding-standards/ Links e Referências

Funções: http://codex.wordpress.org/Conditional_Tags http://codex.wordpress. org/Plugin_API/Filter_Reference Links e Referências

http://codex.wordpress. org/Plugin_API/Action_Reference http://codex.wordpress. org/Function_Reference/query_posts http://codex.wordpress. org/Plugin_API/Action_Reference/pre_get_post s Links e Referências

http://codex.wordpress. org/Class_Reference/WP_Query http://codex.wordpress. org/Function_Reference/wp_remote_post http://codex.wordpress. org/Function_Reference/wp_remote_get Links e Referências

http://codex.wordpress. org/Validating_Sanitizing_and_Escaping_User_ Data http://codex.wordpress. org/Function_Reference/wp_enqueue_script http://codex.wordpress. org/Function_Reference/wp_enqueue_style Links e Referências

http://codex.wordpress. org/Function_Reference/wp_trim_words http://codex.wordpress. org/Function_Reference/paginate_links http://queryposts. com/function/wp_extract_urls/ Links e Referências

Este documento esta licenciado com GPLv2. É possível encontrar uma
copia da licença no seguinte link: http://www.gnu.org/licenses/gpl-2.0.txt Licença

Não é porque funcionou que significa que esta c...

Não é porque funcionou que significa que esta certo!

More Decks by Claudio Sanches

Other Decks in Programming

Featured

Transcript