![\"\u00c4ndra](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nNu kanske du beh\u00f6ver utrymme mellan dem eller inte. Det spelar egentligen ingen roll eftersom du har kontroll \u00f6ver detta via CSS. Men du har kontroll \u00f6ver hur detta skickas \u00f6ver tr\u00e5den till klientsidan.<\/p>\n
F\u00f6r att g\u00f6ra detta beh\u00f6ver du n\u00e5gra saker:<\/p>\n
- \n
- Tillg\u00e5ng till PHP:s DOMDocument-bibliotek,<\/li>\n
- F\u00f6rst\u00e5else f\u00f6r hur man manipulerar inneh\u00e5ll via WordPress’ the_content-<\/strong> hook,<\/li>\n
- En strategi f\u00f6r hur du vill sl\u00e5 in bilderna.<\/li>\n<\/ul>\n
Jag ska g\u00e5 igenom var och en av dessa i koden men det r\u00e4cker med att s\u00e4ga att jag kommer att sl\u00e5 in varje bild i ett styckeelement. Du kan sj\u00e4lvklart v\u00e4lja att g\u00f6ra vad du vill.<\/p>\n
Hur man g\u00f6r det<\/h3>\n
Se f\u00f6rst till att du har deklarerat att du anv\u00e4nder inneh\u00e5llet i DOM-dokumentet ovanf\u00f6r din klass<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nG\u00e5 sedan vidare och skapa en krok till the_content<\/a>. Hur du g\u00f6r detta beror p\u00e5 hur du har organiserat din kod (oavsett om det \u00e4r OOP<\/a> eller inte). F\u00f6r det h\u00e4r exemplet ska jag visa ett mycket enkelt exempel p\u00e5 hur man g\u00f6r det<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nEfter det m\u00e5ste du g\u00f6ra lite arbete (som allt \u00e4r nedan men utanf\u00f6r ramen f\u00f6r detta inl\u00e4gg). Detta inkluderar:<\/p>\n
- \n
- konvertera kodningen av HTML-entiteterna,<\/li>\n
- skapa en instans av DOM-dokumentet,<\/li>\n
- ladda inl\u00e4ggets HTML fr\u00e5n det inkommande inneh\u00e5llet<\/li>\n<\/ul>\n
I koden ska det se ut s\u00e5 h\u00e4r<\/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>\nD\u00e4refter m\u00e5ste du iterera genom img-<\/strong> elementen och se till att du st\u00e4ller in ett korrekt attribut. Du kan v\u00e4lja att anv\u00e4nda en klass, du kan v\u00e4lja att anv\u00e4nda ett dataattribut eller s\u00e5 kan du v\u00e4lja att anv\u00e4nda n\u00e5got annat. Den h\u00e4r delen spelar ingen roll.<\/p>\n
Observera att du f\u00f6r en given bild vill kontrollera att n\u00e4sta element inte \u00e4r ett styckeelement eftersom det \u00e4r det jag v\u00e4ljer att sl\u00e5 in bilden. Med andra ord, om n\u00e4sta element inte \u00e4r ett stycke, kommer vi att sl\u00e5 in elementet i ett styckeelement.<\/p>\n
F\u00f6r att g\u00f6ra detta b\u00f6r skelettet f\u00f6r huvudfunktionen se ut s\u00e5 h\u00e4r<\/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>\n
- En strategi f\u00f6r hur du vill sl\u00e5 in bilderna.<\/li>\n<\/ul>\n