• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

[Wordpress] Zufallsbild beim Neuladen der Seite anzeigen

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
Hallo liebe Leute,
zuerst einmal: Ja, ich habe ausführlich die Suche benutzt und auch einiges gefunden, allerdings nichts, was passt. Deshalb wende ich mich jetzt an euch, in der Hoffnung, dass irgendjemand hier eine Idee dazu hat.

Also, folgendes:
Ich möchte auf meiner Homepage, die mit Wordpress funktioniert, auf der Startseite ein Bild anzeigen lassen, das bei jedem Neuladen der Seite wechselt, also aus einer Auswahl von z.B. 5 Bildern soll dann immer ein neues angezeigt werden.

Wie gesagt, ich habe ziemlich lange gesucht, und die Lösung, die mir am einfachsten erscheint, wäre Java Script dafür zu verwenden.
Eine ganz gute Anleitung habe ich hier gefunden.

Jetzt ist das Problem nur folgendes: Ich kann im Wordpress-Editor zwar Html-Code, bzw. auch Java-Script, einfügen, allerdings wird das ja immer nur im Body-Bereich des Dokumentes eingefügt, richtig?
In der Anleitung muss man aber auch etwas in den Head-Teil des Dokumentes einfügen, das geht aber ohne weiteres ja nicht.

Ich habe schon diverse andere Lösungen ausprobiert, weil ich mich mit PHP aber nur sehr wenig, eher gar nicht, auskenne, würde ich eben lieber Java Script benutzen.

Wie gesagt, jetzt ist eben nur das Problem, dass man auch etwas in den Head einfügen muss, was über Wordpress meines Wissens nicht so einfach geht.

Also, kennt jemand eine Lösung?
Vielleicht gibt es ja eine ganz einfache Möglichkeit, den Teil des Scripts aus dem Head mit dem Teil, der in den Body gehört, zu vereinen, aber auch da kenne ich mich nicht so gut aus.

Ich bin für alle produktiven Vorschläge sehr dankbar. :)

Viele Grüße :)
 

MrBlaschke

Jonagold
Registriert
21.07.09
Beiträge
23
Wenn ich das eben korrekt schnell überblickt habe kannst Du diesen Teil vom "Head" auch in den Body schmeissen. Javascript muss nicht zwingend "ganz oben" stehen. Probier's aus. Sollte laufen.

Es kommt Dir ja nicht auf schönen Code sondern auf die Funktionalität an - denke ich mal.
 

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
Danke erstmal für die Antwort!
Aber leider ist es scheinbar doch nicht ganz so einfach. :(
Ich habe es gerade ausprobiert, aber die Seite wird leer angezeigt (außer eben dem üblichen Design, also Menü und so weiter).

Wenn ich allerdings lokal auf dem Mac eine ganz normale Html-Datei erstelle, funktioniert es, und da ist es auch egal, ob ich den oberen Abschnitt des Scripts in den Head- oder in den Body-Teil setze, das funktioniert beides.
Online leider nicht.

Hat vielleicht noch irgendjemand eine Idee?

Edit: Die Datei, die lokal funktioniert, funktioniert auch online auf dem Server - allerdings eben nicht im Wordpress-Design, das ist nur eine ganz einfache Html-Datei.
 

LinuxDoku

Jamba
Registriert
20.02.11
Beiträge
54
Du kannst das Script direkt in dein Template einfügen. Hierzu gehst du in den Template Editor (Design --> Editor) und wählst die header.php.
Du musst allerdings nach jedem Template Update das Script erneut einfügen.

Wenn du jemanden kennst, der sich mit Wordpress Plugins auskennt, kann er dir auch ein Plugin schreiben, das sich per Hook in den Header einhängt und deinen Code an der Stelle ausgibt. Vll gibt es so was auch bereits, musst mal nachschauen.
 
  • Like
Reaktionen: apple_juice

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
Super!

Genial!

Vielen Dank, das hat super geklappt! :)
Ich habe jetzt einfach den ersten Teil des Skripts in die header.php eingefügt, jetzt klappt es. Super!

Jetzt hab ich nur noch eine Frage, vielleicht weiß dazu auch noch jemand eine Antwort:
Wenn ein Besucher auf die Homepage kommt, in dessen Browser kein JavaScript läuft, kann man doch mit dem <noscript>-Tag trotzdem etwas anzeigen lassen, oder?

Wo muss ich den dann in der folgenden Zeile einbauen?
Code:
<script language="JavaScript">document.writeln('<img src="'+xoxo[choice]+'" HEIGHT=60 WIDTH=600>');</script>

Wenn ich es so mache, funktioniert nichts mehr:
Code:
<script language="JavaScript">document.writeln('<img src="'+xoxo[choice]+'" HEIGHT=60 WIDTH=600>');<noscript></noscript></script>

Und noch etwas: Kann ich das Bild, das dann per Zufall angezeigt wird, mit weiteren Html-Befehlen ausstatten (also Ausrichtung oder sowas...)? Im Code oben wird ja z.B. noch die Größe mit angegeben.

Vielen Dank! :)
 

LinuxDoku

Jamba
Registriert
20.02.11
Beiträge
54
Zum Formatieren kannst du das style Attribut verwenden. Als Value trägst du dort CSS Tags ein.

Den noscript Tag kannst du irgendwo auf deiner Seite platzieren und der zwischen dem offenen und geschlossenen Tag geschriebene Text an der Stelle in der Seite.

Am besten platzierst du ein fixes Header Bild und änderst dieses dynamisch per JS, so sieht jeder ein Bild, ob mit JS oder ohne.
 

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
Am besten platzierst du ein fixes Header Bild und änderst dieses dynamisch per JS, so sieht jeder ein Bild, ob mit JS oder ohne.

Genauso hatte ich das auch vor, damit nicht plötzlich jemand gar nichts angezeigt kriegt.

Also, mein Code sieht jetzt folgendermaßen aus:
Code:
<script language="JavaScript">document.writeln('<a href="'+xoxo[choice]+'"><img src="'+xoxo[choice]+'" class="size-large wp-image-109 aligncenter" width="590" height="327></a>');</script>
<noscript><img src=".../bilder/alternativbild.jpg</noscript>

Erläuterung: Weil auf meiner Seite ein Plugin läuft, dass die Bilder in einem größeren Kasten öffnet, muss das Bild mit sich selber verlinkt sein. Das funktioniert auch gut, ich habe das einfach ausprobiert, in dem ich " <a href="'+xoxo[choice]+'"> " am Anfang und am Ende " </a> " hinzugefügt habe, keine Ahnung, ob das richtig ist, aber es funktioniert.

Jetzt aber noch eine andere Sache:
Wenn ich diesen Code irgendwo auf meiner Seite einbaue, verschwindet der Text, der danach steht! :eek:
Auf einer sonst leeren Seite, auf der außer dem Bild und zwei Sätzen (also einer Testseite) gar nichts mehr steht, wird nach dem Bild überhaupt nichts mehr angezeigt, auf der richtigen Startseite verschwinden ein paar Sätze des längeren Textes, der Rest wird wie gewohnt gezeigt.
Was ist da los? o_O

Ich hab schon diverse Sachen ausprobiert, aber nichts hilft oder verhindert, dass der Text verschwindet.
Weiß jemand Rat?

Danke!
 

joro

Braeburn
Registriert
12.06.10
Beiträge
45
Hallo,
wenn Du Dein Javascript hier richtig kopiert hast, und nicht aus dem Kopf runtergeschrieben hast, fehlt "> (Der Abschluss) bei Deinem Noscript-Bild.
Ich würde zusätzlich empfehlen das Du Dein Script Tag um ein Type Attribut ergänzt.

Kopier mal folgendes, dann sollte es laufen.

Code:
<script type="text/javascript" language="JavaScript">document.writeln('<a href="'+xoxo[choice]+'"><img src="'+xoxo[choice]+'" class="size-large wp-image-109 aligncenter" width="590" height="327></a>');</script>
<noscript><img src=".../bilder/alternativbild.jpg"></noscript>

Liebe Grüße,
joro
 

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
Ich werde noch leicht wahnsinnig! :mad:

Irgendwas funktioniert immer noch nicht richtig.
Trotz ergänztem Type Attribut und " > " im noscript-Tag (vielen Dank für den Hinweis joro, ich hatte schon fast gedacht, dass das der Fehler war...), läuft es nicht.

Wenn ich den Code jetzt genau so wie folgend einfüge

Code:
<script type="text/javascript" language="JavaScript">document.writeln('<a href="'+xoxo[choice]+'"><img src="'+xoxo[choice]+'" class="size-large wp-image-109 aligncenter" width="590" height="327></a>');</script>

<noscript><img class="size-large wp-image-109 aligncenter" src="pfad/zum/alternativ/Bild/altvernativbild.jpg" alt="" width="590" height="327"></noscript>

funktioniert es zwar soweit und es wird auch der folgende Text angezeigt, allerdings wird der nächste Absatz (und zwar genau bis zum nächsten normalen Link) ebenfalls als Link dargestellt, wenn man den anklickt, wird das Bild geöffnet. :-[

Ich verstehe das absolut nicht, aber ich habe jetzt durch ausprobieren herausgefunden, dass es mit dem " <a href="'+xoxo[choice]+'"> " zusammenhängen muss, denn wenn ich diesen Teil aus dem Code raus lösche, klappt es einwandfrei.
Ich brauche das aber, damit das Bild mit sich selber verlinkt ist, sonst wird es nicht groß angezeigt, wenn man drauf klickt.

Also ist irgendwas an dieser Verlinkung wohl nicht richtig, aber WAS?
Weiß jemand weiter, wie ich das Zufallsbild mit sich selber verlinken kann, ohne, dass der nachfolgende Text als Link dargestellt wird?

Ich verzweifle langsam... :-c
 

joro

Braeburn
Registriert
12.06.10
Beiträge
45
Hallo,
Du hast wieder Gänsefüßchen vergessen. War schon vorher falsch, hatte ich auch übersehen. Diesmal die schließenden bei height="327>

So sollte es jetzt gehen:
Code:
<script type="text/javascript" language="JavaScript">document.writeln('<a href="'+xoxo[choice]+'"><img src="'+xoxo[choice]+'" class="size-large wp-image-109 aligncenter" width="590" height="327"></a>');</script>

<noscript><img class="size-large wp-image-109 aligncenter" src="pfad/zum/alternativ/Bild/altvernativbild.jpg" alt="" width="590" height="327"></noscript>

Immer gucken, das alles was man aufmacht, auch wieder zugemacht wird.

Liebe Grüße,
joro
 
  • Like
Reaktionen: apple_juice

apple_juice

Aargauer Weinapfel
Registriert
16.10.10
Beiträge
746
joro, du bist mein Held!!! :)
Viiielen Dank, jetzt funktioniert es!
Echt super, danke danke danke :)