Seite eigenes Template

  • Hallo Forum,
    ich möchte das einige Seiten meiner Website andersfarbig sind. z.B. Home grün - Impressum grau
    Wie ich ein neue "Tempate" anlege um es später unter atribute auszuwählen weiß ich (vermute ich)

    Wie aber "bringe" ich dem TEST Page Template bei eine andere css zu nutzen um in dieser eine andere Hntergrund- und LinkFarbe zu nutzen.

    Gruß Ralf

    http://wordpress.a-z80.de

    Nur wer fragt dem kann geholfen werden

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Wie aber "bringe" ich dem TEST Page Template bei eine andere css zu nutzen um in dieser eine andere Hntergrund- und LinkFarbe zu nutzen.

    Oh gelle, warum einfach, wenn es auch kompliziert geht?

    Also: kompliziert: Deine verschiedenen Page-Templates bekommen jeweils einen eigenen header, der auf jeweils eine eigene css-Datei verweist. Noch schöner: Du legst in der functions.php fest, welches css zu welcher Seite geladen wird.

    Einfacher: Mach alles in deiner style.css und definiere die Hintergrund- und anderen Farben anhand einer eindeutig vergebenen Klasse oder ID. Die Funktion wp_body_class bringt dafür eigentlich schon alles nötige mit. D.h. eigentlich brauchst du noch nicht einmal die einzelnen Seiten-Templates.

    Das mit den eigenen Templates kann aber sinnvoll sein, das hängt davon ab, wer was wie einstellen und ändern können soll: Es ist umständlicher, bei jeder neuen Seite extra das Template mit der passenden Farbe auswählen zu müssen. Dafür kann das auch ein Benutzer im Admin-Bereich machen, während sonst die page-id in der css-Datei mit aufgenommen werden muss.

    Gruß
    helix

  • Hallo Helix,
    danke für die schnelle Rückmeldung. Ich möchte es einfach :-)

    Zitat

    Einfacher: Mach alles in deiner style.css und definiere die Hintergrund- und anderen Farben anhand einer eindeutig vergebenen Klasse oder ID.

    Nutze ich da die ID die WP für jede Page automatisch vergibt?

    Zitat

    Noch schöner: Du legst in der functions.php fest, welches css zu welcher Seite geladen wird.

    Wie könnte so ein Code für die functions.php aussehen?
    Das mit "Funktion wp_body_class" verstehe ich gerade nicht.

    Gruß Ralf

    Nur wer fragt dem kann geholfen werden

  • Ganz einfach so oder so ähnlich per style.css (vorzugsweise im child-theme, oder auch per custom css):

    PHP
    .page-id-123 {background-color: #0f0;}
  • Ja, ich hatte vermutet, dass in deinem Theme die body-class schon eingebunden ist. Ist eigentlich Standard.
    Insofern hast du es ja jetzt darüber gelöst. (Daher kommt die css-Klasse mit der page-id.)

    […] Wie könnte so ein Code für die functions.php aussehen?

    Das war nur ein relativ allgemeiner Hinweis: Generell ist es besser / vernünftiger, die Stylesheet-Datei in der functions.php über register_style und enqueue_style zu definieren (und nicht „old school“ in der header.php) – insbesondere dann, wenn man mehrere Stylesheet-Dateien oder viele PlugIns nutzt.

    Gruß
    helix

  • NACHFRAGE:

    Das mit den farbigen Seiten hat ja nun geklappt. Seite TEST ist GELB (http://wordpress.a-z80.de/test/ ) Seite IMPRESSUM blau.
    Realisiert mit:

    .page-id-45 .main-navigation a:hover {
    background-color: #FBF200;
    color: #000;
    }

    .page-id-45 .main-navigation ul li.current_page_item a {
    background-color: #FBF200;
    color: #000;
    }

    .page-id-45 #page {
    border-top: 15px solid #FBF200;
    }

    .page-id-45 .footer-socket-wrapper {
    border-top: 3px solid #FBF200;
    }

    .page-id-45 a {
    color: #000;
    }

    .page-id-45 a:hover {
    color: #c0c0c0;
    }

    Wie bekomme ich aber nun hin, dass die Seite TEST 1 ebenfalls gelb wird?
    Wie füge ich die id der Seite Test 2 in die CSS Anweisung ein?

    Gibt es eine bessere Lösung?
    Ich möchte nämlich noch weitere Unterseiten zu TEST hinzufügen und nicht für jede Seite die CSS um wieder eine ID erweitern.

    PS: Die Seite TEST und TEST1 nutzen ein eigenes Layout (test) - eine Kopie der page.php - liegend im Child Ornder mit der Anweisung:

    <?php
    /*
    * Template Name: test
    */
    ?>

    <?php get_header(); ?>

    Über Hilfe würde ich mich freuen.

    Gruß Ralf

    Nur wer fragt dem kann geholfen werden

  • Hm, hoffentlich habe ich verstanden, was du jetzt eigentlich wissen willst …

    Weitere Seiten (jeweils einzeln) über ihre ID bzw. body-class dem gleichen css-Style zuordnen: einfach die Anweisung im CSS mit Komma getrennt, also z.B.

    HTML
    .page-id-45 a:hover, .page-id-xx a:hover {
    }


    Du schreibst „weitere Unterseiten“ – wenn es wirklich Unterseiten sind, findet sich vielleicht eine zusammenfassende Klasse, z.B. für Posts aus der gleichen Kategorie.

    Oder dann die Sache mit dem eigenen („test“-) Template:
    Wenn alle Elemente, die du besonders stylen willst, sich in einem Element (div oder ähnliches) befinden, das du innerhalb dieses test-Template öffnest: gib diesem div id="test" und style dann

    HTML
    #test a:hover {
    }

    Gruß
    helix

  • Hallo Helix,
    erstmal DANKE.

    Im Grunde hast du es verstanden. Mir geht es hauptsächlich um die Änderungen in der Navigation - dem Top Border und der Bottum- Border per PAGE. All diese Elemente kann ich ja (nur?? ) über die ID verändern.

    realisieren. All diese Formatierungen stehen ja über dem Inhalt in der ja im <div class="entry-content clearfix">steckt. Somit macht ein zusätzlicher "Bereich" für mich keinen Sinn. Formatierungen innerhalb der Seite selbst ist ja kein Problem.

    Wie gesagt, mir geht es um die Nav. Wenn ich nun zur Seite TEST 10 Unterseiten Test 02 - Test 03 Test 04 ..uns anlege müsste ich die o.g. Anweisung ja immer um die jeweilig ID erweitern - ziemlich aufwendig. Daher suche ich nach einer besseren Lösung - eben über einen extra zugeodnetet Template TEST das dann angewiesen wird die Nav - die Border entsprechend darzustellen.

    Ich hoffe das ist jetzt nicht zu kompliziert erklärt :-(

    Nur wer fragt dem kann geholfen werden

  • Wenn du ein eigenes Seitentemplate erstellt hast, kannst du doch über die body class page-template-test gehen und darüber die Formatierungen machen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Hallo maxe,

    Punktlandung :-) Das ist das wonach ich suchte - eine super Lösung.
    Vielen vielen Dank. Ich wusste nicht, dass "page-template-test" dann mit im Code steht. Ich muss mich damit viel besser beschäftigen und diese nutzen.

    Nun klappt es so - wie ich es mir vorgestellt habe :-D :-D

    Nur wer fragt dem kann geholfen werden

  • musst du genau so vorgehen, eben dann halt für current_page_ancestor, current-menu-ancestor, current-menu-item und/oder current_page_item

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!