11-05-2025, 12:57 PM
🖥️ Serveranzeige (Serverviewer) für WordPress!
Hey zusammen,
wir haben für euch eine kleine Serveranzeige (Serverviewer) gebaut – speziell für WordPress.
Damit könnt ihr ganz einfach sehen, ob euer Server online (grün) oder offline (rot) ist. 🎮
🔧 Voraussetzungen
Ihr benötigt dafür:
das Plugin „Code Snippets“
eine einfache HTML-Seite (z. B. über Elementor oder eine normale Seite in WordPress)
⚙️ Funktionsweise
Die Anzeige nutzt die BattleMetrics-API oder wahlweise einen Query-Port, um Serverdaten abzurufen.
Die Online-/Offline-Anzeige (Ampel grün/rot) funktioniert zuverlässig.
Die Spieleranzahl wird zwar abgefragt, funktioniert aber aktuell nicht zuverlässig.
Bei Minecraft funktioniert nur die Ampelanzeige (Spieleranzahl wird nicht korrekt ausgegeben).
Bei ARK: Ascended wird die Spieleranzahl ebenfalls fehlerhaft oder gar nicht korrekt angezeigt.
Das betrifft auch andere Spiele teilweise, da die Daten über BattleMetrics oder Query nicht immer sauber übermittelt werden.
🕹️ Beitreten-Button
Bei ARK: Ascended hat der Button derzeit keine Funktion, da das Spielmenü den direkten Beitritt blockiert (auch wenn der Steam-Link korrekt ist).
Bei Spielen wie Counter-Strike funktioniert der Beitreten-Button wie vorgesehen, wenn ihr IP und Port hinterlegt habt.
🧩 Anpassungen
Ihr könnt:
Hintergrundbilder ändern
Texte anpassen
Die Anzeige individuell gestalten
Das Ganze ist schlicht, übersichtlich und leicht anpassbar.
📹 Vorschau
HTML Code
Code:
<!-- FULL ELEMENTOR GAMESERVER DASHBOARD – SCOPED VERSION -->
<div id="server-dashboard">
<canvas id="server-dashboard-canvas"></canvas>
<div class="server-grid">
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Aberration] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27024</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27024" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf[Aberration] GSI [GER] 1xXP 2xH 2xT Cross << !\nErkundet die unterirdischen Höhlen und überlebt die Gefahren.\nWilddinos spawnen bis ca. Level 210.\nPyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27024" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Astreos] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27020</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27020" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Astraeos] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27020" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Extinction] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27021</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27021" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Extinction] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27021" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Ragnarok] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27022</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27022" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Ragnarok] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27022" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Scorched Earth] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27023</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27023" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Scorched Earth] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27023" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[The Center] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27026</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27026" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [The Center] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27026" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Svartalfheim] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27028</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27028" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Svartalfheim] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27028" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://image.api.playstation.com/vulcan/ap/rnd/202310/2502/1751043f9999ae22f2e6293fcf355e596f4183de063619da.png');">
<div class="overlay"></div>
<img src="https://ark2.de/uploads/monthly_2023_10/ASA_Logo_transparent.webp.a360e57899b61d7ced50403db77ae08c.webp" alt="ARK ASA Logo" class="server-logo">
<h3>[Valguero] GSI [GER] 1xXP 2xH 2xT Cross<</h3>
<p>Spiel: ARK ASA</p>
<p>IP: 109.230.239.32:27029</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="27029" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf [Valguero] GSI [GER] 1xXP 2xH 2xT Cross Genießt das besondere Abenteuer dieser Mod-Map.Wilddinos spawnen bis ca. Level 210.Pyromane-Dino und Drakeling spawnen nicht.</p>
<a href="steam://connect/109.230.239.32:27029" class="server-btn">Beitreten</a>
</div>
<!-- Server 1: ARK ASA -->
<div class="server-card" style="background-image:url('https://www.nintendo.com/eu/media/images/10_share_images/games_15/nintendo_switch_4/2x1_NSwitch_Minecraft_image1600w.jpg');">
<div class="overlay"></div>
<img src="https://upload.wikimedia.org/wikipedia/en/e/e7/Steve_%28Minecraft%29.png" alt="ARK ASA Logo" class="server-logo">
<h3>City Build<</h3>
<p>Spiel: Minecraft</p>
<p>IP: 109.230.239.32:25568</p>
<div class="server-status-box">
[serverstatus ip="109.230.239.32" port="25568" name="ARK ASA "]
</div>
<p class="server-desc">Willkommen auf City Build</p>
<a href="steam://connect/109.230.239.32:25568" class="server-btn">Beitreten</a>
</div>
</div>
</div>
<style>
/* SCOPED DASHBOARD */
#server-dashboard {
position: relative;
overflow: hidden;
padding: 20px;
}
/* SCOPED PARTICLE CANVAS */
#server-dashboard-canvas {
position: absolute;
inset: 0;
z-index: 0;
}
/* SCOPED GRID */
#server-dashboard .server-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
position: relative;
z-index: 1;
}
/* SCOPED SERVER CARD */
#server-dashboard .server-card {
position: relative;
border-radius: 16px;
color: #fff;
text-align: center;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: 0 0 20px rgba(0,255,255,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#server-dashboard .server-card:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 0 40px rgba(0,255,255,0.4);
}
#server-dashboard .overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
transition: background 0.3s ease;
}
#server-dashboard .server-card:hover .overlay { background: rgba(0,0,0,0.35); }
/* SCOPED LOGO */
#server-dashboard .server-logo {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #00bfff;
margin: 15px auto 10px auto;
position: relative;
z-index:2;
}
/* SCOPED TEXT */
#server-dashboard h3 { font-size: 1.3rem; margin: 6px 0; font-family: 'Orbitron', sans-serif; position: relative; z-index:2; }
#server-dashboard p { margin:4px 0; font-size:0.9rem; position:relative; z-index:2; }
#server-dashboard .server-desc { color:#ccc; margin-top:8px; font-size:0.85rem; }
/* SCOPED STATUS */
#server-dashboard .server-status-box { margin: 8px 0; font-size:0.95rem; position:relative; z-index:2; }
/* SCOPED BUTTON */
#server-dashboard .server-btn {
display:inline-block;
margin-top:12px;
padding:10px 18px;
border-radius:10px;
text-decoration:none;
color:#fff;
background:linear-gradient(90deg,#00bfff,#0099cc);
transition:0.3s;
z-index:2;
position:relative;
}
#server-dashboard .server-btn:hover { background:linear-gradient(90deg,#0099cc,#00bfff); transform:scale(1.05); }
/* SCOPED GLOW ANIMATION */
@keyframes glow { 0%{box-shadow:0 0 10px #00bfff;} 50%{box-shadow:0 0 25px #00ffff;} 100%{box-shadow:0 0 10px #00bfff;} }
#server-dashboard .server-card:hover { animation: glow 1.2s infinite alternate; }
/* MOBILE OPTIMIERUNG */
@media (max-width:768px){
#server-dashboard .server-grid { grid-template-columns:1fr; gap:20px; }
#server-dashboard .server-card { padding:18px 12px; }
#server-dashboard h3 { font-size:1.2rem; }
#server-dashboard p, #server-dashboard .server-desc, #server-dashboard .server-status-box { font-size:0.85rem; }
#server-dashboard .server-btn { padding:12px 20px; font-size:0.95rem; }
}
@media (max-width:600px){
#server-dashboard-canvas { display:none; }
}
</style>
<!-- GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
<!-- SCOPED PARTICLE JS -->
<script>
const canvas = document.getElementById('server-dashboard-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray = [];
const colors = ['#00ffff','#00bfff','#0099cc'];
class Particle{
constructor(){ this.x=Math.random()*canvas.width; this.y=Math.random()*canvas.height; this.size=Math.random()*3+1; this.speedX=Math.random()*1-0.5; this.speedY=Math.random()*1-0.5; this.color=colors[Math.floor(Math.random()*colors.length)]; }
update(){ this.x+=this.speedX; this.y+=this.speedY; if(this.x>canvas.width)this.x=0;if(this.x<0)this.x=canvas.width;if(this.y>canvas.height)this.y=0;if(this.y<0)this.y=canvas.height; }
draw(){ ctx.fillStyle=this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2); ctx.fill(); }
}
function init(){ particlesArray=[]; for(let i=0;i<100;i++){ particlesArray.push(new Particle()); } }
init();
function animate(){ ctx.clearRect(0,0,canvas.width,canvas.height); particlesArray.forEach(p=>{p.update();p.draw();}); requestAnimationFrame(animate); }
animate();
window.addEventListener('resize',()=>{ canvas.width=window.innerWidth; canvas.height=window.innerHeight; init(); });
</script>Code für das Snippets Plugin
Code:
function game_server_status($atts) {
$a = shortcode_atts(array(
'ip' => '',
'port' => '',
'name' => 'Server'
), $atts);
$ip = sanitize_text_field($a['ip']);
$port = sanitize_text_field($a['port']);
$name = sanitize_text_field($a['name']);
// BattleMetrics API
$url = "https://api.battlemetrics.com/servers?filter[search]={$ip}";
$response = wp_remote_get($url, array('timeout' => 10));
if (is_wp_error($response)) {
return "<span style='color:gray;'>❌ API-Fehler</span>";
}
$body = json_decode(wp_remote_retrieve_body($response), true);
$status_html = "<span style='color:#ffcc00;'>❔ Unbekannt</span>";
if (isset($body['data'][0]['attributes'])) {
$data = $body['data'][0]['attributes'];
$status = $data['status'];
$players = isset($data['players']) ? $data['players'] : 0;
$max_players = isset($data['maxPlayers']) ? $data['maxPlayers'] : 0;
$map = isset($data['details']['map']) ? $data['details']['map'] : 'n/a';
if ($status === 'online') {
$status_html = "<span style='color:#00ff99;font-weight:bold;'>🟢 Online</span>";
} else {
$status_html = "<span style='color:#ff4d4d;font-weight:bold;'>🔴 Offline</span>";
}
// Spieler + Map, wenn vorhanden
$info_html = "<div style='font-size:0.9em;color:#ccc;margin-top:4px;'>👥 {$players}/{$max_players} Spieler<br>🗺️ Map: {$map}</div>";
return "<div class='server-status'>{$status_html}{$info_html}</div>";
}
return $status_html;
}
add_shortcode('serverstatus', 'game_server_status');Viel Spaß mit der Serveranzeige – und schaut einfach, ob euer Server grün (an) oder rot (aus) ist. 😊
Liebe Grüße
Euer rumpel
Tschau, Tschau – Bye Bye!