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

اپن کارت باخود یک تم پیش فرض مناسب دارد که به عنوان مبنایی برای تم سفارشی تازه ما به کار خواهد رفت . به طور کلی ، دو سناریو وجود دارند که ممکن است بخواهید تم سفارشی خود را در آن ها بسازید :

۱- می خواهید رابط front-end پیش فرض را به طور کامل با یک رابط تازه به انتخاب خود جایگزین کنید ،

۲- می خواهید چند گزینه مانند ترکیب رنگ ، ساختار لایه بندی و تغییرات مربوط به برندسازی را تغییر دهید .

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

پس از نصب ،کارمان را شروع می کنیم .

نصب استخوان بندی

یک دایرکتوری به نام mycustomtheme در زیر catalog/view/theme نصب کنید . این دایرکتوری به عنوان ظرفی برای سایر فایل ها مانند تصاویر ، شیوه نامه ها و قالب ها عمل خواهد کرد . علاوه براین ، باید سه دایرکتوری دیگر هم در میان دایرکتوری mycustomtheme ایجاد کنید : image ، stylesheet و templates .

Basic Skeleton Structure

با انجام این کار ، ساختار استخوان بندی مقدماتی لازم برای تم سفارشی خود را نصب کرده اید . در واقع ، می توانید جلوتر رفته و تم سفارشی خود را از back-end فعال کنید که به خوبی کار خواهد کرد .

فعال سازی تم تازه

در اینجا تم سفارشی خود را از back-end فعال کنید . پس از ورود به back-end ، به مسیر

System > Settings بروید . در آنجا تمام مخزن های موجود در نصب اپن کارت تان فهرست بندی شده اند .

Default Stores Listing

 در اکثر موارد ، فقط یک ورودی مخزن را نمایش خواهد داد ، اما اگر چندین مخزن نصب کرده باشید ، بیش از یک ردیف مشاهده می کنید . اپن کارت به شما اجازه می دهد با استفاده از یک نصب چندین مخزن نصب کنید .

این مورد در زمانی که چندین مخزن دارید و نمی خواهید برای هر یک و هر مخزن اپن کارت را نصب کنید یک ویژگی بسیار مهم است . می توانید تصور کنید که تمامی مخزن ها از یک رابط مدیریتی منفرد استفاده می کنند ! نصب چندین مخزن از دامنه این مجموعه آموزشی خارج است ، اما ارزش بررسی آن را دارد .

حال به کار خود بازمی گردیم ، روی لینک Edit در ستون Action کلیک کنید که باید رابط پیکربندی مخزن را باز کند .

Store Edit Configuration Interface

روی زبانه Store کلیک کنید . فرم پیکربندی باز می شود که امکان انتخاب یک تم front-end را به ما می دهد . در اینجا می توانید ببینید که تم سفارشی ما یعنی mycustomtheme هم در امتداد تم default در کادر پایین افتادنی ،Template فهرست بندی شده است . آن را انتخاب کنید و روی دکمه Save کلیک کنید تا تغییرات اجرا شوند .

Store Edit Configuration Interface - Store Tab

حال اگر front-end را بررسی کنید ، می بینید که همه چیز به خوبی کار می کند . ما هنوز یک فایل منفرد را در تم سفارشی خود ایجاد نکرده ایم – چگونه کار می کند ؟ در اینجاست که باطل کردن قالب به میدان می آید .

آشنایی با جادوی باطل کردن قالب

حتی اگر ما تم تازه خود یعنی mycustomtheme را به عنوان یک تم فعال از مخزن نصب کرده باشیم ، front-end هنوز مانند قبل از فعال سازی تم جدیدما از back-end است . به این دلیل که سیستم باطل کردن قالب سر جای خود است .

حال نگاهی به یک مثال سریع می اندازیم ، تا بتوانیم این را بهتر درک کنیم : برای نمایش صفحه اصلی ، اپن کارت از قالب واقع در catalog/view/theme/*/template/common/home.tpl استفاده می کند . علامت ستاره در اینجا مسیر نام تم را ترسیم می کند . حال اپن کارت برای یافتن قالب home.tpl رویه زیر را اجرا می کند :

  • از آنجایی که ما mycustomtheme را به عنوان یک تم فعال نصب کرده ایم ، ابتدا می کوشد آن فایل را در catalog/view/theme/mycustomtheme/template/common/home.tpl . اگر بتواند آن را بیابد ، این فرآیند در همین جا متوقف می شود .
  • اگر نتواند tpl را در تم فعال بیابد ، به تم پیش فرض بازمی گردد و سعی می کند

catalog/view/theme/default/template/common/home.tpl را بکشد . بدیهی است که آن ضمانت کرده است که home.tpl در آن جا است ، مگر اینکه شما به فایل های قالب تم پیش فرض وابسته باشید .

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

این امر در جاهایی که فقط می خواهید چند فایل قالب منتخب را tweak کنید بسیار مفید است . در این مورد ، برای تکمیل کار کافی است آن فایل هارا به دایرکتوری تم سفارشی کپی کنید .

توسعه تم سفارشی خالی

تازمانی که تم سفارشی ما یعنی mycustomtheme مد نظرمان باشد ، درست مانند یک سبد خالی است . حال بیایید آن را با مقداری محتوای مفید پر کنیم .

یک دایرکتوری تازه به نام common در زیر دایرکتوری template تم سفارشی مان ایجاد کنید . حال فایل های قالب home.tpl و header.tpl را از دایرکتوری template/common تم default کپی کنید .این فایل ها را باید در دایرکتوری common تم ما که به تازگی ایجاد کرده ایم ، جایگذاری کنید .

به طور مشابه ، تمامی فایل های شیوه نامه را از دایرکتوری stylesheet تم default کپی کرده و در زیر دایرکتوری stylesheet تم مان جایگذاری کنید . این روند را برای تمامی تصاویر در زیر دایرکتوری image تکرار کنید ، هرچند فعلا این دایرکتوری را نادیده می گیریم .

در اینجا ، درخت دایرکتوری تم تازه تان چیزی مانند این خواهد بود :

Custom Theme Structure

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

نکته دیگری که باید به آن توجه کنید این است که باید ساختار فایل ها را شبیه به تم default حفظ کنید ، به ویژه  در مورد فایل های قالب . همان طور که تا کنون دیده اید ، هنگامی که فایل های home.tpl و header.tpl را کپی می کردیم ، یک دایرکتوری common ایجاد کردیم تا ساختار دارای تم پیش فرض را تقلید کنیم.

از این به بعد ، تمامی مسیرهای فایل مربوط به دایرکتوری تم سفارشی مان را ذکر می کنم . فایل template/common/header.tpl را در ویرایشگر متنی دلخواه خود باز کنید . کد موجود در این فایل مسئول نمایش قسمت هدر در کل سایت است . اگر به دقت به کد نگاه کنید ، چند مرجع شیوه نامه را می بینید که به تم “default” سخت کدنویسی شده اند .

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

کد زیر ر پیدا کنید :

و همان را با این کد جایگزین کنید :

در هر جا که نیاز است ، همین کار را برای سایر مرجع های شیوه نامه انجام دهید .

با این روش مطمئن می شویم که تمامی فایل های شیوه نامه از تم سفارشی مان بارگذاری می شوند . حال فایل template/common/home را باز کنید و تمامی محتویات آن را با کد زیر جایگزین کنید :

صفحه اصلی خود را بررسی کنید تا تغییرات انجام شده را ببینید .

این فقط نمونه ای از باطل کردن و سفارشی سازی قالب ها با استفاده از تم سفارشی است . البته در دنیای واقعی ، شاید لازم باشد قالب های فراوانی را تغییر دهید ، به طوری که با طرح سفارشی که می خواهید ادغام کنید . در بخش های بعدی این مجموعه ، چگونگی یافتن یک قالب مرتبط باصفحه ای خاص در front-end را خواهیم گفت .

خلاصه

سرانجام هدف از این مقاله این بود که به شما کمک کند نکات دقیق و ظریف ایجاد یک تم سفارشی را بشناسید . می توانید پیش تر رفته و کد سایر فایل های قالب را بررسی کنید تا با کارهای تم اپن کارت بیشتر آشنا شوید . در بخش بعدی چند قالب رایج را به تفصیل بررسی خواهیم کرد .

می توانید با نظرات خود ما را در تهیه مطالب بهتر راهنمایی کنید .

حسن موحد

عاشق طراحی وب سایت هستم و 8 سال هست در این زمینه فعالیت می کنم و تمرکزم بر روی خرسند نگه داشتن مشتری است .

ارسال نظر

نظرات مطلب