Przeanalizujmy i wypełnijmy plik Index php WordPress, zapoznajmy się z niektórymi funkcjami i przenieśmy część szablonu HTML do pliku Index.php WordPress

W ostatnim artykule przenieśliśmy część projektu ze statycznego pliku HTML do szablonu WordPress, wypełniając tym samym plik header.php. Teraz nadszedł czas, aby przeanalizować zawartość standardowego pliku Index.php WordPressa i przenieść trochę więcej układu z HTML do WP.

Zawartość standardowego pliku indeksu php WordPress

Zanim przystąpisz do wypełniania pliku Index.php, najlepiej będzie pokrótce wyjaśnić jak on działa i jaką funkcję pełnią zawarte w nim funkcje.

Standardowy plik indeksu php WordPress z motywu Twenty Twelve 1.8

Wykorzystamy go jako podstawę dla pliku Index.php naszego motywu Start WP.

W kodzie wycinam opis jedynie w celu jego skrócenia. Zatem teraz w kolejności:

Dołącza plik header.php do pliku Index.php, łącząc w ten sposób nasz szablon w jedną całość.

Znacznik warunkowy sprawdzający, czy dla bieżącego żądania istnieją publikacje. Czytaj dalej i zobacz, co zostanie wyświetlone, jeśli nie będzie odpowiednich postów.

Jeśli jest coś do wyprowadzenia, pętla rozpoczyna się

Do wyświetlania stron i postów potrzebne są pętle w WordPressie. W zależności od strony, na której znajduje się odwiedzający, pętla zwróci odpowiednią treść z bazy danych.

Na przykład, jeśli odwiedzający znajduje się na stronie głównej, zostanie wyświetlona treść określona w konsoli ustawień. Albo jest to strona statyczna, albo posty. Jeśli odwiedzający znajduje się na stronie kategorii, wyświetlane są wpisy odpowiadające tej kategorii. Jeśli odwiedzający znajduje się na stronie z postem, wyświetli się sam post i tak dalej.

/* Uruchom pętlę */ — Tylko komentarz, twórcy motywu zaznaczyli początek pętli. I jest to odpowiednio tłumaczone jako „początek cyklu”.

póki (have_posts()): the_post(); — Początek cyklu

get_template_part("treść", get_post_format()); — Wyświetlana jest zawartość strony content.php, czyli zawartość pętli (z tą treścią zapoznamy się później).

Treść cyklu może składać się z tytułu wpisu, kategorii, strony, samej treści, daty, nazwy kategorii, tagów, autora i tak dalej.

Funkcja nawigacji strony.

O tym właśnie pisałem powyżej. Jeśli nie ma treści odpowiednich dla żądania odwiedzającego, wówczas rozpoczyna się wyświetlanie różnych, nazwijmy je pomocniczymi, szablonów i funkcji serwisowych.

Na przykład Pokaż różne wiadomości dla zarejestrowanego użytkownika, który może dodawać wpisy:

To jest koniec znacznika sprawdzania warunkowego, pierwszego w kodzie Have_posts(). Podobnie jak tag zamykający w HTML, tylko tutaj oznacza koniec funkcji.

Funkcje wywołujące odpowiednio pasek boczny i stopkę szablonu.

Tworzenie głównego znacznika pliku Index.php WordPress

Dość teorii, zacznijmy oznaczać nasz szablon Start WP. Ponieważ tworzymy witrynę przy użyciu siatki Bootstrap, musimy odpowiednio oznaczyć wszystkie pliki. Zaznaczyliśmy już plik header.php i nawet go wypełniliśmy, teraz czas przejść do pliku Index.php

Otwórzmy plik Index.php naszego motywu i dodajmy do niego standardową zawartość. Skopiuj podany kod i wklej go do pliku indeksu. Wystarczy, że zostawisz nasz opis z poprzednich zajęć.

Po wklejeniu kodu WordPress wyświetli następujący błąd:

Zwróć uwagę na frazę kluczową, którą podaje nam serwer - Wywołanie niezdefiniowanej funkcji dwadzieściatwelve_content_nav() Oznacza to, że na stronie jest wywołanie funkcji, ale serwer sam nie może jej znaleźć. Jest to wywołanie funkcji paginacji, ale ponieważ nie zapisaliśmy jej jeszcze w plikufunctions.php, po prostu skomentuj ją w ten sposób:

Teraz błąd został naprawiony, a samą funkcję napiszemy później.

Usuńmy to na razie całkowicie lub jeszcze lepiej skomentujmy cały cykl WordPressa w ten sposób:

I zaraz poniżej

Umieśćmy nasz znacznik HTML ze źródeł:

Nie publikowałem całego kodu, jest dość duży, wszystko jest oznaczone komentarzami w kodzie źródłowym. Zobacz zrzuty ekranu.

Później rozrzucimy ten fragment kodu do różnych plików, zastępując niektóre funkcjami WordPresa. Na razie powinno to wyglądać tak, bez paska bocznego i stopki.

WordPress to łatwy narkotyk w świecie tworzenia stron internetowych. Wiele osób, które zaczęły korzystać z tej platformy, początkowo szukało łatwego (i bezpłatnego) sposobu na stworzenie prostej strony internetowej. Wszystko to można zrobić za pomocą odrobiny Googlingu i porad zawartych w kodeksie WordPress. Krótko mówiąc: „Chciałem po prostu spróbować i wszystko się udało”.

Jednak wielu użytkowników nie poprzestaje na prostej znajomości. Zamiast tego zaczynają aktywnie korzystać z systemu. Wpadają na kolejne pomysły. Eksperymentują. Próbuję nowych wtyczek. Otwórz Firebuga. Wszystko. Punkt bez powrotu został już przekroczony. Zgadzasz się, czy to jest podobne do Twojej historii? To normalne, że użytkownicy WordPressa chcą coraz więcej aspektów zarządzania swoją witryną. Chcesz unikalnego projektu, sprawdzonej funkcjonalności, personalizacji wszystkich szczegółów.

Na szczęście WordPress został zaprojektowany właśnie do tego. Jego elastyczna struktura i modułowa architektura pozwalają każdemu zmienić niemal wszystko na swojej stronie internetowej.

Do najważniejszych narzędzi umożliwiających pełne zarządzanie stroną internetową należą szablony stron. Pozwalają użytkownikom radykalnie zmienić wygląd i funkcjonalność swojej witryny internetowej. Chcesz zrobić zupełnie inny nagłówek dla swojej strony głównej? Łatwo. Dodatkowy pasek boczny, który pojawi się tylko na stronie bloga? Bez problemu. Unikalna strona 404? Proszę!

Jeśli chcesz dowiedzieć się, jak szablony stron WordPress mogą pomóc Ci rozwiązać te problemy, czytaj dalej. Najpierw jednak podamy kilka podstawowych informacji potrzebnych do zrozumienia działania szablonów stron w WordPressie.

Szablony WordPressa

Co mamy na myśli, mówiąc o szablonach w kontekście WordPressa? Krótko mówiąc, szablony to pliki, które mówią WordPressowi, jak wyświetlać różne typy treści.

Aby wyjaśnić bardziej szczegółowo: za każdym razem, gdy ktoś prosi o wyświetlenie części Twojej witryny, platforma WordPress określa, jaką treść użytkownik chce otrzymać i jaka część Twojej witryny powinna zostać wyświetlona.

WordPress spróbuje następnie użyć najbardziej odpowiedniego szablonu dostępnego w Twoim motywie dla tej części witryny. Który dokładnie zależy od hierarchii szablonów WordPress. Możesz zobaczyć, jak wygląda ta hierarchia na zrzucie ekranu poniżej.

Hierarchia szablonów to lista znanych plików szablonów WordPress, których ranking określa, który plik ma najwyższy priorytet.

Można myśleć o tej hierarchii jako o drzewie decyzyjnym. Kiedy WordPress próbuje zdecydować, jak wyświetlić bieżącą stronę, przechodzi w dół hierarchii szablonów, aż znajdzie pierwszy szablon pasujący do żądanej strony. Na przykład, jeśli ktoś spróbuje uzyskać dostęp do http://yoursite.com/category/news, WordPress będzie szukać pasującego szablonu w następującej kolejności:

1. kategoria-(slug).php: w tym przypadku kategoria-news.php
2. kategoria-(id).php>: Jeśli identyfikator kategorii wynosi 5, WordPress spróbuje znaleźć plik o nazwie kategoria-5.php
3. kategoria.php
4. archiwum.php
5. indeks.php

Na samym dole hierarchii znajduje się plik Index.php. Służy do wyświetlania dowolnej treści, która nie posiada specjalistycznego szablonu. Jeśli szablon znajduje się wyżej w hierarchii, WordPress automatycznie użyje go do wyświetlenia żądanej treści.

Szablony stron i ich zastosowania

W przypadku stron standardowym szablonem jest plik page.php. Jeśli nie jest dostępny lepszy szablon (np. Archive.php dla stron archiwum), WordPress użyje page.php do wyświetlenia zawartości wszystkich stron w Twojej witrynie.

Jednak w większości przypadków istnieje potrzeba zmiany wyglądu, wyglądu i funkcjonalności poszczególnych sekcji serwisu. W tym przypadku stosowane są szablony stron. Niestandardowe szablony stron umożliwiają dostosowanie dowolnej części witryny bez wpływu na resztę.

Być może widziałeś już to w akcji. Na przykład wiele współczesnych motywów WordPress ma opcje wyświetlania stron na pełnym ekranie, dodawania dodatkowego paska bocznego lub zmiany jego lokalizacji itp. Wszystko to jest zwykle realizowane za pomocą szablonów. Można to zrobić na kilka sposobów. Przyjrzymy się im dalej.

Na początek jednak jedna uwaga: ponieważ praca z szablonami wiąże się z edycją i modyfikowaniem aktywnych plików motywów, zalecamy użycie motywu podrzędnego w celu wprowadzenia tych zmian. W ten sposób Twoje zmiany nie zostaną nadpisane po aktualizacji motywu nadrzędnego.

Jak zmienić dowolną stronę w WordPress

Istnieją trzy główne sposoby korzystania z niestandardowych szablonów stron w WordPress: dodawanie instrukcji warunkowych do istniejącego szablonu; utworzenie szablonu dla konkretnej strony, która będzie zajmowała wyższą pozycję w hierarchii; jak również bezpośrednie przypisanie szablonów do konkretnych stron. Przyjrzymy się po kolei każdej z tych metod.

Używanie znaczników warunkowych w szablonach standardowych

Najłatwiejszym sposobem wprowadzenia zmian na pojedynczej stronie jest użycie tagów warunkowych w jej szablonie. Jak sama nazwa wskazuje, znaczniki te służą do tworzenia funkcji, które są wykonywane dopiero po spełnieniu warunku. W kontekście szablonów stron wygląda to tak: „Wykonaj akcję X tylko na stronie Y”.

Zazwyczaj tagi warunkowe są dodawane do szablonu page.php motywu (chyba że chcesz zmienić inną część witryny). Pomagają we wprowadzaniu zmian tylko na stronie głównej, stronie wzorcowej, stronie bloga lub dowolnej innej stronie Twojej witryny.

Oto kilka typowych tagów warunkowych:

1. is_page(). Wskazuje konkretną stronę. Można go używać z identyfikatorem, tytułem i adresem URL/tytułem.
2. is_home(): Dotyczy strony głównej.
3. is_front_page(): Dotyczy strony głównej Twojej witryny, zgodnie z ustawieniem w Opcje - Czytanie.
4. is _category(): Warunki strony kategorii. Można go używać z identyfikatorem, tytułem, adresem URL/tytułem, podobnie jak tag is_page().
5. is_single(): dla pojedynczych postów i załączników
6. is_archive(): warunek dla stron archiwum
7. is_404(): Dotyczy tylko stron 404

Na przykład, jeśli dodasz page.php do szablonu zamiast standardowej funkcji get_header(); poniższy kod, podczas wyświetlania strony http://yoursite.com/products otrzymasz niestandardowy nagłówek o nazwie header-shop.php.

If (is_page("produkty")) ( get_header("sklep"); ) else ( get_header(); )

Dobrym przykładem użycia tego kodu jest sytuacja, gdy masz sklep na swojej stronie i chcesz wyświetlić inny obraz nagłówka lub zmodyfikowane menu na stronie sklepu. Możesz wprowadzić odpowiednie zmiany w pliku header-shop.php, aby mieć pewność, że wszystko to pojawi się w Twojej witrynie.

Jednak tagi warunkowe nie są ograniczone tylko do jednej strony. Możesz ustawić kilka warunków jednocześnie:

If (is_page("produkty")) ( get_header("sklep"); ) elseif (is_page(42)) ( get_header("about"); ) else ( get_header(); )

W tym przykładzie ustawiliśmy dwa warunki, które zmienią zachowanie różnych stron w Twojej witrynie. Oprócz wczytania nagłówka dla sklepu wspomnianego już powyżej, ładujemy header-about.php na stronę o ID 42. Dla wszystkich pozostałych stron wyświetli się standardowy nagłówek.

Tworzenie szablonów stron w hierarchii szablonów WordPress

Tagi warunkowe to świetny sposób na wprowadzenie niewielkich zmian w szablonach stron. Oczywiście można tworzyć większe modyfikacje w oparciu o kilka instrukcji warunkowych. Uważam to rozwiązanie za bardzo kłopotliwe i niewygodne, dlatego zamiast tego zdecydowałbym się na tworzenie niestandardowych szablonów.

Jednym ze sposobów, aby to zrobić, jest użycie hierarchii szablonów WordPress. Jak już widzieliśmy, WordPress przejrzy listę wszystkich możliwych szablonów i wybierze pierwszy szablon pasujący do żądanej strony. W przypadku stron hierarchia wygląda następująco:

• Niestandardowe szablony stron
• strona-(ślimak).php
• strona-(id).php
• strona.php
• indeks.php

Najpierw pojawiają się dowolne szablony stron, które zostały bezpośrednio przypisane do tej strony. Jeśli istnieje co najmniej jeden taki szablon, WordPress użyje go niezależnie od istnienia innych szablonów. O niestandardowych szablonach stron porozmawiamy później.

WordPress następnie poszuka szablonu strony zawierającego błąd dla danej strony. Na przykład, jeśli do plików motywu dołączysz plik page-about.php, WordPress użyje tego pliku do wyświetlenia Twojej strony Informacje lub dowolnej innej strony znajdującej się pod adresem http://www.yoursite.com/about .

To samo możesz osiągnąć, podając identyfikator swojej strony. Na przykład, jeśli ta sama strona ma identyfikator 5, WordPress użyje szablonu page-5.php, jeśli istnieje; Stanie się tak tylko wtedy, gdy w hierarchii nie będzie żadnych szablonów stron o wyższym priorytecie.

Możesz znaleźć identyfikator dowolnej strony, po prostu najeżdżając kursorem na jej tytuł w sekcji Wszystkie strony zaplecza WordPress. Identyfikator będzie znajdował się w linku wyświetlonym przez Twoją przeglądarkę.

Łączenie niestandardowych szablonów stron

Oprócz szablonów, których WordPress może używać automatycznie, zawsze możesz dołączyć niestandardowe szablony do różnych stron. Jak zapewne wiesz z hierarchii szablonów, szablony niestandardowe mają najwyższy priorytet.

Podobnie jak w przypadku łączenia szablonów z określonymi stronami, musisz utworzyć szablon i połączyć go ze stroną, do której planujesz go używać. To drugie można wykonać na dwa sposoby, które być może już znasz. Na wszelki wypadek pokażemy Ci, jak to zrobić.

Łączenie niestandardowego szablonu strony za pomocą edytora WordPress

W edytorze WordPress znajdziesz pole o nazwie Atrybuty strony. Zawiera listę szablonów.

Z tej listy możesz wybrać dowolne dostępne szablony WordPress. Po prostu wybierz odpowiedni szablon, a następnie zapisz lub odśwież stronę.

Ustawianie niestandardowego szablonu poprzez szybką edycję

To samo można zrobić bez wchodzenia do edytora WordPress. Przejdź do sekcji Wszystkie strony i najedź kursorem myszy na dowolny element listy. Na ekranie pojawi się menu zawierające opcję szybkiej edycji.

Kliknij tę pozycję, aby edytować parametry strony bezpośrednio z listy. Zobaczysz to samo menu rozwijane, w którym możesz wybrać szablon strony. Wybierz szablon i zaktualizuj stronę. Gotowy.

Nie takie trudne, prawda? Co jednak, jeśli nie masz jeszcze niestandardowego szablonu strony? Jak to stworzyć? Nie martw się, omówimy to w następnej sekcji.

Przewodnik krok po kroku dotyczący tworzenia niestandardowych szablonów stron

Tworzenie niestandardowych szablonów stron nie jest skomplikowanym procesem, ale należy wziąć pod uwagę kilka szczegółów. Przyjrzyjmy się temu procesowi krok po kroku.

1. Szukamy standardowego szablonu.

Dobrym sposobem na rozpoczęcie tworzenia niestandardowego szablonu strony jest skopiowanie szablonu, który jest już używany dla żądanej strony w motywie. Łatwiej jest zmienić istniejący kod, niż napisać całą stronę od zera. W większości przypadków będzie to plik page.php.

Jeśli nie jesteś w stanie określić, który szablon jest używany na danej stronie, możesz skorzystać z wtyczki What The File.

Jako przykład użyję motywu Twenty Twelve. Tak wygląda w nim standardowy szablon strony:

Jak widać nic ciekawego: zwykłe wywołania nagłówka i stopki, a także pętla w środku. Strona będzie wyglądać następująco:

1. Skopiuj i zmień nazwę szablonu

Po zdefiniowaniu standardowego szablonu będziemy musieli go skopiować. Duplikat wykorzystamy do wprowadzenia niezbędnych zmian na naszej stronie. Będziemy musieli także zmienić jego nazwę.

Możesz nazwać plik jak chcesz. Najważniejsze jest to, że nie zaczyna się od zarezerwowanych nazw plików motywu. Nie powinieneś nazywać pliku page-coś.php lub czegoś podobnego, ponieważ WordPress pomyśli, że jest to niestandardowy szablon.

Najlepiej nazwać plik tak, aby oddawał istotę szablonu. Na przykład mój-niestandardowy-template.php. W naszym przypadku nazwiemy go niestandardowym plikiem-full-width.php.

1. Zmiana tytułu szablonu

Teraz musimy powiedzieć WordPressowi, że ten nowy plik jest niestandardowym szablonem strony. Aby to zrobić, po prostu dostosujemy nagłówek pliku:

Nazwa szablonu pojawi się w sekcji Atrybuty strony na stronie edytora WordPress. Upewnij się, że zmieniłeś go na własny.

1. Konfigurowanie kodu.

Teraz czas na pracę z kodem szablonu. W naszym przykładzie usuniemy pasek boczny ze strony demonstracyjnej.

Jest to stosunkowo łatwe do zrobienia - po prostu usuń get_sidebar(); z szablonu strony. W rezultacie mój szablon wyglądał następująco:

1. Ładowanie szablonu strony

Po zapisaniu zmodyfikowanego pliku musimy wgrać go na stronę. Niestandardowe szablony stron można przechowywać w różnych miejscach:

• Folder z Twoim aktywnym (podrzędnym) motywem
• Folder z głównym motywem nadrzędnym
• Podfolder w folderze z dowolnym motywem (zarówno nadrzędnym, jak i podrzędnym)

Wolę utworzyć folder page_templates w motywie podrzędnym i umieścić tam wszystkie niestandardowe szablony. To dla mnie najłatwiejszy sposób uzyskania dostępu do zmodyfikowanych plików.

1. Aktywacja szablonu

Ostatni krok: musimy aktywować szablon strony. Jak wspomniano wcześniej, odbywa się to w sekcji Atrybuty strony → Szablony edytora WordPress. Zapisujemy, przeglądamy stronę - i widzimy nasz nowy szablon w akcji (bez paska bocznego):

Nie takie trudne, prawda? Nie martw się, w mgnieniu oka będziesz mógł udoskonalić swoje umiejętności tworzenia szablonów. Aby dać Ci wyobrażenie o tym, jak dokładnie można wykorzystać te szablony, pokażę Ci kilka interesujących przypadków użycia.

Pięć różnych sposobów korzystania z szablonów stron

Jak wspomniano wcześniej, szablony stron mogą być wykorzystywane do różnych celów. Możesz dostosować prawie każdy obszar na dowolnej stronie. Jedyną przeszkodą na tej drodze będzie Twoja wyobraźnia (i umiejętności kodowania).

Szablon do wyświetlania stron na całej szerokości ekranu

Pierwszym przypadkiem, któremu się przyjrzymy, jest rozszerzona wersja szablonu demonstracyjnego, który stworzyliśmy powyżej. Usunęliśmy już pasek boczny, usuwając funkcję get_sidebar(); z kodu. Jednakże, jak widać na zrzucie ekranu, strona nadal nie wyświetlała się na całej szerokości ekranu, ponieważ sekcja treści pozostała wyrównana do lewej.

Aby to naprawić, musimy popracować z CSS, szczególnie w tej sekcji:

Zawartość witryny ( float: lewy; szerokość: 65,1042%; )

Atrybut szerokości ustawia szerokość naszej zawartości na 65,1042% dostępnego miejsca. Chcemy zwiększyć tę wartość.

Jeśli po prostu zmienimy wartość szerokości na 100%, to ostatecznie wszystkie strony naszej witryny będą wyświetlane na pełnej szerokości ekranu - nie jest to nam potrzebne. Naszym pierwszym krokiem jest zmiana klasy elementu div za pomocą id=primary w naszym niestandardowym szablonie. Możesz go zmienić na class="site-content-fullwidth". Wynik:

Teraz możemy dostosować CSS dla naszej niestandardowej klasy:

Pełna szerokość zawartości witryny ( float: lewy; szerokość: 100%; )

W rezultacie treść zajmie cały ekran:

Dynamiczne strony 404 z obszarami widżetów

Strona 404 pojawia się, gdy użytkownik próbuje uzyskać dostęp do strony w Twojej witrynie, która nie istnieje. Dzieje się tak na skutek literówki, nieprawidłowego linku lub zmiany bezpośredniego linku do strony.

Chociaż nikt nie lubi otrzymywać stron 404, odgrywają one ważną rolę dla Twojej witryny. Ich treść często decyduje o tym, czy dana osoba natychmiast opuści Twoją witrynę, czy będzie próbowała szukać na niej innych treści.

Napisanie od zera 404 stron jest dość trudnym procesem, szczególnie jeśli nie masz dużego doświadczenia. Najlepiej osadzić w swoim szablonie obszary widżetów, aby móc elastycznie zmieniać treść wyświetlaną na ekranie.

Specjalnie do tego użyjemy pliku 404.php dołączonego do motywu Twenty Twelve (pamiętasz hierarchię szablonów?). Zanim jednak cokolwiek w nim zmienimy, utwórzmy nowy widget wklejając kod do plikufunctions.php:

Register_sidebar(array("name" => "Strona 404", "id" => "404", "description" => __("Tutaj znajduje się treść strony błędu 404."), "before_widget" => "

", "po_tytułie" => "

Spowoduje to wyświetlenie naszego nowego widgetu w zapleczu WordPress. Aby mieć pewność, że faktycznie pojawi się ona na naszej stronie, musimy dodać następującą linijkę kodu do pliku strony 404 w odpowiedniej lokalizacji:

W moim przypadku chcę zastąpić formularz wyszukiwania funkcją get_search_form(); w szablonie do obszaru widżetów. Oto jak to wygląda:

Po wgraniu szablonu na stronę możemy wypełnić nowy obszar widżetu:

Jeśli teraz przejdziemy na stronę 404, zobaczymy nowe widżety:

Szablon strony do wyświetlania niestandardowych typów postów

Niestandardowe typy postów to świetny sposób na prezentowanie treści, które mają własne zestawy danych, projekt i inne ustawienia. Popularnym przypadkiem użycia tego typu postów są elementy recenzji: książki, filmy itp. W naszym przypadku chcemy stworzyć szablon strony, który będzie wyświetlał pozycje portfolio.

Najpierw musimy utworzyć nasz niestandardowy typ postu. Można to zrobić ręcznie lub za pomocą wtyczki. Mogę polecić do tego wtyczkę Types. Umożliwi to łatwe tworzenie niestandardowych typów postów i niestandardowych pól.

Zainstaluj i aktywuj Types, dodaj niestandardowy typ postu, zmień go w „portfolio”, skonfiguruj wymagane pola (na przykład dodając miniaturę), dostosuj inne opcje i zapisz.

Teraz, gdy mamy już typ postu portfolio, musimy go wyświetlić na stronie. Pierwszą rzeczą, którą zrobimy, będzie utworzenie wymaganej strony. Pamiętaj, że jeśli wybierzesz portfolio jako ślimak dla niestandardowego typu postu, strona nie musi mieć tego samego ślimaka. Zdecydowałem się na portfolio klientów i dodałem trochę dodatkowego tekstu.

Po dodaniu kilku elementów do sekcji portfolio należy je wyświetlić na stronie zaraz po głównej treści.

W tym celu używamy duplikatu page.php. Skopiujmy plik, nazwijmy go portfolio-template.php i zmieńmy jego tytuł:

Jednak w tym przypadku będziemy musieli dokonać pewnych zmian w oryginalnym szablonie. Jeśli spojrzysz na kod page.php, zobaczysz, że wywołuje on inny szablon, content-page.php (get_template_part('content', 'page');). W tym pliku będziemy potrzebować następującego kodu:

Jak widać, tutaj nazywany jest tytuł i treść strony. Ponieważ potrzebujemy ich również w sekcji portfolio, skopiujemy te fragmenty do naszego szablonu page.php. Wynik będzie następujący:

Pobierz_nagłówek(); ?>

Aby wyświetlić elementy portfolio na naszej stronie, będziemy musieli dodać następujący kod zaraz po wywołaniu funkcji the_content():

"portfolio", // wprowadź niestandardowy typ postu "orderby" => "data", "zamówienie" => "DESC",); $loop = nowy WP_Query($args); if($loop->have_posts()): while($loop->have_posts()): $loop->

W rezultacie na naszej stronie wyświetli się niestandardowy typ postu:

Nie wygląda to zbyt ładnie, więc dodajmy tutaj trochę stylizacji:

/* Posty w portfolio */ .portfolio ( -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0,75); cień ramki: 0px 2px 2px 0px rgba(50, 50, 50, 0,75); margines: 0 0 20px; .portfolio-image (wyświetlanie: blok; float: lewy; margines: 0 10px 0 0; max- szerokość: 20%; ) .portfolio-image img ( promień obramowania: 0; ) .portfolio-work ( display: inline-block; max-width: 80%; ) .portfolio h3( border-bottom: 1px solid #999 ; rozmiar czcionki: 1,57143 rem; margines: 0 0 15px;

Teraz jest dużo lepiej, nie sądzisz?

Oto cały kod szablonu strony portfolio:

Strona członków z awatarami

Kolejnym przykładem wykorzystania naszego szablonu jest strona członków. Chcemy wyświetlić listę autorów naszej witryny, łącznie z ich zdjęciami, a także liczbą postów, które opublikowali pod swoim nazwiskiem. Wynik końcowy będzie następujący:

Zaczniemy od tego samego pliku hybrydowego co poprzednio i dodamy do niego kod wyświetlający listę uczestników.

Domyślny motyw Twenty Fourteen zawiera domyślną stronę członków. Możesz znaleźć ten szablon w folderze page-templates o nazwie contributors.php.

Jeśli jednak zajrzysz do tego pliku, znajdziesz tylko następujące wywołanie: dwadzieściafourteen_list_authors();. Najwyraźniej jest to powiązane z funkcją zawartą w pliku Function.php motywu. Nas interesuje następujący fragment:

"ID", "orderby" => "post_count", "order" => "DESC", "who" => "autorzy",)); foreach ($contributor_ids jako $contributor_id): $post_count = count_user_posts($contributor_id); // Przejdź dalej, jeśli użytkownik nie opublikował jeszcze postu. if (! $post_count) (kontynuuj; ) ?>

Dodamy go tuż pod wywołaniem funkcji the_content() i otrzymamy następujący wynik:

Teraz ustalmy trochę stylizacji:

/* Strona dostawcy */ .contributor ( border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- rozmiar: obramowanie; wyświetlacz: blok liniowy; dopełnienie: 48 pikseli 10 pikseli; pełne rgba (0, 0, 0, 0.1); element ruchomy: lewy; margines: 0 30 pikseli 0 -168 pikseli; : 0; ) .contributor -summary ( float: left; ) .contributor-name( czcionka: normalna; margines: 0 !important; ) .contributor-posts-link ( kolor tła: #24890d; obramowanie: 0 brak ; promień obramowania: 0 ; kolor: #fff; rozmiar czcionki: 12 pikseli; wysokość linii: 10 pikseli 30 pikseli 11 pikseli; link do postów autora: najechanie (kolor: #000; dekoracja tekstu: brak;)

Gotowy. Dziękuję Dwadzieścia Czternaście!

Zmieniona strona archiwum

Twenty Twelve ma własny szablon stron archiwum. Zostanie wykorzystany np. przy próbie przeglądania wcześniejszych postów z określonej kategorii.

Chciałbym jednak zrobić coś ciekawszego, np. Problogger: stronę, która pozwala ludziom zdobywać dodatkowe treści na różne sposoby. Odbywa się to ponownie za pomocą szablonu strony.

Możemy dodać następujący kod tuż pod the_content() w naszym pliku, który jest używany w przykładach:

Archiwa według roku:

Archiwa według miesięcy:

Archiwa według tematu:

Będziesz także potrzebować stylizacji do wyszukiwania:

Formularz wyszukiwania archiwum ( dopełnienie: 10px 0; wyrównanie tekstu: do środka; )

Wynik będzie następujący:

Oto cały plik, abyś mógł zrozumieć, co jest co:

Nie zapomnij połączyć tego szablonu ze stroną!