Lange Zeit war das Enlighter Plugin unser Standard-Tool für Code-Snippets. Aber da das Plugin seit knapp zwei Jahren keine Updates mehr erhalten hat, wurde das Risiko für Kompatibilitätsprobleme und Sicherheitslücken einfach zu groß. Wir mussten handeln.
Wer schon einmal Syntax-Highlighter getauscht hat, weiß: Einfach “Plugin deaktivieren und neues aktivieren” funktioniert hier nicht. Damit ihr nicht bei Null anfangen müsst, teile ich hier meinen Workflow für die Migration.
1.Wohin wechseln?
Wir verzichten ab sofort auf externe Highlighting-Plugins und nutzen den nativen WordPress Code Block.
Warum? Ganz einfach: Wir wollen maximale Stabilität. Der native Block ist fester Bestandteil von WordPress und wird somit dauerhaft gewartet. Zudem freuen wir uns über den kleinen Performance-Boost, da der Browser keine zusätzlichen Plugin-Skripte mehr laden muss. Weniger Abhängigkeiten, mehr Speed.
Alles hier macht ihr auf eigene Gefahr. Bitte testet es vorher und führt nicht einfach den Code auf eurem Livesystem aus!
2. Backup erstellen
Im ersten Schritt solltet ihr ein Backup eurer kompletten WordPress Instanz erstellen. Es kann immer etwas schief gehen, weshalb ein Backup obligatorisch ist.
3. SQL Befehle ausführen
Im nächsten Schritt benötigt ihr noch ein Tool, womit ihr SQL Befehle ausführen könnt. Dies könnt ihr direkt über die CLI machen oder beispielsweise phpmyadmin. Ich zeige euch hier kurz, wie ihr dies bereitstellt, da es wohl für Anfänger die einfachste Lösung ist.
3.1 phpmyadmin bereitstellen (optional)
Dazu öffnen wir unsere WordPress Docker Compose Datei:
nano /opt/containers/wordpress/docker-compose.ymlHier fügt ihr folgendes hinzu:
...
...
phpmyadmin:
image: phpmyadmin/phpmyadmin
environment:
PMA_ARBITRARY: 1
restart: unless-stopped
labels:
- "traefik.enable=true"
- "traefik.http.routers.phpmyadmin.entrypoints=websecure"
- "traefik.http.routers.phpmyadmin.rule=Host(`php.euredomain.de`)"
- "traefik.http.routers.phpmyadmin.tls=true"
- "traefik.http.routers.phpmyadmin.tls.certresolver=http_resolver"
- "traefik.http.routers.phpmyadmin.service=phpmyadmin-stage"
- "traefik.http.services.phpmyadmin.loadbalancer.server.port=80"
- "traefik.docker.network=proxy"
- "traefik.http.routers.phpmyadmin.middlewares=default@file"
networks:
- proxy
- default
...
...Noch anzupassen:
- Traefik URL
Nun startet ihr den Dienst:
docker compose -f /opt/containers/wordpress/docker-compose.yml up -dGeht nun auf eure phpmyadmin Webseite. Hier solltet ihr folgendes sehen:
Gebt hier nun die Daten aus eurer Docker Compose ein wie “wordpress-db” oder sowas.
Nachdem ihr eingeloggt seid, navigiert ihr an folgende Stelle:
3.2 SQL Befehle ausführen
Nachdem wir nun bereit sind, führt ihr einfach die folgenden beiden Befehle aus:
UPDATE wp_posts
SET post_content = REGEXP_REPLACE(
post_content,
'<!-- wp:enlighter\\/codeblock.*?-->\\s*<pre class="EnlighterJSRAW"[^>]*>',
'<!-- wp:code -->\n<pre class="wp-block-code"><code>'
)
WHERE post_content LIKE '%wp:enlighter%';UPDATE wp_posts
SET post_content = REGEXP_REPLACE(
post_content,
'<\\/pre>\\s*<!-- \\/wp:enlighter\\/codeblock -->',
'</code></pre>\n<!-- /wp:code -->'
)
WHERE post_content LIKE '%/wp:enlighter%';Nun sollten alle Enlighter Codeblöcke in “normale” Codeblöcke umgewandelt worden sein. Dies könnt ihr nun einfach per Browser überprüfen. Wichtig ist, dass ihr den Cache bei WordPress / Browser löscht.
Wenn ihr phpmyadmin genutzt habt, so könnt ihr den Dienst wieder herunterfahren / aus der Docker Compose löschen.
4. Kopieren-Button hinzufügen (optional)
Wenn ihr nun noch einen Kopieren-Button haben wollt, so könnt ihr diesen einfach mittels folgendem Code realisieren. Geht dazu auf “Design –> Theme-Datei-Editor”.
Wählt hier nun auf der rechten Seite die “functions.php” aus:
Hier fügt ihr am Ende folgendes hinzu:
/**
* Fügt einen Copy-Button zu allen Code-Blöcken hinzu.
*/
function add_copy_button_assets() {
// Nur laden, wenn wir auch wirklich Beiträge anzeigen
if (is_singular()) {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Finde alle Code-Blöcke
const codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function(block) {
// Button erstellen
const button = document.createElement('button');
button.className = 'custom-copy-btn';
button.textContent = 'Copy';
button.type = 'button';
// Klick-Logik
button.addEventListener('click', function() {
// Code-Text holen (wir suchen das innere <code> Element)
const codeElement = block.querySelector('code');
const codeText = codeElement ? codeElement.innerText : block.innerText;
navigator.clipboard.writeText(codeText).then(function() {
button.textContent = 'Copied!';
button.classList.add('copied');
// Nach 2 Sekunden zurücksetzen
setTimeout(function() {
button.textContent = 'Copy';
button.classList.remove('copied');
}, 2000);
}).catch(function(err) {
console.error('Copy failed:', err);
});
});
// Button in den Block einfügen
block.appendChild(button);
});
});
</script>
<style>
/* Damit der Button absolute positioniert werden kann */
.wp-block-code {
position: relative;
}
/* Button Design */
.custom-copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #26A0FF;
border: 1px solid #26A0FF;
color: #ffffff;
border-radius: 4px;
padding: 5px 12px;
font-size: 13px;
font-family: sans-serif;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
opacity: 0.9;
}
.custom-copy-btn:hover {
background-color: #1a8ce6;
border-color: #1a8ce6;
opacity: 1;
}
/* Erfolgs-Status (Grün) */
.custom-copy-btn.copied {
background-color: #2e7d32;
border-color: #2e7d32;
}
</style>
<?php
}
}
add_action('wp_footer', 'add_copy_button_assets');Nun habt ihr einen Kopieren-Button.
