WordPress ile bir müşteri portalı oluşturun

Sep 15, 2025
Nasıl Yapılır
Build a client portal with WordPress
(Resim Kredi: Web Tasarımcısı)

Kullanıcıların giriş yapmalarını ve indirmelerini sağlayan veya görüntülemenizi sağlayan bir alana sahip olmak, tüketiciler tarafından telefon sözleşmelerinden yardımcı programlara kadar bekleniyor.

Ancak, tasarımcılar müşterileriyle çalışırken, her şey hızlı bir şekilde bir e-posta karmaşasına ayrılabilir, bağlantılar mockups ve ekler.

Bu Wordpress öğretici WordPress'in nasıl genişletileceğini gösterecek (diğer ağ sağlayıcısı Hizmetler mevcuttur) Belgeleri, video ve çizimleri saklayabilen bir müşteri portalına, böylece bir müşteri hepsine tek bir yerde erişebilir. Portal, her müşteriye normal navigasyonda görünmeyen benzersiz ve şifre korumalı bir bağlantıya sahip olacaktır.

Özel yayın türleri ve alanları verileri saklamak için kullanılacaktır ve bu, tema değişikliği yapılması durumunda veri kaybını önlemek için eklentiler aracılığıyla eklenecektir. Tema biraz değiştirilecektir.

Bir müşteri portalına sahip olmak, müşterilere, dosyalarını aynı yerde, ne zaman ihtiyaç duyduklarında, kullanırken olduğu gibi, Bulut depolama . Kullanılabilir satışlar da dahil olmak üzere bir dizi iş avantajı vardır veya teslimatları görsel olarak özetleyerek iş sürecine genel bakış sunmak için kullanılabilir.

Dosyaları indirin Bu eğitim için.

  • WordPress'i görsel bir kurucuya nasıl dönüştürürsünüz?

01. Taze bir WordPress kopyası takın

Geliştirme sunucusunda bir WordPress'in yeni bir kopyası kurulur ve "UnderStrap" teması, işe hızlıca çalışmaya başlamak için bir kazan plakası temeli vermek için seçilmiştir. Özel Post Tipi UI eklentisi kullanılacaktır, böylece özel yayın türlerimiz temadan bağımsızdır.

02. Varsayılan eklentileri kaldırın

Varsayılan eklentiler WordPress'in kopyasıyla birlikte geldiğinde, bunları silin. Bu eğitim için gereken eklentiler "Gelişmiş Özel Alanlar" ve "Özel Post Tipi UI" dir. "Klasik Editör" de kuruldu.

03. Özel bir mesaj türü ekleyin

Özel Post Tipi UI arayüzünü kullanarak, "Müşteri" adlı yeni bir yazı türü ekleyin. "POST TİPİ SLUG'I" girerken, boşluklar yerine alt çizgi kullanın ve tekil formda yazın, çünkü daha sonra şablonlar oluşturmayı kolaylaştıracaktır. Önek TU_ bir çatışma şansını azaltmak için eklendi.

04. Özel Post Tipi Arayüz Ekle / Düzenle

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

Hem tekil hem de çoğul etiketleri ekle (Resim Kredi: Web Tasarımcısı)

WordPress Yönetici menüsünde görüneceği için çoğul etiketli bir "Müşteriler" ve tekil bir "Müşteri" ekleyin. Bu alanlarda büyük harf kullanımı kabul edilir, bu da WordPress menüsünü düzeltmelidir.

05. Özel bir yeniden yazma sümüklüsü oluşturun

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

Daha iyi bir kullanıcı deneyimi için özel yeniden yazma sümüklüsünü kullanın (Resim Kredi: Web Tasarımcısı)

Gönderi Tipi Sümüklüsü için bir önek kullanmak, portala eklenen müşterilerin "/ tu_customer / örnek şirket" gibi görünen bir bağlantıyla oluşturulacağı anlamına gelecektir. Bu düzenli görünmüyor ve özel yeniden yazma sümüklüsü bunu geliştirmek için kullanılır. Yeniden yazma sümüklücülünü "Müşteriler" a ayarlamak, özel posta tipinin / müşteriler / örnek şirket olarak görünmesini sağlar.

06. Özel alanlar için destek ekleyin

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

"Özel Alan" seçeneğini işaretleyin ve değişiklikleri gönderin. (Resim Kredi: Web Tasarımcısı)

Özel posta türü için etkin olan son seçenek, sayfanın alt kısmında bulunan "destek ve GT; özel alan" dir. Bunu işaretleyin ve ardından sayfanın altındaki "Mesaj türü ekleyin". Bu, değişiklikleri gönderir ve yayın türünü kaydeder.

07. Özel alanlar ekleyin

Build a client portal with WordPress: Add custom fields

Şimdi yeni posta türünüze özel alanlar eklemeniz gerekir. (Resim Kredi: Web Tasarımcısı)

Özel alanların şimdi eklenmesi ve daha yeni oluşturulan post türüne atanması gerekir. "Müşteri Portalı" adlı bir alan grubu eklemek ilk adımdır, ardından Alan Ekle düğmesiyle özel alanlar ekleyerek. "Kısa" ilk alan, yöngünün bu yere bir dosya yüklemesini sağlayan "dosya" alan türü olarak ayarlanacaktır. İade değerini "Dosya URL'si" olarak ayarlayın.

08. Alanları ayarlayın

Eklenecek bir sonraki alan "marka anketi" dir. Bu, müşterinin doldurması gereken bir Google formuna bağlantıdan oluşacaktır. Bunun için en uygun alan tipi "URL" dir. Bu aynı yöntem, harici bir hizmete bağlanacak tüm alanlar için kullanılabilir. Tamamlandığında, "Konum" kutusuna kaydırın ve "SHOW POST TİPİ" = "Müşteri" ni kullanın. Sonra alan grubunu yayınlayın.

Generate CSS

50 £ kurtarmak için şimdi CSS oluşturmak için biletlerinizi ayırtın (Görüntü Kredi: Getty / Gelecek)

09. WordPress şablon dosyasını oluşturun

WordPress'in bir müşteri gösterge panosunu nasıl gösterileceğini bilmesi gerekir. Bunun için, WordPress şablon hiyerarşisi bu özel posta türü için bir şablon dosyası oluşturmak için takip edilir. Kök Tema dizininde Single-tu_customer.php adlı bir dosya oluşturun.

10. Tam genişliğinde tek bir yazı düzeni oluşturun

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

İçeriğiniz için tam genişlik düzeni yapın (Resim Kredi: Web Tasarımcısı)

Single-tu_customer.php dosyasını açın ve Get_Header ve Get_Footer WordPress işlevlerini ekleyin. Bu işlevler arasında, temanızla birlikte çalışan içeriği tutmak için tam genişlik bir düzen oluşturun. 

 & lt;? Php get_header ();? & Gt;
& lt; div sınıf = "sarmalayıcı" id = "tek sarmalayıcı" & gt;
& lt; div sınıf = "konteyner" id = "içerik" tabindex = "- 1" & gt;
& lt; div sınıf = "satır" & gt;
& lt; div sınıf = "Col-MD Content-Area" id = "Birincil" & GT;
& lt; ana sınıf = "site-ana" id = "ana" & gt; & lt;! İçerik - & GT; & lt; / Main & Gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .Row - & gt;
& lt; / div & gt; & lt;! - #Content - & GT;
& lt; / div & gt; & lt;! - # tek sarmalayıcı - & gt;
& lt;? php get_footer ();? & gt;

11. Döngüyü başlatın ve içeriği oluşturun

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

İçeriğinizi belirlemek için yer tutucuları kullanın (Resim Kredi: Web Tasarımcısı)

Üzerinde, Main & Gt; Öğe, The_Post'u arayın ve bilgi tutmak için konteyner öğelerini oluşturun. Düzen hakkında bir fikir edinmek için yer tutucu bilgilerini kullanın ve öğeleri taramaya başlayın. Kart elemanları, bir başlık, açıklama ve bir bağlantı ile önyükleme kartları olacaktır. 

 & lt; ana sınıf = "site-ana" id = "ana" & gt;
& lt;? php iken (HARED_POSTS ()): the_post (); ? & gt;
& lt; div sınıf = "konteyner" & gt;
& lt; div sınıf = "satır" & gt;
& lt; div class = "col-sm-4" & gt; içerik; / div & gt;
& lt; div class = "col-sm-4" & gt; içerik; / div & gt;
& lt; div class = "col-sm-4" & gt; içerik; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
ve lt;? php endandığında; // döngünün sonu. ? & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Dinamik değerlerde aramak için PHP kullanın

"The_field" işlevini kullanarak, gelişmiş özel alanlar eklentisi ile birlikte gelen bir işlev, özel alanlardan dinamik içerik müşteri şablonuna girilir. 'Field_name', 3. adımda girilen değerdir. 

 & LT; DIV sınıfı = "Kart Metin Merkezi" & GT;
& lt; div class = "kart gövdesi" & gt;
& lt; H5 sınıfı = "kart başlığı" & gt; kısa ve lt; / h5;
& lt; p sınıfı = "kart metni" & gt; bu, orijinal kısa belgenizdir; / ​​P & GT;
& lt; a href = "& lt;? php the_field ('kısa');? & gt;" Hedef = "Yok" Sınıfı = "BTN BTN-PROGRAMI" & GT; OPEN & LT; / A & GT;
& lt; / div & gt;
& lt; / div & gt;

13. Bazı kukla verilerle test müşterisi yapın

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

Kukla bir müşteri yapmak için WordPress Dashboard'a gidin. (Resim Kredi: Web Tasarımcısı)

Wordpress Dashboard'a erişme, sol çubuğundan yeni bir müşteri eklenebilir. Müşteriler & GT; Yeni Müşteri ekle. Post görünüm tanıdık olacak, ancak aşağı kaydırma tüm yeni özel alanları ortaya çıkarır. Her şeyin doğru çalıştığından emin olmak için bazı test verileri girin.

14. Eksik veri için hataları kullanın

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

Belgeler mevcut değilken net olduğundan emin olun. (Resim Kredi: Web Tasarımcısı)

Bir belge unutulursa, yoksa bu belgenin mevcut olması için süreçte çok erken, düğme çalışmadığında bir müşteri için kafa karıştırıcı olabilir. Kartın "eksik alan" varyasyonunu gösterme şansını göstermeden önce bir değerin var olduğunu kontrol edin. Değer eksik olduğunda karta "devre dışı" bir sınıf ekleme, mevcut olmayan kartları taramamıza izin verir. 

 & lt;? Php if (GET_FIELD ('field_name')):? & Gt;
field_name değeri olduğunda görüntülenir
& lt;? php else: // field_name yanlış? & gt döndürdü;
Alan yokken görüntülenir
& lt;? php endif; // IF field_name mantığının ucu? & gt;

15. Arayüzü toparlayın

Artık arayüzün yapısının sonuçlandırıldığı, düzgün şekilde tasarlanabilir. CSS'yi kullanma, sayfadaki kartların ve renklerin görünümü geliştirilebilir. Navigasyonun rengi daha açık bir mavi olarak değiştirildi ve tanıtım metni eklenerek kullanıcı yönü geliştirildi.

16. Site haritasından hariç tutun

Özel post türleri arama motorlarında sonuçlanmamalıdır. Mesaj türü, web sitesinin SEO eklentisi aracılığıyla veya bir meta etiketi ve robots.txt kullanarak manuel olarak hariç tutulması gerekir. 

 & lt; meta adı = "robotlar" içeriği = "noindex, nofollow" / & gt;
Kullanıcı Ajanı: *
Disallow: / Müşteriler /

Yeni bir web sitesi tasarlamak ister misiniz? Parlak kullanın Web Sitesi Oluşturucu işlemi süper basit hale getirmek için.

İlgili Makaleler:

  • 2019'daki En İyi WordPress Hosting Hizmetleri
  • Müşterilere perding 13 harika araç
  • WordPress Web Siteleri: 14 Muhteşem Örnekler

Nasıl Yapılır - En Popüler Makaleler

Eski okul anaglif etkisi yaratın

Nasıl Yapılır Sep 15, 2025

(Resim Kredi: Travis Knight) Bir anaglif etkisi, içeriği takdir etmek için kırmızı ve mavi gözlük takmanız g..

Nextjs / reaksiyona göre SEO dostu bir kafa bileşeni oluşturun

Nasıl Yapılır Sep 15, 2025

(Görüntü Kredi: Pexels üzerinde negatif alan) ReACT güçlü bir JavaScript kütüphanesi olsa da, basit, işleyi..

Dönüşüm Oranı Optimizasyonu Bilimi Usta

Nasıl Yapılır Sep 15, 2025

Dönüşüm Oranı Optimizasyonu (CRO), mevcut trafikten dönüşümleri en üst düzeye çıkarma işlemidir. Örneğin, ortalam..

Geliştirici becerilerinizi geliştirmek için 4 ipucu

Nasıl Yapılır Sep 15, 2025

(Resim Kredi: Robert Pizzo) Süper Direktör Direktörü Dan Alışveriş Merkezi prova ipuçların�..

Yaratık Anatomisi Usta Nasıl Yapılır

Nasıl Yapılır Sep 15, 2025

Gelince inanılır yaratıklar çizim , iskelet, kaslı ve vasküler sistemlere odaklanmanız gerekir. Bu işlem 3..

Büyülü parlayan runları nasıl boyanır

Nasıl Yapılır Sep 15, 2025

Bu eğitimde, parlayan gibi görünen mistik runları nasıl boyayacağınızı gösteririm. Parlayan şeyleri boyamak için form..

Vektör Araçları Kullanma: Bir Web Tasarımcısı'nın Yaklaşımı

Nasıl Yapılır Sep 15, 2025

Bir web tasarımcısıysanız, Photoshop'un şu anda açık ve bilgisayarınızda çalışması için iyi bir şans var. Hadi ile yüzleşelim - Photoshop her zaman web tasarımı için işbi..

GIF'lerden daha fazla nasıl elde edilir

Nasıl Yapılır Sep 15, 2025

Gifler sorunsuz döngülerde çalışır; Rebecca alay 'Mükemmel döngü' olarak tanımlanır. Bu döngü ideal olarak ilk ve ..

Kategoriler