Jak zmienić wysokość i szerokość bloku w WordPress

WordPress, jedna z najpopularniejszych platform do tworzenia stron internetowych na świecie, umożliwia użytkownikom w pełni konfigurowalną kontrolę nad wyglądem i funkcjami swojej strony. W tym artykule przejdziemy przez różne metody zmiany wysokości i szerokości bloku w WordPress, zarówno za pomocą kodu, jak i przy użyciu wtyczek.

Wprowadzenie do bloków w WordPress

Od wersji 5.0, WordPress wprowadził nowy edytor bloków znanego jako Gutenberg. Edytor ten pozwala użytkownikom na tworzenie i formatowanie treści za pomocą bloków. Każdy blok może być indywidualnie formatowany i stylizowany, co daje użytkownikowi większą kontrolę nad wyglądem swojej strony.

1. Zmiana wysokości i szerokości bloku za pomocą edytora bloków Gutenberg

W edytorze bloków Gutenberg możemy zmieniać rozmiar bloku bezpośrednio za pomocą wbudowanych opcji. Należy jednak zauważyć, że nie wszystkie bloki mają opcje zmiany rozmiarów.

Aby zmienić rozmiar bloku:

1. Kliknij na blok, który chcesz zmodyfikować.
2. W panelu bocznym po prawej stronie zobaczysz ustawienia dla tego bloku.
3. Niektóre bloki, takie jak obraz, mają opcje zmiany szerokości i wysokości bezpośrednio w tych ustawieniach.
4. Jeśli opcje zmiany rozmiaru nie są dostępne, będziesz musiał użyć CSS lub PHP do zmiany rozmiaru bloku.

2. Zmiana wysokości i szerokości bloku za pomocą CSS

CSS (Cascading Style Sheets) to język służący do opisywania wyglądu dokumentu napisanego w języku HTML lub XML. Możesz go użyć do zmiany wysokości i szerokości bloków w WordPress.

Aby zmienić rozmiar bloku za pomocą CSS:

1. Kliknij na blok, który chcesz zmodyfikować.
2. W panelu bocznym po prawej stronie, przejdź do sekcji “Zaawansowane”.
3. W sekcji “Dodatkowe klasy CSS” wprowadź unikalną nazwę klasy dla bloku.
4. Następnie przejdź do wyglądu > Edytor CSS w panelu administracyjnym WordPress.
5. Wprowadź następujący kod CSS, zamieniając “your-class” na nazwę klasy, którą nadałeś blokowi, a “your-width” i “your-height” na preferowane wymiary:

.your-class {
   width: your-width;
   height: your-height;
}

3. Zmiana wysokości i szerokości bloku za pomocą PHP

Jeśli chcesz zmienić rozmiar bloków na całej stronie, może być wygodniej to zrobić za pomocą PHP. Jednak, musisz być świadomy, że błędy w kodzie PHP mogą spowodować poważne problemy na twojej stronie.

function change_block_size() {
   echo '
   <style>
   .your-class {
      width: your-width;
      height: your-height;
   }
   </style>
   ';
}
add_action('wp_footer', 'change_block_size');

Ten kod należy wkleić do pliku functions.php w twoim temacie WordPress. Pamiętaj, aby zamienić “your-class”, “your-width” i “your-height” na odpowiednie wartości.

4. Zmiana wysokości i szerokości bloku za pomocą wtyczek

Istnieje wiele wtyczek WordPress, które pozwalają na łatwe zmiany rozmiarów bloków. Przykładowo, “Advanced Gutenberg” daje użytkownikom dodatkowe narzędzia do kontroli nad blokami Gutenberg, w tym możliwość zmiany wysokości i szerokości bloków.

Aby zmienić rozmiar bloku za pomocą “Advanced Gutenberg”:

1. Zainstaluj i aktywuj wtyczkę “Advanced Gutenberg” z repozytorium WordPress.
2. Przejdź do “Advanced Gutenberg” > “Block Configuration” w panelu administracyjnym.
3. Wybierz blok, którego rozmiar chcesz zmienić.
4. W sekcji “Block Styles” możesz zmienić wysokość i szerokość bloku.

Podsumowanie

Jak widać, istnieje wiele sposobów na zmianę wysokości i szerokości bloku w WordPress. Każda metoda ma swoje plusy i minusy, więc najlepszym rozwiązaniem jest wybór tego, który najlepiej pasuje do twoich potrzeb i poziomu komfortu z technologią. Pamiętaj jednak, że zawsze warto zrobić kopię zapasową strony przed wprowadzeniem jakichkolwiek zmian w kodzie.

Sprawdź ofertę 1500+ wtyczek i szablonów Premium WordPress!