Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Werbung
Mehr schaffen in weniger Zeit – Der Advanced Editor für kreative Köpfe.
Optimieren Sie Ihre Bearbeitung: Advanced Editor Tools
Mit dem Advanced Editor können Designer und Content Creatoren kreative Ideen umsetzten.
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.
Im Tab 1 werden wir zunächst den Ansatz untersuchen, bei dem die IndF direkt im Theme eingebettet werden. Dabei wird der Inhalt direkt im IndF geschrieben.
Im Tab 2 werden wir eine alternative Methode ansehen, bei der eine spezifische Datei im IndF definiert und geladen wird.
Beim Einbetten von IndF direkt im Theme werden die benutzerdefinierten Stile und Funktionen direkt in den Theme-Dateien selbst definiert, ohne dass eine separate Datei erstellt wird. Dies bedeutet, dass der Code direkt in die vorhandenen Theme-Dateien eingefügt wird, wie beispielsweise der content.php und dazu im IndF der Wert als Inhalt, welcher visuell wird.
Individuelle Felder: Direkt im Theme eingebettet
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 mit Klick zum IndF und bitte komm von dort mit einem Klick zurück – Mit Shift+Tab kommst du auch zurück, mit Glück!
PHP für 'Individuelle Felder' im Theme
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 drei Codes bereitgestellt. Die Codes erfüllen im Wesentlichen denselben Zweck, indem sie den Wert des IndF, hier des Beipiels im 'Namen' tut-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 tut-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 'tut-info' des aktuellen Beitrags zu und gibt den Wert aus
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo '<div class="tut-info">';
echo get_post_meta($postid, 'tut-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' tut-info abzurufen:
<?php
// Hole den Wert des individuellen Feldes 'tut-info'
$custom_field_value = get_post_meta( get_the_ID(), 'tut-info', true );
// Überprüfe, ob das individuelle Feld einen Wert hat
if ( ! empty( $custom_field_value ) ) {
echo '<div class="tut-info">' . $custom_field_value . '</div>';
}
?>
Der folgende dritte Code: Durch die Verwendung von sanitize_key() wird sichergestellt, dass der Meta-Schlüssel gültig ist und nur aus alphanumerischen Zeichen besteht. Dies trägt dazu bei, potenzielle Sicherheitsrisiken durch unerwartete oder böswillige Meta-Schlüssel zu minimieren.
Die Anwendung von sanitize_key() auf den Meta-Schlüssel hat keinen Einfluss auf den Wert des individuellen Feldes (IndF) selbst. Sie betrifft nur den Schlüssel, der verwendet wird, um auf das individuelle Feld zuzugreifen. Der Wert des individuellen Feldes bleibt unverändert und wird nur durch get_post_meta() abgerufen.
Es ist immer eine gute Praxis, Sicherheitsfunktionen wie sanitize_key() zu verwenden, um deine WordPress-Website gegen potenzielle Sicherheitsbedrohungen zu schützen:
<?php
// Meta-Schlüssel validieren mit sanitize_key()
$meta_key = sanitize_key( 'tut-info' );
// Hole den Wert des individuellen Feldes 'tut-info'
$custom_field_value = get_post_meta( get_the_ID(), $meta_key, true );
// Überprüfe, ob das individuelle Feld einen Wert hat
if ( ! empty( $custom_field_value ) ) {
// Escape des Ausgabewerts mit esc_html(), um HTML-Inhalte zu verhindern
echo '<div class="tut-info">' . esc_html( $custom_field_value ) . '</div>';
}
?>
Den Codes ist logisch kein direkter Text dabei, denn der Inhalt dazu ist ja in das individuelle Feld unter 'Wert' zu schreiben.
Der Bereich <div class="tut-info">, welcher den Namen tut-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 von oben ist im Theme dem Template 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 Felder zu sehen, die von Plug-ins nach Bedarf so angelegt sind. Die IndF sind der Reihung alphabetisch angeordnet.
Ein neues individuelles Feld hinzufügen:
Unter dem Feld 'Name' die Classe tut-info gemäß dem obigen Beispielcode eingeben.
Im Feld 'Wert' den individuellen Inhalt eingeben.
Beispiel des IndF für den 'Wert', also der Inhalt:
<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>
'Individuelles Feld hinzufügen' anklicken.
Von wegen Nichtgebrauchs kann das gesamte IndF auch wieder gelöscht werden.
Die Margins sollten konkret ausgezeichnet sein, denn so von: margin: 50px 0; wird das Bild links angelegt statt aligncenter.
Zur Frage: CSS für 'Individuelle Felder' im 'Wert'?
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.
Bitte beachten! Im vierten Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
Eine separate Datei wird erstellt, um benutzerdefinierte Stile und Funktionen zu definieren, und dann wird diese Datei über das IndF geladen. Diese spezifische Datei kann beispielsweise eine benutzerdefinierte CSS- oder JS-Datei sein, die im Child-Theme-Verzeichnis hier des Beispiels im Ordner tuts gespeichert sind.
Individuelle Felder: Datei einbinden
Durch diese Methode bleiben unsere benutzerdefinierten Stile in einer separaten Datei organisiert und können leicht verwaltet und angepasst werden.
Als Erstes erstellen wir im Child-Theme den Ordner im Namen tuts, in welchem folgend die entsprechenden Dateien gespeichert werden.
CSS-Datei: im Ordner tuts eine CSS-Datei im Namen beipiele.css erstellen, wo dann die separaten Styles eingefügt werden können.
JS-Datei ist desselben im Ordner tuts eine JS-Datei im Namen beipiele.js zu erstellen, wo dann die separaten Scripts eingefügt werden können.
Für den Anfang orientiert sich dieses Beispiel daran. Im weiteren Verlauf können innerhalb des tuts-Ordners verschiedene CSS- und JS-Dateien erstellt werden. Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets tut-stylesheet lauten, während im 'Wert' der entsprechende Dateiname der CSS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
PHP für 'Individuelle Felder' und CSS-Datei
Mit einem PHP-Code können benutzerdefinierte CSS-Klassen in die IndF eingebunden werden, um den Inhalt direkt mit einer spezifischen CSS-Klasse zu kennzeichnen.
functions.php
/* --- IndF-Funktion zum Hinzufügen von Stylesheets in den wp_footer-Hook für Beiträge und Seiten --- */
function custom_post_styles_footer() {
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, 'tut-stylesheet', 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 im Footer eingefügt wird
if ( file_exists($stylesheet_path) ) {
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '?v=' . filemtime($stylesheet_path) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
}
}
}
add_action('wp_footer', 'custom_post_styles_footer');
/* Ende IndF-Funktion zum Hinzufügen von Stylesheets in den wp_footer-Hook für Beiträge und Seiten */
CSS: Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets tut-stylesheet lauten, während im 'Wert' der entsprechende Dateiname der CSS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
PHP für 'Individuelle Felder' und JavaScript
Mit einem PHP-Code können benutzerdefinierte JavaScripte in die IndF eingebunden werden, um den Inhalt direkt mit einem spezifischen Script zu kennzeichnen.
/* --- IndF-Funktion zum Hinzufügen von JavaScript-Dateien in den wp_footer-Hook für Beiträge und Seiten --- */
function custom_post_scripts_footer() {
if ( is_single() || is_page() ) { // Prüfung, ob es sich um einen einzelnen Beitrag oder eine Seite handelt
global $post;
if ( isset($post->ID) ) {
$scripts = get_post_meta($post->ID, 'tut-script', false);
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 im Footer eingefügt wird
if ( file_exists($script_path) ) {
echo '<script src="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $script ) . '?v=' . filemtime($script_path) . '" type="text/javascript"></script>' . PHP_EOL;
}
}
}
}
}
}
add_action('wp_footer', 'custom_post_scripts_footer');
/* Ende IndF-Funktion zum Hinzufügen von JavaScript-Dateien in den wp_footer-Hook für Beiträge und Seiten */
JavaScript: Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets tut-script lauten, während im 'Wert' der entsprechende Dateiname der JS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
Die beiden Codes in Einem (CSS und JavaScript)
/* --- IndF-Funktion zum Hinzufügen von Stylesheets und JavaScript-Dateien in den wp_footer-Hook für Beiträge und Seiten --- */
function custom_post_assets_footer() {
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, 'tut-stylesheet', 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 im Footer eingefügt wird
if ( file_exists($stylesheet_path) ) {
echo '<link rel="stylesheet" href="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $stylesheet ) . '?v=' . filemtime($stylesheet_path) . '" type="text/css" media="all" />' . PHP_EOL;
}
}
}
$scripts = get_post_meta($post->ID, 'tut-script', false);
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 im Footer eingefügt wird
if ( file_exists($script_path) ) {
echo '<script src="' . esc_url( get_stylesheet_directory_uri() . '/tuts/' . $script ) . '?v=' . filemtime($script_path) . '" type="text/javascript"></script>' . PHP_EOL;
}
}
}
}
}
}
add_action('wp_footer', 'custom_post_assets_footer');
/* Ende IndF-Funktion zum Hinzufügen von Stylesheets und JavaScript-Dateien in den wp_footer-Hook für Beiträge und Seiten */
CSS: Bei der Hinzufügung eines neuen individuellen Feldes sollte der 'Name' stets tut-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 tut-script lauten, während im 'Wert' der entsprechende Dateiname der JS-Datei einzutragen ist, die der jeweiligen Seite hinzugefügt werden soll.
'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 Felder zu sehen, die von Plug-ins nach Bedarf so angelegt sind. Die IndF sind der Reihung alphabetisch angeordnet.
Ein neues individuelles Feld hinzufügen:
Unter dem Feld 'Name' welches hinzugefügt werden sollte, in unserm Beispiel tut-sylesheet eingeben.
Im Feld 'Wert' die Datei, welches das IndF aufrufen sollte, hier ist das die beispiele.css.
'Individuelles Feld hinzufügen' anklicken.
Hiermit wird der Seite die Datei beispiele.css beigefügt. Ein direktes Beispiel ist im Tab 3.
Von wegen Nichtgebrauchs kann das IndF auch wieder gelöscht werden.
Bei der Entwicklung individueller Beiträge oder Seiten kann es sinnvoll sein, spezifische CSS- und JavaScript-Codeabschnitte nur bei Bedarf zu laden, um die Leistung der Website ... weiterlesen
Bitte beachten! Im vierten Tab werden Fragen zur Sicherheit der Website behandelt, die in Bezug auf Inhalte über CSS und insbesondere JS mittels individueller Felder auftreten.
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' und CSS – das Beispiel
Beginnen wir nun den Workflow wie es infolge "Tab 2" beschrieben ist: also erst 'Name' und 'Wert' in das 'Individuellen Feld' eintragen.
Name + Wert eintragen und IndF. hinzufügen.
Wie zu Beginn dokumentiert, sollte im individuellen Feld (IndF) unter 'Name' tut-stylesheet eingetragen werden und unter 'Wert' der Dateiname der CSS-Datei – in diesem Beispiel kochrezepte.css.
Individuelle Felder: Dem 'Individuellen Feld' einen 'Namen' eintragen. Diesem Beispiel tut-stylesheet, sodann den 'Wert', das hier wird der spezifische Dateiname, welcher zur CSS Datei führt, hier heißt das kochrezepte.css.
Weiter im Beispiel des PHP-Codes bezieht sich der Name auf das Verzeichnis tuts, das im Child-Theme zu erstellen ist Daher sollte der Ordner namens tuts erstellt werden.
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:
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 haben wir im Tab 2 besprochen.
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.
Die Backstube: [caption id="attachment_233525" align="aligncenter" width="1280"] Background von kerdkanno.[/caption] Maßgeschneiderte CSS-Auszeichnung für diese Seite durch 'Individuelle Felder'. Sehe auch mittels Swipe in der Kopfzeile zum ... weiterlesen
Bitte beachten! Im vierten 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.
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.
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.
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.
Beispiel
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:
/* 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!
Das hier ist keine Sicherheitsberatung, nur ein freundlicher Reminder!
Herzlichen Glückwunsch!
Du hast jetzt die Grundlagen der 'Individuellen Felder' in WordPress kennengelernt. 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.
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.
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.
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.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
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.
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.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo! – zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Die Erstellung von Website-Inhalten erfordert oft kreative Ideen. Es wäre interessant zu erfahren, wo Ideen für die Gestaltung der Website-Inhalte gefunden werden und wie diese gestaltet werden. Bitte mitteilen, wie typischerweise Inspiration für die Website-Inhalte gefunden wird.
Sie können die Tastaturnavigation nutzen: Tab zum Fokussieren, Leertaste zum Auswählen und Esc zum Schließen der Rundfrage.
Wird geladen ...
Falls alle Optionen ausgewählt werden sollen, empfiehlt es sich, im Ausschlussverfahren festzustellen, auf welche am ehesten verzichtet werden kann, und dann das auszuwählen, was am wichtigsten erscheint.
Hinweis zur Tastaturnavigation: Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
🎶 Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Zur Optimierung unserer Website nutzen wir Tools wie 'Statify' und 'Visit Duration', die anonymisierte Daten wie die Verweildauer erfassen.
'Ist das Plug-in Docket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Lesen Sie die Inhalte nicht bequem?
Erhöhen Sie die Schriftgröße über die der Headerzeile oder gleich hier:
NORMAL, LARGE oder X-LARGE
Möchten Sie das Licht an- oder ausschalten?
Bitte sehr: Licht Ein/Aus
… auch Kontrast -/+ anpassen.
Sie können auch die Tastatur verwenden: Fokus mit Tab, Auswahl mit Space und Schließen mit Esc.
Im Inhalt die Tastaturnavigation:
Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
Tabulator (Tab): Navigiert durch interaktive Elemente.
Shift + Tab: Gehe zurück zum vorherigen Element.
Enter: Erste Betätigung fokussiert, zweite aktiviert.
Pfeiltasten: Scrollen in Texten oder Menüs.
Leertaste: Aktiviert Header-Buttons und scrollt im Content.
