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: You’ll find it easier to read and update your code in the future.
- Para outros: Se partilhar o seu código ou trabalhar em equipa, os outros apreciarão a clareza.
- Para WordPress: Since it’s open-source, many people contribute. Standards keep everything unified.
Aplicação real de normas de codificação no trabalho de equipa
Imagine you’re working on a WordPress project as part of a large team. Everyone contributes different parts of the code—some focus on the backend, others on styling, and others on accessibility. Without consistent standards, the project can become chaotic quickly. Coding standards ensure that:
- Colaboração sem problemas: When everyone follows the same rules, it’s easier for developers to read and understand each other’s work.
- 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 is WordPress’s core language. Following the PHP coding standards ensures that your code integrates smoothly with WordPress and is easy for others to understand.
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.Self-Closing Tags: For HTML5, you don’t need to self-close void elements like <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
Let’s look at an example that combines PHP, HTML, and CSS following WordPress coding standards.
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!