Cuando se trata de manipular el DOM, lo primero que pensamos muchos de nosotros es usar JavaScript para hacer lo que sea que necesitemos hacer.<\/p>\n
El lenguaje no solo admite de forma nativa funciones para hacer esto, sino que las caracter\u00edsticas m\u00e1s nuevas de ES6<\/a> nos brindan formas m\u00e1s poderosas de crear scripts del lado del cliente. Y si usa jQuery<\/a> con WordPress, entonces tiene la misma biblioteca de funciones para, ejem, consultar el DOM que hemos tenido durante a\u00f1os.<\/p>\n Pero manipular el DOM en el lado del cliente no siempre es la mejor opci\u00f3n. En su lugar, es posible que desee hacerlo en el lado del servidor. Y debido a algunas de las funciones integradas en PHP, no es muy diferente de c\u00f3mo hacemos las cosas con JavaScript.<\/p>\n Adem\u00e1s, por supuesto, lo estamos haciendo en el servidor.<\/p>\n Entonces, si alguna vez trabaja con el contenido de una publicaci\u00f3n (un tipo de publicaci\u00f3n o un tipo de publicaci\u00f3n personalizada, para el caso) y necesita manipular etiquetas como lo har\u00eda con JavaScript, entonces usar la Digamos, por ejemplo, que desea recorrer todos los elementos de p\u00e1rrafo que existen en el contenido de la publicaci\u00f3n.<\/p>\n Es f\u00e1cil hacer esto usando dicha biblioteca. Primero, querr\u00e1 asegurarse de tener la biblioteca configurada<\/a> en su clase (o solo en su colecci\u00f3n de funciones):<\/p>\n A continuaci\u00f3n, configure un gancho para el contenido:<\/a><\/p>\n Y dentro de esa funci\u00f3n, aseg\u00farese de cargar el contenido de la publicaci\u00f3n en la biblioteca y luego busque todos los Desde aqu\u00ed, puede hacer varias cosas diferentes, como agregar la ID de la publicaci\u00f3n a un atributo personalizado de cada elemento de p\u00e1rrafo. La funci\u00f3n completa se ver\u00eda as\u00ed:<\/a><\/p>\n Por supuesto, tambi\u00e9n hay otras cosas que puedes hacer. Una cosa es manipular el marcado antes de enviarlo al navegador. Sin embargo, otra cosa es agregar atributos a los datos si a\u00fan no existen.<\/p>\n Eso es, sin juego de palabras, excepto tal vez solo una especie de contenido para otra publicaci\u00f3n.<\/p>\nDomDocument<\/code>biblioteca es uno de los m\u00e1s poderosos Las herramientas est\u00e1n a tu disposici\u00f3n.<\/p>\n<?php\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');<\/code><\/pre>\np<\/code>elementos como lo har\u00eda con JavaScript<\/a> (con una nota importante que necesita para codificar correctamente la informaci\u00f3n en caso de super\u00edndices o emojis). us\u00f3):<\/p>\n<?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->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));\n if (false === $domContent) {\n return $content;\n }\n\n $paragraphs = $domDocument->getElementsByTagName('p');\n if (0 === count($paragraphs)) {\n return $content;\n }\n\n \/\/ More to come...\n}<\/code><\/pre>\n<?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->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));\n if (false === $domContent) {\n return $content;\n }\n\n $paragraphs = $domDocument->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->setAttribute('data-id', get_the_ID());\n }\n\n return wp_kses_post($domDocument->saveHTML());\n}<\/code><\/pre>\n