Pchełki WordPress: jak usunąć boczny pasek w widoku pojedynczego wpisu

https://xpil.eu/9s5

Dziś jeden z bardzo niewielu (jak dotychczas) wpisów z serii "Pchełki WordPress".

Nie jestem fachowcem od WordPress-a, nie znam się na PHP, a HTML-a oraz CSS-a ledwie liznąłem. Zasadniczo staram się trzymać z dala od technologii webowych; między innymi ze względu na ich straszliwą mnogość, w której idzie się pogubić.

Jeżeli czytasz po angielsku, polecam lekturę tego cudeńka: !klik!

Czasem jednak nadchodzi taki moment, że trzeba zakasać rękawy i grzebnąć w kodzie blogu, żeby uzyskać pożądany efekt.

Dziś przepis na ukrycie bocznego paska (marginesu) w widoku pojedynczego wpisu.

Ostrzegam, metoda nie jest uniwersalna, dla każdego motywu może wyglądać odrobinę inaczej. Ja używam (chwilowo) motywu TwentySixteen (domyślny motyw WordPress z zeszłego roku), który standardowo wyświetla boczny pasek zarówno w widoku strony głównej (lista postów) jak też pojedynczego postu.

Jeżeli chcemy, żeby pojedynczy post był wyświetlany na całej szerokości strony (bez paska bocznego), musimy zrobić dwie rzeczy:

  1. Ukryć pasek boczny oraz
  2. Ustawić szerokość treści (czyli wpisu właściwego) na 100%

W przypadku motywu TwentySixteen wygląda to następująco:

  1. Wchodzimy w ustawienia własnego CSS (można to zrobić na pierdylion sposobów, na przykład za pomocą JetPack-a albo osobnej wtyczki)
  2. Wpisujemy tam dwie linijki:
.single-post aside {display: none;}
.single-post .content-area {width: 100%;}

Pierwsza linijka ukrywa boczny pasek, druga "rozciąga" treść wpisu w poziomie na całą szerokość.

Ale skąd właściwie wiemy, że akurat to trzeba wpisać?

Otóż wiemy to dzięki funkcji "Inspect" przeglądarki (zarówno w Firefoxie jak i w Chrome funkcja działa prawie identycznie). Klikamy prawym myszem w boczny pasek, wybieramy "Inspect" i patrzymy, na jakim elemencie się ustawił kursor. Tenże element (w tym przypadku: aside) musi się koniecznie znajdować wewnątrz elementu klasy .single-post (w przeciwnym razie wyłączymy sobie pasek całkowicie i wszędzie, a tego nie chcemy).

W podobny sposób namierzamy element .content-area.

W innych motywach te elementy mogą nazywać się inaczej, ale .single-post będzie wspólne dla wszystkich (to jest standardowy "kawałek" WordPress-a).

Ot i cała tajemnica.

https://xpil.eu/9s5

2 komentarze

  1. Większość roboty w WordPressie można zrobić za pomocą przeróżnych wtyczek. Czasami jednak przydaje się znajomość kodu czy stylów by jeszcze coś dodatkowego w WP poprawić.

    1. Wszystko zależy od poziomu wiedzy technicznej właściciela strony. Jedni zbudują coś pięknego z niczego, inni spieprzą najlepszy motyw jedną linijką koślawego kodu 😉

Leave a Comment

Komentarze mile widziane.

Jeżeli chcesz do komentarza wstawić kod, użyj składni:
[code]
tutaj wstaw swój kod
[/code]

Jeżeli zrobisz literówkę lub zmienisz zdanie, możesz edytować komentarz po jego zatwierdzeniu.