Mit\u00e4 tulee DOM:n manipuloimiseen, ensimm\u00e4inen asia, jota monet meist\u00e4 todenn\u00e4k\u00f6isesti ajattelevat, on JavaScriptin k\u00e4ytt\u00e4minen sen tekemiseen.<\/p>\n
Kieli tukee alkuper\u00e4isi\u00e4 toimintoja t\u00e4m\u00e4n tekemiseen, vaan ES6<\/a> :n uudemmat ominaisuudet antavat meille tehokkaampia tapoja rakentaa asiakaspuolen komentosarjoja. Ja jos k\u00e4yt\u00e4t jQuery\u00e4<\/a> WordPressin kanssa, sinulla on sama funktiokirjasto DOM-kyselyyn, joka meill\u00e4 on ollut vuosia.<\/p>\n Mutta DOM:n manipulointi asiakaspuolella ei ole aina paras vaihtoehto. Sen sijaan voit tehd\u00e4 sen palvelinpuolella. Ja johtuen joistakin PHP:n sis\u00e4\u00e4nrakennetuista ominaisuuksista, se ei juurikaan eroa siit\u00e4, miten teemme asioita JavaScriptin avulla.<\/p>\n Muuten kuin tietysti teemme niin palvelimella.<\/p>\n Joten jos ty\u00f6skentelet joskus julkaisun sis\u00e4ll\u00f6n parissa (tekstityyppi tai mukautettu viestityyppi) ja joudut k\u00e4sittelem\u00e4\u00e4n tunnisteita samalla tavalla kuin JavaScriptin kanssa, Oletetaan esimerkiksi, ett\u00e4 haluat iteroida kaikki tekstin sis\u00e4ll\u00f6ss\u00e4 olevat kappaleelementit.<\/p>\n T\u00e4m\u00e4 on helppo tehd\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 mainittua kirjastoa. Ensin sinun kannattaa varmistaa, ett\u00e4 kirjasto on m\u00e4\u00e4ritetty<\/a> luokassasi (tai vain funktiokokoelmassasi):<\/p>\n Aseta seuraavaksi koukku sis\u00e4ll\u00f6lle:<\/a><\/p>\n Ja t\u00e4ss\u00e4 toiminnossa, varmista, ett\u00e4 lataat viestin sis\u00e4lt\u00f6 kirjastoon ja etsi sitten kaikki T\u00e4\u00e4lt\u00e4 voit tehd\u00e4 useita eri asioita, kuten lis\u00e4t\u00e4 viestitunnuksen kunkin kappaleelementin mukautettuun m\u00e4\u00e4ritteeseen. T\u00e4ysi toiminto n\u00e4ytt\u00e4isi sitten t\u00e4lt\u00e4 :<\/a><\/p>\n Tietysti on my\u00f6s muita asioita, joita voit tehd\u00e4. Yksi asia on k\u00e4sitell\u00e4 merkint\u00f6j\u00e4 ennen sen l\u00e4hett\u00e4mist\u00e4 selaimeen. Toinen asia on kuitenkin lis\u00e4t\u00e4 attribuutteja tietoihin, jos niit\u00e4 ei viel\u00e4 ole.<\/p>\n Eli ei sanamuotoilua tarkoitettu \u2013 paitsi ehk\u00e4 vain tavallaan \u2013 sis\u00e4lt\u00f6\u00e4 toiselle viestille.<\/p>\nDomDocument<\/code>kirjaston k\u00e4ytt\u00f6 on yksi tehokkaimmista ty\u00f6kalut ovat k\u00e4ytett\u00e4viss\u00e4si.<\/p>\n<?php\n\nadd_filter('the_content', __NAMESPACE__. 'updateParagraphElements');<\/code><\/pre>\np<\/code>elementit aivan kuten k\u00e4ytt\u00e4isit JavaScripti\u00e4<\/a> (er\u00e4s t\u00e4rke\u00e4 huomautus on, ett\u00e4 sinun on koodattava tiedot oikein, jos yl\u00e4indeksit tai emojit ovat k\u00e4ytetty):<\/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