CSS-Style Body über WP ‘Individuelle Felder’

Info echo

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; 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 zur Darstellung außerhalb vom Content des Editors. Zudem der Website für solches, welches nur da und dort und individuellen Inhalts anzuzeigen ist.

WP Individuelle Felder / CP Benutzerdefinierte Felder
… klickt an das Bild zum Ind.F.

Hierzu gleich mal so Beispiel. Das Ind.F. ist unterhalb des Beitrags und nur diesem Beitrag hier visuell. – klick an das Bild. →

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

Indiv.-F.-Theme
Derart so direkt im Theme ist das nach Theme Update evtl. zu erneuern.

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

Ein neues individuelles Feld eingeben

  1. → ‘Neu eingeben’ anklicken.

Ein neues individuelles Feld hinzufügen

  1. Mit dem Code vom obigen Beispiel ist unter das Feld Name die Class info einzugeben.
  2. Dem sog. Wert dann den individuellen Text …
    • Der Name ‘Wert’ da ist der passende Begriff, denn so ein Feld kann mit 0 und 1, true oder false 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, die class im PHP-Code. Der Wert, also der Inhalt, ist jeweils neu einzugeben. Somit ist eben auch immer individueller Text passend zum Content zu erstellen!

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;
}}
  1. ‘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

  1. Individuelle Felder
WP Individuelles Feld
Name + Wert eintragen und Ind.F. hinzufügen

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

  1. Einen Ordner im Childs-Theme anlegen:
    FTP-Client, Web-Host-Server wordpress /wp-content / themes/ MeinChildTheme. Da ist der Ordner tuts  zu erstellen. Folgend des Beispiels ist der Name des Ordners  tuts. Dieser Ordner ist dann für die CSS-Datei, welche hier hochzuladen ist.
  2. Die header.php. In der header.php des Themes die ‘Individuelle Felder’ holen: Einzufügen in die header.php vor </head>. Codebeispiel – Beispiel, da ja der Ordnername individuell ist.

header.php

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

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 mit Childs Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

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

Salz-Stangerl

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

Vorig Tab: Ind.F., die Basics


Aktualisiert im Jahr 2022-Juli

puzzle

Bsp 'Individuelles Feld' von Text.