Jak stworzyć szablon strony WordPress

Projektowanie strony internetowej może być czasochłonne. Nawet używając rozbudowanego motywu WordPress lub kreatora stron, możesz spędzić wiele godzin na budowaniu i edycji kolejnych podstron. Dodatkowo możesz woleć stworzyć własny szablon strony WordPress zamiast korzystać z gotowego, uniwersalnego układu.

Tworząc szablony stron WordPress, możesz zastosować je na dowolnej podstronie swojej strony internetowej. Dzięki temu możesz łatwo zmieniać ogólny wygląd swojej strony internetowej bez potrzeby ręcznego aktualizowania każdej podstrony.

W tym poradniku omówimy, dlaczego warto używać własnych szablonów stron. Następnie pokażemy Ci, jak je utworzyć w WordPress. Zaczynajmy!

Jak stworzyć szablon strony WordPress (2 metody)

Jak widzisz, tworzenie niestandardowych szablonów stron WordPress daje Ci większą swobodę w kształtowaniu wyglądu Twojej strony. Ten proces pomaga też oszczędzić czas.

Na szczęście szablon strony WordPress możesz przygotować na różne sposoby. Na przykład możesz utworzyć go ręcznie i przesłać plik na stronę albo skorzystać z wtyczki typu kreator stron.

Przyjrzyjmy się bliżej obu metodom!

1. Utwórz szablon strony ręcznie

Jeśli masz już doświadczenie w tworzeniu motywów WordPress, możesz śmiało wybrać podejście ręczne. Metoda ta wymaga pewnej znajomości kodowania, ale daje Ci dużą swobodę podczas tworzenia takiego szablonu.

Krok 1: Utwórz plik szablonu

Aby rozpocząć, otwórz wybrany edytor tekstu i dodaj następującą linię kodu:

<?php /* Template Name: CustomPage */ ?>

Możesz nazwać swój szablon dowolnie, jednak najlepiej użyć łatwo rozpoznawalnej nazwy.

Na przykład jeśli tworzysz szablon strony dla określonego typu wpisów blogowych, takich jak poradniki, możesz nazwać go „Poradniki”. Podobnie, jeśli tworzysz szablon bez paska bocznego, możesz nadać mu nazwę „StronaBezPaskaBocznego”.

Po dodaniu kodu zapisz plik pod nazwą, np. custompage.php. Nazwa pliku może być dowolna, ale musi mieć rozszerzenie .php.

Krok 2: Prześlij plik szablonu na swoją stronę

Następnie musisz przesłać ten plik na swój serwer. W tym celu możesz użyć klienta FTP, takiego jak FileZilla.

Jeśli korzystasz z FTP po raz pierwszy, konieczne będzie podanie danych dostępowych, w tym nazwy użytkownika oraz nazwy hosta serwera. Informacje te znajdziesz w panelu swojego hostingu WordPress.

Po połączeniu się ze stroną przez FileZilla przejdź do folderu wp-content/themes/ i otwórz folder swojego motywu potomnego:

Teraz prześlij utworzony plik szablonu do tego folderu. Szablon ten powinien być już dostępny na Twojej stronie.

Aby to potwierdzić, przejdź do panelu administracyjnego WordPress i utwórz nową stronę (lub otwórz istniejącą). W panelu ustawień znajdź sekcję Szablon i kliknij ją, aby zobaczyć dostępne opcje:

Na liście powinien pojawić się nowy szablon. Jeśli jednak ustawisz go jako szablon strony i klikniesz Podgląd, zobaczysz pustą stronę.

Stało się tak, ponieważ plik szablonu nie zawiera jeszcze żadnej zawartości. Pokażemy Ci, jak go dostosować w kolejnym kroku.

Krok 3: Dostosuj plik szablonu

Na początku skopiuj zawartość istniejącego szablonu strony z bieżącego motywu. W tym celu połącz się ze stroną przez FTP i przejdź do folderu bieżącego motywu. Znajdź plik page.php i otwórz go w edytorze tekstu.

Następnie skopiuj poniższy kod z pliku page.php:

Gdy już to zrobisz, otwórz utworzony plik szablonu strony i wklej skopiowany kod tuż poniżej następującej linii:

<?php /* Template Name: CustomPage */ ?>

Plik szablonu powinien teraz wyglądać mniej więcej tak:

Teraz możesz edytować swój plik szablonu strony. Na przykład, aby usunąć stopkę ze szablonu, usuń następującą linię:

<?php get_footer(); ?>

Możesz również dodać własny kod PHP, aby dalej dostosować szablon do swoich potrzeb. Po zakończeniu edycji zapisz zmiany.

Teraz, jeśli wrócisz do wpisu lub strony, do której przypisano ten szablon i wyświetlisz jej podgląd, wprowadzone zmiany powinny być już widoczne.

2. Utwórz szablon strony za pomocą wtyczki do tworzenia stron

Nie martw się, jeśli nie znasz się na kodowaniu. Istnieje łatwiejszy sposób na utworzenie własnych szablonów stron – wystarczy użyć narzędzia do budowania stron.

Na szczęście istnieje wiele wtyczek do budowania stron w WordPress, które umożliwiają tworzenie unikalnych projektów stron. W tej części przyjrzymy się dwóm popularnym opcjom – Elementor oraz Beaver Builder.

Tworzenie szablonu strony WordPress za pomocą elementora

Elementor oferuje edytor typu przeciągnij-i-upuść, który ułatwia tworzenie i dostosowywanie stron w WordPress. Dzięki niemu możesz tworzyć własne szablony stron z gotowych elementów (widżetów) i używać ich w obrębie całej swojej strony internetowej. Możesz także skorzystać z gotowych szablonów Elementor i dostosować je do własnych potrzeb.

W tym poradniku pokażemy Ci, jak zbudować podstawowy szablon strony WordPress w Elementorze. Do stworzenia własnego projektu możesz użyć darmowej wersji tego narzędzia i zastosować ją na wybranych stronach. Jednak Elementor Pro oferuje więcej opcji personalizacji i dodatkowych funkcji.

Krok 1: Zaprojektuj szablon

Po zainstalowaniu i aktywowaniu Elementora na swojej stronie przejdź do menu Szablony i kliknij Dodaj nowy:

Elementor poprosi Cię teraz o wybranie typu tworzonego szablonu i nadanie mu nazwy:

Jeśli korzystasz z darmowej wersji, możesz wybrać spośród Strona, Sekcja lub Strona docelowa. Aby tworzyć niestandardowe szablony wpisów w WordPress, musisz przejść na Elementor Pro.

Jeśli wszystko jest gotowe, kliknij przycisk Utwórz szablon. Spowoduje to uruchomienie edytora Elementora:

Po lewej stronie znajdziesz bibliotekę elementów (widgetów), które możesz przeciągać i upuszczać na stronę. Jednak zanim zaczniesz dodawać elementy, warto zmienić układ strony dla tworzonego szablonu.

Kliknij ikonę Ustawienia (zębate koło) w lewym dolnym rogu edytora:

Następnie możesz wybrać układ strony z dostępnej listy. Na przykład po wybraniu opcji Elementor Canvas otrzymasz zupełnie pustą stronę:

Gdy wybierzesz układ strony, możesz zacząć dodawać elementy do swojego szablonu. Alternatywnie możesz użyć istniejącego szablonu jako bazy wyjściowej.

Aby skorzystać z gotowych szablonów Elementora, kliknij ikonę folderu:

Następnie możesz wybrać gotowy blok albo kompletną stronę:

Możesz teraz wybrać dowolny element na stronie, aby skonfigurować jego ustawienia:

Jeśli wszystko wygląda dobrze, kliknij strzałkę obok przycisku Publikuj, a następnie wybierz Zapisz jako szablon:

Elementor poprosi Cię o podanie nazwy dla tego szablonu. Twój układ zostanie następnie zapisany w bibliotece szablonów.

Krok 2: Zastosuj szablon na swoich stronach

Gdy już utworzysz i zapiszesz swój szablon, możesz zastosować go na dowolnej stronie zaprojektowanej w Elementorze.

Aby to zrobić, przejdź do Strony → Dodaj nową, a następnie kliknij przycisk Edytuj z Elementor:

Spowoduje to otwarcie nowej strony w edytorze Elementor:

Kliknij ponownie ikonę folderu, aby otworzyć bibliotekę szablonów (tak jak wcześniej) i przejdź do zakładki Moje szablony, gdzie znajdziesz swój zapisany szablon. Wstaw go na stronę i dostosuj według potrzeb.

Pamiętaj, że korzystając z Elementor Pro, uzyskasz dostęp do funkcji Theme Builder:

Funkcja ta pozwala projektować niestandardowe elementy strony, w tym nagłówki, stopki oraz szablony pojedynczych wpisów, a następnie zdefiniować warunki ich wyświetlania.

Na przykład, jeśli utworzysz szablon wpisu WordPress za pomocą narzędzia Theme Builder, możesz ustawić, aby był on stosowany do wszystkich Twoich wpisów.

Tworzenie szablonu strony WordPress za pomocą Beaver Builder

Beaver Builder to kolejne narzędzie, które pomoże Ci tworzyć własne szablony stron WordPress. Podobnie jak Elementor, wtyczka ta oferuje edytor typu przeciągnij-i-upuść oraz bogaty wybór elementów (tzw. modułów).

Beaver Builder umożliwia również zapisywanie wykonanych projektów jako szablony. Funkcja ta jest jednak dostępna tylko w wersji premium tej wtyczki.

W tej części posłużymy się płatną wersją Beaver Buildera, aby pokazać, jak utworzyć szablon strony WordPress.

Krok 1: Zaprojektuj szablon

Po zainstalowaniu i aktywowaniu wtyczki w kokpicie WordPress przejdź do Beaver Builder → Templates i kliknij Add New:

Następnie pojawi się prośba o podanie nazwy Twojego projektu oraz wybranie typu szablonu:

Kliknij Add Saved Template, a potem wybierz Launch Beaver Builder. Zostaniesz przeniesiony do interfejsu edytora Beaver Builder:

Możesz teraz rozpocząć tworzenie szablonu. Przeciągaj elementy z zakładki Modules i upuszczaj je na stronę, a następnie kliknij wybrany element, aby skonfigurować jego ustawienia.

Alternatywnie możesz skorzystać z jednego z gotowych szablonów Beaver Builder:

Kiedy skończysz wprowadzać zmiany, kliknij przycisk Done w prawym górnym rogu. Następnie wybierz Publish (lub Save Draft, jeśli chcesz zapisać szkic).

Krok 2: Zastosuj szablon na swoich stronach

Gdy utworzysz już swój szablon, możesz zastosować go na dowolnej stronie w serwisie. Otwórz stronę, którą chcesz edytować (lub utwórz nową), a następnie kliknij przycisk Launch Beaver Builder:

W panelu Beaver Builder przejdź do zakładki Templates, wybierz z grupy Saved Templates swój zapisany szablon i kliknij go, aby zastosować:

Beaver Builder zastosuje teraz wybrany szablon na stronie. Możesz następnie wprowadzić dowolne zmiany. Gdy skończysz, kliknij Done, a następnie wybierz Save Draft lub Publish.

Podsumowanie

Nauka tworzenia szablonu strony WordPress może pomóc Ci zaoszczędzić czas i wysiłek. Dzięki temu procesowi możesz łatwo dostosować wygląd swojej strony do własnych potrzeb. W ten sposób stworzysz różnorodne układy, w tym własne szablony pojedynczych wpisów WordPress.

W tym artykule omówiliśmy dwa główne sposoby tworzenia niestandardowych szablonów stron WordPress:

• Utworzenie pliku szablonu i przesłanie go do folderu motywu za pomocą klienta FTP (np. FileZilla).
• Skorzystanie z wtyczki do budowania stron, takiej jak Elementor lub Beaver Builder.

Obie te metody zapewniają dużą swobodę personalizacji, więc możesz wybrać tę, która bardziej Ci odpowiada.

Czy masz jakieś pytania dotyczące tworzenia własnego szablonu strony WordPress lub budowy strony internetowej? Daj nam znać w komentarzach poniżej!