حل مشکل جاستیفای در وردپرس و justify کردن متن در گوتنبرگ

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

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

دلیل حذف دکمه جاستیفای از گوتنبرگ

این سؤالیه که خیلی‌ها می‌پرسن و جوابش هم جالبه: حذفش عمدی بوده، نه اینکه یادشون رفته باشه.

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

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

راه‌های بازگشت جاستیفای به گوتنبرگ

سه راه اصلی جلوتون هست و انتخاب بین‌شون بستگی داره به اینکه چقدر با کد راحتید:

۱. برگشتن به ویرایشگر کلاسیک. با افزونه Disable Gutenberg می‌تونید ویرایشگر قدیمی رو برگردونید و دکمه جاستیفای هم باهاش برمی‌گرده. ولی راستش رو بخواید این مثل اینه که برای درست کردن یه لامپ سوخته، کل خونه رو برگردونید به دهه شصت. گوتنبرگ کلی امکانات داره که با این کار از دستشون می‌دید و بلندمدت هم به ضررتونه، چون وردپرس داره کاملاً روی ویرایشگر بلاکی سرمایه‌گذاری می‌کنه.

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

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

روش اول: جاستیفای کردن متن با CSS

اول بذارید همون کدی که تو اکثر سایت‌ها بهتون پیشنهاد می‌دن رو بگم، بعد بگم چرا نباید ازش استفاده کنید:

css

p {
    text-align: justify;
}

این کد کار می‌کنه. صد در صد کار می‌کنه. مشکل اینجاست که زیادی کار می‌کنه.

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

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

امروز       مقاله       جدید       منتشر شد

اسمش رو گذاشتیم جاستیفای، ولی عملاً سایت رو داغون کرده. پس قانون طلایی: هیچ‌وقت جاستیفای رو سراسری اعمال نکنید.

پس کد را دقیقاً کجا بگذاریم؟

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

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

یه راه درست‌تر دارید:

اگه قالب فرزند (Child Theme) دارید، فایل style.css قالب فرزند جای امن و اصولی برای این کاره.

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

حالا می‌ریم سراغ کدی که واقعاً باید استفاده کنید. به‌جای اینکه به همه تگ‌های p دستور بدیم، فقط پاراگراف‌هایی رو هدف می‌گیریم که داخل بدنه مقاله هستن:

css

.entry-content p {
    text-align: justify;
    text-justify: inter-word;
}

تو اکثر قالب‌های استاندارد وردپرس، محتوای اصلی مقاله داخل کلاسی به اسم entry-content یا post-content قرار می‌گیره. با این کد، سایدبار و فوتر و نظرات کاملاً دست‌نخورده می‌مونن.

اگر کد جواب نداد، چطور کلاس درست را پیدا کنیم؟

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

۱. یه مقاله از سایتتون رو تو مرورگر باز کنید.

۲. روی یه پاراگراف راست‌کلیک کنید و بزنید Inspect.

۳. تو پنلی که باز می‌شه، از تگ <p> که هایلایت شده یکی دو تا لایه برید بالاتر. یه <div> می‌بینید که یه کلاس مثل entry-content، post-content، article-body یا td-post-content داره.

۴. همون اسم رو تو کد بالا جایگزین کنید. تمام.

جاستیفای کردن تک‌پاراگراف تو گوتنبرگ، بدون کدنویسی

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

روی پاراگراف موردنظر تو گوتنبرگ کلیک کنید، از پنل تنظیمات بلاک برید به بخش پیشرفته (Advanced) و توی کادر کلاس‌های CSS اضافی، یه اسم دلخواه بنویسید. مثلاً my-justify.

بعد فقط یه بار این کد رو به CSS اضافی سایتتون اضافه کنید:

css

.my-justify {
    text-align: justify;
    text-justify: inter-word;
}

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

افزونه‌های سبک برای برگردوندن دکمه Justify

اگه اصلاً حال و حوصله کد ندارید و می‌خواید دکمه جاستیفای مثل ویرایشگر کلاسیک، بالای هر بلاک متن باشه، این افزونه کارتون رو راه می‌ندازه:

Gutenberg Block Editor Toolkit: یه بسته سبک که چند تا دکمه حذف‌شده از جمله Justify رو به نوار ابزار برمی‌گردونه.

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

چطور فاصله‌های زیاد بین کلمات فارسی را درست کنیم؟

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

ویژگی text-justify

دستور text-justify: inter-word به مرورگر می‌گه فاصله‌ها رو به‌جای اینکه جایی که گیر کرده انبار کنه، به‌طور یکنواخت بین کل کلمه‌های خط پخش کنه. نتیجه خیلی چشم‌نوازتره. توجه کنید که پشتیبانی مرورگرها ازش کامل نیست، ولی چون بی‌ضرره و تو مرورگرهایی که پشتیبانی می‌کنن نتیجه رو بهتر می‌کنه، نگهش دارید.

نیم‌فاصله، مهم‌تر از هر کدی

اینو جدی بگیرید، چون تأثیرش از هر CSSای بیشتره.

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

راه‌حل: موقع تایپ از نیم‌فاصله استفاده کنید. کلید ترکیبی‌ش Shift + Space هست و تو بعضی صفحه‌کلیدها Ctrl + Shift + 2. با نیم‌فاصله، کلمه به‌عنوان یه واحد یکپارچه شناخته می‌شه و هیچ‌وقت وسطش نمی‌شکنه.

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

ویژگی text-align-last؛ درست کردن خط آخر پاراگراف

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

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

با این دستور خیالتون راحت می‌شه:

css

text-align-last: right;

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

تأثیر جاستیفای کردن روی سئو و تجربه کاربری

بذارید یه سوءتفاهم رایج رو رفع کنم: جاستیفای کردن متن مستقیماً روی رتبه سئوی سایتتون تأثیر نداره.گوگل بابت تراز بودن یا نبودن متن، بهتون امتیاز نمی‌ده و ازتون امتیاز هم کم نمی‌کنه.

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

از نظر تجربه کاربری هم یه توصیه عملی دارم:

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

کد نهایی و اصولی

خب، جمع همه چیزهایی که گفتیم تو یه کد. این رو ببرید تو نمایش > سفارشی‌سازی > CSS اضافی و ذخیره کنید:

css

/* تراز کردن هوشمند و استاندارد متن مقالات وردپرس */
.entry-content p,
.post-content p {
    text-align: justify;
    text-justify: inter-word;  /* توزیع یکنواخت فاصله‌ها بین کلمات */
    text-align-last: right;    /* جلوگیری از کشیده شدن خط پایانی */
}

/* اختیاری: برای جاستیفای کردن پاراگراف‌های دلخواه در گوتنبرگ */
.my-justify {
    text-align: justify;
    text-justify: inter-word;
    text-align-last: right;
}

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

سؤالات متداول

جمع‌بندی

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

اگه بخوام کل مقاله رو تو سه جمله خلاصه کنم:

۱. کد جاستیفای رو هیچ‌وقت روی تگ p سراسری اعمال نکنید و محدودش کنید به کلاس محتوای مقاله.

۲. کد رو تو بخش CSS اضافی بذارید، نه فایل style.css قالب اصلی.

۳. نیم‌فاصله رو جدی بگیرید. هیچ کد CSSای نمی‌تونه جای تایپ درست رو بگیره.

همین. کد نهایی رو کپی کنید، کش رو خالی کنید و برید مقاله بعدی‌تون رو بنویسید. 🙂

تیم تولید محتوا

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