Jak utworzyć stronę o pełnej szerokości w WordPress (przewodnik dla początkujących)

Czy chcesz utworzyć stronę o pełnej szerokości w WordPressie, aby twoja treść mogła rozciągać się na cały ekran?

Większość motywów WordPress ma już wbudowany szablon strony o pełnej szerokości, z którego można korzystać. Jeśli jednak twój motyw nie ma takiego szablonu, możesz go łatwo dodać.

W tym artykule pokażemy, jak łatwo stworzyć stronę o pełnej szerokości w WordPressie, a nawet stworzyć w pełni własny układ strony bez żadnego kodu.

Oto krótki przegląd metod opisanych w tym przewodniku:

Metoda 1. Użyj pełnowymiarowego szablonu twojego motywu

Jeśli twój motyw jest już wyposażony w szablon strony o pełnej szerokości, najlepiej po prostu z niego skorzystać. Prawie wszystkie dobre motywy WordPress to robią.

Nawet najlepsze darmowe motywy WordPress są często dostarczane z szablonem 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 Pages ” Add New w twoim kokpicie WordPress.

W prawym panelu „Dokument” edytora treści należy rozwinąć sekcję „Atrybuty strony”, klikając strzałkę w dół obok niej. Następnie powinno pojawić się menu rozwijane „Szablon”.

Jeśli masz szablon pełnej szerokości dla twojego motywu, będzie on wymieniony tutaj. Jego nazwa powinna brzmieć „Full Width Template”:

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

Możesz go łatwo dodać, korzystając z 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 należy zainstalować i włączyć wtyczkę Fullwidth Templates. Jeśli nie wiesz, jak to zrobić, zapoznaj się z naszym przewodnikiem dla początkujących dotyczącym instalacji wtyczki WordPress.

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

Opcje te są następujące:

• FW No Sidebar: Usuwa panel boczny z twojej strony, ale pozostawia wszystko inne nienaruszone.
• FW Fullwidth: Usuwa panel boczny, tytuł i komentarze oraz rozciąga układ do pełnej szerokości.
• FW Fullwidth No Header Footer: Usuwa wszystko, co robi FW Fullwidth, plus nagłówek i stopkę.

Jeśli zamierzasz po prostu korzystać z wbudowanego edytora WordPress, „FW No Sidebar” będzie prawdopodobnie najlepszym wyborem.

Wtyczka pozwala na stworzenie szablonu strony o pełnej szerokości, ale ma ograniczone opcje konfiguratora.

Jeśli chcesz dostosować własny szablon o pełnej szerokości bez żadnego kodu, musisz użyć kreatora stron.

Metoda 3: Zaprojektowanie pełnowymiarowej strony w WordPressie przy użyciu wtyczki Page Builder

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.

Umożliwia łatwą edycję strony o pełnej szerokości i tworzenie różnych układów strony dla twojej witryny internetowej za pomocą interfejsu „przeciągnij i upuść”.

Do tej metody potrzebna będzie wtyczka WordPress do tworzenia stron. W tym poradniku będziemy używać Thrive Architect.

Jest to jedna z najlepszych wtyczek do tworzenia stron typu „przeciągnij i upuść”, która umożliwia łatwe tworzenie układów stron bez pisania jakiegokolwiek kodu.

Najpierw zainstaluj i włącz wtyczkę Thrive Architect. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat instalacji wtyczki WordPress.

Po włączaniu wtyczki, edytuj istniejącą stronę lub utwórz nową w WordPress.

Następnie kliknij przycisk „Launch Thrive Architect” u góry twojego ekranu.

Następnie zostaniesz poproszony o wybranie rodzaju strony, którą chcesz utworzyć. Możesz utworzyć zwykłą stronę lub gotową stronę docelową.

Wybierz opcję „Pre-built Landing Page” klikając na nią.

Spowoduje to przejście do biblioteki stron docelowych Thrive Architect. Z tego miejsca możesz wybrać jeden z gotowych szablonów, który posłuży jako podstawa dla twojej strony o pełnej szerokości.

Wystarczy kliknąć wybrany szablon, aby go wybrać.

Jeśli wybrałeś szablon z sekcji „Zestawy inteligentnych stron docelowych”, możesz teraz wybierać spośród wielu wstępnie zaprojektowanych stron w tym stylu.

W tym poradniku wybierzemy szablon „Strona sprzedaży”, klikając na niego. Następnie naciśnij przycisk „Zastosuj szablon”, a kreator stron będzie go wczytywał.

Gdy już znajdziesz się w edytorze Thrive Architect, możesz edytować dowolne elementy, takie jak obrazki, tło, tekst itd, które chcesz zmienić.

Aby edytować element na stronie, wystarczy na niego kliknąć. W tym przypadku kliknęliśmy na tło tego bloku strony. Spowoduje to wyświetlenie wszystkich opcji konfiguratora w menu po lewej stronie:

Tutaj możesz przełączyć przełącznik, aby upewnić się, że twoja treść obejmuje całą szerokość ekranu.

Z menu po lewej stronie można również dostosować typografię, wielkość liter, układ, styl tła, obramowania, cienie i wiele więcej.

Możesz również utwórz nowe elementy w dowolnym momencie do twojego układu. Thrive Architect zawiera wiele podstawowych i zaawansowanych bloków, które można przeciągać i upuszczać na twoją stronę.

Po zakończeniu edycji kliknij przycisk strzałki (^) obok przycisku „Zapisz pracę” u dołu ekranu. Następnie kliknij opcję „Zapisz i wróć do edytora wpisów”.

Następnie możesz zapisać twoją wersję roboczą lub ją opublikować.

Po opublikowaniu możesz przejść na Twój blog WordPress, aby zobaczyć gotową stronę o pełnej szerokości.

Metoda 4. Tworzenie całkowicie własnych stron o pełnej szerokości za pomocą SeedProd

Choć Thrive Architect to zgrabne rozwiązanie, być może szukasz wtyczki, która zapewni ci jeszcze bardziej zaawansowane opcje konfiguratora dla twoich witryn internetowych.

Jeśli chcesz stworzyć całkowicie konfigurator strony docelowej, w którym chcesz dostosować nagłówek, stopkę i wszystkie obszary strony, zalecamy skorzystanie z SeedProd.

Jest to najlepsza wtyczka do tworzenia stron docelowych dla WordPressa, wyposażona w bardzo łatwy w użyciu interfejs kreatora stron typu „przeciągnij i upuść”.

Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Po włączaniu wystarczy przejść do SeedProd ” Pages, aby utworzyć nową stronę docelową.

Możesz wybrać jeden z ponad 300 gotowych szablonów, które zawierają wiele opcji pełnej szerokości. Możesz też stworzyć od podstaw własną stronę docelową o pełnej szerokości.

Najlepsze w SeedProd jest to, że jest niezwykle szybki i ma wbudowane funkcje konwersji do zarządzania subskrybentami, integrację usług e-mail marketingu, zaawansowane bloki WooCommerce i wiele więcej.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej w WordPressie.

Oprócz kreatora stron docelowych, SeedProd oferuje również kompletny kreator motywów typu „przeciągnij i upuść”. Oznacza to, że możesz łatwo stworzyć własny motyw WordPress o pełnej szerokości bez edytowania jakiegokolwiek kodu.

Wystarczy przejść do SeedProd ” Theme Builder, aby utworzyć nowy motyw WordPress. Ponownie, możesz wybierać spośród konfigurowalnych szablonów motywów lub zaprojektować każdą część twojego motywu od podstaw.

Po prostu wskazując i klikając, możesz edytować każdą część twojego motywu. Możesz na przykład utworzyć nowy obrazek tła i ustawić pozycję oraz szerokość sekcji na pełny ekran.

Dzięki kreatorowi motywów SeedProd możesz dostosować każdą część swojej witryny internetowej WordPress, w tym strony, wpisy, archiwa, nagłówek, stopkę, panele boczne, strony WooCommerce i wiele innych.

Aby uzyskać instrukcje krok po kroku, możesz skorzystać z naszego poradnika, jak łatwo stworzyć własny motyw WordPress.

Metoda 5: Ręczne utworzenie szablonu strony WordPress o pełnej szerokości

Ta metoda jest ostatecznością, jeśli żadna z powyższych metod nie działa. Wymaga ona edycji plików twojego motywu WordPress. Potrzebna będzie podstawowa znajomość PHP, CSS i HTML.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania / wklejania kodu w WordPress.

Zanim przejdziesz dalej, zalecamy utworzenie kopii zapasowej WordPressa lub przynajmniej kopii zapasowej twojego obecnego, aktualnego motywu. Pomoże to łatwo przywrócić twoją witrynę, jeśli coś pójdzie nie tak.

Następnie otwórz zwykły edytor tekstu, taki jak Notatnik i wklej poniższy kod do pustego pliku:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Zapisz ten plik jako full-width. php na twoim komputerze. Może być konieczna zmiana „Zapisz jako rodzaj” na „Wszystkie pliki”, aby uniknąć zapisania go jako pliku .txt:

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

Następnie potrzebna będzie część kodu dotycząca treści. Połącz się ze swoją witryną internetową za pomocą klienta FTP (lub menedżera plików hostingu WordPress w cPanel), a następnie przejdź do /wp-content/themes/your-theme-folder/.

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

Otwórz ten plik i skopiuj wszystko po linii get_header() i wklej do pliku full-width.php na twoim komputerze.

W pliku full-width. php znajdź i usuń tę linię kodu:

<?php get_sidebar(); ?>

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

Możesz zobaczyć tę linię więcej niż raz w twoim motywie. Jeśli twój motyw ma wiele pasków bocznych (obszary widżetów w stopce są również nazywane paskami bocznymi), wówczas każdy pasek boczny będzie przywoływany raz w kodzie. Zdecyduj, które panele boczne chcesz zachować.

Jeśli twój motyw nie wyświetla paneli bocznych na stronach, możesz nie znaleźć tego kodu w swoim pliku.

Oto jak wygląda cały nasz kod full-width.php po wprowadzeniu zmian. Twój kod może wyglądać nieco inaczej w zależności od Twojego motywu.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

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

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

<?php get_footer(); ?>

Następnie prześlij plik full-width. php do katalogu twojego motywu za pomocą klienta FTP.

Pomyślnie utworzyłeś i przesłałeś własny szablon strony o pełnej szerokości do twojego 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 panelu „Dokumentacja” po prawej stronie znajdź „Atrybuty strony” i kliknij strzałkę w dół, aby rozwinąć tę sekcję, jeśli to konieczne. Powinieneś zobaczyć listę rozwijaną „Szablon”, z której możesz wybrać twój nowy szablon „Pełna szerokość”:

Po wybraniu szablonu opublikuj lub zaktualizuj stronę.

Gdy zobaczysz stronę, zobaczysz, że panele boczne zniknęły, a twoja strona pojawia się jako pojedyncza kolumna. Być może nie ma jeszcze pełnej szerokości, ale jesteś teraz gotowy, aby nadać jej inny styl.

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

Następnie możesz dostosować jego szerokość do 100% za pomocą CSS. Kod CSS można dodać, przechodząc do Wygląd ” Dostosuj i klikając „Dodatkowy CSS” u dołu ekranu.

W naszej witrynie testowej użyliśmy następującego kodu CSS:

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

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

Oto jak to wyglądało na naszej witrynie demonstracyjnej przy użyciu motywu Twenty Sixteen.

Jeśli chcesz skorzystać z metody ręcznej i chcesz dokonać dalszych dostosowań, możesz również użyć wtyczki CSS Hero, która pozwala modyfikować style CSS za pomocą edytora typu „wskaż i kliknij”.

Dla większości użytkowników zalecamy jednak użycie szablonu pełnej szerokości twojego 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. Warto również zapoznać się z naszym przewodnikiem po najlepszych wtyczkach WordPress do rozwoju twojej witryny internetowej oraz naszym porównaniem najlepszych wtyczek WordPress LMS do tworzenia i sprzedaży kursów.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.