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

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.

2
Dodaj komentarz

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
xpilKarol Bankowy Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Karol Bankowy
Gość

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ć.

%d bloggers like this: