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

کدی که آپارات به شما می‌دهد چه شکلی است؟

آپارات در بخش اشتراک‌گذاری هر ویدئو دو نوع کد در اختیارتان می‌گذارد: کد iframe و کد script. نمونه‌ی کد iframe شبیه زیر است:

<style>
.h_iframe-aparat_embed_frame { position: relative; }
.h_iframe-aparat_embed_frame .ratio { display: block; width: 100%; height: auto; }
.h_iframe-aparat_embed_frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="h_iframe-aparat_embed_frame">
  <span style="display: block; padding-top: 57%;"></span>
  <iframe src="https://www.aparat.com/video/video/embed/videohash/------/vt/frame"
    allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>

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

  • تگ style
    استایل‌هایی که ویدئو را ریسپانسیو می‌کنند. یعنی روی موبایل، تبلت و دسکتاپ نسبت تصویر حفظ می‌شود.
  • تگ span با padding-top
    ارتفاع محفوظ‌شده برای پلیر است. عدد ۵۷٪ تقریبا نسبت ۱۶ به ۹ را می‌سازد.
  • تگ iframe
    خود پلیر آپارات که داخل صفحه‌ی شما بارگذاری می‌شود.

در حالت اسکریپتی، آپارات به‌جای iframe آماده یک تگ script می‌دهد که خودش در زمان اجرا پلیر را می‌سازد. نحوه‌ی درج هر دو حالت در وردپرس یکسان است. فقط در بخش lazy loading تفاوت‌هایی دارند که در ادامه توضیح می‌دهم.

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

وردپرس به‌صورت پیش‌فرض تگ‌های حساس مثل iframe، script و style را از محتوای کاربران کم‌دسترسی حذف می‌کند تا کسی نتواند کد مخرب در سایت تزریق کند. این فیلتر kses نام دارد و برای حذف آن، کاربر باید قابلیت (capability) زیر را داشته باشد: unfiltered_html

وضعیت این قابلیت در نقش‌های کاربری وردپرس به این صورت است:

  • مدیر کل (Administrator) و سردبیر (Editor)
    در سایت‌های معمولی (تک‌سایتی) این قابلیت را دارند.
  • نویسنده (Author)، مشارکت‌کننده (Contributor) و مشترک (Subscriber)
    این قابلیت را ندارند. اگر این کاربران کد آپارات را درج کنند، بعد از ذخیره iframe و style حذف می‌شود و فقط یک div خالی باقی می‌ماند.
  • وردپرس چندسایتی (Multisite)
    فقط «سوپر ادمین» این قابلیت را دارد و مدیر هر زیرسایت به‌طور پیش‌فرض ندارد.

نکته‌ی دیگر اینکه اگر در فایل wp-config.php سایت خط زیر وجود داشته باشد، حتی مدیر کل هم قابلیت unfiltered_html را از دست می‌دهد:

define( 'DISALLOW_UNFILTERED_HTML', true );

پس اگر با حساب مدیر کل وارد شده‌اید و باز هم کد حذف می‌شود، این خط (یا یک افزونه‌ی امنیتی که همین کار را می‌کند) اولین مظنون است.

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

درج ویدئوی آپارات در ویرایشگر کلاسیک

در ویرایشگر کلاسیک دو تب در بالای کادر نوشتن می‌بینید: « نوشتاری» (Visual) و «متن» (Text). کد را فقط باید در تب متن قرار دهید:

  1. مقاله یا برگه را باز کنید و روی تب متن کلیک کنید.
  2. مکان‌نما را در جایی که می‌خواهید ویدئو نمایش داده شود بگذارید.
  3. کد iframe آپارات را پیست کنید.
  4. روی «بروزرسانی» یا «انتشار» بزنید و صفحه را در پیش‌نمایش ببینید.

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

  • جابه‌جا شدن بین دو تب
    ویرایشگر نوشتاری ممکن است تگ‌های ناشناخته را تغییر بدهد یا حذف کند. بعد از پیست کد، دوباره به تب نوشتاری نروید.
  • اضافه شدن <p> و <br> داخل کد
    وردپرس با تابع wpautop خطوط خالی و خط‌های جدید را به پاراگراف و شکست خط تبدیل می‌کند و ممکن است ساختار کد را به هم بریزد. برای جلوگیری، کد را در یک خط (بدون خط خالی) بنویسید. نسخه‌ی تک‌خطی کد با lazy loading را در ادامه‌ی مقاله می‌بینید.
  • استایل تکراری
    اگر چند ویدئو دارید، تگ style را فقط یک بار استفاده کنید. در ادامه آن را توضیح می‌دهم.

درج ویدئوی آپارات در ویرایشگر گوتنبرگ

گوتنبرگ بلوکی مخصوص این کار دارد
HTML سفارشی (Custom HTML). بلوک «جاسازی» (Embed) فقط سرویس‌هایی را پشتیبانی می‌کند که از استاندارد oEmbed بهره می‌برند و آپارات به‌صورت پیش‌فرض جزو آن‌ها نیست، بنابراین برای آپارات باید از بلوک HTML سفارشی استفاده کنید:

  1. در ویرایشگر مقاله روی علامت + کلیک کنید، یا در یک خط خالی عبارت /html را تایپ کنید و کلید Enter را بزنید.
  2. بلوک «HTML سفارشی» را انتخاب کنید.
  3. کد آپارات را در کادر پیست کنید.
  4. برای دیدن نتیجه به تب پیش‌نمایش در همان بلوک بروید. پخش‌کننده‌ی آپارات باید همان‌جا نمایش داده شود.
  5. مقاله را ذخیره و در سایت واقعی هم ویدئو را بررسی کنید.

اگر می‌خواهید در مقالات مختلف مرتب از این ساختار استفاده کنید، بلوک را الگو (Pattern) یا بلوک قابل‌استفاده‌ی مجدد کنید و فقط آدرس iframe را هر بار عوض کنید.

یک نکته‌ی مهم: در گوتنبرگ هم اگر حساب شما قابلیت unfiltered_html نداشته باشد، بلوک HTML سفارشی دیده می‌شود، اما محتوای آن هنگام ذخیره فیلتر می‌شود و iframe از بین می‌رود.

جلوگیری از تکرار استایل آپارات

اگر در سایت‌تان ویدئوهای زیادی دارید، لازم نیست در هر مقاله تگ style را تکرار کنید. کافی است CSS را یک بار در نمایش ← شخصی‌سازی ← CSS اضافی (یا در فایل style.css قالب فرزند) قرار دهید:

.h_iframe-aparat_embed_frame { position: relative; }
.h_iframe-aparat_embed_frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

بعد از آن، در هر مقاله فقط همین کد کوتاه را درج کنید:

<div class="h_iframe-aparat_embed_frame"><span style="display:block;padding-top:57%"></span><iframe src="https://www.aparat.com/video/video/embed/videohash/------/vt/frame" title="عنوان ویدئو" loading="lazy" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe></div>

این کد یک‌خطی است و هم در ویرایشگر کلاسیک و هم در گوتنبرگ بدون دردسر کار می‌کند.

اضافه کردن lazy loading به iframe

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

loading="lazy"

نسخه‌ی کامل و تمیز کد آپارات با این ویژگی (و یک title برای دسترسی‌پذیری و سئو) این‌طور می‌شود:

<style>
.h_iframe-aparat_embed_frame { position: relative; }
.h_iframe-aparat_embed_frame .ratio { display: block; width: 100%; height: auto; }
.h_iframe-aparat_embed_frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="h_iframe-aparat_embed_frame">
  <span style="display: block; padding-top: 57%;"></span>
  <iframe
    src="https://www.aparat.com/video/video/embed/videohash/------/vt/frame"
    title="عنوان ویدئو"
    loading="lazy"
    allowFullScreen="true"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"></iframe>
</div>

 

چرا lazy loading کمک می‌کند؟

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

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

با loading="lazy" مرورگر بارگذاری iframeهایی را که خارج از دید هستند عقب می‌اندازد و قبل از رسیدن کاربر به آن‌ها (با کمی فاصله از ناحیه‌ی قابل‌مشاهده) شروع به لود می‌کند. نتیجه این است که منابع اولیه‌ی صفحه صرف محتوای مهم می‌شود و ویدئوها درست در زمان نیاز بارگذاری می‌شوند. هرچه تعداد ویدئوها بیشتر باشد، تأثیر آن محسوس‌تر است.

نکات مهم

  1. ویدئوی بالای صفحه را lazy نکنید
    اگر ویدئو همان ابتدای صفحه و در ناحیه‌ی قابل‌مشاهده است، lazy بودن فقط شروع پخش را دیرتر می‌کند. برای آن می‌توانید ویژگی loading را حذف کنید.
  2. وردپرس خودش هم گاهی این کار را می‌کند
    وردپرس از نسخه‌ی ۵٫۷ به iframeهای محتوا به‌صورت خودکار loading="lazy" اضافه می‌کند، ولی اتکا به آن توصیه نمی‌شود، چون به نسخه‌ی وردپرس، قالب و افزونه‌های فعال بستگی دارد. افزودن دستی ویژگی، رفتار را قطعی می‌کند.
  3. پشتیبانی مرورگرها
    مرورگرهای مدرن (کروم، اج، فایرفاکس و سافاری جدید) از این ویژگی روی iframe پشتیبانی می‌کنند. مرورگری که پشتیبانی نکند آن را نادیده می‌گیرد و iframe مثل قبل لود می‌شود، بنابراین خطری ندارد.
  4. برای بررسی
    در مرورگر کلید F12 را بزنید، به تب Network بروید و فیلتر Doc را انتخاب کنید. وقتی صفحه را لود می‌کنید، درخواست ویدئوهای پایین صفحه نباید بلافاصله ظاهر شود و باید هنگام اسکرول شروع شود.

اگر از کد script آپارات استفاده می‌کنید

وقتی از کد اسکریپتی آپارات استفاده می‌کنید، iframe در HTML صفحه وجود ندارد و جاوااسکریپت آن را در زمان اجرا می‌سازد. بنابراین نمی‌توانید مستقیم loading="lazy" را به آن اضافه کنید. راه‌حل این است که قبل از اجرای اسکریپت آپارات، تابع document.createElement را کمی تغییر بدهید تا هر iframeای که ساخته می‌شود، خودکار lazy شود. کد زیر همین کار را انجام می‌دهد:

(function () {
  'use strict';

  // نگه داشتن تابع اصلی مرورگر
  var nativeCreateElement = document.createElement;

  document.createElement = function (tagName, options) {
    var element = nativeCreateElement.call(this, tagName, options);

    // اگر تگ ساخته‌شده iframe بود، آن را lazy کن
    if (typeof tagName === 'string' && tagName.toLowerCase() === 'iframe') {
      element.loading = 'lazy';
    }

    return element;
  };
})();

این کد چه می‌کند؟

  1. تابع اصلی document.createElement را در یک متغیر نگه می‌دارد تا جلوتر بتواند از آن استفاده کند.
  2. تابع را با نسخه‌ی خودش جایگزین می‌کند. هر بار که هر اسکریپتی در صفحه بخواهد یک عنصر بسازد، ابتدا نسخه‌ی ما اجرا می‌شود.
  3. عنصر را با تابع اصلی می‌سازد، پس رفتار عادی تغییری نمی‌کند.
  4. اگر نام تگ iframe باشد، قبل از اینکه مقدار src به آن داده شود و بارگذاری شروع شود، ویژگی loading را روی lazy می‌گذارد.
  5. عنصر ساخته‌شده را برمی‌گرداند و اسکریپت آپارات مثل همیشه کارش را ادامه می‌دهد.

ترتیب اجرا مهم است. چون ویژگی loading باید پیش از تعیین src ثبت شود، این کد را باید پیش از اسکریپت آپارات اجرا کنید. بهترین جا بالای صفحه، یعنی در بخش head است.

این کد را کجا قرار دهیم؟

راه ساده، استفاده از یک افزونه‌ی درج کد مثل WPCode یا Insert Headers and Footers است. کد را داخل تگ script قرار دهید و در بخش «Header» ثبت کنید. اگر ترجیح می‌دهید بدون افزونه کار کنید، می‌توانید آن را از طریق فایل functions.php قالب فرزند اضافه کنید:

add_action( 'wp_head', function () {
    ?>
    <script>
    (function () {
      'use strict';
      var nativeCreateElement = document.createElement;
      document.createElement = function (tagName, options) {
        var element = nativeCreateElement.call(this, tagName, options);
        if (typeof tagName === 'string' && tagName.toLowerCase() === 'iframe') {
          element.loading = 'lazy';
        }
        return element;
      };
    })();
    </script>
    <?php
}, 1 );

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

محدودیت‌ها

  • این روش فقط روی iframeهایی اثر دارد که با جاوااسکریپت ساخته می‌شوند. iframeای که مستقیم در HTML نوشته شده باید خودش ویژگی loading="lazy" را داشته باشد.
  • کد، رفتار یک تابع سراسری مرورگر را تغییر می‌دهد، پس روی هر اسکریپتی که iframe بسازد (مثلا ویجت‌های چت یا تبلیغات) اثر می‌گذارد. این موضوع مشکلی ایجاد نمی‌کند، چون فقط بارگذاری iframeهای خارج از دید به تعویق می‌افتد، اما بعد از اضافه کردن کد سایت را یک بار کامل تست کنید.
  • اگر افزونه‌ی کش یا بهینه‌سازی جاوااسکریپت دارید، مطمئن شوید این کد با تغییر ترتیب اسکریپت‌ها دیرتر از اسکریپت آپارات اجرا نمی‌شود.

اگر ویدئو نمایش داده نشد، چه چیزهایی را بررسی کنیم؟

  1. کد بعد از ذخیره خالی شد
    دسترسی unfiltered_html را بررسی کنید و ببینید در wp-config.php مقدار DISALLOW_UNFILTERED_HTML تنظیم نشده باشد.
  2. ویدئو دیده نمی‌شود اما فضای خالی دارد
    ممکن است استایل position: absolute برای iframe اعمال نشده است (تگ style حذف شده یا CSS قالب را بازنویسی کرده است).
  3. فاصله یا خط اضافه بین کدها
    ویرایشگر کلاسیک wpautop را اعمال کرده است. کد را یک‌خطی کنید.
  4. خطای محتوای ناامن (Mixed Content)
    مطمئن شوید آدرس iframe با https:// شروع می‌شود.
  5. مسدود شدن توسط افزونه یا هدر امنیتی
    افزونه‌های امنیتی یا هدر Content-Security-Policy ممکن است نمایش iframe از دامنه‌ی aparat.com را محدود کرده باشند. این دامنه را در بخش frame-src مجاز کنید.
  6. تغییر دیده نمی‌شود
    کش مرورگر و افزونه‌ی کش سایت را پاک کنید.

خدمات بهینه‌سازی وردپرس

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

بیشتر بخوانید:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *