MYARCADEBLOG – ANZEIGE VON ZUFÄLLIGEN SPIELEN AUF DER STARTSEITE » HOWTO, WORDPRESS » SPIELE, KATEGORIEN, REALISIERUNG, SPIELS, THEMES, LÄNGE, NOTEPAD, KATEGORIE, GOTHICARIALVERDANA, STARTSEITE

MyArcadeBlog – Anzeige von zufälligen Spielen auf der Startseite

Freitag, 3. Juli 2009 um 10:00 von Daniel

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.

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:

Lese alle Kategorien aus
Gehe die Kategorien durch und wähle aus jeder Kategorie 6 zufällige Spiele aus
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:

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

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

Bookmarken bei Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.

Interessante Artikel

Relevante Google Links

Bewerte diesen Artikel: 1 Stern 2 Sterne 3 Sterne 4 Sterne 5 Sterne

Loading ...

MyArcadeBlog – Anzeige von zufälligen Spielen auf der Startseite

Verpasse keine Reaktion auf diesen Beitrag! Abonniere den RSS 2.0 Feed.

Was denkst Du über dieses Thema? Hinterlasse ein Kommentar.

Tags: CSS, MyArcadeBlog, PHP, post, random, Step by Step, Tutorial, zufällig

18 Kommentare zu “MyArcadeBlog – Anzeige von zufälligen Spielen auf der Startseite”

weizai kommentierte am Samstag, 4.07.2009 um 08:09 Uhr

Hi Daniel,

Can u translate it to english? =x

Thanks alot
Daniel kommentierte am Samstag, 4.07.2009 um 12:06 Uhr

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
weizai kommentierte am Samstag, 4.07.2009 um 12:28 Uhr

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
Daniel kommentierte am Samstag, 4.07.2009 um 12:40 Uhr

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 –>
weizai kommentierte am Samstag, 4.07.2009 um 12:44 Uhr

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 kommentierte am Sonntag, 5.07.2009 um 05:38 Uhr

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
Daniel kommentierte am Sonntag, 5.07.2009 um 11:54 Uhr

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…
weizai kommentierte am Sonntag, 5.07.2009 um 13:12 Uhr

Okay Daniel!

Thanks for the help
Perry kommentierte am Montag, 6.07.2009 um 17:05 Uhr

Thanks
Perry kommentierte am Dienstag, 7.07.2009 um 01:25 Uhr

Hi,

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

Regards.
Cocetz kommentierte am Dienstag, 7.07.2009 um 12:28 Uhr

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?
Daniel kommentierte am Dienstag, 7.07.2009 um 14:19 Uhr

Hi Cocetz,
OK, I will do that
Daniel kommentierte am Dienstag, 7.07.2009 um 18:16 Uhr

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

Greets
Perry kommentierte am Dienstag, 7.07.2009 um 22:05 Uhr

Yes. But how do I display them?
Daniel kommentierte am Dienstag, 7.07.2009 um 22:15 Uhr

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; ?>
Perry kommentierte am Mittwoch, 8.07.2009 um 23:26 Uhr

Hi.

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

Regards
weizai kommentierte am Donnerstag, 9.07.2009 um 04:44 Uhr

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 kommentierte am Freitag, 4.12.2009 um 17:21 Uhr

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.