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 📋