افزودن CSS به یک URL خاص در وردپرس

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

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

چرا باید برخی کدهای CSS را فقط به یک صفحه خاص اعمال کنیم؟

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

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

قطعه کد افزودن CSS به یک URL خاص

/**
 * @snippet       Apply CSS if URL contains string - WordPress
 * @how-to        Get Webkima.com FREE
 * @author        Nabi Abdi
 * @compatible    WooCommerce 3.5.7
 */
 
add_action( 'init', 'webkima_apply_css_if_url_contains_string' );
  
function webkima_apply_css_if_url_contains_string() {
  
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
  
if ( false !== strpos( $url, 'string' ) ) {
    echo '<style type="text/css">
         .entry-title { color: red }
         </style>';
} 
  
}

نحوه استفاده از کد

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

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

جمع بندی

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

آموزش برنامه نویسی قالب وردپرس

2,59 میلیون تومان

در این دوره طراحی قالب‌ های حرفه‌ای و پیشرفته وردپرس را از صفرتاصد یاد خواهید گرفت، هدف ما از انتشار این دوره این است: یک قالب وردپرس خوب و حرفه‌ای طراحی کن و تا آخر عمر ازش پول دربیار…! شما با گذراندن این دوره می‌توانید هر نوع قالب وردپرس حرفه‌ای را طراحی کنید و آن را آماده فروش کرده و در مارکت‌ پلیس های فروش قالب و افزونه وردپرس برای فروش قرار دهید. طراحی که در دوره جامع آموزش UI و UX طراحی کردیم و در دوره جامع آموزش HTML و CSS تبدیل به قالب html کردیم را در این دوره همان قالب HTML را تبدیل به یک قالب حرفه‌ای وردپرس خواهیم کرد.

مشاهده دوره

• افزودن کلاس دلخواه به تصاویر وردپرس
• تنظیم ALT تصویر شاخص از روی عنوان مقاله
• ساخت child theme وردپرس
• نمایش مطالب تصادفی بدون افزونه
• نمایش مطالب مرتبط بدون افزونه
• غیرفعال کردن فید RSS بدون افزونه
• لینک سازی خودکار داخلی بدون افزونه
• نمایش تعداد بازدید مقالات بدون افزونه