Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
In diesem WordPress-Beitrag dreht sich alles um den Begriff 'Individuelle Felder'. Wir werden erklären, was sie sind und wie man sie nutzt. Dazu werden hier Beispiele präsentiert. Ein Beispiel zeigt auch, wie mit 'Individuellen Feldern' einem einzelnen Artikel oder einer Seite ein spezieller Stil zugewiesen werden kann. Es sei angemerkt, dass die 'Individuellen Felder' in WordPress früher als 'Benutzerdefinierte Felder' bekannt waren.
'Individuelle Felder' in WordPress
'Individuelle Felder' (Custom Fields) sind äußerst vielseitig und finden in verschiedenen Szenarien Anwendung. Für Entwickler und Plug-in-Ersteller bieten sie eine leistungsstarke Möglichkeit, zusätzliche Informationen zu speichern und die Funktionalität von Websites zu erweitern. Mit individuellen Feldern können benutzerdefinierte Datenstrukturen erstellt werden, um spezifische Anforderungen zu erfüllen, sei es für die Verwaltung von Plug-in-Einstellungen, das Hinzufügen benutzerdefinierter Metadaten zu Beiträgen oder die Integration von benutzerdefinierten Funktionen in die Website.
Interessierst du dich dafür, wie Plug-ins die 'Individuellen Felder' (IndF) anwenden? In diesem Beispiel ist zu sehen, wie Plug-ins das umsetzen.
Für normale Anwender eröffnen individuelle Felder die Möglichkeit, Inhalte auf ihrer Website zu strukturieren und an verschiedenen Stellen anzuzeigen. Sie ermöglichen die flexible Verwaltung von Informationen, die nicht in den regulären Editorinhalt passen, wie beispielsweise zusätzliche Produktinformationen für einen Online-Shop, spezifische Daten für Veranstaltungen oder das Hervorheben von Autorinformationen auf einer Autorenseite.
Zusätzlich zu den statischen Inhalten können 'Individuelle Felder' auch für die Steuerung dynamischer Aspekte verwendet werden, darunter Teile des Codes, der Funktionalität oder des Designs. Dies ermöglicht eine modulare Anpassung der Website, indem spezifische Skripte oder Konfigurationen auf einzelnen Seiten eingebunden werden. Sie bieten eine elegante Lösung, um situationsbedingt Skripte zu laden oder bestimmte Designanpassungen nur bei Bedarf zu aktivieren, was zur Optimierung der Ladezeit und der Ressourcennutzung beiträgt.
Das Hinzufügen und Verwalten von individuellen Feldern erfolgt über den Editor, indem benutzerdefinierte Metaboxen erstellt werden, in denen spezifische Daten eingefügt und gespeichert werden können. Diese individuellen Felder können dann in verschiedenen Teilen der Website, wie Seiten, Beiträgen oder benutzerdefinierten Post-Typen, aufgerufen und angezeigt werden, um den Inhalt der Website zu bereichern und zu strukturieren.
- Die 'Individuelle Felder' können im Editor oben rechts über 'Ansicht anpassen' und durch das Aktivieren des Häkchens bei 'Individuelle Felder' aktiviert werden. Anschließend stehen sie unterhalb des Editors für individuelle Zwecke zur Verfügung.
Individuelle Felder vs. Shortcode
Individuelle Felder und Shortcodes, bieten ihre eigenen Vorteile in Bezug auf Flexibilität und Anpassbarkeit. Die Performanz hängt jedoch stark von der Art der Verwendung ab.
Individuelle Felder
Shortcodes
- 'Individuelle Felder', auch intern als 'IndF' bezeichnet.
Tab 1: 'Individuelle Felder', die Grundlagen
Tab 2: 'CSS für die Inhalte von individuelle Felder
Tab 3: Einzelnen Artikeln oder Seiten spezieller Style und JavaScript zuweisen
Tab 4: Die Integration des PHP-Codes aus Tab 2 und Tab 3 in einem einzigen Codeabschnitt
Tab 5: Sicherheitsaspekte bei 'Individuellen Feldern'
Tab 6: Vorteile der Plug-ins
Tab 1
'Individuelle Felder': die Grundlagen
Um die Verwendung von IndF zu verdeutlichen, hier ein Beispiel. Das Feld ist unterhalb dieses Beitrags und ausschließlich für diesen Beitrag sichtbar: Scrolle zum IndF und zurück.
Das PHP für 'Individuelle Felder'
Wie integriert man IndF in den gewünschten Bereich? Die Visualisierung eines IndF erfordert die Integration eines separaten PHP-Codes in das entsprechende Template, beispielsweise die content.php
.
Folgend sind zwei Codes bereitgestellt. Beide Codes erfüllen im Wesentlichen denselben Zweck, indem sie den Wert des IndF, hier des Beipiels im 'Namen' info
, ausgeben. Die beiden Codes verwenden jedoch unterschiedliche Ansätze zur Erreichung desselben Ziels.
Der erste Code verwendet die globale Variable $wp_query
, um auf das individuelle Feld info
zuzugreifen und setzt außerdem die Abfrage mit wp_reset_query()
zurück, was normalerweise für die Hauptabfrage verwendet wird und in diesem Kontext möglicherweise nicht erforderlich ist:
// Greift auf das individuelle Feld 'info' des aktuellen Beitrags zu und gibt den Wert aus
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo '<div class="info">';
echo get_post_meta($postid, 'info', true); // Ruft den Wert des Feldes 'info' ab
echo '</div>';
wp_reset_query(); // Setzt die Abfrage zurück
?>
Der zweite Code verwendet die Funktion get_the_ID()
, um den aktuellen Beitrag zu identifizieren und dann das individuelle Feld dem 'Namen' info
abzurufen:
<?php
// Hole den Wert des individuellen Feldes 'info'
$custom_field_value = get_post_meta( get_the_ID(), 'info', true );
// Überprüfe, ob das individuelle Feld einen Wert hat
if ( ! empty( $custom_field_value ) ) {
echo '<div class="info">' . $custom_field_value . '</div>';
}
?>
- Dem Code ist logisch kein direkter Text dabei, denn der Inhalt dazu ist ja in das individuelle Feld unter 'Wert' zu schreiben.
- Der Bereich
<div class="info">
, welcher den Nameninfo
trägt, ist im IndF unter dem Punkt 'Name' anzugeben. Folgend wird das noch separat behandelt.- Mithilfe des IndF und desselben 'Namen' ist einen Beitrag immer wieder anzuwenden, und zwar jeweils individuellen Inhalts.
Noch mal, der Code da oben ist im Theme dem Template dort einzutragen, wo der Inhalt vom individuellen Feld sein soll. So wie diesem Beispiel mit Theme Twenty Fourteen ist das die content.php
:
Ohne der Datei im Child Theme wird der Code nach Theme-Update eventuell zu erneuern sein.
Nun gehts weiter zu den …
'Inividuelles Feld': Anwendung der Felder
Im Editor nach unten zu den Elementen scrollen. Dort bei 'Individuelle Felder' und dem Ausklappen des Elements. So sind eventuell schon mehrere individuelle Feld zu sehen, die von Plug-ins nach Bedarf so angelegt sind. Die IndF sind der Reihung alphabetisch angeordnet.
Sodann …
Ein neues individuelles Feld hinzufügen:
- → 'Neu eingeben' anklicken.
- Unter dem Feld 'Name' die Klasse
info
gemäß dem obigen Beispielcode eingeben. - Im Feld 'Wert' den individuellen Inhalt eingeben.
Beispiel des IndF für den 'Wert', also der Inhalt:
<a href="https://wegerl.at/wp-css-style-body-eigene-felder/#ih"><img class="aligncenter wp-image-214956 size-full" style="margin-top: 50px; margin-bottom: 50px;" role="img" src="https://wegerl.at/wp-content/uploads/2022/07/puzzle5-bsp.svg" alt="puzzle" width="300" height="172" /></a> <p style="font-size: 1.5em;">Bsp 'Individuelles Feld' von Text.</p>
- 'Individuelles Feld hinzufügen' anklicken.
Von wegen Nichtgebrauchs kann das gesamte IndF auch wieder gelöscht werden.
HTML Beispiel von Margins:
<a href="https://wegerl.at/wp-css-style-body-eigene-felder/#ih"><img class="aligncenter wp-image-214956 size-full" style="margin-top: 50px; margin-bottom: 50px;" role="img" src="https://wegerl.at/wp-content/uploads/2022/07/puzzle5-bsp.svg" alt="puzzle" width="300" height="172" /></a>
Die Margins sollten konkret ausgezeichnet sein, denn so von: margin: 50px 0;
wird das Bild links angelegt statt aligncenter
.
CSS für 'Individuelle Felder'?
Grundlegend ist es nicht möglich, mit reinem CSS direkt auf individuelle Felder oder deren Inhalte zuzugreifen. CSS kann nur auf HTML-Elemente und deren Klassen, IDs oder Tags angewendet werden.
IndF sind grundsätzlich keine reinen HTML-Elemente, obwohl sie die Option bieten, HTML-Elemente als Teil ihres Inhalts zu enthalten. Stattdessen handelt es sich um Daten, die in der Datenbank gespeichert werden. Normalerweise werden sie dynamisch von PHP abgerufen und in das HTML eingefügt. Um individuelle Felder zu stylen oder basierend auf ihren Werten das Styling zu ändern, ist normalerweise separates PHP erforderlich, siehe im Tab 2.
Bitte beachten! Im fünften Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
Tab 2: CSS für die Inhalte von individuelle FelderTab 2
In 'Individuellen Feldern' CSS-Class erlauben
Mit einem weiteren PHP-Code können benutzerdefinierte CSS-Klassen in die IndF eingebunden werden, um den Inhalt direkt mit einer spezifischen CSS-Klasse zu kennzeichnen.
Es ist zu betonen, dass das Hinzufügen von benutzerdefinierten CSS-Klassen über IndF sicher sein kann. Einfaches CSS allein stellt in der Regel keine Sicherheitsbedrohung dar. Allerdings ist es ratsam, sicherzustellen, dass die über IndF eingefügten Inhalte sauber und frei von potenziell gefährlichen Elementen wie Skripten oder unerlaubten Inhalten sind.
functions.php
// Hole den Wert des individuellen Feldes 'custom_css_class'
$custom_css_class = get_post_meta( get_the_ID(), 'custom_css_class', true );
// Überprüfe, ob das individuelle Feld einen Wert hat
if ( ! empty( $custom_css_class ) ) {
// Füge die CSS-Klasse hinzu
function add_custom_css_class_to_body( $classes ) {
global $custom_css_class;
$classes[] = $custom_css_class;
return $classes;
}
add_filter( 'body_class', 'add_custom_css_class_to_body' );
}
Somit kann das IndF mit CSS-Classen bestückt werden. Das heißt innerhalb des Feldes 'Wert' selbst ist mit Text und CSS-Classen auszuzeichnen. – sonst nichts.
Beispiel des IndF für den 'Wert', der Inhalt mit CSS-Classen:
<a id="beispiel"></a><div class="custom-page-style" style="margin-bottom: 80px; padding: 15px; border: 2px solid #2B524C; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 10% 30% 50% 70%; backdrop-filter: blur(15px) brightness(90%) contrast(120%);"><div class="image-container3"><a href="#ih2"><img class="aligncenter wp-image-228480 size-full" style="margin-bottom: 30px;" title="Switche nach oben." src="https://...fish_.svg" alt="" width="" height="" /></a></div> <strong>Beispiel für 'Individuelle Felder'</strong>: Der Text und das Bild, das du hier siehst, stammt nicht aus dem üblichen Inhalt, sondern wird über ein 'Individuelles Feld' eingefügt. Dies geschieht durch PHP-Code in der entsprechenden Datei, in diesem Fall der <code>content.php</code>. <div style="margin: 25px 0;">Durch die Verwendung von 'Individuellen Feldern', wie in diesem Beispiel mit dem 'Namen' <code>info</code> und den im 'Wert' Beispiels des Inhalts hier, kannst du auf jeder Seite beliebigen Inhalt über den 'Wert' erstellen und anzeigen lassen. Sollte das 'Individuelle Feld' keinen 'Wert' enthalten, wird auch nichts angezeigt. Dies bietet eine Möglichkeit, individuelle oder konsistente Informationen bereitzustellen.</div> </div>
Bitte beachten! Im fünften Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
Tab 3: Einzelnen Artikeln oder Seiten spezieller Style und JavaScript zuweisenTab 3
Vorab zu texto.de: Diese Website ist seit geraumer Zeit nicht mehr erreichbar. In Erinnerung an diese Seite möchte ich Monika danken (+1). Der Artikel, der den Titel "Einzelnen Artikeln oder Seiten spezieller Style zuweisen" trug, konnte nicht in der 'Wayback-Machine' gefunden werden. Jedoch haben wir unsere eigene Aufzeichnung dieses Beitrags.
Von Dazumals war zu texto.de zu finden, siehe der Wayback-Machine: "In einer Kategorie Beiträge und benutzerdefinierte Felder ausgeben und nach einem benutzerdefinierten Feld ordnen." – veraltet, aber so als Inbegriff.
'Individuelle Felder'
zum Anpassen des CSS-Styles
Beginnen wir nun der Reihenfolge in umgekehrter Richtung als als es im "Tab 1" beschrieben ist: also erst 'Name' und 'Wert' in das 'Individuellen Feld' eintragen und danach behandeln wir das mit dem PHP für das 'Individuelle Feld'.
Name + Wert eintragen und IndF. hinzufügen.
- Individuelle Felder: Dem 'Individuellen Feld' einen 'Namen' eintragen. Diesem Beispiel
stylesheet
, sodann den 'Wert', das hier wird der spezifische Dateiname, welcher zur CSS Datei führt, hier heißt daskochrezepte.css
. - Weiter im Beispiel des PHP-Codes bezieht sich der Name auf das Stylesheet-Verzeichnis
tuts
. Daher sollte im Child-Theme ein Ordner namenstuts
erstellt werden. - Dieser Ordner ist dann für die CSS-Datei
kochrezepte.css
gedacht, die darin erstellt werden soll. In einem Texteditor die CSS-Dateikochrezepte.css
erstellen, diese könnte so aussehen:
/* Beispiel-Seite CSS für IndF der Kochrezepte */
.header-main:not(.readermode .header-main),
#secondary,
#footer-sidebar,
.site-info:not(.readermode .site-info),
.site:not(.readermode)::before {
background: #ffee99;
}
.single .search-toggle:not(.readermode .search-toggle) {
background: #ffee99;
}
#primary.content-area {
background-color: #ffee99;
}
.readermode div#content {
background-color: #ffee99;
}
- Die Datei
kochrezepte.css
nun in den Ordnertuts
hochladen oder erstelle sie direkt dort mit dem FTP-Client.
Verknüpfung des IndF mit CSS-Dateien
Das PHP für das 'Individuelle Feld' zum Hinzufügen der benutzerdefinierten Stylesheets. Des folgenden in der functions.php
ermöglicht es dem Theme, auf die 'Individuellen Felder' zuzugreifen.
In der Scrollbar findest du drei Code-Optionen mit verschiedenen Anwendungen. Der erste ist allgemein anwendbar, der zweite spezifisch für Beiträge und der dritte nutzt ID-basierte Bedingungen.
- Der erste Code gilt sowohl für Beiträge als auch für Seiten und wird auf beiden Arten von Inhalten ausgeführt:
functions.php
// Funktion zum Hinzufügen der benutzerdefinierten Stylesheets in den wp_head-Hook für Beiträge und Seiten
function custom_post_styles() {
if ( is_single() || is_page() ) { // Prüfung, ob es sich um einen einzelnen Beitrag oder eine Seite handelt
global $post;
if ( isset($post->ID) ) {
$styles = get_post_meta($post->ID, 'stylesheet', false);
if ( $styles && is_array( $styles ) ) {
foreach ( $styles as $stylesheet ) {
// Pfade zu den Stylesheets korrekt zusammensetzen und in den Header einfügen
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
}
}
add_action('wp_head', 'custom_post_styles');
- Im Gegensatz dazu wird der zweite Code nur für Beiträge aktiviert und hat keinen Einfluss auf Seiten:
functions.php
// Funktion zum Hinzufügen der benutzerdefinierten Stylesheets in den wp_head-Hook
function custom_post_styles() {
if ( is_single() ) { // Prüfung, ob es sich um einen einzelnen Beitrag handelt
global $post;
if ( isset($post->ID) ) {
$styles = get_post_meta($post->ID, 'stylesheet', false);
if ( $styles && is_array( $styles ) ) {
foreach ( $styles as $stylesheet ) {
// Pfade zu den Stylesheets korrekt zusammensetzen und in den Header einfügen
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
}
}
add_action('wp_head', 'custom_post_styles');
- Im dritten Fall wird der PHP-Code nur ausgeführt, wenn spezifische Bedingungen, wie eine bestimmte Seiten- oder Beitrags-ID, erfüllt sind:
functions.php
// Funktion zum Hinzufügen der benutzerdefinierten Stylesheets in den wp_head-Hook für bestimmte Beitrag-IDs
function custom_post_styles() {
// Array mit den IDs der Beiträge, auf denen der Code wirksam sein soll
$target_post_ids = array(10, 15, 20); // Füge hier die gewünschten Beitrag-IDs hinzu
global $post;
if ( is_single() && in_array($post->ID, $target_post_ids) ) { // Prüfung für einzelne Beiträge und ID-Übereinstimmung
if ( isset($post->ID) ) {
$styles = get_post_meta($post->ID, 'stylesheet', false);
if ( $styles && is_array( $styles ) ) {
foreach ( $styles as $stylesheet ) {
// Pfade zu den Stylesheets korrekt zusammensetzen und in den Header einfügen
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
}
}
add_action('wp_head', 'custom_post_styles');
So wird der PHP-Code nur ausgeführt, wenn die aktuelle Seite oder der Beitrag über eine spezifische ID verfügt. Dies erlaubt eine präzise Kontrolle darüber, wann der Code auf der Webseite aktiviert werden sollte und erhöht die Effizienz, indem überflüssige Zugriffe auf den Code verhindert werden, falls er nicht aufgerufen wird.
Wie zu Beginn dokumentiert, sollte im individuellen Feld (IndF) unter 'Name' stylesheet
eingetragen werden und unter 'Wert' der Dateiname der CSS-Datei – in diesem Beispiel kochrezepte.css
.
Für den Anfang orientiert sich dieses Beispiel daran. Im weiteren Verlauf können innerhalb des tuts
-Ordners verschiedene CSS-Dateien erstellt werden. Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets stylesheet
lauten, während im 'Wert' der entsprechende Dateiname der CSS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
Hinweis: Die Verwendung von esc_url
dient dazu, sicherzustellen, dass die generierten URLs korrekt formatiert und sicher sind.
Verknüpfung des IndF mit Stylesheet und JavaScript
Dasselbe wie für CSS allein gilt folglich auch für die Einbindung von JavaScript-Dateien. Das bedeutet, dass der Code sowohl .css
-Dateien als auch .js
-Dateien individuell aufrufen kann.
// Funktion zum Hinzufügen der benutzerdefinierten Stylesheets und JavaScript-Dateien in den wp_head-Hook für Beiträge und Seiten
function custom_post_assets() {
if ( is_single() || is_page() ) { // Prüfung, ob es sich um einen einzelnen Beitrag oder eine Seite handelt
global $post;
if ( isset($post->ID) ) {
$styles = get_post_meta($post->ID, 'stylesheet', false);
$scripts = get_post_meta($post->ID, 'script', false);
if ( $styles && is_array( $styles ) ) {
foreach ( $styles as $stylesheet ) {
$stylesheet_path = get_stylesheet_directory() . '/tuts/' . $stylesheet;
// Überprüfen, ob die Stylesheet-Datei existiert, bevor sie in den Header eingefügt wird
if ( file_exists($stylesheet_path) ) {
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
if ( $scripts && is_array( $scripts ) ) {
foreach ( $scripts as $script ) {
$script_path = get_stylesheet_directory() . '/tuts/' . $script;
// Überprüfen, ob die JavaScript-Datei existiert, bevor sie in den Header eingefügt wird
if ( file_exists($script_path) ) {
echo '<script src="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $script ) . '" type="text/javascript"></script>' . PHP_EOL;
}
}
}
}
}
}
add_action('wp_head', 'custom_post_assets');
- CSS: Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets
stylesheet
lauten, während im 'Wert' der entsprechende Dateiname der CSS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll. - JavaScript: Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets
script
lauten, während im 'Wert' der entsprechende Dateiname der JS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
Hinweis: Die Verwendung von esc_url
dient dazu, sicherzustellen, dass die generierten URLs korrekt formatiert und sicher sind. Die Funktion file_exists
wird verwendet, um zu überprüfen, ob die referenzierten Dateien tatsächlich existieren, bevor sie in den Header eingefügt werden. Dies trägt zur Robustheit des Codes bei, verhindert Fehler bei nicht vorhandenen Dateien und bietet eine verbesserte Kontrolle über die Einbindung von Ressourcen.
Wer das Plug-in "reBusted!" verwendet, ist es gewohnt, jeweiligen Anpassungen den Browserverlauf nicht zu löschen. Darum kann es von Vorteil sein, einen Zeitstempel jeweiliger Änderung der Datei hinzuzufügen. Somit ist die Zeile anzupassen:
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '?v=' . filemtime(get_stylesheet_directory() . '/tuts/' . $stylesheet) . '" type="text/css" media="all" />' . PHP_EOL;
In diesem Beispiel wird der Zeitstempel (filemtime
) als Versionsnummer an die URL angehängt. Dadurch wird sichergestellt, dass der Browser die neueste Version der CSS-Datei abruft, wenn sich die Datei ändert.
Beispiel-Seite!
Hier ist die Beispiel-Seite für die Anwendung von Stylesheets über individuelle Felder! Beachte, dass die Seite im Lesemodus geöffnet ist, und daher kann der Schalter zum Normalmodus in der Headerzeile verwendet werden.
Bitte beachten! Im fünften Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
Anhang: so Notiz-Styles
Arbeitsvorgang
- Beiträge, welche schon eine Auszeichnung haben, extra als
.single .site-footer
auszuzeichnen, weil sonst die Übertragung des CSS nicht funktioniert.- [Gelöst] Nach Erstellung eines zweiten Beitrags selbiger Kategorie war der CSS Fehler des
.site-footer
weg.
- [Gelöst] Nach Erstellung eines zweiten Beitrags selbiger Kategorie war der CSS Fehler des
- Anklick' der Metadaten (Kategorie, Beitragsformat) vererbt sich bei
.search-toggle
die Auszeichnung. Wenn man.single .search-toggle
weglässt, ist es über die Auszeichnung.search-toggle
dennoch angezeigt und wirkt in die Metadaten anscheinend vererbend.- [Gelöst] Nach Erstellung eines zweiten Beitrags selbiger Kategorie hat sich die falsche Vererbung von CSS des
.search-toggle
abgehakt.
- [Gelöst] Nach Erstellung eines zweiten Beitrags selbiger Kategorie hat sich die falsche Vererbung von CSS des
- Auffallend war nach gewissen Herumwerkeln – dass die Beiträge zur Übertragung des CSS-Styles des IndF. speziell die CSS-Datei
.single
ausgezeichnet gehört, aber mit Ausnahme von.search-toggle
.
Body-Website pro Seite ändern:
- Wie zur Nachlese so im Titel Body-Website pro Seite ändern. Des Beispiels sehr passend die Farbe Body ändern. Mithin der Variation hier für die Kategorie-Seite das CSS
body.category-132 {background-color: TOMATO;}
. Diese Definition gilt dann nur für diese eine Kategorie-Seite und nicht für die Beiträge dieser Kategorie. - Im Weiter könnte auch der Abschnitt CSS Styles: Kategorien Farbe zuweisen sehr ansprechend sein.
Tab 4
Die Integration des PHP-Codes aus Tab 2 und Tab 3 in einem einzigen Codeabschnitt
Die Performance-Unterschiede zwischen den Codes aus Tab 2 und Tab 3 und des folgenden Codes sind in der Praxis wahrscheinlich vernachlässigbar, und die Wahl zwischen ihnen hängt oft von der spezifischen Implementierung und den Anforderungen ab. Lasse uns jedoch einige Aspekte betrachten:
- Wartbarkeit und Lesbarkeit:
- Der ersten beiden Code sind aufgeteilt in zwei separate Funktionen (
add_custom_css_class_to_body
undcustom_post_styles
), was die Lesbarkeit und Wartbarkeit verbessern kann. Jede Funktion hat eine klare Verantwortlichkeit. - Der zusammengefasste Code enthält alle Funktionen in einer einzigen Funktion (
enqueue_custom_css
), was die Dateigröße verringern kann, aber möglicherweise weniger lesbar und wartbar ist.
- Der ersten beiden Code sind aufgeteilt in zwei separate Funktionen (
- Spezifische Verantwortlichkeiten:
- Der erste Code aus 'Tab 2' kümmert sich um das Hinzufügen von benutzerdefinierten CSS-Klassen und der Code im 'Tab 3' das Einbinden von Stylesheets.
- Der zusammengefasste Code macht dasselbe, hat aber auch die Verantwortung, benutzerdefinierte CSS-Dateien zu enqueue.
- Einzigartigkeit der Funktionen:
- Im ersten Code können
add_custom_css_class_to_body
undcustom_post_styles
an verschiedenen Stellen im Code wiederverwendet werden, wenn dies erforderlich ist. - Im zweiten Code ist alles in einer Funktion gebündelt, was Flexibilität bei der Wiederverwendung einschränken könnte.
- Im ersten Code können
In Bezug auf die Performance sind beide Codes wahrscheinlich ähnlich. Es ist oft eine Abwägung zwischen Lesbarkeit, Wartbarkeit und spezifischen Anforderungen. Wenn der Code gut dokumentiert ist und die Lesbarkeit nicht beeinträchtigt wird, könnte der erste Code, aufgeteilt in separate Funktionen, die bevorzugte Option sein. Die Wahl zwischen den beiden Codes sollte eher auf Klarheit, Wartbarkeit und spezifischen Anforderungen basieren.
Entscheide basierend auf den oben genannten Faktoren und den Anforderungen deines Projekts.
Dies ist der zusammengefasste PHP-Code, allerdings ohne der Möglichkeit von JavaScript-Dateien:
function enqueue_custom_css() {
global $post;
// Hier den Namen des individuellen Felds für die CSS-Datei angeben
$custom_field_name = 'indcss';
// Überprüfen, ob das individuelle Feld für die CSS-Datei gesetzt ist
$custom_css_file = get_post_meta($post->ID, $custom_field_name, true);
// Überprüfe, ob das individuelle Feld 'custom_css_class' gesetzt ist
$custom_css_class = get_post_meta(get_the_ID(), 'custom_css_class', true);
// Überprüfe, ob das individuelle Feld 'stylesheet' gesetzt ist
$custom_stylesheets = get_post_meta($post->ID, 'stylesheet', false);
// Gemeinsamer Ordner für beide: 'tuts'
$common_folder_path = get_stylesheet_directory_uri() . '/tuts/';
if (!empty($custom_css_file)) {
// Enqueue der individuellen CSS-Datei
wp_enqueue_style($custom_field_name, $common_folder_path . $custom_css_file);
}
if (!empty($custom_css_class)) {
// Füge die CSS-Klasse hinzu
function add_custom_css_class_to_body($classes) {
global $custom_css_class;
$classes[] = $custom_css_class;
return $classes;
}
add_filter('body_class', 'add_custom_css_class_to_body');
}
if ($custom_stylesheets && is_array($custom_stylesheets)) {
foreach ($custom_stylesheets as $stylesheet) {
// Enqueue der benutzerdefinierten Stylesheets
wp_enqueue_style('custom_post_stylesheet', $common_folder_path . $stylesheet);
}
}
}
add_action('wp_enqueue_scripts', 'enqueue_custom_css');
Effizienter Workflow, das heißt auch Child-Theme.
Bitte beachten! Im fünften Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
Tab 5: Sicherheitsaspekte bei 'Individuellen Feldern'Tab 5
Rechtssicherheit zum Sicherheitshinweis
Das hier ist keine Sicherheitsberatung, nur ein freundlicher Reminder!
Sicherheitsaspekte bei 'Individuellen Feldern'
Die Verwendung von individuellen Feldern in WordPress bietet eine großartige Möglichkeit, zusätzliche Daten und Inhalte in deine Website einzufügen. Jedoch ist es wichtig, sich bewusst zu sein, dass diese Felder, wenn sie direkt auf der Website gerendert werden, mögliche Sicherheitsaspekte aufwerfen können.
Wenn du beispielsweise benutzerdefinierte CSS-Klassen oder Stile über individuelle Felder einfügst, kann dies potenzielle Sicherheitslücken schaffen. Es ist ratsam sicherzustellen, dass die eingefügten Inhalte sicher und vertrauenswürdig sind, um mögliche Angriffe zu minimieren.
Das Wichtigste ist, Inhalte, die in individuelle Felder eingefügt werden und dann direkt auf der Website erscheinen, vor der Verwendung zu überprüfen. Dies bedeutet, sicherzustellen, dass keine schädlichen Inhalte oder unerwünschten Codes eingefügt werden können.
Für Neueinsteiger könnte dies einschüchternd erscheinen, aber es gibt einige grundlegende Maßnahmen, um diese Sicherheitsbedenken anzugehen. WordPress bietet Sicherheitsfunktionen wie sanitize_text_field
, die dazu dienen, Benutzereingaben zu bereinigen und potenzielle Sicherheitsrisiken zu mindern.
Es ist empfehlenswert, bei der Eingabe von Daten in individuelle Felder Vorsicht walten zu lassen. Dies ist weniger ein Problem für einfache Inhalte wie Text oder Bild-URLs sowie für statische Dateien, die nur für grundlegende CSS-Stile verwendet werden. Diese fallen nicht in die Kategorie der potenziellen Risiken. Allerdings wird Vorsicht besonders relevant, wenn benutzerdefinierte Codes, Skripte oder komplexe Datenstrukturen eingefügt werden sollen.
Sehe ein Beispiel von wegen "Inhaltsanpassung mit CSS über Individuelle Felder" (siehe im Tab 2). Du möchtest ein Bild das im IndF eingefügt wird, über CSS animieren:
Das HTML im IndF:
<div class="image-container">
<img src="dein-bild.jpg" alt="Dein Bild">
</div>
Die Animation in der style.css
/* Bild Animation */
.image-container {
height: 300px; /* Höhe des Bildcontainers */
overflow: hidden; /* Verhindert, dass das Bild über den Container hinausragt */
}
.image-container img {
display: block;
width: 100%;
animation: floatUpDown 5s ease-in-out infinite; /* Animationsdauer und Wiederholung */
}
@keyframes floatUpDown {
0%, 100% {
transform: translateY(0); /* Anfangs- und Endpunkt: keine Verschiebung */
}
50% {
transform: translateY(-10px); /* Maximaler Auftrieb */
}
}
Das CSS ist statisch und wird von dir direkt im Code platziert. Solange es von einer vertrauenswürdigen Quelle stammt und du sicher bist, dass es keinen schädlichen Code enthält, ist es in der Regel nicht notwendig, solches CSS zu filtern oder zu sanitisieren.
Für statische Inhalte, die du als Entwickler direkt in deinem Code platzierst, brauchst du keine zusätzlichen Validierungs- oder Sanitisierungsprozesse durchzuführen.
Validierung, Sanitisierung oder Escaping-Prozesse: Diese Prozesse sind hauptsächlich für Benutzereingaben gedacht, die in deine Datenbank eingefügt und dann auf der Website angezeigt werden.
Diese Prozesse sind besonders wichtig, wenn du dynamische Inhalte von Benutzern erhältst, die auf deiner Website veröffentlicht werden. Zum Beispiel Kommentare, Formulareingaben oder Felder, die von Benutzern aktualisiert werden können. Hier ist es wichtig sicherzustellen, dass solche Daten sicher und sauber sind, bevor sie auf der Website angezeigt werden.
Die Sicherheitshinweise zu den individuellen Feldern sollte kein Hindernis sein, um sie zu nutzen, sondern eine Erinnerung daran, achtsam und informiert zu handeln, um deine Website sicher zu halten!
Wie Eingangs betont: Das hier ist keine Sicherheitsberatung, nur ein freundlicher Reminder!
Herzlichen Glückwunsch!
Du hast jetzt die Grundlagen der 'Individuellen Felder' in WordPress kennengelernt und wie sie in Kombination mit CSS-Styles eine Website bereichern können. Viel Spaß beim Ausprobieren und Anpassen!
Nachdem wir nun die Grundlagen der 'Individuellen Felder' kennengelernt haben und wissen, wie sie funktionieren, könnten die folgenden Plug-ins, die im nächsten Tab aufgeführt sind, nützlich sein.
Tab 6: Vorteile der Plug-insTab 6
Vorteile der Plug-ins
Diese Erweiterungen richten sich nicht an den gelegentlichen Gebrauch, sondern an fortgeschrittene Anforderungen und spezifische Use Cases, die über die grundlegenden Funktionen der individuellen Felder hinausgehen.
Erweiterung für fortgeschrittene Anforderungen: Während grundlegende individuelle Felder oft ausreichen, um einfache Daten zu speichern und anzuzeigen, bieten Plug-ins wie Custom Post Types and Custom Fields creator – WCK' oder 'Meta Box – WordPress Custom Fields Framework' zusätzliche Funktionalitäten für anspruchsvollere Anforderungen. Sie erlauben es, komplexere Daten zu verwalten und sie auf vielfältige Weise auf einer Website darzustellen.
Effizienzsteigerung: Durch die Integration dieser Erweiterungen kannst du deine Arbeitsabläufe optimieren. Die schnelle Erstellung benutzerdefinierter Feldtypen spart Zeit und ermöglicht es, eine Website effizienter zu verwalten. Diese Vorteile helfen nicht nur bei der Optimierung einer Website, sondern tragen auch zur Verbesserung der Benutzererfahrung und des Website-Designs bei.
Advanced Custom Fields (ACF) mit 17,1 MB. Ein bemerkenswert vielseitiges Plug-in, das die Erstellung benutzerdefinierter Felder und Inhalte erleichtert.
Es bietet eine intuitive Benutzeroberfläche und ermöglicht die schnelle Erstellung benutzerdefinierter Feldtypen, was die Entwicklung von Inhalten und Designs flexibler macht. Es bietet auch eine Vielzahl von Add-ons und Erweiterungen, die spezifische Funktionen und Optionen hinzufügen. Zum Beispiel ermöglicht "ACF Theme Code for Advanced Custom Fields" (145 KB) eine nahtlose Integration deiner benutzerdefinierten Felder in das Theme.
Weitere eigenständige Plugins sind Custom Post Types and Custom Fields creator – WCK (6,5 MB):
…oder Meta Box – WordPress Custom Fields Framework (5,1 MB):
Diese eigenständigen Plug-ins erweitern die Funktionalität von ACF und bieten maßgeschneiderte Lösungen für spezifische Website-Anforderungen. Sie ermöglichen eine erweiterte Verwendung benutzerdefinierter Felder und ergänzen die Funktionalität von ACF um zusätzliche Anpassungsmöglichkeiten.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024-Januar