چطور یک صفحه Elementor را به HTML و CSS ساده تبدیل کنیم
Elementor همین حالا هم HTML و CSS ساده به مرورگر می‌فرستد؛ کار اصلی ذخیره همین خروجی، کوچک کردن CSS به آنچه صفحه به کار می‌برد و جایگزین کردن چند بخشی است که به وردپرس نیاز دارند.
صفحه‌ای که با Elementor ساخته شده، در هر بازدید به دست وردپرس و PHP سرهم میشود، اما آنچه به مرورگر می‌رسد HTML، CSS و JavaScript معمولی است. دلیل ممکن بودن یک نسخه ایستا هم همین است: خروجی را نگه می‌دارید و دستگاهی را که آن را تولید کرده کنار می‌گذارید. انگیزه‌ها معمولاً این‌هاست: میزبانی یک صفحه فرود تمام‌شده در هر جایی، رها شدن از نگهداری یک نصب وردپرس برای سایتی که هرگز تغییر نمی‌کند، یا سریع‌تر کردن بارگذاری یک صفحه سنگین.
Elementor دکمه‌ای برای این کار ندارد. خروجی خود Elementor یک فایل قالب با فرمت JSON می‌سازد که برای وارد کردن دوباره در Elementor طراحی شده است، نه HTMLی که بتوانید میزبانی کنید. پس کار در سه گام انجام میشود: صفحه رندرشده را ذخیره کنید، CSS را به آنچه واقعاً به کار می‌رود کاهش دهید، و بخش‌هایی را که به وردپرس وابسته بودند جایگزین کنید.
چه چیزی در این انتقال می‌ماند و چه چیزی نه
| بخشی از صفحه | در نسخه ایستا |
|---|---|
| چیدمان، متن، تصویرها، رنگ‌ها، فونتها | کار میکند: HTML و CSS است |
| افکت‌های hover و چیدمان‌های واکنش‌گرا | کار میکند: CSS خالص است |
| اسلایدرها، کاروسل‌ها، زبانه‌ها، آکاردئون‌ها، پاپ‌آپ‌ها | فقط اگر فایل‌های JavaScript المنتور را نگه دارید، یا آن‌ها را از نو بسازید |
| انیمیشن‌های ورود | به JavaScript المنتور نیاز دارند؛ بدون آن ویجت‌ها پنهان می‌مانند (پایین‌تر را ببینید) |
| فرمهای Elementor، دیدگاه‌ها، جست‌وجو | از کار می‌افتند: داده را به وردپرس میفرستند |
| فهرست‌های نوشته‌ها یا محصولاتی که تغییر می‌کنند | در همان لحظه‌ای که صفحه را ذخیره کرده‌اید ثابت می‌مانند |
اگر صفحه بیشتر از دو ردیف اول تشکیل شده، نسخه ایستا یک برد آسان است. اگر کارش به فرم‌ها، فهرست فروشگاه یا فید وبلاگ وابسته است، آن را در وردپرس نگه دارید و به‌جای این کار، همان‌جا سرعتش را بالا ببرید.
گام ۱: صفحه رندرشده را ذخیره کنید
اول از وردپرس خارج شوید، یا صفحه را در یک پنجره خصوصی باز کنید. بازدید در حالت واردشده، نوار مدیریت و استایل‌هایش را به HTML اضافه میکند و هیچ‌کدام از این دو را در نسخه ایستا نمی‌خواهید.
یک صفحه: از مرورگر ذخیره‌اش کنید
- صفحه را در Chrome باز کنید، در حالتی که از وردپرس خارج شده‌اید.
- Ctrl+S را بزنید (در مک Cmd+S) و گزینه Webpage, Complete (صفحه وب، کامل) را انتخاب کنید.
- یک فایل HTML و کنارش پوشه‌ای می‌گیرید که تصویرها، استایل‌شیت‌ها و اسکریپت‌هایی را که صفحه بارگذاری کرده بود در خود دارد.
کل یک سایت: از افزونه خروجی ایستا استفاده کنید
برای بیش از چند صفحه، یک افزونه سایت ایستا مثل Simply Static سایت وردپرسی را می‌خزد و هر صفحه را همراه با فایل‌های جانبی‌اش در یک پوشه یا یک فایل ZIP می‌نویسد. لینک‌های داخلی را هم بازنویسی میکند؛ کاری که با دست خسته‌کننده است. با این حال خروجی را صفحه‌به‌صفحه بررسی کنید: افزونه‌ها ممکن است فایل‌هایی را که فقط JavaScript درخواستشان میکند جا بیندازند.
گام ۲: CSS را به آنچه صفحه به کار می‌برد کاهش دهید
یک صفحه معمولی Elementor استایل‌شیت قالب، CSS بخش نمایشی (frontend) المنتور، یک فایل CSS برای هر نوع ویجت، یک فایل تولیدشده برای خود صفحه و اغلب یکی دو فایل فونت را بارگذاری میکند. بیشتر این قاعدهها به ویجتهایی استایل می‌دهند که اصلاً در صفحه نیستند. مطمئن‌ترین راه برای پیدا کردن قاعده‌هایی که واقعاً به کار می‌روند این است که بگذارید Chrome آن‌ها را ضبط کند.
- صفحه زنده را، در حالتی که از وردپرس خارج شده‌اید، باز کنید و DevTools را باز کنید.
- منوی سه‌نقطه را باز کنید، سپس More tools (ابزارهای بیشتر) و بعد Coverage (پوشش) را انتخاب کنید و دکمه بارگذاری مجدد آن را بزنید.
- با صفحه کار کنید: منوی موبایل را باز کنید، زبانه‌ها و آکاردئون‌ها را یکی‌یکی بزنید و اندازه پنجره را به پهنای گوشی و تبلت خودتان تغییر دهید.
- در پنل Coverage دکمه Export (خروجی گرفتن) را بزنید و فایل JSON را ذخیره کنید.
- آن فایل را روی صفحه تبدیل Coverage JSON به CSS رها کنید و استخراج CSS استفادهشده را بزنید.
- نتیجه را به شکل یک استایل‌شیت ذخیره کنید، تگ‌های
<link rel="stylesheet">صفحه را با یک لینک به همین فایل جایگزین کنید و فایل‌های فونتی را که به آن‌ها ارجاع می‌دهد نگه دارید.
حذف‌کننده CSS استفادهنشده هر قاعده را دوباره داخل بلوک @media خودش می‌نویسد و این اینجا اهمیت دارد: Elementor قاعده‌های تبلت و موبایل را داخل media queryها نگه میدارد و ابزاری که این بلوک‌ها را از دست بدهد، چیدمان موبایل را روی دسکتاپ هم اعمال میکند. این ابزار @font-face و @keyframes را هم بهطور کامل نگه میدارد.
اگر ترجیح می‌دهید با فایل‌های ذخیره‌شده کار کنید، زبانه HTML + CSS همین ابزار به‌جای آن HTML و استایل‌شیت‌ها را می‌گیرد. Elementor و افزودنی‌هایش بعضی کلاس‌ها را پس از بارگذاری صفحه با JavaScript اضافه می‌کنند، پس پیشوندهای آن‌ها را در همیشه نگه‌دار بنویسید، مثلاً /^elementor-/ و /^e-/، و پیش از اعتماد به نتیجه، آن را با صفحه اصلی مقایسه کنید.
گام ۳: تکلیف بخش‌هایی را که به وردپرس نیاز داشتند روشن کنید
انیمیشن‌های ورود و ویجت‌های پنهان
ویجتی که انیمیشن ورود دارد کلاس elementor-invisible را با خود دارد و JavaScript المنتور وقتی ویجت با پیمایش در دید قرار می‌گیرد آن را برمی‌دارد. در نسخه‌ای که آن اسکریپت را ندارد، این کلاس هرگز برداشته نمی‌شود و ویجت نامرئی می‌ماند. یا اسکریپت‌های بخش نمایشی المنتور را نگه دارید، یا elementor-invisible را از HTML حذف کنید و بگذارید ویجت‌ها بدون انیمیشن ظاهر شوند.
فرم‌ها
فرم Elementor داده‌هایش را به وردپرس می‌فرستد که دیگر وجود ندارد. آن را با یک سرویس فرم که یک فرم HTML ساده را میپذیرد جایگزین کنید، یا با یک لینک ساده که یک ایمیل باز میکند.
لینک‌ها و باقی‌مانده‌ها
- همه لینک‌های داخلی را بررسی کنید: نشانی‌های وردپرسی مثل
/about/به یک پوشه متناظر با یک فایلindex.htmlنیاز دارند، یا به یک قاعده بازنویسی (rewrite) روی میزبان جدید. - اسکریپت‌های وردپرسی را که صفحه دیگر لازم ندارد حذف کنید، مثل اسکریپت ایموجی، و اگر نام فایل‌ها را تغییر می‌دهید، عددهای
?ver=را هم از نام فایل‌ها بردارید. - تصویرهای
srcsetرا که HTML به آن‌ها اشاره میکند نگه دارید، وگرنه گوشی‌ها تصویر با اندازه کامل را بارگذاری می‌کنند.
پیش از جابه‌جایی بررسی کنید
- نسخه ایستا و نسخه اصلی را کنار هم در پهنای دسکتاپ، تبلت و گوشی باز کنید.
- همه منوها، زبانه‌ها و آکاردئون‌ها را باز کنید و کل صفحه را پیمایش کنید تا ویجت‌های پنهان را پیدا کنید.
- هر دو را از یک آزمون سرعت عبور دهید و حجم CSS بارگذاری‌شده را مقایسه کنید.
- سایت وردپرسی و فایل‌های کامل CSS را نگه دارید تا وقتی که نسخه ایستا مدتی به‌صورت زنده کار کرده باشد.