Ein tolles Feature für Online-Spiele-Seiten ist, wenn auf der Startseite immer zufällige Spiele aus verschiedenen Kategorien angezeigt werden. Dies hat den Vorteil, dass auch ältere Spiele gesehen und gespielt werden.

Normaler WordPress Blog zeigt auf der Startseite nur die neuesten Beiträge/Spiele an.

Das Beispiel mit den zufällig angezeigten Spielen kann man bei FunGames24.net in Action sehen.

Im heutigen Tutorial werde ich Schritt für Schritt zeigen, wie einfach so was mit WordPress realisiert werden kann. Dazu muss nur die “index.php” des jeweiligen Themes angepasst werden.

random_games

Grundlagen

Bevor wir mit der Implementierung anfangen, solltest Du Dir auf jeden Fall noch die Dokumentationen von folgenden WordPress-Funktionen anschauen:

Vorüberlegung

Vor der Realisierung sollte man sich überlegen, wie so etwas realisiert werden kann. Für die Anzeige von zufälligen Spielen sah meine Überlegung in etwa so aus:

  1. Lese alle Kategorien aus
  2. Gehe die Kategorien durch und wähle aus jeder Kategorie 6 zufällige Spiele aus
  3. Gehe alle ausgewählten Spiele einer Kategorie durch und hole für jedes Spiel folgende Daten:
    • Name des Spiels
    • Permalink des Spiels
    • Vorschaubild

Bei Spielnamen muss man beachten, dass manche Spiele sehr lange Namen haben und oft das Theme “zerschießen”. Deswegen sollte der Name eines Spiels auf gewünschte Länge gekürzt werden. Dazu habe ich folgende PHP-Funktionen verwendet:

  • strlen – um die Länge eines Spielnamens zu ermitteln
  • substr – um den Namen an einer bestimmten Stelle abzuschneiden

Realisierung

Da wir und schon im Vorfeld überlegt haben, wie Zufalls-Spiele angezeigt werden sollen, ist die Realisierung ein Kinderspiel. Wie vorhin erwähnt, muss für unser Vorhaben nur die “index.php” des jeweiligen Themes angepasst werden. Die Datei einfach mit einem Texteditor (Notepad++, Programmer’s Notepad..) öffnen und bearbeiten:

Hier der Beispiel Code:

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
// Needed to access the post informations
global $post;	
 
// How many random games for each category?
$random_games = 6;	
 
// Max. lenght of a game title
$title_length = 10;
 
// Define here your thumb width and lenght in px
$thumb_width = 85; 
$thumb_height= 85;
 
// Get all categories
$categories = get_categories();  
 
// Go through each category
foreach ($categories as $category) {
  // Get the category ID
  $cat_id = $category->cat_ID;
 
  // Get XX random games from this category
  $games = get_posts('numberposts='.$random_games.'&orderby=rand&category='.$cat_id);
 
  // Check if this category is empty?
  if ($games) {
    // This category has games..
 
    // Beginn - Category block
    echo '<div class="cat_block">';
    //  Show the category name in the block header
    echo '<h1><a href="'.get_category_link($cat_id).'">' .$category->name. '</a></h1>';
 
    // Go through each game and display all relevant informations
    foreach ($games as $post) {
      ?>    
      <div class="game_title">
        <?php // Get the game permalink ?>
        <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" >
 
        <?php 
        // Check the lenght of the game name
        if ( ( strlen($post->post_title) > $title_length ) ) { 
          // Name is too long. We need to cut it..
          echo substr($post->post_title, 0, $title_length).".."; 
        } 
        else {
          // Name length is OK. Print it..
          the_title();
        }
        ?>
 
        <br />
 
        <?php // Now, we can show the game thumbnail ?>
        <img src="<?php echo get_post_meta($post->ID, "thumbnail_url", true); ?>" width="<?php echo $thumb_width; ?>" height="<?php echo $thumb_width; ?>"></a>
      </div>
      <?php    
      }
 
      // Show the "More Games" button
      echo '<div class="cat_link"><a href="'.get_category_link($cat_id).'">More Games</a></div>';
 
      // END - Category block    
      echo '</div>';  
    }
  }
?>

Für die Darstellung kann man beispielhaft folgende CSS-Styles verwenden. Natürlich sollte man diese dem eigenem Design anpassen.

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

.game_title {
text-align: center;
float: left;
margin: 0 0 0 5px;
padding: 0px 0px 0px 0px;
}
 
.game_title  a {
color: #0578AD;
}
 
.single {
width:210px;
min-height: 365px;
float:left;
margin: 0px 0px 15px 3px;
padding-top: 10px;
padding-bottom: 10px;
color:#504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
border:1px solid #ccc;
}
 
.single h1 {
margin-left: 3px;
margin-right: 3px;
}
 
.single  h2 {
margin: 0px 0 5px 0;
padding: 5px 0px 0px 10px;
text-align: left;
font: 24px  Georgia,century gothic,Arial,verdana, sans-serif;
font-weight:normal;
overflow:hidden;
}
 
.single  h2 a, .single  h2 a:link, .single  h2 a:visited  {
color:#252525;
background-color: transparent;
}
 
.single  h2 a:hover  {
color: #31333F;
background-color: transparent;
}
 
.cat_link {
float:right;
text-align:right;
font-weight:bold;
height: 17px;
width: 101px;
margin: 7px 5px 0 2px;
padding-right: 17px;
}
 
.cat_link a {
color: #fff;
}

So, das war’s auch schon. Viel Spaß damit!! :)