SHET26

باز کردن لینک خروجی در تب جدید مرورگر

باز کردن لینک خروجی در تب جدید مرورگر

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

راه‌حلش هم پیچیده نیست — یه تیک ساده در ویرایشگر وردپرس یا یه ویژگی کوچیک در کد HTML. ولی پشت همین کار ساده، چند تا نکته وجود داره که نادیده گرفتنشون می‌تونه هم امنیت سایتتون رو تحت تأثیر بذاره و هم تجربه بخشی از کاربراتون رو خراب کنه.

تو این مقاله همه روش‌ها رو می‌بینیم، از تیک ساده گوتنبرگ گرفته تا کد HTML، افزونه و یه راه‌حل جاوااسکریپتی که همه لینک‌های خروجی سایتتون رو یکجا مدیریت می‌کنه. در کنارش سراغ بحث‌هایی می‌ریم که معمولاً از قلم می‌افتن؛ مثل تفاوت تگ‌های rel، ماجرای امنیتی پشت noopener، و نکته‌ای درباره دسترس‌پذیری که تقریباً هیچ مقاله فارسی بهش اشاره نمی‌کنه.

آنچه در این مقاله می‌خوانید

چرا باید لینک خروجی را در تب جدید باز کنیم؟

لینک خروجی همون لینک‌هاییه که از سایت شما به یه سایت دیگه وصل می‌شن. یعنی چیزی که کنترلش دست شما نیست و مقصدش هم مال شما نیست. حالا بذارین یه لحظه از دید کاربر به ماجرا نگاه کنیم، چون همه بحث از همین‌جا شروع می‌شه.

چه اتفاقی در ذهن کاربر می‌افتد

فرض کنین کسی داره یه مقاله آموزشی در سایت شما می‌خونه. وسط مقاله به یه لینک برمی‌خوره — مثلاً به مستندات یه ابزار یا یه منبع تکمیلی. روی لینک کلیک می‌کنه و صفحه شما جاش رو به اون سایت می‌ده.

تا اینجا مشکلی نیست. مشکل از لحظه‌ایه که کارش با اون صفحه تموم می‌شه. حالا سه تا حالت ممکنه پیش بیاد:

  • خوش‌بینانه: دکمه بازگشت مرورگر رو می‌زنه و برمی‌گرده. ولی حتی در این حالت هم باید دوباره صفحه رو اسکرول کنه تا جایی که بود رو پیدا کنه.
  • واقع‌بینانه: در اون سایت جدید روی چند تا لینک دیگه هم کلیک می‌کنه. حالا برای برگشتن باید چند بار دکمه بازگشت رو بزنه و معمولاً حوصله‌ش نمی‌کشه.
  • بدبینانه: اصلاً فراموش می‌کنه از کجا اومده بود. اگه چند تا تب هم باز داشته باشه، سایت شما عملاً از ذهنش پاک شده.

حالا همین سناریو رو با تب جدید تصور کنین: صفحه شما سر جاش می‌مونه. کاربر هر وقت کارش تموم شد فقط کافیه تب رو ببنده و دقیقاً همون‌جایی که بود ادامه بده. نه اسکرولی، نه جست‌وجویی، نه فراموشی.

سود پنهان این تغییر کوچک

این موضوع یه اثر ثانویه هم داره که مهم‌تر از خود ماجراست: کاربری که بیشتر در سایت شما می‌مونه، احتمال خیلی بیشتری داره که کاری انجام بده. عضویت در خبرنامه، خرید محصول، ثبت نظر، یا حتی فقط خوندن یه مقاله دیگه.

کسی که در ثانیه سی‌ام از سایت بیرون رفته، هیچ‌کدوم از این کارها رو نمی‌کنه. پس ارزش واقعی این تنظیم، در فرصت‌هاییه که از دست نمی‌دین — نه در عددی که در آمار سایتتون می‌بینین.

ولی همه لینک‌ها نه

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

این جدول، معیار تصمیم‌گیری رو ساده می‌کنه:

نوع لینکتب جدید؟دلیل
لینک به سایت دیگر (منبع، مرجع، ابزار)بلهکاربر از سایت شما خارج می‌شود
فایل PDF یا سند قابل دانلودبلهمعمولاً در نمایشگر داخلی مرورگر باز می‌شود
لینک داخلی در متن مقالهخیرکاربر در مسیر سایت شما می‌ماند
منوی اصلی و ناوبری سایتخیرباز شدن در تب جدید کاملاً غیرمنتظره است
لینک ایمیل یا شماره تماسخیرمرورگر خودش برنامه مربوطه را باز می‌کند
فرم‌ها و مسیر خریدخیرپاره کردن مسیر خرید، نرخ تبدیل را پایین می‌آورد
لینک داخلی در آموزش گام‌به‌گامبستگی دارداگر کاربر باید به صفحه فعلی برگردد، بله

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

روی دیگر سکه؛ نکته‌ای درباره دسترس‌پذیری

این بخش رو عمداً قبل از آموزش‌ها گذاشتم، چون روی تصمیم شما اثر می‌ذاره و اگه آخر مقاله بیاد، بعد از انجام کار خونده می‌شه. باز کردن خودکار لینک در تب جدید، از نظر استانداردهای دسترس‌پذیری وب یه رفتار «غیرمنتظره» حساب می‌شه. دلیلش هم منطقیه: کاربر روی یه لینک کلیک کرده و انتظار داره چیزی که همیشه اتفاق می‌افته، بیفته.

چه کسانی بیشتر آسیب می‌بینند

  • کاربران صفحه‌خوان: کسی که نابیناست و با نرم‌افزار صفحه‌خوان کار می‌کنه، هیچ نشانه بصری‌ای از باز شدن تب جدید نمی‌بینه. فقط ناگهان محتوای متفاوتی می‌شنوه و نمی‌فهمه چه اتفاقی افتاده.
  • کاربران کیبورد: کسی که با کیبورد در صفحه حرکت می‌کنه، ممکنه متوجه جابه‌جایی بین تب‌ها نشه.
  • کاربران کم‌تجربه: افراد مسن یا کسانی که تازه با اینترنت آشنا شدن، وقتی دکمه بازگشت مرورگر کار نمی‌کنه (چون تب جدیده و تاریخچه‌ای نداره) واقعاً گیر می‌کنن.

راه‌حل؛ اطلاع دادن به کاربر

معنی این بحث، کنار گذاشتن تب جدید نیست. معنیش اینه که به کاربر بگین قراره چه اتفاقی بیفته. دو تا راه ساده داره:

راه اول، نشانه بصری. کنار لینک‌های خروجی یه آیکون کوچیک بذارین. خیلی از قالب‌های مدرن این قابلیت رو دارن و اگه قالب شما نداره، با چند خط CSS قابل ساختنه.

راه دوم، متن پنهان برای صفحه‌خوان. این روش استاندارد و بسیار مؤثره:

<a href="https://example.com" target="_blank" rel="noopener">
  متن لینک
  <span class="screen-reader-text">(در تب جدید باز می‌شود)</span>
</a>

کلاس screen-reader-text در اکثر قالب‌های وردپرس از قبل تعریف شده. کاری که می‌کنه اینه که متن داخلش برای کاربر عادی نامرئیه، ولی صفحه‌خوان اون رو می‌خونه. یعنی کاربر نابینا دقیقاً می‌فهمه که این لینک قراره در تب جدید باز بشه.

اگه قالبتون این کلاس رو نداره، این چند خط CSS رو به بخش استایل سفارشی اضافه کنین:

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

روش اول؛ ویرایشگر گوتنبرگ

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

مراحل کار

متنی که می‌خواین بهش لینک بدین رو انتخاب کنین. کلیدهای Ctrl + K رو بزنین (در مک Command + K). می‌تونین از آیکون زنجیر در نوار ابزار بلوک هم استفاده کنین. آدرس مقصد رو وارد کنین و کلید Enter رو بزنین. حالا دوباره روی لینک کلیک کنین و از نوار کوچکی که ظاهر می‌شه، آیکون مداد (ویرایش) رو بزنین. بخش «پیشرفته» رو باز کنین و تیک «بازکردن پیوند در زبانه تازه» رو بزنین.

بازکردن لینک‌‌های خروجی در صفحه جدید
بازکردن لینک‌‌های خروجی در صفحه جدید

روی «افزودن پیوند» یا «ذخیره» کلیک کنین.

همین. وردپرس خودکار ویژگی target="_blank" و تگ امنیتی rel="noopener" رو به لینکتون اضافه می‌کنه.

لینک روی دکمه، تصویر و بلوک‌های دیگر

گوتنبرگ فقط متن نیست. برای بقیه بلوک‌ها مسیر کمی فرق داره:

  • بلوک دکمه: دکمه رو انتخاب کنین، از نوار ابزار آیکون لینک رو بزنین و همون گزینه «بازکردن در زبانه تازه» رو در تنظیمات پیدا کنین.
  • لینک روی تصویر: تصویر رو انتخاب کنین، آیکون لینک رو بزنین، آدرس رو وارد کنین و بعد از تنظیمات پیشرفته همون تیک رو بزنین.
  • بلوک ناوبری (منو): از نظر فنی امکانش هست، ولی توصیه نمی‌شه. منوی سایت باید در همون تب باز بشه، چون کاربر انتظار چیز دیگه‌ای نداره.

روش دوم؛ ویرایشگر کلاسیک

اگه هنوز با ویرایشگر کلاسیک کار می‌کنین یا سایتتون از افزونه Classic Editor استفاده می‌کنه، مسیر به این شکله:

پست یا برگه موردنظر رو باز کنین و متنی که می‌خواین لینک بشه رو انتخاب کنین. روی آیکون «افزودن پیوند» (شکل زنجیر) در نوار ابزار کلیک کنین.

افزودن لینک خروجی در ویرایشگر کلاسیک
افزودن لینک خروجی در ویرایشگر کلاسیک

در پنجره کوچکی که باز می‌شه، روی آیکون چرخ‌دنده کلیک کنین تا پنجره «جایگذاری/ویرایش پیوند» با تنظیمات کامل باز بشه.

افزودن لینک خروجی در ویرایشگر کلاسیک
افزودن لینک خروجی در ویرایشگر کلاسیک

آدرس لینک و متن پیوند رو وارد کنین. تیک «بازکردن پیوند در زبانه تازه» رو بزنین.

بازکردن لینک در صفحه جدید
بازکردن لینک در صفحه جدید

روی دکمه «افزودن پیوند» کلیک کنین و در نهایت پست رو به‌روزرسانی کنین.

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

روش سوم؛ نوشتن مستقیم کد HTML

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

اضافه کردن لینک با برچسب متن
اضافه کردن لینک با برچسب متن

ساختار کد این شکلیه:

<a href="https://example.com" target="_blank" rel="noopener">متن لینک</a>

هر بخشش رو باز کنیم:

  • href — آدرس مقصد. حتماً با https:// شروع بشه.
  • target="_blank" — همون دستوری که می‌گه در تب جدید باز شو.
  • rel="noopener" — تگ امنیتی که در بخش بعد مفصل توضیحش می‌دم.
  • متن بین دو تگ — چیزی که کاربر می‌بینه و روش کلیک می‌کنه.

سه اشتباه رایج در نوشتن این کد

  1. استفاده از گیومه فارسی. علامت‌های نقل‌قول باید انگلیسی ساده باشن. اگه از ورد یا نرم‌افزارهای مشابه کپی کنین، ممکنه گیومه‌ها به شکل تایپوگرافی تبدیل شده باشن و کد کار نکنه. این رایج‌ترین دلیل خرابیه.
  2. جا انداختن https://. اگه فقط بنویسین href="example.com"، مرورگر فکر می‌کنه این یه صفحه داخلی سایت شماست و کاربر رو به آدرس اشتباه می‌بره.
  3. نوشتن target="blank" به‌جای target="_blank". اون خط زیر (آندرلاین) ابتدای کلمه ضروریه. بدونش هم کار می‌کنه ولی رفتار متفاوتی داره و ممکنه همه لینک‌ها در یک تب مشترک باز بشن.

تگ rel چیست و چرا اهمیت دارد؟

شاید حواستون بوده باشه: هر بار تیک «بازکردن در زبانه جدید» رو می‌زنین، وردپرس خودش عبارت rel="noopener" (و گاهی noreferrer در کنارش) رو به لینک اضافه می‌کنه. این کد اضافی یا اشتباه نیست؛ کاملاً عمدی و به دلیل امنیتیه.

ماجرای امنیتی پشت noopener

وقتی یه صفحه با target="_blank" در تب جدید باز می‌شه، اون صفحه جدید از نظر جاوااسکریپت یه دسترسی محدود به صفحه قبلی — یعنی سایت شما — پیدا می‌کنه.

حالا فرض کنین سایتی که بهش لینک دادین، دست یه آدم بدخواه باشه. اون می‌تونه از همین دسترسی سوءاستفاده کنه و پشت سر کاربر، تب سایت شما رو به یه صفحه جعلی تبدیل کنه. مثلاً به یه صفحه ورود قلابی که شبیه سایت شماست.

کاربر بعد از بستن تب دوم برمی‌گرده، می‌بینه از حسابش خارج شده، و بدون شک کردن دوباره رمزش رو وارد می‌کنه — روی صفحه‌ای که مال شما نیست. اسم این حمله tabnabbing ـه و rel="noopener" دقیقاً جلوش رو می‌گیره.

خبر خوب برای مرورگرهای مدرن

از حدود سال ۲۰۲۱، مرورگرهای اصلی (کروم، فایرفاکس، سافاری و اج) این رفتار محافظتی رو خودشون به‌صورت پیش‌فرض روی هر لینک target="_blank" اعمال می‌کنن. یعنی حتی اگه noopener ننویسین، در مرورگرهای به‌روز محافظت برقراره.

با این حال نوشتن صریحش هنوز عادت درستیه، چون بخشی از کاربران هنوز مرورگرهای قدیمی دارن و شما نمی‌دونین کاربر شما با چه چیزی سایتتون رو باز می‌کنه. خلاصه‌ش: لازم نیست کار خاصی بکنین چون وردپرس خودش اضافه می‌کنه — فقط اگه دارین دستی کد می‌نویسین، حذفش نکنین.

بقیه مقادیر rel که باید بشناسید

حالا که بحث rel باز شد، بذارین بقیه‌شون رو هم مرور کنیم. این‌ها مستقیماً به لینک‌های خروجی و سئوی سایت شما مربوطن:

مقدارچه کاری می‌کندکِی استفاده کنیم
noopenerجلوی دسترسی صفحه مقصد به تب شما را می‌گیردهمیشه، همراه با target=”_blank”
noreferrerآدرس صفحه شما را به مقصد نمی‌فرستدوقتی نمی‌خواهید مقصد بداند کاربر از کجا آمده
nofollowبه گوگل می‌گوید این لینک را برای رتبه‌دهی دنبال نکنلینک به منابع نامطمئن یا نظرات کاربران
sponsoredمشخص می‌کند لینک تبلیغاتی یا پولی استرپورتاژ، بنر و لینک همکاری در فروش
ugcیعنی این لینک را کاربران ساخته‌اندلینک داخل دیدگاه‌ها و انجمن

یه نکته درباره noreferrer: این مقدار باعث می‌شه سایت مقصد نفهمه ترافیک از کجا اومده. اگه با کسی همکاری دارین و می‌خواین بدونه ترافیک از شما اومده، بهتره فقط noopener بذارین.

و می‌تونین چند مقدار رو با فاصله کنار هم بنویسین:

<a href="https://example.com" target="_blank" rel="noopener nofollow">متن لینک</a>

تأثیر واقعی این کار روی سئو

ادعای رایج اینه: «باز کردن لینک در تب جدید مدت ماندگاری کاربر رو بالا می‌بره و گوگل هم این رو به‌عنوان سیگنال رتبه حساب می‌کنه، پس رتبه‌تون بهتر می‌شه.»

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

پس سود واقعی‌اش کجاست؟

سود اصلی جای دیگه‌ایه و در واقع مهم‌تره:

  • کاربر ادامه مقاله را می‌خواند. کسی که برنگشته، بقیه محتوای شما رو ندیده — از جمله دعوت به اقدامی که ته مقاله گذاشتین.
  • احتمال تبدیل بالا می‌رود. عضویت در خبرنامه، افزودن به سبد خرید، ثبت نظر. همه اینا نیاز به حضور کاربر دارن.
  • صفحات بیشتری دیده می‌شوند. کاربری که در سایت مونده، احتمال بیشتری داره روی لینک داخلی بعدی کلیک کنه.

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

یک نکته سئویی که واقعاً اهمیت دارد

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

چیزی که باید بهش دقت کنین، مدیریت درست تگ rel ـه که در بخش قبل دیدیم، برای لینک‌های تبلیغاتی sponsored، برای منابع نامطمئن nofollow و برای لینک‌های داخل دیدگاه‌ها ugc. این‌ها خیلی بیشتر از تب جدید روی سئوی شما اثر دارن.

روش چهارم؛ خودکارسازی با افزونه

تا اینجا روش‌های دستی رو دیدیم. اما اگه یه سایت پر از مطلب دارین یا چند نویسنده روش کار می‌کنن، اینکه هر بار یادتون باشه اون تیک رو بزنین عملاً غیرممکنه. یکی یادش می‌ره، یکی حواسش نیست، و کم‌کم صدها لینک دارین که در همون تب باز می‌شن.

اینجاست که افزونه کار رو راحت می‌کنه. افزونه‌هایی مثل Open External Links in a New Window رو نصب و فعال می‌کنین و از اون به بعد خودش همه لینک‌های خروجی رو در تب جدید باز می‌کنه — هم لینک‌های قدیمی و هم لینک‌هایی که از این به بعد می‌نویسین.

افزونه External Links in New Window
افزونه External Links in New Window

محدودیتی که باید بدانید

یه نکته مهم که معمولاً گفته نمی‌شه: این افزونه‌ها معمولاً لینک‌های داخل پست‌هاتون رو در دیتابیس تغییر نمی‌دن. بلکه از جاوااسکریپت استفاده می‌کنن که بعد از بارگذاری صفحه، لینک‌ها رو پیدا کنه و ویژگی target رو بهشون اضافه کنه.

سه تا پیامد داره:

  1. وابستگی دائمی. اگه یه روز افزونه رو غیرفعال کنین، این قابلیت هم باهاش از بین می‌ره و همه لینک‌ها به حالت قبل برمی‌گردن.
  2. حساسیت به کش. چون کار با جاوااسکریپت انجام می‌شه، افزونه‌های کش می‌تونن روش اثر بذارن. در بخش بعدی مفصل توضیحش می‌دم.
  3. اجرا با تأخیر جزئی. ویژگی تب جدید بعد از بارگذاری صفحه اعمال می‌شه، نه هم‌زمان با اون. در عمل این تأخیر نامحسوسه، ولی اگه کاربر خیلی سریع کلیک کنه ممکنه اعمال نشده باشه.

تنظیم استثناها

اگه از افزونه خودکار استفاده می‌کنین، ممکنه برای بعضی لینک‌ها اصلاً نخواین این اتفاق بیفته؛ مثلاً لینک‌های شبکه‌های اجتماعی خودتون، لینک‌های دانلود مستقیم، یا زیردامنه‌های خودتون که از نظر فنی «خارجی» حساب می‌شن.

خوشبختانه اکثر این افزونه‌ها در تنظیماتشون کادری به اسم «استثناها» یا Exceptions دارن. کافیه آدرس دامنه‌های موردنظرتون رو خط‌به‌خط اونجا وارد کنین تا افزونه نادیده‌شون بگیره.

روش پنجم؛ بدون افزونه و فقط با یک تکه کد

حالا فرض کنین نه حوصله دارین تک‌تک لینک‌ها رو دستی تغییر بدین، نه دلتون می‌خواد یه افزونه جدید به سایتتون اضافه کنین. در این حالت یه راه تمیز وجود داره: یه تکه کد جاوااسکریپت کوچیک که خودش همه‌چیز رو مدیریت می‌کنه.

این کد دامنه سایت شما رو تشخیص می‌ده و فقط روی لینک‌های خارجی اعمال می‌شه. لینک‌های داخلی، ایمیل و شماره تماس دست‌نخورده می‌مونن:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var host  = window.location.hostname.replace(/^www\./, '');
  var links = document.querySelectorAll('a[href]');

  links.forEach(function (link) {
    // لینک داخلی نسبی، ایمیل یا شماره تماس را رها کن
    if (!link.hostname) return;

    // اگر قبلاً دستی تنظیم شده، دست نزن
    if (link.hasAttribute('target')) return;

    // دامنه خودمان، با یا بدون www
    if (link.hostname.replace(/^www\./, '') === host) return;

    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener');
  });
});
</script>

چه چیزی این نسخه را بهتر می‌کند

کدهایی که معمولاً در اینترنت پیدا می‌کنین دو تا ایراد دارن که در این نسخه برطرف شده:

  • مسئله www. اگه سایت شما با www باز بشه ولی بعضی لینک‌های داخلی بدون www نوشته شده باشن (یا برعکس)، کدهای ساده اون‌ها رو خارجی تشخیص می‌دن و لینک‌های داخلی خودتون هم در تب جدید باز می‌شن. اینجا هر دو حالت یکی حساب می‌شن.
  • احترام به تنظیمات دستی. اگه قبلاً برای لینکی تصمیم گرفتین که در همون تب باز بشه، این کد بهش دست نمی‌زنه.

محدود کردن کد به محتوای مقاله

اگه می‌خواین این کد فقط روی لینک‌های داخل متن مقاله اعمال بشه و به هدر، فوتر و منو کاری نداشته باشه، خط انتخاب لینک‌ها رو به این شکل تغییر بدین:

var links = document.querySelectorAll('.entry-content a[href]');

کلاس entry-content در بیشتر قالب‌های وردپرس به بخش محتوای اصلی اختصاص داره. اگه قالب شما کلاس دیگه‌ای داره، با کلیک راست روی متن مقاله و انتخاب «بررسی عنصر» می‌تونین پیداش کنین.

این کد را کجا بگذاریم؟

روش اول (پیشنهادی). اگه قالبتون بخشی به اسم «کدهای سفارشی» یا «اسکریپت‌های فوتر» داره، کد رو همون‌جا بذارین. اگه نداره، از یه افزونه سبک درج کد در هدر و فوتر مثل WPCode استفاده کنین. این روش امن‌تره چون با هیچ فایل قالبی کار ندارین و با به‌روزرسانی قالب هم چیزی پاک نمی‌شه.

روش دوم. از مسیر نمایش ← ویرایشگر پرونده پوسته وارد بشین.

 ویرایشگر پرونده پوسته
ویرایشگر پرونده پوسته

فایل footer.php رو از فهرست سمت راست پیدا کنین، کد رو دقیقاً یه خط قبل از تگ </body> بذارین و «به‌روزرسانی پرونده» رو بزنین.

پرونده footer.php
پرونده footer.php

اگه سراغ روش دوم رفتین، دو تا نکته حیاتی:

  • حتماً از قالب فرزند استفاده کنین، نه قالب اصلی. با اولین به‌روزرسانی قالب، همه تغییراتی که در فایل‌های قالب اصلی دادین پاک می‌شه.
  • قبلش از فایل نسخه پشتیبان بگیرین. یه خطای کوچیک در فایل‌های PHP می‌تونه سایت رو با صفحه سفید از کار بندازه.

و یه نکته برای قالب‌های بلوکی: اگه از یه قالب Full Site Editing استفاده می‌کنین، اصلاً چنین منو و فایل footer.php به این شکل وجود نداره. در این قالب‌ها حتماً باید از روش اول استفاده کنین.

رفع مشکلات رایج

لینک‌ها با وجود تنظیمات، در تب جدید باز نمی‌شوند

این یکی از مشکلاتیه که خیلی‌ها رو کلافه می‌کنه: تیک رو زدین یا افزونه نصب کردین، ولی لینک‌ها همچنان در همون صفحه باز می‌شن.

در بیشتر مواقع مقصر، افزونه‌های کش و بهینه‌سازی سرعتن — و این ربطی به بی‌کیفیت بودنشون نداره؛ ذات کارشون همینه. این افزونه‌ها برای سبک کردن صفحه، فایل‌های جاوااسکریپت رو فشرده می‌کنن یا اجراشون رو تا لحظه‌ای که کاربر با صفحه تعامل کنه به تأخیر می‌ندازن. حالا اگه قابلیت باز شدن لینک در تب جدید هم متکی به جاوااسکریپت باشه (یعنی روش افزونه‌ای یا همون کد بالا)، این تأخیر می‌تونه موقتاً از کار بندازتش.

راه‌حل رو به ترتیب امتحان کنین:

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

تنظیمات جاوااسکریپت افزونه کش رو بررسی کنین. معمولاً گزینه‌ای به اسم «تأخیر JS تا تعامل کاربر» یا «بارگذاری تأخیری JS» داره. موقتاً غیرفعالش کنین و ببینین مشکل حل می‌شه.

تنظیمات جاوا اسکریپت در موشک وردپرس
تنظیمات جاوا اسکریپت در موشک وردپرس

فایل کد رو در فهرست استثناها بذارین. این بهترین راه‌حله، چون سرعت کل سایت رو فدا نمی‌کنین و فقط همون یه فایل رو از فشرده‌سازی و تأخیر معاف می‌کنین. مثلاً در افزونه رخش که خودمون در میهن‌وردپرس توسعه دادیم، از پنل عیب‌یابی کش می‌تونین ببینین کدوم بخش داره روی صفحه اثر می‌ذاره و بعد آدرس یا فایل موردنظرتون رو به فهرست مستثنی‌ها اضافه کنین.

افزونه رخش
افزونه رخش

فقط بعضی لینک‌ها کار می‌کنند

اگه بعضی لینک‌ها در تب جدید باز می‌شن و بعضی نه، معمولاً یکی از این دو تاست:

  • اون لینک‌ها با ویرایشگر متفاوتی ساخته شدن (مثلاً داخل یه ابزارک یا صفحه‌ساز که کد جاوااسکریپت شما بهش دسترسی نداره).
  • اگه کد رو به entry-content محدود کردین، لینک‌های خارج از محتوای اصلی شامل نمی‌شن. این رفتار عمدیه.

حتماً در حالت ناشناس تست کنید

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

دسترسی به incognito در مرورگر
دسترسی به incognito در مرورگر

دلیلش اینه که مرورگرها معمولاً نسخه قدیمی فایل‌های سایت رو ذخیره می‌کنن و ممکنه تغییرات جدید رو بهتون نشون ندن. شما فکر می‌کنین کد کار نکرده، در حالی که کاربران واقعی نسخه درست رو می‌بینن. در حالت ناشناس این اتفاق نمی‌افته و دقیقاً همون چیزی رو می‌بینین که یه کاربر تازه‌وارد می‌بینه.

یه راه سریع‌تر هم هست: روی لینک کلیک راست کنین و «بررسی عنصر» رو بزنین. اگه در کد لینک عبارت target="_blank" رو دیدین، یعنی تنظیمات درست اعمال شده.

پرسش‌های پرتکرار

آیا باز کردن لینک در تب جدید به سئو آسیب می‌زند؟

نه. گوگل هیچ جریمه‌ای برای این کار در نظر نمی‌گیره و کاملاً رایج و پذیرفته‌شده‌ست. فقط انتظار بهبود مستقیم رتبه هم ازش نداشته باشین.

آیا می‌توانم همه لینک‌های سایتم را در تب جدید باز کنم؟

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

لینک‌های قدیمی سایتم چه می‌شوند؟

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

تفاوت noopener و noreferrer چیست؟

اولی جلوی دسترسی صفحه مقصد به تب شما رو می‌گیره و صرفاً امنیتیه. دومی علاوه بر اون، آدرس صفحه شما رو هم به مقصد نمی‌فرسته. اگه با سایت مقصد همکاری دارین و می‌خواین بدونه ترافیک از شما اومده، فقط noopener رو بذارین.

آیا این تنظیم روی موبایل هم کار می‌کند؟

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

جمع‌بندی

باز کردن لینک‌های خروجی در تب جدید نه کار سختیه و نه یه قابلیت لوکس؛ یه تغییر کوچیکه که هم تجربه کاربرتون رو بهتر می‌کنه و هم کمک می‌کنه بازدیدکننده‌ها راحت‌تر پیشتون برگردن.

حالا کدوم روش برای شما مناسبه؟ اگه تازه‌کارین یا فقط چند تا لینک دارین، همون تیک ساده گوتنبرگ کاملاً کافیه و اصلاً نیازی به پیچیده کردن ماجرا نیست. اگه سایتتون بزرگه یا چند نویسنده دارین و نگرانین یادتون بره، افزونه گزینه مطمئن‌تریه. و اگه می‌خواین سایتتون سبک بمونه و در عین حال همه‌چیز خودکار باشه، اون تکه کد جاوااسکریپت دقیقاً برای شماست.

هر کدوم رو که انتخاب کردین، دو تا نکته رو یادتون باشه. اول اینکه با تعادل استفاده کنین؛ هدف اینه که کاربر راحت‌تر پیش شما برگرده، نه اینکه با ده تب باز غافلگیر بشه. و دوم اینکه به کاربرانی فکر کنین که با صفحه‌خوان کار می‌کنن — یه متن پنهان ساده که بگه «در تب جدید باز می‌شود»، هزینه‌ای براتون نداره و تجربه بخشی از مخاطبانتون رو کاملاً عوض می‌کنه. موفق و پیروز باشید. 🙂

نظر شما در این مورد چیه؟

  1. U334032۶ آذر ۱۴۰۲

    سلام چطور میشه target=”_blank” را به تگ a در سورس کدهای افزونه edd اضافه کرد که هنگام کلیلک روی لینک های دانلود ، ویدئو در تب جدید مرورگر باز شود؟

    • رضا راد۸ آذر ۱۴۰۲

      سلام باید کدهای افزونه توی پوشه templates روتغییر بدین.

      • U334032۱۰ آذر ۱۴۰۲

        این کدهای فایل .history-download.php در پوشه template است امکان داره بفرمایید در کدام قسمت target=”_blank” باید اضافه شود؟

        ID, true );
        $purchase_data = edd_get_payment_meta( $payment->ID );
        $email = edd_get_payment_user_email( $payment->ID );

        if ( $downloads ) :
        foreach ( $downloads as $download ) :

        // Skip over Bundles. Products included with a bundle will be displayed individually
        if ( edd_is_bundled_product( $download[‘id’] ) )
        continue; ?>

        ID );
        }

        do_action( ‘edd_download_history_row_start’, $payment->ID, $download[‘id’] );
        ?>

        post_status ) :

        if ( $download_files ) :

        foreach ( $download_files as $filekey => $file ) :

        $download_url = edd_get_download_file_url( $purchase_data[‘key’], $email, $filekey, $download[‘id’], $price_id );
        ?>

        <a href="” class=”edd_download_file_link”>

        ID, $purchase_data );
        endforeach;

        else :
        _e( ‘No downloadable files found.’, ‘easy-digital-downloads’ );
        endif; // End if payment complete

        else : ?>

        ID, $download[‘id’] );
        ?>

        ‘download_history’,
        ‘total’ => ceil( edd_count_purchases_of_customer() / 20 ) // 20 items per page
        )
        );
        ?>

  2. U314328۲۸ تیر ۱۴۰۲

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

    • رضا راد۲۹ تیر ۱۴۰۲

      سلام وقت بخیر باید target=”_blank” به تگ a اضافه کنید توی صفحه آرشیو محصول. با تغییر کدهای قالب. بله گوگل مشکلی با این قضیه نداره

  3. U23046۱۷ مرداد ۱۳۹۸

    با سلام و عرض احترام
    ببخشید میخواستم بدونم اگر من بخوام لینکم روی یک وینندو (new window) باز شود باید چیکار کنم ؟
    نه روی یک تب ممنونم

    • تیم پشتیبانیتیم پشتیبانی۱۷ مرداد ۱۳۹۸

      سلام
      موقع تعریف کردن گزنه خاص خودش رو داره که تیک رو میزنید و تعیین میکنید که بعد از کلیک کردن روی لینک توی یک پنجره جدید باز بشه

  4. U19397۱۵ تیر ۱۳۹۸

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

    • تیم پشتیبانیتیم پشتیبانی۱۵ تیر ۱۳۹۸

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

      • U19397۱۵ تیر ۱۳۹۸

        سلام. ممنون از پاسختون. از ووکامرس استفاده می کنم و لی در صورتی نمایش میده که از افزونه ای مثل ultimate member استفاده کنم و فقط در صفحه حساب کاربری این افزونه نمایش داده میشه. در حالی که من می خوام خودم یک صفحه حساب کاربری جدا درست کنم و این صفحه رو به آلتیمیت به عنوان صفحه حساب کاربری معرفی کنم و در همون صفحه محصولات خریداری شده رو نمایش بدم. توی افزونه edd اگر از شورت کدی مثل [download_history] استفاده کنم محصولات خریداری شده نمایش داده میشه ولی برای ووکامرس همچین کدی پیدا نکردم.

        • تیم پشتیبانیتیم پشتیبانی۱۵ تیر ۱۳۹۸

          برای ووکامرس متاسفانه شورت کدی نیست به جز woocommerce_account

پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرس
پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرسآنلاین و پاسخگوی شما هستیم.آنلاین

در حال بارگذاری...

هر سوالی دارید بپرسید.پاسخگوی شما هستیم.