Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
WP: Individuelle Felder
smilies.4-user.de

WP: Individuelle Felder, Grundlagen und CSS-Styles

Illustration, geralt
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
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

Individuelle Felder werden normalerweise als Teil der Metadaten eines Beitrags oder einer Seite gespeichert. Sie sind besonders effizient, wenn spezifische Informationen abgerufen werden müssen, um die Seite zu rendern, da sie direkt mit dem Post oder der Seite verknüpft sind. Ihr Aufruf ist direkt und erfordert keine zusätzliche Verarbeitung. – Individuelle Felder sind in der Regel effizienter, wenn es um den direkten Zugriff auf spezifische Daten geht.

Shortcodes

Shortcodes werden oft verwendet, um spezifische Funktionalitäten oder angepasste Inhalte in den Editor einzufügen. Sie können aufwändiger in der Verarbeitung sein, da sie bei der Anzeige der Seite dynamisch interpretiert und ausgeführt werden müssen, um ihren Inhalt zu rendern. Das kann bei einer großen Anzahl von Shortcodes auf einer Seite zu einer zusätzlichen Belastung führen. – Shortcodes könnten mehr Verarbeitungsleistung erfordern, insbesondere bei komplexeren Anwendungen.
  • '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

Dein Bild

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 Namen info 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:

WP: Individuelles Feld

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:

Ein neues individuelles Feld eingeben

  1. → 'Neu eingeben' anklicken.

Ein neues individuelles Feld hinzufügen

  1. Unter dem Feld 'Name' die Klasse info gemäß dem obigen Beispielcode eingeben.
  2. 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>
  1. '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 Felder

Tab 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 zuweisen

Tab 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'.

WP Individuelles Feld
Name + Wert eintragen und IndF. hinzufügen.

  1. 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 das kochrezepte.css.
  2. Weiter im Beispiel des PHP-Codes bezieht sich der Name auf das Stylesheet-Verzeichnis tuts. Daher sollte im Child-Theme ein Ordner namens tuts erstellt werden.
  3. Dieser Ordner ist dann für die CSS-Datei kochrezepte.css gedacht, die darin erstellt werden soll. In einem Texteditor die CSS-Datei kochrezepte.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;
}
  1. Die Datei kochrezepte.css nun in den Ordner tuts 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.

  1. 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');
  1. 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');
  1. 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.

Salzstangerl


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
  1. 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.
  2. 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.
  3. 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

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:

  1. Wartbarkeit und Lesbarkeit:
    • Der ersten beiden Code sind aufgeteilt in zwei separate Funktionen (add_custom_css_class_to_body und custom_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.
  2. 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.
  3. Einzigartigkeit der Funktionen:
    • Im ersten Code können add_custom_css_class_to_body und custom_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.

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-ins

Tab 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.

Advanced Custom Fields (ACF)

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):

Custom Post Types and Custom Fields creator – WCK

…oder Meta Box – WordPress Custom Fields Framework (5,1 MB):

Meta Box – WordPress Custom Fields Framework

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.

zeitmaschine, gifzentrale.com

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-Januar

Beispiel für 'Individuelle Felder': 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 content.php.
Durch die Verwendung von 'Individuellen Feldern', wie in diesem Beispiel mit dem 'Namen' info 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.