Utwórz niestandardowy szablon strony w motywie WordPress

Jednym z najważniejszych punktów sprzedaży WordPressa jest idea motywów. Pojedynczy motyw dodaje wielką wartość do projektu i funkcjonalności witryny. Istnieją jednak strony internetowe, które mają różne projekty na różnych stronach.

Niestety, kilka motywów WordPress ogranicza użytkownikom możliwość zmiany układu i funkcjonalności dla innej strony w hierarchii. Niestandardowy szablon strony WordPress pozwala użytkownikom zintegrować niestandardowe wymagania, takie jak prawy/lewy pasek boczny na określonej stronie, dodatkowa funkcja wezwania do działania lub unikalny nagłówek dla określonej strony docelowej. Zanurzmy się dalej, aby zobaczyć, jak niestandardowy szablon strony WordPress wyświetla różne rodzaje treści.

Niestandardowy szablon strony WordPress może być używany do wielu celów. Niektóre pomysły obejmują:

• Pokaż najnowsze posty z każdej kategorii
• Osadź mapę Google lub dowolny skrypt
• Lista wszystkich autorów.
• Ostatnio przesłane obrazy
• Niestandardowa strona projektu do portfolio
• Strona kontaktowa

Wygląd wszystkich stron i postów utworzonych w witrynie WordPress jest obsługiwany przez plik szablonu o nazwie page.php . Tworzenie lub edytowanie niestandardowego szablonu strony w WordPressie wymaga podstawowej znajomości HTML, CSS i PHP.

Po prostu otwórz dowolny edytor tekstu i wklej do niego następujący kod.

 <?php /* Nazwa szablonu: Stronabez paska bocznego */ ?>

Powyższy wiersz kodu informuje WordPress, że jest to plik szablonu o nazwie PageWithoutSidebar . Możesz użyć dowolnej nazwy. Teraz zapisz ten plik jako PageWithoutSidebar.php . Ponownie możesz użyć dowolnej innej nazwy pliku. Ale nie zapomnij zachować rozszerzenia jako .php

Teraz przetestujemy nasz nowo utworzony plik szablonu.

Zaloguj się do swojego panelu hostingowego. W tym przykładzie używam Cloudways – najszybszego zarządzanego hostingu WordPress. Cloudways obsługuje aplikacje WordPress z opcjami dostawcy dla AWS, DigitalOcean, GCP, Linode i Vultr. Przejdź do folderu /wp-content/themes . Otwórz folder bieżącego motywu i prześlij tam plik PageWithoutSidebar.php .

Przejdź do Panelu administracyjnego WordPressa > Strony > Dodaj nowy . Możesz zobaczyć nowy niestandardowy szablon strony wymieniony po prawej stronie.

Utwórz nową stronę i ustaw jej szablon na PageWithoutSidebar. Po zakończeniu opublikuj .

Otwórz nowo utworzoną stronę. Ponieważ w szablonie nie ma jeszcze elementów projektu, wyświetlana jest pusta strona, taka jak na poniższym obrazku.

To pokazuje, że niestandardowy szablon strony w WordPress został pomyślnie zaimplementowany, dzięki czemu możesz stworzyć niestandardowy, responsywny motyw WordPress

Teraz pora na dodanie kilku linijek kodu, aby wyświetlić zawartość strony.

W tym demo omówię, w jaki sposób można dostosować domyślny szablon strony Twenty Sixteen.

Domyślny wygląd stron jest generowany przez plik page.php znajdujący się w folderze /wp-contents/themes/TWÓJ TEMAT/ . Otwórz page.php i skopiuj ten kod.

 <?php get_header(); ?>

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

                                                // Dołącz szablon treści strony.
                                                get_template_part( 'części/treść-szablonu', 'strona' );

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

                                                // Koniec pętli.
                                koniec;
                                ?>

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

                <?php get_sidebar( 'treść-dół' ); ?>

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

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

Wklej ten kod do PageWithoutSidebar.php tuż pod tym wierszem kodu.

 <?php /* Nazwa szablonu: StronaBezpaska bocznego */ ?>

Zapisz to!

Twój kompletny plik PageWithoutSidebar.php będzie wyglądał jak poniżej.

 <?php /* Nazwa szablonu: Stronabez paska bocznego */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // Uruchom pętlę.
                                while ( have_posts() ): the_post();

                                                // Dołącz szablon treści strony.
                                                get_template_part( 'części/treść-szablonu', 'strona' );

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

                                                                szablon_komentarzy();

                                                }

                                                // Koniec pętli.
                                koniec;

                                ?>

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

                <?php get_sidebar( 'treść-dół' ); ?>

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

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Wróć do swojej strony i odśwież ją. Zobaczysz, że wszystko działa tak samo, jak w domyślnym motywie WordPress Twenty Sixteen.

Teraz dostosujmy to. Jak widać, po prawej stronie znajduje się pasek boczny. Usunę go tylko z tej strony. Wszystkie inne strony będą miały domyślny wygląd motywu Twenty Sixteen.

Otwórz plik PageWithoutSidebar.php . Przewiń w dół do końca pliku i usuń :

 <?php get_sidebar(); ?>

To jest wiersz kodu, który wyświetla pasek boczny na stronie. Po usunięciu linii zapisz ją . Otwórz adres URL strony i nie ma już paska bocznego!

Jak widać, pasek boczny został pomyślnie usunięty z tej strony. Jednak wyrównanie tekstu nie jest dobre. Po prawej stronie jest puste miejsce. Poprawka polega na wyjustowaniu i rozszerzeniu tekstu tak, aby wypełniał ekran.

Wróć do PageWithoutSidebar.php i znajdź:

 <div class="content-area">

Po prostu zmień „ content-area ” na „ site-content-fullwidth ” i gotowe. Odśwież stronę, a treść będzie miała pełną szerokość.

Nadal ciekawi Cię, dlaczego stworzyłem niestandardowy szablon strony, skoro mogłem łatwo edytować plik page.php ? Jest całkiem oczywiste, że jeśli edytowany jest plik page.php , wszystkie strony w witrynie pokażą zmiany. Aby zastosować niestandardowy wygląd na określonych stronach, przydatny jest niestandardowy szablon strony w WordPress. Możesz także zdefiniować niestandardową rolę użytkownika w WordPressie, aby przypisać użytkownikom różne uprawnienia.

Jeśli masz jakieś pytania, możesz je zadać, publikując w sekcji komentarzy poniżej.