Hintergrundfarbe für einzelne Artikel ändern

  • Gibt es eine Möglichkeit, bei einzelnen Artikeln die Hintergrundfarbe zu ändern?

    Alternativ vielleicht, die Hintergrundfarbe von Artikeln einer bestimmten Kategorie?

    • 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

  • das haengt im prinzip davon ab, ob das theme dem post eine individuelle id oder class mitgibt;
    einige themes verwenden code wie diesen (vom default theme):

    PHP
    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">



    das gibt nicht nur eine reihe von classes durch die verwendung von 'post_class();' aus, sondern auch noch eine css id mit der internen post-ID, die dann in der style.css zB mit dem folgenden formatiert werden lkann:

    Code
    #post-23 { background-color:#123456; }



    wenn du einen link zum blog postest, kann das jemand mal nachgucken.
    oder du siehst dir den html code der seite im browser an; oder den code in der index.php oder single.php.

  • Falls es ausreichend ist, das der Text-Bereich eine Hintergrundfarbe hat, so könntest Du den Bereich der Eingabe in einen div-Container stecken.

    Code
    <div class="rot">Dein Text und Bilder...</div>

    in der style.css würdest Du dann der class rot einen Background oder ein Hintergrundbild zuordnen.

    Code
    .rot {
      background:red;
    }
  • Was ich vorhabe, ist folgendes:

    Ich möchte auf der Startseite einen Artikel als Leitartikel darstellen. Das geht z. B. mit der Funktion "Sticky Post". Der Artikel soll aber zusätzlich noch deutlich hervorgehoben werden, etwa durch eine andere Hintergrundfarbe.

    Da Leitartikel u. U. öfter wechseln können, darf das keine umständliche Lösung sein.

    Es handelt sich um einen Blog, der bisher mit dem Theme "Branford Magazine" läuft, wo jeweils der neueste Artikel einer definierten Rubrik automatisch als Leitartikel dargestellt wird.

    Der Blog soll mit BuddyPress um Communityfunktionen erweitert werden, das BP-kompatible Theme unterstützt aber die Leitartikel-Funktion von "Branford Magazine" nicht. Auf einen besonders hervorgehobenen Leitartikel möchte ich auch nicht verzichten.

    Hier mal die Adressen zur Erläuterung:

    Bisheriger Blog: http://nowa.biz
    Nach der Relaunch: http://nowateam.de/community (Test- und Probierinstallation)

    Eigentlich dachte ich zuerst an ein Plugin, hab aber leider keins gefunden.

  • post_class() waere eine moeglichkeit;
    http://justagirlintheworld.com/take-advantage…n-wordpress-27/

    oder die verwendung von 'is_sticky()' in der post div:

    http://codex.wordpress.org/Conditional_Tags#A_Sticky_Post

    nur als beispiel:

    PHP
    <div <?php class="post<?php if(is_sticky()) { echo ' sticky'; ?>" id="post-<?php the_ID(); ?>">



    damit koennte der sticky post im style.css mit dem folgenden formatiert werden:

    Code
    .post.sticky { background: #123456; }
  • könnte man mit

    PHP
    #post-23 { background-color:#123456; }

    in der style.css auch für jeden artikel, falls gewünscht, ein anderes hintergrundbild einbinden?
    wenn ja, was ist dabei zu beachten?
    wenn nein, wie ist das zu bewerkstelligen?

  • da dein theme diese css id ausgibt, ist das machbar.

    zu beachten ist das uebliche: hintergrundbildgroesse? soll es wiederholt werden? hat #post-23 einen abstand innen zum text? leidet die lesbarkeit? etc.

    wie immer: 'versuch mach klug' - einfach probieren; vorher sicherungskopie anlegen.

  • Zitat

    und wie bekommt man es so hin, dass jeder Artikel sein eigenes Hintergrundbild bekommt.



    moeglickeit a:
    mit einem oder zwei benutzer-definiertem feld(ern) fuer den post; hintergrundbild und/oder -farbe festlegen.
    (bei zu vielen verschiedenen, grossen hintergrundbildern wird die ladezeit von der seite leiden. der beispiel-link scheint ein festes hintergrundbild mit schattierungen zu haben, und die hintergrundfarbe wird variiert)

    moeglichkeit b:
    hintergrundbild und -farbe kategorie-abhaengig fuer jeden post anzeigen.

    wie und wo das genau in die templates eingebaut werden muss, haengt vom theme ab.

  • beim 'melville' theme ist die div um die posts sehr nahe am sichtbaren text - fuer einen effekt wie in deinem beispiel-link muesste da noch angepasst werden.
    jeder post hat schon kategorie-spezifische css classes, mit denen ganz einfach kategorie-spezifische hintergrundfarben angezeigt werden koennten; zB:

    Code
    .post.category-wellhead { background-color: #123def; }



    fuer benutzer-definierte hintergrundfarben muesste dieser teil angepasst werden (wahrscheinlich in index.php zu finden; oder evtl in loop.php, oder...):

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>


    zum beispiel, eine neue version:

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); 
    $h_img = get_post_meta($post->ID, 'hintergrundbild', true);
    $h_col = get_post_meta($post->ID, 'hintergrundfarbe', true);
    if( $h_img || $h_col ) { echo ' style="';
    if( $h_img ) echo 'background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/' . $h_img .'); '; 
    if( $h_col ) echo 'background-color: ' . $h_col .'; '; 
    echo '"'; } ?>>



    das benutzer-feld 'hintergrundbild' muss den bild-namen mit extension (zB [FONT=Courier New][COLOR=blue]flowerpot.jpg[/COLOR][/FONT]) enthalten; und das bild muss im /images/ verzeichnis des themes sein.
    das benutzer-feld 'hintergrundfarbe' muss den farbcode (zB [FONT=Courier New][COLOR=blue]#123fde[/COLOR][/FONT] enthalten.
    der inline-style wird nur ausgegeben, wenn mindestens eins der felder fuer den post ausgefuellt ist.

    eine kombination von kategorie-abhaengig und benutzer-feld geht auch ....

  • oh, Gott, das scheint für mich ein wenig kompliziert zu sein...
    ich denke, ich sollte mich zuerst ein wenig in wordpress einlesen zu müssen,
    um erstmal die Grundlagen und Logik zu verstehen. So verstehe ich da im Moment wenig.

    bin jedoch für weitere Tipps, Ideen usw. offen und weiterhin dankbar. :smile:
    vielleicht finden sich noch mehr Personen, die das gleiche möchten und
    wohlmöglich weiter gekommen sind, als ich. dann wird's viel schneller und einfacher für den Rest. Danke. :D

  • ok, ich bin jetzt mittlerweile ein wenig weiter.
    was mir jetzt Kopfschmerzen bereitet:

    zum beispiel, eine neue version:

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); 
    $h_img = get_post_meta($post->ID, 'hintergrundbild', true);
    $h_col = get_post_meta($post->ID, 'hintergrundfarbe', true);
    if( $h_img || $h_col ) { echo ' style="';
    if( $h_img ) echo 'background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/' . $h_img .'); '; 
    if( $h_col ) echo 'background-color: ' . $h_col .'; '; 
    echo '"'; } ?>>

    das benutzer-feld 'hintergrundbild' muss den bild-namen mit extension (zB [FONT=Courier New][COLOR=blue]flowerpot.jpg[/COLOR][/FONT]) enthalten; und das bild muss im /images/ verzeichnis des themes sein.
    das benutzer-feld 'hintergrundfarbe' muss den farbcode (zB [FONT=Courier New][COLOR=blue]#123fde[/COLOR][/FONT] enthalten.
    der inline-style wird nur ausgegeben, wenn mindestens eins der felder fuer den post ausgefuellt ist.

    eine kombination von kategorie-abhaengig und benutzer-feld geht auch ....

    da ich ja, jedes Mal wenn ich ein Artikel verfasse, ein anderes Bild als Hintergrund haben möchte,
    bräuchte ich auch eine einfachere Lösung, die mir ermöglicht, das Bild im Backend aus der Galerie auszuwählen.

  • hier ist verwandter artikel, wie man das 'post_thumbnail'-bild als hintergrundbild verwendet:
    http://wpengineer.com/2123/use-wordp…ckground-image/

    angepasst und ist absolut ungetestet :mrgreen::

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); 
    $h_col = get_post_meta($post->ID, 'hintergrundfarbe', true);
      
    $h_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );  
       
    if( $h_img || $h_col ) { echo ' style="';
      if( $h_img ) echo 'background-image: url(' . $h_img .'); '; 
      if( $h_col ) echo 'background-color: ' . $h_col .'; '; 
      echo '"'; 
    } ?>>
  • :roll: dieser hier:

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); 
    $h_col = get_post_meta($post->ID, 'hintergrundfarbe', true);
     
    $h_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );  
     
    if( $h_img || $h_col ) { echo ' style="';
      if( $h_img ) echo 'background-image: url(' . $h_img .'); '; 
      if( $h_col ) echo 'background-color: ' . $h_col .'; '; 
      echo '"'; 
    } ?>>


    soll den urspruenglichen code ersetzen (und was genau, haengt eben von deinem theme ab); beispiel:

    PHP
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>



    welches theme verwendest du? (ist das immer noch 'melville'?)
    link zu deiner seite?

Jetzt mitmachen!

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