دلیل بهم ریختگی فونت ها در وردپرس

دلیل بهم ریختگی فونت ها در وردپرس

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

این اتفاق جدیدا برای من افتاده بود وتوی گروه کندو از بچه های سئوکار و وردپرس کار ها پرسیدم. که دو تا جواب گرفتم. هر دو جواب رو باهاتون به اشتراک می زارم.

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

دلیل عجیب و غریب شدن فونت ها

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

اول از همه باید بدونید که چرا این اتفاق افتاده و از همه مهم تر اینکه مرورگر چطوری کار می کنه؟ تا بتونید مشکل به وجود اومده در چنین مواردی رو حل بکنید.

به این تکنیک در css عموما Mirror Word گفته میشه. یعنی میشه کلمات رو به صورت آینه نمایش داد. برای این کار کافیه استایل زیر زده بشه روی اون المنت ، به طور مثال در ادامه یک نمونه اش رو در عکس ضمیمه می کنم.

 transform: scale(-1, 1)


در واقع در بین استایل های قالب یا پلاگین های شما، چنین استایلی وجود داره که باعث چنین عکس العملی میشه.
اما دلیل اتفاق افتادن: css ها برای اجرا شدن، از یک سری قوانین پیروی می کنند. در واقع specificity توسط مروگر محاسبه میشه و بسته به اون که کدوم اولویت بالاتر هست، اون استایل به المنت اعمال میشه.
در واقع یک قالب وردپرس، ممکنه چندین فایل css رو لود بکنه و ممکنه همه اون ها، روی یک المنت خاص یا کلاس های خاص، استایل زده باشند. حالا کدوم یکی از این ها اجرا میشه؟ در واقع با specifity این تعیین میشه. اگه دوست داشتید می تونید در سایت w3schools و در بخش css این مورد رو پیدا کنید و در موردش مطالعه کنید.
پس الان فهمیدیم که در اون لحظه، استایل اصلی مثلا اون المنت که می تونه تگ p و یا div یا هرچی دیگه باشه، با این استایل نمایش داده میشه.
خب چرا این اتفاق افتاده؟؟ با عکس که فرستادید، عملا نمیشه فهمید که مشکل چی بود (البته میشه حدس زد که در ادامه توضیح میدم) اما در کل باید روی مرورگر کلیک راست بکنید و گزینه Inspect رو بزنید و روی المنت مورد نظر برید و ببینید اون لحظه، کدوم استایل هست که داره روی بقیه overwrite میشه.
این طوری میشه تشخیص داده که مشکل از کجا بوده. ببخشید که طولانی شد اما گاهی وقتی میبینیم که جواب هایی به سوال هایی مثل این داده میشه که عموما فنی نیست، سعی می کنم تا بتونم راهنمایی کنم. اینکه قطعا بگیم مشکل از کروم هست و کروم مشکل داره، جواب درست و کاملی نیست. ممکنه تو اون لحظه اینترنت شما مشکل داشته و کروم نتونسته که فایل استایل مورد نظر رو دانلود کنه و این مشکل پیش اومده. یا به دلایل مختلف یه نسخه کش شده از سمت سایت شما داره بر می گرده یا حتی مرورگر فایل ها رو کش کرده. همه این ها می تونه دلیل این مشکل باشه.
اما پیشنهاد من به شما اینه که همیشه اگر در محیط development هستید و هنوز سایت در حالت production نیست، پلاگین کش سایت رو غیر فعال کنید تا در این طور موارد، سر کار نمونید. ضمن اینکه به عنوان کسی که با وب و مرورگر کار می کنید، حتما برای رفرش صفحه، از کلید های ctrl + f5 استفاده کنید تا در صورت کش کردن یا مشکل داشتن در لود استایل ها، مرورگر کلیه فایل ها رو دوباره از سرور سایت شما درخواست بکنه

یه نکته دیگه:

یه بار فکر می کنم توی لینکدین دیدم که آقای داوودی هم در این مورد صحبت کرده بودند. از دید من هم این قضیه واقعا مهم هست.

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

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

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

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

https://wpwebmaster.ir/blog/wordpress-webmasters/ ببینید.


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

یک نکته دیگه هم فراموش کردم که در عکس دیدم و فراموش کردم بگم. در عکسی که فرستاده بودید، کلمات علاوه بر miror شدن، از هم جدا هم شدن. این هم مرتبط با خاصیتی با نام unicode-bidi هست. احتمالا هر دوی اینها در اون لحظه روی المنت مورد نظر، overwrite شده بودن

یک نظر

  1. مهدی سلطانی پاسخ

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

    1. فاطمه درویشی نویسنده پاسخ

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

پاسخی بگذارید

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