Home » HowTo » MyArcadeBlog – Anzeige von zufälligen Spielen auf der Startseite

MyArcadeBlog – Anzeige von zufälligen Spielen auf der Startseite

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:

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 '';
      
      // END - Category block    
      echo '
'; } } ?>

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

.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!! 🙂

18
Hinterlasse einen Kommentar

avatar
15 Kommentar Themen
3 Themen Antworten
0 Follower
 
Kommentar, auf das am meisten reagiert wurde
Beliebtestes Kommentar Thema
5 Kommentatoren
rbCocetzPerryDanielweizai Letzte Kommentartoren
  Abonnieren  
neueste älteste meiste Bewertungen
Benachrichtige mich bei
weizai
Gast
weizai

Hi Daniel,

Can u translate it to english? =x

Thanks alot

weizai
Gast
weizai

Hi Daniel,
I am using your CSS gallery theme. Which part of index.php should i change?
Tried a few times but still cant get it done. 🙁
Thanks in advance.

Regards

weizai
Gast
weizai

ohh..I thought copy the code to and paste it to replace in the index.php. =x
that means I have to edit your this code?
I don’t think I am able to do it, weak in php =x

Regards

weizai
Gast
weizai

Hi Daniel,

I am able to put it to the code already!
But I have some problems.

1) At the CSS gallery’s css.style sheet, which part do I need to delete so that I can use this css.style sheet. Because if I just use this, it will overwrite and the page will be jumbled up.

2) I changed the $random_games = 6; to $random_games = 4;
but the page still appear 6 games. No idea why. 🙁

Thanks in advance!
Regards

weizai
Gast
weizai

Okay Daniel!

Thanks for the help 😀

Perry
Gast
Perry

Thanks 😉

Perry
Gast
Perry

Hi,

I want to make my own custom box, say most viewed, top rated etc how would I do so?

Regards.

Cocetz
Gast
Cocetz

Hello, I did everything like you said but I have problems with css.

I put php code in index php (didnt deleted anything) and added css lines.

Maybe you could upload sample files?

Perry
Gast
Perry

Yes. But how do I display them?

Perry
Gast
Perry

Hi.

How would I display them like the categories on the index page?

Regards

weizai
Gast
weizai

Hi Daniel,

Sorry to trouble you again.
I got some problems ( The displayed games in the home page does not align properly) in viewing my site with Internet Explorer after implementing this CSS style. But when I use Firefox it works fine.
Any idea?

Thanks in advance

rb
Gast
rb

Hi wäre sehr nett wenn du uns sagen würdest wie man das ins css gallery einbaut kenn mich leider mit php gar nicht aus danke.