Jak stworzyć własny szablon strony w WordPress

Czy chcesz utworzyć niestandardową stronę w WordPress?

Niestandardowa strona pozwala używać innego układu niż zwykłe strony w WordPress. Wiele witryn WordPress ma niestandardowe układy stron dla swoich stron sprzedaży, stron docelowych, stron webinarium i innych.

W tym artykule pokażemy Ci, jak łatwo utworzyć niestandardową stronę w WordPress, krok po kroku.

How to create a custom page template in WordPress

Zrozumienie niestandardowych stron w WordPress

Domyślnie WordPress pozwala na tworzenie postów i stron.

Twój motyw WordPress kontroluje wygląd stron za pomocą pliku szablonu o nazwie strona.php.

Ten plik szablonu dotyczy wszystkich pojedynczych stron, które tworzysz w WordPress.

Jednak jak już wiesz, nie wszystkie strony są takie same. Na przykład możesz utworzyć stronę docelową, która wygląda zupełnie inaczej niż zwykłe strony witryny.

W przeszłości Tworzenie niestandardowej strony w WordPress oznaczało kodowanie własnego niestandardowego szablonu za pomocą HTML, CSS i PHP. Omówimy tę metodę,ale nie zalecamy jej dla początkujących.

Zamiast tego sugerujemy użycie SeedProd lub innej wtyczki do tworzenia stron, aby utworzyć własną stronę. Wystarczy użyć tych szybkich linków, aby przejść bezpośrednio do różnych metod.

  • Używanie SeedProd do tworzenia niestandardowej strony w WordPress (zalecane)
  • Używanie Beaver Builder do tworzenia niestandardowej strony w WordPress
  • Ręczne tworzenie niestandardowego szablonu strony w WordPress

Video Tutorial

Subskrybuj WPBeginner

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej.

Używanie SeedProd do tworzenia niestandardowej strony w WordPress

SeedProd to najlepszy kreator stron typu przeciągnij i upuść dla WordPress. Zawiera ponad 100 profesjonalnie zaprojektowanych szablonów, które możesz wykorzystać jako podstawę swojej strony.

Alternatywnie możesz utworzyć całkowicie niestandardową stronę WordPress bez pisania kodu za pomocą Kreatora przeciągnij i upuść.

SeedProd został zaprojektowany tak, aby był łatwy w użyciu, nawet dla początkujących. Ma jednak również zaawansowane opcje, które pozwalają budować oszałamiające wizualnie strony, aby zaangażować odwiedzających i zwiększyć konwersje.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: dostępna jest również darmowa wersja wtyczki SeedProd. Jednak na naszym przykładzie będziemy używać wersji Pro, ponieważ ma wiele zaawansowanych funkcji.

Po aktywacji powinieneś zobaczyć stronę powitalną. Musisz wprowadzić swój klucz licencyjny tutaj i kliknąć przycisk „zweryfikuj klucz”. Klucz licencyjny znajdziesz w obszarze swojego konta na stronie SeedProd.

Entering your license key for SeedProd

Następnie przejdź do SeedProd ” Strony w Twoim adminie WordPress. Następnie po prostu kliknij przycisk „Utwórz nową stronę docelową”.

Creating a new landing page in SeedProd

Następnie zostaniesz poproszony o wybranie szablonu. Możesz je filtrować, aby znaleźć szablony dla typu tworzonej strony. Jeśli wolisz zacząć od zera, po prostu Użyj pustego szablonu.

Choosing your page template in SeedProd

Ze względu na ten samouczek użyjemy szablonu „strona Sprzedaży kursu”.

Zostaniesz poproszony o nadanie stronie nazwy i ustawienie adresu URL. Następnie kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Giving your page a name and URL in SeedProd

Wybrany szablon zostanie teraz załadowany do Kreatora Stron SeedProd.

The SeedProd page builder interface

Aby zmienić cokolwiek w szablonie, po prostu kliknij na niego. Łatwo jest zmienić tekst bezpośrednio w kreatorze stron. Na przykład tutaj edytujemy nagłówek strony.

Editing your page headline in SeedProd

Możesz sformatować tekst, zmienić wyrównanie, dodać łącza i nie tylko.

Łatwo jest również edytować obrazy za pomocą narzędzia seedprod Page builder. Po prostu kliknij na obraz, który chcesz zmienić.

W tym przykładzie zastąpiliśmy domyślny obraz u góry strony naszym własnym obrazem.

Uploading a new image into SeedProd

Śmiało i zmień wszystko, co chcesz, po prostu klikając na to. Spowoduje to otwarcie panelu edycji po lewej stronie strony.

Aby dodać nowe bloki (elementy) do swojej strony, po prostu kliknij kartę Projekt u góry strony. Po prostu wybierz dowolny blok standardowy lub zaawansowany i po prostu przeciągnij i upuść go na swoje miejsce na stronie.

Adding blocks in SeedProd

Po dodaniu bloku wystarczy go kliknąć, aby go edytować. Tutaj dodaliśmy blok listy do naszej strony.

A list block in SeedProd

Jeśli w którymś momencie popełnisz błąd lub zmienisz zdanie, nie martw się. Po prostu kliknij przycisk „Cofnij” na dole strony, aby odwrócić to, co zrobiłeś.

The Undo button in SeedProd

Znajdziesz tu również przycisk Ponów, historię wersji,nawigację układu, podgląd mobilny i ustawienia globalne dla Twojej strony.

Gdy jesteś zadowolony ze swojej niestandardowej strony, nadszedł czas, aby ją wyświetlić lub opublikować. Aby opublikować stronę, najpierw kliknij strzałkę rozwijaną obok przycisku Zapisz u góry ekranu. Następnie wybierz opcję Publikuj.

Saving or publishing your page in SeedProd

Zobaczysz komunikat informujący, że Twoja strona została opublikowana. Aby to sprawdzić od razu, po prostu kliknij przycisk „Zobacz stronę NA ŻYWO”.

The SeedProd message letting you know that your page has been published

Aby edytować niestandardową stronę w dowolnym momencie w przyszłości, po prostu przejdź do SeedProd ” Strony w Twoim adminie WordPress.

Zapisaną stronę powinieneś zobaczyć na liście stron docelowych. Wystarczy kliknąć na tytuł, aby go edytować.

Editing your existing landing page in SeedProd

Zaletą korzystania z SeedProd w porównaniu z jakimkolwiek innym kreatorem stron w WordPress jest to, że nie spowolni Twojej witryny. SeedProd to najszybszy program do tworzenia stron i pozwala tworzyć całkowicie niestandardowe układy stron, które są niezależne od projektu motywu, dzięki czemu możesz mieć niestandardowy nagłówek, stopkę itp.

Używanie Beaver Builder do tworzenia niestandardowej strony w WordPress

Beaver Builder to popularny i ugruntowany Kreator stron typu przeciągnij i upuść dla WordPress.

Możesz go użyć do łatwego tworzenia niestandardowych stron na swojej stronie lub blogu. Zalecamy korzystanie z pełnej wersji Beaver Builder. Dostępna jest również darmowa wersja Beaver Builder z ograniczonymi funkcjami.

Najpierw musisz zainstalować i aktywować wtyczkę Beaver Builder. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji zobaczysz ekran powitalny Beaver Builder. Wystarczy kliknąć kartę Licencja, aby wprowadzić klucz licencyjny. Znajdziesz to w obszarze swojego konta na stronie Beaver Builder.

Nie zapomnij kliknąć przycisku „Zapisz klucz licencyjny”, aby zapisać klucz licencyjny.

Adding your license key to Beaver Builder

Aby skorzystać z Beaver Builder, wystarczy przejść do Strony ” Dodaj Nowy w panelu administracyjnym WordPress, aby utworzyć nową stronę. Następnie kliknij przycisk „Uruchom Beaver Builder”.

Launch the Beaver Builder editor when creating a new page

Następnie otworzy się Edytor Beaver Builder. Aby utworzyć stronę, musisz dodać wiersze i moduły. Po prostu kliknij element, którego chcesz użyć, i przeciągnij go na swoją stronę.

Selecting modules or rows to drag and drop using Beaver Builder

Możesz też zacząć od szablonu. Kliknij kartę Szablony, a następnie wybierz szablon, którego chcesz użyć.

Choosing a template in Beaver Builder

Następnie możesz kliknąć dowolną część szablonu, aby go zmienić. Możesz na przykład zmienić tekst, obrazy, kolory i inne elementy.

Tutaj edytujemy nagłówek strony. Proces edycji Beaver Builder nie jest tak płynny jak SeedProd, ponieważ musisz wpisać tekst w osobne wyskakujące okienko.

Editing a heading in Beaver Builder

Po zakończeniu wprowadzania zmian na stronie kliknij przycisk Gotowe w prawym górnym rogu. Wtedy będziesz mógł zapisać lub opublikować swój post.

Saving your post in Beaver Builder

Ręczne tworzenie niestandardowego szablonu strony

Jeśli nie chcesz używać wtyczki, możesz ręcznie utworzyć niestandardowy szablon strony w WordPress.

Nota wydawcy: To całkowicie w porządku, aby mieć wiele wtyczek uruchomionych w witrynie WordPress. Spójrz na nasz post na ile wtyczek WordPress należy zainstalować, jeśli martwisz się o zbyt wiele wtyczek.

Po pierwsze, musisz otworzyć zwykły edytor tekstu, taki jak Notatnik na komputerze. W pustym pliku dodaj ten wiersz kodu u góry:

<?php / * Nazwa szablonu: CustomPageT1*/?>

Ten kod po prostu mówi WordPress, że jest to plik szablonu i powinien być rozpoznawany jako CustomPageT1. Możesz nazwać swój szablon tak, jak chcesz, o ile ma to dla ciebie sens.

Po dodaniu kodu zapisz plik na pulpicie jako, custompaget1php.

Śmiało i zapisz plik o dowolnej nazwie, po prostu upewnij się, że kończy się na .php rozszerzenie.

W tym następnym kroku musisz połączyć się z kontem hostingowym WordPress za pomocą klienta FTP.

Po połączeniu przejdź do folderu bieżącego motywu lub folderu motywu podrzędnego. Znajdziesz go w / wp-content / themes/ katalog. Następnie prześlij swój niestandardowy plik szablonu strony do swojego motywu.

Teraz musisz zalogować się do obszaru administracyjnego WordPress, aby utworzyć nową stronę lub edytować istniejącą.

Na ekranie edycji strony przewiń w dół do sekcji „Atrybuty strony”. Pojawi się menu rozwijane szablonu. Kliknięcie na niego pozwoli Ci wybrać szablon, który właśnie utworzyłeś.

Selecting your custom page template

Jeśli wybierzesz nowy szablon i odwiedzisz tę stronę w swojej witrynie, zobaczysz pustą stronę. To dlatego, że Twój szablon jest pusty i nie mówi WordPress, co ma być wyświetlane.

Nie martw się, pokażemy Ci, jak łatwo edytować niestandardowy szablon strony.

Edycja Niestandardowego Szablonu Strony

Twój niestandardowy szablon strony jest jak każdy inny plik motywu w WordPress. W tym pliku można dodać dowolny kod HTML, znaczniki szablonu lub kod PHP.

Najprostszym sposobem na rozpoczęcie pracy z niestandardową stroną jest skopiowanie istniejącego szablonu strony dostarczonego przez motyw.

Otwórz klienta FTP i przejdź do folderu motywu. Tam znajdziesz plik o nazwie strona.php. Musisz pobrać ten plik na swój komputer.

Downloading the page php file for your site

Otwórz stronę.plik php w zwykłym edytorze tekstowym, takim jak Notatnik, i kopiuje całą jego zawartość z wyjątkiem części nagłówka.

Template header of a typical page php file in WordPress

Część nagłówka jest częścią komentowaną u góry pliku. Nie kopiujemy go, ponieważ nasz niestandardowy szablon strony już go ma.

Teraz musisz otworzyć niestandardowy plik szablonu strony i wkleić cały skopiowany kod na końcu.

Twój niestandardowy plik strony wyglądałby teraz mniej więcej tak:


<?php / * Nazwa szablonu: CustomPageT1*/?>

<?php get_header ();?>

< div id = "primary" class = "content-area">
	< main id = "main" class = "site-main" role = "main">
		<?php
		// Uruchom pętlę.
		while ( have_posts() ) : the_post();

			// Dołącz szablon treści strony.
			get_template_part ('template-parts / content',' page');

			// Jeśli komentarze są otwarte lub mamy co najmniej jeden komentarz, Załaduj szablon komentarza.
			if (comments_open () / / get_comments_number ()) {
				comments_template();
			}

			/ Koniec pętli.
		endwhile;
		?>

	< / main><!-- .Strona-główna -->

	<?php get_sidebar ('content-bottom');?>

< / div><!-- .content-area -->

<?php get_sidebar ();?>
<?php get_footer(); ?>


Po prostu zapisz niestandardowy plik szablonu strony i prześlij go z powrotem do folderu motywu za pomocą FTP.

Możesz teraz odwiedzić stronę utworzoną przy użyciu niestandardowego szablonu strony. Powinien wyglądać dokładnie tak jak inne strony w WordPress.

Następnie kontynuuj edycję niestandardowego pliku szablonu strony. Możesz go dostosować w dowolny sposób. Możesz na przykład usunąć pasek boczny, usuwając linię, która się rozpoczyna <?PHP get_sidebar.

Możesz również dodać niestandardowy kod PHP lub dodać dowolny inny kod HTML.

Aby dodać rzeczywistą zawartość swojej strony, po prostu Edytuj stronę jak zwykle w WordPress.

Możesz również pozostawić obszar zawartości w edytorze stron całkowicie pusty i dodać niestandardową zawartość bezpośrednio do szablonu strony. W ten sposób dodana zawartość pojawi się na wszystkich stronach przy użyciu niestandardowego szablonu.

Mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardową stronę w WordPress. Możesz również zobaczyć nasz przewodnik po najważniejszych typach stron WordPress, które każda strona powinna mieć, a nasza lista musi mieć wtyczki WordPress dla wszystkich stron internetowych.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Łóżka drewniane. Czy to dobre rozwiązanie do sypialni w stylu glamour?

W artykule: Dlaczego warto inwestować w łóżko drewniane?Gdzie kupić łóżka drewniane? Aranżując…

4 rzeczy, które poznasz tylko na profesjonalnym kursie fryzjerskim.

W artykule: Rozbuduj swoje pasje. Jak profesjonalny kurs fryzjerski poprowadzi do sukcesu?Stwórz…

Etui na słuchawki Airpods 3 – wszystko, co warto o tym wiedzieć

W artykule: Jakie funkcje może spełniać etui na słuchawki Airpods 3?Jakie powinno…

Jak obliczyć ratę kredytu hipotecznego?

W artykule: Rata kredytu hipotecznego – co się na nią składa?Od czego…