Uma solução é fazer um iFrame que funcione sozinho numa URL do tipo http://exemplo.com/wp-content/arcade/
, e fazer o embed no post ou página usando um Shortcode básico.
Vai precisar usar o swfobject.getQueryParamValue(param)
para puxar informações da URL e passar para o objeto flashvars
. Então a URL que o WordPress precisa construir seria:
http://exemplo.com/wp-content/arcade/?system=atari&url=Pac_Man-classic
E a declaração das flashvars
(conferindo se existem ou então usar o default):
var flashvars = {};
flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
flashvars.url = '/rom/' + url + '.zip';
E o Shortcode seria este, usado no post como [arcade url="Pac_Man-classic" system="atari"]
:
<?php
/**
* Plugin Name: (SOpt) Arcade Embed
* Plugin URI: http://pt.stackoverflow.com/questions/91673/201
* Version: 1.0
* Author: brasofilo
*/
add_shortcode( 'arcade', 'arcade_sopt_91673' );
function arcade_sopt_91673 ( $atts, $content )
{
$url = isset( $atts['url'] ) ? $atts['url'] : 'Robotech_-_The_Macross_Saga';
$system = isset( $atts['system'] ) ? $atts['system'] : 'sega';
$wp_content = WP_CONTENT_URL; // igual a http://exemplo.com/wp-content
// atenção para o formato heredoc: http://stackoverflow.com/q/5673269/1287812
$html = <<<HTML
<div class="arcade">
<iframe src ="$wp_content/arcade/?url=$url&system=$system" width="600"></iframe>
</div>
HTML;
return $html;
}
Exemplo de index.html
:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var resizeOwnEmulator = function(width, height)
{
var emulator = $('#emulator');
emulator.css('width', width);
emulator.css('height', height);
}
$(function()
{
function embed()
{
var emulator = $('#emulator');
if(emulator)
{
var flashvars = {};
flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
flashvars.url = '/rom/' + url + '.zip';
var params = {};
var attributes = {};
params.allowscriptaccess = 'sameDomain';
params.allowFullScreen = 'true';
params.allowFullScreenInteractive = 'true';
swfobject.embedSWF('flash/Nesbox.swf', 'emulator', '640', '480', '11.2.0', null, flashvars, params, attributes);
}
}
embed();
});
</script>
</head>
<body>
<div>
<div id="emulator">
<p>To play this game, please, download the latest Flash player!</p>
<br>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="//www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="Get Adobe Flash player"/>
</a>
</div>
</div>
</body></html>
Resumindo:
- coloque todos os arquivos do emulador dentro da pasta
wp-content/emulador
(ou como preferir)
- o arquivo principal é o
index.html
- a pasta
http://exemplo.com/wp-content/arcade/rom/
contém todos os roms
- confira que esteja tudo funcionando sozinho quando visita esse index separadamente
- muitas vezes, ao lidar com SWFs, precisamos usar o path absolute, e isso pode ser passado pela URL usando aquele valor do
$wp_content = WP_CONTENT_URL
, isso gera automaticamente a URL válida do site em questão
- depois disso, é só ativar o plugin e escrever o shortcode corretamente.
flashvars
variam ou são sempre os mesmos?