Ho realizzato su richiesta per un utente con difficoltà di vista una personalizzazione di WordPress da utilizzare nel nuovo editor a blocchi di WordPress, Gutenberg, che in combinazione con alcuni temi mostra un font di default dal colore poco leggibile, come nell’esempio qua sotto:
Si procede andando a creare nella cartella del proprio tema WordPress (meglio se in quella di un child theme) un file CSS, che ho chiamato admin.css, nel cui interno si va a inserire il codice seguente:
.block-editor-default-block-appender textarea.block-editor-default-block-appender__content, div.editor-styles-wrapper, div.editor-styles-wrapper button, div.editor-styles-wrapper input, div.editor-styles-wrapper select, div.editor-styles-wrapper textarea {
color: #000;
background-color: rgba(0, 0, 0, 0.1);
font-size: 18px;
}personalizzando a proprio piacimento il colore, lo sfondo, il font (ed eventualmente aggiungendo ciò che serve) in CSS.
Dopodichè occorre andare ad inserire nel file functions.php il seguente codice PHP:
<?php
function customAdmin() {
$url = get_settings('siteurl');
$url = $url . '/wp-content/themes/nome-del-tema/admin.css';
echo '<!-- custom admin css -->
<link rel="stylesheet" type="text/css" href="' . $url . '" />
<!-- /end custom adming css -->';
}
add_action('admin_head', 'customAdmin');
?>avendo cura di sostituire la URL corretta del vostro tema dove avete salvato il file admin.css. Anche qui meglio in un child theme, o sfruttando qualche apposito plugin, perchè altrimenti al prossimo aggiornamento del tema perderete probabilmente la personalizzazione.
Il risultato del codice CSS di esempio inserito è il seguente:
Ovviamente, avendo effettuato questa personalizzazione si perde la possibilità di vedere in anteprima come apparirà a livello di formattazione il post che si sta scrivendo, ma come diciamo qui in Liguria: “Sciûsciâ e sciorbî no se pêu'”.