Der folgende Beitrag ist ein Gastbeitrag von Trishah Woolley. Über die Jahre hat Trishah eine Menge Code-Snippets gesammelt, die den Job erledigen, IDs und Klassen basierend auf variablen Informationen wie der URL oder Daten aus WordPress hinzuzufügen. Jedes dieser Snippets wurde entweder aus Dokumentationen oder ähnlichen Online-Ressourcen gesammelt oder von Trishah basierend auf Standardfunktionen der beteiligten Sprachen und APIs geschrieben.
Während meiner Arbeit im Bereich WordPress Webdesign gab es immer wieder Gelegenheiten, bei denen ich eine ID oder Klasse zum `<body>-Tag hinzufügen musste. Zum Beispiel: Dies passiert oft, wenn man 3rd-Party-Software in WordPress integriert, die eigene Seiten erstellt, die WordPress nicht erkennt. Oder ich benötige detailliertere Klassen für das von mir erstellte Webdesign.
Um das Aussehen dieser Seiten so zu verändern, dass die Stile nur auf diese Seite angewendet werden, benötigen wir eine Möglichkeit, genau diese Seite oder eine Kategorie von Seiten anzusprechen. Nachfolgend finden Sie einige der Methoden, die sich für mich als hilfreich erwiesen haben, um IDs und Klassen zum `<body>` von sowohl Nicht-WordPress (aber dennoch PHP) als auch WordPress-Seiten hinzuzufügen.
PHP-Varianten
#01 – ID aus der URL hinzufügen
Dies entfernt den Schrägstrich, `.php` und das `?pg=` aus der URL und verwendet den Rest als ID. Ändern Sie das Array, um Ihrer spezifischen Situation gerecht zu werden.
<?php
$page = str_replace(array('/', '.php', '?pg='), '', $_SERVER['REQUEST_URI']);
$page = $page ? $page : 'default';
/* Sanitize $page! */
?>
<body id="<?php echo $page ?>">Beispiel
http://domain.com/directory/test.php?pg=12345Wird zu
<body id="directorytest12345">#02 – ID und Klasse aus URL hinzufügen
Dies sucht nach dem `?` in der URL und wandelt das davor in eine ID und das danach in eine Klasse um.
<?php
list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);
/* Sanitize $page and $class! */
?>
<body id="<?php echo $page ?>" class="<?php echo $class ?>">Beispiel
http://domain.com/directory/test/?pg=12345Wird zu
<body id="directorytest" class="12345">#03 – ID aus Dateinamen hinzufügen
Dies entfernt `.php` und verwendet den Dateinamen als ID.
<body id="<?=basename($_SERVER['PHP_SELF'],'.php')?>">Beispiel
http://domain.com/directory/test.phpWird zu
<body id="test">#04 – ID aus dem ersten Verzeichnis hinzufügen
Dies nimmt das erste Verzeichnis und verwendet es als ID.
$url = explode('/', $_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>
<body id="<?php echo $dir ?>">Beispiel
http://domain.com/directory1/directory2/test.phpWird zu
<body id="directory1">WordPress-Varianten
WordPress hat eine native Funktion zum Anwenden von Klassen auf das Body-Element.
<body <?php body_class(); ?>>Dies führt zu einer Ausgabe wie dieser, abhängig davon, auf welcher Seite Sie sich gerade befinden.
<body class="single single-post postid-245501 single-format-standard">Aber Sie können immer noch mehr tun, z. B. es mit den oben genannten Techniken kombinieren und eigene Klassen hinzufügen.
#05 – WordPress: Eine Klasse zu den Standard-Body-Klassen hinzufügen
Fügen Sie Ihre eigene Klasse zu den von WordPress generierten hinzu.
<body <?php body_class('class-one ); ?>>Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in class-one">#06 – WordPress: Mehrere Klassen zu den Standard-Body-Klassen hinzufügen
Sie können auf diese Weise mehrere Klassen hinzufügen.
<?php body_class(array("class-one", "class-two", "class-three")); ?>Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in class-one class-two class-three">#07 – WordPress: ID und Klasse zu Body-Tags hinzufügen
Dies ist vielleicht mein Favorit! Es tut dasselbe wie das obige, fügt aber die neue Klasse zu den `body_class` von WordPress hinzu.
list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);
?>
<body id="<?php echo $page ?>" <?php if (function_exists('body_class')) body_class($class ); ?>>Beispiel
http://domain.com/directory/test/?pg=12345Wird zu
<body id="directorytest" and class="page page-id-2 page-parent page-template-default logged-in 12345">#08 – WordPress: Den Slug verwenden
<body id="<?php echo $post->post_name; ?>">Beispiel
http://domain.com/category1/slug/Wird zu
<body id="slug">#09 – WordPress: Bedingt zusätzliche Klassen hinzufügen
Dies fügt eine Body-Klasse zu den von WordPress generierten Klassen hinzu, mit bedingter `if()`-Logik. Zum Beispiel verwenden wir hier die von WooCommerce bereitgestellte `is_shop()`-Boolean-Logik.
<body <?php if (is_shop()) { body_class('shop'); } else { body_class(); } ?>>Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in shop">#10 – WordPress: Den Slug zu den Standard-Body-Klassen hinzufügen
Wir können die Ausgabe der `body_class()`-Funktion auch durch Filtern ändern. Dies könnten wir in `functions.php` oder in unserem eigenen Funktionalitäts-Plugin tun.
Hier fügen wir den Slug hinzu.
function add_slug_body_class( $classes ) {
global $post;
if (isset($post)) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter('body_class', 'add_slug_body_class');Beispiel
http://domain.com/category/page-slug/Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in page-slug">#11 – WordPress: Über functions.php-Filter zu Body-Klasse hinzufügen
Fügen Sie das Folgende zu functions.php hinzu.
function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
}
add_filter('body_class', 'my_body_classes');Dann würde es so ausgegeben, indem einfach `body_class()` direkt aufgerufen wird, ohne etwas anderes zu tun.
<body class="page page-id-2 page-parent page-template-default logged-in my_body_classes">#12 – WordPress: Direkte Filterung der Funktion mit Functions.php
So fügen Sie eine einzelne Klasse beliebigen Namens hinzu.
function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
}
add_filter('body_class', 'my_body_classes');Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in class1">#13 – WordPress: Direkte Filterung der Funktion mit Functions.php zum bedingten Hinzufügen mehrerer Klassen
function my_body_classes( $classes ) {
$classes[] = 'class1';
if (is_shop()) {
$classes[] = 'shop';
}
return $classes;
}
add_filter('body_class', 'my_body_classes');Wird auf einer Nicht-Shop-Seite zu diesem.
<body class="page page-id-2 page-parent page-template-default logged-in class1">Wird zu diesem, wenn die Logik `true` ergibt, d. h. auf einer Shop-Seite.
<body class="page page-id-2 page-parent page-template-default logged-in class1 shop">#14 WordPress: Klassen aus der Standardausgabe mit functions.php entfernen
Damit können Sie Klassen aus `body_class()` entfernen.
function adjust_body_class($classes) {
foreach ($classes as $key => $value) {
if ($value == 'class-to-remove') unset($classes[$key]);
}
return $classes;
}
add_filter('body_class', 'adjust_body_class');Wenn wir mit diesem beginnen würden.
<body class="page page-id-2 page-parent page-template-default logged-in">Und "page-parent" entfernen, würden wir dies erhalten.
<body class="page page-id-2 page-template-default logged-in">#15 WordPress: Die Kategorie hinzufügen
Fügt die Kategorie zu `body_class()` hinzu.
function add_category_name($classes = '') {
if (is_single()) {
$category = get_the_category();
$classes[] = 'category-'.$category[0]->slug;
}
return $classes;
}
add_filter('body_class','add_category_name');Beispiel-URL
http://domain.com/category1/post-title/ Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in category1">#16 WordPress: Die Kategorie über functions.php-Filter hinzufügen
Sie können dies auch über einen Filter tun.
function add_category_to_single($classes) {
if (is_single()) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
}
}
// return the $classes array
return $classes;
}
add_filter('body_class', 'add_category_to_single');Beispiel-URL
http://domain.com/category1/post-title/ Wird zu
<body class="page page-id-2 page-parent page-template-default logged-in category1">#17 WordPress: Browser-Klassenname hinzufügen
WordPress bietet einige Globale Variablen, einschließlich Boolescher Werte darüber, welcher Browser verwendet wird. Sie können diese ebenfalls zur Body-Klasse hinzufügen.
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if ($is_lynx) $classes[] = 'lynx';
elseif ($is_gecko) $classes[] = 'gecko';
elseif ($is_opera) $classes[] = 'opera';
elseif ($is_NS4) $classes[] = 'ns4';
elseif ($is_safari) $classes[] = 'safari';
elseif ($is_chrome) $classes[] = 'chrome';
elseif ($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if ($is_iphone) $classes[] = 'iphone';
return $classes;
}
add_filter('body_class', 'browser_body_class');Beispiel mit Chrome.
<body class="page page-id-2 page-parent page-template-default logged-in chrome">Seien Sie vorsichtig, sich nicht auf diese für wichtige Funktionalitäten zu verlassen! User-Agent-Tests, wie dieser verwendet, sind bekannt dafür, mehr Probleme zu verursachen, als sie lösen.
Angenommen, diese Sammlung von Snippets richtet sich an weniger erfahrene Programmierer, würde ich vorschlagen, dass die URL und insbesondere der Query-String-Teil validiert und bereinigt werden, bevor sie dem Dokument hinzugefügt werden.
Ich bin sicher, Sie halten die Beispiele kurz zur Klarheit, aber es sollte erwähnt werden, dass das Ausgeben von irgendetwas in Ihr Dokument aus dem Query-String ein riskantes Geschäft ist. Es wäre ziemlich trivial, ein bösartiges Skript-Tag in die Seite einzuschleusen, indem man den Query-String manipuliert.
Toller Beitrag.
$is_NS4Großartig, Scott. Deshalb will ich WordPress nicht einmal mit der Kneifzange anfassen.
Ich weiß, viele müssen es tun, ich sende ihnen mein Lob und die besten Wünsche. Mehr noch für diejenigen, die Anleitungen schreiben, um anderen zu helfen.
Das ganze Thema, eine ID zu `body` hinzuzufügen, ist an sich schon eine ziemlich schlechte Praxis. Gezwungen zu sein, dies zu tun, ist das Ergebnis jahrzehntelanger Entwicklung ohne klare Anleitung.
Und, wie andere schon vorgeschlagen haben, sollte ein bisschen Bereinigung des Query-Strings hinzugefügt werden.
Ich stimme MaxArt zu und der einzige Teil, der mir wirklich gefällt, ist #14 (zum Entfernen von Body-Klassen in WP).
URLs, Vorlagennamen, Beitrags-IDs und Ähnliches sollten keine Bezeichner für Skripte oder Stile sein, da sie sich ändern können.
Als Beispiel führen wir normalerweise unterschiedliche Umgebungen desselben Codes aus, aber sie können unterschiedliche Inhalte mit unterschiedlichen Auto-Inkrementierungen auf verschiedenen Domains enthalten.
Es gibt wahrscheinlich semi-gültige Anwendungsfälle (obwohl ich nicht glaube, dass ich jemals Code in unserem Repository oder ein Plugin zulassen würde, das dies verlangt), aber ich würde eher einen Artikel darüber sehen wollen, wie man die Verwendung gängiger Body-Selektoren vermeidet.
Entschuldigung, dass ich nicht sehr konstruktiv bin. Ich mag die Bemühungen, die in die Erstellung der umfangreichen Liste und der Codebeispiele gesteckt wurden, die nützlich sein können zu wissen.
Nur aus Neugier, gibt es ein öffentliches (nützliches) WP-Plugin, das keine andere Möglichkeit zur Identifizierung hat? Das würde ich gerne testen.
Zur Referenz ein einfacher Filter für WP Body-Klassen.
Klingt wie eine arme Version von @document. Kein Browser kümmert sich außer Firefox darum, obwohl.
Diese Dinge machen mich traurig. Es ist verschwendete Energie. Verschwenden Sie keine Zeit, um einen weiteren WordPress-Hack zu lernen. Investieren Sie Ihre Zeit in etwas Neues und Modernes. Sie werden nie zurückblicken. Vertrauen Sie mir! :-)