Themify Sidepane

Dodawanie dodatkowego panelu bocznego w Themify

Dodanie drugiego panelu bocznego w motywie Themify zwiększa elastyczność układu strony, umożliwiając wyświetlanie większej liczby widgetów i treści. Poniższe kroki poprowadzą Cię przez proces dodawania dodatkowego panelu bocznego w wybranym motywie Themify, opierając się na motywie “Basic”. Możesz jednak zastosować te same zasady do innych motywów Themify.

Rozwój

Krok 1: Tworzenie motywu potomnego

Zanim rozpoczniesz jakiekolwiek zmiany w motywie, ważne jest utworzenie motywu potomnego. Pozwoli to na modyfikację kodu bez ryzyka utraty zmian podczas aktualizacji motywu.

1. Tworzenie motywu potomnego:
2. Utwórz nowy folder w katalogu wp-content/themes/ i nadaj mu nazwę związana z Twoim motywem, na przykład basic-child.
3. W tym folderze stwórz plik style.css i dodaj do niego nagłówek:
   css
/*
Theme Name: Basic Child
Template: basic
*/
4. Aktywuj motyw potomny w panelu administracyjnym WordPress w sekcji „Wygląd” > „Motywy”.

Krok 2: Rejestracja nowego panelu bocznego

Aby dodać nowy panel boczny, musisz zarejestrować go w pliku functions.php motywu potomnego.

1. Dodawanie nowego panelu bocznego:
2. W folderze motywu potomnego utwórz nowy plik o nazwie functions.php. Jeśli już posiadasz ten plik, możesz dodać poniższy kod do istniejącego:
   php
<?php
add_action( 'widgets_init', 'child_register_sidebar' );
function child_register_sidebar() {
register_sidebar(array(
'name' => 'Sidebar 2',
'id' => 'sidebar-2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '#### ',
'after_title' => '</h4>',
));
}
?>

Krok 3: Dodanie nowego panelu bocznego do plików szablonów

Teraz musisz edytować odpowiednie pliki szablonów, aby wprowadzić nowo zarejestrowany panel boczny na stronach, na których chcesz go wyświetlić.

1. Modyfikacja plików szablonów:
2. Otwórz pliki index.php, page.php oraz single.php i poszukaj linii, która definiuje, gdzie ma być wyświetlany panel boczny. Zazwyczaj znajdziesz tam kod do wywołania funkcji dynamicznej sidebar.
3. Dodaj kod dla drugiego panelu bocznego w tym miejscu, np.:
   php
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-2') ) : ?>
4. Warto zauważyć, że możesz wykluczyć ten panel na stronach statycznych, po prostu pomijając powyższy kod w pliku page.php.

Krok 4: Stylizacja nowego panelu bocznego

Stylizacja panelu bocznego jest kluczowym krokiem, aby zapewnić jego estetykę i responsywność w układzie strony.

1. Dodaj styl do pliku CSS:
2. Otwórz plik style.css w swoim motywie potomnym i dodaj poniższy kod:
   css
#sidebar-2 {
float: left;
padding: 5% 0 3%;
margin-right: 30px;
width: 138px;
}
.sidebar-none #sidebar-2 {
display: none;
}
#content {
width: 528px;
}

Responsywność

Aby zapewnić, że Twój nowy panel boczny jest responsywny i dobrze wygląda na mniejszych ekranach, dodaj dodatkowe reguły CSS.

1. Dodawanie reguł responsywnych:
2. Na końcu pliku style.css dodaj:
   css
@media screen and (max-width: 980px) {
#sidebar-2 {
margin-right: 3%;
max-width: 14%;
}
.sidebar1 #content {
max-width: 54% !important;
}
}
@media screen and (max-width: 760px) {
#sidebar-2 {
margin: 0;
width: 100%;
max-width: 100%;
float: none;
clear: both;
}
.sidebar1 #content {
max-width: 100% !important;
}
}
3. Zapisz plik i upewnij się, że motyw potomny jest aktywowany.

Krok 5: Ostateczne kroki

Po wprowadzeniu wszystkich powyższych zmian, będziesz mieć nowy obszar widgetów oznaczony jako “Sidebar 2” w panelu administracyjnym pod sekcją „Wygląd” > „Widgety”.

Podstawowe informacje o widgetach

Dzięki dodatkowego panelowi bocznemu możesz teraz umieszczać widgety w nowym obszarze, co pozwala na lepsze dopasowanie treści do potrzeb użytkowników. Możliwość dodawania widgetów takich jak obrazy, formularze kontaktowe, menu nawigacyjne czy ostatnie wpisy blogowe zwiększa interaktywność i atrakcyjność strony.

Dzięki dwóm panelom bocznym masz większą kontrolę nad tym, co jest wyświetlane na stronach, co z kolei może poprawić zaangażowanie odwiedzających. Możesz dostosować lokalizację widgetów w zależności od treści lub celów marketingowych, co sprawia, że Twoja strona będzie bardziej elastyczna i dostosowana do potrzeb użytkowników.

Zakończenie

Dodanie dodatkowego panelu bocznego w motywie Themify nie tylko wzbogaca stronę wizualnie, ale również zwiększa jej funkcjonalność. Dzięki temu, że proces ten zostanie przeprowadzony właściwie – poprzez stworzenie motywu potomnego, rejestrację panelu bocznego, zaimplementowanie go w odpowiednich plikach szablonów oraz stylizację – można uzyskać płynnie działającą i estetycznie dopasowaną stronę. Wzmacniając swój przekaz wizualny przez strategiczne rozmieszczenie treści, możesz przyciągnąć więcej odwiedzających i zwiększyć konwersje na swojej stronie internetowej.