![\"Modyfikuj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nTeraz mo\u017cesz potrzebowa\u0107 odst\u0119pu mi\u0119dzy nimi lub nie. To naprawd\u0119 nie ma znaczenia, poniewa\u017c masz nad tym kontrol\u0119 za po\u015brednictwem CSS. Ale masz kontrol\u0119 nad tym, jak to jest przesy\u0142ane przez sie\u0107 do strony klienta.<\/p>\n
Aby to zrobi\u0107, potrzebujesz kilku rzeczy:<\/p>\n
- \n
- Dost\u0119p do biblioteki DOMDocument PHP,<\/li>\n
- Zrozumienie, jak manipulowa\u0107 tre\u015bci\u0105 za pomoc\u0105 haka the_content WordPress,<\/strong><\/li>\n
- Strategia, jak chcesz zawija\u0107 obrazy.<\/li>\n<\/ul>\n
Przejd\u0119 przez ka\u017cdy z nich w kodzie, ale wystarczy powiedzie\u0107, \u017ce zamierzam zawin\u0105\u0107 ka\u017cdy obraz w element akapitu. Mo\u017cesz oczywi\u015bcie zrobi\u0107 to, co chcesz.<\/p>\n
Jak to zrobi\u0107<\/h3>\n
Najpierw upewnij si\u0119, \u017ce deklarujesz, \u017ce u\u017cywasz tre\u015bci dokumentu DOM nad swoj\u0105 klas\u0105<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nNast\u0119pnie id\u017a dalej i utw\u00f3rz zaczep do the_content<\/a>. Spos\u00f3b, w jaki to zrobisz, b\u0119dzie zale\u017ce\u0107 od tego, jak zorganizowa\u0142e\u015b sw\u00f3j kod (czy to OOP<\/a>, czy nie). W tym przyk\u0142adzie poka\u017c\u0119 bardzo prosty przyk\u0142ad, jak to zrobi\u0107<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nNast\u0119pnie b\u0119dziesz musia\u0142 wykona\u0107 troch\u0119 pracy (z kt\u00f3rych wszystko jest poni\u017cej, ale poza zakresem tego postu). To zawiera:<\/p>\n
- \n
- konwersja kodowania encji HTML,<\/li>\n
- tworzenie instancji dokumentu DOM,<\/li>\n
- \u0142adowanie kodu HTML posta z przychodz\u0105cej tre\u015bci<\/li>\n<\/ul>\n
W kodzie powinno to wygl\u0105da\u0107 tak<\/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>\nNast\u0119pnie musisz przej\u015b\u0107 przez\u00a0 elementy img<\/strong> i upewni\u0107 si\u0119, \u017ce ustawiasz w\u0142a\u015bciwy atrybut. Mo\u017cesz zdecydowa\u0107 si\u0119 na u\u017cycie klasy, mo\u017cesz zdecydowa\u0107 si\u0119 na u\u017cycie atrybutu danych lub mo\u017cesz zdecydowa\u0107 si\u0119 na u\u017cycie czego\u015b innego. Ta cz\u0119\u015b\u0107 nie ma znaczenia.<\/p>\n
Zwr\u00f3\u0107 uwag\u0119, \u017ce dla danego obrazu b\u0119dziesz chcia\u0142 sprawdzi\u0107, czy nast\u0119pny element nie jest elementem akapitu, poniewa\u017c to w\u0142a\u015bnie wybieram zawijanie obrazu. Innymi s\u0142owy, je\u015bli nast\u0119pny element nie jest akapitem, zawiniemy go w element akapitu.<\/p>\n
Aby to zrobi\u0107, szkielet g\u0142\u00f3wnej funkcji powinien wygl\u0105da\u0107 tak<\/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
- Strategia, jak chcesz zawija\u0107 obrazy.<\/li>\n<\/ul>\n