![\"Muokkaa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nNyt saatat tarvita tai et tarvitse tilaa niiden v\u00e4liin. Sill\u00e4 ei ole v\u00e4li\u00e4, koska voit hallita t\u00e4t\u00e4 CSS:n kautta. Mutta voit hallita sit\u00e4, kuinka t\u00e4m\u00e4 l\u00e4hetet\u00e4\u00e4n langan kautta asiakaspuolelle.<\/p>\n
T\u00e4t\u00e4 varten tarvitset muutaman asian:<\/p>\n
- \n
- P\u00e4\u00e4sy PHP:n DOMDocument-kirjastoon,<\/li>\n
- Ymm\u00e4rt\u00e4\u00e4 kuinka k\u00e4sitell\u00e4 sis\u00e4lt\u00f6\u00e4 WordPressin the_content<\/strong> koukun avulla,<\/li>\n
- Strategia siit\u00e4, miten haluat k\u00e4\u00e4ri\u00e4 kuvat.<\/li>\n<\/ul>\n
K\u00e4yn l\u00e4pi kaikki n\u00e4m\u00e4 koodissa, mutta riitt\u00e4\u00e4, kun sanon, ett\u00e4 aion k\u00e4\u00e4ri\u00e4 jokaisen kuvan kappaleelementtiin. Voit tietysti valita tehd\u00e4 mit\u00e4 haluat.<\/p>\n
Kuinka tehd\u00e4 se<\/h3>\n
Varmista ensin, ett\u00e4 olet ilmoittanut k\u00e4ytt\u00e4v\u00e4si DOM-asiakirjan sis\u00e4lt\u00f6\u00e4 luokkasi<\/a><\/strong> yl\u00e4puolella :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nSiirry seuraavaksi ja luo koukku the_content -tiedostoon<\/a>. Kuinka teet t\u00e4m\u00e4n, riippuu siit\u00e4, kuinka olet j\u00e4rjest\u00e4nyt koodisi (olipa se sitten OOP<\/a> tai ei). T\u00e4ss\u00e4 esimerkiss\u00e4 aion n\u00e4ytt\u00e4\u00e4 hyvin yksinkertaisen esimerkin siit\u00e4, kuinka se tehd\u00e4\u00e4n<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nSen j\u00e4lkeen sinun on teht\u00e4v\u00e4 v\u00e4h\u00e4n ty\u00f6t\u00e4 (joka kaikki on alla, mutta t\u00e4m\u00e4n viestin ulkopuolella). T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4:<\/p>\n
- \n
- muuntaa HTML-kokonaisuuksien koodausta,<\/li>\n
- luoda DOM-asiakirjan esiintym\u00e4,<\/li>\n
- lataamalla viestin HTML-koodi saapuvasta sis\u00e4ll\u00f6st\u00e4<\/li>\n<\/ul>\n
Koodissa sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a><\/strong> :<\/p>\n
<?php\n\npublic function addImageAttributes($content)\n{\n\n $content = mb_convert_encoding($content, 'HTML-ENTITIES', \"UTF-8\");\n $document = new DOMDocument();\n\n libxml_use_internal_errors(true);\n $document->loadHTML(utf8_decode($content));\n\n \/\/ ...\n}\n<\/code><\/pre>\nSeuraavaksi sinun on toistettava img<\/strong> – elementit ja varmistettava, ett\u00e4 asetat oikean m\u00e4\u00e4ritteen. Voit valita luokan k\u00e4yt\u00f6n, dataattribuutin tai jonkin muun k\u00e4yt\u00f6n. T\u00e4ll\u00e4 osuudella ei ole v\u00e4li\u00e4.<\/p>\n
Huomaa, ett\u00e4 tietyn kuvan kohdalla sinun kannattaa tarkistaa, ett\u00e4 seuraava elementti ei ole kappaleelementti, koska olen valinnut kuvan rivityksen sen. Toisin sanoen, jos seuraava elementti ei ole kappale, k\u00e4\u00e4rimme elementin kappaleelementtiin.<\/p>\n
T\u00e4t\u00e4 varten p\u00e4\u00e4toiminnon rungon tulisi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a><\/strong> :<\/p>\n
<?php\n\npublic function addImageAttributes($content)\n{\n\n $content = mb_convert_encoding($content, 'HTML-ENTITIES', \"UTF-8\");\n $document = new DOMDocument();\n\n libxml_use_internal_errors(true);\n $document->loadHTML(utf8_decode($content));\n\n $images = $document->getElementsByTagName('img');\n foreach ($images as $image) {\n $image->setAttribute('class', 'acme-iamge');\n if ($image->nextSibling->tagName !== 'p') {\n $this->wrapImage($document, $image);\n }\n }\n\n \/\/ ...\n}\n<\/code><\/pre>\nT\u00e4ll\u00f6in elementin k\u00e4\u00e4rimisest\u00e4 kappaleelementtiin vastaavan funktion pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a><\/strong> :<\/p>\n
<?php\n\n\/**\n * This function is used to wrap individual images in a paragraph element.\n *\n * @param $document The DOM Document which is to be rendered.\n * @param $image The image to wrap with the new paragraph element.\n *\/\nprivate function wrapImage($document, $image)\n{\n if (null === $image) {\n return;\n }\n $wrapper = $document->createElement('p');\n $wrapper->setAttribute('class', 'acme-image');\n\n $image->parentNode->replaceChild($wrapper, $image);\n if (null !== $image) {\n $wrapper->appendChild($image);\n }\n}\n<\/code><\/pre>\nMuista lukea koodin DocBlock ymm\u00e4rt\u00e4\u00e4ksesi, kuinka toiminto toimii. Yksinkertaisesti sanottuna:<\/p>\n
- \n
- se hyv\u00e4ksyy asiakirjan esiintym\u00e4n ja kuvaelementin,<\/li>\n
- luo kappaleelementin,<\/li>\n
- lis\u00e4\u00e4 luokkaattribuutin<\/li>\n
- korvaa alkuper\u00e4isen kuvaelementin kappaleella,<\/li>\n
- ja lis\u00e4\u00e4 kuvan lapsielementiksi<\/li>\n<\/ul>\n
Ja koska olemme perustaneet asiakirjaobjektin menetelm\u00e4\u00e4n, meid\u00e4n ei tarvitse palauttaa mit\u00e4\u00e4n.<\/p>\n
- Strategia siit\u00e4, miten haluat k\u00e4\u00e4ri\u00e4 kuvat.<\/li>\n<\/ul>\n