نمونه کار های طراحی سایت
نمونه کار های سئو سایت
تماس با ما
Bars
انتقال بدون ریلود در صفحات سایت با استفاده از پیاده‌سازی Swup.js + Head Plugin در وردپرس

انتقال بدون ریلود در صفحات سایت با استفاده از پیاده‌سازی Swup.js + Head Plugin در وردپرس

  • تاریخ بروزسانی :‌1 ماه پیش
  • بازدید :1444
  • دسته بندی :‌ آموزش ها

می‌خوام برات راهنمای کامل و مرحله‌به‌مرحله برای پیاده‌سازی Swup.js + Head Plugin روی سایت وردپرسی با قالب Astra و المنتور بنویسم، طوری که هم UX عالی باشه و هم سئو (Rank Math) حفظ بشه. آموزش کامل: پیاده‌سازی Swup.js + Head

می‌خوام برات راهنمای کامل و مرحله‌به‌مرحله برای پیاده‌سازی Swup.js + Head Plugin روی سایت وردپرسی با قالب Astra و المنتور بنویسم، طوری که هم UX عالی باشه و هم سئو (Rank Math) حفظ بشه.

آموزش کامل: پیاده‌سازی Swup.js + Head Plugin در وردپرس (Astra + المنتور)

مرحله ۱: آماده‌سازی سایت

  1. مطمئن شو قالب Astra فعال باشه.

  2. افزونه Rank Math فعال باشه و برای هر صفحه، تایتل و متای دلخواه تنظیم شده باشه.

  3. المنتور برای طراحی صفحات فعال باشه.

مرحله ۲: شناسایی container اصلی

Swup برای جابه‌جایی محتوا، به یک container نیاز داره.

  1. وارد هر صفحه شو.

  2. از DevTools (F12) استفاده کن و container محتوا رو پیدا کن.

    • در Astra معمولاً #primary یا #content هست.

  3. توی کد، باید <div id="swup"> یا data-swup="container" دور این بخش باشه.
    مثال:

<div id="swup">
<main id="primary" class="site-main">
<!-- محتوای صفحه اینجا -->
</main>
</div>

نکته: می‌تونی #swup رو روی #primary بذاری، یا یک div والد درست کنی که همه محتوای قابل تغییر داخلش باشه.

مرحله ۳: نصب و فعال‌سازی Swup

چند روش داری؛ ساده‌ترین روش برای وردپرس:

۱. استفاده از افزونه Code Snippets

  1. افزونه Code Snippets نصب و فعال کن.

  2. یه Snippet جدید بساز به نام مثلا Swup.js + Head Plugin

  3. نوع Snippet رو روی Frontend بذار.

۲. اضافه کردن فایل‌های Swup و Head Plugin

کد زیر رو در Snippet قرار بده:

function enqueue_swup_scripts() {
// بارگذاری Swup.js
wp_enqueue_script( 'swup', 'https://unpkg.com/swup@latest/dist/swup.min.js', array(), null, true );

// بارگذاری Head Plugin
wp_enqueue_script( 'swup-head', 'https://unpkg.com/@swup/head-plugin@latest/dist/SwupHeadPlugin.min.js', array('swup'), null, true );

// کد اولیه Swup
wp_add_inline_script( 'swup-head', "
const swup = new Swup({
plugins: [new SwupHeadPlugin()],
containers: ['#swup']
});
");
}
add_action( 'wp_enqueue_scripts', 'enqueue_swup_scripts' );

نکته‌ها:

  • containers: ['#swup'] باید با ID یا selector container تو مطابقت داشته باشه.

  • با این کد، هر تغییر صفحه <head> هم با Head Plugin آپدیت میشه.

مرحله ۴: تست عملکرد

  1. وارد سایت شو.

  2. روی لینک‌های داخلی کلیک کن.

  3. باید صفحه بدون رفرش کامل عوض بشه و URL مرورگر تغییر کنه.

  4. در DevTools > Elements > <head> بررسی کن:

    • <title> و <meta> باید با صفحه جدید تغییر کرده باشن ✅

مرحله ۵: تنظیمات برای Rank Math

  • نیازی به کار اضافه نیست؛ Rank Math همانند قبل تایتل و متاها را تولید می‌کنه.

  • Head Plugin اون‌ها رو هنگام جابه‌جایی به‌روز می‌کنه.

مرحله ۶: بهینه‌سازی و نکات حرفه‌ای

  1. اگر از WP Rocket یا Autoptimize استفاده می‌کنی،

    • Swup.js و Head Plugin رو در لیست Exclude بگذار تا JS بهینه‌سازی باعث تداخل نشه.

  2. برای لینک‌هایی که نمی‌خوای بدون رفرش باز شن، کلاس no-swup بده.
    مثال:

    <a href="/contact" class="no-swup">تماس با ما</a>

  3. برای انیمیشن‌ها هنگام تغییر صفحه، می‌تونی از Hookهای Swup استفاده کنی:

swup.on('transitionStart', () => {
// مثال: نمایش loader
});
swup.on('contentReplaced', () => {
// مثال: اجرای اسکریپت المنتور یا JS بعد از جایگزینی محتوا
});

این روش باعث میشه المنتور و سایر JSهای صفحه به‌درستی اجرا بشن.

مزایای این روش

  • جابه‌جایی بدون رفرش: UX بسیار سریع و اپلیکیشن‌گونه

  • سازگار با Astra و المنتور

  • سئو کامل حفظ میشه (Rank Math)

  • حجم سبک و سریع

  • کنترل کامل روی انیمیشن‌ها و رفتار صفحات

اگر بخوای، می‌تونم برات نسخه آماده و کامل کد با Loader و انیمیشن ساده Swup هم بنویسم که فقط کپی و در سایت قرار بدی، آماده اجرا باشه.

نظرات شما