PHP, Tipps, WordPress

Simpler Code für ein Zufallsbild im WordPress-Template

Immer wieder werden aufwändige Plugins und Konstrukte in Themes hinterlegt, um das Einbinden eines Zufallsbildes zu realisieren. PHP stellt mit der Funktion rand() eine geeignete und simple Lösung für diese Anforderung bereit.
Im folgenden kurz und knapp die Lösungsstruktur.

Prinzipiell kann man natürlich die Bilder von jedem beliebigen Verzeichnis laden, im Beispiel sollen die Bilder im Order des aktuell verwendeten Themes liegen, im Unterordner images.

Im Anschluss eine kurze Erläuterung der Funktion rand().

Struktur im Theme-Ordner

+ images
|— headerimg_1.png
|— headerimg_2.png
|— headerimg_3.png
|— headerimg_4.png
|— headerimg_5.png

PHP Anweisung

int rand ( [int $min, int $max] )

Liefert eine Pseudozufallszahl zwischen min und max (inklusive), oder zwischen 0 und RAND_MAX falls keine Parameter angegeben wurden. Wenn Sie z.B. einen Zufallswert zwischen 5 und 15 benötigen so wäre der Aufruf dafür rand(5, 15).
php.net


<?php echo( rand(1,5) ); ?>

Code für die Implementierung unter WordPress

Im Template des Themes, welches den das Zufallsbild enthalten soll, muss dann der nötige Codeschnipsel rein. Natürlich kann man dies auch ohne WordPress nutzen, nur dort ist es mir besonders aufgefallen und der folgende Beispielcode nutzt zur Integration des Pfades einen Template Tag. Damit wird die Implementierung unabhängig und das Theme kann weiterhin auf andere WP-Installationen transportiert werden.


<img src="<?php bloginfo('template_directory'); ?>/images/headerimg_<?php echo (rand(1,5)); ?>.png" alt="Alternativ-Text" />

Update

Anbei noch eine Lösung mit der ich Bilder aus meinem Photoblog hole. Vielleicht kann sie ja der eine oder andere nutzen. Die Lösung nutzt nur die Thumbnail-Bilder und bindet diese in die Zufallsausgabe ein.


<?php
$dir = $_SERVER['DOCUMENT_ROOT'] . "/photos/wp-content/uploads/";
if ( is_dir($dir) ) { ?>
<div class="headerimg">
	<?php
	if ($dh = opendir($dir)) {
		while (($filename = readdir($dh)) !== false) {
			$filestring = explode(".", $filename);
			if ($filestring[1] == 'thumbnail') {
				$files[] = $filestring[0] . '.' . $filestring[1] . '.' . $filestring[2];
			}
		}
	closedir($dh);
	}
	$x = count($files);
	$ausgabe1 = rand(0, $x-1);
	$ausgabe2 = rand(0, $ausgabe1-1);
	$ausgabe3 = rand(0, $ausgabe1-2);
	$ausgabe4 = rand(0, $ausgabe1-3);
	?>
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe1]; ?>" alt="Headerimage1" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe2]; ?>" alt="Headerimage2" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe3]; ?>" alt="Headerimage3" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe4]; ?>" alt="Headerimage4" width="128" height="85" />
</div>
<?php } ?>
Standard
Allgemein, Webküche, WordPress

Allg – Wettbewerb Weblog-Kopfgestaltung

ein freidenker & eine muse veranstalten auf ihrem Blog einen Wettstreit – Wer hat die coolste Weblog-„Kopfgestaltung“ und dazu wurde ich eingeladen.
Warum nicht, dachte ich mir und habe zugesagt, obwohl mein Headerbild per Zufall geladen wird, aus einer kleinen Bibliothek schöner Erinnerungen.
Nun liegt es an den Besuchern des Blogs, wie die einzelnen Blogs mit ihren Headern abschneiden, den man kann abstimmen.
Ich hoffe natürlich ihr stimmt alle für mich, und das geht hier. 😉

Standard
Tipps, WordPress

WP – Javascript in Beiträge/ Posts einbinden

WordPress+JavaScriptWenn in Beiträgen, unter WordPress, Scripte benötigt werden, so kann man diese nicht direkt in den Post legen. Diese werden im Header nicht ausgeführt. Nun will man aber nicht jedes Script im Header haben, da es ansonsten in jeder WP-Seite und jedem WP-Beitrag erscheint. Einige Scripte werden nur auf bestimmten Seiten oder Beiträgen benötigt.
Mit folgender Methode können aber Scripte in den Posts verwendet werden.

Als erstes muss das Script in eine Datei (name.js) geschrieben werden. Diese Datei muss nun per FTP abgelegt werden, bzw. mit der Upload-Funktion in der Admin-Oberfläche von WP. Die Funktion wird also ausgelagert.

Info: Das folgende Script dient dazu, Plugins automatisch in Firefox zu integrieren und dient mir hier als Beispiel. Nähere Infos dazu hatte ich vor einiger Zeit hier beschrieben.

externes Script:


function addEngine(name,ext,cat)
{
  if ((typeof window.sidebar == "object") && (typeof
  window.sidebar.addSearchEngine == "function"))
  {
    window.sidebar.addSearchEngine(
      "https://bueltge.de/wp-content/download/wp/"+name+".src",
      "https://bueltge.de/wp-content/download/wp/"+name+"."+ext,
      name,
      cat );
  }
  else
  {
    errorMsg(name,ext,cat);
  }
}

Das ausgelagerte Script muss nun wieder in den Beitrag geladen werden.
Im Beitrag wird das ganze dann folgender maßen eingebunden.

im Post:


<script type="text/javascript" src="/ordner/addengine.js"></script>

<a href="javascript:addEngine('search_bueltge_blog','gif',
'bueltge.de Blog')">Test_JS_Link</a>

Hier ist der Link um das Beipiel-Script „SuchPlugin für Firefox“ zu starten.


Test_JS_Link

Standard
Tipps, WordPress

WP – Headerbild verlinken

Im Allgemeinen gehört es zum guten Ton einer Website, wenn das Bild im Header auf die Startseite der Internet-Präsentation verlinkt. Da dies bei WordPress standardmäßig nicht so ist, sollte man folgenden Code in die header.php einfließen lassen.


onclick="location.href='http://www.website.domain/';" 
 onkeypress="location.href='http://www.website.domain/';" style="cursor: pointer;"

Update:
Von webdesign-in wurde ich darauf hingewiesen, wie man diese Erhöhung der Benutzerfreundlichkeit für alle Webuser brauchbar macht. Im Artikel ist ersichtlich, dass onclick und onkeypress zusammen gehören. Da ich barrierefreie Websiten natürlich für sinnvoll erachte, habe ich eine Codeänderung vorgenommen. Jetzt sollte der Code barrierearm/-frei sein.

Das ist schnell erledigt und erhöht so das Usability der Seite. Das ganze kann man lokal durchführen, oder aber in der Admin-Oberfläche deines WP unter –> Themes –> Theme-Editor –> Header Template.

suche nach:


<div id="header">
 <div id="headerimg" >
  <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
  <div class="description"><?php bloginfo('description'); ?></div>
 </div>
</div>

ändere in:


<div id="header">
 <div id="headerimg" onclick="location.href='<?php bloginfo('url'); ?>';" 
onkeypress="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
  <h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>">
<?php bloginfo('name'); ?></a></h1>
  <div class="description"><?php bloginfo('description'); ?></div>
 </div>
</div>
Standard