Kodierungsstandards in der WordPress-Entwicklung sind entscheidend für eine robuste und nachhaltige Codebasis. Sie dienen als Richtlinien und Konventionen, an die sich Entwickler/innen beim Schreiben von Code halten, und tragen dazu bei, die Zusammenarbeit zu verbessern, die Wartung zu optimieren und die allgemeine Zuverlässigkeit zu gewährleisten.

Außerdem schützen Kodierungsstandards vor häufigen Fallstricken und Fehlern und verbessern die Codequalität. Bei der WordPress-Entwicklung, wo oft mehrere Personen an einem Projekt mitarbeiten, unterstützen Kodierungsstandards die effektive Teamarbeit. Sie erleichtern die Kommunikation, entschärfen mögliche Konflikte und tragen zu einem effizienteren Entwicklungsprozess bei.

Die Einhaltung von Kodierungsstandards fördert die Konsistenz zwischen verschiedenen Projekten und macht es dir leichter, nahtlos zwischen verschiedenen Codebasen zu wechseln. Diese Konsistenz wirkt sich auch auf die Lesbarkeit und Wartbarkeit des Codes aus und fördert das gemeinsame Verständnis der Teammitglieder.

Die offiziellen WordPress-Kodierungsstandards decken fünf Schlüsselbereiche für einen kohärenten und effizienten Entwicklungsprozess ab:

  • PHP zur Gewährleistung der Konsistenz des serverseitigen Codes
  • HTML zur Förderung von strukturiertem und semantischem Markup
  • JavaScript für eine effektive clientseitige Funktionalität
  • CSS für ein konsistentes Styling
  • Barrierefreiheit, um sicherzustellen, dass das Endprodukt für Menschen mit unterschiedlichen Bedürfnissen zugänglich und benutzerfreundlich ist.

In diesem Artikel gehen wir auf diese Standards ein, um dir zu helfen, konforme Websites zu erstellen und vielleicht einen Beitrag zur WordPress-Entwicklergemeinschaft zu leisten.

PHP-Standards in der WordPress-Entwicklung

WordPress-spezifische PHP-Kodierungsstandards sorgen für Konsistenz und Lesbarkeit im WordPress-Code. Sie sind für WordPress Core obligatorisch und werden für Themes und Plugins dringend empfohlen. Diese Standards decken verschiedene Aspekte ab, z. B. Namenskonventionen, Einrückung und Codestruktur, um die Lesbarkeit zu verbessern und die Zusammenarbeit zu erleichtern.

Die WordPress PHP-Standards umfassen die folgenden Kategorien:

  • Allgemein – Zu diesen Standards gehört, dass die öffnenden und schließenden PHP-Tags in eine eigene Zeile gesetzt werden, wenn ein mehrzeiliger PHP-Snippet in einen HTML-Block eingebettet wird, dass die Verwendung von einfachen und doppelten Anführungszeichen vermieden wird und dass es Richtlinien für das Schreiben von include und require Anweisungen gibt:
// Opening and closing PHP tags within HTML:
// Put open/close tags on their own lines.

## DO
function foo() {
  ?>
  <div>
    <?php
    echo esc_html (
      bar (
        $param1,
        $param2
      )
    );
    ?>
  </div>
  <?php
}

## DON'T
if ( $x === $y ) { ?>
  <div>
    
  <?php }
// Avoid shorthand PHP tags

## DO
<?php ... ?>
<?php esc_html( $x ); ?>

## DON'T
<? ... ?>
<? esc_html( $x ); ?>

// Writing include/require statements:
// Avoid include_once as it continues execution 
// even if the file is not found. 
// Do not use brackets around the file path.

## DO
require_once ABSPATH . 'file-name.php'

## DON'T
require_once  __DIR__ . '/file-name.php'
include_once  ( ABSPATH . 'file-name.php' );
  • Benennung – Zu den Standards für die Benennung gehören Namenskonventionen und Interpolation für die Benennung von dynamischen Hooks:
## DO
// Use lowercase letters for function and variable names.
function my_function( $some_variable ) {}

// Use uppercase letters for constant names.
define('MAX_AGE', 60);

## DON'T
// Use camelCase.
function myFunction( $someVariable ) {}
  • Leerzeichen – Die Leerzeichen-Standards legen Richtlinien für die Verwendung von Leerzeichen, die Einrückung und das Entfernen von Leerzeichen am Ende fest. (Wenn du eine enthusiastische Debatte unter Entwicklern entfachen willst, frag sie einfach, ob sie Tabulatoren oder Leerzeichen für die Einrückung von Code bevorzugen. Was auch immer du bevorzugst, die offizielle Empfehlung für WordPress-Entwickler/innen sind Tabulatoren – und das gilt nicht nur für PHP, sondern auch für JavaScript und CSS. Behalte das also im Hinterkopf, wenn du an gemeinsamen Projekten arbeitest.)
## DO
// Put spaces after commas.
$colors = ['red', 'green', 'blue']

// Put spaces on both sides of the opening and 
// closing brackets of control structures. 
foreach( $foo as $bar ) { ...

// Defining a function:
function my_function() { ...

// Logical comparisons:
if ( ! $foo ) { ...

// Accessing array items:
$a = $foo['bar']
$a = $foo[ $bar ]

## DON'T
$colors = ['red','green','blue']
foreach($foo as $bar){ ...
function my_function(){ ...
if (!$foo) { ...
$a = $foo[ ‘bar’ ]
$a = $foo[$bar]
  • Formatierung – Zu den Formatierungsstandards für die WordPress-PHP-Entwicklung gehören Klammerstile, Array-Deklarationen, Richtlinien für mehrzeilige Funktionsaufrufe, Typ-Deklarationen, magische Konstanten und der Spread-Operator:
// DO
// Use the following brace style.
if ( condition ) {
    action();
} elseif ( condition2 ) {
    action2();
} else {
    default_action();
}

// Declare arrays using the long syntax.
$numbers_long = array(1, 2, 3, 4, 5);
/* In multi-line function calls, each parameter should only take up one line.
Multi-line parameter values should be assigned a variable, and the variable passed to the function call. */
$data = array(
    'user_name' => 'John Doe',
    'email'     => '[email protected]',
    'address'   => '123 Main Street, Cityville',
);
$greeting_message = sprintf(
    /* translation function. %s maps to User's name */
    __( 'Hello, %s!', 'yourtextdomain' ),
    $data['user_name']
);
$result = some_function (
    $data,
    $greeting_message,
    /* translation function %s maps to city name*/
    sprintf( __( 'User resides in %s.' ), 'Cityville' )
);

// Magic constants should be uppercase.
// The ::class constant should be lowercase with no spaces around the scope resolution operator (::).
add_action( my_action, array( __CLASS__, my_method ) );
add_action( my_action, array( My_Class::class, my_method ) );

/* Add a space or new line with appropriate
   indentation before a spread operator.

   There should be:

   * No space between the spread operator and the 
     variable/function it applies to.

   * No space between the spread and the reference 
     operators when combined.
*/

//DO
function some_func( &...$arg1 ) {
    bar( ...$arg2 );
    bar(
        array( ...$arg3 ),
        ...array_values( $array_vals )
    );
}

//DONT
function some_func( &   ...  $arg1 ) {
    bar(...
        $arg2 );
    bar(
        array( ...$arg3 ),...array_values( $array_vals )
    );
}
  • Deklarationsanweisungen, Namespace- und Importanweisungen – Diese Kodierungsstandards behandeln Namespace-Deklarationen und use Anweisungen:
// Each namespace declaration should contain 
// capitalized words separated by underscores.
namespace My_CompanyProjectKinsta_ProjectUtilities;

// Import use statements can use aliases 
// to prevent name collisions.
use Project_NameFeatureClass_C as Aliased_Class_C;
  • Objektorientierte Programmierung (OOP) – Diese Standards beinhalten die Verwendung von nur einer Objektstruktur pro Datei, Richtlinien für die Verwendung von use Anweisungen, die Sicherstellung, dass die Sichtbarkeit immer deklariert wird, die Reihenfolge von Sichtbarkeit und Modifikator und einen Überblick über die Regeln für die Objektinstanziierung:
// Trait use statements should be at the top of a class.
// Trait use should have at least one line before and after
// the first and last statements.
// Always declare visibility.
class Foo {
    use Bar_Trait;
    public $baz = true;
    ...
}

// Always use parentheses when instantiating a new 
// object instance.
// Don't add space between a class name and the opening bracket.
$foo = new Foo();
    • Kontrollstrukturen – Kontrollstrukturen beinhalten die Verwendung von elseif, nicht else if, und Richtlinien für Yoda-Bedingungen.Yoda-Anweisungen: Wenn du Variablen mit Konstanten, Literalen oder Funktionsaufrufen in logischen Vergleichen mischst, platziere die Variable rechts, um eine versehentliche Zuweisung zu verhindern, wie unten gezeigt:
// A "legal" comparison:
if ( true === $result ) {
    // Do something with $result
}

// But a typo like this could get past you:
if ( $result = true ) {
    // We will always end up here
}
  • Operatoren – Diese Standards behandeln ternäre Operatoren, den Fehlerkontrolloperator (@) und Inkrement-/Dekrementoperatoren:
// Always have ternary operators 
// test if the statement is true, not false.
$programming_language = ( 'PHP' === $language ) ? 'cool' : 'meh'; 

// Favor pre-increment/decrement over post-increment/decrement
// for stand-alone statements.

// DO
--$a;

// DON'T
$a--;
  • Datenbank – Die Standards für die Datenbankcodierung enthalten Anweisungen für die Durchführung von Datenbankabfragen und die Formatierung von SQL-Anweisungen.
  • Zusätzliche Empfehlungen – Zu den zusätzlichen Empfehlungen gehören Standards wie die Verwendung selbsterklärender Flag-Werte für Funktionsargumente, cleverer Code, Closures (anonyme Funktionen), reguläre Ausdrücke, Shell-Befehle und Anweisungen zur Vermeidung von extract().

WordPress Inline-Dokumentationsstandards für PHP-Code

Zusätzlich zu den oben genannten Richtlinien bietet WordPress Inline-Dokumentationsstandards für PHP-Code. WordPress verwendet ein eigenes Dokumentationsschema, das sich an der PHPDoc-Syntax orientiert, einem sich weiterentwickelnden Standard für die Dokumentation von PHP-Code, der von phpDocumentor gepflegt wird. Diese Standards vereinfachen die Erstellung externer Dokumentationen und tragen zur breiteren WordPress-Entwicklergemeinschaft bei, indem sie ein gemeinsames Verständnis der Codebase-Strukturen fördern.

Die PHP-Dokumentation in WordPress erscheint meist als formatierte Blöcke oder Inline-Kommentare. Dokumentiere Folgendes in WordPress-Dateien:

  • Funktionen und Klassenmethoden
  • Klassen
  • Klassenmitglieder, einschließlich Eigenschaften und Konstanten
  • Requires und Includes
  • Hooks (Aktionen und Filter)
  • Inline-Kommentare
  • Dateikopfzeilen
  • Konstanten

HTML- und CSS-Standards in WordPress

WordPress-Themes und -Plugins halten sich an strenge HTML-Kodierungsstandards, um Beständigkeit, Zugänglichkeit und Wartbarkeit zu gewährleisten. Die Richtlinien betonen semantisches Markup und ermutigen die Entwickler/innen, HTML-Elemente für ihre beabsichtigten Zwecke zu verwenden. Diese Praxis verbessert die Struktur des Inhalts und die Leistung der Suchmaschinenoptimierung (SEO). Außerdem sollst du dein HTML validieren, um die Kompatibilität zwischen verschiedenen Browsern zu gewährleisten.

Die HTML-Code-Standards enthalten Richtlinien für:

  • Validierung – Du solltest alle deine HTML-Seiten mit dem W3C-Validator validieren, um sicherzustellen, dass dein Markup wohlgeformt ist.
  • Selbstschließende Elemente – Dem Schrägstrich in selbstschließenden Elementen sollte ein Leerzeichen vorangestellt werden.
<!-- DO -->
<br />

<!-- DON'T –>
<br/>
  • Attribute und Tags – Alle Attribute und Tags sollten in Kleinbuchstaben geschrieben werden. Außerdem sollten Attributwerte nur dann klein geschrieben werden, wenn sie von Maschinen interpretiert werden sollen. Wenn du für Menschen schreibst, solltest du den Titel in Großbuchstaben schreiben.
<!-- DO -->
<a href="http://example.com/" title="Link Description">Descriptive text</a>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- DON'T -->
<a HREF="http://example.com/" TITLE="link description">Click here</a>
  • Anführungszeichen – Alle Attribute müssen einen Wert haben und in einfache oder doppelte Anführungszeichen gesetzt werden. Werden die Werte nicht in Anführungszeichen gesetzt, kann dies zu Sicherheitslücken führen.
<!-- DO -->
<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />

<!-- DON'T -->
<input type=text name=email disabled>
  • Einrückung – Die HTML-Einrückung sollte immer die logische Struktur widerspiegeln. Wenn du PHP und HTML mischst, rücke die PHP-Blöcke so ein, dass sie mit dem umgebenden HTML-Code übereinstimmen.
<!-- DO -->
<?php if ( ! have_articles() ) : ?>
<div class="article">
    <h1 class="article-title">Not Found</h1>
    <div class="article-content">
        <p>No results were found.</p>
        <?php get_error_msg(); ?>
    </div>
</div>
<?php endif; ?>

<!-- DON'T -->
<?php if ( ! have_articles() ) : ?>
<div class="article">
<h1 class="article-title">Not Found</h1>
<div class="article-content">
<p>No results were found.</p>
<?php get_error_msg(); ?>
</div>
</div>
<?php endif; ?>

Zusätzlich zu diesen HTML-Standards helfen dir die CSS-Standards von WordPress dabei, saubere, modulare und reaktionsfähige Stylesheets zu erstellen. Sie bilden eine Grundlage für die Zusammenarbeit und Überprüfung, vom Kerncode über Themes bis hin zu Plugins. Diese Richtlinien sorgen dafür, dass dein Code lesbar, konsistent und sinnvoll ist.

Die WordPress-CSS-Codestandards betonen die Verwendung spezifischer Klassen, um Elemente zu kennzeichnen und eine konsistente und organisierte Struktur zu fördern. Sie umfassen insbesondere Standards für:

  • Struktur:
/* DO 
Each selector should be on its own line ending with 
a comma or curly brace. The closing brace should occupy 
the same indentation level as the opening selector. */
#selector-1,
#selector-2 {
    property: value;
}
  • Selektoren:
/* DO 
Use lowercase and separate words using hyphens.
Use double quotes around values for attribute selectors.
Avoid overqualified selectors, such as div.container. */
#contact-form {
    property: value;
}
input[type="text"] {
    property: value;
}
  • Eigenschaften (Bestell- und Anbieterpräfixe):
/* Append properties with a colon and a space. 
Properties should be lowercase — except font names 
snd vendor-specific properties — and use shorthand. */
#selector {
    property: value;
}
  • Werte:
/* Add a space before the value and a semicolon after.
Use double quotes.
0 values should not have units.
Use a leading zero for decimal values.
Delineate multiple comma-separated values for 
a single property with a space or new line. */
#contact-form {
    font-family: "Helvetica Neue", sans-serif;
    opacity: 0.9;
    box-shadow:
        0 0 0 1px #5b9dd9,
        0 0 2px 1px rgba(20, 120, 170, 0.9);
}
  • Medienabfragen:
/* Rules set for media queries should be indented one level in.
Keep media queries grouped by media at the bottom of the stylesheet. */
@media all and (max-width: 1024px) and (min-width: 780px) {
    $selector {
        property: value;
    }        
}
  • Kommentieren:

Seit der Einführung von WordPress im Jahr 2003 haben sich die Codierungsstandards für HTML und CSS an den Richtlinien des World Wide Web Consortium (W3C) für HTML und CSS orientiert. Seit der Veröffentlichung von HTML5 und CSS3 haben die W3C-Standards die Entwicklung von Themes und Plugins beeinflusst, da sie die Integration von responsiven Designprinzipien und semantischem Markup betonen.

Durch die Übernahme der W3C-Richtlinien wird sichergestellt, dass WordPress-Websites die globalen Webstandards einhalten, was die Interoperabilität und das Nutzererlebnis verbessert und das Engagement für Aktualität, Sicherheit und Kompatibilität innerhalb des gesamten Web-Ökosystems widerspiegelt.

Die Einhaltung dieser Richtlinien in WordPress unterstreicht die Überprüfung der HTML-Qualität durch den W3C HTML Markup Validator.

Diese HTML- und CSS-Standards gewährleisten eine optisch ansprechende, benutzerfreundliche und effiziente Darstellung von WordPress-Websites auf allen Plattformen. Sie unterstützen ein nahtloses Benutzererlebnis und erleichtern die Zusammenarbeit zwischen Entwicklern, die an verschiedenen Aspekten des WordPress-Ökosystems arbeiten.

JavaScript-Codierungsstandards in WordPress

Die WordPress-Codierungsstandards enthalten auch Richtlinien für die Formatierung und Gestaltung von JavaScript-Code für Themes und Plugins. Außerdem tragen diese Standards dazu bei, die Konsistenz des Codes mit dem PHP-, HTML- und CSS-Code zu fördern.

Die WordPress-JavaScript-Kodierungsstandards basieren auf dem jQuery JavaScript Style Guide, der 2012 als umfassender Satz von Codierungskonventionen zur Verbesserung der Konsistenz und Lesbarkeit des Codes herausgegeben wurde. Ursprünglich war er speziell für jQuery-Projekte gedacht, aber sein Erfolg hat dazu geführt, dass er auch außerhalb des Frameworks weit verbreitet ist.

Auch wenn die jQuery-Richtlinien den WordPress-Standards zugrunde liegen, gibt es einige bemerkenswerte Unterschiede für die WordPress-Entwicklung:

  • WordPress verwendet einfache Anführungszeichen für String-Deklarationen.
  • Case-Anweisungen werden in Switch-Blöcken eingerückt.
  • Funktionsinhalte werden durchgängig eingerückt, einschließlich der Wrapper für vollständige Dateiabschlüsse.
  • Einige Whitespace-Regeln weichen von den PHP-WordPress-Standards ab, z. B. die Verwendung von Tabulatoren oder Einrückungen.
  • die 100-Zeichen-Begrenzung von jQuery wird zwar empfohlen, aber nicht strikt durchgesetzt.

Die WordPress JavaScript-Codierungsstandards decken die folgenden Bereiche ab:

  • Code-Refactoring.
  • Codeabstände, einschließlich Objektdeklarationen, Arrays und Funktionsaufrufe:
// Object declarations
// DO
var obj = {
    name: 'John',
    age: 27,
    height: 179
}

// DON'T
var obj = {
    name: 'John',  age: 27,
    height: 179
}

// Arrays and function calls
// Include extra spaces around elements and arguments.
array = [ 1, 2 ];
foo( arg1, arg2 );
  • Verwendung von Semikolons:
// Always use semicolons
array = [ 1, 2 ];
  • Einrückung und Zeilenumbrüche, einschließlich Blöcke und geschweifte Klammern, mehrzeilige Anweisungen und verkettete Methodenaufrufe:
// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} )( jQuery );

// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( condition && condition ) || condition ) {
    // Expressions
} else {
    // Expressions
}

// Line breaks must occur after an operator if the statement
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>';
/* If a chain of method calls is too long to fit on a single line, 
   use one call per line. The first call should be on a separate line from
   the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' );
  • Zuweisungen und Globals, einschließlich der Deklaration von Variablen mit const und let, der Deklaration von Variablen mit var, Globals und gemeinsamen Bibliotheken.
  • Namenskonventionen wie Abkürzungen und Akronyme, Klassendefinitionen und Konstanten:
// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1;
const currentDOMDocument = window.document;

// Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}

// Constants should use SCREAMING_SNAKE_CASE convention.
const SESSION_DURATION = 60
  • Gleichheit:
// Use strict equality/inequality checks (=== and !==)
// instead of abstract checks (== and !=).
if ( name === "John" ) {
    ...
}
if ( result !== false ) {
    ...
}

// Also, with negation:
if !( result === false ) {
    ...
}
  • Strings:
// Use single-quotes for string literals.
    var myString = 'Hello world!'
  • Switch-Anweisungen:
// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x()
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}

In den WordPress-Kodierungsstandards sind außerdem einige Best Practices für das Schreiben von JavaScript-Code beschrieben.

Wie bei PHP gibt es auch bei WordPress Inline-Dokumentationsstandards für JavaScript-Code. Diese Inline-Standards, bei denen es sich entweder um formatierte Dokumentationsblöcke oder Inline-Kommentare handelt, folgen dem JSDoc 3-Standard für Inline-JavaScript-Dokumentation. Die Inline-Standards decken Funktionen, Klassenmethoden, Objekte, Closures, Objekteigenschaften, Ereignisse und Dateiköpfe ab.

Wie du Barrierefreiheit bei der WordPress-Entwicklung sicherstellst

Standards für Barrierefreiheit sind wichtig, um sicherzustellen, dass digitale Inhalte, einschließlich Websites, die auf Plattformen wie WordPress entwickelt wurden, von Menschen mit unterschiedlichen Fähigkeiten genutzt werden können. Die Übernahme der W3C-Standards für Barrierefreiheit stellt sicher, dass mit WordPress erstellte Websites auch für Menschen mit Behinderungen zugänglich sind.

Die Zugänglichkeitsrichtlinien des W3C, insbesondere die Web Content Accessibility Guidelines (WCAG), bieten einen umfassenden Rahmen, um Webinhalte besser zugänglich zu machen. WordPress hat die Bedeutung der Barrierefreiheit erkannt und diese Richtlinien in seine Kernfunktionalitäten integriert.

Die WCAG messen zum Beispiel die Einhaltung der Europäischen Zugänglichkeitsverordnung, die ab Juni 2025 für viele Organisationen in der EU gelten wird.

Um den unterschiedlichen Bedürfnissen gerecht zu werden, müssen Funktionen und Designprinzipien wie die Kompatibilität mit Screenreadern, Tastaturnavigation und Textalternativen für Nicht-Text-Inhalte implementiert werden.

Die Gewährleistung von Barrierefreiheit in WordPress ist nicht nur eine Frage der Einhaltung der Vorschriften. Es ist eine Verpflichtung, allen Menschen den gleichen Zugang zu Informationen und Dienstleistungen zu ermöglichen. Durch die Einhaltung der W3C-Richtlinien werden WordPress-Websites zugänglicher und benutzerfreundlicher und fördern so eine integrative Online-Umgebung.

Einige praktische Beispiele für die Implementierung von Zugänglichkeitsfunktionen in deinen Themes und Plugins sind die folgenden:

  • Verwendung von semantischem HTML – Achte auf die korrekte Verwendung von semantischen HTML-Tags. Verwende z. B. <nav> für Navigationsmenüs, <header> für Seitenkopfzeilen und <main> für den Hauptinhalt. Diese Tags helfen Screenreadern und anderen Hilfstechnologien, die Struktur der Seite zu verstehen.
  • Füge Textalternativen für Bilder, Video- und Audioinhalte hinzu – Füge beschreibende Alt-Texte für Bilder hinzu, um ihre Bedeutung für Nutzer zu vermitteln, die sie nicht sehen können. In WordPress kannst du beim Hinzufügen von Bildern beschreibende alt Attribute in die Medienbibliothek einfügen. Füge Untertitel und Transkripte für Videos ein und biete Textalternativen für Audioinhalte an, um sicherzustellen, dass gehörlose oder schwerhörige Nutzer/innen die Informationen verstehen können.
  • Entwickle ein responsives Design – Achte darauf, dass dein Theme oder Plugin responsiv ist und sich gut an verschiedene Bildschirmgrößen anpasst. Dieser Ansatz kommt Nutzern mit verschiedenen Geräten zugute und sorgt für ein einheitliches Erlebnis auf allen Plattformen.
  • Gestalte zugängliche Formulare – Biete klare Beschriftungen und Anweisungen für Formularfelder. Verwende geeignete Eingabearten wie E-Mail oder Telefon, um die richtige Tastatur auf mobilen Geräten und assistiven Technologien zu aktivieren.
  • Nutze die Tastaturnavigation – Stelle sicher, dass alle interaktiven Elemente mit einer Tastatur navigierbar sind. Die Nutzer/innen sollten in der Lage sein, mit der Tabulatortaste durch Links, Schaltflächen und Formularfelder zu navigieren. Teste und verbessere die Zugänglichkeit mit der Tastatur, indem du vermeidest, dich nur auf Mausinteraktionen zu verlassen.

Tools zur Einhaltung der WordPress-Codestandards

Es gibt viele Code-Sniffing-Tools, die dir helfen können, die oben beschriebenen Kodierungsstandards der Plattform einzuhalten. Im Folgenden stellen wir dir einige der Validierungstools vor, mit denen du die WordPress-Kodierungsstandards überprüfen kannst.

PHP_CodeSniffer

Der PHP_CodeSniffer scannt deine PHP-Codebasis, um Abweichungen von den etablierten Normen zu erkennen. Er sorgt für einen saubereren, effizienteren Code, indem er Kodierungsfehler und Stilabweichungen aufspürt. Dies führt zu einer verbesserten Leistung von WordPress-Websites und gewährleistet eine nahtlose Kompatibilität mit zukünftigen Updates und Plugins.

CSS Validation Service von W3 Org

Der CSS Validation Service von W3 Org scannt CSS-Stylesheets und identifiziert und behebt potenzielle Fehler, die die optimale Leistung der Website beeinträchtigen könnten. Er spielt eine entscheidende Rolle bei der Wahrung der Konsistenz und der Einhaltung der W3C-Standards und garantiert ein reibungsloses Nutzererlebnis auf verschiedenen Geräten. Dadurch werden die Ladezeiten von Websites verbessert und die strengen CSS-Kodierungsstandards von WordPress erfüllt.

JSHint

JSHint analysiert JavaScript-Code und identifiziert potenzielle Fehler, stilistische Ungereimtheiten und die Einhaltung von Best Practices. Es hilft dir, saubereren und effizienteren Code zu schreiben und so die Leistung deiner Website zu optimieren. Der Fokus auf die WordPress-Kodierungsstandards stellt sicher, dass sich der JavaScript-Code nahtlos in die Gesamtarchitektur von WordPress einfügt und hilft dir, eine einheitliche und standardisierte Kodierungsumgebung zu schaffen.

WebAIM Contrast Checker

Der Contrast Checker von WebAIM hilft dir, die Barrierefreiheit deiner WordPress-Websites zu bewerten und zu verbessern. Dieses Tool vereinfacht den oft komplexen Prozess, einen optimalen Farbkontrast zu erreichen, um die Zugänglichkeit zu fördern. Mit dem Echtzeit-Feedback des Contrast Checkers kannst du Bereiche identifizieren, in denen du die Lesbarkeit und Verständlichkeit von Texten für alle Besucher verbessern kannst.

Zusammenfassung

Kodierungsstandards sind das Rückgrat einer effizienten und kooperativen Softwareentwicklung. Sie sorgen für Konsistenz und Lesbarkeit im Code, rationalisieren den Programmierprozess, verbessern die Wartbarkeit und erleichtern die Teamarbeit. Für WordPress-Entwicklerinnen und -Entwickler ist die Einhaltung von Kodierungsstandards entscheidend für die Erstellung robuster und skalierbarer Websites.

Kinsta kann dir dabei helfen, diese Standards zu erfüllen, indem es Entwicklungsumgebungen unterstützt, die es dir ermöglichen, dich auf deine Arbeit zu konzentrieren. Mit unserer eigenen Docker-basierten DevKinsta-Suite kannst du WordPress-Websites auf deinem lokalen Rechner entwerfen und entwickeln und sie dann nahtlos in deine Produktionsumgebung übertragen. Wenn du DevKinsta mit unserem Managed WordPress Hosting kombinierst, kannst du mehr Zeit mit deinem Code und weniger Zeit mit der Konfiguration von Webservern verbringen.

Steve Bonisteel Kinsta

Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.