۱۰ نکته کاربردی CSS برای صرفه‌جویی در زمان،مخصوص کاربران وردپرس
رفع مشکل لینک‌های لنگر با سرصفحه‌های چسبان: تا به حال شده روی لینکی کلیک کنید که به بخشی از صفحه ارجاع می‌دهد و ببینید عنوان مقصد زیر نوار ناوبری چسبان مخفی شده است؟ این مشکل در وردپرس رایج است و معمولاً در پست‌های طولانی که از افزونه‌های فهرست مطالب استفاده می‌کنند، دیده می‌شود.
بیشتر قالب‌ها برای نوارهای ناوبری از position: sticky یا fixed استفاده می‌کنند که بالای صفحه را می‌پوشانند. وقتی کاربر روی لینک لنگر (مثل #faq یا #pricing) کلیک می‌کند، مرورگر آن بخش را دقیقاً در بالای صفحه، درست زیر نوار ناوبری، نمایش می‌دهد.
برای رفع این مشکل می‌توانید از ویژگی CSS scroll-margin-top استفاده کنید. این ویژگی بالای عنوان فاصله اضافه می‌کند تا زیر نوار ناوبری چسبان گیر نکند.
h2, h3 {
scroll-margin-top: 80px;
}یک روش پیشنهادی این است که مقدار را با ارتفاع هدر خود مطابقت دهید. اگر نوار ناوبری چسبان شما ۶۴px ارتفاع دارد، از scroll-margin-top: 64px یا مقداری کمی بیشتر استفاده کنید. این ویژگی را روی سطوح عنوانی که در لینک‌های نشانه (anchor) استفاده می‌کنید اعمال کنید — معمولاً h2 یا h3.
راهنمای مطالعه:
هدف قرار دادن صفحات مدیریتی خاص وردپرس با استفاده از کلاس‌های <body>
خیلی از افزونه‌های وردپرس پنل مدیریت را با اعلان‌های تبلیغاتی، بنرها یا المان‌های بدون استایل شلوغ می‌کنند. اما حذف یا تغییر آن‌ها در کل سایت همیشه عملی نیست، مخصوصاً وقتی فقط می‌خواهید در یک صفحه خاص مثل تنظیمات ووکامرس یا ویرایشگر نوع نوشتهٔ سفارشی تغییر ایجاد کنید.
وردپرس به‌صورت خودکار کلاس‌های مرتبط با زمینه را به تگ <body> در صفحات مدیریت اضافه می‌کند. این کلاس‌ها شامل اسلاگ صفحات، نوع نوشته‌ها و ارجاع به آیتم‌های منو هستند — و برای نوشتن CSS محدودشده که فقط در محل موردنظر اعمال شود، خیلی مفیدند.
برای مثال، فرض کنید می‌خواهید اعلان‌ها را فقط در صفحه تنظیمات ووکامرس مخفی کنید.
body.toplevel_page_woocommerce .notice {
display: none;
}برای پیدا کردن این کلاس‌ها، وارد پنل مدیریت وردپرس خود شوید، راست‌کلیک کنید و Inspect را انتخاب کنید (یا کلیدهای Cmd+Option+I / Ctrl+Shift+I را فشار دهید). به دنبال تگ <body> باشید، این تگ شامل چندین کلاس مفید است.
برای مثال، ممکن است در صفحه داشبورد چیزی شبیه این ببینید:
<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">برخی کلاس‌های معمول که ممکن است ببینید:
post-type-product: ویرایشگر محصولات ووکامرسedit-tags-php: مدیریت دسته‌بندی/برچسب‌هاsettings_page_yoast: تنظیمات سئوی Yoasttoplevel_page_woocommerce: صفحه‌ی اصلی تنظیمات ووکامرس
برای استفاده از این کلاس‌ها در CSS خود، باید یک استایل‌شیت ادمین سفارشی enqueue کنید. نمی‌توانید آن‌ها را از طریق سفارشی‌ساز اضافه کنید سفارشی‌ساز فقط روی ظاهر سایت تاثیر می‌گذارد.
این کد را در functions.php قالب خود اضافه کنید:
function my_custom_admin_styles() {
wp_enqueue_style(
'my-admin-css',
get_stylesheet_directory_uri() . '/admin.css'
);
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');سپس یک فایل به نام admin.css در پوشه قالب‌تان بسازید و استایل‌های scoped را آن‌جا اضافه کنید.
ساخت شبکه‌های واکنش‌گرا بدون صفحه‌ساز
صفحه‌سازها چینش را ساده می‌کنند، اما معمولاً حجم اضافی به سایت اضافه می‌کنند. اگر با یک قالب کلاسیک (مثل Astra یا GeneratePress) کار می‌کنید یا حتی در حال ساخت قالب بلوکی خودتان هستید، CSS Gridها روند ایجاد یک چینش واکنش‌گرا را سریع‌تر و تمیزتر می‌کنند.
این روش به‌ویژه برای موارد زیر مفید است:
- شبکه‌های پست وبلاگ در صفحه اصلی یا صفحات آرشیو
- لیست انواع نوشته‌های سفارشی مثل رویدادها، اعضای تیم یا نظرات مشتریان
- چیدمان محصولات ووکامرس بدون نیاز به تغییر فایل‌های قالب
کافی است این کد را به فایل استایل قالب فرزند خود اضافه کنید (یا از طریق functions.php آن را بارگذاری کنید):
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}حالا حلقه‌تون رو داخل یک کانتینر مثل زیر قرار بدید:
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<div class="post-card">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; ?>
</div>این CSS خودش به‌صورت خودکار به اندازه‌ای ستون ایجاد می‌کنه که در صفحه جا بشه، مطمئن می‌شه هر آیتم حداقل ۲۸۰px عرض داشته باشه و روی صفحه‌های کوچکتر ستون‌ها رو خودبه‌خود کمتر می‌کنه، بدون نیاز به مدیا کوئری یا افزونه.
استفاده از clamp() برای اندازه‌های فونت واکنش‌گرا بدون نیاز به مدیا کوئری
طراحی برای اندازه‌های متنوع صفحه‌نمایش معمولاً یعنی دست و پنجه نرم کردن با اندازه فونت‌ها و مدیا کوئری‌ها. اما وقتی چندین نقطه شکست (breakpoint) دارید یا می‌خواهید مقیاس‌بندی یکنواختی روی دستگاه‌های مختلف داشته باشید، مدیا کوئری‌ها می‌توانند حسابی شلوغ و پیچیده بشوند.
اینجاست که clamp() وارد می‌شود؛ تابعی مدرن در CSS که اجازه می‌دهد یک مقدار سیال بین اندازه حداقل، مطلوب و حداکثر را —همه در یک خط— تعریف کنید.
قالب اصلی به این صورت است:
font-size: clamp(min, preferred, max);این ویژگی به مرورگر اجازه می‌دهد اندازهٔ فونت را به‌طور خودکار بر اساس عرض پنجرهٔ مرورگر تنظیم کند، بدون نیاز به مدیا کوئری‌های جداگانه.
بیشتر قالب‌های وردپرس (به‌ویژه قالب‌های بلوکی) از طراحی سیال بهره می‌برند. اما ویرایشگر بلوک گوتنبرگ همیشه کنترل کامل روی مقیاس‌بندی فونت را به شما نمی‌دهد، مخصوصاً برای مواردی مثل:
- تیترهای بخش قهرمان (Hero section)
- عنوان‌های پست‌های ویژه
- چیدمان‌های تمام‌عرض صفحه
به‌جای هاردکد کردن چندین اندازهٔ فونت با مدیا کوئری‌ها، تابع clamp() به‌طور پیش‌فرض کد تمیزتر، تکرار کمتر و واکنش‌گرایی بهتری ارائه می‌دهد. می‌توانید از آن برای تیترها، دکمه‌ها، نقل‌قول‌های بلوکی و غیره در استایل‌های سفارشی بلاک از طریق theme.json یا editor-style.css استفاده کنید.
h1 {
font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}clamp() در همه مرورگرهای مدرن پشتیبانی می‌شود. استفاده از آن در تمام پروژه‌های وردپرس بی‌دردسر است، مگر اینکه مرورگرهای شرکتی خیلی قدیمی (مثل Internet Explorer 11، که خود وردپرس دیگر آن را پشتیبانی نمی‌کند) را هدف بگیرید.
با content-visibility عملکرد صفحات طولانی را بهبود دهید
اگر صفحه اصلی شما فهرستی از پست‌های وبلاگ را نشان می‌دهد، صفحه فروشگاه‌تان ده‌ها محصول بارگذاری می‌کند، یا با استفاده از یک کوئری سفارشی نظرات مشتریان را نمایش می‌دهید، احتمالاً با مشکلات عملکردی، به‌ویژه در موبایل، مواجه شده‌اید. آن تأخیری که هنگام اسکرول کردن یک فهرست طولانی احساس می‌کنید؟ در واقع مرورگر بیشتر از حد نیاز کار می‌کند.
ویژگی CSS content-visibility می‌تواند کمک کند و به مرورگر بگوید: «این عنصر را تا زمانی که به داخل دید اسکرول نشود رندر نکن.»
.article-card {
content-visibility: auto;
contain-intrinsic-size: 400px;
}این مثل بارگذاری تنبل برای عناصر HTML هست که هزینه‌های چیدمان و رندر محتواهای خارج از صفحه رو کاهش می‌ده. خاصیت contain-intrinsic-size به مرورگر یک ارتفاع تخمینی می‌ده تا فضا رو رزرو کنه، تا وقتی محتوا بارگذاری می‌شه چیدمان صفحه جابجا نشه.
برای این کار می‌تونید هنگام ویرایش قالب به هر آیتم حلقه کلاسی مثل .article-card یا .product-card اضافه کنید، سپس CSS رو در فایل stylesheet قالب فرزندتون قرار بدید یا از طریق functions.php بارگذاریش کنید.
اگر از گوتنبرگ استفاده می‌کنید، می‌تونید یک کلاس دلخواه به بلوک اضافه کنید (در تنظیمات پیشرفته)، و بعد در بخش CSS اضافی یا فایل قالب‌تون اون رو هدف بگیرید.
در بازنویسی استایل‌های افزونه، !important را با احتیاط ولی هوشمندانه به کار ببرید
در بیشتر پروژه‌های وردپرس، وقتی می‌خواهید چیزی را استایل دهید، هیچ اتفاقی نمی‌افتد. قانون را می‌نویسید، سلکتور را بررسی می‌کنید، صفحه را رفرش می‌کنید… و باز هم استایل‌های اصلی افزونه پیروز می‌شوند.
این به این دلیل است که بسیاری از افزونه‌های وردپرس استایل‌ها را با:
- اختصاصیت بالا (زنجیره‌های طولانی کلاس‌ها)
- خصیصه‌های
styleدرون‌خطی - فایل‌های استایل که بعد از فایل شما بارگذاری می‌شوند
به‌جای دست و پا زدن با سلکتورهای پیچیده، اغلب راه‌حل ساده‌تر استفاده از !important است وقتی که موجه باشد.
برای مثال، Contact Form 7 از کلاس‌های خاصی مثل .wpcf7-form-control استفاده می‌کند، اما استایل‌های پیش‌فرض آن بدون !important ممکن است سخت بازنویسی شوند.
در اینجا نحوه گرد کردن ورودی‌های فرم را می‌بینید:
input.wpcf7-form-control {
border-radius: 6px !important;
}مهمه که با هدف ازش استفاده کنی. به جای پراکندن !important توی همه جا، بهتره بازنویسی‌ها رو توی یه فایل استایل جداگانه برای مدیریت یا اصلاح پلاگین نگه داری. اینطوری CSS قالب اصلی‌ات تمیز می‌مونه و از درگیری‌های ناخواسته بعدی جلوگیری می‌کنه.
اگه روی سایت‌های مشتری کار می‌کنی، این روش بهت کمک می‌کنه استایل‌های تهاجمی پلاگین‌ها رو بدون اینکه قالب‌ها رو فورک کنی یا یه پلاگین دیگه اضافه کنی، مهار کنی.
استفاده از :where() برای بازنویسی استایل بلوک‌ها بدون دردسرهای specificity
اگر تا حالا سعی کرده‌اید استایل پیش‌فرض بلوک‌های گوتنبرگ را دستکاری کنید، دردسرش را به خوبی می‌شناسید: هسته‌ی وردپرس و قالب‌های مبتنی بر بلوک اغلب با سلکتورهای خیلی خاص عرضه می‌شوند. حتی تغییرات جزئی مثل تنظیم حاشیه‌ی دکمه‌ها یا حذف فاصله‌ی بلوک‌ها، یا به بازنویسی‌های پیچیده نیاز دارد یا باید کلی آزمون‌وخطا انجام بدهید.
برای حل این مشکل می‌توانید از شبه‌کلاس :where() استفاده کنید. این یک غلاف برای سلکتورهای CSS است که همواره specificity آن صفر است، مهم نیست چه چیزی داخلش قرار دهید.
:where(.wp-block-button) {
margin-bottom: 0;
}این یک سبک را به .wp-block-button اعمال می‌کند، اما برخلاف یک سلکتور معمولی، در رقابت با سایر قوانین CSS قرار نمی‌گیرد و در نتیجه ایمن و انعطاف‌پذیر است.
فرض کنید روی سایتی با یک تم بلاکی کار می‌کنید (مثل Twenty Twenty-Four یا Astra’s block starter). می‌خواهید حاشیه اضافی زیر دکمه‌ها را حذف کنید:
.wp-block-button {
margin-bottom: 0;
}اما ممکن است این کار جواب ندهد، چون هسته‌ی وردپرس یا قالب ممکن است یک قانون خاص‌تر داشته باشد، مثل:
.entry-content .wp-block-button:not(.is-style-outline) {
margin-bottom: 1.5rem;
}می‌توانید دقت انتخاب‌گر را بیشتر کنید (شکننده)، از !important استفاده کنید (دست‌سنگین) یا از :where() استفاده کنید تا CSS قابل نگهداری‌تری بنویسید که با بقیه‌ی کدتون خوب کنار بیاد.
سفارشی‌سازی صفحه‌ی ورود وردپرس بدون افزونه
دوست دارید لوگوی خودتون رو به صفحه‌ی ورود اضافه کنید؟ رنگ پس‌زمینه رو عوض کنید؟ فونت‌ها یا استایل دکمه‌ها رو دستکاری کنید؟ برای این کار نیازی به افزونه ندارید. وردپرس با CSS خودتون سفارشی‌سازی صفحه‌ی ورود رو آسون کرده. تنها کاری که باید بکنید استفاده از یک هوک اکشنه.
فقط کافیه یک فایل استایل سفارشی رو با هوک login_enqueue_scripts enqueue کنید:
function custom_login_styles() {
wp_enqueue_style(
'my-login-styles',
get_stylesheet_directory_uri() . '/login.css'
);
}
add_action('login_enqueue_scripts', 'custom_login_styles');حالا در فایل login.css می‌تونی استایل‌هایی مثل این اضافه کنی:
body.login {
background-color: #f9f9f9;
}
.login h1 a {
background-image: url('/wp-content/uploads/your-logo.png');
background-size: contain;
width: 100%;
height: 80px;
}
.login #loginform {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}با این کار سایت‌تون حرفه‌ای‌تر به نظر می‌رسه و از نصب یک افزونه‌ی اضافی که فقط یک کار انجام می‌ده هم بی‌نیاز می‌شید.
جلوگیری از خراب شدن طرح‌بندی به‌دلیل تصاویر
اضافه کردن تصویری که عرضش بزرگ‌تر از ظرفش باشه، می‌تونه طرح‌بندی وردپرس رو به‌هم بزنه، به‌ویژه در قالب‌های کلاسیک یا محتوای صفحات و نوشته‌ها. اگر تصویر توسط CSS محدود نشده باشه، ممکنه از والدش بیرون بزنه و باعث اسکرول افقی یا چینش نامرتب بخش‌ها بشه.
این معمولاً وقتی اتفاق می‌افته که:
- ویرایشگر محتوا تصویری رو درج می‌کنه بدون اینکه ترازبندی یا اندازه‌ش رو تنظیم کنه
- قالب از تصاویر واکنش‌گرا به‌طور پیش‌فرض پشتیبانی نمی‌کنه
- دارید تصاویر رو داخل بلوک‌های سفارشی یا شورت‌کدهای قدیمی اضافه می‌کنید
برای رفع این مشکل باید حداکثر عرض تصویر رو تعیین کنید و رفتار چیدمان رو ریست کنید:
img {
max-width: 100%;
height: auto;
display: block;
}این کدها چه کاری انجام می‌دهند:
max-width: 100%: از سرریز شدن تصویر از عنصر والدش جلوگیری می‌کندheight: auto: نسبت تصویر اصلی را حفظ می‌کندdisplay: block: فاصله‌های ناخواسته زیر تصاویر که به‌خاطر حالت inline پیش‌فرض ایجاد می‌شوند را حذف می‌کند
می‌توانید همین الگو را برای محدود کردن ویدیوها هم استفاده کنید:
iframe {
max-width: 100%;
height: auto;
display: block;
}یا اگر پوسته‌تان از CSS مدرن پشتیبانی می‌کند، می‌توانید از یک wrapper با aspect-ratio استفاده کنید.
جمع بندی
ممکن است CSS به‌تنهایی تغییر بزرگی به‌نظر نرسد، اما در وردپرس چند خط دقیق و حساب‌شده می‌تواند ساعت‌ها از سردرگمی شما بکاهد. چه در حال شخصی‌سازی چیدمان‌ها باشید، چه مرتب‌سازی داشبورد مدیریت یا بهبود عملکرد فرانت‌اند، نکات این مقاله به شما کمک می‌کنند باهوش‌تر کار کنید، نه سخت‌تر.
دیدگاه و پرسش