Jak tworzyć niestandardowe szablony pojedynczych postów w WordPress

Czy widziałeś kiedyś stronę szczegółów posta z zupełnie innym układem niż inne posty w tej samej witrynie? To prawdopodobnie dlatego, że używa niestandardowego szablonu. Możesz przypisać niestandardowy szablon do poszczególnych postów, co zapewnia większą elastyczność w zakresie wyglądu witryny.

Chcesz dowiedzieć się, jak utworzyć niestandardowy szablon pojedynczego postu? W tym poście pokażę ci, jak łatwo możesz stworzyć własne!

Korzyści z niestandardowych szablonów

Zanim zaczniemy go tworzyć, dowiedzmy się, dlaczego możesz potrzebować niestandardowego szablonu i co on robi.

Jeśli chcesz, aby określony post lub typ postu wyróżniał się na tle innych treści, możesz rozważyć utworzenie niestandardowego szablonu pojedynczego postu. Ten szablon zostanie zastosowany tylko do wpisów, do których go przypiszesz, co oznacza, że ​​może mieć zupełnie inny układ niż standardowe posty. Unikalny projekt i układ mogą następnie zwiększyć zaangażowanie użytkowników dla tego konkretnego postu.

Gotowy do opracowania własnego? Tworzenie i używanie niestandardowego szablonu posta jest podobne do niestandardowego szablonu strony.

Jak utworzyć niestandardowy szablon posta

W moim przykładzie użyję motywu Twenty Seventeen, ale proces będzie taki sam dla każdego motywu.

Przed utworzeniem niestandardowego szablonu posta najpierw utworzę motyw potomny. Możesz pracować w głównym motywie, ale ponieważ tworzysz niestandardowy szablon, jeśli zaktualizujesz motyw nadrzędny, utracisz swój szablon. Z tego powodu dobrą praktyką jest oddzielenie szablonów niestandardowych od motywu głównego.

W przypadku niestandardowego szablonu musisz zdefiniować Nazwę szablonu (nazwę szablonu) i Typ postu szablonu (gdzie ten szablon będzie używany). To wygląda tak:

 [php]
<?php
/* Nazwa szablonu: Post o pełnej szerokości * Szablon Typ postu: post*/ /*Szablon do wyświetlania pojedynczych postów o pełnej szerokości. */
get_header();
?>
[/php]

Podczas zapisywania pliku zachowaj nazwę pliku zgodną z nazwą szablonu, na przykład full-width-post.php . Jeśli przeglądasz post z panelu administracyjnego, nowy szablon pojawi się na liście rozwijanej sekcji Atrybuty posta.

Nasz niestandardowy szablon jest gotowy, ale nie jest jeszcze przydatny. Sprawmy, by było to trochę bardziej korzystne!

Uwaga: Będziemy pracować nad wieloma plikami, więc śledź nazwy plików i foldery.

Oto aktualny układ stron z wpisami na blogu w motywie Twenty Seventeen. Jestem z tego zadowolony, więc zostawmy to.

Załóżmy teraz, że chcesz mieć układ o pełnej szerokości dla kilku postów. Umieścimy tytuł posta nad metadanymi. Metadane powinny mieć obramowanie u góry i u dołu, a tytuł i metadane powinny być wyrównane do środka. Oto szkielet:

Aby zrobić ten układ, musisz znaleźć plik odpowiedzialny za wyświetlanie stron ze szczegółami postów. W większości motywów plikiem single.php jest plik, chyba że istnieją pewne predefiniowane szablony. Struktura kodu różni się w zależności od motywu, więc zrozumienie, jak działa dany motyw, może zająć trochę czasu.

Po znalezieniu pliku, który wyświetla strony szczegółów wpisu, powinieneś sprawdzić, czy funkcja jest używana do wywoływania innego pliku, czy też szablon jest tworzony bezpośrednio. W tym przykładzie z motywem Twenty Seventeen jest to funkcja get_template_part.

Ścieżka get_template_part jest najważniejszą częścią do naśladowania.

 [php]

<div class=”wrap”>

<div id=„podstawowy” class="obszar-zawartości>
        	<main id="main” class="główna witryna” role="główny">
              	<?php /* Uruchom pętlę */ while ( have_posts() ): the_post(); get_template_part('szablony-części/post/treść', get_post_format() ); // Jeśli komentarze są otwarte lub mamy co najmniej jeden komentarz, załaduj szablon komentarza. if ( komentarze_otwarte() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="tekst-czytnika-ekranowego">' . __( 'Poprzedni post', 'dwadzieścia siedemnaście' ) '</span><span aria-hidden="true" class="nav-subtitle">" __( ' Poprzedni”, „dwadzieścia siedemnaście”) . „</span> <span class=„nav-title”><span class="nav-title-icon-wrapper >' . span>%tytuł</span>”,
                          	'next_text' => „<span class=„tekst-czytnika ekranu”>” . __( 'Następny post', 'dwadzieścia siedemnaście'). „</span><span aria-hidden=„true”; class="nav-subtitle”>' . __( 'Następny', 'dwadzieścia siedemnaście' ) . „</span> <span class=„nav-title”>%title<span class=„nav-title-icon-wrapper”>' . dwadzieściaseventeen_get_svg( array( 'icon' => 'strzałka w prawo' ) ) . „</span></span>”,
                    	));
              	koniec czasu; // Koniec pętli.
              	?>
[/php]

Jak widać, odnosi się to do ścieżki:

 [php]
get_template_part( 'elementy-szablonu/post/zawartość', get_post_format()
);
[/php] 

Tak więc plik content.php jest wywoływany wewnątrz single.ph , aby wyświetlić stronę ze szczegółami posta.

Teraz, gdy już wiesz, jak działa plik single.php , skopiujmy z niego kod i wklejmy go do wcześniej utworzonego pliku full-width-post.php w motywie potomnym. Ponieważ będzie to szablon o pełnej szerokości, usuniemy pasek boczny.

Teraz skopiuj plik content.php z wyżej wymienionej ścieżki. Możesz wkleić go w tym samym katalogu, w którym znajduje się plik szablonu, ale sugerowałbym przestrzeganie tej samej struktury folderów, co motyw nadrzędny.

Możesz zachować nazwę pliku bez zmian, ale jeśli kiedykolwiek zechcesz zmienić coś w domyślnym szablonie, spowoduje to konflikt. Aby uniknąć problemów, sugeruję zmianę nazwy pliku i zachowanie zgodności z nazwą szablonu, na przykład content-full-width.php .

Pliki są na miejscu, więc teraz zmodyfikujmy kod, aby zamienić tytuł posta i metadane posta.

 [php]

<header class="entry-header”>
        	<?php

        	if ( is_single() ) {
              	tytuł( '

<h1 class=„tytuł-hasła”>”, „</h1>

');
        	} elseif ( is_front_page() && is_home() ) {
              	tytuł( '

<h3 class="tytuł-pozycji"><a href="' . esc_url( get_permalink() ) . '" rel=„zakładka”>”, „</a></h3>

');
        	} w przeciwnym razie {
              	tytuł( '

<h2 class="tytuł-pozycji"><a href="' . esc_url( get_permalink() ) . '" rel=„zakładka”>”, „</a></h2>

');
        	}

        	if ( 'post' === get_post_type() ) {

              	Echo '

<div class="entry-meta”>”;
                    	if ( is_single() ) {
                    	  	dwadzieścia siedemnaście_posted_on();
                    	} w przeciwnym razie {
                          	echo dwadzieścia siedemnaście_czas_link();
                          	dwadzieścia siedemnaście_edytuj_link();
                    	};
              	echo '</div>

<!--.entry-meta -->';
        	};
        	?>
  	</header>

<!--.entry-header -->
[/php]

Aby użyć tego szablonu, edytuj żądany post z poziomu administratora WordPress i przypisz szablon z menu rozwijanego.

Jeśli sprawdzisz post na stronie głównej, nadal nie ma on pełnej szerokości, ale tytuł i metadane zamieniły się miejscami, więc wiemy, że post korzysta z naszego niestandardowego szablonu

Musimy dodać trochę CSS, aby uzyskać pełną szerokość. WordPress automatycznie generuje klasę zgodnie z nazwą szablonu w sekcji treści.

Użyj tej klasy, aby kierować na ten konkretny szablon. CSS można dodać do pliku style.css motywu potomnego.

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
liczba zmiennoprzecinkowa: brak;
szerokość:automatyczna;
}

.post-template-full-width-post .entry-header{
wyrównanie tekstu: środek;
margines-dolny: 1,3 em;
}

.post-template-full-width-post .entry-meta{
obramowanie górne: 1px stałe #ccc;
obramowanie na dole: 1px stałe #ccc;
dopełnienie: 15 pikseli 0;
}
[/css]

Teraz mamy układ taki, jak chcieliśmy. Każdy post korzystający z tego szablonu będzie miał dokładnie ten sam styl.

Możesz utworzyć tyle niestandardowych szablonów, ile chcesz, aby dopasować je do swoich wymagań. Możesz nawet tworzyć szablony na podstawie kategorii postów.

Czy mogę użyć do tego wtyczki?

Jeśli nie czujesz się komfortowo z kodami PHP, możesz użyć niektórych wtyczek, ale muszę przyznać, że dostępnych jest bardzo niewiele wtyczek do tworzenia niestandardowych szablonów postów, a większość z nich nie jest zbyt przydatna, ponieważ i tak musisz ręcznie utworzyć szablon.

Uważam, że wtyczka Post Custom Templates Lite jest bardzo przydatna. Jest to darmowa wtyczka, która pozwala tworzyć szablony postów bez kodowania w ładnym interfejsie typu „przeciągnij i upuść”. Ma wiele opcji dostosowywania, więc jeśli chcesz dostosować szablon posta, ogólnie ta wtyczka może ci pomóc.

Uwaga: Darmowa wersja pozwala tylko na dostosowanie zwykłych szablonów postów. Musisz użyć wersji pro, aby móc tworzyć niestandardowe szablony postów i uzyskać dodatkowe funkcje.

Wniosek

Niezależnie od tego, czy pracujesz ręcznie, czy używasz wtyczki do tworzenia niestandardowego szablonu pojedynczego postu, pozwala to wyróżnić najważniejsze posty na tle innych. W poszukiwaniu inspiracji zajrzyj na stronę Briana Deana; używa określonego szablonu dla swoich ostatecznych przewodników, aby wyglądały inaczej niż reszta jego postów.

Więc spróbuj i stwórz swój własny, unikalny szablon pojedynczego postu! Aby uzyskać najlepsze wyniki dla każdej tworzonej witryny, wybierz zarządzaną platformę hostingową WP Engine jako jedyne źródło hostingu WordPress!