How to put Phaser game into wordpress site?

[ekeimaja]

So, I need to put Phaser game to WordPress static site. Theme is called Zerif lite.

I need to put game to big title -section, where is not possible to use widgets.

How can I make the game appear to this section? Where do I put my game folder structure? Or is this even possible to make?

[Gob0]

Hi, 

it's possible to integrate your gmae in WordPress. Check this page on my web site (click on button called "Zoop: Pick them all"). 

You have to:

1. upload your game folder in a folder on your FTP (i put my games in a folder called "jeux" on WP root folder)
2. In your WP page, go to "text" (not visual) editor, add a div container for your game.
3. Then add a script tag at the end of page to start game.

[ekeimaja]

<div class="home-header-wrap">

<?php

	global $wp_customize;

	echo '<div class="header-content-wrap">';

		echo '<div class="container">';

?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/game/phaser.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/game/boot.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/game/preload.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/game/game3.js"></script>


<div id="game">

  <script src="<?php echo get_stylesheet_directory_uri(); ?>/game/main.js"></script>

</div>
	
<?php
	echo '</div><!-- .header-content-wrap -->';
		echo '<div class="clear"></div>';

?>

</div>

Now it gives error

SyntaxError: expected expression, got '<'
Phaser.Loader.prototype.fileComplete()             phaser.js:71080
Phaser.Loader.prototype.xhrLoad/xhr.onload()  phaser.js:70672

[Gob0]

Hi, 

why not use the WP header to enqueue your JS librairies? 

Wht do you call the "game/main.js" in the div called "game" instead of calling that file with the others? 

[ekeimaja]

Now I moved main.js to others, error disappeared, but it shows just black.

[lukaMis]

You can ask guy at this site: http://www.emanueleferonato.com/
It is a wp site and he has phaser games in there all the time. Sometime in site header.

[millerz8]

Nowadays, I wonder about it as well. Anyway, you should also pay attention to the optimization of your potential wordpress resource, or to existing one. I know at least one great article related to WordPress website speed optimization, and you know what - almost all advises and tips they have written about, I've tried on my own wordpress site, and they really helped to make it maybe x1,5 faster.

Edited January 10, 2022 by millerz8