Compreender a importância das normas de codificação
As normas de codificação são como as regras gramaticais da programação. Tal como a gramática correta torna a linguagem escrita clara e compreensível, as normas de codificação tornam o seu código consistente e legível.
- Para si: Será mais fácil ler e atualizar o seu código no futuro.
- Para outros: Se partilhar o seu código ou trabalhar em equipa, os outros apreciarão a clareza.
- Para WordPress: Uma vez que é de código aberto, muitas pessoas contribuem. Os padrões mantêm tudo unificado.
Aplicação real de normas de codificação no trabalho de equipa
Imagine que está a trabalhar num projeto WordPress como parte de uma grande equipa. Todos contribuem com diferentes partes do código - alguns concentram-se no backend, outros no estilo e outros na acessibilidade. Sem normas consistentes, o projeto pode tornar-se caótico rapidamente. Os padrões de codificação garantem isso:
- Colaboração sem problemas: Quando todos seguem as mesmas regras, é mais fácil para os programadores lerem e compreenderem o trabalho uns dos outros.
- Menos conflitos de fusão: A formatação inconsistente conduz frequentemente a conflitos de código aquando da fusão de alterações. As normas minimizam estes conflitos, permitindo que a equipa trabalhe de forma mais eficiente.
- Melhor integração: Os novos programadores que se juntam ao projeto podem rapidamente ganhar velocidade seguindo um estilo de codificação normalizado, reduzindo o tempo gasto na compreensão do código existente.
Considere um cenário em que um programador deixa o projeto e um novo membro da equipa tem de assumir a sua parte. Se o programador anterior seguiu os padrões de codificação adequados, o membro mais recente pode entrar rapidamente no projeto, manter o código e fazer melhorias sem precisar de muito tempo para o compreender.
Padrões de codificação PHP do WordPress
PHP é a linguagem principal do WordPress. Seguir as normas de codificação PHP garante que o seu código se integra sem problemas no WordPress e é fácil de compreender.
1. etiquetas PHP: Utilize sempre etiquetas PHP completas <?php ?>
. Evite etiquetas curtas como <? ?>
porque podem não funcionar em todos os servidores.
<?php
// Your PHP code here
?>
2.Codificação de ficheiros: Guarde os seus ficheiros PHP em UTF-8 sem uma marca de ordem de bytes (BOM).
3. terminações de linha: Utilize os finais de linha ao estilo Unix (\n
).
4) Indentação: Utilize tabulações para a indentação (e não espaços). Isto mantém o código consistente em diferentes editores.
Convenções de nomenclatura
1.Funções e Métodos: Utilize letras minúsculas e sublinhados.
função get_user_data( $user_id ) {
// Código da função
}
2.variáveis: O mesmo que as funções - minúsculas e sublinhados.
$user_name = "John Doe";
3.Classes: Utilize palavras em maiúsculas (StudlyCaps).
classe UserProfile {
// Código de classe
}
4.Constantes: Todas as letras maiúsculas com sublinhados.
defina( 'MAX_UPLOAD_SIZE', 1048576 );
Espaços em branco e indentação
1.Espaços após vírgulas: Ao listar parâmetros ou itens de matriz, inclua um espaço após cada vírgula.
$colors = array( 'red', 'green', 'blue' );
2. estruturas de controlo: Coloque um espaço entre as palavras-chave de controlo e o parêntese de abertura.
se ( $condition ) {
// Código
}
3.Operadores: Inclua espaços à volta dos operadores de atribuição, comparação e lógicos.
$total = $price + $tax;
se ( $total > 100 ) {
// Código
}
Estruturas de controlo
1.Colocação das braçadeiras: Utilize o estilo Allman, em que o travessão de abertura está numa nova linha.
se ( $condição )
{
// Código
}
senão
{
// Código
}
2.senão se
** Palavra-chave**: Utilizar senão se
em vez de senão se
.
se ( $condição )
{
// Código
}
elseif ( $other_condition )
{
// Código
}
3.Condições Yoda: Coloque a constante ou literal no lado esquerdo das comparações.
se ( true === $is_active )
{
// Código
}
Isto ajuda a evitar uma atribuição acidental (=
em vez de ==
).
Melhores práticas
1.Evite as etiquetas PHP abreviadas: Utilize sempre etiquetas completas para uma melhor compatibilidade.
2.Argumentos de função: Utilize nomes de variáveis claros e descritivos.
função calculate_total( $subtotal, $tax_rate ) {
// Código
}
3.higienize as entradas: Limpe e valide sempre as entradas do utilizador.
$user_id = intval( $_GET['user_id'] );
4.Escape as saídas: Antes de emitir dados, escape-os para evitar problemas de segurança.
echo esc_html( $user_name );
5.Comentários: Utilize comentários para explicar lógicas complexas ou notas importantes.
// Calcule o preço total com impostos
Normas de documentação em linha
Uma documentação adequada torna o seu código mais fácil de compreender e manter.
1. comentários de funções: Antes de cada função, inclua um bloco de comentários.
/**
* Calcula o preço total incluindo impostos.
*
* @param float $subtotal O montante subtotal.
* @param float $tax_rate A taxa de imposto como um decimal.
* @return float O preço total.
*/
function calculate_total( $subtotal, $tax_rate ) {
// Código da função
}
2.Tipos de parâmetros e de retorno: Especifique o tipo de cada parâmetro e o valor de retorno.
3.Comentários em linha: Utilize-os com moderação para explicar partes complexas do seu código.
$discount = 0.0; // Inicializar a variável de desconto
Padrões de codificação HTML no WordPress
O HTML é a espinha dorsal do conteúdo da Web. Escrever HTML limpo e semântico é crucial para a acessibilidade e SEO.
Orientações gerais
1.Doctype: Comece sempre com o doctype HTML5.
<!DOCTYPE html>
2. atributo Idioma: Especifique o idioma no atributo <html>
etiqueta.
<html lang="en">
3.Codificação de caracteres: Utilize a codificação UTF-8.
<meta charset="UTF-8">
Estruturação do seu HTML
1. elementos semânticos: Utilize elementos semânticos HTML5 como <header>
, ,
<section>
, <article>
, .
2) Indentação: Utilize dois espaços (ou tabulações, se preferir) para indentação de elementos aninhados.
- Item 1
- Item 2
3.Atributos: Utilize minúsculas nos nomes dos atributos e coloque os valores dos atributos entre aspas duplas.
<img src="image.jpg" alt="Uma imagem espetacular">
Melhores práticas
1.acessibilidade: Inclua sempre alt
para as imagens e utilize as funções ARIA quando apropriado.
<img src="logo.png" alt="Logótipo da empresa">
2. etiquetas de fecho automático: Para HTML5, não precisa de fechar automaticamente elementos vazios como <br>
, <img>
, <input>
.
<br>
<img src="image.jpg" alt="Descrição">
3.Comentários: Utilize comentários HTML para explicar secções do seu código, se necessário.
Padrões de codificação CSS no WordPress
As CSS controlam a apresentação do seu sítio Web. Escrever um CSS limpo e eficiente faz com que o seu site tenha bom aspeto e carregue mais depressa.
Orientações gerais
1.Sintaxe: Siga a sintaxe CSS padrão - seletor, parênteses, pares propriedade-valor.
.class-seletor {
propriedade: valor;
}
2) Indentação: Utilize dois espaços (ou tabulações) para a indentação dentro das regras.
3.Comentários: Utilize comentários para separar secções e explicar regras complexas.
/* Estilos de cabeçalho */
cabeçalho {
/* Propriedades */
}
Escrever CSS limpo
1. nomes de selectores: Utilize letras minúsculas e hífenes.
.main-navigation {
/* Estilos */
}
2 - Evite IDs para o estilo: Utilize classes em vez de IDs para manter a especificidade baixa.
/* Correto */
.botão {
/* Estilos */
}
/* Evite */
#submit-button {
/* Estilos */
}
3.Propriedades abreviadas: Utilize propriedades abreviadas sempre que possível.
/* Correto */
margem: 10px 5px 15px 0;
/* Expandido */
margem superior: 10px;
margem-direita: 5px;
margin-bottom: 15px;
margem-esquerda: 0;
4.Valores zero: Omita as unidades para valores zero.
padding: 0;
Melhores práticas
1. Organize os estilos: Agrupe estilos relacionados, tais como layout, tipografia, cores.
2.Comentários para secções: Utilize comentários para dividir a sua folha de estilos em secções.
/* Tipografia / / Cores / / Layout */
3.Evite !important: Utilize a especificidade em vez de !importante
para substituir estilos.
4.Consultas multimédia: Coloque as consultas multimédia junto dos estilos relacionados ou numa secção separada.
@media (max-width: 768px) {
.navegação-principal {
exibir: nenhum;
}
}
Ferramentas e plug-ins recomendados
Para ajudar a garantir que está a seguir as normas de codificação do WordPress, considere utilizar as seguintes ferramentas:
- PHP CodeSniffer: Esta ferramenta pode ajudar a detetar violações das normas de codificação PHP do WordPress. Pode utilizá-la com o conjunto de regras Padrões de Codificação do WordPress para verificar automaticamente o seu código.
- EditorConfig: Muitos IDEs e editores de código suportam ficheiros .editorconfig, que ajudam a manter estilos de codificação consistentes entre diferentes editores e programadores.
- ESLint e Stylelint: Utilize estas ferramentas para fazer o lint do JavaScript e do CSS para detetar erros comuns e reforçar a consistência.
- Mais bonita: Um formatador de código que pode impor automaticamente um estilo consistente para HTML, CSS e JavaScript, facilitando às equipas a manutenção de um estilo de código unificado.
- Extensões VSCode:
- PHP Intelephense: Fornece um preenchimento automático inteligente e sugestões de funções e detecta potenciais problemas.
- Snippets do WordPress: Uma coleção de funções e snippets do WordPress frequentemente utilizados para acelerar o desenvolvimento.
Erros comuns a evitar
1. nomeação inconsistente: Misturar camelCase e snake_case pode levar a confusão, por isso siga as convenções de nomenclatura prescritas em todo o seu projeto.
2.Não escapar da saída: Escape sempre o conteúdo gerado pelo utilizador antes de o enviar para evitar vulnerabilidades de segurança como XSS.
// Correto
echo esc_html( $user_input );
// Incorreto
echo $user_input;
3. utilização incorrecta de globais: Evite utilizar variáveis globais, exceto se necessário. Em vez disso, passe variáveis explicitamente para funções para manter o seu código modular e mais acessível para testes.
4.Utilizar estilos em linha: Os estilos em linha devem ser evitados, uma vez que dificultam a manutenção e a substituição de CSS. Utilize sempre folhas de estilo externas.
Colocar tudo junto
Vejamos um exemplo que combina PHP, HTML e CSS seguindo os padrões de codificação do WordPress.
Exemplo: Um modelo PHP simples
Ficheiro PHP (template-example.php):
<?php
/**
* Template Name: Example Template
*
* A template to demonstrate coding standards.
*
* @package WordPress
* @subpackage Your_Theme
*/
get_header(); ?>
<main id="main-content" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
<header class="entry-header">
<?php the_title( '<h1>', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile;
else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'your-text-domain' ); ?></p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
Ficheiro CSS (style.css
):
/* Estilos do conteúdo principal */
.site-main {
margem: 0 auto;
largura máxima: 800px;
padding: 20px;
}
.entry-header h1 {
tamanho da fonte: 2em;
margin-bottom: 0.5em;
}
.entry-content {
altura da linha: 1,6;
}
Recursos adicionais
- Manual do programador WordPress: developer.wordpress.org
- Documentação PHP: php.net
- Documentos Web da Rede de Desenvolvedores Mozilla (MDN):
- Serviço de validação de marcação W3C: validador.w3.org
- Padrões de codificação do WordPress:
Conclusão
Seguir os padrões de codificação do WordPress garante que o seu código seja limpo, consistente e profissional. Isto ajuda-o a manter os seus projectos e facilita a colaboração com outros membros da comunidade WordPress.
Lembre-se:
- A prática leva à perfeição: Quanto mais codificar seguindo estas normas, mais natural se tornará.
- Mantenha-se atualizado: Os padrões de codificação evoluem, portanto, fique de olho na documentação oficial do WordPress.
- Peça ajuda: Se precisar de esclarecimentos, a comunidade WordPress é simpática e está disposta a ajudar.
Boa codificação!
Respostas