Välj en sida

En nybörjarguide till WordPress-kodningsstandarder

av | maj 3, 2022 | Artiklar

Den verkliga skönheten med WordPress är att det är öppen källkod. På grund av det kan du bidra till det och göra det ännu mer fantastiskt. Ja. Du..

Medan det finns en bestämd affärssidan till programvara med öppen källkodfilosofin bakom är enkel: låt oss göra något tillsammans. Om du någonsin har arbetat med en grupp av något slag, vet du hur svårt det kan vara att få folk att kolla sitt egon vid dörren och spela trevligt.

Så Powers That Be skrev upp WordPress Coding Standards, en samling av HTML, CSS, JavaScript och PHP regler riktlinjer skrivna specifikt för att hålla källkoden så ren och funktionell som möjligt.

Förstår…funktionell? Det är ett kodskämt.

Varför behöver vi WordPress-kodningsstandarder?

Min skrivstil är avslappnad, off-the-manschetten och full av ordlekar. Min frus är samlad, professionell och kortfattad. Din är…något helt annat och unikt också. Ingen av dem är dålig eller fel, bara annorlunda.

Det gäller kod också. Min HTML kommer att se annorlunda ut än din, mitt JavaScript kan få dina ögon att blöda och din CSS kan vara livsförändrande vacker.

Trots kodens föreskrivande syntax kommer det du och Vi skriver rad för rad att vara lite olika. WordPress-kodningsstandarderna är till för att se till att alla som kommer efter dig och bidrar till koden inte bara kan läsa och förstå ditt arbete, utan också sömlöst lägga till sina egna till det.

Vad behöver du veta för att bidra?

Första gången du tittar på standarderna kan de verka ganska restriktiva. Och det är de typ. Om de var mer överseende skulle de inte göra sitt jobb, och WP-koden skulle vara en enda röra.

Men dokumentationen är så omfattande att du inte behöver komma ihåg varje detalj. Slå bara upp allt när du behöver det, hänvisa till varje avsnitt när du analyserar och felsöker din kod innan din sista pull-begäran accepteras och slås samman.

Om termen pull begäran är främmande för dig, kolla in vår nybörjarguide för nybörjare i git och Github. Du måste definitivt vara bekant med git eftersom WordPress-koden finns på Github.

Exempel på WordPress-kodningsstandarder

Vart och ett av kärnspråken som utgör WordPress har sina egna standarder: PHP, JavaScript, HTML, CSS. Om du verkligen är dedikerad till saken kan du så småningom bidra med något med dem alla fyra.

Om du inte är vid den punkt där du kan känna att du kan bidra, är det också okej. Att titta på och lära dig kärnan i kodningsstandarderna nu kommer att göra ditt liv mycket enklare när du är redo.

HTML-exempel

Har du någonsin öppnat en webbsida, kollat ​​in källkoden och sedan krystat på hur någon någonsin tyckt att det var en bra idé att skriva den koden?

Vi också.

Det är därför HTML-standarderna är inställda som de är. Precis bakom W3C-standarder själva, det här är de standarder du bör förbinda dig till dina fingrars muskelminne.

Indrag

Utanför klammerparenteser är indrag ett av de mest omtvistade delarna av de flesta koder. De WordPress Codex säger att använda flikar och att du måste dra in din kod så att öppna och stängande flaggor radas upp. Notera: Detta tog mig lång tid att vänja mig vid, eftersom Vi är starkt i lägret ”du indrag med två mellanslag”. Om du också är det, har du mina sympatier.

Bra:

<h1>Hello, World!</h1>
    <div>
        <p>Ahoy, Divi Nation!</p>
    </div>
<h2>Goodbye, World!</h2>

Dålig:

<h1>Hello, World!</h1>
<div>
<p>Ahoy, Divi Nation!</p>
</div>
<h2>Goodbye, World!</h2>

Samma logik gäller när du blandar PHP- och HTML-flaggor.

Citat

Använd citat. Använd inte citattecken. Dubbel eller enkel är ditt val, men använd dem till varje pris. Du har blivit varnad.

Bra:

<form>
Your Email Address: <br />
<input type='text' name='email'><br />
<input type='submit' value='Submit'>
</form>

Eller

<form>
Your Email Address: <br />
<input type='text' name='email'><br />
<input type='submit' value='Submit'>
</form>

Dålig:

<form>
Your Email Address: <br />
<input type=text name=email><br />
<input type=submit value=Submit>
</form>

Så…citat = ja. Inga citattecken = dåligt.

För resten av HTML-kodningsstandarderna, du kan gå hit.

Exempel på CSS

När det kommer till CSS är de flesta av standarderna för läsbarhet. Det är en massa av klasser och id i WP. Om vi ​​inte är försiktiga kan dessa stilmallar förvandlas till en riktig mardröm.

Strukturera

WordPress-kodningsstandarderna säger att CSS måste ha varje enskilt element på sin egen linje, från klass- och id-väljare till själva stylingen och hängslen. Dessutom måste du använda specifika namn för dina element som andra kan följa.

Bra:

#email-div-about,
#email-div-blog {
    text-align: center;
    display:block;
    margin: auto;
}

Dålig:

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

eller till och med detta:

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

Du kan se att det WP-sättet att skriva CSS gör varje element lättare att identifiera och stil.

Egenskaper

Precis som strukturen och väljare måste egenskaperna vara så kortfattade och specifika som möjligt. Detta gör andra användares liv lite enklare, och det minskar också den totala storleken på koden – och när repo är lika expansiv som WP, räknas varje bit och byte.

Bra:

#form-submit-btn {
    display: block;
    background: #000;
    color: #fff;
    margin: 20px;
}

Dålig:

#bjs-awesome-button {
    background: WHITE;
    color: #FFFFFF;
    border: 35PX;
    Margin-right: 30;
}

Den andra är bara ful. Och inte i awww, den hunden är så ful att den är söt typ sätt.

Och det finns massor av fler CSS-standarder att kolla in också.

JavaScript-exempel

Det är en massa av viktigt JavaScript WordPress kodningsstandarder. De är inte så svåra att komma ihåg, eller egentligen så långt ifrån typiska JS bästa praxis, men det finns tillräckligt med att du bör bekanta dig med dem.

Variabler

Vad vore JavaScript utan variabler, vet du? Du kan inte göra mycket av någonting utan bra ole var, och det är vad Vi vill se till att du gör rätt. Genom att följa den officiella guiden kommer du att undvika konstiga omfångsproblem som påverkar olika delar av repan än du menar.

Bra:

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

Dålig:

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;

Kommentarer

Okej, så kanske kommentarer inte är specifikt en del av själva JavaScript-koden, men Vi är en kommentarsjunkie och tycker att väldokumenterad kod är en konst. Kärnteamet har satt ihop några bra riktlinjer för kommentarer som får mig att le.

En kö:

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

Flera rader:

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

I kö:

Dessa kommer endast att användas för att kommentera parameterlistor.

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

Nu kan du kommentera med de bästa av dem.

Och medan du håller på bör du nog läsa igenom hela listan av WordPress-kodningsstandarder för JavaScript.

PHP exempel

WordPress är PHP-programvara. Utvecklare och bidragsgivare lägger till massor av JavaScript där i dessa dagar, men det är fortfarande huvudsakligen PHP.

PHP-taggar

Öppna och stänga PHP-taggar bör vara på sina egna rader (igen, för läsbarhet), och du bör aldrig, aldrig, aldrig stenografi dem. Någonsin.

Bra:

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

Eller

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

Dålig PHP:

<div>
    <?
       echo ‘Hello, world!’;
    ?>
</div>

Namnkonventioner:

PHP kan göra så mycket. Så mycket. Men det är också en slags röra. Det var på grund av PHP som Vi först upptäckte termen spagettikodoch om du följer WordPress-kodningsstandarderna kanske du kan hjälpa till att städa upp saker genom att namnge saker på rätt sätt.

  • funktioner är i ormfodral: funktionsnamn
  • Klasserna är i ormfall, men med versaler: Klassnamn
  • Såvida klassen inte är en förkortning, är det ormfodral med alla kepsar: WP_JS
  • Konstanter finns också i all-caps, ormfodral: CONSTANT_NAME
  • filer skrivs med små bokstäver med bindestreck: wp-config.php
  • funktioner är i ormfodral: funktionsnamn

Det är de enklaste standarderna du behöver lära dig för att bidra till WordPress PHP-kodbas. De andra är återigen, finns i codexen.

Hur kan du bidra?

När du väl är bekant (tillräckligt) med grundstandarderna kanske du vill läsa om hur du faktiskt kommer in i bidragsgivarnas community.

Det bästa är förmodligen make.wordpress.org för det är där de (väntar på det…) göra WordPress.

Allt från dokumentation, core, support, till design, till alla kodningsspråk har regelbundet schemalagda Slack-möten som du kan hoppa in i fritt och omedelbart.

Dessutom finns det WordCamp-bidragsdagar och paneler. På WordCamp USA 2017, efter huvuddelen av konferensen, samlades folk för sessioner som var speciellt sammansatta för att människor skulle kunna bidra. Andra läger kommer att ha liknande erbjudanden. Om du är intresserad av att engagera dig rekommenderar Vi starkt att du pratar med och träffar några av de personer som redan bidrar.

Mellan forum, Slack, bidragsdagar och den otroliga mängden dokumentation som finns tillgänglig i WP Codex, bör du inte ha några problem med att se till att din kod kan vinna Snyggaste WordPress Code Award.

Så gå ut, kodjunkie! Och kom ihåg, säger vi kod är poesi av en anledning.

Artikelminiatyr av Maksim M / shutterstock.com