Las normas de codificación son como las reglas gramaticales de la programación. Al igual que una gramática adecuada hace que el lenguaje escrito sea claro y comprensible, las normas de codificación hacen que su código sea coherente y legible.
- Para usted: You’ll find it easier to read and update your code in the future.
- Para otros: Si comparte su código o trabaja en equipo, los demás apreciarán la claridad.
- Para WordPress: Since it’s open-source, many people contribute. Standards keep everything unified.
Aplicación en el mundo real de las normas de codificación en el trabajo en equipo
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:
- Colaboración fluida: When everyone follows the same rules, it’s easier for developers to read and understand each other’s work.
- Menos conflictos de fusión: Un formato incoherente suele provocar conflictos de código al fusionar los cambios. Las normas minimizan estos conflictos, lo que permite al equipo trabajar con mayor eficacia.
- Mejor incorporación: Los nuevos desarrolladores que se incorporan al proyecto pueden ponerse al día rápidamente siguiendo un estilo de codificación estandarizado, lo que reduce el tiempo dedicado a comprender el código existente.
Considere un escenario en el que un desarrollador abandona el proyecto y un nuevo miembro del equipo debe hacerse cargo de su parte. Si el desarrollador anterior siguió las normas de codificación adecuadas, el último miembro puede incorporarse rápidamente, mantener el código y realizar mejoras sin necesitar mucho tiempo para comprenderlo.
Estándares de codificación PHP de 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: Utilice siempre etiquetas PHP completas <?php
. Evite etiquetas cortas como <? ?>
porque puede que no funcionen en todos los servidores.
<?php
// Your PHP code here
?>
2.Codificación de archivos: Guarde sus archivos PHP en UTF-8 sin marca de orden de bytes (BOM).
3.Finales de línea: Utilice los finales de línea al estilo Unix (\n
).
4.Sangría: Utilice tabuladores para la sangría (no espacios). Esto mantiene el código consistente a través de diferentes editores.
Convenciones de denominación
1.Funciones y métodos: Utilice letras minúsculas y guiones bajos.
function get_user_data( $user_id ) {
// Código de la función
}
2.Variables: Igual que las funciones: minúsculas y guiones bajos.
1TP4Nombre_usuario = 'John Doe';
3.Clases: Utilice palabras en mayúsculas (StudlyCaps).
clase UserProfile {
// Código de clase
}
4.Constantes: Todas las letras mayúsculas con guiones bajos.
define( 'MAX_UPLOAD_SIZE', 1048576 );
Espacios en blanco y sangría
1.Espacios después de las comas: Cuando enumere parámetros o elementos de la matriz, incluya un espacio después de cada coma.
$colors = array( 'rojo', 'verde', 'azul' );
2.Estructuras de control: Coloque un espacio entre las palabras clave de control y el paréntesis de apertura.
if ( $condition ) {
// Código
}
3.Operadores: Incluya espacios alrededor de los operadores de asignación, comparación y lógicos.
$otal = $precio + $impuesto;
if ( $total > 100 ) {
// Código
}
Estructuras de control
1.Colocación de los tirantes: Utilice el estilo Allman, en el que el tirante de apertura está en una nueva línea.
if ( $condition )
{
// Código
}
else
{
// Código
}
2.elseif
** Palabra clave**: Utilice elseif
en lugar de si no
.
if ( $condition )
{
// Código
}
elseif ( 1TP4Otra_condición )
{
// Código
}
3.Condiciones Yoda: Coloque la constante o literal en el lado izquierdo de las comparaciones.
if ( true === $is_active )
{
// Código
}
Esto ayuda a evitar la asignación accidental (=
en lugar de ==
).
Buenas prácticas
1.Evite las etiquetas PHP abreviadas: Utilice siempre etiquetas completas para una mejor compatibilidad.
2.Argumentos de función: Utilice nombres de variables claros y descriptivos.
function calcular_total( $subtotal, $asa_impuesto ) {
// Código
}
3.Sanitize Inputs: Siempre sanee y valide las entradas del usuario.
$user_id = intval( $_GET['user_id'] );
4.Escapar salidas: Antes de dar salida a los datos, escápelos para evitar problemas de seguridad.
echo esc_html( 1TP4Nombre_usuario );
5.Comentarios: Utilice los comentarios para explicar la lógica compleja o las notas importantes.
// Calcular el precio total con impuestos
Normas de documentación en línea
Una documentación adecuada facilita la comprensión y el mantenimiento de su código.
1.Comentarios de las funciones: Antes de cada función, incluya un bloque de comentarios.
/**
* Calcula el precio total, impuestos incluidos.
*
* @param float $subtotal El importe del subtotal.
* @param float $tax_rate El tipo impositivo como decimal.
* @return float El precio total.
*/
function calcular_total( $subtotal, $asa_impuestos ) {
// Código de la función
}
2.Tipos de parámetro y de retorno: Especifique el tipo de cada parámetro y el valor de retorno.
3.Comentarios Inline: Utilícelos con moderación para explicar partes complejas de su código.
$discount = 0.0; // Inicializar la variable de descuento
Normas de codificación HTML en WordPress
El HTML es la columna vertebral del contenido web. Escribir un HTML limpio y semántico es crucial para la accesibilidad y el SEO.
Directrices generales
1.Doctype: Empiece siempre con el doctype HTML5.
<!DOCTYPE html>
2.Atributo de idioma: Especifique el idioma en el <html>
etiqueta.
<html lang="en">
3.Codificación de caracteres: Utilice la codificación UTF-8.
<meta charset="UTF-8">
Estructurar su HTML
1.Elementos semánticos: Utilice elementos semánticos HTML5 como <header>
, ,
<section>
, <article>
, .
2.Sangría: Utilice dos espacios (o tabuladores si lo prefiere) para sangrar los elementos anidados.
- Artículo 1
- Artículo 2
3.Atributos: Utilice minúsculas para los nombres de los atributos y encierre los valores de los atributos entre comillas dobles.
<img src="image.jpg" alt="Una foto impresionante">
Buenas prácticas
1.Accesibilidad: Incluya siempre alt
atributos para las imágenes y utilice roles ARIA cuando proceda.
<img src="logo.png" alt="Logotipo de la 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="Descripción">
3.Comentarios: Utilice comentarios HTML para explicar secciones de su código si es necesario.
Normas de codificación CSS en WordPress
El CSS controla la presentación de su sitio web. Escribir CSS limpio y eficiente hace que su sitio se vea bien y cargue más rápido.
Directrices generales
1.Sintaxis: Siga la sintaxis CSS estándar: selector, llaves, pares propiedad-valor.
.class-selector {
propiedad: valor;
}
2.Sangría: Utilice dos espacios (o tabuladores) para la sangría dentro de las reglas.
3.Comentarios: Utilice los comentarios para separar secciones y explicar reglas complejas.
/* Estilos de cabecera */
cabecera {
/* Propiedades */
}
Escribir CSS limpio
1.Nombres de los selectores: Utilice letras minúsculas y guiones.
.main-navigation {
/* Estilos */
}
2.Evite los ID para el estilo: Utilice clases en lugar de ID para mantener baja la especificidad.
/* Correcto */
.button {
/* Estilos */
}
/* Evitar */
#submit-button {
/* Estilos */
}
3.Propiedades abreviadas: Utilice propiedades abreviadas siempre que sea posible.
/* Correcto */
margen: 10px 5px 15px 0;
/* Ampliado */
margin-top: 10px
margin-right: 5px;
margen-inferior 15px
margen izquierdo: 0;
4.Valores cero: Omita las unidades para los valores cero.
acolchado 0;
Buenas prácticas
1.Organice los estilos: Agrupe estilos relacionados, como el diseño, la tipografía o los colores.
2.Comentarios para las secciones: Utilice comentarios para dividir su hoja de estilo en secciones.
/* Tipografía / / Colores / / Disposición */
3.Evite !importante: Utilice especificidad en lugar de Importante
para anular los estilos.
4.Consultas de medios: Coloque las consultas de medios cerca de los estilos relacionados o en una sección separada.
@media (max-width: 768px) {
.main-navegación {
display: none;
}
}
Herramientas y plugins recomendados
Para asegurarse de que sigue las normas de codificación de WordPress, considere la posibilidad de utilizar las siguientes herramientas:
- PHP CodeSniffer: Esta herramienta puede ayudar a detectar violaciones de las normas de codificación PHP de WordPress. Puede utilizarla con el conjunto de reglas WordPress Coding Standards para comprobar automáticamente su código.
- EditorConfig: Muchos IDE y editores de código admiten archivos .editorconfig, que ayudan a mantener estilos de codificación coherentes entre distintos editores y desarrolladores.
- ESLint y Stylelint: Utilice estas herramientas para pelar JavaScript y CSS para detectar errores comunes y reforzar la coherencia.
- Más bonito: Un formateador de código que puede aplicar automáticamente un estilo coherente para HTML, CSS y JavaScript, facilitando a los equipos el mantenimiento de un estilo de código unificado.
- Extensiones VSCode:
- PHP Intelefense: Proporciona autocompletado inteligente y sugerencias sobre funciones y detecta posibles problemas.
- Fragmentos de WordPress: Una colección de funciones y fragmentos de código de WordPress de uso común para acelerar el desarrollo.
Errores comunes que debe evitar
1.Nombres incoherentes: Mezclar camelCase y snake_case puede llevar a confusión, así que aténgase a las convenciones de nomenclatura prescritas en todo su proyecto.
2.No escapar la salida: Escape siempre el contenido generado por el usuario antes de darle salida para evitar vulnerabilidades de seguridad como XSS.
// Correcto
echo esc_html( $user_input );
// Incorrecto
echo $user_input;
3.Uso inadecuado de globales: Evite utilizar variables globales a menos que sea necesario. En su lugar, pase las variables explícitamente a las funciones para mantener su código modular y más accesible para las pruebas.
4.Uso de estilos en línea: Deben evitarse los estilos en línea, ya que dificultan el mantenimiento y la anulación de CSS. Utilice siempre hojas de estilo externas.
Ponerlo todo junto
Let’s look at an example that combines PHP, HTML, and CSS following WordPress coding standards.
Ejemplo: Una plantilla PHP sencilla
Archivo 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(); ?>
Archivo CSS (style.css
):
/* Estilos de contenido principal */
.site-main {
margin: 0 auto;
max-width: 800px;
relleno: 20px;
}
.entry-header h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
.entry-content {
line-height: 1.6;
}
Recursos adicionales
- Manual para desarrolladores de WordPress: desarrollador.wordpress.org
- Documentación PHP: php.net
- Documentos web de la Red de desarrolladores de Mozilla (MDN):
- Servicio de validación de marcado del W3C: validador.w3.org
- Estándares de codificación de WordPress:
Conclusión
Seguir los estándares de codificación de WordPress garantiza que su código sea limpio, coherente y profesional. Esto le ayuda a mantener sus proyectos y facilita que otros miembros de la comunidad WordPress colaboren con usted.
Recuerde:
- La práctica hace al maestro: Cuanto más codifique siguiendo estas normas, más natural le resultará.
- Manténgase al día: Las normas de codificación evolucionan, así que no pierda de vista la documentación oficial de WordPress.
- Pida ayuda: Si necesita alguna aclaración, la comunidad de WordPress es amable y está dispuesta a ayudarle.
¡Feliz codificación!