![\"Muutke](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nN\u00fc\u00fcd v\u00f5ib nende vahel ruumi vaja minna v\u00f5i mitte. See pole tegelikult oluline, sest teil on CSS-i kaudu kontroll selle \u00fcle. Kuid teil on kontroll selle \u00fcle, kuidas see juhtme kaudu kliendi poolele saadetakse.<\/p>\n
Selleks vajate m\u00f5nda asja:<\/p>\n
- \n
- Juurdep\u00e4\u00e4s PHP DOMDocumenti teegile,<\/li>\n
- WordPressi konksu the_content<\/strong> kaudu sisuga manipuleerimise m\u00f5istmine\u00a0 ,<\/li>\n
- Strateegia selle kohta, kuidas soovite pilte pakkida.<\/li>\n<\/ul>\n
Ma k\u00e4sitlen k\u00f5iki neid koodis, kuid piisab, kui \u00f6elda, et m\u00e4hkin iga pildi l\u00f5igu elemendiks. Ilmselgelt saate teha seda, mida soovite.<\/p>\n
Kuidas seda teha<\/h3>\n
Esiteks veenduge, et olete deklareerinud, et kasutate oma klassi<\/a><\/strong> kohal oleva DOM-dokumendi sisu :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nJ\u00e4rgmisena j\u00e4tkake ja looge konks saidile_content<\/a>. Kuidas seda teha, s\u00f5ltub sellest, kuidas olete oma koodi korraldanud (olgu see siis OOP<\/a> v\u00f5i mitte). Selle n\u00e4ite puhul n\u00e4itan v\u00e4ga lihtsat n\u00e4idet selle kohta, kuidas seda teha<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nP\u00e4rast seda peate natuke t\u00f6\u00f6d tegema (k\u00f5ik see on allpool, kuid v\u00e4ljaspool selle postituse ulatust). See sisaldab:<\/p>\n
- \n
- HTML-\u00fcksuste kodeeringu teisendamine,<\/li>\n
- DOM-dokumendi eksemplari loomine,<\/li>\n
- postituse HTML-i laadimine sissetulevast sisust<\/li>\n<\/ul>\n
Koodis peaks see v\u00e4lja n\u00e4gema j\u00e4rgmine<\/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>\nJ\u00e4rgmiseks peate l\u00e4bima img<\/strong> – elemendid ja veenduma, et m\u00e4\u00e4rate \u00f5ige atribuudi. V\u00f5ite valida klassi kasutamise, andmeatribuudi kasutamise v\u00f5i millegi muu kasutamise. See osa ei oma t\u00e4htsust.<\/p>\n
Pange t\u00e4hele, et antud pildi puhul peaksite kontrollima, et j\u00e4rgmine element ei oleks l\u00f5iguelement, kuna valin pildi \u00fcmber selle. Teisis\u00f5nu, kui j\u00e4rgmine element ei ole l\u00f5ik, siis m\u00e4hime elemendi l\u00f5igu elemendiks.<\/p>\n
Selleks peaks p\u00f5hifunktsiooni skelett v\u00e4lja n\u00e4gema j\u00e4rgmine<\/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>\nSiis peaks funktsioon, mis vastutab elemendi tegelikult l\u00f5iguelemendis m\u00e4hkimise eest, v\u00e4lja n\u00e4gema j\u00e4rgmine<\/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>\nFunktsiooni toimimise m\u00f5istmiseks lugege kindlasti koodi DocBlocki. Lihtsamalt \u00f6eldes:<\/p>\n
- \n
- see aktsepteerib dokumendi eksemplari ja pildielementi,<\/li>\n
- loob l\u00f5igu elemendi,<\/li>\n
- lisab klassi atribuudi<\/li>\n
- asendab algse pildielemendi l\u00f5iguga,<\/li>\n
- ja lisab pildi alamelemendina<\/li>\n<\/ul>\n
Ja kuna oleme meetodi aluseks v\u00f5tnud dokumendiobjekti, ei pea me midagi tagastama.<\/p>\n
- Strateegia selle kohta, kuidas soovite pilte pakkida.<\/li>\n<\/ul>\n