Zbuduj portal klienta za pomocą WordPress

Zawartość

• 01. Zainstaluj nową kopię WordPressa
• 02. Usuń domyślne wtyczki
• 03. Dodaj niestandardowy typ posta
• 04. Interfejs dodawania / edytowania niestandardowych typów postów
• 05. Utwórz niestandardowy plik slug przepisywania
• 06. Dodaj obsługę pól niestandardowych
• 07. Dodaj pola niestandardowe
• 08. Skonfiguruj pola
• 09. Utwórz plik szablonu WordPress
• 10. Utwórz układ pojedynczego posta o pełnej szerokości
• 11. Uruchom pętlę i utwórz zawartość
• 12. Użyj PHP do wywołania wartości dynamicznych
• 13. Stwórz klienta testowego z fikcyjnymi danymi
• 14. Obsługuj błędy w przypadku brakujących danych
• 15. Uporządkuj interfejs
• 16. Wyklucz go z mapy witryny

Posiadanie obszaru umożliwiającego użytkownikom logowanie się i pobieranie lub przeglądanie dokumentów stało się oczekiwane przez konsumentów, od umów telefonicznych po usługi komunalne.

Jednak gdy projektanci pracują ze swoimi klientami, wszystko może szybko rozpaść się na gmatwaninę e-maili, linków do makiet i załączników.

Ten samouczek WordPress pokaże, jak rozszerzyć WordPress (dostępne są inne usługi hostingowe) do portalu klienta, w którym można przechowywać dokumenty, filmy i rysunki, aby klient mógł uzyskać do nich dostęp w jednym miejscu. Portal zapewni każdemu klientowi unikalny i chroniony hasłem link, który nie pojawia się w zwykłej nawigacji.

Do przechowywania danych będą używane niestandardowe typy i pola postów, które zostaną dodane za pomocą wtyczek, aby uniknąć utraty danych w przypadku zmiany motywu. Motyw zostanie nieznacznie zmodyfikowany.

Posiadanie portalu klienta zapewnia klientom wygodę dostępu do ich plików w tym samym miejscu, kiedy tylko ich potrzebują, podobnie jak w przypadku korzystania z pamięci masowej w chmurze. Ma szereg korzyści biznesowych, w tym pokazywanie dostępnych dodatkowych sprzedaży, lub może być używany do przedstawienia przeglądu procesu pracy od początku poprzez wizualne przedstawienie rezultatów.

Pobierz pliki w tym samouczku.

• Jak zamienić WordPress w kreator wizualny

01. Zainstaluj nową kopię WordPressa

Nowa kopia WordPressa jest instalowana na serwerze deweloperskim, a motyw „understrap” został wybrany jako podstawa do szybkiego rozpoczęcia pracy. Zostanie użyta wtyczka Custom Post Type UI, więc nasze niestandardowe typy postów są niezależne od motywu.

02. Usuń domyślne wtyczki

Jeśli jakieś domyślne wtyczki zostały dostarczone z kopią WordPress, usuń je. Wtyczki potrzebne w tym samouczku to „Zaawansowane pola niestandardowe” i „Interfejs użytkownika typu niestandardowego posta”. Zainstalowano także „Classic Editor”.

03. Dodaj niestandardowy typ posta

Korzystając z interfejsu użytkownika typu niestandardowego posta, dodaj nowy typ postu o nazwie „klient”. Wpisując „Slug typu post”, zamiast spacji używaj podkreśleń i pisz w liczbie pojedynczej, ponieważ ułatwi to późniejsze tworzenie szablonów. Przedrostek tu_ został dodany, aby zmniejszyć ryzyko konfliktu.

04. Interfejs dodawania / edytowania niestandardowych typów postów

Dodaj liczbę mnogą oznaczoną jako „klienci” i liczbę pojedynczą „klient”, ponieważ pojawi się ona w menu administratora WordPress. W tych polach akceptowane są wielkie litery, dzięki czemu menu WordPress będzie bardziej uporządkowane.

05. Utwórz niestandardowy plik slug przepisywania

Użycie prefiksu dla informacji typu slug będzie oznaczać, że klienci dodani do portalu zostaną utworzeni z linkiem, który wygląda jak „/ tu_customer / example-company”. Nie wygląda to porządnie, a niestandardowy plik ponownego zapisu służy do poprawy tego. Ustawienie informacji o przerabianiu na „klienci” umożliwia wyświetlanie niestandardowego typu posta jako / customers / example-company.

06. Dodaj obsługę pól niestandardowych

Ostatnią opcją włączoną dla niestandardowego typu postu jest „Wsparcie> Pole niestandardowe”, która znajduje się u dołu strony. Zaznacz to, a następnie „dodaj typ posta” u dołu strony. Spowoduje to przesłanie zmian i zarejestrowanie typu postu.

07. Dodaj pola niestandardowe

Należy teraz dodać pola niestandardowe i przypisać je do właśnie utworzonego typu wpisu. Dodanie grupy pól o nazwie „portal klienta” jest pierwszym krokiem, po którym następuje dodanie do niej pól niestandardowych za pomocą przycisku Dodaj pole. Pierwsze pole „brief” zostanie ustawione jako pole typu „plik”, co pozwoli administratorowi na przesłanie pliku w tej lokalizacji. Jako wartość zwracaną ustaw „file url”.

08. Skonfiguruj pola

Następnym polem do dodania jest „kwestionariusz marki”. Będzie to link do formularza Google, który klient powinien wypełnić. Najbardziej odpowiednim typem pola do tego jest „URL”. Tej samej metody można użyć dla wszystkich pól, które będą zawierać łącze do usługi zewnętrznej. Po zakończeniu przewiń w dół do pola „lokalizacja” i użyj logiki „Pokaż, jeśli typ postu” = „Klient”. Następnie opublikuj grupę pól.

09. Utwórz plik szablonu WordPress

WordPress musi wiedzieć, jak wyświetlić panel klienta. W tym celu stosuje się hierarchię szablonów WordPress, aby utworzyć plik szablonu dla tego konkretnego typu postu. Utwórz plik o nazwie single-tu_customer.php w głównym katalogu motywów.

10. Utwórz układ pojedynczego posta o pełnej szerokości

Otwórz plik single-tu_customer.php i dodaj funkcje get_header i get_footer WordPress. Pomiędzy tymi funkcjami utwórz układ o pełnej szerokości, aby przechowywać zawartość, która działa z Twoim motywem.

? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Treść -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>

11. Uruchom pętlę i utwórz zawartość

W elemencie main> wywołaj the_post i utwórz elementy kontenera do przechowywania informacji. Użyj informacji zastępczych, aby zorientować się w układzie i zacznij stylizować elementy. Elementami karty będą karty bootstrap z nagłówkiem, opisem i linkiem.

main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php endwhile; // koniec pętli. ?> var13 -> / main>! - #main ->

12. Użyj PHP do wywołania wartości dynamicznych

Korzystając z funkcji „the_field”, funkcji dostarczanej wraz z zaawansowaną wtyczką pól niestandardowych, dynamiczna zawartość z pól niestandardowych jest wprowadzana do szablonu klienta. „Nazwa_pola” to wartość wprowadzona w kroku 3.

div> div> h5> Brief / h5> p> To jest twój oryginalny krótki dokument / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>

13. Stwórz klienta testowego z fikcyjnymi danymi

Uzyskując dostęp do pulpitu WordPress, nowego klienta można dodać z paska po lewej stronie. Klienci> Dodaj nowego klienta. Widok posta będzie znajomy, ale przewijanie w dół ujawni wszystkie nowe pola niestandardowe. Wprowadź dane testowe, aby upewnić się, że wszystko działa poprawnie.

14. Obsługuj błędy w przypadku brakujących danych

Jeśli zapomnisz o dokumencie lub po prostu jest zbyt wcześnie, aby dokument był dostępny, może to być kłopotliwe dla klienta, gdy przycisk nie działa. Dodanie sprawdzenia, czy wartość istnieje przed jej pokazaniem, daje szansę na pokazanie odmiany karty z „brakującym polem”. Dodanie klasy „wyłączone” do karty, gdy brakuje wartości, umożliwi nam stylizowanie niedostępnych kart.

? php if (get_field ('nazwa_pola')):?> var13 -> wyświetlane, gdy nazwa_pola ma wartość? php else: // nazwa_pola zwróciło fałsz?> var13 -> wyświetlane, gdy pole nie istnieje? php endif ; // koniec logiki if nazwa_pola?> var13 ->

15. Uporządkuj interfejs

Teraz, gdy struktura interfejsu jest sfinalizowana, można go odpowiednio stylizować. Korzystając z CSS, można poprawić wygląd kart i kolorów na stronie. Kolor nawigacji został zmieniony na jaśniejszy niebieski, a kierunek użytkownika został poprawiony poprzez dodanie tekstu wprowadzenia.

16. Wyklucz go z mapy witryny

Niestandardowe typy postów nie powinny znajdować się w wynikach wyszukiwarek. Typ posta należy wykluczyć z mapy witryny witryny za pomocą wtyczki SEO lub ręcznie za pomocą metatagu i pliku robots.txt.

meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /

Chcesz zaprojektować nową stronę internetową? Użyj genialnego narzędzia do tworzenia stron internetowych, aby proces był bardzo prosty.