Jak stworzyć stronę O pełnej szerokości w WordPress (poradnik dla początkujących)

Czy chcesz utworzyć stronę o pełnej szerokości w WordPress, abyś mógł rozciągnąć swoje treści na ekranie?

Większość motywów WordPress ma już wbudowany szablon strony o pełnej szerokości, którego możesz użyć. Jeśli jednak Twój motyw go nie ma, łatwo go dodać.

W tym artykule pokażemy, jak łatwo utworzyć stronę o pełnej szerokości w WordPress, a nawet stworzyć w pełni niestandardowe układy stron bez kodu.

Metoda 1. Użyj szablonu pełnej szerokości motywu

Jeśli twój motyw jest już wyposażony w szablon strony o pełnej szerokości, najlepiej go po prostu użyć. Prawie wszystkie dobre motywy WordPress zrobić.

Nawet najlepsze darmowe motywy WordPress często mają szablon o pełnej szerokości, więc istnieje duża szansa, że już go masz.

Najpierw musisz edytować stronę lub utworzyć nową, przechodząc do Strony ” Dodaj Nowy w panelu WordPress.

W prawym okienku „dokument” edytora treści musisz rozwinąć sekcję „atrybuty strony”, klikając strzałkę w dół obok niej. Następnie powinieneś zobaczyć rozwijane menu „Szablon”.

Jeśli masz szablon o pełnej szerokości dla swojego motywu, zostanie on wymieniony tutaj. Powinien być nazywany czymś w rodzaju „szablonu o pełnej szerokości”:

Opcje, które tutaj widzisz, będą się różnić w zależności od motywu. Nie martw się, jeśli twój motyw nie ma szablonu strony o pełnej szerokości.

Możesz łatwo dodać jeden za pomocą poniższych metod.

Metoda 2. Tworzenie szablonu strony o pełnej szerokości za pomocą wtyczki

Ta metoda jest najłatwiejsza i działa ze wszystkimi motywami WordPress i wtyczkami do tworzenia stron.

Najpierw musisz zainstalować i aktywować wtyczkę Fullwidth Templates. Jeśli nie jesteś pewien, jak to zrobić, sprawdź nasz przewodnik dla początkujących, aby zainstalować wtyczkę WordPress.

Wtyczka Fullwidth Templates doda trzy nowe opcje do szablonów stron:

Te opcje to:

• FW No Sidebar: usuwa pasek boczny ze strony, ale pozostawia Wszystko inne nienaruszone
• FW Fullwidth: usuwa pasek boczny, tytuł i komentarze oraz rozciąga układ do pełnej szerokości
• FW Fullwidth brak stopki nagłówka: usuwa wszystko, co robi FW Fullwidth oraz nagłówek i stopkę

Jeśli masz zamiar po prostu użyć wbudowanego edytora WordPress, „FW No Sidebar” będzie prawdopodobnie najlepszym wyborem.

Chociaż ta wtyczka umożliwia tworzenie szablonu strony o pełnej szerokości, masz ograniczone opcje dostosowywania.

Jeśli chcesz dostosować szablon o pełnej szerokości bez żadnego kodu, musisz użyć Kreatora Stron.

Metoda 3: Zaprojektuj stronę O pełnej szerokości w WordPress za pomocą wtyczki do tworzenia stron

Jeśli twój motyw nie ma szablonu o pełnej szerokości, jest to najprostszy sposób na utworzenie i dostosowanie szablonu o pełnej szerokości.

Pozwala łatwo edytować stronę o pełnej szerokości i tworzyć różne układy stron dla witryny za pomocą interfejsu przeciągnij i upuść.

Do tej metody potrzebujesz wtyczki do tworzenia stron WordPress. W tym samouczku będziemy używać Beaver Builder. Jest to jedna z najlepszych wtyczek kreatora stron typu „przeciągnij i upuść” i pozwala łatwo tworzyć układy stron bez pisania kodu.

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

Po aktywacji edytuj istniejącą stronę lub utwórz nową.

W okienku „dokument” po prawej stronie ekranu przejdź do „atrybuty strony” i wybierz szablon o pełnej szerokości z listy rozwijanej.

Następnie kliknij przycisk „Launch Beaver Builder” na środku ekranu.

Teraz Użyj interfejsu przeciągnij i upuść programu Beaver Builder, aby utworzyć swoją stronę.

Dobrym sposobem na rozpoczęcie jest kliknięcie zakładki Szablony u góry. Wybierz jeden z gotowych szablonów do wykorzystania jako podstawa dla strony o pełnej szerokości.

Kliknij szablon, aby go wybrać, a Kreator stron go załaduje. Następnie możesz edytować dowolne elementy, takie jak obrazy, które chcesz zmienić.

Układy Beaver Builder są zbudowane z rzędów i modułów. Każdy wiersz może mieć wiele kolumn, a wewnątrz każdego wiersza można dodawać moduły treści i widżety.

Aby edytować wiersz lub moduł w układzie, wystarczy go kliknąć. W tym przypadku edytujemy moduł nagłówek:

Beaver Builder otworzy Szczegóły elementu w wyskakującym okienku, w którym możesz edytować jego ustawienia. Możesz zmieniać tekst, zmieniać czcionki i kolory, dodawać lub zmieniać obrazy tła i nie tylko.

W każdej chwili możesz dodać moduły i widżety do swojego układu. Beaver Builder zawiera wiele podstawowych i zaawansowanych modułów treści, które możesz po prostu przeciągnąć i upuścić na swoją stronę.

Po zakończeniu edycji kliknij „Gotowe” na górze strony. Następnie możesz zapisać swoją wersję roboczą lub opublikować ją.

Możesz teraz odwiedzić swoją stronę, aby zobaczyć gotową stronę o pełnej szerokości.

Metoda 4. Twórz całkowicie niestandardowe strony docelowe o pełnej szerokości z SeedProd

Podczas gdy Beaver Builder jest zgrabnym rozwiązaniem, ma potencjał spowolnienia Twojej witryny.

Jeśli chcesz utworzyć całkowicie niestandardową stronę docelową, na której chcesz dostosować nagłówek, stopkę i wszystkie obszary strony, zalecamy użycie SeedProd.

Jest to najlepsza wtyczka strony docelowej dla WordPress i zawiera bardzo łatwy w użyciu interfejs kreatora stron typu przeciągnij i upuść.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd.

Po aktywacji wystarczy przejść do SeedProd ” Strony aby dodać nową stronę docelową. Możesz po prostu wybrać jeden z wielu gotowych szablonów lub utworzyć niestandardową stronę docelową od podstaw.

Najlepszą częścią SeedProd jest to, że jest niezwykle szybki i ma wbudowane funkcje konwersji do zarządzania subskrybentami, integracji usług e-mail marketingu i innych.

Metoda 5: Utwórz Ręcznie Szablon Strony WordPress O Pełnej Szerokości

Ta metoda jest ostatecznością, jeśli żadna z powyższych metod nie działa dla ciebie. Wymaga edycji plików motywów WordPress. Będziesz potrzebował podstawowej wiedzy na temat PHP, CSS i HTML.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem, jak skopiować / wkleić kod w WordPress.

Zanim przejdziesz dalej, zalecamy utworzenie kopii zapasowej WordPress lub przynajmniej kopii zapasowej bieżącego motywu. Pomoże Ci to łatwo przywrócić witrynę, jeśli coś pójdzie nie tak.

Następnie otwórz zwykły edytor tekstu, taki jak Notatnik, i wklej następujący kod do pustego pliku:

<?php
/*
*
Nazwa Szablonu: Full-Width
*/
get_header ();?>

Zapisz ten plik jako pełna szerokość.php na twoim komputerze. Być może trzeba zmienić „Zapisz jako typ” na „wszystkie pliki”, aby uniknąć zapisywania go jako .plik txt:

Ten kod po prostu definiuje nazwę pliku szablonu i prosi WordPress o pobranie szablonu nagłówka.

Następnie będziesz potrzebował części zawartości kodu. Połącz się ze swoją witryną za pomocą klienta FTP (lub menedżera plików hostingowych WordPress w cPanel), a następnie przejdź do /wp-content/themes/your-theme-folder/.

Teraz musisz zlokalizować plik strona.php. Jest to domyślny plik szablonu strony motywu.

Otwórz ten plik i skopiuj wszystko po get_header() linia i wklej ją na pełną szerokość.plik php na twoim komputerze.

W pełna szerokość.php plik, znajdź i usuń ten wiersz kodu:

<?php get_sidebar ();?> 

Ta linia pobiera pasek boczny i wyświetla go w Twoim motywie. Usunięcie go spowoduje, że Twój motyw nie będzie wyświetlał paska bocznego podczas korzystania z szablonu o pełnej szerokości.

Możesz zobaczyć ten wiersz więcej niż jeden raz w swoim motywie. Jeśli twój motyw ma wiele pasków bocznych (obszary widżetu stopki są również nazywane paskami bocznymi), zobaczysz każdy pasek boczny, do którego odwołuje się jeden raz w kodzie. Zdecyduj, które paski boczne chcesz zachować.

Jeśli motyw nie wyświetla pasków bocznych na stronach, może nie znaleźć tego kodu w pliku.

Oto jak cała nasza pełna szerokość.kod php opiekuje się wprowadzaniem zmian. Twój kod może wyglądać nieco inaczej w zależności od motywu.

<?php
/*
*
Nazwa Szablonu: Pełna Szerokość
*/
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_footer(); ?>

Następnie prześlij pełna szerokość.php plik do folderu motywu za pomocą klienta FTP.

Teraz udało Ci się utworzyć i przesłać niestandardowy szablon strony o pełnej szerokości do swojego motywu. Następnym krokiem jest użycie tego szablonu do utworzenia strony o pełnej szerokości.

Przejdź do obszaru administracyjnego WordPress i edytuj lub utwórz nową stronę w edytorze bloków WordPress.

W okienku „dokument” po prawej stronie wyszukaj „atrybuty strony” i kliknij strzałkę w dół, aby w razie potrzeby rozwinąć tę sekcję. Powinieneś zobaczyć rozwijane menu „szablon”, w którym możesz wybrać nowy szablon o pełnej szerokości:

Po wybraniu tego szablonu Opublikuj lub zaktualizuj stronę.

Podczas wyświetlania strony zobaczysz, że paski boczne zniknęły, a strona jest wyświetlana jako pojedyncza kolumna. Może nie jest to jeszcze pełna szerokość, ale teraz jesteś gotowy, aby zaprojektować go inaczej.

Będziesz musiał użyć narzędzia Inspect, aby znaleźć klasy CSS używane przez Twój motyw do definiowania obszaru zawartości.

Następnie możesz dostosować jego szerokość do 100% za pomocą CSS. Możesz dodać kod CSS przechodząc do Wygląd ” Dostosuj i klikając „dodatkowy CSS” na dole ekranu.

Na naszej stronie testowej użyliśmy następującego kodu CSS:

.page-template-full-width .content-area {
    Szerokość: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .strona {
margin: 0px;
}

Oto jak to wyglądało na naszej stronie demo za pomocą motywu Twenty Sixteen.

Jeśli chcesz użyć metody ręcznej i chcesz dokonać dalszej personalizacji, możesz również użyć wtyczki CSS Hero, która pozwala modyfikować style CSS za pomocą edytora wskaż i kliknij.

Jednak dla większości użytkowników zalecamy użycie własnego szablonu o pełnej szerokości motywu lub użycie wtyczki do jego utworzenia.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo utworzyć stronę o pełnej szerokości w WordPress. Możesz również zobaczyć nasz przewodnik po najlepszych wtyczkach WordPress, aby rozwijać swoją stronę, a także nasze porównanie najlepszych wtyczek WordPress LMS do tworzenia i sprzedaży kursów.

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