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
Hier in WordPress geht es auch um den Begriff 'Individuelle Felder'. So der Frage des Anwenders: Was ist das und wie ist so ein 'Individuelle Feld' zu nutzen. Nun, das ist hier im Beschrieb und Beispiel gezeigt. Des Weiteren ist hier ein Beispiel 'Individuelle Feld' zum Stylesheet für Body. – Die 'Individuelle Felder' in WordPress waren im Namen 'Benutzerdefinierte Felder'. Des Letzteren ist das auch der Name in ClassicPress.
Bez. 'Individuelle Felder' hier bezeichnet als Ind.F.
- Die Ind.F. sind im Editor rechts oben über 'Ansicht anpassen' und dem Häkchen bei 'Individuelle Felder' zu aktivieren.
- Dann sind diese unterhalb des Editors zum individuellen Gebrauch zu nutzen.
- In Anmerkung: Das mit den Ind.F. ist noch viel mehr von Bedeutung. Nämlich ist dort zu sehen, dass für Funktionen von Plug-ins.
Ind.F., die Basics
'Individuelle Felder' für den Anwender
Die Ind.F. sind ähnlich den Shortcodes, der für den Content so geeignet ist. Die Ind.F. sind auch zur Darstellung außerhalb vom Content des Editors. Zudem der Website für solches, welches nur da und dort und individuellen Inhalts anzuzeigen ist.
Hierzu gleich mal so Beispiel. Das Ind.F. ist unterhalb des Beitrags und nur diesem Beitrag hier visuell.
Ind.F.: Das PHP für das Theme
Im Untertitel gleich der Frage: Wie kommt das Ind.F. in den Bereich außerhalb des Contents? Im Folgenden ist das der Code, welcher dann in das Theme zu editieren ist.
Somit ist erst mal der Code, um im Theme so Text usw. über ein Ind.F. zu illustrieren. Die Class ist hier der Namensgebung info
.
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo '<div class="info">';
echo get_post_meta($postid, 'info', true);
echo '</div>';
wp_reset_query();
?>
Pr. WP-Freund
- Dem Code ist Logo kein direkter Text dabei, denn der Inhalt dazu ist ja in das Ind.F. zu schreiben!
- Vorab Information! – die
class
da im Nameninfo
ist für das Ind.F. relevant.- Somit ist mithilfe des Ind.F. und der Class das einen Beitrag immer wieder anzuwenden, und zwar so individuellen Inhalts.
- Und des Codes in Namensänderung von Class kann man des mehreren des Ind.F. erstellen …
Noch mal, der Code da oben ist im Theme dort einzutragen, wo der Content vom Ind.F. sein soll. So wie diesem Bsp, da ist das des Themes im Ordner inc
der template-tags.php
:

Nun gehts weiter zu den …
Ind.F. die Felder
Im Editor nach unten zu den Elementen scrollen. Dort bei 'Individuelle Felder' und dem Ausklappen des Elements. So sind evtl. schon mehrere Ind.F. zu sehen, die von Plug-ins Bedarf so angelegt sind. – bei Interesse, da hätte ich dazu ein kleines Beispiel der Frage, wie das so siehe Des WP-Routiniers so angewandte Nutzeffekte.
Sodann …
Ein neues individuelles Feld hinzufügen
- → 'Neu eingeben' anklicken.
- Mit dem Code vom obigen Beispiel ist unter das Feld Name die Class
info
einzugeben. - Dem sog. Wert dann den individuellen Text …
- Der Name 'Wert' da ist der passende Begriff, denn so ein Feld kann mit
0
und1
,true
oderfalse
arbeiten. Das ist, welches sich so Plug-ins das Ind.F. nutzen. - Weiter der Eingabe von Text versteht sich da HTML einfacher Formatierung und Bilder auch mit Link und so. Indes ist der Zeilenumbruch mit
<br>
zu handhaben. Der Inhalt, da von dir erstellt, ist am besten zu kopieren, und desselben ist für anderen Beitrag zur Hand. Denn das Feld selbst lebt nur durch den Namen, dieclass
im PHP-Code. Der Wert, also der Inhalt, ist jeweils neu einzugeben. Somit ist eben auch immer individueller Text passend zum Content zu erstellen!
- Der Name 'Wert' da ist der passende Begriff, denn so ein Feld kann mit
Das Bsp des Ind.F. für den 'Wert':
<a href="https://wegerl.at/wp-css-style-body-eigene-felder/#ih"><img class="aligncenter indf wp-image-214956 size-medium" style="margin-top: 50px; margin-bottom: 50px;" role="img" src="https://wegerl.at/wp-content/uploads/2022/07/puzzle5-bsp.svg" alt="puzzle" max-width="474" max-height="272" /></a> <p class="indf" style="font-size: 28px;">Bsp 'Individuelles Feld' von Text.</p>
… und folgend ist die Class indf
. Hinzu das mit @media
, sonst ist das nicht so responsiv. Bsp für Twenty Fourteen Theme:
.indf {
margin-right: 54px;
max-width: 474px;
}
@media screen and (min-width: 1040px) {
.indf {
max-width: 474px;
margin-left: 83px !important;
}}
@media screen and (min-width: 673px) {
.indf {
margin: 0 auto;
max-width: 474px;
padding-right: 30px;
padding-left: 30px;
}}
@media all and (max-width: 672px) {
.indf {
margin: 0 auto;
max-width: 474px;
padding-right: 9px;
padding-left: 9px;
}}
- 'Individuelles Feld hinzufügen' anklicken.
- Was besonders schön ist, das Feld zu editieren und zu aktualisieren. Von wegen Nichtgebrauchs ist das auch zu löschen.
- Ei das! – die Ind.F. sind der Reihung alphabetisch.
Danke! – ich hoffe, dir, uns ist geholfen.
Nächst Tab: CSS-Style Body
Style Body
CSS-Style Body über 'Individuelle Felder'
Vorab zu texto.de: Seit geraume Zeit ist diese Website nicht mehr zum Besuch. – so bleibt in memoriam Danksagung, +1 Monika; der Artikel war im Titel 'Einzelnen Artikeln oder Seiten spezieller Style zuweisen'. Den Artikel konnte ich nicht in der 'Wayback-Machine' finden, aber hier ist meine damalige Aufzeichnung zu diesem Beitrag.
Bsp anderer Beitrag zu 'Individuelle Felder' damals namens 'Benutzerdefinierte Felder' von texto.de siehe der Wayback-Machine.
Das nun ist zur Auszeichnung
von Body der Website
- Individuelle Felder

Dem 'Individuelle Felder' einen 'Namen' eintragen. Diesem Beispiel stylesheet
, sodann den 'Wert', das hier wird der spezifische Dateiname, welcher zur CSS Datei führt, so hier heißt das kochrezepte.css
- Einen Ordner im Childs-Theme anlegen:
FTP-Client, Web-Host-Serverwordpress
/wp-content
/themes
/MeinChildTheme
. Da ist der Ordnertuts
zu erstellen. Folgend des Beispiels ist der Name des Ordnerstuts
. Dieser Ordner ist dann für die CSS-Datei, welche hier hochzuladen ist. - Die
header.php
. In derheader.php
des Themes die 'Individuelle Felder' holen: Einzufügen in dieheader.php
vor</head>
. Codebeispiel – Beispiel, da ja der Ordnername individuell ist.
<?php
global $post;
if ( isset($post->ID) ) {
$styles = get_post_meta($post->ID, 'stylesheet', false);
if ( $styles && is_array( $styles ) ) {
foreach ( $styles as $stylesheet ) {
echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/tuts/' . $stylesheet . '" type="text/css" media="all" />' . "";
}
}
}?>
Ohne Child Theme muss nach Theme-Update evtl. der Code erneuert werden.
Anders gehts auch den Code in die functions.php
functions.php.
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
*PASTE HEADER CODE HERE da ist dann der Code einzutragen, der für die header.php
ist.
- Zum Code die Nachlese im Titel Wie man Code zum WordPress Header und Footer hinzufügt.
Die Snippets zur functions.php
ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!
- Dann ist fertig. – im Texteditor die CSS Datei erstellen, diese könnte so aussehen: Der Dateiname ist der, welcher im 'Individuelle Felder' als 'Wert' eingetragen ist.
Dateiname kochrezepte.css
.search-toggle { background-color: #0EB26D; } .site-header, #secondary, .site:before { background-color: TOMATO; } .site-footer { background: -webkit-gradient(linear,0 0,0 100%,from(TOMATO),to(#FFA493)); background: -moz-linear-gradient(top,TOMATO,#FFA493); }
Die Datei in den Ordner tuts
laden. Oder auch gleich dort via FTP-Client erstellen.
Ohne Child Theme muss nach Theme-Update evtl. der Ordner "tuts" zusammen Datei CSS-Code erneuert werden. Also diesen Ordner als Kopie auch in das FTP-Programm herunterladen und behalten. – so braucht man diesen nach Theme-Update nur wieder auf den Web-Host-Server hochzuladen. –, also nein, wenn mal Zeit ist, nun auf zum Childs-Theme! – dort im Ordner MeinChildTheme ist der Ordner tuts
dann am besten aufgehoben.
Okay! – s. hier die Beispielseite! –
noch mal Danksagung, +1 Monika und klick an die
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 Ind.F. 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.
Aktualisiert im Jahr 2023-Juni