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.

  • Fajnie że w końcu udało Ci się rozwiązać ten problem. teraz czekam tylko na przepis jak zrobić żeby tytuł postu był linkiem do źródła a “czytaj więcej” do samego wpisu.

  • Myślę, że musisz stworzyć dodatkowy szablonu wpisu (tak jak niektóre szablony mają na przykład szablon cytatu). Następnie stworzyć “własne pole” w którym będziesz wpisywał link do innej strony tworząc wpis. W kodzie szablonu wpisu zmień odnośnik pod “” na inny niż “” czyli na “własne pole”. To trochę roboty, ale w necie jest kilka poradników (nawet po polsku). [Musiałem podzielić spacjami PHP bo disqus nie wyświetlał kodu]

  • Nie trzeba. Wystarczy custom pola wykorzystać oraz jeden plugin. Opiszę to.

  • Kierowałem się tym co mi kiedyś tłumaczyłeś w komentarzach u mnie na blogu. “Tak – można, chociaż wymaga to grzebania bezpośrednio w kodzie motywu” http://web.archive.org/web/20121002100922/http://futurus.eu/2012/07/17/szykuje-sie-swietna-recenzja-galaxy-siii/

  • Nie trzeba tworzyć własnego custom pola. Można wykorzystać te z WP. Ale trzeba grzebać w kodzie. :)

  • Oki, to czekamy na instrukcje, bo to przydatne rozwiązanie. :)

  • DMatrzak

    A co zrobić żeby komentarze działały pod Operą mini?

  • Korzystać z Safari lub zgłosić do DISQUS.

  • DMatrzak

    Niestety gdy się jest na granicy zasięgu Safari ładuje strony straaasznie wooolno, a wczytywanie Disqusa zwykle kończy się niepowodzeniem. Rozwiązaniem byłaby Opera gdyby nie brak komentarzy. Problem trwa, jeśli się nie mylę, od ok. roku, a ani Opera ani Disqus nic z tym nie robią. Podejrzewam że problemem jest ogólna „ociężałość” Disqusa.

  • Marcin Dmochowski

    To jeszcze znajdź sposób, że kliknięcie na podpowiedź albo przesunięcie kursora w celu edycji posta nie powodowało “zawieszania się” edycji, wymuszającego schowanie/wysunięcie klawiatury w celu dalszej edycji. Na niektórych stronach z Disqus nie ma tego problemu.

  • Niestety nie pracuję w DISQUS ani ich supporcie technicznym.

  • Marcin Dmochowski

    Zakładałem, że skoro u innych działa, to Ty coś popsułeś ;)

  • Nie mam jak. To plugin.

  • Może to wina JS ładowanego do stron przez WordPressa. Może coś się gryzie?

  • Nie wiem. Ja to mam wszędzie na mobile.