چگونه به راحتی اعلان برگه مرورگر را در وردپرس اضافه کنیم


آیا می خواهید اعلان های برگه مرورگر را برای وب سایت خود اضافه کنید؟

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

در این مقاله به شما نشان خواهیم داد که چگونه اعلان های تب مرورگر را در وردپرس اضافه کنید.

نحوه اضافه کردن اعلان برگه مرورگر در وردپرس

اعلان برگه مرورگر چیست؟

اعلان برگه مرورگر زمانی است که وقتی کاربر روی سایت دیگری در مرورگر خود تمرکز می کند، چیزی را در برگه وب سایت خود تغییر می دهید.

با افزودن ویژگی اعلان برگه مرورگر در وب سایت وردپرس خود، می توانید توجه کاربر را در لحظه ای که برگه دیگری را برای خروج از صفحه شما باز می کند، جلب کنید.

به عنوان مثال، می توانید فاویکون وب سایت خود را تغییر دهید، آن را متحرک کنید، یک پیام سفارشی بنویسید، یا فقط تب را فلش کنید.

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

با استفاده از این ویژگی، می توانید مشتریان خود را در مورد رها شدن سبد خرید آگاه کنید یا حتی اگر توجه خود را به سایت شما برگردانند، تخفیف بدهید.

در اینجا نمونه ای از اعلان برگه مرورگر آمده است.

نمونه گیف اعلان برگه مرورگر

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

WPCode را برای افزودن اعلان‌های برگه مرورگر نصب کنید

با افزودن کد سفارشی در وردپرس می توانید به راحتی اعلان های برگه مرورگر را در سایت خود اضافه کنید. معمولا، شما باید فایل functions.php تم خود را ویرایش کنید، اما این می تواند حتی با یک خطای کوچک وب سایت شما را خراب کند.

به همین دلیل است که توصیه می کنیم از WPCode، ایمن ترین و محبوب ترین افزونه قطعه کد استفاده کنید که توسط بیش از 1 میلیون وب سایت استفاده می شود.

ابتدا باید افزونه رایگان WPCode را نصب و فعال کنید. برای جزئیات بیشتر، می توانید راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را مشاهده کنید.

هنگامی که افزونه را فعال کردید، به سادگی به آن بروید قطعه کد » همه قطعه ها در پنل مدیریت وردپرس شما

به قسمت Code Snippets بروید و روی Add New کلیک کنید

فقط روی دکمه «افزودن جدید» کلیک کنید، که سپس شما را به صفحه «افزودن قطعه» می‌آورد.

اکنون، روی گزینه «Add Your Custom Code (New Snippet)» بروید و روی دکمه «Use Snippet» در زیر آن کلیک کنید.

به سادگی روی دکمه Use Snippet کلیک کنید

سپس این افزونه شما را به صفحه «ایجاد قطعه سفارشی» می‌برد.

مهم نیست که از کدام نوع اعلان برگه مرورگر استفاده می کنید، کد زیر را با استفاده از این صفحه وارد خواهید کرد.

صفحه قطعه سفارشی ایجاد کنید

نوع 1. نمایش به روز رسانی های جدید به عنوان اعلان برگه مرورگر

اگر از کد زیر استفاده کنید، کاربران شما در مورد هر گونه به روز رسانی جدیدی که در سایت شما ارسال می شود، آگاه خواهند شد. شماره ای در برگه ظاهر می شود تا به آنها بگوید چند مورد جدید از دست داده اند.

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

این را می توانید در تصویر زیر مشاهده کنید:

به روز رسانی های جدید به عنوان اعلان برگه مرورگر

هنگامی که در صفحه «ایجاد قطعه سفارشی» هستید، باید قطعه خود را نام ببرید. شما می توانید هر چیزی را انتخاب کنید که به شما در شناسایی کد کمک کند. این فقط برای شماست.

سپس، از منوی کشویی سمت راست، «نوع کد» را انتخاب کنید. این کد جاوا اسکریپت است، بنابراین به سادگی بر روی گزینه ‘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 );
کد جاوا اسکریپت را کپی و پیست کنید

پس از چسباندن کد، به قسمت «درج» بروید. دو گزینه پیدا خواهید کرد: «درج خودکار» و «کد کوتاه».

به سادگی گزینه “درج خودکار” را انتخاب کنید، و کد شما به طور خودکار در سایت شما درج و اجرا می شود.

اگر فقط می‌خواهید به‌روزرسانی‌های جدید را در صفحات خاصی که کد کوتاه را اضافه می‌کنید نشان دهید، می‌توانید از روش «کد کوتاه» استفاده کنید.

یک حالت درج را انتخاب کنید

پس از انتخاب گزینه خود، به بالای صفحه بازگردید.

روی سوئیچ از «غیر فعال» به «فعال» در گوشه سمت راست بالا کلیک کنید و سپس به سادگی روی دکمه «ذخیره قطعه» کلیک کنید.

قطعه کد خود را ذخیره کنید

با اتمام آن، قطعه کد سفارشی شما به سایت شما اضافه می شود و شروع به کار می کند.

نوع 2. تغییر فاویکون به عنوان اعلان برگه مرورگر

با این روش، هنگامی که کاربران به برگه دیگری می روند، فاویکون متفاوتی را در برگه مرورگر سایت خود نشان می دهید.

فاویکون تصویر کوچکی است که در مرورگرهای وب مشاهده می کنید. اکثر کسب و کارها از نسخه کوچکتری از لوگوی خود استفاده می کنند.

فاویکون به عنوان اعلان مرورگر وب

اکنون برای تغییر فاویکون ها در تب مرورگر خود، از افزونه WPCode استفاده می کنیم.

ابتدا به قطعه کد » همه قطعه ها در پنل مدیریت وردپرس خود و سپس روی دکمه «افزودن جدید» کلیک کنید.

سپس، به سادگی روی گزینه «Add Your Custom Code (New Snippet)» بروید و روی دکمه «Use Snippet» در زیر آن کلیک کنید.

این شما را به صفحه «ایجاد قطعه سفارشی» می‌برد. می توانید با وارد کردن عنوانی برای قطعه کد خود شروع کنید.

اکنون به سادگی یک «نوع کد» را از منوی کشویی سمت راست انتخاب کنید. برای این قطعه کد، باید گزینه ‘HTML Snippet’ را انتخاب کنید.

HTML را به عنوان نوع کد خود انتخاب کنید

هنگامی که این کار را انجام دادید، به سادگی کد زیر را در “پیش نمایش کد” کپی و جایگذاری کنید.

<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);
}

پس از اینکه کد را چسباندید، به سادگی پیوندهای فاویکون نمونه را از کد حذف کنید و آنها را با تصاویر خود جایگزین کنید.

کد HTML را چسبانده و نمونه پیوندهای تصویر فاویکون را حذف کنید

به یاد داشته باشید، تصاویری که به عنوان فاویکون انتخاب می کنید باید قبلاً در کتابخانه رسانه سایت وردپرس شما آپلود شوند.

در غیر این صورت، کد کار نمی کند و فاویکون شما به صورت عادی نمایش داده می شود.

پیوندهای تصویر فاویکون را تغییر دهید

هنگامی که پیوندها را به فاویکون های جدید خود چسبانید، به بخش «درج» بروید. در اینجا، دو گزینه پیدا خواهید کرد: «درج خودکار» و «کد کوتاه».

اگر می‌خواهید کد را به‌طور خودکار در هر صفحه جاسازی کنید، می‌توانید گزینه «درج خودکار» را انتخاب کنید.

یک حالت درج را انتخاب کنید

برای تغییر فاویکون فقط در صفحات خاص، گزینه “Shortcode” را انتخاب کنید و آن را در هر منطقه ای که دارای کد کوتاه فعال است، مانند ابزارک های نوار کناری یا در پایین ویرایشگر محتوا، قرار دهید.

سپس، به سادگی به بالای صفحه بروید و سوئیچ را از «غیر فعال» به «فعال» در گوشه بالا سمت راست تغییر دهید و سپس روی دکمه «ذخیره قطعه» کلیک کنید.

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

نوع 3. تغییر عنوان سایت به عنوان اعلان برگه مرورگر

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

با استفاده از این قطعه کد، عنوان سایت شما تغییر می کند تا زمانی که کاربران به برگه دیگری در مرورگر می روند، پیامی چشم نواز نشان می دهد.

تغییر عنوان سایت در مرورگر

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

برای رفتن به صفحه «ایجاد قطعه سفارشی»، به قطعه کد » همه قطعه ها و به سادگی بر روی دکمه “افزودن جدید” کلیک کنید.

سپس، همانطور که در مثال های بالا نشان داده شده است، به سادگی گزینه “Add Your Custom Code” را انتخاب کنید.

اکنون که در صفحه «ایجاد قطعه سفارشی» هستید، با وارد کردن عنوانی برای قطعه کد خود شروع کنید.

در مرحله بعد، باید «نوع کد» را از منوی کشویی سمت راست انتخاب کنید. از آنجایی که این کد جاوا اسکریپت است، به سادگی بر روی گزینه ‘Snippet جاوا اسکریپت’ کلیک کنید.

جاوا اسکریپت را به عنوان نوع کد انتخاب کنید

پس از آن، به گزینه “Location” بروید و روی منوی کشویی کنار آن کلیک کنید.

از منوی کشویی، به سادگی روی گزینه “Site Wide Footer” کلیک کنید.

Site Wide Footer را به عنوان مکان انتخاب کنید

سپس، تنها کاری که باید انجام دهید این است که قطعه کد زیر را در «پیش‌نمایش کد» کپی و جای‌گذاری کنید.

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();

پس از چسباندن کد، اکنون می توانید آن را ویرایش کنید و به سادگی هر پیامی را که می خواهید در برگه مرورگر خود در کد نمایش داده شود، بنویسید.

برای نوشتن پیام مورد نظر خود کافیست به آدرس زیر بروید var altTitle="Return to this page!"; را خط بکشید و متن مکان نگهدار را با پیام اعلان برگه مرورگر خود حذف کنید.

جمله دلخواه خود را تایپ کنید

در مرحله بعد، به بخش «درج» بروید، جایی که دو روش درج را پیدا خواهید کرد: «درج خودکار» و «کد کوتاه».

اگر روی گزینه «درج خودکار» کلیک کنید، اعلان برگه مرورگر شما در هر صفحه فعال خواهد بود. با این حال، اگر می خواهید پیام چشم نواز خود را فقط در صفحات خاصی قرار دهید، می توانید گزینه “Shortcode” را انتخاب کنید.

یک حالت درج را انتخاب کنید

برای مثال، ممکن است فقط بخواهید این کد را در صفحه «افزودن به سبد خرید» اضافه کنید تا بتواند نرخ رها شدن سبد خرید را در وب سایت شما کاهش دهد.

اگر اینطور است، می توانید گزینه Shortcode را انتخاب کنید.

تنها چیزی که پس از آن باقی می ماند این است که به بالای صفحه بروید و سوئیچ را از «غیر فعال» به «فعال» تغییر دهید، سپس روی دکمه «ذخیره قطعه» کلیک کنید.

روی دکمه Save Snippet کلیک کنید

خودشه! اکنون، اعلان برگه مرورگر شما به کاربرانی که سایت شما را ترک می کنند هشدار می دهد.

امیدواریم این مقاله به شما در یادگیری نحوه افزودن اعلان‌های برگه مرورگر در وردپرس کمک کرده باشد. همچنین ممکن است بخواهید آموزش ما را در مورد نحوه افزودن اعلان‌های فشار وب به سایت وردپرس خود ببینید و برگزیده‌های ما از افزونه‌های ضروری وردپرس را برای رشد سایت خود بررسی کنید.

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در توییتر و فیس بوک




– تهیه و ترجمه توسط wordpress-templates.ir

سفارش طراحی سایت به وی تی!