آموزش تغییر اندازه فونت سایت وردپرس

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

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

اهمیت اندازه فونت در سایت

خب مسلماً همه شما از اهمیت میزان رضایت کاربران از سایت باخبر هستین. اینکه شما بتونین به‌راحتی یک ظاهر جذاب و خوانا برای سایت وردپرسی خودتون بسازین می‌تونه در جلب رضایت کاربران‌تون هم به شما کمک زیادی کنه.

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

با آموزشی که در اینجا برای شما قرار می‌دیم می‌تونین به‌راحتی اندازه فونت وردپرس خودتون رو تغییر بدین.

روش اول: آموزش تغییر اندازه فونت سایت با افزونه

روش اولی که به شما می‌گیم استفاده از افزونه Advanced Editor Tools (که قبلاً با نام TinyMCE Advanced شناخته می‌شد) هست. این پلاگین کاملاً رایگان هست و شما به‌راحتی می‌تونین اون رو ازمخزن وردپرس خودتون دانلود کنین. برای نصب این افزونه می‌تونین آموزش نصب افزونه وردپرس رو از سایت میهن وردپرس مشاهده کنین.

نکته: این پلاگین هم با ویرایشگر جدید وردپرس (گوتنبرگ) سازگار هست و هم به ابزارهای ویرایشگر کلاسیک کمک می‌کنه تا ویژگی‌های پیشرفته‌تری مثل تغییر سایز دقیق فونت‌ها رو در اختیارتون قرار بدن.

پس‌ازاینکه این پلاگین رو نصب و فعال کردید می‌تونین از پیشخوان وردپرس خودتون وارد تنظیمات این پلاگین بشین. زمانی که وارد تنظیمات افزونه شدین با یک صفحه مواجه میشین که شامل دو فیلد “ویرایشگر بلوک (گوتنبرگ)” و “ویرایشگر کلاسیک” هست.

این بخش کاملاً به تنظیمات افزونه اختصاص دارد و شما می‌توانید از همین صفحه تنظیمات این افزونه رو تغییر دهید.

افزودن گزینه‌های دلخواه به ویرایشگر

این بخش کاملاً به تنظیمات افزونه اختصاص داره و شما می‌تونین از همین صفحه تنظیمات این افزونه رو تغییر بدین. اگر در این بخش به سمت پایین اسکرول کنین می‌تونین امکانات و گزینه‌های این پلاگین رو مشاهده کنین. تمامی امکاناتی که نیاز دارین (مثل دکمه اندازه قلم) رو بردارین و با کشیدن و رها کردن در قسمتی که برای نوار ابزار مشخص‌شده قرار بدین.

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

البته شما این امکان رو دارین که امکانات پیشرفته‌تری رو هم به ویرایشگر خودتون اضافه کنین تا دستتون برای تغییر استایل کاملاً باز باشه.

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

همان‌طور که در تصویر زیر مشاهده می‌کنین ما یک قسمت از متن رو انتخاب کردیم و از گزینه‌ی “اندازه قلم” برای تغییر اندازه آن استفاده کردیم. به همین صورت نیز شما می‌تونین اندازه هر قسمت از متن رو که می‌خواین تغییر بدین.

بعدازاینکه متن موردنظر خودتون رو تغییر دادین و به هر قسمت، اندازه موردنظر خودتون رو وارد کردین، نوشته رو ذخیره کنین و بر روی گزینه‌ی “پیش‌نمایش” کلیک کنین تا نتیجه رو یک بار مشاهده کنین و در صورتی که از نتیجه رضایت داشتین اون رو منتشر کنین.

روش دوم: تغییر سایز فونت با CSS

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

نکته: با استفاده از این روش، تغییرات به صورت کلی روی بخش‌های مشخص‌شده سایت شما اعمال میشه نه فقط روی یک کلمه یا کادر خاص از یک نوشته.

برای اینکه بتونین با استفاده از CSS، فونت سایت خودتون رو تغییر بدین باید از کدهایی که در این قسمت قرار میدیم استفاده کنین. این کدها رو می‌تونین در قسمت سفارشی‌سازی CSS اضافی قرار بدین.

در مرحله اول شما باید وارد پیشخوان وردپرس خودتون بشین و گزینه‌ی نمایش » سفارشی‌سازی رو انتخاب کنین.

بعد از انتخاب گزینه‌های بالا یک صفحه جدید برای شما باز میشه که باید از سمت راست گزینه‌ی “CSS اضافی” رو انتخاب کنین و قطعه کدهای زیر رو با توجه به نیازتون در اون جایگذاری کنین.

تغییر فونت بدنه اصلی سایت

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

body {
font-size: 1.25rem;
}

تغییر فونت عنوان‌های خاص (مثل H2)

با استفاده از قطعه کد زیر می‌تونین به عنوان‌های موردنظر خودتون اندازه فونت موردنظر خودتون رو بدین تا تیترهای مقالات دقیقاً به همان سایزی که دوست دارین در بیان:

h2 {
font-size: 2.5em;
}

تغییر اندازه فونت پاراگراف‌ها

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

p {
font-size: 25px;
}

تغییر اندازه فونت سایت فقط برای دسکتاپ (ریسپانسیو)

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

html {
font-size: 18px;
}
@media (min-width: 900px) {
html {
font-size: 20px;
}
}

تغییر اندازه فونت بخش سایدبار (ستون کناری)

این کد هم به شما برای تغییر دادن اندازه فونت بخش منوها و ابزارک‌های سایدبار سایتتون کمک می‌کنه:

.sidebar li {
font-size: 13px;
}

روش سوم: تغییر اندازه فونت در گوتنبرگ

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

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

برای تغییر اندازه فونت در گوتنبرگ، مراحل زیر رو دقیقاً دنبال کنین.

اولین کاری که باید انجام بدین این هست که وارد بخش نوشته‌ها » افزودن نوشته بشین تا یک پست جدید برای شما باز بشه، یا اینکه یکی از نوشته‌های قبلی سایتتون رو ویرایش کنین. خب حالا باید همان قسمتی از متن یا پاراگرافی که می‌خواین اندازه‌اش تغییر پیدا کنه رو انتخاب کنین. سپس از سمت چپ بر روی آیکون تنظیمات (چرخ‌دنده) و بخش بلوک کلیک کنین تا تنظیمات متن و تایپوگرافی برای شما نمایش داده بشه.

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

تغییر اندازه فونت در وردپرس با افزونه‌های تخصصی فونت (بدون نیاز به کدنویسی)

اگر دوست ندارین با کدهای CSS درگیر بشین و از طرفی می‌خواین کنترل کاملی روی سایز و حتی نوع فونت سایتتون داشته باشین، افزونه‌های تخصصی فونت بهترین راهکار هستن. یکی از معروف‌ترین افزونه‌ها در این زمینه، افزونه Use Any Font یا پلاگین‌های مدیریت فونت فارسی هستن. بعد از نصب این افزونه‌ها، یک پنل کاملاً گرافیکی به پیشخوان وردپرستون اضافه میشه.

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

آشنایی با واحدهای اندازه‌گیری فونت در وردپرس (تفاوت PX، EM و REM چیست؟)

وقتی کادر تنظیمات سایز فونت رو باز می‌کنین، با واحدهایی مثل PX، EM و REM مواجه میشین. برای اینکه سردرگم نشین، بذارین خیلی ساده بگم: واحد PX (پیکسل) یک واحد ثابت هست؛ یعنی اگر بنویسین 16px، تحت هر شرایطی سایز متن همان ۱۶ پیکسل می‌مونه. اما واحدهای EM و REM واحدهایی پویا و نسبی هستن.

واحد REM بر اساس سایز فونت پایه کل سایت (که معمولاً ۱۶ پیکسل هست) محاسبه میشه. مثلاً 1.5rem یعنی یک‌ونیم برابر سایز پایه. استفاده از واحدهای REM و EM از نظر اصول سئو و دسترسی‌پذیری بسیار استانداردتر هست، چون اگر کاربران در مرورگر خودشون زوم کنن، متن‌های سایت شما هم به‌صورت هماهنگ بزرگ و کوچک میشن.

جمع‌بندی

در نهایت، تنظیم و تغییر اندازه فونت در وردپرس یکی از بخش‌های اصلی و کلیدی در طراحی تجربه کاربری و سئو سایت به‌حساب میاد. همان‌طور که در این مقاله بررسی کردیم، شما دست‌تون برای انجام این کار کاملاً باز هست؛ اگر می‌خواید خیلی سریع و بصری سایز بخش‌های خاصی از متن رو تغییر بدید، می‌تونید از امکانات پیش‌فرض ویرایشگر گوتنبرگ یا افزونه Advanced Editor Tools استفاده کنید. اما اگر به دنبال یک تغییر کلی و همه‌جانبه در استایل تمام صفحات دسکتاپ و موبایل هستید، کدهای ساده CSS در بخش سفارشی‌سازی بهترین و استانداردترین راهکار برای شماست.

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

امیدواریم این مقاله به شما برای تغییر اندازه فونت وردپرس به شما کمک کرده باشه. موفق و پیروز باشید. 🙂

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

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