ماژول CSS Injector، تغییر CSS دروپال از بخش مدیریت

ماژول CSS Injector، تغییر CSS دروپال از بخش مدیریت

قالب و ظاهر سایت در دروپال مستقل از سایر بخش ها است. کارهایی که مربوط به کدهای قالب صفحات (HTML + PHP) و همین طور طراحی ظاهر آنها (CSS)  است را باید در theme سایت انجام دهیم. بنابراین محل اصلی برای قرار دادن کدهای CSS که نحوه نمایش سایت را مشخص می کنند، theme ای  استکه برای سایت پیاده می کنیم. دروپال در انتهای تولید محتوای صفحه، Theme انتخاب شده را لود کرده و CSS های آن را به صفحه اضافه می کند. بنابراین هر کد CSS ای که ما می خواهیم در نمایش صفحه نبه کار ببریم باید از طریق تغییر در فایل های CSS که در فولدر Theme سایت قرار دارند، اعمال بشود.

مشکلات تغییر CSS از طریق فایل های CSS تم

ممکن است که مدیر سایت یا فردی دیگر از جانب مشتری نیاز به تغییرات کوچکی در کد CSS داشته باشد و دسترسی دادن به فایل های سایت و یا به همه فایل های CSS درست نباشد. اگر چه می توان راه حل های دیگری برای این مسئله پیش بینی کرد ولی یک راه مناسب و آسان برای چنین افرادی افزودن کد های CSS از طریق مدیریت دروپال (back-end)  است.

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

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

ماژول CSS Injector

ماژول CSS Injector چنین امکانی را به دروپال اضافه می کند. یعنی با استفاده از آن، مدیر سایت می تواند کد های CSS ای را از طریق فرم های مدیریتی به سایت اضافه کند و هر کد را نیز تنظیم کند که در چه صفحاتی نمایش داده شود یا از چه شرایطی پیروی کند.

نصب ماژول در دروپال

نصب ماژول CSS Injector در دروپال مانند بسیاری از ماژول های دیگر به آسانی انجام می شود. فایل فشرده این ماژول را از سایت دروپال دانلود کرده و در دایرکتوری

sites/all/modules

آن را extract کنید. سپس در صفحه مدیریت ماژول های دروپال، این ماژول را از گروه Other یافته و فعال کنید.

نصب ماژول CSS Injector در دروپال

چک باکس کنار نام این ماژول را علامت شده و دکمه Save configuration در انتخاب صفحه را کلیک کنید.

افزودن قطعه کد CSS به دروپال

برای اینکه قطعه کد CSS خود را از طریق این ماژول به دروپال اضافه کنید، به صفحه پیکربندی (Configuration)  رفته و در گروه توسعه (Development) ، لینک CSS Injectpr را کلیک کنید تا به صفحه اصلی این ماژول وارد شوید.

صفحه مدیریت ماژول CSS Injector در دروپال

در ابتدا هیچ قطعه کدی اضافه نشده است. برای افزودن یک قطعه کد جدید روی لینک Create a new rule در جدول موجود در این صفحه که در شکل بالا نیز آن را می بینید، کلیک کنید.

سپس وارد فرم افزودن یک قطعه کد جدید می شوید که نمونه ای از آن را در شکل زیر مشاهده می کنید. در قسمت Title یک نام با معنی برای این قطعه کد بنویسید. در قسمت CSS Code، مشخصا باید کدهای CSS که مایل هستید اضافه کنید را بنویسید. این قسمت با دستورات CSS آشناست و تسهیلاتی را برای نوشتن کد در آن به شما ارائه داده است در صورتی که مایل باشید می توانید از طریق لینک Disable sysntax highlighter در بالای آن، این امکان را غیر فعال کنید. فعال بودن یا نبودن هایلات کننده کد، تاثیری در کدی که می نویسید و نحوه ذخیره آن ندارد.

افزودن قطعه کد CSS به دروپال با استفاده از ماژول CSS Injector

سایر تنظیمات موجود در ماژول CSS Injector برای یک قطعه کد CSS

در قسمت Themes to show on می توانید تصمیم بگیرید که این قطعه کد برای چه theme هایی استفاده شود. برای نمونه چون من میخواستم این کد فقط در تم دروپالیکا اعمال شود، نام این theme را انتخاب کرده ام. در قسمت Add the CSS on specific pages می توانید صفحاتی که این قطعه کد باید به آنها اضافه شود را تعیین کنید. این قسمت شبیه مدیریت بلاک ها در دروپال است که می توانید در آن مشخص کنید بلاک در کدام صفحات نمایش داده شود. در اینجا چون من میخواستم این قطعه کد در صفحات محتوای سایت فقط نمایش داده شود، کزینه add on only the listed pages را انتخاب کرده ام و در قسمت Pages صورت کلی آدرس صفحات محتوا یعنی node/* را نوشته ام.

در قسمت Media می توانید انتخاب کنید که CSS برای همه سایت باشد یا مثلا فقط برای صفحات پرینت یا فقط در نسخه های مختلف IE اعمال شود. اینها گزینه های معمولی هستند که در افزودن کد های CSS در قالب نیز استفاده می کنیم.

در نهایت دو چک باکس داریم که یکی Enable rule برای فعال بودن یا نبودن این قطعه کد است. در صورتی که آن را علامت نزنید قطعه کد با اینکه در سایت ذخیره می شود ولی در صفحات انتخابی نمایش داده نمی شود. گزینه Preprocess CSS نیز مشخص می کند که آیا این قطعه کد CSS با سایر کد های CSS سایت می توانید ادغام و یکپارچه شود. در این صورت اگر دوباره بخواهید قطعه کد را ویرایش کنید، باید پس از ذخیره یکبار Cache سایت را پاک کنید. علامت زدن این گزینه به بهبود عملکرد سایت می تواند کمک کند.

پس از ذخیره این قطعه کد، می توانید به صفحه مدیریت قطعات کد برگردید و نام قطعه کد خود را در جدول موجود در آن صفحه مشاهده کنید. برای تغییر یا حذف این قطعه می کنید از همین طریق اقدام کنید. در مقابل هر قطعه کد دو لینک Edit rule و Delete rule برای همین منظور تعبیه شده اند.

مدیریت قطعات کد CSS در دروپال

مجوز دسترسی به ماژول CSS Injector

این ماژول یک مجوز دسترسی (permission) برای محدود کردن دسترسی نقش های مختلف سایت به امکانات خود تعریف کرده است. با مراجعه به صفحه مدیریت مجوز های دروپال (admin/people/permissions)، در گروه CSS Inbjector، مجوز Administer CSS Injection را یافته و برای نقش های مورد نظر خود فعال کنید.

نظرات

سلام
مرسی بابت مقاله خوبتون
اگه میشد به این ماژول یه Editor اضافه کرد که هوشمند تر بشه عالی میشد .

تصویر admin
سهیل خان، از اینکه نظر مثبت خود را در باره این مقاله نوشته اید، تشکر می کنم.

ارسال نظر