Jak ręcznie tworzyć niestandardowe szablony WordPress – przewodnik

Jeśli nie jesteś zadowolony z projektu swojej witryny, a wybrany motyw nie oferuje wymaganego poziomu opcji dostosowywania, być może nadszedł czas, aby rozważyć utworzenie własnego niestandardowego szablonu! W zależności od potrzeb ten szablon WordPress może być niestandardowym szablonem posta, szablonem strony lub widokiem kategorii.

Jedną z ekscytujących rzeczy związanych z WordPress jest to, że niezależnie od tego, jak została zbudowana Twoja witryna WordPress, zawsze możesz zmienić układ lub projekt w dowolnym momencie. Można to zrobić, nadpisując gotowy szablon lub tworząc własny. WordPress oferuje ogromną elastyczność i daje możliwość stworzenia własnego szablonu na wszystko.

Pomimo tego, że tworzenie własnego szablonu otwiera wiele możliwości projektowania, większość użytkowników WordPressa prawdopodobnie unika tego wyzwania, ponieważ obawia się, że tworzenie własnego niestandardowego szablonu WordPress jest zbyt skomplikowane. W tej serii dwóch artykułów przyjrzymy się obu dostępnym dla Ciebie możliwościom. Najpierw w tym artykule przyjrzymy się, jak ręcznie zakodować niestandardowy szablon WordPress (co zapewnia najwyższą elastyczność), a następnie przyjrzymy się, w jaki sposób można wykorzystać popularne narzędzia do tworzenia stron, aby wziąć na siebie część niezbędnych zadań podczas tworzenia niestandardowego szablonu WordPress.

W tym artykule przyjrzymy się sposobom tworzenia niestandardowych szablonów dla stron, postów, a nawet kategorii postów. Zacznijmy od przyjrzenia się, dlaczego możesz potrzebować szablonu niestandardowego.

Uwaga: ten artykuł zakłada praktyczną znajomość HTML, CSS i PHP.

Kiedy potrzebujesz niestandardowego szablonu WordPress?

Być może nie jesteś jeszcze pewien, dlaczego faktycznie musisz użyć niestandardowego szablonu WordPress. Najłatwiej to wyjaśnić na przykładzie.

Wyobraźmy sobie, że masz witrynę internetową dla swojej firmy. Motyw „Dwadzieścia dwadzieścia” jest aktywowany, a wszystkie niezbędne strony i posty są już utworzone i wypełnione treścią (tekstem i obrazami), fragmentem i wyróżnionym obrazem.

Skonfigurowane są również ustawienia ogólne, a za pomocą narzędzia Customizer wprowadzono szereg zmian (takich jak kolory łączy, kolor nakładki szablonu okładki itp.)

Utworzono również menu z 5 pozycjami: Strona główna – Profil firmy – Usługi – O nas – Kontakt

W sekcji Usługi znajduje się podmenu: Serwis 1 – Serwis 2 – Serwis 3.

Tak więc z perspektywy programisty WordPressa zasadniczo masz:

• Cztery standardowe strony ( Strona główna – Profil firmy – O nas – Kontakt )
• Jedna strona archiwum ( Usługi )
• Trzy strony postów ( Serwis 1 – Serwis 2 – Serwis 3 )

Domyślnie wszystkie 3 strony postów serwisowych będą miały ten sam układ. Jedyną aktualnie dostępną opcją rozróżniania poszczególnych układów tych postów jest wybranie jednego z trzech szablonów dostępnych w ustawieniu Atrybuty posta.

Jeśli wybierzemy każdy z różnych szablonów, zobaczymy, że wyglądają tak:

Domyślny szablon

Szablon o pełnej szerokości

Szablon okładki

Jeśli masz szczęście, jeden z tych stylów będzie dla Ciebie odpowiedni i możesz go użyć w swojej witrynie. Jeśli jednak nie, i czujesz się sfrustrowany, że niektóre elementy nie wyglądają „tak, jak chcesz”, to nie martw się… tutaj pojawia się ręczne tworzenie własnego niestandardowego szablonu WordPress.

Przyjrzyjmy się i zobaczmy, co można osiągnąć za pomocą niestandardowego szablonu.

Jak ręcznie utworzyć niestandardowy szablon postu WordPress

To, co zrobimy w poniższym samouczku, to utworzenie pojedynczego widoku posta, który jest całkowicie spersonalizowany i zostanie określony we własnym pliku PHP. Dodamy również opcję o nazwie „Mój niestandardowy szablon posta” do rozwijanego menu szablonów w atrybutach posta, która będzie odpowiadać niestandardowemu układowi posta i przedstawiać naszą unikalną strukturę.

Krok pierwszy: wprowadzenie naszego szablonu do WordPress

Aby rozpocząć, musimy utworzyć plik PHP o nazwie na przykład: „my-custom-post.php” w głównym folderze motywu WordPress (w naszym przykładzie znajduje się on w /themes/twentytwenty/).

Otwórz plik w swoim ulubionym edytorze tekstu (np. Sublime) i dodaj zawartość poniżej:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Ta linia * Template Name: My custom post template definiuje nazwę, która będzie wyświetlana w rozwijanym menu szablonu. Spójrz na zrzut ekranu poniżej, a zobaczysz, jak by to wyglądało.

* Template Post Type: post jest opcjonalny i określa typ posta, dla którego szablon będzie wyświetlany jako opcja. Ponieważ zdefiniowaliśmy to jako „post”, ten szablon nie pojawi się w menu opcji szablonu dla strony, jak widać w poniższym przykładzie.

Ostatnia linia: get_header(); ?> get_header(); ?> pobiera zawartość nagłówka.

W tym momencie, jeśli wybierzesz „Mój niestandardowy szablon posta” jako aktywny szablon dla, powiedzmy, naszego posta „Usługa 1”, wynik będzie pusty. To jest to, czego byśmy się spodziewali, ponieważ nie dodaliśmy jeszcze żadnej struktury do strony. Zobaczysz coś takiego:

Dodawanie struktury do naszego niestandardowego szablonu WordPress

Chociaż jest całkowicie możliwe zbudowanie struktury naszej strony całkowicie od podstaw, czasami może być łatwiej wziąć istniejącą strukturę posta, która jest używana w naszym szablonie motywu, a następnie ją zmodyfikować.

Jeśli spojrzymy na hierarchię szablonów WordPress, zobaczymy, że w zależności od motywu szablon pojedynczego posta pochodzi z pliku singular.php lub single.php znajdującego się w folderze motywu.

Dla wyjaśnienia – gdy posty i strony używają tej samej struktury, używany jest plik singular.php, w przeciwnym razie (jak np. w popularnym motywie Astry) zobaczysz pliki single.php, page.php, archive.php, które są zakodowane, aby zapewnić różne struktury odpowiednio dla postów, stron i układów blogów.

W tym przypadku, używając motywu Twenty Twenty, widzimy, że plik singular.php używa funkcji get_template_part do pobrania żądanego układu z folderu template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Powyższy kod sprytnie sprawdza, czy w poście znajduje się treść, a jeśli tak, drukuje treść przy użyciu struktury określonej przez wybrany szablon. Dotyczy to wszystkich przypadków, niezależnie od tego, czy używany jest post, strona czy archiwum.

Teraz możemy zobaczyć, jak nasz motyw pobiera dane układu z istniejących szablonów, jesteśmy teraz gotowi do rozpoczęcia tworzenia własnego szablonu. Aby określić, jak wygląda nasz szablon, najpierw musimy go zaprojektować. Możesz chcieć, aby Twoja strona posta miała układ w następującym formacie:

Gdy już zdecydujesz się na projekt układu, musisz go zakodować za pomocą HTML, CSS i PHP. W tym artykule założono, że masz praktyczną znajomość tych języków i możesz utworzyć wymagany układ. Biorąc powyższy projekt, napisalibyśmy początkowy kod, który dodany do pliku my-custom-post.php będzie wyglądał tak:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Istnieją funkcje skrótów, które nasz motyw Twenty Twenty zapewnia dla meta postu i innych danych, które możemy chcieć opublikować. Zamiast ich używać, użyjemy domyślnych funkcji WordPressa, aby Twój szablon działał na dowolnym motywie. Te, z którymi będziemy pracować, są następujące:

• the_title() – powtarza tytuł posta
• the_excerpt() – powtarza fragment postu
• the_post_thumbnail() – wyświetla domyślny rozmiar miniaturki posta. Możesz użyć opcji the_post_thumbnail(), aby uzyskać określony rozmiar polecanego obrazu
• the_content() – wyświetla treść posta

Jeśli zapiszemy nasze aktualizacje, a teraz spojrzymy na post „Usługa 1”, zobaczymy zastosowany niestandardowy układ szablonu.

Jak utworzyć niestandardowy szablon kategorii postów WordPress

Teraz widzieliśmy, jak stosunkowo łatwo jest stworzyć własny układ szablonu postu, możemy przejść dalej i zastosować podobne zasady, aby stworzyć własny układ widoku kategorii.

Prostym sposobem na to jest bezpośrednia edycja pliku index.php (znajdującego się w naszym katalogu głównym /themes/twentytwenty/). Podczas gdy edytowanie tego pliku bezpośrednio jest w porządku dla celów samouczka, jeśli witryna jest aktywna, możesz użyć motywu podrzędnego, aby upewnić się, że żadne aktualizacje nie zostaną nadpisane przy następnej aktualizacji motywu.

Jeśli spojrzymy na kod index.php, zauważymy, że jest on w większości wypełniony warunkami PHP „if”, które określają dostępne dane wyjściowe w zależności od rodzaju treści. Na przykład poniższy kod sprawdza, czy treść zawiera posty (jest to post, strona lub archiwum) lub czy jest to strona wyników wyszukiwania i odpowiednio wyświetla odpowiednią treść.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Jeśli śledzisz ten samouczek, używając motywu Twenty Twenty, znajdź następujący kod w pliku index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

W pliku template-parts/content.php widzimy, że treść jest pobierana za pomocą funkcji 'get_template_part'.

Zamiast używać tych specyficznych dla motywu funkcji do określania układu naszej strony kategorii postów, zamiast tego użyjemy domyślnych funkcji WordPressa dla każdego elementu. Oznacza to, że zmienimy powyższy kod na następujący:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Jeśli masz orle oko, zobaczysz, że odwołujemy się do pliku o nazwie my-custom-category-view.php , który teraz musimy utworzyć i dodać do folderu naszego motywu (alternatywnym podejściem byłoby dodanie tych informacji bezpośrednio do naszego pliku index.php , ale zapisanie go jako osobnego pliku jest znacznie ładniejsze.

Utwórz plik my-custom-category-view.php i dodaj następujący kod:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Zobaczysz, że byliśmy w stanie użyć bardziej zaawansowanego formatu funkcji the_title() do określenia tytułu posta. Link do strony z pojedynczym postem został wygenerowany za pomocą funkcji get_permalink().

Aby zakończyć, musisz teraz dodać dodatkową stylizację do pliku style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Zobaczmy, co osiągnęliśmy do tej pory:

Miły!

Jak widać, nadal istnieją pewne problemy z dopasowaniem obrazów, ponieważ mają one różne proporcje. Możemy to łatwo naprawić, dodając więcej linii do naszego CSS, aby wyśrodkować obrazy i nadać im stałe wymiary:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

W ten sposób oczywiście nadal używamy oryginalnych obrazów, które niekoniecznie są optymalne z punktu widzenia wydajności. Najlepszą praktyką jest tutaj użycie rozmiarów obrazów WordPress. Jeśli chcesz, aby nowy układ strony był responsywny, zapoznaj się również z tym obszernym przewodnikiem, aby uzyskać więcej informacji.

I to wszystko, dobra robota! Udało Ci się teraz pomyślnie stworzyć własny, spersonalizowany układ i projekt widoku kategorii postów.

Jak stworzyć niestandardowy szablon strony WordPress

Do tej pory stworzyliśmy niestandardowy układ dla naszej strony z wpisami, a także niestandardowy układ dla wyników kategorii. Będziesz mógł zastosować metody używane podczas tworzenia niestandardowego szablonu dla stron, a także dokładnie te same zasady.

Zanim jednak zakończymy ten artykuł, rzućmy okiem na nieco bardziej złożony szablon strony. W tym przykładzie przeciągniemy nasze strony postów do naszego szablonu, abyśmy mogli wyświetlać je tak, jak wyglądałyby na stronie kategorii, ale z dodatkową korzyścią w postaci możliwości edycji oferowanej przez stronę (zamiast strony kategorii) .

Naszym celem będzie utworzenie strony przeglądu „Usługi”, która zawiera listę naszych trzech usług biznesowych (w tym przykładzie Usługa 1, Usługa 2 i Usługa 3). Zamiast ręcznie dodawać je do naszej strony, zostaną one dynamicznie wciągnięte na stronę. Chociaż w praktyce nie musisz się tym martwić, zasady kodowania są przydatne do zrozumienia i dalszego zademonstrowania elastyczności oferowanej przez WordPress.

Aby rozpocząć, utwórz nowy plik w folderze motywu i nazwij go mniej więcej w stylu my-services-template.php . Po wykonaniu tej czynności dodamy teraz kilka niezbędnych komentarzy deklaracji, tak jak to zrobiliśmy wcześniej z szablonem pojedynczego posta. Użyjemy również funkcji get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

Funkcja get_template_part() jest w zasadzie mechanizmem, który pozwala nam ładować fragmenty kodu, które można ponownie wykorzystać. W tym przypadku pobierze zawartość template-parts/content-cat_services.php . W tym pliku wstawimy kod, który wygeneruje posty z kategorii „Usługi”.

Podsumowując, kod w tym pliku będzie:

• Nadaj tytuł stronie kategorii.
• Przeszukuj wpisy z określonej kategorii z bazy danych.
• Przeglądaj posty i wyświetlaj układ dla każdego.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Zapytania omówimy dokładniej w następnym artykule. Na potrzeby tego artykułu musisz wiedzieć, że $args = array( 'cat'=>4, 'orderby' => 'title' ); pobiera kategorię postów o numerze ID 4 (ID=4). Ten numer kategorii, który odnosi się do naszej kategorii „Usługi”.

Jak więc zobaczyć identyfikator dla każdej kategorii? Właściwie jest to całkiem proste. Przejdź do Menu Posty > Kategorie i otwórz dowolną kategorię do edycji. Identyfikator znajduje się w adresie URL strony edycji kategorii, jak pokazano poniżej:

Aby wyświetlić nasz nowy szablon, musimy przejść do Strony i utworzyć nową stronę. W polu edycji strony nie musisz wprowadzać żadnej treści. Zamiast tego wybierz opcję „Mój szablon kategorii postów” w menu rozwijanym Atrybuty strony.

Na koniec przejdź do menu i dodaj element „Usługi” dla naszej nowej strony, aby zastąpić obecny element kategorii Usługi. Menu powinno teraz wyglądać tak

Zobaczmy, co zrobiliśmy:

Powyższa metoda pokazuje, jak utworzyć niestandardowy szablon strony WordPress, który pobiera określoną kategorię (w tym przykładzie nasze „Usługi”). Jeśli wybierzesz ten sam szablon dla innej strony kategorii, ponownie zobaczysz posty w kategorii Usługi, o które poprosiliśmy z identyfikatorem kategorii (ID=4). Tak więc, jeśli chcesz nowy szablon strony, który ciągnie się w innej kategorii, musisz utworzyć osobny plik szablonu, aby to zrobić (i odpowiednio zaktualizować identyfikator kategorii).

Wniosek

Możliwość stworzenia własnego niestandardowego szablonu dla witryny WordPress zapewnia najwyższą kontrolę nad wyglądem witryny. Tworzenie niestandardowych szablonów dla widoku pojedynczego lub kategorii dla typów postów jest warte wysiłku. Nie tylko pozwala to oczywiście na pełną kontrolę nad elementami projektu Twojej witryny, ale także pozwala szybko odtworzyć określony układ na przyszłych stronach.

Zobacz też

• Jak tworzyć niestandardowe szablony WordPress za pomocą kreatorów stron – przewodnik