چطور نوتیفیکیشن برای سایت وردپرسی درست کنیم؟

امروز یک آموزش مفصل دارم، آموزش اینکه چطور داخل سایت وردپرسی نوتیفیکیشن برای امور مختلف ایجاد کنیم؟

اولین مدل نوتیفیکیشن اینطور است که برای بروز رسانی های سایت مثلا پستهای جدید یا خوانده نشده، یا محصولات جدیدی که اضافه شده، عددی نمایش داده شود. همانند نوتیفیکیشن های سیستم عامل های اندرویدی و iOS که یک Badge روی آیکن اپ ها نمایش می دهد، می توانید در تب مرورگر بروز رسانی های سایت را به کاربر اطلاع دهید تا به سایت شما برگردد و بعد از دیدن پست ها به صورت خودکار این عدد صفر شود.

برای این مدل نوتیفیکیشن و سایر مواردی که در ادامه بیان می کنم بایستی افزونه WPCode را داشته باشید، این افزونه دارای دو نسخه رایگان و پولی است، برای کارهای ما نسخه رایگان کافیست ولی ممکن است در زمانی که شما این پست را مطالعه می کنید نیاز باشد نسخه پولی را تهیه کنید.

برای شروع بایستی یک Snippets جدید همانند تصویر زیر اضافه کنید.

یک عنوان برای آن انتخاب کنید، مثلا counter noti بگذارید که متوجه شوید که این برای تعداد مطالب ناخوانده است. کد های زیر را می توانید داخل snippet خود کپی کنید.

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

سپس shortcode آن را به صورت auto insert داخل قالب قرار دهید.

اگر بخواهید آیکن تبی که سایت شما در آن باز است را بابت بروز رسانی تغییر دهید کد های زیر را استفاده کنید، آدرس های مربوط به فاویکن را با فاویکن دلخواه خود جابجا کنید. در کد زیر ابتدا فاویکن فعلی را آدرس دهید، و در دومین ادرس فاویکن دلخواه را قرار دهید. می توانید فاویکن سایت خود را با دو رنگ قرار دهید.

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>
 
<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
 
function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

حالت بعدی برای وقتی است که می خواهید تیتر سایت خود را بابت این موضوع تغییر دهید. برای این کار از کدهای زیر استفاده کنید.

function changeTitleOnBlur() {
    var timer     = null;
    var title     = document.title;
    var altTitle  = 'Return to this page!';
    window.onblur = function() {
        timer = window.setInterval( function() {
            document.title = altTitle === document.title ? title : altTitle;
        }, 1500 );
    }
    window.onfocus = function() {
        document.title = title;
        clearInterval(timer);
    }
}
 
changeTitleOnBlur();

برای اینکه متن نمایش داده شده را ویرایش کنید کافیست به جای عبارت Return to this page! عبارت دلخواه خود را وارد کنید.

تمامی این موارد را به صورت auto insert داخل قالب اضافه کنید.

موفق و پیروز باشید.