Per poter mostrare il codice qui sul sito avevo bisogno di modificare alcune parte per evitare un conflitto con l’HTML, quindi sostituire alcuni caratteri come <,>,’,”, che fossero visibili ma non “eseguibili”, usando dei sostituti come <,> che vengono interpretati dal HTML come < e >.
P.S. Quando usavo il text editor precedente ad Gutemberg, adesso mi sembra che lasci inalterato il codice, quindi senza dover provvedere a sistemare prima di pubblicarlo.
Online avevo trovato un sito che faceva lo stesso lavoro (http://www.htmlify.net/), ma volevo poterlo eseguire direttamente dal mio sito, senza ogni volta aprirne un altro. Conoscevo la funzione in PHP di htmlspecialchars (https://www.php.net/manual/en/function.htmlspecialchars.php), però per evitare di fare richieste al server quando so che al giorno d’oggi su qualsiasi dispositivo apro il sito viene eseguito molto javascript sono andato alla ricerca di una funzione simile e ho trovato questo snippet su stackoverflow (https://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript) [So che è un codice facile da fare, ma perchè arrovellarsi quando qualcuno lo ha già fatto?], quindi mi sono messo a fare un mini plugin per visualizzare sulla dashboard una textarea dove inserire il codice e poi un input dove mostrarla. Successivamente penso di aggiungerci anche un bottone per copiare in automatico il risultato [ troppa fatica selezionare tutto😅].
P.S. La scelta di usare javascript al posto di fare una chiamata Ajax e far eseguire la conversione è anche perchè probabilmente (non ho fatto test/analisi, opinione personale) JS riuscirebbe a farlo in tempi molto più brevi della chiamata al sever.
Il codice:
<?php
/**
* Plugin Name: Html to Snippet
* Plugin URI: https://www.example.com
* Description: Questo plugin serve trasformare il codice html o altro tipo in snippet per poter essere mostrati sul web
* Version: 1.0
* Author: NomeAutore
* Author URI: https://www.example.com
*/
add_action('wp_dashboard_setup', 'HtmlToSnippet_Dashboard_Widget');
function HtmlToSnippet_Dashboard_Widget()
{
global $wp_meta_boxes;
wp_add_dashboard_widget('HtmlToSnippet_widget_dash', 'Conversore','HtmlToSnippet_Function');
}
function HtmlToSnippet_Function()
{
?>
<div id="HtmlToSnippet_div">
<textarea id="HMTL_TextArea"></textarea>
<input type="button" onclick="Convert_HTML_To_Snippet()" value="convert"/>
<textarea id="Output_Snippet" readonly></textarea>
</div>
<?php
}
Add_action("admin_head","HtmlToSnippet_CSS");
Function HtmlToSnippet_CSS()
{
?>
<style>
#HtmlToSnippet_div
{
width:100%;
height:30%;//Questo è da verificare se funziona
}
#HtmlToSnippet_div textarea, #HtmlToSnippet_div #Output_Snippet
{
width:100%;
height:45%; //Rispetto al div
}
#HtmlToSnippet_div Input
{
width:100%;
height:10%; //Rispetto al div
}
</style>
<?php
}
add_action("admin_footer","HtmlToSnippet_JS");
Function HtmlToSnippet_JS()
{
?>
<script>
function Convert_HTML_To_Snippet()
{
text=document.getElementById("HMTL_TextArea").value;
textResult=escapeHtml(text);
document.getElementById("Output_Snippet").value=textResult;
}
function escapeHtml(text)
{
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
</script>
<?php
}
Alcuni link esterni:
https://developer.wordpress.org/reference/functions/add_menu_page/#user-contributed-notes