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 Kommentare

  1. Hi Daniel,

    Can u translate it to english? =x

    Thanks alot

  2. Hi weizai,
    at the right site you can find „Translate to your language“. Pick there your language flag to translate the post with google. It’s not perfect translation, but it should be enough to understand the tutorial.

    The code comments are already in English 🙂
    Let me know, if you need help..

    Greets
    Daniel

  3. 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

    • This is a example code. If you wan’t to use it with CSS Gallery you have to edit the index.php between <div id=“content“> and </div><!– End CONTENT Div –>

  4. 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

  5. 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

    • Hi weizei,
      I’ve made a mistake in my tutorial.

      replace numberposts=6 with numberposts=$random_games

      At the moment I’ve some trouble with my site. When I fix website problems I will update this tutorial…

  6. Okay Daniel!

    Thanks for the help 😀

  7. Hi,

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

    Regards.

  8. 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?

  9. Hi Cocetz,
    OK, I will do that 🙂

  10. Hi Perry,
    you need this two plugins:
    1. WP-Postrating
    2. WP-Postviews

    Greets

  11. Yes. But how do I display them?

    • Show Highes Rated:
      <?php if (function_exists('get_highest_rated')): ?>
      <ul>
      <?php get_highest_rated(); ?>
      </ul>
      <?php endif; ?>

      Show Most Viewed
      <?php if (function_exists('get_most_viewed')): ?>
      <ul>
      <?php get_most_viewed(); ?>
      </ul>
      <?php endif; ?>

  12. Hi.

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

    Regards

  13. 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

  14. 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.

Kommentar verfassen