So ähnlich klang mein innerlicher Schrei, als ich auf der Suche nach einem Plugin war, um einen Anmeldeservice für die nächste „Bama“ auf der Vereinswebseite https://bademanteltour.de zu realisieren. Die Anforderungen waren klar: kostenlos, einfach zu bedienen und ohne nervige Werbung für irgendwelche Pro-Features. Klingt machbar, oder? Tja, denkste!
Nach stundenlanger Recherche und zahllosen Tests war ich frustriert. Zwar gibt es unzählige WordPress- und WooCommerce-Plugins für Events, aber entweder waren sie so veraltet, dass sie gefühlt aus der Zeit von MySpace stammten, oder sie waren kostenpflichtig – mieten oder kaufen war die Devise. Und so kam ich zu dem Schluss: Wenn es nichts Passendes gibt, mache ich es eben selbst!
Was brauche ich eigentlich?
Ein Blick in den Anforderungskatalog hat schnell gezeigt: Es sollte eine Art Bestellsystem mit einem neuen Produkttyp werden. Da die Vereins-Website WooCommerce nutzt, konnte ich direkt die API nutzen, um das System zu erweitern.
Das Produkt sollte folgende Features haben:
Start- und Endzeitpunkt.
Optional einen Veranstaltungsort.
Die Möglichkeit, sowohl virtuell als auch live vor Ort stattzufinden.
Auf der Produktseite einen zusätzlichen Reiter „Veranstaltung“, der eine OpenStreetMap anzeigt.
Die Option, das Event per Klick direkt in den Kalender zu speichern (am besten per Link).
Außerdem sollte es möglich sein, bei der Anmeldung individuelle Daten wie Namen oder andere Infos einzugeben, die dann direkt ins Bestellsystem übertragen werden.
Weil das Ganze auch ohne Events genutzt werden können soll, habe ich mich dafür entschieden, ein eigenes Plugin zu entwickeln, das unabhängig von WooCommerce läuft. Das Ergebnis heißt: „Extra Product Data for WooCommerce“ – und wie genau es funktioniert, erzähle ich euch in einem späteren Beitrag.
Wie ist der aktuelle Stand?
Aktuell befindet sich das Plugin im Prüfprozess der WordPress-Reviewer. Sobald es freigegeben wird, steht es allen zur Verfügung!
Vielleicht ist es euch in einem vorherigen Beitrag aufgefallen: Es gibt die Möglichkeit, Code in einem Code-Block per Button zu kopieren. Diese Funktion ist jedoch standardmäßig nicht im Core-Code-Block von WordPress enthalten. Kein Grund zur Sorge! Mit einem kleinen Snippet könnt ihr diese Funktionalität ganz einfach zu euren Beiträgen hinzufügen.
So geht’s:
Erstellt einen HTML-Block in eurem Beitrag oder fügt das Snippet direkt in eure Theme-Dateien ein, falls es global gelten soll.
Fügt den folgenden Code ein:
<script>
document.addEventListener('DOMContentLoaded', function () {
// Alle Code-Blöcke im Beitrag finden
var codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function (block) {
var code = block.querySelector('code');
if (!code) return; // Überspringen, falls kein <code> im Block ist
// Button erstellen
var button = document.createElement('button');
button.textContent = 'Copy Code';
button.style.cssText = `
position: absolute;
top: 0;
right: 0;
margin: 4px;
padding: 4px 8px;
font-size: 12px;
background-color: rgba(200, 200, 200, 0.2);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease-in-out;
`;
// Button Hover-Effekte
button.addEventListener('mouseenter', function () {
button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
});
button.addEventListener('mouseleave', function () {
button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
});
// Klick-Event zum Kopieren
button.addEventListener('click', function () {
// Codeinhalt kopieren
var range = document.createRange();
range.selectNodeContents(code);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
try {
document.execCommand('copy');
button.textContent = 'Copied!';
button.style.backgroundColor = '#333';
button.style.color = '#fff';
} catch (err) {
console.error('Copy failed', err);
button.textContent = 'Failed!';
}
// Auswahl zurücksetzen
selection.removeAllRanges();
// Button nach 3 Sekunden zurücksetzen
setTimeout(function () {
button.textContent = 'Copy Code';
button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
button.style.color = '#fff';
}, 3000);
});
// Block-Style anpassen
block.style.position = 'relative';
block.insertBefore(button, code);
});
// Farbe für den Text in Code-Blöcken setzen
document.querySelectorAll('.wp-block-code pre').forEach(function (text) {
text.style.color = '#fff'; // Optional: Kann entfernt oder angepasst werden
});
});
</script>
Nun schreibt ein Beitrag und veröffentlicht es. Ihr werdet sehen, dass nun der Button bei jedem Code Block vorhanden ist.
Anleitung zur Anpassung des Stils
Der Button wird durch Inline-Styles direkt im Script gestaltet. Wenn ihr das Design anpassen möchtet, könnt ihr die CSS-Eigenschaften im JavaScript ändern. Die Anpassung ist ganz einfach!
Stil anpassen
Hier ist der Abschnitt des Codes, der den Button-Style definiert:
Die Eigenschaft background-color legt die Hintergrundfarbe fest. Hier könnt ihr Farbwerte in rgba, Hexadezimal (#333) oder als Farbnamen (z. B. red) verwenden. Beispiel:
Mit border-radius könnt ihr runde oder eckige Buttons erstellen. Beispiel:
button.style.borderRadius = '0'; // Keine Abrundung
Schriftfarbe
Die Textfarbe wird mit color definiert. Beispiel:
button.style.color = '#000'; // Schwarzer Text
Übergangseffekte
Der Button hat bereits einen Hover-Effekt (mouseenter und mouseleave), bei dem die Hintergrundfarbe geändert wird. Möchtet ihr weitere Effekte hinzufügen, könnt ihr das transition-Property anpassen. Beispiel:
button.style.transition = 'transform 0.3s ease-in-out';
button.addEventListener('mouseenter', function () {
button.style.transform = 'scale(1.1)'; // Button wird leicht größer
});
button.addEventListener('mouseleave', function () {
button.style.transform = 'scale(1)';
});
Fazit
Das Inline-Styling im Script macht den Button flexibel und leicht anpassbar. Ihr könnt durch kleine Änderungen an den Eigenschaften den Button an euer Design anpassen – egal ob ihr minimalistisch, farbenfroh oder modern arbeiten möchtet.
Falls ihr ein konsistentes Design in eurem gesamten Blog haben möchtet, könnt ihr das Styling auch in eine separate CSS-Datei auslagern. Dafür müsst ihr die Inline-Styles durch CSS-Klassen ersetzen.
