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.
Da ich meine Projekte gerne selbst hoste und auf meiner Hauptmaschine noch sehr viel Speicherplatz habe, habe ich mich entschieden, GitLab als native Anwendung zu installieren. Jahrelang habe ich GitLab in einer Docker-Umgebung bereitgehalten, um verschiedene Dinge auszuprobieren. Doch nun ist der Zeitpunkt gekommen, GitLab produktiv auf einer öffentlichen Adresse bereitzustellen. Als Betriebssystem habe ich die bekannte Distribution Ubuntu 24.04 LTS gewählt. Es ist gefühlt kinderleicht und sollte für jeden beherrschbar sein. Das Ganze läuft auf meinem großen Proxmox-Host als virtuelle Maschine. Der Host selbst ist eine leistungsstarke Maschine mit 32 Intel-Kernen und 128 GB RAM. Die kleine GitLab-VM bekommt vorerst jedoch nur 8 Kerne und 16 GB RAM zugewiesen.
Installation
Die Installation von GitLab ist an sich ein Kinderspiel. Ich habe die folgenden Befehle übernommen, die übrigens auch in der offiziellen Installationsanleitung von GitLab zu finden sind.
Zuerst wird alles aktualisiert und die nötigen Grundpakete wie curl oder perl installiert.
Anschließend sicherstellen, dass ein MTA (Mail Transfer Agent) vorhanden ist. In meinem Fall verwende ich Postfix. Dies ist wichtig, damit GitLab E-Mails (z. B. Benachrichtigungen) versenden kann.
apt install -y postfix
Bei der Konfiguration von Postfix wähle ich bei der Frage, wie Postfix genutzt werden soll, Internet Site. Bei der nächsten Frage gebe ich den offiziellen FQDN (Fully Qualified Domain Name) des Servers an. In meinem Fall lautet dieser: git.triopsi.dev.
Nun installieren wir die GitLab-Quellen. Dies erledigen wir bequem mit einem Script.
Fertig. Nach einer Zeit erscheint eine Efolgsmeldung wie diese hier:
Notes:
Default admin account has been configured with following details:
Username: root
Password: You didn't opt-in to print initial root password to STDOUT.
Password stored to /etc/gitlab/initial_root_password. This file will be cleaned up in first reconfigure run after 24 hours.
NOTE: Because these credentials might be present in your log files in plain text, it is highly recommended to reset the password following https://docs.gitlab.com/ee/security/reset_user_password.html#reset-your-root-password.
gitlab Reconfigured!
*. *.
*** ***
***** *****
.****** *******
******** ********
,,,,,,,,,***********,,,,,,,,,
,,,,,,,,,,,*********,,,,,,,,,,,
.,,,,,,,,,,,*******,,,,,,,,,,,,
,,,,,,,,,*****,,,,,,,,,.
,,,,,,,****,,,,,,
.,,,***,,,,
,*,.
_______ __ __ __
/ ____(_) /_/ / ____ _/ /_
/ / __/ / __/ / / __ `/ __ \
/ /_/ / / /_/ /___/ /_/ / /_/ /
\____/_/\__/_____/\__,_/_.___/
Thank you for installing GitLab!
GitLab should be available at https://git.triopsi.dev
For a comprehensive list of configuration options please see the Omnibus GitLab readme
https://gitlab.com/gitlab-org/omnibus-gitlab/blob/master/README.md
Help us improve the installation experience, let us know how we did with a 1 minute survey:
https://gitlab.fra1.qualtrics.com/jfe/form/SV_6kVqZANThUQ1bZb?installation=omnibus&release=17-5
Scanning processes...
Scanning candidates...
Scanning linux images...
Pending kernel upgrade!
Running kernel version:
6.8.0-11-generic
Diagnostics:
The currently running kernel version is not the expected kernel version 6.8.0-48-generic.
Restarting the system to load the new kernel will not be handled automatically, so you should consider rebooting.
Restarting services...
Service restarts being deferred:
/etc/needrestart/restart.d/dbus.service
systemctl restart getty@tty1.service
systemctl restart serial-getty@ttyS0.service
systemctl restart systemd-logind.service
systemctl restart unattended-upgrades.service
Nun holen wir uns noch das Admin passwort von /etc/gitlab/initial_root_password und loggen uns zu ersten mal ein.
Danach ändern wir das Passwort unter User > Password
Fertig 🙂 Nun können wir GitLab ganz normal benutzen. In den nächsten Tagen werde ich mehr über den richtigen Einsatz von GitLab verraten.
Ich werde hier mein Wissen mit euch allen da draußen teilen – sei es in Form von Gedanken, fertigen Projekten, Code-Snippets oder ganzen Projektteilen.
Dieser Blog soll ein Raum sein, in dem ich meine Erfahrungen im Bereich IT weitergebe. Er richtet sich an alle – von IT-Anfängern bis hin zu Assembler-Profis.