Sidr
PSD-Tutorials.de

Wordpress Theme mit wechselndem Hintergrundbild

Dieses Thema im Forum "WordPress" wurde erstellt von Solla, 31.03.2012.

  1. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    Hallo und schönen Abend Euch allen,

    ich bin gerade dabei ein Theme für Wordpress zu erstellen. Dabei soll das Theme ein auf 100% skalierbares Hintergrundbild haben, dass sich je nach Seite ändert.

    in der index.php habe ich bisher folgendes
    PHP:
    1. <div id="background">
    2. <img src="<?php bloginfo('template_url' ); ?>/images/bg_body.jpg" alt="background">
    in der CSS dann:
    Code (Text):
    1. #background{width:100%;
    2. height:100%;
    3. position:absolute;
    4. top:0px;
    5. left:0px;
    6. z-index:-1;}
    7.  
    8. #background img{width:100%;
    9. height:100%;
    10. position:fixed;}
    Funktioniert prima wenns nur ein Bild sein soll, aber wie bekomme ich es jetzt hin, dass bei jeder Seite (z.B. Home, Impressum, Kontakt...) jeweils ein vollkommen anderes, vorab bestimmtes, Bild angezeigt wird?

    Wäre nett, wenn mir da jemand weiterhelfen könnte, habe bisher noch nichts gefunden, was mir helfen könnte. Schon mal vielen Dank im Voraus.

    B.G. Solla

     
    #1      
  2. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    614
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Code (Text):
    1. <img src="<?php bloginfo('template_url' ); ?>/images/bg_body_<?php the_ID(); ?>.jpg" alt="background" />
    und legst dann für jede ID 'nen Bild an

    EDIT: Oder du gehst über die Previewbilder die man Artikeln zuweisen kann und setzt die in den Hintergrund!

     
    #2      
  3. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.064
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Das könntest du mittels der function.php lösen. Dort kannst du dann im Backend einen Bereich erstellen der dir das Zuordnen der Hintergrundbilder ermöglicht...

    Kleine Ergänzung noch am Rande:
    Wenn du Besucher hast, die mit modernen Browsern vorbeikommen, dann kannst du es auch mittels CSS3 lösen und musst nicht immer ein IMG-Tag erstellen. Das Zauberwort dafür heißt background-size.

    Du könntest so auch die Bilder anhand der ID der Artikel oder Seiten bestimmen :)

     
    #3      
  4. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    Vielen Dank für Eure Tipps. Ich wusste doch auf Euch ist Verlass. Ich werde das jetzt gleich mal testen.

    Schönen Sonntag!
    BG Solla

    ---

    In welcher Form muss ich das Bild für die ID dann anlegen, an welcher Stelle, kannst Du mir da bitte freundlicherweise nochmal helfen? Ich glaub ich seth da grad bissl aufm Schlauch :(

    LG Solla

    EDIT: Bitte Bearbeiten-Button drücken um Doppelposts zu vermeinden
    mfg Crazylopp


     
    Zuletzt von einem Moderator bearbeitet: 01.04.2012
    #4      
  5. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.064
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    So wie ich es dem Codeblock entnehme: In dem Images Verzeichnis deines Templates...

    z.B: wp-content >> themes >> deinTheme >> images >> bg_body_11.jpg
    Die "11" steht in diesem Fall für die ID der verwendetet werden soll!

     
    Zuletzt bearbeitet: 01.04.2012
    #5      
  6. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Danke für die schnelle Antwort....

    Hm ja das schon, aber wie kann ich bestimmen welches Bild wo erscheint, sorry wenn die Frage doof wirkt, aber ich hab da grad echt irgendwie ne Denkblockade? :( Kannst Du mir da bitte weiterhelfen?

    Du bist der Beste, vielen Dank, klar so müsste das gehn... *kopfschüttel* is mir das peinlich... hätt ich auch drauf kommen können.

     
    Zuletzt bearbeitet: 01.04.2012
    #6      
  7. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.064
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Du kannst dir mit folgendem Plugin, schnell und einfach die jeweiligen ID´s im Backend anzeigen lassen. Wenn du z.B. ein Hintergrundbild für einen Artikel mit der ID 2114 anlegen möchtest, dann müsste dein Hintergrundbild folgende benennung haben: bg_body_2114.jpg, damit es auch angezeigt werden kann!

    Ein musst du jedoch auch beachten und zwar müsstest du noch ein Anfrage mit einbauen ob es überhaupt ein Hintergrundbild mit dieser Benennung gibt, denn sonst gibt es einen nicht validen Quelltext und in manchen Browsern unschöne Anzeigen...

    Das Plugin:
    http://wordpress.org/extend/plugins/simply-show-ids/

     
    #7      
  8. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.179
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Ist eh nicht so die gute Idee, da das Bild je nach Bildschirm stark verzerrt wird. Wie der Lopper schon schrieb ist background-size genau das richtige. Dafür dann den Wert cover gegeben und die Position 50% 50% und das sieht immer gut aus...

     
    #8      
  9. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Danke für den Hinweis, werde ich mal testen, aber CSS3 fähige Browser hat halt nicht jeder! :D

    Danke hab ich schon geregelt, ist ja seit WP2.5 nicht mehr mit drinnen :)

    Nun hab eich momentan nur das Problem, dass ich der Seite, auf der ich die Artikel ausgeben will trotz richtiger ID kein Hintergrundbild zugewiesen bekomme :(

    Noch wer einen Tipp für mich? *ganz lieb guck*

     
    #9      
  10. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.064
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Das Hintergrundbild wird immer noch angezeigt, nur kann es dann zu Größenproblemen kommen, wobei die wegfallen sobald das Bild größer als der bereich ist welches es aufüllen soll...

     
    #10      
  11. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Danke für Dein geduldiges Erklären CrazyLoop :D.... kannst Du Dir vorstellen, warum das Bild bei der Seite in die ich die Artikel reinlade nicht angezeigt wird?

    Beim Artikel selbst versteh ich das ja... nicht aber bei der Artikelseite!

    BG Solla

     
    #11      
  12. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    614
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    weil die Seite keine id hat? kannst du mal den link dazu schicken? dann weiß ich vielleicht weiter

     
    #12      
  13. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    hm dass stimmt nicht ganz!! Ich habe eine Seite erstellt und weise WP an, die Artikel in diese Seite reinzuladen die Seite hat definitiv eine ID ist die Seite "Neuheiten"

    Siehe Bilder:
    [​IMG]
    [​IMG]

     
    #13      
  14. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    614
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Was steht denn im Quelltext an der Stelle (wenn du die Neuheiten aufrufst),an der du das Hintergrundbild aufrufst?

     
    #14      
  15. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Sehr seltsam im Quelltext steht <img src="http://xxx.de/wp-content/themes/magnetschmuck/images/bg_body_15.jpg"

    keine Ahnung woher der sich die 15 holt, aber wenn er den partout 15 haben will bekommt er die eben :D

    Danke für den Tipp, manchmal steht man da echt wie der Ochs vorm Berg.

    Jetzt geht alles so wie ich mir das vorgestellt habe :eek:)))) Nochmals DANKE an alle...

    Ach so und sollte wem einfallen warum die ID für die Artikelseite nicht stimmt, darf er mir das hier gerne mitteilen, ich finde keine Erklärung dafür.

    B.G. Solla

     
    Zuletzt bearbeitet: 01.04.2012
    #15      
  16. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    614
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    Lässt du in der Loop von "Neuigkeiten" andere Beiträge einlesen? Vielleicht hat einer dieser die id12?

     
    #16      
  17. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    919
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape
    Kameratyp:
    Nikon D700 Spiegelreflex :D
    Wordpress Theme mit wechselndem Hintergrundbild
    AW: Wordpress Theme mit wechselndem Hintergrundbild

    muss wohl irgenwie so sein :D muss ich nacher mal schaun, danke Dir!

     
    #17      
Drupal Programmierung