Tworzenie niestandardowych szablonów stron w WordPress

Szablony stron w WordPress to świetny sposób na dodanie zmian strukturalnych lub wysoce dostosowanych funkcjonalności do twojej witryny. Są łatwe do stworzenia, dzięki czemu nowicjusze mogą zacząć, ale oferują wystarczający potencjał, aby zająć nawet doświadczonych profesjonalistów.

Możesz zacząć od skopiowania szablonów stron z popularnych motywów, takich jak domyślny motyw WordPress Twenty Seventeen i tweaking, ale możesz także z łatwością dodawać własne style i Javascript.

W tym artykule przyjrzymy się, jakie są szablony stron, a także jak możesz z nich korzystać, aby Twoja strona była lepsza. Dołączę również szczegóły dotyczące tworzenia szablonów stron z kodem i znacznie łatwiejszy sposób z naszą Wtyczką CustomPress.

Co To jest szablon strony?

Jak wspomniałem we wstępie, szablon strony daje możliwość odbiegania od istniejącej struktury witryny, a także dodawania nowych funkcji. Twenty Fourteen zawiera dwa świetne przykłady: stronę dostawcy i stronę fullwidth.

Strona dostawcy wprowadza nową funkcjonalność: możliwość listy autorów, którzy przyczynili się do twojej witryny. Szablon o pełnej szerokości zmienia strukturę strony, usuwając pasek boczny, skupiając się bardziej na treści.

Twenty Eleven zapewnia również dwa szablony stron: szablon prezentacji i szablon paska bocznego. Szablon paska bocznego daje Ci stary dobry pasek boczny na twojej stronie, Strona showcase wyświetla najpierw lepkie posty, a następnie listę ostatnich postów.

Motywy Premium, w szczególności, takie jak dodawanie wielu szablonów stron do motywów, aby tworzyć doskonałe formularze kontaktowe, konfigurowalne listy postów, wysoce spersonalizowane listy autorów i inne.

Tworzenie szablonu strony

Tworzenie szablonu strony jest niezwykle proste. Utwórz dowolny nowy plik w swoim motywie i uruchom plik z blokiem komentarzy w ten sposób:

Jeśli modyfikujesz motyw innej firmy, naprawdę powinieneś używać motywu podrzędnego. Jeśli nie wiesz, jak go utworzyć, przeczytaj Raelene Wilson ’ s great How to Create a WordPress Child Theme article.

Pliki szablonów stron mogą znajdować się w podkatalogu-jest to moja ulubiona metoda. Zwykle tworzę katalog<code>templates < /code > i tam je przechowuję.

Po utworzeniu szablon strony pojawi się w module atrybuty strony, który, jeśli nie jesteś zaznajomiony, znajduje się po prawej stronie ekranu w zapleczu ekranu Edytuj stronę. Jeśli go wybierzesz i zaktualizujesz post, kod w pliku szablonu zostanie użyty do wyświetlenia strony. Podaj następujący kod szablonu:

Zauważ ,że „Witaj” to wszystko, co jest widoczne; z szablonami stron jesteś sam. Musisz wywołać nagłówek, stopkę i inne elementy strony, jeśli ich potrzebujesz.

Stwórzmy podstawowy szablon strony, który wtopi się w Twenty Fourteen:

Jestem pewien, że nowicjusze kodu WordPress dyszą na skok złożoności między dwoma poprzednimi przykładami. Mój mały sekret to zdrada. Po prostu poszedłem do pliku szablonu w temacie Twenty Fourteen i skopiowałem go. Usunąłem pętlę, której nie potrzebujemy.

Jeśli twój motyw nie ma plików szablonów, możesz spróbować skopiować indeks < code>.plik php< / code> i usunięcie pętli jako punktu wyjścia.

Tworzenie Przydatnych Szablonów Stron

Dobrze jest mieć szablon strony, ale naprawdę powinniśmy dodać do niego coś przydatnego. Od tego momentu jest to całkowicie do ciebie, tak długo, jak można go kodować w PHP / HTML można go używać.

Oto kilka pomysłów, które pomogą Ci zacząć:

• Niestandardowa strona kontaktowa z Mapami Google i formularzem kontaktowym
• Strona zawierająca najnowszy post z każdej kategorii
• Strona archiwum zawierająca pięć nowych postów i postów kategorii z trzech najlepszych kategorii
• Mapa strony z listą wszystkich Twoich treści (postów i stron)
• Strona z listą ostatnio przesłanych zdjęć
• Lista postów uporządkowana według komentarzy liczy
• Lista postów pokazująca posty uporządkowane według czasu ostatniej aktualizacji
• Lista autorów i ich trzy najlepsze posty
• Specjalnie zaprojektowana strona dla Twojego portfolio

Oto jak można wyświetlać posty Alfabetycznie za pomocą szablonu strony w dwadzieścia czternaście:

Znowu oszustwo! Wszedłem do indeks.php plik w dwadzieścia czternaście i skopiował całą pętlę. Musiałem utworzyć nowy obiekt zapytania, więc stworzyłem $custom_posts zmienna i używała jej w całej pętli.

Dodawanie Opcji

Szablony postów są naprawdę zabawne, gdy dodajesz do nich opcje. Możesz to zrobić rejestrując pola meta, ale to dodałoby znaczny niezwiązany kod do artykułu, więc dlaczego nie oszukiwać jeszcze raz?

Jedna z moich ulubionych wtyczek, Advanced Custom Fields może nam pomóc.

Stwórzmy specjalny szablon strony, gdzie użytkownicy mogą wybrać, w jaki sposób posty na stronie są uporządkowane.

Najpierw zainstaluj zaawansowane Pola niestandardowe. Następnie Utwórz szablon strony za pomocą kodu z naszego poprzedniego przykładu z góry. Upewnij się, że nazwa szablonu to „niestandardowa lista postów”, abyś mógł użyć naszego przykładu importu poniżej.

Następnym krokiem jest utworzenie naszych ustawień przy użyciu zaawansowanych pól niestandardowych. Możesz utworzyć własny, upewniając się, że są one wyświetlane tylko w nowym szablonie strony, lub możesz zaimportować plik XML w tym archiwum za pomocą WordPress importer znaleziony w Narzędzia > Import.

Stworzyłem porządek i porządek przez ustawienie. Zostanie to zaimportowane do ustawień ACF.

Po zakończeniu możesz utworzyć stronę i wybrać szablon „Niestandardowa lista postów”. Powinieneś zobaczyć dwie opcje zgrupowane w oknie meta wyskakującym pod edytorem. Ustaw je na wszystko, co chcesz i pozwala rozpocząć tworzenie naszego motywu za pomocą tych ustawień.

Wszystko, co musisz wiedzieć, to klucz zamówienia przez ustawienie to order_by, kluczem do ustawień zamówienia jest zamów (bez niespodzianek). Możemy pobrać wartość tych pól za pomocą get_field() funkcja zapewniana przez ACF. Wystarczy, że podstawimy wybrane przez użytkownika wartości do naszego WP_Query obiekt sprzed:

Tworzenie szablonów stron z CustomPress

Jeśli nie jesteś zbyt zaznajomiony z tworzeniem własnego szablonu strony, może to być w najlepszym razie przytłaczające. Jeśli jesteś profesjonalistą, może to być nadal czasochłonne i żmudne. Dlatego przydatne jest użycie wtyczki do tworzenia potrzebnych szablonów stron.

Możesz wybrać żądane opcje w prostym interfejsie, a w ciągu kilku minut Twój szablon zostanie wykonany i możesz go użyć od razu lub stylizować za pomocą CSS w razie potrzeby. Nasza wtyczka CustomPress robi to i zabiera przytłaczające i nudne, oszczędzając czas.

Jest szybki i łatwy w instalacji, a gdy to zrobisz, możesz rozpocząć tworzenie nowego szablonu strony. Możesz także utworzyć dowolny rodzaj niestandardowego typu postu od załączników do stron postów. Wszystko jest wliczone w cenę.

Ponadto, jeśli jesteś już członkiem WPMU DEV, CustomPress jest lepszy niż darmowy, ponieważ nie musisz się rejestrować w niczym innym ani wypełniać żadnych formularzy. Możesz go pobrać od razu i zacząć tworzyć szablon strony. Jeśli nie jesteś jeszcze członkiem, nadal możesz uzyskać CustomPress za darmo.

Możesz zarejestrować się na bezpłatny 14-dniowy okres próbny i pobrać CustomPress. Nawet jeśli anulujesz, CustomPress jest cały twój i możesz go nadal używać. Jeśli chcesz, możesz kontynuować swoje członkostwo i otrzymywać przyszłe aktualizacje, wsparcie ekspertów premium, wszystkie nasze inne wtyczki 100+ i kursy WordPress w naszej Akademii. Zdalne zarządzanie witryną za pomocą koncentratora, w którym można

Możesz również zdalnie zarządzać witryną za pomocą Centrum, w którym możesz łączyć swoje witryny, a także monitorować czas pracy i czarną listę, podstawowe funkcje bezpieczeństwa i inne funkcje pojawiające się regularnie.

Trudno wszystko wymienić, ale jest tak wiele, że prawie jak dostarczenie Ciężarówki pełnej pieniędzy do domu. Prawie.

Pierwsze Kroki

Oto jak możesz użyć CustomPress do stworzenia szablonu strony. Pełne szczegóły instalacji i konfiguracji można znaleźć na stronie CustomPress w zakładce użycie.

Stworzę stronę z prezentacją produktu, aby pokazać ci, co jest grane. Ważne jest, aby zaplanować szablon strony przed rozpoczęciem, abyś mógł przejść przez konfigurację.

Stworzyłem fikcyjną firmę wtyczek, więc moja prezentacja produktu będzie pełnym szablonem strony sprzedaży, którego mogę użyć dla każdej wtyczki.

Oprócz wiedzy, że chcesz stworzyć szablon strony lub typ postu, warto również wiedzieć:

• Niezależnie od tego, czy potrzebujesz niestandardowych kategorii, czy tagów
• Pola niestandardowe, których potrzebujesz
• Jeśli chcesz, aby szablon strony był publiczny lub prywatny
• Nazwa, której chcesz użyć dla szablonu strony
• Czy potrzebujesz pewnych możliwości typu post
• Jeśli masz sieć wielostanowiskową, czy chcesz, aby podstrony tworzyły własne szablony stron?

Gdy masz szorstki plan, możesz zainstalować CustomPress. W mojej prezentacji produktu będę miał polecany obraz i chcę wyświetlić pewne specyfikacje, takie jak numer wersji wtyczki.

Po pierwszej instalacji CustomPress możesz włączyć go w całej sieci w wielu witrynach lub witrynach. Jeśli zdecydujesz się na aktywację sieciową CustomPress, tylko super administrator może tworzyć szablony stron lub niestandardowe typy postów, ale podstrony mogą z nich korzystać. Jeśli włączysz go site-by-site, każda witryna, która ma aktywowaną wtyczkę, może tworzyć własne typy postów i szablony do użycia.

Możesz uzyskać wszystkie szczegóły na karcie użytkowania strony CustomPress. Po zakończeniu możesz utworzyć szablon strony.

Ustawienia Szablonu Strony

Przejdź do CustomPress > Rodzaje Treści i kliknij Dodaj Typ Postu przycisk na domyślnym Typy Postów tab.

W pierwszym panelu o nazwie Typ Postu, wprowadź nazwę w polu, którego chcesz użyć w kodzie zaplecza. Wybrana nazwa powinna mieć maksymalnie 20 znaków, minimum dwie litery, a wszystkie litery powinny być małe.

Możesz również dodać podkreślniki, ale zaleca się, aby Twoje imię nie zaczynało się od podkreślnika.

Możesz postępować zgodnie z instrukcjami użytkowania CustomPress, aby uzyskać szczegółowe informacje na temat wszystkich ustawień i sposobu ich skonfigurowania, ale jest jeszcze kilka ustawień, które należy uwzględnić, aby stworzyć szablon strony.

Domyślnie, Typ Zdolności jest ustawiony na post co oznacza, że tworzysz niestandardowy szablon postu. Jeśli chcesz to zrobić, to jest całkowicie w porządku, ale jeśli wolisz stworzyć szablon strony, należy to zmienić.

Pod Typ Zdolności sekcja, sprawdź edycja pole i wpisz strona do pola nad nim, zastępując post.

W Etykiety sekcja, możesz wprowadzić przyjazne dla użytkownika tytuły, które chcesz nadać szablonowi strony i jego linkom. W Nazwa pole, Wprowadź to, co chcesz wyświetlić na karcie w panelu administracyjnym, aby uzyskać dostęp do szablonu strony.

Można również dostosować nazwy łączy, które są wymienione w zakładce, takie jak Nowa Strona oraz Zobacz Strony linki.

Po zakończeniu kliknij Dodaj Typ Postu na dole, aby zapisać zmiany i utworzyć nowy szablon strony. Możesz sprawdzić nową kartę z wybraną dla niej nazwą w panelu administratora, ale aby dodać opcje dla określonych rodzajów treści, które musisz wyświetlić na stronie, musisz utworzyć niestandardowe pola.

Dodawanie Niestandardowych Pól

Dla mojego fikcyjnego biznesu wtyczek i szablonu strony prezentacji produktu, który dla niego tworzę, muszę być w stanie dodać kilka opcji do edytora, takich jak wersja wtyczki.

Przejdź do Pola Niestandardowe zakładkę i kliknij Dodaj Niestandardowe Pole guzik. Wprowadź przyjazną dla użytkownika nazwę, która będzie wyświetlana w edytorze, a także na stronie podczas tworzenia pierwszego szablonu.

Pamiętaj również, aby wybrać nazwę szablonu strony, który tworzysz w Typ Postu sekcja więc opcja może pojawić się w edytorze, jeśli włączony interfejs użytkownika. W Ukryj wejście dla tego typu postu sekcji, wprowadź Wszystkie typy postów lub szablony stron, w których nie. chcesz, aby to niestandardowe pole było wyświetlane w edytorze.

Dla mojego fikcyjnego biznesu plugin, nie chciałbym, aby moje niestandardowe pole, które wyświetla wersję wtyczki, które mają być wyświetlane w zwykłym edytorze postów i stron, ale chcę, aby pojawiły się w moim szablonie strony. W tym przypadku zamierzam wybrać wiele typów postów i stron na liście, z wyjątkiem mojego niestandardowego szablonu strony.

Pod Typ Pola, wprowadź sposób, w jaki użytkownicy mają wprowadzać informacje dla tego pola opcja. W przypadku mojej fikcyjnej firmy chcę, aby moi pracownicy i ja mogli wprowadzić numer wersji w polu tekstowym, ponieważ w miarę rozwoju musi być więcej niż kilka opcji, więc wybrałem pole tekstowe.

Istnieje wiele innych opcji, które możesz wybrać, a oto pełna lista wszystkich z nich:

• Pole tekstowe
• Wielowierszowe pole tekstowe
• Przyciski radiowe
• Pola wyboru
• Rozwijane pole
• Pole wielokrotnego wyboru
• Date picker
• Upload

Po wybraniu typu pola możesz wprowadzić dodatkowe opcje. Na przykład można wprowadzić wyrażenie regularne, aby zweryfikować informacje o polu tekstowym. Jest to przydatne, jeśli pole ma być użyte do wprowadzenia adresu e-mail. Możesz użyć wyrażenia regularnego, aby zweryfikować wiadomość e-mail i upewnić się, że jest poprawna.

Jeśli wybierzesz inny typ pola, taki jak pola wyboru, różne opcje pojawią się dynamicznie, dzięki czemu możesz dodać odpowiednie ustawienia, takie jak opcje, które użytkownicy mają kliknąć w polu.

Możesz również wprowadzić opis pola, aby użytkownicy mieli lepszy pomysł, co należy wpisać lub wybrać w polu.

Po zakończeniu kliknij Dodaj Niestandardowe Pole przycisk na dole strony. Teraz, gdy przejdziesz do karty szablonu strony i klikniesz łącze, aby utworzyć nową stronę, powinieneś zobaczyć opcję pojawiającą się pod edytorem, jeśli wybrałeś wyświetlanie interfejsu użytkownika.

Prawie skończyłeś, ale jest jeszcze jeden ostatni krok, aby upewnić się, że niestandardowe pole rzeczywiście pojawi się na twojej stronie w interfejsie.

Osadzanie Pola Niestandardowego

Nawet jeśli możesz zobaczyć swoje niestandardowe pole w edytorze, nie pojawi się ono na szablonie strony, dopóki nie dodasz go za pomocą kodu PHP lub krótkiego kodu. Na szczęście wszystko jest generowane dla ciebie, więc wystarczy go podłączyć.

Możesz znaleźć potrzebny kod, przechodząc do CustomPress > Typy Zawartości > Pola Niestandardowe Zakładka i kursor nad niestandardowym tytułem pola. Kliknij na Kod Do Osadzania link.

Twój kod powinien pojawiać się dynamicznie bezpośrednio poniżej. Możesz skopiować i wkleić to, czego potrzebujesz.

Kod PHP może być użyty w szablonie strony, który został stworzony przez CustomPress. Powinieneś być w stanie znaleźć ten plik pod / wp-content / themes / your-theme / single – {post_name}.php. Zamiast {post_name} powinieneś zobaczyć rzeczywistą nazwę systemową wybraną dla szablonu strony. W moim przypadku było to produkty więc moja nazwa pliku to pojedyncze produkty.php.

Możesz edytować plik i wprowadzić kod, w którym chcesz, aby Twoje niestandardowe pole pojawiło się na interfejsie, a następnie zapisać zmiany.

Jeśli wolisz użyć krótkiego kodu, możesz po prostu włożyć go do Edytora Stron, w którym chcesz, aby Twoje niestandardowe pole było wyświetlane tak, jak w przypadku każdego innego krótkiego kodu.

Dostosowywanie pól za pomocą CSS

Domyślnie pola niestandardowe są zapisywane w postaci zwykłego tekstu, ale możesz użyć CSS, aby dostosować je tak, aby wyglądały bardziej fantazyjnie i w dowolny sposób.

Aby dostosować pola za pomocą CSS, musisz użyć wygenerowanego kodu HTML PHP. Następnie zawiń kod w niestandardowe <div> tagi, aby dodać nazwę klasy dla Twoich stylów. Stamtąd możesz przejść do tematu styl.css plik i Użyj nowo utworzonej nazwy klasy, aby dostosować pola za pomocą CSS.

Uzyskiwanie Pomocy

Jeśli napotkasz jakiekolwiek problemy po drodze, nasz zespół wsparcia ekspertów jest gotowy i czeka, aby pomóc ci we wszystkim, czego potrzebujesz. Możesz przesłać zgłoszenie, sprawdzić nasze wsparcie na żywo lub przeszukać forum Pomocy technicznej, aby sprawdzić, czy twoje pytanie zostało już udzielone.

Możesz również sprawdzić stronę podręcznika Good Support Ticket, aby uzyskać szczegółowe informacje na temat tego, co należy uwzględnić w zgłoszeniu pomocy technicznej, abyśmy mogli Ci pomóc z maksymalną prędkością.

Wszystko to jest zawarte w Twoim członkostwie, więc nie musisz się wahać nawet przez ułamek sekundy, jeśli potrzebujesz pomocy. Jeśli jeszcze nie jesteś członkiem, nadal możesz uzyskać bezpłatną pomoc techniczną dzięki członkostwu próbnemu.

Podsumowując

Powinno być dość oczywiste, że dodając opcje, możesz stworzyć zupełnie nowe środowisko dla administratorów i użytkowników witryny. Ta funkcjonalność, w połączeniu z dostosowanymi CSS i Javascript może spowodować zdumiewającą i potężną pracę.

Uważaj – z wielką mocą przychodzi wielka odpowiedzialność! Dodanie opcji 100 do szablonów stron tylko dlatego, że możesz, nie jest rozwiązaniem.

Wykorzystaj tę wiedzę mądrze i zbuduj coś naprawdę użytecznego dla swoich klientów i dla siebie.