Jeśli chcecie mnie wesprzeć to zapraszam do kupna mojego poradnika "Jakim jesteś Makiem?".

Prawidłowe wyświetlanie komentarzy DISQUS na mobilnych urządzeniach z responsywnym motywem

· Wojtek Pietrusiewicz · 15 komentarzy

Narzekam na DISQUSa na urządzeniach mobilnych od dawna. Od dawna próbuję również naprawić ich wygląd. Chodzi o to, że przy responsownym designie nie można elementom #disqus_thread ani #dsq1 nadać paddingów czy marginesów, bo taka czynność je po prostu ucina. Po ostatnich zmianach w wyglądzie komentarzy można je w końcu ogarnąć, żeby nie wyglądały źle.

Poniższej metody zagnieżdżania próbowałem już wcześniej, ale niestety nie działała. Nie zagłębiałem się szczególnie w techniczne zmiany samego DISQUSa, bo nie mam na to czasu, ale w przypadku mojego motywu zagnieżdżenie w końcu rozwiązało problem.

Poniższy przepis zakłada, że masz jakąś wiedzę na temat WordPressa, CSS i PHP — nie będę wszystkiego tłumaczył niestety, ale konkretne pytania proszę zadawać w komentarzach.

Przepis

1. Otwieramy single.php w przypadku edycji głównego motywu lub kopiujemy ten plik do naszego child theme jeśli z takowego korzytamy.

2. W single.php lub innym pliku, który do wpisu/strony dodaje komentarze, znajdujemy linijkę podobną do:

<?php comments_template( '', true ); ?>

3. Zamieniamy ją na:

<div id="comment_buffer"><?php comments_template( '', true ); ?></div>

4. W naszym CSS, zazwyczaj style.css, stylizujemy w dziale @media odpowiednio #comment_buffer. Ja dodałem jedynie padding i zmieniłem kolor tła:

#content #comment_buffer { padding: 5%; background-color: #fff; }

Smacznego!

Chcesz zwrócić mi na coś uwagę lub skomentować? Zapraszam na @morid1n lub na forum.