N\u00e4r det g\u00e4ller att manipulera DOM \u00e4r det f\u00f6rsta som m\u00e5nga av oss troligen t\u00e4nker p\u00e5 att anv\u00e4nda JavaScript f\u00f6r att g\u00f6ra vad vi \u00e4n beh\u00f6ver g\u00f6ra.<\/p>\n
Spr\u00e5ket st\u00f6der inte bara funktioner f\u00f6r att g\u00f6ra detta, nyare funktioner i ES6<\/a> ger oss kraftfullare s\u00e4tt att bygga skript p\u00e5 klientsidan. Och om du anv\u00e4nder jQuery<\/a> med WordPress, s\u00e5 har du samma bibliotek med funktioner f\u00f6r, ahem, fr\u00e5ga efter DOM som vi har haft i flera \u00e5r.<\/p>\n Men att manipulera DOM p\u00e5 klientsidan \u00e4r inte alltid det b\u00e4sta alternativet. Ist\u00e4llet kanske du vill g\u00f6ra det p\u00e5 serversidan. Och p\u00e5 grund av n\u00e5gra av funktionerna inbyggda i PHP, skiljer det sig inte mycket fr\u00e5n hur vi g\u00f6r saker med JavaScript.<\/p>\n F\u00f6rutom, naturligtvis, g\u00f6r vi det p\u00e5 servern.<\/p>\n S\u00e5 om du n\u00e5gonsin arbetar med inneh\u00e5llet f\u00f6r ett inl\u00e4gg (en inl\u00e4ggstyp eller en anpassad inl\u00e4ggstyp, f\u00f6r den delen) och du beh\u00f6ver manipulera taggar ungef\u00e4r som du skulle g\u00f6ra med JavaScript, d\u00e5 \u00e4r L\u00e5t oss s\u00e4ga att du till exempel vill iterera igenom alla styckeelement som finns i inneh\u00e5llet i inl\u00e4gget.<\/p>\n Det \u00e4r l\u00e4tt att g\u00f6ra detta med hj\u00e4lp av n\u00e4mnda bibliotek. F\u00f6rst vill du se till att du har konfigurerat biblioteket<\/a> i din klass (eller bara i din samling av funktioner):<\/p>\n Skapa sedan en krok f\u00f6r inneh\u00e5llet:<\/a><\/p>\n Och inom den funktionen, se till att l\u00e4sa in inneh\u00e5llet i inl\u00e4gget i biblioteket och leta sedan efter alla H\u00e4rifr\u00e5n kan du g\u00f6ra flera olika saker som att l\u00e4gga till inl\u00e4ggs-ID till ett anpassat attribut f\u00f6r varje styckeelement. Den fullst\u00e4ndiga funktionen skulle d\u00e5 se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/a><\/p>\n Naturligtvis finns det andra saker du kan g\u00f6ra ocks\u00e5. Det \u00e4r en sak att manipulera uppm\u00e4rkningen innan du skickar den till webbl\u00e4saren. Det \u00e4r dock en annan sak att l\u00e4gga till attribut till data om de inte redan finns.<\/p>\n Det vill s\u00e4ga, ingen ordlek avsedd \u2013 f\u00f6rutom kanske bara slags \u2013 inneh\u00e5ll f\u00f6r ett annat inl\u00e4gg.<\/p>\nDomDocument<\/code>biblioteket en av de mest kraftfulla verktyg \u00e4r ditt f\u00f6rfogande.<\/p>\n<?php\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');<\/code><\/pre>\np<\/code>element ungef\u00e4r som du skulle anv\u00e4nda JavaScript<\/a> (med en viktig anm\u00e4rkning \u00e4r att du m\u00e5ste koda informationen korrekt om upph\u00f6jda eller emojis \u00e4r Begagnade):<\/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