Trick # 576 | Dieser Beitrag beinhaltet 1113 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Wenn auf der WordPress-Website etwas schiefläuft, zeigt das System eine Fehlermeldung an. Diese ist aber ziemlich mager gestaltet. Das lässt sich ändern; heute zeigen wir Ihnen wie.
Sie kennen bestimmt die Standard-Fehlermeldung aus WordPress:
Nun, also: hübsch ist die nicht anzusehen.
Das wollen wir heute ändern, was gar nicht mal so schwierig ist.
- Zunächst erstellen Sie in Ihrem Child-Theme ein neues Verzeichnis. Nennen Sie es
wp-error. Das Verzeichnis können Sie zum Beispiel mit dem FTP-Programm FileZilla erstellen oder auch im Dateimanager Ihres Webspace-Hosters. Legen Sie das neue Verzeichniswp-errorim Ordnerhttps://ihredomain.ch/wp-content/themes/ihr-theme/an. - In diesem Ordner
wp-errorlegen Sie nun noch zwei neue Dateien an. Einerseitswp-die-template.phpund zusätzlich nochwp-die-style.css. - Nun wechseln Sie ins Backend Ihrer WordPress-Website, klicken auf «Design» und weiter auf «Theme-Datei-Editor».
- In der Navigationsspalte rechts sehen Sie nun den neuen Eintrag «wp-error» und darin die beiden neuen Dateien «wp-die-template.php» und «wp-die-style.css»
- Öffnen Sie letztere (wp-die-style.css) zuerst und fügen Sie dort den folgenden Code ein:
body.wp-die {
background-color: #f4f4f9;
color: #333;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}.wp-die-container {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
padding: 20px;
text-align: center;
}.wp-die-container h1 {
font-size: 24px;
margin-bottom: 10px;
color: #538f38;
}.wp-die-container p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}.wp-die-container a {
display: inline-block;
background: #e75667;
color: #fff;
text-decoration: none;
padding: 10px 20px;
font-size: 14px;
transition: background 0.3s;
}.wp-die-container a:hover {
background: #e4e4e4;
color: #1f431e;
}- Speichern Sie die Datei und öffnen dann das Template (wp-die-template.php).
- Dort gehört der folgende Code rein:
<?php
// wp-die-template.php// Stile laden
add_action( 'wp_enqueue_scripts', function() {
if ( defined( 'WP_USE_THEMES' ) && WP_USE_THEMES ) {
wp_enqueue_style(
'custom-wp-die-style',
get_stylesheet_directory_uri() . '/wp-error/wp-die-style.css',
[],
'1.0.0'
);
}
});// Template für wp_die
function custom_wp_die_handler( $message, $title = '', $args = [] ) {
if ( ! headers_sent() ) {
header( 'Content-Type: text/html; charset=utf-8' );
}?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo esc_html( $title ); ?></title>
<?php wp_head(); ?>
</head>
<body class="wp-die">
<div class="wp-die-container">
<h1><?php echo esc_html( $title ? $title : __( 'Error', 'your-text-domain' ) ); ?></h1>
<p><?php echo wp_kses_post( $message ); ?></p>
<a href="<?php echo esc_url( home_url() ); ?>"><?php _e( 'Go to Homepage', 'your-text-domain' ); ?></a>
</div>
<?php wp_footer(); ?>
</body>
</html>
<?php
die();
}// Custom Handler aktivieren
add_filter( 'wp_die_handler', function() {
return 'custom_wp_die_handler';
});- Als letztes müssen Sie WordPress noch mit den beiden neuen Dateien bekanntmachen und diese einbinden.
- Dazu wechseln Sie (immer noch unter Design/Theme-Datei-Editor) in die Datei «functions.php» und fügen folgenden Code hinzu:
// WordPress-Fehlermeldungen stylen
require_once get_stylesheet_directory() . '/wp-error/wp-die-template.php';Das war’s dann schon.
Wenn WordPress künftig eine Fehlermeldung ausgibt, wird das in etwa so aussehen wie nebenan:
Selbstverständlich können Sie die Darstellung via CSS-Code in der Datei «wp-die-style.css» anpassen. Hiezu wechseln Sie im Backend jederzeit auf Design/Theme-Datei-Editor ins Verzeichnis «wp-error» und bearbeiten die Datei «wp-die-style.css».
Werbung
Posts werden im WordPress-Backend nach Datum sortiert, wobei der neueste Beitrag zuerst erscheint. Hin und wieder ist das nicht praktisch. Wünschenswert wäre ab und an eine alphabetische Sortierung oder nach anderen Kritierien. Wie das ...
Die Mediathek von WordPress zeigt enthaltene Files standardmässig nur portionenweise: 80 Dateien und dann kommt ein «Mehr Laden»-Button, der mich nervt. Muss nicht sein. Heute bauen wir den «Infinite Scroll» wieder ein. Wir benötigen eine ...
Orientieren Sie die Besucherinnen und Besucher Ihrer Website auf einen Blick über neue Beiträge. Das lässt sich recht einfach einrichten: neben den Titel der einzelnen Post erscheint dann auf Ihrer Übersichtsseite eine Markierung - das kann ein ...
Die Font-Awesome-Icons sind äusserst beliebt. Sie tauchen auf vielen Websites auf und werden immer mal wieder ergänzt. Die Einbindung auf der eigenen Website ist insbesondere mit einem Plugin nicht schwierig.
Keine Inhalte gefunden.
Werbung
