Quando se trata de manipular o DOM, a primeira coisa que muitos de n\u00f3s provavelmente pensam \u00e9 usar JavaScript para fazer tudo o que precisamos fazer.<\/p>\n
N\u00e3o apenas a linguagem oferece suporte nativo a fun\u00e7\u00f5es para fazer isso, como os recursos mais recentes do ES6<\/a> nos d\u00e3o maneiras mais poderosas de criar scripts do lado do cliente. E se voc\u00ea estiver usando jQuery<\/a> com WordPress, ent\u00e3o voc\u00ea tem a mesma biblioteca de fun\u00e7\u00f5es para, ahem, consultar o DOM que temos h\u00e1 anos.<\/p>\n Mas manipular o DOM no lado do cliente nem sempre \u00e9 a melhor op\u00e7\u00e3o. Em vez disso, voc\u00ea pode querer fazer isso no lado do servidor. E por causa de alguns dos recursos embutidos no PHP, n\u00e3o \u00e9 muito diferente de como fazemos as coisas usando JavaScript.<\/p>\n Fora, \u00e9 claro, que estamos fazendo isso no servidor.<\/p>\n Portanto, se voc\u00ea estiver trabalhando com o conte\u00fado de uma postagem (um tipo de postagem ou um tipo de postagem personalizado) e precisar manipular tags como faria com JavaScript, usar a Digamos, por exemplo, que voc\u00ea queira percorrer todos os elementos de par\u00e1grafo que existem no conte\u00fado da postagem.<\/p>\n \u00c9 f\u00e1cil fazer isso usando a referida biblioteca. Primeiro, voc\u00ea deve certificar-se de ter a biblioteca configurada<\/a> em sua classe (ou apenas em sua cole\u00e7\u00e3o de fun\u00e7\u00f5es):<\/p>\n Em seguida, configure um gancho para o conte\u00fado:<\/a><\/p>\n E dentro dessa fun\u00e7\u00e3o, certifique-se de carregar o conte\u00fado da postagem na biblioteca e, em seguida, procure todos os A partir daqui, voc\u00ea pode fazer v\u00e1rias coisas diferentes, como adicionar o ID da postagem a um atributo personalizado de cada elemento de par\u00e1grafo. A fun\u00e7\u00e3o completa ficaria assim:<\/a><\/p>\n Claro, h\u00e1 outras coisas que voc\u00ea pode fazer tamb\u00e9m. Uma coisa \u00e9 manipular a marca\u00e7\u00e3o antes de envi\u00e1-la ao navegador. Outra coisa, por\u00e9m, \u00e9 adicionar atributos aos dados se eles ainda n\u00e3o existirem.<\/p>\n Ou seja, sem trocadilhos \u2013 exceto talvez apenas uma esp\u00e9cie de \u2013 conte\u00fado para outro post.<\/p>\nDomDocument<\/code>biblioteca \u00e9 uma das maneiras mais poderosas ferramentas est\u00e3o \u00e0 sua disposi\u00e7\u00e3o.<\/p>\n<?php\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');<\/code><\/pre>\np<\/code>elementos como faria usando JavaScript<\/a> (com uma observa\u00e7\u00e3o importante sendo que voc\u00ea precisa codificar adequadamente as informa\u00e7\u00f5es caso sobrescritos ou emojis sejam usado):<\/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