BINUS Website Live-Editing

BINUS Website Live-Editing.
Peningkatan sistem tata cara pengelolaan; pengaturan website BINUS

Sidebar pada dashboard WordPress

Dashboard WordPress

Pada dasarnya Content Magement System (CMS) pada WordPress berada pada halaman “…/wp-admin” dan di dalamnya diletakkan pada sidebar yang berisi objek-objek yang harus dikelola oleh administrator website.

Pendekatan ini adalah pendekatan yang sangat umum digunakan pada back-end suatu website.

Konsep pengaturan pada Website BINUS

Berikut akan saya paparkan secara singkat bagaimana halaman pada website BINUS dibentuk/diatur dan pada kesempatan ini saya akan berfokus pada halaman Home saja dikarenakan halaman Home merupakan halaman yang menjadi tempat terjadinya banyak pengaturan.

Halaman Home pada website BINUS sendiri terdiri dari blok-blok yang merupakan kombinasi dari post, kategori, dan option. Sebagai contoh sebuah blok artikel pada homepage website BINUS merupakan kumpulan post yang ditarik berdasarkan kategori yang ditentukan oleh pengelola.

Blok artikel pada homepage website BINUS, merupakan kumpulan post terbaru dari kategory “News”

Kemudian terdapat pula blok yang berisi layout statis dimana pengelola website harus melakukan setting terhadap teks yang tampil.

Blok berisi teks yang dapat diatur oleh pengelola website (no. telfon), dapat terlihat pada blok tersebut pengelola dapat melakukan pengaturan nomor telepon customer service yang tampil.

Versi Lama Pengaturan Konten di Website BINUS
(Menggunakan Metode Standar)

Karena website BINUS yang dikelola oleh Digital-Media Development menggunakan engine WordPress maka sudah pasti akan ditemui halaman CMS yang sama dengan website-website WordPress lainnya seperti yang sudah saya utarakan pada pokok pembahasan awal.

Untuk pengaturan blok artikel sudah tentu kita akan menemui langkah berikut :

Layar Pengelolaan Posts

Masuk ke halaman “… /wp-admin”
Pilih Bagian Posts pada sidebar
Kelola post yang sudah ada, atau membuat baru dengan mengklik tombol add new
Apabila membuat post baru maka memilih kategori yang sesuai dengan blok pada home page

Lalu untuk blok dimana pengelola melakukan pengaturan terhadap teks/informasi yang tampil, maka langkah yang umumnya dilakukan adalah menuju halaman settings kemudian mencari field informasi tersebut dan menggantinya.

Layar pengaturan berbagai informasi

Pengaturan Konten Website BINUS Saat Ini
(Menggunakan Metode live editing)

Bersamaan dengan momen pergantian Corporate Identity dari BINA NUSANTARA, Digital-Media Development membawa perubahan besar pada proses pengaturan konten pada website BINUS yaitu dengan menerapkan konsep live-editing dengan tujuan mempermudah pengelolaan konten untuk pengelola yang tidak terlalu “techno-savvy” dan agar para pengelola tersebut lebih fokus terhadap kualitas konten yang mereka buat daripada menghabiskan energi untuk mengerti flow CMS seperti langkah sebelumnya.

“Bagaimanakah sistem Live-Edit tersebut ?”

Sesuai dengan namanya maka sistem ini membuat proses perubahan (editing) secara langsung (Live). Ketika pengelola situs menjumpa sebuah blok pada homepage yang ingin ia lakukan perubahan, baik itu merubah judul suatu post, merubah peruntukan kategori pada blok tersebut atau bahkan bila ingin menambahkan post pada blok tersebut dapat dilakukan dengan langsung, cepat dan mudah.

Live-Edit pada Blok Artikel

Dapat terlihat pada blok tersebut terdapat tombol-tombol oranye pada setiap objek, tombol ini berisi perintah yang terkait dengan objek yang diwakilinya, misalkan pada objek post maka tombol tersebut akan memiliki action untuk edit post, lalu pada objek blok artikel maka tombol tersebut akan memiliki action untuk add post & change category.

Apabila tombol oranye tersebut ditekan maka akan memunculkan sebuah popup berisi tampilan sesuai dengan action yang kita jalankan. Sebagai contoh berikut adalah popup yang muncul ketika action edit post/add post diklik.

Popup untuk action Edit Post

Dari sini pengelola website dapat langsung melakukan perubahan post tanpa harus melakukan langkah panjang seperti membuka “…/wp-admin”-post, dst. Setelah perubahan dirasa cukup maka langkah selanjutnya tinggal mengklik tombol update lalu tutup popup tersebut dan objek yang kita edit tadi pun akan langsung berubah tanpa harus melakukan reload browser.

Berikut kumpulan beberapa tampilan mengenai sistem live-edit ini.