Premium, Treści

Jak ukrywać i wyświetlać dedykowane elementy dla poszczególnych podstron w WordPressie?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Projektując szablon warto pamiętać o podstawowych możliwościach jakie daje nam mechanizm WordPressa. W większości przypadków nie trzeba szukać specjalnych metod wyświetlania dedykowanej dla każdej ze stron treści, a wystarczy znajomość CSS i kilka fragmentów kodu aby coś na jednej czy kilku stronach ukryć albo pokazać.

Na początek kilka podstawowych faktów. Body Class (body_class) to standardowa funkcja na WordPressie, której wywołanie można znaleźć w prawie każdym pliku header.php. Jeśli Twój szablon nie posiada takiego elementu wystarczy, że podmienisz:

<body>

na:

<body <?php body_class($class); ?>>

Dodanie tej funkcji do znacznika <body> znacznie rozbudowuje ten znacznik. Wystarczy, że skorzystasz z podglądu źródła strony (Ctrl+U) i okaże się, że do body zostały dopisane przykładowo takie klasy jak: „home blog logged-in admin-bar customize-support” i być może także inne. W zależności od rodzaju strony WordPress sam umieści w <body> właściwe klasy. Przykładowo jeśli jesteś na stronie głównej to możesz być pewien, że zostanie dodana klasa „home”, a gdy otworzysz statyczną stronę, wtedy pojawi się tam klasa „page”.

Poniżej znajdziesz spis klas, które WordPress może dodać:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(nazwa-uzytkownika) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(nazwa-szablonu) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(numer-strony) {}
.single-paged-(numer-strony) {}
.page-paged-(numer-strony) {}
.category-paged-(numer-strony) {}
.tag-paged-(numer-strony) {}
.date-paged-(numer-strony) {}
.author-paged-(numer-strony) {}
.search-paged-(numer-strony) {}

Tak więc widzisz jak potężne narzędzie posiadasz i przy pomocy CSS-a jak bardzo możesz modyfikować wygląd poszczególnych stron. Dzięki dodatkowym klasom nadawanym elementowi <body> możesz stworzyć dedykowany boczny panel dla dowolnej strony. Poniżej przedstawiam przykłady kodu CSS jaki możesz dowolnie zmodyfikować w swoim projekcie.

Przykład 1

Posiadasz na blogu blok tekstu „o sobie” w prawej kolumnie. Zależy Ci na tym aby nowi czytelnicy, którzy trafiają na stronę główną dowiedzieli się kilku faktów o Tobie, a wszyscy którzy trafiają na pojedynczy wpis nie musieli po raz kolejny patrzeć na ten sam fragment Twojego bio. Wystarczy, że umieścisz w pliku ze stylem CSS poniższy kod zamieniając #text-2 na id widgetu tekstowego.

#sidebar #text-2 { display: none; }
.home #sidebar #text-2 {display: none;}

Przykład 2

Klient chciałby aby jego logo zmieniało się w zależności od kategorii na którą się wejdzie. Zamiast przygotować zawiłe warunki wyświetlania logotypu wystarczy skorzystać z klasy nadawanej automatycznie dla każdej kategorii „category-nazwakategorii”. Jeśli już w źródle strony podejrzysz jak wyglądają klasy, wtedy wystarczy umieścić kilka linijek kodu CSS i podać indywidualną ścieżkę dla logotypów aby dokonać na stronie tego rozróżnienia.

.category-smartfony #header .logo{background: url(images/logo-smartfony.png) no-repeat!important;}
.category-akcesoria #header .logo{background: url(images/logo-akcesoria.png) no-repeat!important;}

Dodawanie elementów za pomocą PHP

Tym razem nie korzystając z CSS tylko z PHP wywołajmy na określonych stronach kategorii dodatkowe okno z informacją. Aby to zrobić należy przejść do edycji pliku archive.php i umieścić w nim następujący fragment kodu:

<?php if (is_category(array(51, 1065, 1067, 50, 1059, 112, 1061, 1063))) { ?>
      <div class="informacja-na-stronach-okreslonych-kategorii">
      <h2>Nowa strona</h2>
      Informujemy, że ta wiadomość będzie wyświetlona na niektórych stronach kategorii.
      </div>
<?php } ?>

W linii pierwszej znajdziemy w nawiasie listę: 51, 1065, 1067, 50, 1059, 112, 1061, 1063. Jest to lista ID kategorii. Każdy może wprowadzić tam dowolną liczbę własnych numerów ID tych kategorii wewnątrz których powinna pojawiać się dodatkowa informacja. Numer ID można wziąć z adresu kategorii wziętego z części Wpisy -> Kategorie. Wystarczy kliknąć na wybraną kategorię i w pasku adresu znaleźć interesującą nas informację np.

https://twojastronawww.pl/wp-admin/term.php?taxonomy=category&tag_ID=51&post_type=post

Jak widać numer kategorii do której wszedłem to 51. Pozostałe numery można pozyskać wchodząc do kolejnych kategorii. Następnie należy je wpisać wewnątrz nawiasu po przecinkach w pierwszej linii wklejonego kodu.

Pozostało już tylko zmienić treść wiadomości na bardziej spersonalizowaną i gotowe.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN
Tagi: ,