Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Não é porque funcionou que significa que esta certo!
Search
Claudio Sanches
November 23, 2013
Programming
8
1.5k
Não é porque funcionou que significa que esta certo!
Boas práticas de programação no WordPress.
WordCamp São Paulo 2013.
Claudio Sanches
November 23, 2013
Tweet
Share
More Decks by Claudio Sanches
See All by Claudio Sanches
Desenvolvimento moderno de plugins para WordPress
claudiosanches
1
64
Aprenda a desenvolver plugins no WordPress
claudiosanches
0
2k
Introdução a tradução do WordPress em português brasileiro
claudiosanches
0
220
WordPress como base de aplicações
claudiosanches
0
160
Trabalhando com a API Rest e Webhooks do WooCommerce
claudiosanches
1
890
E-Commercers com WooCommerce - CPBR8
claudiosanches
2
280
Montando uma plataforma de vendas com WooCommerce
claudiosanches
0
180
WooCommerce como solução para pequenos e grandes e-commerces
claudiosanches
2
220
Aprenda a criar uma loja com o WooCommerce
claudiosanches
7
2.6k
Other Decks in Programming
See All in Programming
エンターテイメント業界で利用されるAWS
demuyan
0
210
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
740
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
750
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
910
Ruby Function Composition
bkuhlmann
1
330
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
PHPはいつから死んでいるかの調査
chiroruxx
1
400
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
310
見た目から始める生産性向上
ikumatadokoro
7
830
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
68
8.6k
Web development in the modern age
philhawksworth
202
10k
Scaling GitHub
holman
457
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Happy Clients
brianwarren
92
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Unsuck your backbone
ammeep
663
57k
Six Lessons from altMBA
skipperchong
21
3k
Code Review Best Practice
trishagee
55
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
What's in a price? How to price your products and services
michaelherold
237
11k
Automating Front-end Workflow
addyosmani
1356
200k
Transcript
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