{"id":231823,"date":"2022-12-25T16:41:00","date_gmt":"2022-12-25T13:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231823"},"modified":"2022-11-10T05:21:10","modified_gmt":"2022-11-10T02:21:10","slug":"come-manipolare-il-dom-usando-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-manipolare-il-dom-usando-php\/","title":{"rendered":"Come manipolare il DOM usando PHP"},"content":{"rendered":"\n<p>Quando si tratta di manipolare il DOM, la prima cosa a cui molti di noi probabilmente pensano \u00e8 usare JavaScript per fare tutto ci\u00f2 che \u00e8 necessario.<\/p>\n<p>Non solo il linguaggio supporta nativamente le funzioni per farlo, ma le nuove funzionalit\u00e0 di <a href=\"http:\/\/es6-features.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ES6<\/a> ci offrono modi pi\u00f9 potenti per creare script lato client. E se stai usando <a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery<\/a> con WordPress, hai la stessa libreria di funzioni per, ehm, interrogare il DOM che abbiamo da anni.<\/p>\n<p>Ma manipolare il DOM sul lato client non \u00e8 sempre l&#8217;opzione migliore. Invece, potresti volerlo fare sul lato server. E a causa di alcune delle funzionalit\u00e0 integrate in PHP, non \u00e8 molto diverso da come facciamo le cose usando JavaScript.<\/p>\n<p>A parte, ovviamente, lo stiamo facendo sul server.<\/p>\n<p>Quindi, se stai lavorando con il contenuto di un post (un tipo di post o un tipo di post personalizzato, se \u00e8 per questo) e hai bisogno di manipolare i tag proprio come faresti con JavaScript, l&#8217;uso della <code>DomDocument<\/code>libreria \u00e8 uno dei pi\u00f9 potenti gli strumenti sono a tua disposizione.<\/p>\n<p>Supponiamo, ad esempio, di voler scorrere tutti gli elementi di paragrafo che esistono nel contenuto del post.<\/p>\n<p>\u00c8 facile farlo usando detta libreria. Innanzitutto, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/5bd22e01487fd22df526c1a2e8687d13#file-00-use-dom-document-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">assicurati di avere la libreria configurata<\/a> nella tua classe (o solo nella tua raccolta di funzioni):<\/p>\n<p>Quindi, imposta un <a href=\"https:\/\/gist.github.com\/tommcfarlin\/5bd22e01487fd22df526c1a2e8687d13#file-01-the-content-hook-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">hook per il contenuto:<\/a><\/p>\n<pre><code>&lt;?php\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');<\/code><\/pre>\n<p>E all&#8217;interno di quella funzione, assicurati di caricare il contenuto del post nella libreria e quindi cerca tutti gli <code>p<\/code>elementi proprio <a href=\"https:\/\/gist.github.com\/tommcfarlin\/5bd22e01487fd22df526c1a2e8687d13#file-02-update-the-content-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">come faresti usando JavaScript<\/a> (con una nota importante \u00e8 che devi codificare correttamente le informazioni nel caso in cui gli apici o gli emoji siano Usato):<\/p>\n<pre><code>&lt;?php\n\nfunction updateParagraphElements($content) \n{\n    \/* If we're not on a single page or it's not the main query, \n     * we won't do anything.\n     *\/\n    if (!is_single() || !is_main_query()) {\n        return $content;\n    }\n\n    \/\/ Make sure there is content to parse (and properly encode the HTML entities).\n    $domDocument = new DOMDocument();\n    $domContent = $domDocument-&gt;loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));\n    if (false === $domContent) {\n        return $content;\n    }\n\n    $paragraphs = $domDocument-&gt;getElementsByTagName('p');\n    if (0 === count($paragraphs)) {\n        return $content;\n    }\n\n    \/\/ More to come...\n}<\/code><\/pre>\n<p>Da qui, puoi fare diverse cose come aggiungere l&#8217;ID del post a un attributo personalizzato di ogni elemento del paragrafo. La funzione completa sarebbe quindi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/5bd22e01487fd22df526c1a2e8687d13#file-04-full-code-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">simile a questa:<\/a><\/p>\n<pre><code>&lt;?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');\n\/**\n * Updates the content by locating all of the `p` elements in the content,\n * then adds a class attribute of the post ID to them.\n *\n * The gist of the work is done in this function.\n *\n * @param string $content the post content\n *\n * @return string the updated post content with the aforemented markup.\n *\/\nfunction updateParagraphElements($content) \n{\n    \/* If we're not on a single page or it's not the main query, \n     * we won't do anything.\n     *\/\n    if (!is_single() || !is_main_query()) {\n        return $content;\n    }\n\n    \/\/ Make sure there is content to parse (and properly encode the HTML entities).\n    $domDocument = new DOMDocument();\n    $domContent = $domDocument-&gt;loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));\n    if (false === $domContent) {\n        return $content;\n    }\n\n    $paragraphs = $domDocument-&gt;getElementsByTagName('p');\n    if (0 === count($paragraphs)) {\n        return $content;\n    }\n\n    \/\/ If so, iterate through the elements and add the post ID as a custom attribute.\n    $updatedContent = '';\n    foreach ($paragraphs as $paragraph) {\n        $paragraph-&gt;setAttribute('data-id', get_the_ID());\n    }\n\n    return wp_kses_post($domDocument-&gt;saveHTML());\n}<\/code><\/pre>\n<p>Naturalmente, ci sono anche altre cose che puoi fare. Una cosa \u00e8 manipolare il markup prima di inviarlo al browser. Un&#8217;altra cosa, tuttavia, \u00e8 aggiungere attributi ai dati se non esistono gi\u00e0.<\/p>\n<p>Cio\u00e8, nessun gioco di parole intendeva &#8211; tranne forse solo una sorta di &#8211; contenuto per un altro post.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La manipolazione del DOM sul lato client non \u00e8 sempre l&#8217;opzione migliore. Possiamo farlo utilizzando le funzionalit\u00e0 integrate di PHP.<\/p>\n","protected":false},"author":1,"featured_media":236123,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,835,804,720,865],"tags":[1168],"class_list":["post-231823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-guida-per-principianti","category-php-6","category-sviluppatore","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=231823"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/236123"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=231823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=231823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=231823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}