Czy chcesz utworzyć stronę WordPress o pełnej szerokości?

Wiele Motywy WordPress są już dostarczane z wbudowanym szablonem strony o pełnej szerokości, którego można użyć. Jednak niektóre motywy WordPress nie mają tej funkcji. w tym Tutoriel, pokażemy Ci, jak łatwo utworzyć stronę o pełnej szerokości w WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Metoda 1: użycie wbudowanego szablonu szerokości w motywie WordPress

Ta metoda jest zalecana, jeśli motyw WordPress jest już wyposażony w szablon strony o pełnej szerokości. Jeśli go nie masz, sprawdź poniższy wybór i go zdobądź.

Najpierw musisz edytować stronę lub utworzyć nową, odwiedzając „ Strony> Dodaj Nowa strona

W oknie edycji strony wybierz Full Width jako szablon pod polem wyboru atrybutów strony.

Po wybraniu modelu Full Widthmusisz zarejestrować swoją stronę. Możesz kontynuować dostosowywanie strony, aby dodać więcej treści, lub kliknij przycisk podglądu, aby zobaczyć ją w akcji.

Jeśli nie masz opcji szablonu Pełna szerokość - Pełna szerokość - na ekranie edycji strony, oznacza to, że motyw WordPress jej nie ma. 

Ale nie martw się, pokażemy Ci, jak łatwo utworzyć stronę o pełnej szerokości bez zmiany motywu WordPress.

Metoda 2: jak utworzyć szablon strony o pełnej szerokości

Ta metoda wymaga edycji plików motywu WordPress, z którego korzystasz, oraz podstawowej znajomości PHP, CSS i HTML.

Nawiasem mówiąc, zapraszamy również do konsultacji Najlepsze wtyczki WordPress do 8 do łatwego tworzenia układów 

Ale zanim przejdziesz dalej, musisz utwórz kopię zapasową WordPress lub przynajmniej kopię zapasową bieżącego motywu WordPress. Pomoże Ci to łatwo przywrócić witrynę, jeśli wydarzy się coś złego. 

Najpierw musisz otworzyć edytor tekstu, taki jak Notatnik, i wkleić następujący kod do pustego pliku:

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

Teraz musisz zapisać ten plik jako „ Full-width.php Na twoim komputerze.

Ten kod po prostu ustawia nazwę szablonu pliku i mówi WordPressowi, aby wyodrębnił szablon nagłówka.

Następnie będziesz potrzebować części kodu zawierającej treść. Połącz się ze swoją witryną za pomocą klienta FTP (lub menedżer plików w cPanel), a następnie przejdź do „ / Wp-content / themes / twój-theme-folderu / ".

Następnie musisz zlokalizować plik o nazwie „ page.php ”. To jest domyślny plik szablonu strony dla Twojego motywu.

Skopiuj wszystko po funkcji « get_header () I wklej go do pliku „ Full-width.php Utworzone na komputerze.

Teraz musisz spojrzeć na zawartość pliku „full-width.php” i usunąć następujący wiersz kodu:

<?php get_sidebar(); ?>

Ta linia po prostu pobiera pasek boczny i wyświetla go w motywie WordPress. Usuwając to, motyw nie będzie wyświetlał paska bocznego podczas korzystania z szablonu Full Width.

Możesz zobaczyć tę linię więcej niż raz w motywie WordPress. Jeśli Twój motyw WordPress ma kilka plików paski boczne (obszary widżetów stopka nazywane są również paskami bocznymi)zobaczysz każdy pasek boczny, do którego odwołuje się jeden raz w kodzie. Musisz zdecydować, które paski boczne chcesz zachować.

Twoja witryna wydaje się ładować powoli, odkryj Dlaczego musisz zacząć optymalizować swój blog WordPress według obrazów

Jeśli Twój motyw nie wyświetla pasków bocznych na stronie, możesz nie znaleźć tego kodu w pliku.

W ten sposób nasz kod full-width.php zajmuje się wprowadzaniem zmian. Twój kod może wyglądać nieco inaczej w zależności od 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 -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Następnie musisz pobrać plik Full-width.php »W folderze motywów WordPress za pomocą rozszerzenia klient FTP.

Pomyślnie utworzyłeś i przesłałeś 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 pulpitu nawigacyjnego i edytuj lub utwórz nową stronę.

Na ekranie edycji strony znajdź pole wyboru atrybutów strony i kliknij menu rozwijane pod opcją „Szablon”.

Będziesz mógł zobaczyć swój model. Śmiało, wybierz go i zapisz lub zaktualizuj stronę.

Teraz możesz odwiedzić swoją witrynę, a zobaczysz, że paski boczne zniknęły, a Twoja strona jest wyświetlana jako strona z jedną kolumną. Może jeszcze nie jest pełna, ale teraz możesz ją przesyłać strumieniowo w inny sposób.

Uczyń swoją witrynę popularną, odkrywając Wtyczki 7 WordPress do optymalizacji SEO Twoich zdjęć

Będziesz musiał użyć narzędzia Inspect, aby odkryć klasy CSS, których używa Twój motyw do zdefiniowania obszaru zawartości.

Następnie możesz dostosować jego szerokość do 100% za pomocą CSS. 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 będzie wyglądać jak Twenty Seventeen.

To wszystko w tym samouczku, mam nadzieję, że pozwoli ci to tworzyć strony o pełnej szerokości.

Powyższe metody są bezpłatne dla tych, którzy mogą sobie pozwolić i chcą szybko stworzyć układy o pełnej lub pełnej szerokości.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Divi Builder

Divi Builder to wysokiej jakości kreator stron, który jest bardzo ceniony eleganckie tematy. Chociaż jest generalnie używany jako część motywu Divi WordPress, Divi Builder jest również samodzielną wtyczką, której można używać w innych motywach WordPress.

Divi Builder umożliwia edycję treści za pomocą interfejsu wizualnego na front-endzie, a także interfejsu na zapleczu, chociaż większość użytkowników woli pierwszy interfejs.

Zasadniczo zamiast pasków bocznych wszystko jest w wyskakujących okienkach i pływających przyciskach. Zapewnia dostęp do 316 wstępnie zaprojektowanych szablonów w 40 różnych pakietach prezentacji, a także możliwość zapisywania własnych projektów jako szablonów.

Proponujemy Ci odkryć Jak stworzyć profesjonalnego bloga

Jedną z cech Divi zawsze była kontrola stylów, które ci daje. Na trzech różnych kartach możesz skonfigurować różne ustawienia, w tym responsywne elementy sterujące, konfigurowalne odstępy i inne.

Możesz nawet dodać niestandardowy CSS, ponieważ jego edytor CSS obejmuje podstawową walidację i automatyczne uzupełnianie. Jedną z krytyki Divi Builder zawsze było to, że polega na tym shortcodes, Co oznacza, że ​​jeśli go wyłączysz pewnego dnia, pozostawi kilka skrótów w treści. Chociaż jest to trochę przygnębiające, teraz nie ma większego problemu, ponieważ istnieją takie wtyczki jak Shortcode Cleaner.

Pobierz | Demo | hosting

2. Themify Builder

Nie jest zaskoczeniem, że Themify Builder to oferta zespołu Themify. Integruje go z kilkoma motywami WordPress, aby zapewnić klientom proste opcje dostosowywania. Ale możesz też kupić go jako samodzielną wtyczkę i używać go z dowolnym motywem WordPress.

Podobnie jak Divi Builder i WPBakery Page Builder, Themify Builder umożliwia tworzenie układów w interfejsie lub zapleczu. Kolejną dobrą rzeczą jest to, że ta wtyczka pozwala dostosować responsywne punkty przerwania (ale tylko na poziomie całej witryny).

Odkrywaj Jak zainstalować i skonfigurować WooCommerce dla stworzyć sklep internetowy i łatwo sprzedawaj swoje produkty w Internecie 

Fajną rzeczą w Themify Builder jest to, że nadal pozwala korzystać ze standardowego edytora WordPress, podczas gdy inne kreatory stron zmuszają Cię do korzystania z interfejsu WordPress. Kreator stron za wszystko.

Pobierz | Demo | hosting

3. Elementor

Pierwotnie uruchomiona w 2016 r., Wtyczka Elementor WordPress jest jednym z najmłodszych programów do tworzenia stron na tej liście. Pomimo późnego uruchomienia Elementor szybko zgromadził ponad 1 aktywnych instalacji na WordPress.org, co czyni go jednym z najpopularniejszych kreatorów stron WordPress.

Jego reputacją jest płynny interfejs wizualny, różne opcje stylu i inne zaawansowane funkcje, takie jak pełne tworzenie motywów WordPress.

Jego interfejs jest podzielony na dwie główne części, z trzecią strefą dla niektórych parametrów. Darmowa wersja Elementora oferuje bezpłatne widżety 28. Wersja Pro wprowadza inne widżety 30, w sumie widżety 58 w wersji Pro. Darmowa wersja zawiera około darmowych szablonów 40, a wersja Pro zawiera setki dodatkowych szablonów.

 Pobierz | Demo | hosting

Inne zalecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

• Jak bezpiecznie zmienić motyw WordPress
• Jak skonfigurować dostawy na WooCommerce
• Wtyczki 10 premium WordPress z Booking and Booking
• Kiedy i jak zainstalować WordPress w podkatalogu
• 10 WordPress wtyczki, aby zwiększyć szybkość swojego bloga

Wnioski

Tutaj jest ! To wszystko w tym samouczku. Jeśli masz motyw WordPress, który nie oferuje strony o pełnej szerokości jako szablonu, mamy nadzieję, że ten samouczek pomógł Ci rozwiązać ten problem. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych. 

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...