Polski Blog TemplateMonster

Tworzenie niestandardowego szablonu strony w WordPress 4.x

Dziś opowiem Ci jak stworzyć niestandardową stronę dla witryny na WordPress do wyświetlania nowego rodzaju wpisów czy jakichkolwiek innych treści.

Aby stworzyć prosty szablon strony nie jest wymagana wedza .php. Wszystkie kody trzeba po prostu skopiować i wkleić. Nawet jeśli używasz jednego z domyślnych szablonów WordPress, można wziąć części jego kodu i skompilować je aby stworzyć własny szablon strony.


Czym są szablony stron WordPress?

Na początku było słowo, więc najpierw określmy terminologię. Wygląd witryny WordPress określają motywy. Jakiego koloru użyć do przycisków, po której stronie umieścić pasek boczny, jakiego fontu użyć w tekstach, gdzie umieścić formularz wyszukiwania - wszystkie te instrukcje są gromadzone w motywach.

Szablon strony to php. plik opisujący, jak będzie ona wyglądała Twoja strona. Wszystkie pliki php szablonu są przechowywane w folderze "themes" katalogu "wp-content". Możesz zastosować szablony stron do określonych stron, sekcji strony lub klasy stron. Niektóre strony zawsze powinny wyglądać inaczej niż inne, na przykład strona "O nas". Zwykle kompozycja ma zestaw gotowych stron, które są stosowane automatycznie.

Ale jak WordPress rozumie z jakich php. szablonów stron należy korzystać w każdej sytuacji? Wtedy pojawia się hierarchia szablonów.


Znaczenie hierarchii szablonów

Odwiedzający chciałby przeczytać jeden z Twoich blogów i klika na http://iamawesome.com/blog/category-best/coolpost link. Pierwszą rzeczą, którą sprawdzi WordPress, jest to, czy przypisałeś konkretny niestandardowy szablon strony do tej konkretnej strony, czy nie. Możesz utworzyć dowolną liczbę niestandardowych szablonów stron WordPress i sprawić, aby każda część witryny była unikatowa.

Jeśli nie ma przypisanego pliku, WP szuka szablonu strony kategorii. Będzie wyglądał tak: category-best.php. Ten .php szablon strony definiuje wygląd całej kategorii stron i może określać wygląd dla wielu postów, które opisują ten sam temat.

Jeśli nie chcesz wybierać innego wyglądu dla każdej kategorii i nie ma pliku category1.php, WordPress sprawdzi, jaki jest identyfikator tej kategorii, załóżmy, że to jest 15. WP będzie szukał pliku category-15.php. A jeśli takiego pliku niema, WordPress będzie szukał podstawowego pliku page.php., który określa ogólny wygląd wszystkich stron, które nie były dodatkowo dostosowane.

Ale pliku page.php też może nie być. Jest to bardzo rzadka sytuacja i prawdopodobnie nie spotkasz jej, jeśli będziesz pracował z gotowym motywem, ale jeśli wystąpi taki problem, WordPress znajdzie plik index.php i wyświetli użytkownikowi, cóż, przynajmniej coś. Ten plik jest domyślnym szablonem strony, który definiuje jej podstawowy wygląd.


Tworzenie niestandardowego szablonu strony

Stwórz plik

Przede wszystkim, trzeba stworzyć plik .php w dowolnym edytorze kodu. Ja preferuję korzystać z Notepad ++, ale możesz wykorzystać dowolny inny edytor.


Dodaj nagłówek i stopkę

Każda strona powinna mieć nagłówek i stopkę. Aby wyświetlić je w szablonie strony dodaj następujący kod do stworzonego pliku .php.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
 
<!--?php get_footer(); ?-->

Będzie to wyglądało tak:

Możesz zastąpić nazwę "Custom Page Template" przez własną, aby na pewno wiedziałeś jaki szablon to jest.


Zapisz zmiany i otwórz FTP łub cPanel file manager strony.

Prześlij stworzony plik do wp-content-> themes-> current theme folder.

Teraz można otworzyć kokpit WordPressa i obejrzeć wyniki swojej pracy.


Przejdź do Pages -> Add new. W panelu po prawej stronie, znajdziesz nowy szablon strony.

Co do wyglądu tej strony, jak mogłeś już zauważyć, że jest zupełnie pusta. Jest to dlatego, że dodaliśmy tylko nagłówek i stopkę do pliku szablonu strony. Dodajmy wiąc trochę treści.


Dodwanie dynamicznych treści

Chciałabym aby ta strona wyglądała jak i inne strony witryny, ale również miała pasek boczny.

Przejdź do Appearance -> Editor -> Single Post.php i skopiuj kod wyświetlania zawartości do pliku szablonu strony.

<div id="primary" class="content-area"><!--?php // Start the loop. while ( have_posts() ) : the_post(); // Include the single post content template. get_template_part( 'template-parts/content', 'single' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } if ( is_singular( 'attachment' ) ) { // Parent post navigation. the_post_navigation( array( 'prev_text' => _x( '<span class="meta-nav">Published in</span><span class="post-title">%title</span>', 'Parent post link', 'twentysixteen' ), ) ); } elseif ( is_singular( 'post' ) ) { // Previous/next post navigation. the_post_navigation( array( 'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Next post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', 'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Previous post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', ) ); } // End of the loop. endwhile; ?--> <!-- .site-main --> <!--?php get_sidebar( 'content-bottom' ); ?--></div> <!-- .content-area -->

Aby wyświetlić pasek boczny muszę dodać następujący kod przed fragmentem stopki.

<!--?php get_sidebar(); ?-->

Wygląda to tak:

Obejrzyjmy jak będzie wyglądał szablon po zapisaniu zmian.

 


Niestandardowe szablony stron WordPress do różnych celów

Jak zapewne zrozumiałeś z hierarchii szablonów WordPress, możesz stworzyć szablon strony .php nie tylko dla pojedynczej strony, ale także dla grupy stron. Grupy te mogą być połączone z kategorią lub typem i można tworzyć szablony stron WP, które będą stosowane automatycznie lub wybrane przez ciebie w procesie tworzenia nowej strony. Podejdź bliżej, przyjacielu, opowiem trochę więcej o tym, jak działa ta magia.

Niestandardowy typ strony dla dowolnej strony

Załóżmy, że potrzebujesz pliku .php szablonu WordPress, który będzie dostępny dla każdej strony, którą utworzysz. Przede wszystkim zwróć uwagę na nazwę. Jeśli tytuł szablonu .php zaczyna się od "page-", WordPress zinterpretuje go jako wyspecjalizowany szablon, który powinien zostać użyty dla określonej strony. Spróbuj też wybrać zrozumiałą nazwę, aby po pewnym czasie móc przypomnieć sobie, co jest w środku.

Po utworzeniu niestandardowego szablonu strony należy go pobrać do folderu wp-content/themes/your_theme za pomocą FileZilla lub cPanel. Ta opcja jest dostępna w menu rozwijanym "Atrybuty strony" w panelu admina za każdym razem, gdy chcesz utworzyć lub edytować nową stronę witryny.

Niestandardowy typ stron dla pojedynczej strony

Chciałbyś, aby jedna ze stron statycznych wyglądała inaczej niż inne. Sytuacja, w której wszystkie statyczne strony wyglądają inaczej, jest również możliwa.

Utwórz szablon strony .php, nazwij page-{slug}.php or page-{page’s ID number}.php i prześlij go do bieżącego folderu ze zdjęciami. W takim przypadku WordPress automatycznie użyje tego szablonu tylko dla jednej konkretnej strony, która będzie pasowła do identyfikatora lub slug. Na przykład, chcesz stworzyć stronę Kontakty i załóżmy, że ma ona numer ID 9. Utwórz niestandardowy szablon strony WordPress o nazwie page-contacts.php czy page-9.php, który zostanie zastosowany tylko na stronie Kontakty.

Niestandardowy typ stron dla wpisów

Teraz utworzyłeś niestandardowy szablon strony, ale chcesz, aby Twoje wpisy wyglądałli dokładnie tak samo. W takim przypadku zmiana nazwy nie pomoże, musisz dodać dodatkowy wiersz kodu do tego szablonu. Wpisz “Template Post Type: post, page“ tuż pod wierszem Nazwa szablonu. Będzie wyglądało to tak:

W ten sposób możesz dodawać wydarzenia i inne rodzaje treści,. Muszę jednak przyznać, że ta metoda zadziała tylko wtedy, gdy twój WordPress ma wersję 4.7 i nowszą. Starsze wersje będą ignorowały wiersz Template Post Type.


Dlaczego znaczniki warunkowe są wspaniale?

Wcześniej opisałem, jak utworzyć zupełnie nowe szablony stron .php, ale co zrobić, jeśli chcesz wprowadzić zmiany do już istniejącego? Zdarzają się sytuacje, w których potrzebujesz czegoś, aby pokazać je tylko wtedy, gdy spełniony jest warunek, więc nie chcesz tworzyć strony, która różni się od innych tylko w jednym małym szczególe lub tylko w jednej konkretnej sytuacji.

Dlatego tagi warunkowe są takie fajne. Używasz ich w linii kodu, który sprawdza, czy spełniony jest jakiś warunek, czy nie. Jeśli jest spełniony, pierwsza część kodu nadal działa, a jeśli nie, część po "else" jest wykonywana. Na przykład chciałbyś, aby określony typ paska bocznego był pokazywany użytkownikom, którzy przeszli do strony do Archiwum. Twój kod będzie wyglądał tak:

Oto lista najczęściej używanych tagów warunkowych:


Funkcje szablonu strony

Kopiowanie i wklejanie kodu z gotowego szablonu strony jest łatwym i szybkim sposobem na stworzenie niepowtarzalnego wyglądu, ale co oznacza cały ten kod? Oczywiście, twórcy stron internetowych poznają wszystkie te rzeczy w PHP i dokładnie wiedzą, jakich funkcji użyć, jak z nich korzystać i kiedy. Jeśli jednak to czytasz, nie jesteś programistą, albo przynajmniej nie posiadasz ewystarczająco dużu umiejętności technicznych. Ponieważ mówimy o maksymalnej sile lub o pełnej kontroli nad Twoją witryną, nie możemy przegapić tagów szablonów.

WordPress wykorzystuje wiele różnych funkcji PHP, a te, które są używane tylko w celach tematycznych, nazywa się Tagi szablonów. Widzieliście je już podczas tworzenia pierwszego szablonu strony get_header() i get_footer() to tagi szablonów. Nie będę mówić o wszystkich istniejących znacznikach, jest ich zbyt wiele, ale przejdźmy przez te, które na pewno spotkasz podczas projektowania strony.

get_header(), get_footer(), get_sidebar()

Te trzy tagi szablonów dodają nagłówek, stopkę lub pasek boczny do niestandardowego szablonu strony WordPress. Te części są zaczerpnięte z tematu, z którego obecnie korzystasz. Jeśli chcesz użyć określonego nagłówka, stopki lub paska bocznego dla tej strony, wpisz jego nazwę w breckets. Na przykład, aby użyć pliku nagłówkowego-superstar.php, potrzebujesz znacznika szablonu get_header ( `superstar` ).

get_template_part()

Ten dodaje także pewną część jakiegoś już stworzonego szablonu do Twojego szablonu.php. Różnica polega na tym, że jeśli breckets pozostaną puste - nic nie zostanie dodane. Zwykle ten znacznik szablonu służy do przenoszenia części kodu z obiektu nadrzędnego na podrzędny.

get_search_form()

Będziesz potrzebował tego tagu, aby przefaksować formularz wyszukiwania na pasku bocznym. Widżety wyszukiwania również zwykle używają tego tagu szablonu. Lokalizuje search_form.php w folderze motywu, a następnie dodaje go do niestandardowego szablonu strony.

get_page_template()

Ta funkcja pobiera hasło do aktualnie używanego szablonu zgodnie z hierarchią szablonów.

wp_login_form()

Jeśli breckets są puste, ta funkcja dodaje prosty formularz logowania WordPress do niestandardowego szablonu strony. Jeśli chcesz użyć jakiegoś konkretnego formularza, wpisz jego nazwę w nbreckets w taki sam sposób, jak w przypadku znacznika szablonu get_header().

get_calendar()

Wyświetla kalendarz na stronie. Będzie stylizowany według aktualnego tematu. Możesz również dodać zmodyfikowany kalendarz zgodnie ze swoimi upodobaniami - po prostu wpisz jego nazwę w nawiasach w ten sam sposób, co w przypadku oryginalnego paska bocznego lub stopki.

To wystarczy, jeśli nie pałnujesz uczyć się PHP. W WordPress znajduje się ponad setka tagów, więc myślę, że nawet guru zajmujący się tworzeniem stron internetowych używają sheets. Jeśli jesteś naprawdę zainteresowany dalszą nauką odwiedź WordPress Codex


Tworzenie przydatnych szablonów stron

Terz możesz dostosować każdą część swojej witryny. Możesz tworzyć szablony stron WP dla każdej strony aby wyglądała unikalną i skomplikowaną. Jednak po pierwszej fali euforii dochodzisz do prostego pytania - jakie strony będą przydatne na mojej stronie?

Strona błędu 404

Nikt nie lubi tej strony, ponieważ sprawia, że czujesz się idiotą. Jednak jej projekt może spowodować, że użytkownik odejdzie lub wróci do wyszukiwania jeszcze raz. Strona "404" musi posaidać link do Twojej strony deomowej i formularz wyszukiwania, który zachęci użytkownika do pozostania w Twojej witrynie. Czy to nie jest fajne, że teraz wiesz, jak to zrobić?

Strona "O nas" z listą członków zespołu

Strona "O nas" jest jedną z najczęściej odwiedzanych w Twojej witrynie. Ludzie lubią wiedzieć, z kim się komunikują. Jest to bardzo ważna część Twojej witryny i potrzebuje ona unikalnego niestandardowego szablonu. To będzie naprawdę wspaniałe, jeśli wszyscy członkowie zespołu będą wymienieni w dokładnej tabeli. Utworzenie takiej funkcji nie będzie trudne - możesz ją skopiować ze strony TwentyFourteen, która została wcześniej przygotowana.

Spersonalizowana strona główna archiwum

Twoim celem jest, aby użytkownik odwiedził największą liczbę stron. Dlatego Twój archiwum musi zawierać linki do najnowszych wpisów z różnych kategorii i przyciągać uwagę odwiedzających. Powinien nie tylko wyświetlać dostępne kategorie i znaczniki, które są nudne. Dobrym pomysłem będzie pokazanie top-5 najpopularniejszych postów lub artykułów losowych.

Strona kontaktowa z formularzem kontaktowym

Oczywiste jest, że czytelnicy Twojego blogabędą chcili skontaktować się z Tobą. Zapewnienie łatwego sposobu na to - Twój obowiązek jako właściciela strony. Upewnij się, że na stronie kontaktów znajduje się nie tylko Twój telefon i adres e-mail, umieść na niej formularz kontaktowy i dodaj mapę Google ze wskaźnikiem lokalizacji.

Alfabetyczna mapa strony

Jeśli na Twoim blogu jest wiele artykułów, powinieneś utworzyć mapę witryny. To jest strona z listą wszystkich opublikowanych i opublikowanych postów. Byłoby bardzo dobrze, gdyby wszystkie te posty były zorganizowane w pewnej kolejności.


10 najlepszych motywów WordPress

Pixila – uniwersalny biznesowy motyw WordPress

Pobierz | Demo

Pixila to profesjonalny motyw WordPress dla tworzenia stron firmowych. On należy do następnej generacji sprzedawanych przez nas produktów cyfrowych. Jego wielofunkcyjność i nowoczesny design sprawiają, że templatka wyróżnia się wśród innych produktów kolekcji. Motyw Pixila świetnie nadaje się do realizacji projektów studiów cyfrowych, start-upów i innych stron biznesowych.

Oto są niektóre z zalet templatki:

Stwórz swoją przyszłość w inteligentny sposób. Masz własny motyw WordPress do realizacji niesamowitych projektów


SEOMarket – Motyw WordPress dla stron na temat SEO

Pobierz | Demo

SEOMarket to idealne rozwiązanie dla agencji oferujących usługi SEO! Do edycji szablonu WordPress możesz używać Elementor, który zapewnia łatwą i szybką modyfikację i dostosowywanie strony. Oprócz tego dostaniesz świetny bonus od Zemez: otrzymujesz wszystkie obrazy z demo za darmo. Dodatkowe wtyczki do Elementora JetElements i JetMenu także są wliczone w cenę. Tworzenie szablonu WordPress jest dużo łatwiejsza za pomocą tych wtyczek. Możesz umieszczać na stronę dodatkowe elementy: banery, animowane boxy i teksty, tabele cenowe, suwaki dla postów, cykliczne paski postępu, itp. Także masz do wyboru układy, które pozwolą uporządkować treści w najbardziej atrakcyjny sposób.

Motyw SEOMarket zawiera również Popup Manager – świetną wtyczkę do przyszłych kampanii marketingowych. Pozwala na umieszczenie nieograniczonej liczby wyskakujących okienek i dodanie ich do dowolnej strony.


SEOmix - motyw WordPress dla agencji SEO

Pobierz | Demo

SEOmix to kolejny motyw do tworzenia niestandardowych stron internetowych w temacie SEO. On został realizowany przez zespół Zemez. Projekt jest dość prosty, ale własny szablon WordPress zawiera wszystko, co potrzebne do stworzenia eleganckiej strony internetowej. Wraz z wtyczką JetElements i darmowymi obrazami, sprzedawca dodał jako bonus wtyczkę Booked Appointment. Za jej pomocą umawianie spotkań online jest łatwiejsze niż kiedykolwiek.

Ten responsywny motyw SEOmix ma siedem pięknych nagłówków, trzy różne stopki i cztery układy dla blogu. Za pomocą wtyczki Cherry Popups możesz dodać wyskakujące okienka według własnego uznania: wybierz kolor, rozmiar, emblematy i lokalizację okna.

Jak zrobić szablon WordPress jeszcze bardziej rozbudowanym? Skorzystaj z innych wtyczek do tego systemu. SEOmix jest kompatybilny z nimi.


ProMotionic - motyw WordPress dla agencji promocyjnej

Pobierz | Demo

ProMotionic to stylowy motyw dla osób, które nie mają czasu na zajmowanie się złożonymi dostosowaniami strony. Nie musisz poszukiwać odpowiedzi na pytanie jak stworzyć szablon WordPress. Najnowszy edytor stron Elementor pozwala realizować niesamowite projekty za pomocą metody „Przeciągnij i upuść”. Taka funkcjonalność pozwala Ci wypełnić witrynę odpowiednią treścią i zorganizować ją w niezbędny sposób.

Własny motyw WordPress jest wyposażony w dodatkowe funkcje, takie jak szybki podgląd produktu, mega menu, opcje tła, fonty Google itp. Templatka wspiera wtyczkę MailChimp, co pozwala zarządzać newsletterami przez panel administracyjny. ProMotionic pozwala wraz ruszyć ze stroną bez spędzenia czasu na edycję szablonu WordPress.


Conceptum – responsywny motyw WordPress dla stron biznesowych

Pobierz | Demo

Zamierzasz się tworzyć niestandardową stronę internetową dla biznesu? Użyć Conceptum – elegancki motyw zawierający Visual Composer. Ten edytor wizualny oferuje wybór między dwoma koncepcjami modyfikacji witryny: edycją frontendową (tak jak oferuje to Elementor) i edycją backendową.

Własny szablon strony do WordPress zawiera wtyczkę Max Mega Menu, która pozwala na stworzenie przyjaznego dla użytkownika menu, zmianę jego struktury, stylu, koloru, dodawanie elementów itp. Max Mega Menu to doskonała wtyczka do szybkiego tworzenia nawigacji do strony.

Kupując motyw Conceptum otrzymujesz również pakiet WooCommerce z sześcioma dodatkowymi widżetami (TM Products Carousel, TM Products SmartBox, TM About Store, TM Products Categories z miniaturami i niestandardowe menu) do organizowania treści na różne sposoby.

Dodatkowo ten resposnywny motyw posiada pięć przyciągających wzrok nagłówków, trzy różne stopki i cztery układy dla bloga.


Advezone - motyw WordPress dla doradców finansowych

Pobierz | Demo

Poszukujesz stylowy motyw do tworzenia strony w temacie finansowym? Skorzystaj z Advezone. On jest w pełni responsywny, zawiera projekt strony głównej, pracy technicznej na serwerze, usług, projektów i blogów z bezpłatnymi obrazami, które można pobrać wraz z własnym szablonem WordPress.

Templatka zawiera również stronę „Referencje”, na której będą umieszczane recenzje Twoich klientów. Dzięki temu możesz powiedzieć o kompetencjach pracowników i zachęcić internautów do nawiązywania kontaktów.  Za pomocą Elementora nie musisz wiedzieć nic o tworzeniu szablonów WordPress. Edycja projektu i treści odbywa się w trybie wizualnym.


Finscore – responsywny motyw WordPress o temacie finansowym

Pobierz | Demo

Jeśli potrzebujesz strony internetowej do promocji swojej firmy doradczej w Internecie, Finscore jest idealnym rozwiązaniem. Dostaniesz własny motyw WordPress, który pomoże szybko stworzysz witrynę www i nie będziesz mieć problemów ze zmianą projektu i późniejszym dodaniem lub usunięciem treści.

Szablon zawiera sześć dobrze zaprojektowanych projektów strony głównej, siedem funkcjonalnych nagłówków, trzy stopki i cztery układy dla blogów. Oprócz gotowych projektów stron, Finscore oferuje ciekawe widżety. Także możesz zainstalować popularne wtyczki i zrobić szablon WordPress pod własne wymagania.


Grandviz – firmowy motyw WordPress Premium

Pobierz | Demo

Grandviz to stylowe rozwiązanie do tworzenia niestandardowych stron firmowych. Jego projekt na pewno przypadnie do gustu osobom interesującym się finansami, doradztwem oraz biznesem.

Wraz ze standardowym zestawem rozszerzeń, takich jak wtyczki Elementor, JetMenu i Cherry, Grandviz posiada efekt paralaksy, który zmienia widoczną pozycję obiektu względem odległego tła, w zależności od pozycji obserwatora. Aby projekt własnego szablonu WordPress był jeszcze piękniejszy, możesz dodać ikony Premium, które są wliczone w cenę.


Riseon – uniwersalny motyw WordPress

Pobierz | Demo

Ten uniwersalny motyw zawiera ponad dziesięć szablonów dla różnych kierunków biznesowych. Za pomocą Riseone stworzysz strony internetowe dla firm usługowych, doradczych, marketingowych, reklamowych, biurowych, outsourcingowych, architektonicznych, budowlanych oraz samochodowych.

Edycja szablonu WordPress będzie prosta i łatwa. Udostępniaj przydatne informacje na swoim blogu za pomocą dodatkowych widgetów. Pozwól swoim klientom zostawiać referencje i komentować Twoje posty za pomocą systemu komentowania. Zaoferuj odwiedzającym subskrypcję na newsletter za pomocą odpowiedniej formy. Korzystaj z cudzych wtyczek, aby stworzyć szablon WordPress, który spełni wszystkie Twoje potrzeby. Templatka jest kompatybilna z rozszerzeniami umieszczonymi na wordpress.org.


Primrose – uniwersalny motyw WordPress

Pobierz | Demo

Kolejny uniwersalny motyw z oferty TemplateMonster. Primrose to bestseller na marketplace, który będzie pasował do tworzenia niestandardowych stron biznesowych, portfolio modelek, fotografów, stylistów fryzur i klubów jogi. Własny szablon WordPress zawiera imponujący zestaw funkcji, które pomogą zbudować odpowiednie typy witryn. Dzięki Visual Composer, setek fontów i ikon edycja szablonu odbywa się szybko. Nie musisz posiadać umiejętności programistycznych, aby dostosować wybrany projekt do potrzeb biznesu.


Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create a Custom Page Template in WordPress 4.x?.