در حال بارگزاری ...

آموزش مقدماتی طراحی تم ناپ کامرس – بخش 1

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

این راهنما برای مبتدیان است. فرض بر این است که شما دانش ابتدایی با ناپ کامرس را دارید و با HTML و CSS آشنایی دارید.

تم مجموعه ای از تنظیمات خصوصیاتی است که به شما اجازه تعریف ظاهر صفحات و کنترل ها، و سپس ظاهر در کل صفحات در یک وب سایت را می دهد.تم ها از مجموعه ای از عناصر ساخته شده اند:پوسته، style sheets(CSS)، تصاویر و سایر منابع. حداقل، یک تم شامل پوسته است. تم ها در پوشه خاص در وب سایت شما قرار می گیرند.

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

تم در ناپ کامرس چیست ؟

تم ناپ کامرس مجموعه ای از فایلهایی است که به راحتی می توانید طراحی وب سایت خود از جمله طرح بندی هایش را تغییر دهید. تم برای داشتن یک طرح و ظاهر یکسان در تمام صفحات سایت استفاده می شود. تم ناپ کامرس از تعدادی فایل ، style sheet برای ظاهر صفحه و عکس ها تشکیل شده است . تم ناپ کامرس تنها شامل تغییرات ظاهری بخش کاربر (فروشگاه عموی) ، آنچه که یک بازدید کننده آنلاین هنگام مرور فروشگاه می بیند می باشد.

تم ها در سایت ناپ کامرس چه چیزهایی می توانند انجام دهند ؟

  • تم ها می توانند محتوا و داده های ذخیره شده توسط ناپ کامرس را با سبک تعریف شده نمایش دهند.
  • تم می تواند طرح بندی سایت ناپ کامرس شما را تغییر دهد: استاتیک یا ریسپانسیو و طرح بندی یک یا چند ستونه
  • تم می تواند تجربه یکسانی را به کاربر در چندین دستگاه با سیستم عامل های متفاوت در سایت فروشگاه ناپ کامرس ارائه بدهد.
  • تم می تواند عناصر سایت را از طریق CSS سفارشی سازی کند.

ساختار پوشه تم در ناپ کامرس (موارد مورد نیاز)

به منظور کار با ناپ کامرس، درک ساختار فایل ها و پوشه ها مهم است.

محل تم ها در ناپ کامرس: تمام تم ها در پوشه /Themes/ قرار دارند.

Theme Folder

  • پوشه Content : این پوشه شامل همه CSS ها و تصاویر است.
  • پوشه Views : این پوشه شامل همه View های (صفحات وب که شامل تگ های HTML و کد های سمت سرور است) MVC است.
  • فایل عکس preview.jpg : تصویر بند انگشتی تم که به عنوان پیش نمایش استفاده می شود.
  • فایل theme.config : این فایل شامل اطلاعات تم مانند نام تم و شرح آن است

اینجا یک مثال از فایل "theme.config" است:

<?xml version="1.0" encoding="utf-8" ?>

<Theme title="Default clean"

supportRTL="true"

previewImageUrl="~/Themes/DefaultClean/preview.jpg"

previewText="The 'DefaultClean' site theme.">

</Theme>

تفاوت بین تم ناپ کامرس و پلاگین ناپ کامرس

تم ناپ کامرس کل ظاهر سایت فروشگاه را کنترل می کند (مانند فروشگاه عمومی) در حالی که پلاگین ناپ کامرس برای گسترش قابلیت های وب سایت ناپ کامرس است.

روش نصب تم و اعمال آن در ناپ کامرس

فرض می کنیم که شما هم اکنون یک تم جدید بصورت فایل zip دانلود کرده اید.

فایل Zip را ار حالت فشرده خارج کنید و محتوای آن را به پوشه Themes مانند شکل زیر کپی کنید:

نصب تم

برای اعمال تم جدید ، بروید به : بخش مدیرت --> تنظیمات --> تنظیمات عمومی و متفرقه

نکته: همچنین می توانید به آدرس URL زیر برای دسترسی به بخش مدیریت بروید:

منوی مدیریت ناپ کامرس

حالا، به فروشگاه عمومی بروید. شما باید بتوانید تم جدید را در سایت تان ببینید.

تغییر تم ناپ کامرس

تم راست به چپ

ناپ کامرس نسخه راست به چپ تم فروشگاه عمومی را پشتیبانی می کند. تم پیش فرض ناپ کامرس "DefaultClean" با ویژگی راست به چپ ارائه شده است. اگر شما در حال ایجاد تم خود می باشید می توانید ویژگی های تم را در فایل styles.rtl.css بازنویسی و ذخیره کنید.

برای فعال کردن "راست به چپ" تم بروید به:

مدیریت --> پیکربندی --> زبان ها

منوی زبان ناپ کامرس

روی "ویرایش" زبان کلیک کنید:

ویرایش زبان فارسی ناپ کامرس

حال ، مطمئن شوید که گزینه "راست به چپ" فعال باشد.

ویرایش زبان ناپ کامرس

نکته: تم فعال باید RTL را پشتیبانی کند و این فقط بر روی فروشگاه عمومی تاثیر می گذارد.

ایجاد تم شخصی ( با استفاده از تم پیش فرض)

در ویژوال استادیو وب سایت (نسخه وب) را باز کنید. به اینجا بروید:

اگر سورس کد را دارید : \Nop.Web\Themes\

اگر از نسخه تحت وب استفاده کی کنید: \[Project Root]\Themes\

  • تم پیش فرض یا کنونی را انتخاب کنید

تم پیش فرض ناپ کامرس

  • روی تم راست کلیک کنید --> گزینه COPY را انتخاب کنید

کپی تم

  • پوشه "Theme" را انتخاب کنید --> راست کلیک --> PASTE

Paste Theme

  • شما چیزی شبیه به "DefaultClean - Copy" را خواهید دید.

  • آنرا تغییر نام دهید – هر چیزی که دوست دارید نام تم جدید شما باشد. برای مثال: NewTheme

  • حال در پوشه تم جدید "NewTheme"  --> فایل "theme.config" را باز کنید

  • نام تم کنونی را به نام تم جدید "NewTheme" تغییر دهید

  • داخل پوشه تم جدید "NewTheme"  --> پوشه Content  --> پوشه Images --> تصاویر جدید خود را در پوشه "images” اضافه کنید و بر اساس نیاز خود فایل styles.rtl.css را سفارشی سازی و بروزرسانی کنید

تم جدید ناپ کامرس

نظر خود را وارد نمایید.
بیشتر
بیشتر
0 سبد
جستجو
دسته ها
تماس
دسته بندی ها