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

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

1. → ‘Neu eingeben’ anklicken.

2. Mit dem Code vom obigen Beispiel ist unter das Feld Name die Class info einzugeben.
3. 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;
}}

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

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

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

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

• 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!

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

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