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

Boas práticas de programação no WordPress.

WordCamp São Paulo 2013.

Transcript

1. Não é porque funcionou que significa que esta certo! Boas práticas de programação no WordPress
2. 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.
3. E o resultado disso muitas vezes é o CAOS!
4. 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.
5. 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)...
6. O seu código ganha: • Legibilidade • Durabilidade • Compatibilidade • Segurança • Fácil manutenção Com padrões e boas práticas
7. 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.
8. Padrões de Código (Coding Standards)
9. • Indentação com tab (\t) e não com 4 espaços (\s\s\s\s) • Espaçamento para melhorar a legibilidade Regras gerais
10. #az-1, .bd_2 { background:#ffffff; color:#000000 } #x-12 {background:#fff;color:#000} CSS - Errado
11. #comment-form, .comment, .entry-content { background: #fff; color: #000; } CSS - Certo
12. <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
13. <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
14. var map = { ready: 9, 'you are': 15 }; for(i=0;i<100;i++){ ul.append('<li>VT é chato vezes '+i+'</li>'); } JavaScript - Errado
15. var map = { ready: 9, 'you are': 15 }; for( i = 0; i < 100; i++ ){ ul.append( '<li>VT é chato vezes ' + i + '</li>' ); } JavaScript - Certo
16. <?= $var ?> echo "<a href=\"http://wordpress.org/\" >WordPress</a>"; if(condition) functionExample2($param1,$param2); else new classExample($param); PHP - Errado
17. <?php echo $var; ?> echo "<a href=\"$url\">WordPress</a>"; if ( condition ) { function_example_1( $param1, $param2 ); } else { new Class_Example($param); } PHP - Certo
18. Padrões de Projeto (Design Patterns)
19. is_home() is_front_page() is_single() is_page() is_category() is_admin() wp_is_mobile() … Tags Condicionais (Conditional tags)
20. 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)
21. 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
22. 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
23. <?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
24. wp_remote_post( $url, $args ) wp_remote_get( $url, $args ) Argumentos: timeout, headers, body, method e etc. Conexões Remotas
25. sanitize_email() sanitize_text_field() sanitize_title() sanitize_title_with_dashes() esc_html() esc_url() esc_attr() esc_js() … Higienização e validação
26. 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
27. function js_fn() { wp_enqueue_script( 'name', $path . '/js/custom_script.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'js_fn' ); CSS e JavaScript
28. NUNCA USE JQUERY DO GOOGLE! function js_fn() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'js_fn' ); CSS e JavaScript
29. Forma correta de usar jQuery: jQuery( document ).ready( function( $ ) { // agora você pode usar $ aqui! }); (function( $ ) { // $ funciona aqui! })( jQuery ); CSS e JavaScript
30. Exemplos de funções que substituem plugins: wp_trim_words() paginate_links() wp_extract_urls() Funções nativas
31. Toda vez que você ver uma função do WordPress, procure ela no Codex! Esta é a melhor forma de conhecer e dominar o WordPress.
32. Dúvidas?
33. Padrões de código: http://make.wordpress. org/core/handbook/coding-standards/ Links e Referências
34. Funções: http://codex.wordpress.org/Conditional_Tags http://codex.wordpress. org/Plugin_API/Filter_Reference Links e Referências
35. 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
36. 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
37. 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
38. 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
39. 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