Una guía para principiantes sobre los estándares de codificación de WordPress

La verdadera belleza de WordPress es que es de código abierto . Por eso, puedes contribuir y hacerlo aún más increíble. Sí. Tú. .

Si bien el software de código abierto tiene un lado comercial definido , la filosofía detrás de él es simple: hagamos algo juntos . Si alguna vez ha trabajado con un grupo de cualquier tipo, sabe lo difícil que puede ser hacer que las personas controlen sus egos en la puerta y jueguen bien.

Entonces, Powers That Be escribió los Estándares de codificación de WordPress, una colección de HTML, CSS, JavaScript y PHP. normasdirectrices escritas específicamente para mantener el código fuente tan limpio y funcional como sea posible.

Consíguelo… ¿ funcional ? Es una broma de código.

¿Por qué necesitamos estándares de codificación de WordPress?

Mi estilo de escritura es informal, improvisado y lleno de juegos de palabras. El de mi esposa es sereno, profesional y conciso. El tuyo es… algo completamente diferente y único también. Ninguno de ellos es malo o incorrecto, solo diferente.

Eso se aplica al código también. Mi HTML se verá diferente al tuyo, mi JavaScript puede hacer que tus ojos sangren y tu CSS puede ser hermoso y te cambiará la vida.

A pesar de la sintaxis prescriptiva del código, lo que tú y yo escribimos línea por línea será un poco diferente. Los estándares de codificación de WordPress están ahí para garantizar que todos los que vengan después de usted y contribuyan al código no solo puedan leer y comprender su trabajo, sino que también puedan agregarle el suyo sin problemas.

¿Qué necesitas saber para contribuir?

La primera vez que mira los estándares, pueden parecer bastante restrictivos. Y lo son. Si fueran más indulgentes, no harían su trabajo y el código central de WP sería un desastre.

Pero la documentación es tan completa que no tiene que recordar cada detalle. Simplemente búsquelo todo cuando lo necesite, haciendo referencia a cada sección a medida que analiza y depura su código antes de que su solicitud de extracción final sea aceptada y fusionada.

Si el término solicitud de extracción no le resulta familiar, consulte nuestra guía para principiantes para novatos en git y Github . Definitivamente necesitará estar familiarizado con git porque el código de WordPress vive en Github.

Ejemplos de los estándares de codificación de WordPress

Cada uno de los lenguajes principales que componen WordPress tiene sus propios estándares: PHP , JavaScript , HTML , CSS . Si estás realmente dedicado a la causa, eventualmente puedes contribuir con algo con los cuatro.

Si no está en el punto en el que puede sentir que puede contribuir, también está bien. Mirar y aprender la esencia de los estándares de codificación ahora hará que su vida sea mucho más fácil cuando esté listo.

Ejemplos HTML

¿Alguna vez abrió una página web, revisó el código fuente y luego se encogió de hombros al ver que alguien pensó que escribir ese código era una buena idea?

Yo también.

Es por eso que los estándares HTML están configurados como están. Justo detrás de los propios estándares W3C , estos son los estándares que debe comprometerse con la memoria muscular de sus dedos.

Sangría

Fuera de las llaves, las sangrías son uno de los elementos más cuestionados de la mayoría de los códigos. El Codex de WordPress dice que use pestañas y que debe sangrar su código para que las banderas abiertas y cerradas se alineen. Nota: Me tomó mucho tiempo acostumbrarme a esto, ya que estoy fuertemente en el campamento de ‘usar sangría con dos espacios’. Si tú también lo eres, tienes mis condolencias.

Bien:

01
02
03
04
05
<h1>Hello, World!</h1>
    <div>
        <p>Ahoy, Divi Nation!</p>
    </div>
<h2>Goodbye, World!</h2>

Malo:

01
02
03
04
05
<h1>Hello, World!</h1>
<div>
<p>Ahoy, Divi Nation!</p>
</div>
<h2>Goodbye, World!</h2>

La misma lógica se aplica cuando mezcla banderas de PHP y HTML.

Citas

Usa comillas. No utilices comillas. Doble o simple es su elección, pero úselos a toda costa. Usted ha sido advertido.

Bien:

01
02
03
04
05
<form>
Your Email Address: <br />
<input type='text' name='email'><br />
<input type='submit' value='Submit'>
</form>

O

01
02
03
04
05
<form>
Your Email Address: <br />
<input type='text' name='email'><br />
<input type='submit' value='Submit'>
</form>

Malo:

01
02
03
04
05
<form>
Your Email Address: <br />
<input type=text name=email><br />
<input type=submit value=Submit>
</form>

Entonces… comillas = sí. Sin comillas = malo.

Para conocer el resto de los estándares de codificación HTML, puede ir aquí .

Ejemplos de CSS

Cuando se trata de CSS, la mayoría de los estándares son para la legibilidad. Hay muchas clases e identificadores en WP. Si no tenemos cuidado, estas hojas de estilo pueden convertirse en una auténtica pesadilla.

Estructura

Los estándares de codificación de WordPress dicen que CSS necesita tener cada elemento en su propia línea, desde los selectores de clase e identificación hasta el estilo y las llaves. Además, debe usar nombres específicos para sus elementos que otros puedan seguir.

Bien:

01
02
03
04
05
06
#email-div-about,
#email-div-blog {
    text-align: center;
    display:block;
    margin: auto;
}

Malo:

01
.awesome-emails, .amazing-something { text-align: center; display:block; margin: auto; }

o incluso esto:

01
02
03
04
05
.awesome-emails,#amazing-stuff {
    text-align: center;
    display:block;
    margin: auto;
}

Puede ver que la forma en que WP escribe CSS hace que cada elemento sea más fácil de identificar y diseñar.

Propiedades

Al igual que la estructura y los selectores, las propiedades deben ser lo más concisas y específicas posible. Esto hace que la vida de otros usuarios sea un poco más fácil y también reduce el tamaño total del código, y cuando el repositorio es tan extenso como el WP, cada bit y byte cuenta.

Bien:

01
02
03
04
05
06
#form-submit-btn {
    display: block;
    background: #000;
    color: #fff;
    margin: 20px;
}

Malo:

01
02
03
04
05
06
#bjs-awesome-button {
    background: WHITE;
    color: #FFFFFF;
    border: 35PX;
    Margin-right: 30;
}

El segundo es simplemente feo. Y no en el awww, ese perro es tan feo que es lindo .

Y también hay muchos más estándares CSS para revisar.

Ejemplos de JavaScript

Hay muchos estándares importantes de codificación de JavaScript para WordPress. No son tan difíciles de recordar, o realmente están tan lejos de las mejores prácticas típicas de JS, pero son suficientes para que se familiarice con ellas.

Variables

¿Qué sería de JavaScript sin variables, sabes? No puedes hacer gran cosa sin una buena ole var , y eso es lo que quiero asegurarme de que hagas bien. Al seguir la guía oficial, evitará problemas de alcance extraños que afectan a diferentes partes del repositorio de lo que pretende.

Bien:

01
02
03
var b, j, k, awesome,
    // You should indent with tabs here, too!
    value = ‘Something’;

Malo:

01
02
03
04
var b = true;
var j = false; // since it’s a bad example, here’s a comment done wrong!
var k = b + j;
var awesome = true;

Comentarios

De acuerdo, tal vez los comentarios no sean específicamente una parte del código JavaScript en sí, pero soy un adicto a los comentarios y creo que el código bien documentado es un arte. El equipo de Core ha elaborado algunas pautas excelentes para comentar que me hacen sonreír.

Linea sola:

01
02
03
function bjk();
//Be concise and explain the next line of code
$( ‘beej’ ).beAwesome();

Líneas Múltiples:

01
02
03
04
05
/*
 * Make sure that you keep the asterisks
 * lined up when you put comments on
 * multiple lines. Like this!
 */

En línea:

Estos solo se utilizarán para anotar listas de parámetros.

01
02
03
Function bjk( param1, param2, param7 /* explain why I skipped params 3 to 6 */, param 8 ) {
    // fantastic code goes here
}

Ahora puedes anotar con lo mejor de ellos.

Y mientras lo hace, probablemente debería leer toda la lista de estándares de codificación de WordPress para JavaScript.

Ejemplos de PHP

WordPress es un software PHP. Los desarrolladores y colaboradores están agregando montones de JavaScript en estos días, pero todavía es predominantemente PHP.

Etiquetas PHP

Las etiquetas de apertura y cierre de PHP deben estar en sus propias líneas (nuevamente, para facilitar la lectura), y nunca, jamás, debe abreviarlas . Alguna vez.

Bien:

01
02
03
04
05
<div>
    <?php
        echo ‘Hello, world!’;
    ?>
</div>

O

01
02
03
<div>
    <?php echo ‘Hello, world!’; ?>
</div>

PHP malo:

01
02
03
04
05
<div>
    <?
       echo ‘Hello, world!’;
    ?>
</div>

Convenciones de nombres:

PHP puede hacer mucho. Mucho. Pero también es una especie de desastre. Fue gracias a PHP que descubrí por primera vez el término código de espagueti , y si sigue los estándares de codificación de WordPress, tal vez pueda ayudar a limpiar las cosas nombrando las cosas de la manera correcta.

  • las funciones están en mayúsculas y minúsculas: nombre_función
  • Las clases están en mayúsculas y minúsculas, pero con mayúsculas: Class_Name
  • A menos que la clase sea un acrónimo, entonces es un caso de serpiente en mayúsculas: WP_JS
  • Las constantes también están en mayúsculas, mayúsculas y minúsculas: CONSTANT_NAME
  • los archivos están escritos en minúsculas con guiones: wp-config.php
  • las funciones están en mayúsculas y minúsculas: nombre_función

Esos son los estándares más simples que necesitará aprender para contribuir a la base de código PHP de WordPress. Los demás se encuentran, una vez más, en el códice .

¿Cómo puedes contribuir?

Una vez que esté familiarizado (lo suficiente) con los estándares básicos, es posible que desee leer sobre cómo ingresar realmente a la comunidad de colaboradores.

Probablemente el mejor es make.wordpress.org porque ahí es donde (esperen…) hacen WordPress .

Todo, desde la documentación, el núcleo, el soporte, el diseño y todos los lenguajes de codificación, tienen reuniones de Slack programadas regularmente a las que puede participar de forma libre e inmediata.

Además, hay días y paneles de colaboradores de WordCamp. En WordCamp US 2017 , después de la parte principal de la conferencia, la gente se reunió para sesiones que se prepararon específicamente para que la gente contribuyera. Otros campamentos tendrán ofertas similares. Si está interesado en participar, le sugiero que hable y conozca a algunas de las personas que ya están contribuyendo.

Entre los foros, Slack, los días de contribuyente y la increíble cantidad de documentación disponible en el WP Codex, no debería tener problemas para asegurarse de que su código pueda ganar el Premio al código de WordPress más bonito .

¡Así que sal ahí fuera, codejunkie! Y recuerda, decimos que el código es poesía por una razón.

PD: necesitamos un premio real como ese para entregar: un trofeo o una banda y una tiara o algo para regalar en los WordCamps nacionales por la contribución de código más bonita de ese año. ¡Hagamos que esto suceda, gente!

Miniatura del artículo de Maksim M / shutterstock.com