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.