Jak wyświetlić paski boczne uwzględniające treść dla dowolnej strony lub typu posta WordPress?

W porządku, porozmawiajmy o paskach bocznych uwzględniających zawartość. Jednak zanim to zrobimy, powinniśmy najpierw porozmawiać ogólnie o paskach bocznych.

Typowy pasek boczny jest podstawą projektowania stron internetowych i wielu motywów WordPress. Są dobrym miejscem do wyświetlania dodatkowych informacji, takich jak formularze kontaktowe, najnowsze lub najpopularniejsze posty na blogu, reklamy lub cokolwiek innego, co nie jest główną atrakcją Twojej witryny. Chociaż w ostatnich latach trend poszedł w kierunku projektów jednostronicowych bez pasków bocznych, pozostają one popularnym elementem.

W większości przypadków pasek boczny witryny wyświetla tę samą treść bez względu na to, na której stronie się znajdujesz. Jednak nie zawsze jest to optymalny sposób. W rzeczywistości istnieje wiele powodów, aby wyświetlać niestandardowe paski boczne na różnych stronach lub postach, które są świadome treści, którym towarzyszą.

Z tego powodu w tym artykule chcemy omówić więcej na ten temat. Najpierw pokażemy przypadki użycia pasków bocznych uwzględniających zawartość. W ten sposób zrozumiesz, czy mają dla Ciebie sens. Następnie będziemy kontynuować, wyjaśniając, jak zaimplementować ten typ paska bocznego w witrynie WordPress.

Gotowy do wyjścia? W takim razie zacznijmy pękać.

Co to są paski boczne uwzględniające treść?

Przede wszystkim porozmawiajmy o tym, dlaczego zawracasz sobie głowę dostosowywaniem pasków bocznych w zależności od treści, obok których się pojawiają. W końcu statyczny pasek boczny istnieje od wieków i nadal wydaje się, że działa. Po co zadzierać z działającym systemem?

Jak się okazuje, istnieje wiele przypadków użycia, w których sensowne jest użycie pasków bocznych uwzględniających zawartość:

• Wdrażanie — odwiedzający po raz pierwszy mogą potrzebować innych treści jako stali bywalcy. Na przykład zalogowani użytkownicy nie muszą widzieć wezwania do działania „zarejestruj się”, które ma zachęcić ludzi do dołączenia do Twojej witryny lub listy e-mailowej.
• Informacje dostosowane — niektóre informacje na niektórych stronach mają większy sens niż na innych. Przykłady obejmują dodatkowe informacje kontaktowe na stronie kontaktowej, najlepsze lub najnowsze artykuły na stronie bloga, oferty specjalne na stronie sklepu — rozumiesz.
• Ulepszone SEO — chociaż nie jest to główny czynnik, zawartość paska bocznego nadal ma znaczenie dla optymalizacji pod kątem wyszukiwarek (zwłaszcza jeśli tytuły widżetów są odpowiednio opakowane w tagi nagłówków). Dlatego możesz używać pasków bocznych uwzględniających zawartość, aby Twoje strony były jeszcze bardziej ukierunkowane.
• Wezwania do działania — tego typu paska bocznego można również użyć do dostosowania wezwania do działania dla różnych miejsc w witrynie.
• Języki — umożliwiają również tworzenie pasków bocznych dla różnych wersji językowych witryny i kierowanie na różne rynki.

Jak widać, istnieje kilka powodów, dla których warto korzystać z pasków bocznych uwzględniających zawartość, a ta lista nie jest wyczerpująca. Skupmy się jednak teraz na tym, jak je wdrożyć.

Jak zaimplementować paski boczne zorientowane na treść w WordPressie

Istnieją trzy główne sposoby konfigurowania niestandardowych pasków bocznych dla postów i stron. Ich wspólną cechą jest to, że zawartość paska bocznego zmienia się w odpowiedzi na stronę lub post, na którym jest wyświetlany. Warunki obejmują tagi WordPress, kategorie, nazwy stron lub inne atrybuty, takie jak to, czy użytkownik jest zalogowany, czy nie.

Następnie pasek boczny jest zwykle zmieniany na jeden z trzech sposobów:

• Filtruj widżety — jeden pasek boczny jest wypełniony widżetami, a jakaś logika w tle decyduje, które widżety pojawiają się w której lokalizacji, a które są ukryte
• Skonfiguruj całe paski boczne — innym sposobem jest utworzenie całkowicie osobnych pasków bocznych, które wyświetlają się w tym samym miejscu, gdy spełnione są różne warunki. Mogą zawierać indywidualne konfiguracje widgetów.
• Zakodowane na sztywno w motywie — oczywiście możesz również dodać niestandardowe paski boczne do swoich plików motywów, jeśli masz do tego odpowiednie elementy kodowania

Osobiście uważam, że druga metoda to ta, która skutkuje najbardziej uporządkowanym interfejsem użytkownika. Jednak poniżej omówimy szczegółowo każdy sposób, abyś mógł podjąć decyzję. Następnie wymienimy kilka dodatkowych opcji implementacji niestandardowych pasków bocznych w witrynie WordPress.

Użyj widoczności widżetów Jetpack do filtrowania widżetów

Najłatwiejszym sposobem filtrowania wyglądu widżetów w witrynie jest trafnie nazwany moduł Widget Visibility zawarty w Jetpack. Jeśli masz już wtyczkę w swojej witrynie, tworzenie niestandardowych pasków bocznych jest tak proste, jak aktywacja modułu (jeśli nie jest on domyślnie aktywny). Alternatywnie możesz również użyć tej samodzielnej wersji.

Gdy to zrobisz i przejdziesz do menu widżetów, znajdziesz nowy przycisk Widoczność we wszystkich widżetach. Kliknij go i możesz łatwo zaimplementować żądaną logikę wyświetlania dla swoich widżetów za pomocą rozwijanych menu.

Warunki widoczności są następujące:

• Kategoria — widżety mogą pojawiać się na niektórych stronach kategorii lub na wszystkich
• Autor — Wygląd na wszystkich stronach autora lub ograniczony do niektórych użytkowników
• Użytkownik — Sprawdza, czy użytkownik jest zalogowany, czy nie
• Rola — Kontroluj widżety w zależności od roli użytkownika
• Tag — działa jak strony kategorii, ale dla tagów
• Data — Kontroluj datę wyświetlania widżetów archiwów
• Strona — Ustaw widoczność widżetu dla strony głównej, strony postów, stron archiwum, strony błędu 404, typów postów, archiwów typów postów i stron statycznych

Dla każdej opcji możesz określić, czy widżety mają być pokazywane czy ukryte. Reguły należy wprowadzać osobno, co oznacza, że ​​nie można wprowadzać kilku stron jednocześnie. Jednak ta metoda jest nadal wygodniejsza niż ręczne wprowadzanie identyfikatorów stron w razie potrzeby w innych rozwiązaniach (więcej na ten temat poniżej). Istnieje również pole wyboru Dopasuj wszystkie warunki , które wymusza wyświetlanie widżetów tylko wtedy, gdy wszystkie warunki są prawidłowe.

Paski boczne uwzględniające zawartość umożliwiają skonfigurowanie niestandardowych pasków bocznych

Drugim rozwiązaniem, o którym chcemy porozmawiać, jest wtyczka Content Aware Sidebars. Jak wspomniano wcześniej, ta wtyczka pozwala skonfigurować całe paski boczne, które można następnie wypełnić widżetami i przypisać do postów i stron. Jest całkiem prosty w użyciu.

Po instalacji znajdziesz nowy element menu o nazwie Paski boczne w menu WordPress.

Po wybraniu opcji Dodaj tutaj nowy pojawi się następujący ekran:

Tutaj pierwszą rzeczą do zrobienia jest nazwanie paska bocznego. Potem nadszedł czas, aby ustawić warunki jego wyświetlania. Dostępne opcje są podobne do Jetpack:

• Strony statyczne — wybierz strony statyczne do wyświetlania paska bocznego, takie jak strona główna, wyniki wyszukiwania lub strony błędów 404
• Posty — te same opcje co powyżej, ale dla postów
• Strony — wybierz, na których stronach w Twojej witrynie ma być wyświetlany pasek boczny
• Multimedia — określa, na których stronach multimedialnych wyświetlany jest pasek boczny
• Autorzy — Ogranicz wyświetlanie do stron autora
• Szablony stron — Wybierz szablony stron, na których chcesz wyświetlać swój pasek boczny
• Kategorie — Wybierz określone kategorie lub archiwa wszystkich kategorii
• Tagi — te same opcje, ale dla tagów
• Formaty — ponownie te same ustawienia dla archiwów formatów
• Daty — i jeszcze raz dla archiwów dat
• Adresy URL (tylko wersja Pro) — Ogranicz wyświetlanie paska bocznego do niektórych adresów URL

Dodatkowe ustawienia:

• Harmonogram — Ustaw czas wyświetlania paska bocznego. W wersji darmowej jesteś ograniczony do całych dni, wersja Pro oferuje bardziej szczegółowe przedziały czasowe.
• Projektowanie — Dodaj niestandardowe klasy CSS do swoich pasków bocznych, widżetów i tytułów widżetów, aby manipulować nimi
• Zaawansowane — Ustaw kolejność pasków bocznych (jeśli jest ich więcej niż jeden)

Oprócz tego możesz również łączyć ze sobą paski boczne, zastępować je, ustawiać jako obszary widżetów i kontrolować ich widoczność dla zalogowanych użytkowników (role użytkownika dostępne w Pro).

Po zakończeniu konfiguracji nowy pasek boczny pojawia się w normalnym menu widżetów, w którym można go wypełniać, aktywować i dezaktywować, a nawet przeglądać poprzednie wersje. Zgrabnie i łatwo.

Ręczne tworzenie niestandardowych pasków bocznych

Wreszcie możliwe jest również tworzenie niestandardowych pasków bocznych za pomocą kodowania. WordPress oferuje wiele opcji, a my szybko przejdziemy przez cały proces.

Pierwszą rzeczą do zrobienia, aby utworzyć niestandardowe paski boczne, jest zarejestrowanie nowego widżetowanego obszaru. W tym celu po prostu wprowadź następujący kod do functions.php twojego motywu (dzieci):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

Z tym:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

Po tym, to jest końcowy wynik na frontendzie:

Oczywiście, jeśli masz dalsze kotlety programistyczne, możesz dodać więcej warunków, takich jak wyświetlanie paska bocznego tylko dla zalogowanych użytkowników. Możesz również uzyskać bardziej szczegółowe informacje o tym, gdzie je wyświetlić, korzystając z hierarchii szablonów WordPress. Może nie jest to najbardziej dynamiczne rozwiązanie, jednak sprawdza się i może działać całkowicie w tle bez konieczności instalowania dodatkowych wtyczek.

Dodatkowe sposoby implementacji pasków bocznych uwzględniających zawartość

Oprócz powyższych opcji mamy też kilka innych wtyczek o podobnej funkcjonalności.

Logika widżetu

Ta wtyczka działa podobnie do rozwiązania Jetpack, jednak zamiast rozwijanych menu musisz ręcznie wprowadzić tagi warunkowe WordPress. W ten sposób możesz określić, gdzie pojawiają się widżety, w zależności od tylu reguł, ile chcesz.

Jednak, aby to zrobić, musisz znać identyfikatory swoich stron i ogólnie jest to nieco bardziej techniczne niż to, co widzieliśmy powyżej. To nie znaczy, że nie działa i nie jest potężną wtyczką, jednak mniej techniczni ludzie mogą być lepiej z czymś innym.

Niestandardowe paski boczne

Wykonane przez WPMU DEV, tutaj mamy inne rozwiązanie do konfigurowania pasków bocznych obsługujących zawartość, które działają z dowolnym obszarem widżetów. Wtyczka umożliwia dynamiczne wyświetlanie widżetów na dowolnym poście, stronie, archiwum kategorii, typie wpisu i nie tylko. Co więcej, robi to wszystko dzięki bardzo wydajnemu i łatwemu w użyciu interfejsowi użytkownika. Pełne wprowadzenie można znaleźć w artykule Toma Ewera na ich stronie internetowej.

Proste paski boczne strony

Ostateczne rozwiązanie do tworzenia niestandardowych pasków bocznych zostało stworzone z myślą o prostocie. Umożliwia przypisywanie pasków bocznych i zbiorcze wprowadzanie zmian bezpośrednio z edytora stron. Po wykonaniu tej czynności możesz je jak zwykle wypełnić w menu widżetów.

Niestety brakuje bardziej zaawansowanych opcji dostosowywania. Jeśli jednak chcesz mieć tylko różne paski boczne dla swoich stron, może to być rozwiązanie, którego szukasz.

Zorientowane na treść paski boczne w skrócie

Istnieje wiele dobrych powodów, aby używać niestandardowych pasków bocznych w swojej witrynie. Nie wszystkie treści potrzebują tych samych informacji, aby pojawiały się obok nich. Dzięki paskom bocznym uwzględniającym zawartość możesz wyświetlać to, co ma sens, zamiast używać jednego standardowego paska bocznego.

W tym samouczku poznaliśmy kilka sposobów tworzenia niestandardowych pasków bocznych. Od filtrowania widżetów, przez tworzenie zupełnie nowych pasków bocznych, po kodowanie ich w motywie — wszystko tam jest.

Uzbrojony w te informacje, możesz teraz udostępniać tylko zawartość paska bocznego, której potrzebujesz, aby poprawić interakcję użytkownika i obsługę swoich odbiorców. Spróbuj!

Jakie masz doświadczenia z paskami bocznymi uwzględniającymi treść? Daj nam znać w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa Kit8.net/shutterstock.com