Kalau kamu punya website berbasis WordPress, apalagi jenis web sekolah atau portal berita, pasti pernah ketemu masalah klasik, foto yang di-upload ukurannya kegedean. Niatnya cuma mau pasang dokumentasi kegiatan atau gambar berita, tapi efeknya malah bikin website jadi lemot.
Saya memang menerapkan konsep ini di website saya, momenpedia.com, sebuah platform undangan digital berbasis SAAS. Di sana user bisa buat undangan sendiri sehingga bebas upload foto sendiri untuk kebutuhan undangan.
Dari pengalaman itulah saya sadar, masalah ukuran gambar itu nggak cuma terjadi di platform saya, tapi juga sangat umum di website bahkan web berbasis WordPress seperti beberapa web sekolah yang saya handle.
Kebanyakan user upload foto langsung dari HP/Kamera/PC tanpa di kompres dulu. Hasilnya:
Di web sekolah yang saya handle kondisinya mirip. Foto kegiatan, liputan acara, atau galeri biasanya di-upload apa adanya oleh admin. Lama-lama:
Dari pengalaman saya, format WebP itu solusi paling realistis. Ukurannya jauh lebih kecil dibanding JPG atau PNG tapi kualitas visualnya tetap terjaga.
Gambaran sederhananya:
Artinya tanpa minta user ribet kompres manual, performa website bisa terjaga.
Alurnya simpel:
Jadi cocok banget untuk:
Buat pengguna website berbasis WordPress, kamu bisa pakai cara ini. Kodenya bisa dipasang di:
/**
* This snippet automatically converts Images to WebP
* Source https://key2blogging.com
*/
add_filter('wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp');
function wpturbo_handle_upload_convert_to_webp($upload) {
if (in_array($upload['type'], ['image/jpeg', 'image/png', 'image/gif'])) {
$file_path = $upload['file'];
if (extension_loaded('imagick') || extension_loaded('gd')) {
$image_editor = wp_get_image_editor($file_path);
if (!is_wp_error($image_editor)) {
// Set WebP quality (adjust as needed)
$quality = 80; // Adjust between 0 (low) to 100 (high)
$image_editor->set_quality($quality); // Set quality for WebP conversion
$file_info = pathinfo($file_path);
$dirname = $file_info['dirname'];
$filename = $file_info['filename'];
$def_filename = wp_unique_filename($dirname, $filename . '.webp');
$new_file_path = $dirname . '/' . $def_filename;
$saved_image = $image_editor->save($new_file_path, 'image/webp');
if (!is_wp_error($saved_image) && file_exists($saved_image['path'])) {
// Update the upload data to use the WebP image
$upload['file'] = $saved_image['path'];
$upload['url'] = str_replace(basename($upload['url']), basename($saved_image['path']), $upload['url']);
$upload['type'] = 'image/webp';
// Optionally delete the original file
@unlink($file_path);
}
}
}
}
return $upload;
}Begitu kode ini aktif, setiap foto JPG atau PNG yang di-upload di akan otomatis berubah jadi WebP. User tetap upload seperti biasa tanpa perlu mikirin ukuran.
Berdasarkan pengalaman saya mengelola Momenpedia dan lihat banyak website WordPress, cara ini membantu banget:
Intinya, ini solusi praktis tanpa perlu mengubah kebiasaan pengguna.
Semoga sharing ini bermanfaat buat kamu yang mengelola website berbasis WordPress, terutama untuk web sekolah atau berita yang tiap hari ketemu urusan upload foto 👍
Kali ini saya akan berbagi bagaimana cara menampilkan Sales Proof di website lain, yang datanya diambil dari website utama yang sudah terinstal plugin WeddingSaas Pro (WDSPro).
Tujuannya, kita ingin menampilkan notifikasi pembelian secara di berbagai halaman atau website berbeda misalnya landing page promosi, blog event, atau microsite penawaran.
Dan caranya cukup sederhana, yaitu dengan menggunakan REST API.
Langsung saja silahkan ikuti panduan berikut:
1. Mengirim Data dari Website Sumber
Langkah pertama, kita perlu membuat endpoint REST API di website sumber agar data sales bisa diambil oleh website lain.
Untuk itu, silakan tempelkan kode berikut di file functions.php pada theme (atau child theme) di website yang menggunakan plugin WDSPro:
define('SALESPROOF_API_TOKEN', 'isi_token_kamu_disini');
define('SALESPROOF_API_CACHE_DURATION', 60);
define('SALESPROOF_API_MAX_NOTIF', 10);
add_action('rest_api_init', function () {
register_rest_route('salesproof/v1', '/sales', [
'methods' => 'GET',
'callback' => 'salesproof_api_sales_db',
'permission_callback' => function () {
$headers = getallheaders();
$token = '';
if (!empty($headers['Authorization']) && preg_match('/Bearer\s+(.*)$/i', $headers['Authorization'], $matches)) {
$token = sanitize_text_field($matches[1]);
}
return hash_equals(SALESPROOF_API_TOKEN, $token);
}
]);
});
function salesproof_api_sales_db() {
global $wpdb;
$cache_key = 'salesproof_sales_cache';
$cached = get_transient($cache_key);
if ($cached !== false) {
return rest_ensure_response($cached);
}
$data = [];
$results = $wpdb->get_results("
SELECT user_id, summary, total, created_at
FROM {$wpdb->prefix}wds_invoice
WHERE total >= 0 AND status = 'completed'
ORDER BY ID DESC
LIMIT " . intval(SALESPROOF_API_MAX_NOTIF)
);
foreach ($results as $row) {
$user = get_userdata($row->user_id);
$nama = ($user && $user->display_name) ? $user->display_name : 'Seseorang';
// Parsing kolom serialized summary
$summary = maybe_unserialize($row->summary);
$produk = isset($summary['product_title']) ? $summary['product_title'] : 'Produk';
$time_ago = human_time_diff(strtotime($row->created_at), current_time('timestamp')) . ' yang lalu';
$data[] = [
'nama' => esc_html($nama),
'produk' => esc_html($produk),
'waktu' => esc_html($time_ago),
'total' => (float) $row->total,
];
}
set_transient($cache_key, $data, SALESPROOF_API_CACHE_DURATION);
return rest_ensure_response($data);
}
Kode di atas akan:
2. Menampilkan Sales Proof di Website Tujuan
Setelah REST API tersedia, langkah selanjutnya adalah menampilkan notifikasi tersebut di website lain (Web B).
Kamu hanya perlu menambahkan HTML dan JavaScript berikut di halaman mana saja, bisa di dalam widget HTML:
<div id="salesproof-widget" style="position: fixed; bottom: 50px; left: 20px; z-index: 9999;"></div>
<style>
/* Salesproof Notification */
.salesproof-box {
position: relative;
background: #fff;
border: 1px solid #ddd;
padding: 10px 15px;
margin-top: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
max-width: 250px;
font-family: sans-serif;
font-size: 14px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
z-index: 9999 !important;
}
/* Animasi muncul */
@keyframes fadeInUp {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.salesproof-box img {
width: 48px;
height: 48px;
border-radius: 50%; /* Ikon bulat */
object-fit: cover;
margin-right: 10px;
}
.salesproof-box .salesproof-text {
flex-grow: 1;
}
.salesproof-box .salesproof-text strong {
font-weight: 600;
font-size: 13px;
}
.salesproof-box .salesproof-text em {
font-size: 12px;
font-style: normal;
}
.salesproof-box .salesproof-text small {
font-size: 10px;
color: #555;
}
@media (max-width: 768px) {
#salesproof-widget {
bottom: 80px;
left: 15px;
max-width: 90%;
}
}
</style>
<script>
(function () {
const API_URL = 'https://namadomain.com/wp-json/salesproof/v1/sales'; // Ganti nama domain sumber Rest API
const TOKEN = 'isi_token_kamu_disini'; // Ganti token API kamu
const ICON_URL = 'https://namadomain.com/wp-content/uploads/logo-andi.png';
fetch(API_URL, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + TOKEN
}
})
.then(res => res.json())
.then(data => {
if (!Array.isArray(data)) return;
let container = document.getElementById('salesproof-widget');
// Filter hanya total > 0
// Jika Produk Trial ingin dimunculkan ubah jadi => 0
const filteredData = data.filter(item => item.total > 0);
filteredData.forEach((item, index) => {
// Batasi Jumlah kata pada nama
const nameParts = item.nama.trim().split(' ');
const displayName = nameParts.slice(0, 2).join(' ');
const box = document.createElement('div');
box.className = 'salesproof-box';
box.innerHTML = `
<img src="${ICON_URL}" alt="icon">
<div class="salesproof-text">
<strong>${displayName}</strong> membeli <em>${item.produk}</em><br>
<small>${item.waktu}</small>
</div>
`;
// Tampilkan dengan delay per notifikasi
setTimeout(() => {
container.appendChild(box);
box.style.opacity = 1;
// Auto hide setelah 4 detik
setTimeout(() => {
box.style.opacity = 0;
setTimeout(() => box.remove(), 500);
}, 4000);
}, index * 5000); // Delay 5 detik antar notifikasi
});
})
.catch(err => console.error('Salesproof API error:', err));
})();
</script>Script ini akan:
⚠️ Catatan Penting!
Cara ini cukup simple dan efektif, tapi ada beberapa hal yang perlu diperhatikan:
✨ Saran Penggunaan Jangka Panjang
Cara yang saya tunjukkan ini merupakan versi manual dan sederhana, sangat cocok untuk keperluan ringan seperti uji coba atau kebutuhan cepat di satu-dua website.
Namun jika kamu berencana menggunakannya secara berkelanjutan atau ingin tampilan yang lebih rapi dan lebih aman, saya sangat menyarankan untuk menjadikannya sebuah plugin.
Dengan menjadikannya plugin, kamu bisa menyimpan URL endpoint dan token API langsung di backend, sehingga tidak muncul di source code dan lebih sulit diakses oleh pihak luar.
Perlu dicatat juga bahwa meskipun metode diatas ini sudah menggunakan token dalam Authorization header, dan tidak bisa diakses hanya dengan menambahkan ?token= di URL, token tetap bisa terlihat jika kamu menyimpannya di script JavaScript frontend. Jadi, menyembunyikannya di backend melelui plugin akan jauh lebih aman.
🚀 Alternatif Lebih Praktis dan Lebih Aman Pakai Plugin Sales Notify Pro
Kalau kamu ingin versi yang lebih simpel dan langsung pakai, saya sudah buatkan plugin Salesproof versi ringan dan telah di optimasi.
Plugin ini:
Cek selengkapnya Plugin Sales Notify Pro disini:
https://mindflow.web.id/downloads/salesnotify-pro/
Di zaman sekarang, siapa sih yang nggak kenal media sosial? Dari anak-anak, remaja, sampai orang tua, hampir semua punya akun Instagram, Facebook, TikTok, atau bahkan YouTube. Nah, ternyata, media sosial nggak cuma seru buat berbagi momen pribadi, tapi juga bisa jadi senjata rahasia buat sekolah, lho!
1. Jembatan Komunikasi yang Super Cepat
Kalau dulu semua pengumuman harus lewat surat atau ditempel di papan mading, sekarang cukup posting di Instagram atau WhatsApp, semua orang bisa langsung tahu. Murid, orang tua, bahkan alumni bisa langsung update tanpa ribet. Jadi, info penting kayak jadwal lomba, event sekolah, atau perubahan jadwal bisa sampai dengan cepat dan praktis.
2. Branding Sekolah Biar Makin Keren
Media sosial itu ibarat etalase digital. Sekolah bisa menunjukkan ke dunia luar berbagai prestasi, kegiatan seru, sampai program-program unggulan mereka. Mau promosi program tahunan? Mau nunjukkin betapa kreatifnya murid-murid di acara pensi? Semua bisa diposting dengan gaya asik dan kreatif. Jadi, calon murid dan orang tua juga makin tertarik, deh!
3. Membangun Komunitas yang Solid
Lewat media sosial, sekolah bisa lebih dekat dengan warganya. Bikin konten interaktif, misalnya kuis, Q&A bareng guru, atau sekadar repost foto kegiatan murid, bisa banget bikin rasa kekeluargaan makin kuat. Sekolah jadi terasa bukan cuma tempat belajar, tapi juga rumah kedua yang penuh semangat
4. Ruang Ekspresi untuk Murid
Banyak sekolah sekarang kasih kesempatan murid buat ngelola akun media sosial resmi mereka. Ini bukan cuma seru, tapi juga ngajarin mereka soal tanggung jawab, kreativitas, dan teamwork. Siapa tahu, dari sini muncul calon content creator hebat atau social media specialist masa depan, kan?
5. Menginspirasi Lewat Konten Positif
Sekolah juga bisa jadi sumber inspirasi buat masyarakat luas. Misalnya dengan berbagi tips belajar, motivasi harian, atau cerita-cerita inspiratif dari guru dan murid. Satu postingan positif bisa banget bikin hari seseorang jadi lebih semangat.
Akhir kata, media sosial itu ibarat pisau bermata dua, tergantung gimana kita pakainya. Tapi kalau sekolah bisa mengelola dengan baik, media sosial bakal jadi teman setia yang membantu mengembangkan citra positif dan membangun komunitas yang keren banget!
Jadi, yuk, manfaatkan media sosial dengan bijak dan kreatif!
.code-wrapper {
position: relative;
margin-bottom: 1.5em;
}
.code-wrapper pre {
background: #1e1e1e;
color: #d4d4d4;
padding: 16px;
border-radius: 8px;
font-family: Consolas, monospace;
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
overflow: auto;
max-height: 400px;
margin: 0;
}
/* Tombol salin tidak ikut scroll */
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background: #00aaff;
color: #fff;
border: none;
padding: 6px 12px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
opacity: 0.85;
z-index: 10;
}
.copy-button:hover {
opacity: 1;
}
Media sosial pertama kali hadir pada tahun 1997 melalui platform Sixdegrees.com, yang memiliki fungsi serupa dengan Facebook dan media sosial lainnya yang kita kenal sekarang. Banyak orang mulai menggunakan media sosial sebagai sarana untuk berinteraksi dan menjalin hubungan secara luas.
Hingga saat ini, media sosial memiliki banyak peran penting dalam kehidupan masyarakat, mulai dari sarana hiburan, pemasaran, hingga berbagai keperluan lainnya. Ada banyak platform yang dapat digunakan, seperti Facebook yang didirikan oleh Mark Zuckerberg dan kini juga memiliki WhatsApp serta Instagram. Selain itu, ada juga platform populer lain seperti Twitter, TikTok, dan masih banyak lagi.
Media sosial telah berkembang menjadi ruang bagi kita semua untuk berbagi, berkomunikasi, dan menemukan hal-hal baru dari seluruh dunia.
Media Sosial Lebih dari Sekadar Hiburan, Ini Manfaatnya!
Berikut adalah beberapa manfaat media sosial dalam kehidupan masyarakat
1. Sumber Informasi Terbaru
Media sosial juga menjadi salah satu tempat tercepat untuk mendapatkan informasi. Tak hanya sekadar hiburan, kita bisa mendapatkan berita yang aktual dan faktual. Banyak orang memanfaatkan media sosial sebagai sarana untuk selalu up-to-date dengan berbagai perkembangan.
2. Berinteraksi dengan Orang Lain
Salah satu alasan utama orang menggunakan media sosial adalah untuk berinteraksi dengan lebih banyak orang. Entah itu teman lama yang sudah jarang terdengar kabarnya atau teman baru yang kita temui secara tak sengaja, media sosial bisa menjadi jembatan penghubung. Jangkauannya yang luas juga memungkinkan kita untuk berkomunikasi dengan mudah, bahkan dengan teman-teman di luar negeri.
3. Sarana Hiburan
Selain untuk berkomunikasi, media sosial sering kali menjadi tempat yang asyik untuk hiburan. Banyak orang menghabiskan waktu di sana untuk menonton konten yang menghibur, dari video lucu hingga musik. Jadi, tak heran banyak yang merasa betah karena selalu ada hal menarik yang bisa dilihat.
4. Mendorong Kreativitas
Media sosial punya banyak konten inspiratif yang bisa meningkatkan kreativitas kita. Misalnya, Pinterest yang banyak digunakan untuk mencari inspirasi desain atau Instagram yang penuh dengan ide kreatif. Dari sana, banyak orang merasa termotivasi untuk mencoba hal-hal baru.
5. Mendukung Promosi dan Bisnis
Sudah banyak bukti bahwa media sosial bisa jadi alat yang ampuh untuk promosi dan bisnis. Dengan jangkauannya yang luas, media sosial dapat membantu bisnis menjangkau pelanggan lebih cepat dan lebih luas, terutama jika bekerja sama dengan influencer yang punya pengaruh besar.
6. Membangun Komunitas Online
Media sosial juga membantu kita terhubung dengan orang-orang yang memiliki minat yang sama. Kita bisa bergabung atau bahkan membentuk komunitas yang berfokus pada hobi atau topik tertentu. Di sana, kita bisa berbagi cerita dan bertukar pikiran.
Kesimpulan
Media sosial telah menjadi bagian penting dari kehidupan sehari-hari kita. Namun, agar manfaatnya terasa maksimal, kita perlu bijak dalam penggunaannya. Dengan demikian, media sosial bisa menjadi sumber inspirasi, informasi, dan hiburan tanpa mengganggu keseharian kita atau merugikan diri sendiri maupun orang lain.
[plyr-wp url=”https://youtu.be/AQpEIZ8dNcU?si=uwKH0675tqOn208C” color=”#279ca6″]