Membuat fitur stories menggunakan wordpress

Teknis Jul 29, 2020

Halo internet, waktunya berbagi lagi setelah beberapa bulan nggak nulis rasanya seperti ada yang kurang kalau belum menulis, chuakzzz. Kali ini ada sesuatu yang akan ku bahas, ya mau apa lagi kalo ngga di ranah teknologi digital. Ngambil kasus yang sering banget orang pakai dan emang digandrungi juga oleh banyak khalayak, apalagi kalau bukan fitur stories.

Basa basi dulu, seperti blogger pada umumnya ...

Berawal dari snapchat yang memiliki fitur "snap" pada tahun 2013 dan ini yang membuat media sosial snapchat ini terlihat berbeda dari yang lain seperti fesbuk, twitter dengan keunggulan fitur "snap"nya. Karena adanya fitur pembeda itu banyak netizen hijrah ke snapchat, tapi ya gitu netizen musiman, karena ini bukan mata kuliah sejarah snapchat kalian bisa membacanya sendiri di tautan dibawah :

https://www.idntimes.com/tech/trend/izza-namira-1/perkembangan-fitur-stories-di-media-sosial/5

Disini kita akan belajar cara ngebikin fitur kayak story di instagram, dan di implementasikan dalam bentuk website. Tenang buat kalian yang phobia ngoding gausah khawatir, karena ngodingnya dikit dan banyak ngedisen visualnya.

Oke langsung praktek di lokal mesin ....

Kebutuhan

Penggunaan

Kenapa pakai docker segala ? ya because why not, emang karena lebih mudah untuk urusan konfigurasi dan mempercepat proses pengembangan.

Kemudian kita buat file .yml untuk konfigurasi wordpress beserta pendukungnya seperti mysql dan kawan kawan, akan kita atur sedemikian rupa seperti ini, copas aja biar cepet, toh kalian juga sering kopas tugas temen kan waktu kuliah . .

version: '3.3'

services:
   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     volumes:
       - wordpress_files:/var/www/html
     ports:
       - "80:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: ganteng
       WORDPRESS_DB_PASSWORD: passwot_ganteng

   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: my_db_root_password
       MYSQL_DATABASE: wordpress
       MYSQL_USER: ganteng
       MYSQL_PASSWORD: passwot_ganteng
volumes:
    wordpress_files:
    db_data:

Setelah itu kita jalankan proses compose, di proses compose docker akan mengeksekusi sesuai dengan konfigurasi yang dibikin di file .yml tadi, yaudah tinggal jalanin aja brow :


docker-compose up -d

Kemudian buka browser dan akses url localhost, installasi wordpress seperti biasa tinggal next, next saja. Unduh plugin stories utntuk wordpress, dan kemudian upload ke dasbor plugin

Web Stories for WordPress - Download the Beta
Web Stories for WordPress - Download the Beta

Langkah Unggah Plugin

  1. Ke pilihan Plugins > Add New.
  2. Klik Upload Plugin button yang ada diatas.
  3. Pilih file zip yang terunduh sebelumnya.
  4. Pijet Install Now.
  5. Setelah itu aktifkan pluginnya, biar bisa dipake

Ketika proses aktivasi sukses, akan muncul menu baru, bernama Stories

Oke, kemudian kita nyobain bikin setori sederhana dan penampakannya seperti ini, good looking bukan 😌

Kemudian, ngebikin visual dari story nya kurang lebih kayak dibawah cukup lah ya 5 slides 😁. hmm, btw si pluginnya juga nyediain semacam template gitu kalau gamau from scratch

Selanjutnya hasil desain tadi kita juga bisa lihat di tombol View Story, dan boom ceki ceki previewnya di bawah

Ya sesimpel itu kisanak, mbois bukan, kayak yang nulis ? Β tertarik mau coba bikin di situs wordpress kalian ?

le gak tertarik yowes πŸ”₯

Kesimpulan

Wordpress plugin buatan google ini masih tahap beta, yang menonjol saat ini dari sisi peforma menggunakan teknologi AMP dan kemudahan WYSIWYG-nya untuk mengolah visual dari storiesnya. jadi untuk bug sendiri masih terbuka lebar, kita bisa kontribusi juga lewat sini.

google/web-stories-wp
Web Stories WordPress plugin. Contribute to google/web-stories-wp development by creating an account on GitHub.

Flatburger

Imigran vrindavan

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.