Isi
- 01. Instal salinan baru WordPress
- 02. Hapus plugin default
- 03. Tambahkan jenis posting kustom
- 04. Antarmuka tambahkan / edit jenis posting kustom
- 05. Membuat siput penulisan ulang kustom
- 06. Tambahkan dukungan untuk bidang kustom
- 07. Tambahkan bidang khusus
- 08. Menyiapkan ladang
- 09. Buat file template WordPress
- 10. Buat tata letak posting tunggal lebar penuh
- 11. Mulailah loop dan buat konten
- 12. Gunakan PHP untuk memanggil nilai dinamis
- 13. Buatlah pelanggan uji dengan beberapa data dummy
- 14. Menangani kesalahan untuk setiap data yang hilang
- 15. Rapikan antarmuka
- 16. Kecualikan dari peta situs
Memiliki area yang memungkinkan pengguna untuk login dan mendownload atau melihat dokumen telah menjadi harapan konsumen, mulai dari kontrak telepon hingga utilitas.
Namun, ketika desainer bekerja dengan klien mereka, semuanya dapat dengan cepat terurai menjadi kekacauan email, tautan ke maket, dan lampiran.
Tutorial WordPress ini akan menunjukkan cara memperluas WordPress (layanan hosting web lain tersedia) menjadi portal klien yang mampu menyimpan dokumen, video, dan gambar, sehingga klien dapat mengakses semuanya di satu tempat. Portal ini akan melayani setiap pelanggan dengan tautan unik dan dilindungi kata sandi yang tidak muncul di navigasi biasa.
Jenis dan bidang pos khusus akan digunakan untuk menyimpan data, dan ini akan ditambahkan melalui plugin, untuk menghindari kehilangan data jika tema berubah. Tema akan sedikit diubah.
Memiliki portal klien memberi pelanggan kemudahan untuk mengakses semua file mereka di tempat yang sama, kapan pun mereka membutuhkannya, seperti saat menggunakan penyimpanan cloud. Ini memiliki serangkaian keunggulan bisnis, termasuk menunjukkan up-sells yang tersedia, atau dapat digunakan untuk memberikan gambaran umum tentang proses kerja dari awal dengan menguraikan hasil kerja secara visual.
Unduh file untuk tutorial ini.
- Bagaimana mengubah WordPress menjadi pembuat visual
01. Instal salinan baru WordPress
Salinan baru WordPress diinstal di server pengembangan, dan tema "understrap" telah dipilih untuk memberikan landasan dasar agar dapat mulai bekerja dengan cepat. Plugin UI Jenis Posting Kustom akan digunakan sehingga jenis posting kustom kami tidak bergantung pada tema.
02. Hapus plugin default
Jika ada plugin default yang disertakan dengan salinan WordPress, hapus plugin tersebut. Plugin yang diperlukan untuk tutorial ini adalah "Advanced Custom Fields" dan "Custom Post Type UI". "Editor Klasik" juga telah diinstal.
03. Tambahkan jenis posting kustom
Menggunakan antarmuka UI Jenis Posting Khusus, tambahkan jenis posting baru yang disebut "pelanggan". Saat memasukkan "Post type slug", gunakan garis bawah sebagai ganti spasi dan tulis dalam bentuk tunggal, karena ini akan mempermudah pembuatan template nanti. Awalan tu_ telah ditambahkan untuk mengurangi kemungkinan konflik.
04. Antarmuka tambahkan / edit jenis posting kustom
Tambahkan "pelanggan" berlabel jamak dan "pelanggan" tunggal, karena ini akan muncul di menu admin WordPress. Kapitalisasi diterima di bidang ini, yang akan membuat menu WordPress lebih rapi.
05. Membuat siput penulisan ulang kustom
Menggunakan awalan untuk slug tipe posting berarti pelanggan yang ditambahkan ke portal akan dibuat dengan link yang terlihat seperti "/ tu_customer / example-company". Ini tidak terlihat rapi, dan siput penulisan ulang kustom digunakan untuk memperbaikinya. Menyetel slug penulisan ulang ke "pelanggan" memungkinkan jenis pos khusus muncul sebagai / pelanggan / contoh-perusahaan.
06. Tambahkan dukungan untuk bidang kustom
Opsi terakhir yang diaktifkan untuk jenis posting kustom adalah "Supports> Custom field" yang ada di dekat bagian bawah halaman. Centang ini, lalu "tambahkan jenis posting" di bagian bawah halaman. Ini mengirimkan perubahan dan mendaftarkan jenis posting.
07. Tambahkan bidang khusus
Bidang kustom sekarang perlu ditambahkan dan ditetapkan ke jenis posting yang baru saja dibuat. Menambahkan grup bidang bernama "portal pelanggan" adalah langkah pertama, diikuti dengan menambahkan bidang khusus ke dalamnya dengan tombol tambahkan bidang. Kolom pertama "brief" akan disetel sebagai jenis kolom "file", yang memungkinkan admin mengunggah file di lokasi ini. Setel nilai kembali ke "file url".
08. Menyiapkan ladang
Bidang berikutnya yang akan ditambahkan adalah "kuesioner merek". Ini akan terdiri dari tautan ke formulir google yang harus diisi pelanggan. Jenis bidang yang paling cocok untuk ini adalah "URL". Metode yang sama ini dapat digunakan untuk semua bidang yang akan ditautkan ke layanan eksternal. Setelah selesai, gulir ke bawah ke kotak "location" dan gunakan logika "Show if Post Type" = "Customer". Kemudian terbitkan kelompok lapangan.
09. Buat file template WordPress
WordPress perlu mengetahui cara menampilkan dasbor pelanggan. Untuk ini, hierarki template WordPress diikuti untuk membuat file template untuk jenis posting tertentu ini. Buat file bernama single-tu_customer.php di direktori tema root.
10. Buat tata letak posting tunggal lebar penuh
Buka file single-tu_customer.php dan tambahkan fungsi WordPress get_header dan get_footer. Di antara fungsi-fungsi tersebut, buat tata letak lebar penuh untuk menampung konten yang sesuai dengan tema Anda.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Konten -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Mulailah loop dan buat konten
Di dalam elemen main>, panggil the_post dan buat elemen kontainer untuk menyimpan informasi. Gunakan informasi placeholder untuk mendapatkan gambaran tentang tata letak, dan mulai memberi gaya pada elemen. Elemen kartu akan menjadi kartu bootstrap dengan header, deskripsi, dan tautan.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Konten / div> div> Konten / div> div> Konten / div> / div> / div>? php; // akhir pengulangan. ?> var13 -> / main>! - #main ->
12. Gunakan PHP untuk memanggil nilai dinamis
Menggunakan fungsi "the_field", fungsi yang dilengkapi dengan plugin kolom kustom lanjutan, konten dinamis dari kolom kustom dimasukkan ke template pelanggan. 'Field_name' adalah nilai yang dimasukkan di langkah 3.
div> div> h5> Brief / h5> p> Ini adalah dokumen singkat asli Anda / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Buatlah pelanggan uji dengan beberapa data dummy
Mengakses dasbor WordPress, pelanggan baru dapat ditambahkan dari bilah sebelah kiri. Pelanggan> Tambahkan Pelanggan baru. Tampilan posting sudah tidak asing lagi, tetapi menggulir ke bawah akan mengungkapkan semua bidang kustom baru. Masukkan beberapa data uji untuk memastikan semuanya bekerja dengan benar.
14. Menangani kesalahan untuk setiap data yang hilang
Jika dokumen dilupakan, atau terlalu dini dalam proses untuk menyediakan dokumen tersebut, mungkin akan membingungkan pelanggan saat tombol tidak berfungsi. Menambahkan cek bahwa ada nilai sebelum menampilkannya memberikan kesempatan untuk menampilkan variasi "bidang yang hilang" dari kartu. Menambahkan kelas "dinonaktifkan" ke kartu ketika nilainya hilang akan memungkinkan kita untuk mengatur gaya kartu yang tidak tersedia.
? php if (get_field ('field_name')):?> var13 -> ditampilkan ketika field_name memiliki nilai? php else: // field_name mengembalikan false?> var13 -> ditampilkan ketika field tidak ada? php endif ; // akhir dari logika if field_name?> var13 ->
15. Rapikan antarmuka
Sekarang setelah struktur antarmuka diselesaikan, itu dapat ditata dengan benar. Dengan menggunakan CSS, tampilan kartu dan warna pada halaman dapat ditingkatkan. Warna navigasi telah diubah menjadi biru muda, dan arah pengguna telah ditingkatkan dengan menambahkan teks pengantar.
16. Kecualikan dari peta situs
Jenis postingan kustom tidak boleh ditemukan di hasil mesin telusur. Jenis postingan harus dikecualikan dari peta situs situs web, baik melalui plugin SEO, atau secara manual menggunakan tag meta dan robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Ingin mendesain situs web baru? Gunakan pembuat situs web yang brilian untuk membuat prosesnya sangat sederhana.
