Die Bedeutung von Kodierungsstandards verstehen
Kodierungsstandards sind wie die Grammatikregeln der Programmierung. Genauso wie eine korrekte Grammatik die geschriebene Sprache klar und verständlich macht, sorgen Kodierungsstandards dafür, dass Ihr Code konsistent und lesbar ist.
- Für Sie: Sie werden Ihren Code in Zukunft leichter lesen und aktualisieren können.
- Für Andere: Wenn Sie Ihren Code mit anderen teilen oder in einem Team arbeiten, werden andere die Klarheit zu schätzen wissen.
- Für WordPress: Da es sich um Open-Source handelt, tragen viele Menschen dazu bei. Standards halten alles einheitlich.
Reale Anwendung von Coding Standards in der Teamarbeit
Stellen Sie sich vor, Sie arbeiten als Teil eines großen Teams an einem WordPress-Projekt. Jeder trägt einen anderen Teil des Codes bei - einige konzentrieren sich auf das Backend, andere auf das Styling und wieder andere auf die Barrierefreiheit. Ohne einheitliche Standards kann das Projekt schnell chaotisch werden. Kodierungsstandards stellen das sicher:
- Reibungslose Zusammenarbeit: Wenn alle dieselben Regeln befolgen, ist es für die Entwickler einfacher, die Arbeit der anderen zu lesen und zu verstehen.
- Weniger Zusammenführungskonflikte: Inkonsistente Formatierungen führen oft zu Codekonflikten beim Zusammenführen von Änderungen. Standards minimieren diese Konflikte und ermöglichen es dem Team, effizienter zu arbeiten.
- Besseres Onboarding: Neue Entwickler, die dem Projekt beitreten, können sich schnell einarbeiten, indem sie einem standardisierten Kodierungsstil folgen, wodurch sich der Zeitaufwand für das Verständnis des vorhandenen Codes verringert.
Stellen Sie sich ein Szenario vor, in dem ein Entwickler das Projekt verlässt und ein neues Teammitglied seinen Part übernehmen muss. Wenn der vorherige Entwickler die richtigen Codierungsstandards befolgt hat, kann das neue Mitglied schnell einsteigen, den Code pflegen und Verbesserungen vornehmen, ohne viel Zeit zu benötigen, um ihn zu verstehen.
WordPress PHP-Codierungsstandards
PHP ist die Kernsprache von WordPress. Die Einhaltung der PHP-Codierungsstandards stellt sicher, dass sich Ihr Code reibungslos in WordPress integrieren lässt und für andere leicht verständlich ist.
1. PHP-Tags: Verwenden Sie immer vollständige PHP-Tags <?php ?>
. Vermeiden Sie kurze Tags wie <? ?>
weil sie möglicherweise nicht auf allen Servern funktionieren.
<?php
// Your PHP code here
?>
2. die Dateikodierung: Speichern Sie Ihre PHP-Dateien in UTF-8 ohne Byte Order Mark (BOM).
3. zeilenenden: Verwenden Sie Zeilenenden im Unix-Stil (\n
).
4. die Einrückung: Verwenden Sie Tabulatoren für die Einrückung (keine Leerzeichen). So bleibt der Code in verschiedenen Editoren konsistent.
Benennungskonventionen
1. Funktionen und Methoden: Verwenden Sie Kleinbuchstaben und Unterstriche.
funk_benutzer_daten( 1TP4Benutzer_id ) {
// Funktionscode
}
2. Variablen: Wie bei den Funktionen - Kleinbuchstaben und Unterstriche.
1TP4Benutzername = 'John Doe';
3.Klassen: Großgeschriebene Wörter verwenden (StudlyCaps).
class UserProfile {
// Klassencode
}
4 Konstanten: Alle Großbuchstaben mit Unterstrichen.
define( 'MAX_UPLOAD_SIZE', 1048576 );
Leerraum und Einrückung
1. Leerzeichen nach Kommas: Wenn Sie Parameter oder Array-Elemente auflisten, fügen Sie nach jedem Komma ein Leerzeichen ein.
$colors = array( 'rot', 'grün', 'blau' );
2. kontrollierende Strukturen: Setzen Sie ein Leerzeichen zwischen die Kontrollschlüsselwörter und die öffnende Klammer.
if ( $condition ) {
// Code
}
3.Operatoren: Fügen Sie Leerzeichen um Zuweisungs-, Vergleichs- und logische Operatoren ein.
1TP4Gesamtbetrag = 1TP4Preis + 1TP4Steuer;
wenn ( $otal > 100 ) {
// Code
}
Strukturen kontrollieren
1. die Platzierung der Klammern: Verwenden Sie den Allman-Stil, bei dem die erste Klammer auf einer neuen Zeile steht.
wenn ( $condition )
{
// Code
}
sonst
{
// Code
}
2.elseif
**Schlüsselwort**: Verwenden Sie elseif
anstelle von sonst wenn
.
wenn ( $condition )
{
// Code
}
elseif ( $other_condition )
{
// Code
}
3.Yoda Bedingungen: Setzen Sie die Konstante oder das Literal auf die linke Seite von Vergleichen.
wenn ( true === $is_active )
{
// Code
}
Dies hilft, eine versehentliche Zuweisung zu verhindern (=
anstelle von ==
).
Bewährte Praktiken
1. Vermeiden Sie verkürzte PHP-Tags: Verwenden Sie für eine bessere Kompatibilität immer vollständige Tags.
2. Funktionsargumente: Verwenden Sie eindeutige und beschreibende Variablennamen.
function berechne_summe( $eilsumme, $ax_rate ) {
// Code
}
3. bereinigen Sie Eingaben: Bereinigen und validieren Sie Benutzereingaben immer.
$user_id = intval( $_GET['user_id'] );
4. Escape-Ausgaben: Bevor Sie Daten ausgeben, sollten Sie sie escapen, um Sicherheitsprobleme zu vermeiden.
echo esc_html( 1TP4Benutzer_name );
5.Kommentare: Verwenden Sie Kommentare, um komplexe Logik oder wichtige Hinweise zu erklären.
// Berechnen Sie den Gesamtpreis mit Steuer
Standards für die Inline-Dokumentation
Eine gute Dokumentation macht Ihren Code leichter verständlich und wartbar.
1) Funktionskommentare: Fügen Sie vor jeder Funktion einen Kommentarblock ein.
/**
* Berechnet den Gesamtpreis inklusive Steuern.
*
* @param float $subtotal Der Zwischensummenbetrag.
* @param float $tax_rate Der Steuersatz als Dezimalwert.
* @return float Der Gesamtpreis.
*/
function berechne_gesamt( 1TP4Zwischensumme, 1TP4Steuer_satz ) {
// Funktionscode
}
2. die Typen von Parametern und Rückgabewerten: Geben Sie den Typ jedes Parameters und des Rückgabewerts an.
3. inline-Kommentare: Verwenden Sie sie sparsam, um komplexe Teile Ihres Codes zu erklären.
$discount = 0.0; // Initialisierung der Rabattvariable
HTML-Codierungsstandards in WordPress
HTML ist das Rückgrat des Webinhalts. Das Schreiben von sauberem und semantischem HTML ist entscheidend für die Zugänglichkeit und SEO.
Allgemeine Richtlinien
1. doctype: Beginnen Sie immer mit dem HTML5-Doctype.
<!DOCTYPE html>
2. das Attribut Sprache: Geben Sie die Sprache im Feld <html>
Tag.
<html lang="en">
3. die Zeichenkodierung: Verwenden Sie die Kodierung UTF-8.
<meta charset="UTF-8">
Strukturierung Ihres HTML
1. semantische Elemente: Verwenden Sie semantische HTML5-Elemente wie <header>
, ,
<section>
, <article>
, <footer>
.
2. die Einrückung: Verwenden Sie zwei Leerzeichen (oder Tabulatoren, wenn Sie es vorziehen), um verschachtelte Elemente einzurücken.
- Posten 1
- Posten 2
3.Attribute: Verwenden Sie Kleinbuchstaben für Attributnamen und schließen Sie Attributwerte in doppelte Anführungszeichen ein.
<img src="image.jpg" alt="Ein großartiges Bild">
Bewährte Praktiken
1. die Zugänglichkeit: Immer enthalten alt
Attribute für Bilder und verwenden Sie gegebenenfalls ARIA-Rollen.
<img src="logo.png" alt="Firmenlogo">
2. selbst-schließende Tags: Für HTML5 brauchen Sie keine selbstschließenden leeren Elemente wie <br>
, <img>
, <input>
.
<br>
<img src="image.jpg" alt="Beschreibung">
3. Kommentare: Verwenden Sie bei Bedarf HTML-Kommentare, um Abschnitte Ihres Codes zu erläutern.
CSS-Codierungsstandards in WordPress
CSS steuert die Präsentation Ihrer Website. Wenn Sie sauberes und effizientes CSS schreiben, sieht Ihre Website gut aus und lädt schneller.
Allgemeine Richtlinien
1. die Syntax: Befolgen Sie die Standard-CSS-Syntax - Selektor, geschweifte Klammern, Eigenschaft-Wert-Paare.
.class-selector {
Eigenschaft: value;
}
2. die Einrückung: Verwenden Sie zwei Leerzeichen (oder Tabulatoren) für die Einrückung innerhalb von Regeln.
3.Kommentare: Verwenden Sie Kommentare, um Abschnitte zu trennen und komplexe Regeln zu erklären.
/* Kopfzeilen-Stile */
Kopfzeile {
/* Eigenschaften */
}
Sauberes CSS schreiben
1. die Namen der Selektoren: Verwenden Sie Kleinbuchstaben und Bindestriche.
.main-navigation {
/* Formatvorlagen */
}
2. vermeiden Sie IDs für das Styling: Verwenden Sie Klassen anstelle von IDs, um die Spezifität gering zu halten.
/* Richtig */
.button {
/* Stile */
}
/* Vermeiden */
#submit-button {
/* Formatvorlagen */
}
3. shorthand Eigenschaften: Verwenden Sie nach Möglichkeit Shorthand-Eigenschaften.
/* Richtig */
Rand: 10px 5px 15px 0;
/* Erweitert */
margin-top: 10px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 0;
4. Nullwerte: Lassen Sie die Einheiten für Nullwerte weg.
padding: 0;
Bewährte Praktiken
1. organisieren Sie Stile: Gruppieren Sie verwandte Stile zusammen, z. B. Layout, Typografie, Farben.
2. Kommentare für Abschnitte: Verwenden Sie Kommentare, um Ihr Stylesheet in Abschnitte zu unterteilen.
/* Typografie / / Farben / / Layout */
3.Vermeiden Sie !important: Verwenden Sie Spezifität anstelle von !wichtig
um Stile außer Kraft zu setzen.
4) Medienabfragen: Platzieren Sie Medienabfragen in der Nähe der zugehörigen Stile oder in einem separaten Abschnitt.
@media (max-width: 768px) {
.main-navigation {
Anzeige: keine;
}
}
Empfohlene Tools und Plugins
Um sicherzustellen, dass Sie die WordPress-Codierungsstandards einhalten, sollten Sie die folgenden Tools verwenden:
- PHP CodeSniffer: Mit diesem Tool können Sie Verstöße gegen die WordPress PHP-Codierungsstandards aufspüren. Sie können es zusammen mit dem WordPress Coding Standards Regelsatz verwenden, um Ihren Code automatisch zu überprüfen.
- EditorConfig: Viele IDEs und Code-Editoren unterstützen .editorconfig-Dateien, die dabei helfen, konsistente Codierungsstile zwischen verschiedenen Editoren und Entwicklern zu erhalten.
- ESLint und Stylelint: Verwenden Sie diese Tools zum Linting von JavaScript und CSS, um häufige Fehler zu finden und die Konsistenz zu gewährleisten.
- Hübscher: Ein Code-Formatierer, der automatisch einen konsistenten Stil für HTML, CSS und JavaScript erzwingen kann, was es für Teams einfacher macht, einen einheitlichen Code-Stil zu pflegen.
- VSCode-Erweiterungen:
- PHP-Intelefonie: Bietet intelligente Autovervollständigung und Funktionshinweise und erkennt mögliche Probleme.
- WordPress Schnipsel: Eine Sammlung häufig verwendeter WordPress-Funktionen und -Snippets zur Beschleunigung der Entwicklung.
Häufig zu vermeidende Fehler
1. inkonsistente Namensgebung: Die Vermischung von camelCase und snake_case kann zu Verwechslungen führen, halten Sie sich also in Ihrem Projekt an die vorgeschriebenen Namenskonventionen.
2.Ausgabe nicht escapen: Geben Sie nutzergenerierte Inhalte vor der Ausgabe immer in Escapeschrift aus, um Sicherheitslücken wie XSS zu vermeiden.
// Richtig
echo esc_html( $user_input );
// Falsch
echo 1TP4Benutzer_Eingabe;
3. unsachgemäße Verwendung von Globals: Vermeiden Sie die Verwendung globaler Variablen, es sei denn, es ist notwendig. Übergeben Sie stattdessen Variablen explizit an Funktionen, um Ihren Code modular zu halten und ihn besser testen zu können.
4.Inline-Stile verwenden: Inline-Stile sollten vermieden werden, da sie die Pflege und das Überschreiben von CSS erschweren. Verwenden Sie immer externe Stylesheets.
Alles zusammenfügen
Schauen wir uns ein Beispiel an, das PHP, HTML und CSS gemäß den WordPress-Codierungsstandards kombiniert.
Beispiel: Eine einfache PHP-Vorlage
PHP-Datei (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(); ?>
CSS-Datei (style.css
):
/* Hauptinhaltsstile */
.site-main {
margin: 0 auto;
max-width: 800px;
padding: 20px;
}
.entry-header h1 {
Schriftgröße: 2em;
margin-bottom: 0.5em;
}
.entry-content {
Zeilenhöhe: 1.6;
}
Zusätzliche Ressourcen
- Handbuch für WordPress-Entwickler: entwickler.wordpress.org
- PHP-Dokumentation: php.net
- Mozilla Entwickler-Netzwerk (MDN) Web Docs:
- W3C Markup Validation Service: validator.w3.org
- WordPress Kodierungsstandards:
Fazit
Die Einhaltung der WordPress-Codierungsstandards gewährleistet, dass Ihr Code sauber, konsistent und professionell ist. Das hilft Ihnen bei der Pflege Ihrer Projekte und erleichtert anderen in der WordPress-Community die Zusammenarbeit mit Ihnen.
Denken Sie daran:
- Übung macht den Meister: Je mehr Sie nach diesen Standards kodieren, desto selbstverständlicher wird es werden.
- Bleiben Sie auf dem Laufenden: Die Coding-Standards entwickeln sich weiter, daher sollten Sie die offizielle WordPress-Dokumentation im Auge behalten.
- Bitten Sie um Hilfe: Wenn Sie Fragen haben, ist die WordPress-Community freundlich und hilfsbereit.
Viel Spaß beim Codieren!
Responses