Schlagwörter-Box (Wortwolke, Tagwolke)

Um wichtige Wörter auf der Website hervorzuheben kann man eine Schlagwörter-Box verwenden. Dieses PHP-Script gibt zufällige Schlagwörter aus, dabei ist die Schriftgröße / Schriftart der Schlagwörter auch jedes mal rein zufällig.

Diese Schlagwörter-Box wird aktuell auf der Website eingesetzt.

Quelltext „schlagwoerter_box.php”  Ausblenden ❘ Kopieren ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php 
/*
 * Schlagwörter-Box - schlagwoerter_box.php (utf-8)
 * https://werner-zenk.de - 24.08.2018
 */

$cssSize = [
 'font-size:37px',
 'font-size:34px',
 'font-size:31px',
 'font-size:28px',
 'font-size:25px',
 'font-size:22px',
 'font-size:19px',
 'font-size:16px',
 'font-size:13px',
 'font-size:10px',
];

$cssStyle = [
 'font-family:Arial',
 'font-family:cursive',
 'font-family:monospace',
 'font-stretch:ultra-condensed',
 'font-stretch:ultra-expanded',
 'font-style:oblique',
 'font-variant:small-caps',
 'font-weight:bold',
 'letter-spacing:1px',
 'letter-spacing:2px',
 'letter-spacing:3px',
 'vertical-align:middle',
 'vertical-align:super',
 'vertical-align:bottom',
 'vertical-align:sub',
 'vertical-align:top',
];

$cd[0]['tag'] = 'Schlagwort 1'; // Schlagwort
$cd[0]['url'] = 'seite1.php'; // Pfad zur Datei

$cd[1]['tag'] = 'Schlagwort 2';
$cd[1]['url'] = 'seite2.php';

$cd[2]['tag'] = 'Schlagwort 3';
$cd[2]['url'] = 'seite3.php';

$cd[3]['tag'] = 'Schlagwort 4';
$cd[3]['url'] = 'seite4.php';


shuffle($cd);

// Begrenzung auf 20 Einträge
$cd = array_slice($cd, 0 , 20);

echo'<div id="cloudBox">Schlagwörter Box<br>' . cloudBox($cd, $cssSize, $cssStyle) . '</div>';

function cloudBox($cd, $cssSize, $cssStyle) {
 $cloudTags = '';
 foreach ($cd as $value) {
  shuffle($cssSize);
  shuffle($cssStyle);
  $style = $cssSize[0] . ';' . $cssStyle[0];
  $cloudTags .= ' <a href="' . $value['url'] . '"' . ' style="' . $style . '">' . $value['tag'] . '</a> ';
 }
 return $cloudTags;
}
?>

In eine PHP-Datei einbinden


<?php include "schlagwoerter_box.php";?>

CSS

<style>
div#cloudBox {
 margin: 25px Auto 25px Auto;
 max-width: 550px;
 padding: 10px;
 background-color: Whitesmoke;
 border-radius: 4px;
 text-align: Justify;
 line-height: 20px;
}

div#cloudBox a:link {
  transition: text-shadow 0.6s;
}

div#cloudBox a:hover {
 text-shadow: 1px 1px 2px Orange;
}
</style>

➥ Um eine automatische Silbentrennung der Schlagwörter herbeizuführen, kann hyphens: auto; verwendet werden. Mehr dazu unter: Silbentrennung in Webseiten

Tipps

Zeitansage in JavaScript
Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.
Zeichenkodierung - Schriftzeichen richtig darstellen
Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.
Visual Studio Code - Tipps
Mit den Tipps können Sie direkt einsteigen und lernen, wie Sie mit Visual Studio Code produktiv sein können.