Zbuduj portal klienta z WordPress

Feb 9, 2026
Jak
Build a client portal with WordPress
(Kredyt obrazu: projektant stron internetowych)

Posiadając obszar, który umożliwia użytkownikom logowanie i pobieranie lub przeglądanie dokumentów oczekiwane przez konsumentów, z umów telefonicznych do mediów.

Kiedy projektanci pracują ze swoimi klientami, jednak wszystko może szybko rozpadać się w mudle e-maili, linki do makiety i załączniki.

To Samouczek WordPress. pokaże, jak przedłużyć WordPress (inne hosting Usługi są dostępne) W portalu klienckim zdolnym do przechowywania dokumentów, filmów i rysunków, więc klient może uzyskać do nich dostęp do nich wszystkich w jednym miejscu. Portal będzie obsługiwał każdego klienta wyjątkowym połączeniem chronionym hasłem, który nie pojawia się w regularnej nawigacji.

Niestandardowe typy i pola zostaną użyte do przechowywania danych, a następnie zostaną dodane przez wtyczki, aby uniknąć utraty danych, jeśli zmienia się tematyczna. Temat będzie lekko zmodyfikowany.

Mając portal klienta daje klientom wygodę dostępu do swoich plików w tym samym miejscu, gdy ich potrzebują, podobnie jak podczas używania magazyn w chmurze . Ma szereg zalet biznesowych, w tym pokazujący dostępny do sprzedaży, lub może być używany do podjęcia przeglądu procesu pracy od początku poprzez wizualnie przedstawiające wyniki.

Pobierz pliki. Dla tego samouczka.

  • Jak włączyć WordPress w wizualny budowniczy

01. Zainstaluj świeżą kopię WordPress

Świeża kopia Wordpress jest zainstalowana na serwerze programistycznym, a motyw "Undertrap" został wybrany, aby nadać fundament kotłowlane, aby szybko rozpocząć pracę. Niestandardowa wtyczka typu UI Type zostanie użyta więc nasze niestandardowe typy postów są niezależne od tematu.

02. Usuń domyślne wtyczki

Jeśli wszystkie domyślne wtyczki przybyły z kopią WordPress, usuń te. Wtyczki potrzebne do tego samouczka są "zaawansowanymi polami niestandardowymi" i "Custom Post typu UI". Zainstalowano również "Klasyczny edytor".

03. Dodaj typ niestandardowy

Korzystanie z interfejsu Custom Post Type UI, dodaj nowy typ post o nazwie "klient". Przy wejściu do "ślimaka typu postu", użyj podkreśleń zamiast przestrzeni i pisać w formie pojedynczej, ponieważ ułatwi to tworzenie szablonów później. Prefiks TU_ został dodany w celu zmniejszenia ryzyka konfliktu.

04. Dodaje / edytuj interfejs niestandardowy

Build a client portal with WordPress: The add/edit custom post type interface

Dodaj zarówno pojedyncze, jak i mnomoczni etykiety (Kredyt obrazu: projektant stron internetowych)

Dodaj liczbę mnogą "klientów" i pojedynczy "klient", ponieważ pojawi się to w menu administratora WordPress. Kapitalizacja jest akceptowana w tych dziedzinach, co sprawi, że menu WordPress Tidier.

05. Utwórz niestandardowy przepisany ślimak

Build a client portal with WordPress: Create a custom rewrite slug

Użyj niestandardowej przepisywania ślimaka, aby uzyskać lepsze doświadczenie użytkownika (Kredyt obrazu: projektant stron internetowych)

Korzystanie z prefiksu dla Slime Poste Slime oznacza, że ​​klienci dodani do portalu zostaną utworzone z linkiem, który wygląda jak "/ TU_Customer / Example-Company". Nie wygląda to na porządek, a niestandardowy przepisany ślimak służy do ulepszenia tego. Ustawianie przepisywanego ślimaka do "klientów" umożliwia niestandardowy typ post pojawił się jako / klientów / komputerowa firma.

06. Dodaj wsparcie dla pola niestandardowych

Build a client portal with WordPress: Add support for custom fields

Zaznacz opcję "Custom Field" i prześlij zmiany (Kredyt obrazu: projektant stron internetowych)

Ostatnia opcja, która jest włączona dla niestandardowego typu postu, jest "obsługuje" pole niestandardowe ", które znajduje się w pobliżu dolnej części strony. Zaznacz to, a następnie "Dodaj typ postu" na dole strony. Przekłada to zmiany i rejestruje typ postu.

07. Dodaj niestandardowe pola

Build a client portal with WordPress: Add custom fields

Teraz musisz dodać niestandardowe pola do nowego typu postu (Kredyt obrazu: projektant stron internetowych)

Niestandardowe pola muszą być teraz dodane i przypisane do żądanego typu postu. Dodawanie grupy polowej o nazwie "Portal klienta" jest pierwszym krokiem, a następnie dodawanie niestandardowych pól do przycisku Dodaj pole. Pierwsze pole "Krótkie" zostanie ustawione jako typ pola "Plik", który umożliwia administrator przesyłanie pliku w tej lokalizacji. Ustaw wartość zwracania na "URL pliku".

08. Skonfiguruj pola

Następne pole do dodania jest "Kwestionariusz marki". Spowoduje to składanie się z linku do formularza Google, które powinien wypełnić klient. Najbardziej odpowiednim typem pola jest to "URL". Ta sama metoda może być używana dla wszystkich pól, które łączą się z usługą zewnętrzną. Po zakończeniu przewiń w dół do pola "Lokalizacja" i użyj logiki "Pokaż, jeśli Post Type" = "Klient". Następnie opublikuj grupę polową.

Generate CSS

Zarezerwuj bilety, aby wygenerować CSS teraz, aby zaoszczędzić 50 GBP (Kredyt obrazu: Getty / Future)

09. Utwórz plik szablonu WordPress

WordPress musi wiedzieć, jak wyświetlić pulpit obsługi klienta. W tym celu przestrzegano hierarchii szablonu WordPress, aby utworzyć plik szablonu dla tego konkretnego typu postu. Utwórz plik o nazwie single-tu_customer.php w katalogu motywu głównego.

10. Utwórz układ pełnej szerokości pojedynczej postu

Build a client portal with WordPress: Create a full-width single post layout

Utwórz pełnotrawny układ dla treści (Kredyt obrazu: projektant stron internetowych)

Otwórz plik single-tu_customer.php i dodaj funkcje Get_header i Get_Footer WordPress. Między tymi funkcjami utwórz pełnotrawny układ, aby utrzymać zawartość, która działa z tematem. 

 & LT;? PHP Get_header ();? & GT;
& lt; div class = "owijka" id = "pojedynczy opakowanie" & gt;
& lt; div class = "kontener" id = "zawartość" Tabindex = "- 1" & GT;
& lt; div class = "wiersz" & gt;
& lt; div class = "COL-MD Content - obszar" Id = "Primary" & GT;
& LT; Główna klasa = "Strona główna" ID = "Main" & GT; Treść - & GT; & LT;
& lt; / div & gt;
& lt; / div & gt; &ROW - & GT;
& lt; / div & gt; #Content - & gt;
& lt; / Div & GT; - # Single-Owiper - & GT;
& lt;? php get_footer ();?

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

Build a client portal with WordPress: Start the loop and create the content

Użyj symboli zastalnych, aby odłączyć treść (Kredyt obrazu: projektant stron internetowych)

W Głównym & GT; Element, zadzwoń do_post i utwórz elementy kontenera, aby utrzymać informacje. Użyj informacji zastępczych, aby uzyskać pomysł na układ i zacznij stylować elementy. Elementy karty będą kartami Bootstrap z nagłówkiem, opisem i linkiem.

12. Użyj PHP, aby zadzwonić do wartości dynamicznych

Korzystając z funkcji "The_field", funkcja z zaawansowaną wtyczką niestandardową wtyczkę, zawartość dynamiczna z pola niestandardowych jest wprowadzana do szablonu klienta. "Nazwa pola" jest wartością wprowadzoną w kroku 3.

13. Zrób klient testowy z niektórymi manekinowymi danymi

Build a client portal with WordPress: Make a test customer with some dummy data

Idź do pulpitu nawigacyjnego WordPress, aby stworzyć manekinowy klient (Kredyt obrazu: projektant stron internetowych)

Dostęp do pulpitu nawigacyjnego WordPress można dodać nowy klient z lewego barem. Klienci i GT; Dodaj nowy klient. Widok postu będzie znany, ale przewijanie w dół ujawni wszystkie nowe pola niestandardowe. Wprowadź pewne dane testowe, aby upewnić się, że wszystko działa poprawnie.

14. Uchwyt Błędy dla brakujących danych

Build a client portal with WordPress: Handle errors for any missing data

Upewnij się, że jest jasne, gdy dokumenty nie są dostępne (Kredyt obrazu: projektant stron internetowych)

Jeśli dokument zostanie zapomniany, albo jest po prostu zbyt wcześnie w procesie, aby ten dokument był dostępny, może być mylącym dla klienta, gdy przycisk nie działa. Dodawanie sprawdzania, czy istnieje wartość przed pokazaniem, daje szansę pokazać zmienność karty "brakujące pole". Dodawanie klasy "Wyłączone" na karcie, gdy brakuje wartości pozwoli nam w stylu niedostępnych kart. 

 & LT;? PHP IF (Get_field ("Field_name")):? & GT;
wyświetlane, gdy nazwa_poli ma wartość
& lt;? php indziej: // pola_name zwrócił false? & gt;
wyświetlany, gdy pole nie istnieje
& lt;? php endif; // koniec, jeśli logika nazwa_samu?

15. Usuń interfejs

Teraz, gdy struktura interfejsu zostanie sfinalizowana, można go poprawnie stylić. Korzystanie z CSS, wygląd kart i kolorów na stronie można poprawić. Kolor nawigacji został zmieniony na lżejsze, a kierunek użytkownika został poprawiony przez dodanie tekstu wprowadzenia.

16. Wyklucz go od witryny

Niestandardowe typy postów nie należy znaleźć w wynikach wyszukiwarek. Rodzaj postu musi zostać wyłączone z witryny witryny witryny, albo za pośrednictwem wtyczki SEO, czy ręcznie za pomocą meta tag i robots.txt. 

 & LT; Meta Name = "Robots" Content = "Noindex, NoFollow" / & GT;
Agent użytkownika: *
Nie zezwolić: / Klienci /

Chcesz zaprojektować nową stronę? Użyj genialnego Kreator strony internetowej aby proces super prosty.

Powiązane artykuły:

  • Najlepsze usługi hostingowe WordPress w 2019 roku
  • 13 świetnych narzędzi do pitching dla klientów
  • WordPress Strony internetowe: 14 niesamowite przykłady

Jak - Najpopularniejsze artykuły

Jak uniknąć Amazon Prime Day 2020 Fail

Jak Feb 9, 2026

(Kredyt obrazu: Amazon) Chociaż nie znamy jeszcze dokładnej daty Amazon Prime Day 2020 Wiemy jednak,..

Jak renderować realistyczne przezroczyste powierzchnie

Jak Feb 9, 2026

Tworzenie przezroczystego materiału, takiego jak szkło wydaje się łatwe - po prostu zwiększyć suwak przezroczystości do 10..

Jak używać tekstur w Photoshopie

Jak Feb 9, 2026

Tekstura jest często, co rozmywa linie między grafiką tradycyjną i cyfrową. Często łatwo jest powiedzieć różnicę między nimi, jeśli twoja grafika cyfrowa nie ma żadnego rodzaju ..

Jak poruszać się między DAZ Studio a Zbrush

Jak Feb 9, 2026

Dla przybronników do Zbrush. , Interfejs wydaje się bardzo różny od innych programów modelowania 3D, więc mo..

Robić realistyczne rośliny w kinie 4d ​​

Jak Feb 9, 2026

Bez względu na ostateczne użycie, większość scen koncentrujących się na konstrukcji wykonanej przez człowieka skorzysta z..

Geometria kompleksu modelowania: 5 najlepszych wskazówek

Jak Feb 9, 2026

W całym moim wieloletniem doświadczeniem, pracując w ustawieniach studiów wideo i nauczania 3d art. Głodniom ..

Uzyskaj kreatywny z portretów i twarzą w twarz upłynniej

Jak Feb 9, 2026

Wszyscy mieliśmy grę z płynnym narzędziem w Photoshopie, ale w najnowszej iteracji Photoshop CC, Cegła suszona na s�..

Jak korzystać z funkcji "Match Font" Photoshopa

Jak Feb 9, 2026

Projektanci i kreacje ze wszystkich dziedzin są jak magoki w apetycie do zbierania jasnych i błyszczących rzeczy. Prawdopodobn..

Kategorie