آموزش قالب وودمارت: صفر تا ۱۰۰ کاملاً رایگان
- زمان مطالعه: 25 دقیقه
- به‌روز رسانی در 27 آبان 1403
وودمارت یک قالب فروشگاهی با تنظیمات بسیار زیادی است. به همین دلیل، یادگیری نحوه کار با این قالب قدرتمند و تنظیمات مختلف آن، برای یک شروع موفق در طراحی فروشگاه آنلاین ضروری است. در این مقاله، شما با راهنمای جامع آموزش وودمارت همراه خواهید بود و گام‌به‌گام با محیط تنظیمات و امکانات این قالب فوق‌العاده آشنا می‌شوید. با تم فور همراه باشید و اولین قدم‌ها را به سوی ساخت فروشگاهی حرفه‌ای بردارید.
سر فصل‌های این مقاله:
در آموزش قالب woodmart گام به گام با تنظیم‌های آن آشنا می‌شوید و عملکرد هرکدام از این تنظیم‌ها را با مثال تصویری نشان می‌دهیم. ابتدا از روش نصب قالب شروع می‌کنیم و ببینیم در محیط‌های مختلف چگونه باید وودمارت را نصب کنیم.
نصب قالب وودمارت در سی پنل
در اینجا با آموزش نصب قالب وودمارت با شما هستیم. بعد از خرید قالب وودمارت فایل zip را دانلود کنید و به محیط CPanel بروید و سپس به فایل منیجر مراجعه کنید. شما باید قبل از این کار، وردپرس را نصب کرده باشید. اگر هنوز وردپرس را نصب نکردید، پیشنهاد می‌کنیم مقاله آموزش نصب وردپرس را مطالعه کنید.
به پوشه wp-content/themes وردپرس‌تان از طریق فایل منیجر بروید. و فایل zip قالب و چایلد تم را در این پوشه آپلود کنید.
اگر نیاز به تغییرات در کدنویسی قالب دارید و شخصی‌سازی‌هایی می‌خواهید روی وودمارت انجام دهید، بهتر است چایلد تم هم آپلود کنید و از آن استفاده نمایید.
پس از آپلود برگردید به پوشه themes و هر دو فایل zip را به نوبت Extract کنید. اگر اکسترکت کنید و قالب به خوبی فعال شد، هر دو فایل زیپ از این پوشه حذف کنید.
بعد از آپلود و اکسترکت، به پیشخوان وردپرس‌تون برگردید و در منوی نمایش، روی فعالسازی چایلد تم وودمارت کلیک کنید. البته اگر نمی‌خواهید تغییراتی رو قالب بدهید (از نظر کدنویسی)، همان قالب اصلی (woodmart) را کافیست فعال کنید.
بعد از فعالسازی پلاگین‌های ضروری قالب مانند woodmart core هم باید نصب و فعال کنید.
نصب قالب وودمارت در دایرکت ادمین به چه شکل است؟
نصب قالب وودمارت در دایرکت ادمین دقیقاً همانند مرحله قبلی یعنی « نصب قالب وودمارت در سی پنل » است. تنها ظاهر مراحل آپلود و اکسترکت کردن فایل‌های zip قالب متفاوت است.
آشنایی با محیط تنظیمات قالب وودمارت
بعد از نصب قالب وودمارت و فعالسازی آن، در محیط پیشخوان وردپرس منوهایی اضافه می‌شوند. منوی وودمارت و منوی تنظیمات وودمارت، دو منوی اصلی قالب هستند.
هر کدام از این منوها، شامل آپشن‌های و تنظیم‌های مختص به خودشان هستند. گزینه‌های موجود در منوی وودمارت، بیشتر مربوط به پیکربندی قالب و هدر و موارد دیگر است.
مثلا در منوی وودمارت، پیشخوان خوش آمدگویی قالب و اطلاعاتی مانند مستندات و آموزشهای ویدیویی (انگلیسی) را می‌توانید ببینید.
نصب دموی قالب وودمارت
برای نصب دموهای قالب وودمارت، کافیه در زیر منوی دموهای قالب، دموی مدنظرتان را انتخاب و روی درون‌ریزی کلیک کنید. البته این دموها انگلیسی هستند.
اما پس از درون‌ریزی، می‌توانید متن‌های انگلیسی را تغییر و یک سایت فروشگاهی یا چند منظوره مختص به خودتان را از دل آن بیرون بیاورید.
آموزش قالب وودمارت: تنظیمات هدر قالب
در این قسمت از آموزش قالب وودمارت، به محیط اصلی تنظیمات آن رسیدیم. در این محیط، تنظیم‌های زیادی وجود دارد و هرکدام را می‌توانید براساس نیازتان فعال یا غیرفعال یا به شخصی سازی آن‌ها بپردازید.
اولین تنظیم، مربوط به تنظیمات هدر قالب وودمارت است. اینجا شما می‌توانید هدری که برای قالب وودمارت می‌سازید را انتخاب کنید تا در کل سایت بعنوان هدر اصلی ظاهر شود.
برای ساخت هدر، به زیر منوی هدر ساز وودمارت بروید و هدر خودتان را اضافه و طراحی کنید. یا اینکه یکی از هدرهای پیش‌فرض دموی قالب را شخصی سازی کنید.
در ادامه تنظیمات هدر وودمارت، گزینه سایدبار را می‌بییند. این سایدبار یا نوار کناری است که صفحات و نوشته‌ها قابل تنظیم است. مثلاً اگر می‌خواهید سایدبار در نوشته‌ها و صفحات دیگر در سمت چپ صفحه باشد، طبق این سه گزینه می‌توانید محل یا موقعیت سایدبار را تنظیم کنید.
امکانات دیگری مانند: اندازه سایدبار یا خاموش کردن سایدبار (بوم خاموش) در حالت موبایل هم در دسترس است.
گزینه‌های بنر هدر وودمارت
وودمارت قابلیتی به نام بنر هدر دارد. این قابلیت جذاب و حرفه‌ای به شما کمک می‌کند که نوار اطلاعیه‌ها را در فروشگاه‌تان داشته باشید. بدون نیاز به نصب افزونه جانبی یا حتی صفحه ساز، می‌توانید یک نوار متنی یا تصویر را بالای هدر سایت‌تان نمایش دهید.
زمانی که گزینه بنر هدر را فعال کنید، کافی است محتوای بنر را وارد کنید و سپس تنظیمات را ذخیره نمایید. بعد از این کار، سایت‌تان را رفرش کنید تا نوار بنر را بالای هدر سایت مشاهده کنید.
در ادامه بنر هدر وودمارت، تنظیم‌های مربوط به استایل مانند: رنگ بندی، رنگ متن بنر و دکمه بستن قرار گرفته است. همچنین به جای رنگ پس زمینه، شما می‌توانید از تصویر هم استفاده کنید.
تنظیم‌های پاپ آپ تبلیغی
پاپ آپ تبلیغاتی یکی دیگر از قابلیت‌های وودمارت است. بدون آنکه نیاز به نصب افزونه جانبی برای نمایش پاپ آپ داشته باشید، می‌توانید یک پاپ آپ متنی یا گرافیکی را در سایت به بازدیدکنندگان نمایش دهید.
حالت بلوک HTML گزینه جذابی است. چراکه در این حالت، می‌توانید یک صفحه را با صفحه سازی مانند افزونه المنتور و افزونه المنتور پرو بسازید و بعنوان یک پاپ آپ نمایش دهید.
اگر می‌خواهید از بلوک HTML استفاده کنید، کافیست به منوی بلوک HTML بروید و با افزودن یک صفحه جدید، با استفاده از صفحه سازی مانند المنتور یا ویژوال کامپوزر، محتوای پاپ آپ خود را بسازید.
پس از ساختن، به تنظیمات وودمارت برگردید و در بخش پاپ آپ تبلیغی، بلوکی که ساختید را انتخاب کنید.
پاپ آپ تایید سن کاربر
این ویژگی، قاعدتاً برای هر نوع وب‌سایتی کاربرد ندارد. در برخی سایت‌های خاص ممکن است نیاز باشد سن کاربر را بدانید و یک پاپ آپ برای تایید سن او قرار دهید.
اگر نیاز به چنین ویژگی دارید، از اینجا می‌توانید این آپشن را فعال کنید و متن محتوای آن را به دلخواه خود شخصی سازی کنید.
ناوبری منوی موبایل وودمارت
ناوبری پایین موبایل یا منوی موبایل وودمارت به شما کمک می‌کند بتواند یک منوی مدرن و جذاب را به سایت خود در حالت موبایل اضافه کنید. به صورت پیش‌فرض این آپشن فعال است.
در قسمت انتخاب دکمه‌ها، مواردی که بعنوان منوی ناوبری موبایل وودمارت تنظیم شده‌اند را می‌ببینید. اما ظاهر این منوی موبایل وودمارت به چه شکل است؟ تصویر زیر را ببینید.
دقیقاً منوی موبایل وودمارت بدین شکل نمایش داده می‌شود. اکنون می‌توانید منو را شخصی سازی کنید.
قالب به شما اجازه می‌دهد تعداد ۵ دکمه موردنظرتان را با متن و لینک و آیکون دلخواه به منوی موبایل وودمارت اضافه کنید. پس از واردن اطلاعات برای هر کدام از دکمه‌ها (البته در صورت نیاز) از طریق انتخاب دکمه‌ها، کافیست دکمه‌تان را انتخاب و ذخیره تنظیمات را بزنید.
در این حالت، دکمه یا دکمه‌هایی که می‌خواهید به منوی موبایل اضافه می‌شود. هر زمان بخواهید از همین جا می‌توانید آن‌ها را مجدد مدیریت کنید.
تنظیمات جستجوی وودمارت
تنظیم‌هایی برای جستجوی وودمارت در پنل تنظیمات برای مدیر فروشگاه در نظر گرفته است. از اینجا می‌توانید کنترل کاملی روی نوار جستجوی قالب داشته باشید.
مثلاً می‌توانید امکان جستجوی مطالب و نوشته‌های سایت را به نوار جستجو هم اضافه کنید. یا اینکه فقط نوار جستجو برای جستجو کردن محصولات فروشگاه باشد.
منظور از نوار جستجو، همانطور نوار یا باکس سرچی است که در هدر فروشگاه نمایش داده می‌شود.
در ادامه آموزش قالب woodmart از همین بخش کنترل جستجوی فروشگاه، می‌توان تنظیم‌هایی را فعال یا غیرفعال کرد. می‌توان حالت ایجکس (جستجو بدون رفرش صفحه) را فعال نمود. سایر تنظیم‌های مربوط به جستجو هم از همین بخش قابل تنظیم هستند.
تنظیم‌های مربوط به ناوبری چسبان
تنظیمات ناوبری چسبان وودمارت، از ویژگی‌های جالب این قالب است. شما می‌توانید یک نوار چسبان یا همان Sticky را به گوشه‌ای از سایت اضافه کنید. محتوای این نوار می‌تواند یک منو به همراه عنوان و متن باشد.
برای برخی از فروشگا‌هایی که محصولات زیادی دارند، چنین نواری برای دسترسی سریع کاربر به محصولات یا دسته بندی‌ها، مفید است.
اگر به این نوار نیاز دارید، از همین بخش می‌توانید آن را فعال کنید و تنظیمات مورد نظرتان روی آن اعمال نمایید.
آموزش وودمارت: تنظیمات عنوان صفحه
از طریق تنظیمات قالب می‌توانید موقعیت و چینش عنوان صفحات را در آرشیوها، دسته بندی‌ها و صفحات تنظیم کنید. به عنوان مثال، عنوان صفحه در مرکز یا سمت راست نمایش داده شود یا کلاً عنوانی نمایش داده نشود.
این قابلیت، موقعیت عناوین صفحه فروشگاه و آرشیوهای فروشگاهی را هم کنترل می‌کند.
جالبه بدانید؛ در این قسمت از آموزش قالب وودمارت، توسعه دهندگان قالب ما را شگفت زده می‌کنند. چراکه امکاناتی برای سئو و تعیین تگ عناوین و حتی سازگاری با افزونه‌های سئو را برای عنوان صفحه، تعبیه کرده‌اند.
برای نمونه، می‌توانیم تگ عنوان را روی H1-H2 و غیره تنظیم کنید. یا اینکه با فعالسازی گزینه‌های مربوط به افزونه سئو، سازگاری و یکپارچه‌گی این عنوان را با این افزونه‌ها فراهم کرد.
منظور از موقعیت‌های کنونی، همان breadcrumb یا راهنمای مسیر است. وودمارت اجازه می‌دهد که breadcrumb افزونه یواست با راهنمای مسیر قالب جایگزین شود.
تنظیمات فوتر قالب وودمارت
همانطور که از نام این قسمت پیداست، اینجا می‌توان فوتر سایت را کنترل کرد. اگر از فوتر وودمارت بخواهید استفاده کنید، می‌توانید تعداد ستون‌ها، رنگ بندی و استایل آن را اینجا مدیریت کنید.
همچنین یکی از قابلیت‌های مهم قالب، یعنی دکمه اسکرول به بالا، در همین قسمت تنظیمات فوتر قرار گرفته است.
دکمه اسکرول به بالا، زمانی ظاهر می‌شود که کاربر در صفحه، کمی اسکرول می‌کند و دکمه‌ای در سمت چپ صفحه ظاهر می‌شود.
با این دکمه، کاربر می‌تواند سریع به بالای صفحه برگردد. امکان بسیار مفید و کاربردی است. خصوصاً در صفحات طولانی و با حجم بالا، این امکان کاربردی‌تر می‌شود.
نکته مهمی در بخش از آموزش قالب وودمارت باید یادآوری شویم. اگر از صفحه ساز المنتور یا ویژوال کامپوزر برای طراحی اختصاصی فوتر استفاده کنید، این تنظیمات نادیده گرفته خواهند شد.
تغییر متن کپی رایت فوتر
برای تغییر متن کپی قالب، از همین قسمت گزینه‌های فوتر، می‌شود متن را حذف کرد یا آن را به دلخواه شخصی سازی کرد.
همان متنی که در زیر فوتر، نمایش داده می‌شود متن کپی رایت است. امکان تنظیم طرح و یا غیرفعال کردن کامل آن نیز وجود دارد. برای غیرفعال کردن، کافیه گزینه فعال بودن کپی رایت را روی غیرفعال بگذارید و تنظیمات را ذخیره کنید.
تنظیم‌های پیش فوتر در تنظیمات
با استفاده از تنظیم‌های پیش فوتر، شما می‌توانید یک متن یا یک بلوک HTML را قبل از بلوک کپی رایت قرار دهید. یا حتی قبل از فوتر اصلی هم می‌شود یک بلوک اختصاصی قرار داد.
برای نمونه، پیش فوتر در این قسمت از آموزش قالب وودمارت، تصویر زیر است.
در دمو یا سایت شما ممکن است این پیش فوتر طراحی نشده باشد. این قسمت، تنها برای یادگیری و آشنایی با آن، در اینجای آموزش قالب وودمارت قرار دادیم.
تنظیمات فونت قالب وودمارت
یکی از قسمت‌های جذاب آموزش وودمارت، همین بخش فونت یا تایپوگرافی وودمارت است. انتخاب یک فونت مناسب و زیبا برای سایت، نقش مهمی در ظاهر و گرافیک سایت دارد.
در وودمارت تم فور، فونت‌های فارسی ترند و محبوب مختص وب سایت و طراحی سایت به این محیط اضافه شده است. تنها با یک کلیک می‌توانید فونت مورد نظرتان را انتخاب و روی قالب اعمال کنید.
همچنین اگر، فونت خاصی مدنظرتان است اما در این لیست وجود ندارد، می‌توانید از زیر منوی فونت‌های دلخواه، فایل woff یا woff2 را در فیلدهای مشخص شده آپلود کنید. بهترین و بهینه ترین فرمت فونت، فرمت woff2 است.
آموزش وودمارت: تنظیمات استایل و رنگ‌ها
در این بخش از آموزش وودمارت، می‌خواهیم با اسایل‌ها و رنگ بندی قالب آشنا شویم. ببینیم عملکرد گزینه‌ها و آپشن‌های این بخش به چه شکل است. در تب استایل‌ها، آپشن گرد کردن و قالب تیره در دسترس است.
اینجا ما می‌توانیم میزان گردی کادرها و ستون‌ها را مشخص کنیم. مثلاً اگر میزان گردی را روی 12px قرار بدیم، خروجی تصویر زیر می‌شود.
می‌ببینید که گوشه‌های بلوک‌ها، کادرها و ستون‌ها گرد می‌شود. به همین سادگی بدون نیاز به کدنویسی با این تنظیم قالب، می‌توانیم استایل و ظاهر سایت را کنترل کنیم. آپشن قالب تیره ظاهر سایت را به صورت تیره (dark) و به مانند حالت شب نمایش می‌دهد.
در تب رنگ‌ها، شما می‌توانید رنگ اصلی و ثانویه (دوم) و رنگ لینک‌ها را مدیریت کنید. براساس رنگ کسب و کارتان، در اینجا رنگ بندی سایت را شخصی سازی کنید.
در تب پس زمینه صفحات، امکان تغییر رنگ پس زمینه برای صفحات (برگه‌ها)، برای پس زمینه آرشیو محصول، برای پس زمینه صفحه محصول و سایر صفحات در دسترس است. همچنین می‌توانید از تصویر هم به جای رنگ استفاده کنید.
در تب دکمه‌ها هم می‌توانیم استایل و ظاهر دکمه‌ها را سفارشی و کنترل کنیم. قالب به صورت پیش‌فرض چندین استایل برای دکمه‌ها دارد. برای مثال، در اینجای آموزش وودمارت، استایل دکمه را روی گرد قرار می‌دهیم تا خروجی آن را ببینیم.
در تصویر بالا، می‌بینید که استایل دکمه‌ها به شکل گرد نمایش داده می‌شود. براساس سلیقه خودتان، استایل دکمه‌های فروشگاه‌تان را انتخاب کنید.
در ادامه، امکان تغییر فونت یا تایپوگرافی برای دکمه‌ها هم در دسترس است. جهت حفظ سرعت سایت، بهتر است از تنظیم فونت برای هر قسمت یا المان سایت خودداری کنید.
اما آپشن جذاب و مهم این بخش، مربوط به استایل‌های دکمه پیشرفته وودمارت است. به عنوان مثال ما می‌توانیم رنگ دکمه افزودن به سبد خرید صفحه محصول را سفارشی کنیم و متمایز از رنگ سایر دکمه‌های سایت باشد.
به نمونه‌ای که در این قسمت از آموزش قالب وودمارت جهت مثال انجام دادیم دقت کنید. به همین سادگی چنین امکان در woodmart برای مدیر فروشگاه در دسترس است.
در قسمت استایل فرم، ما می‌توانیم استایل ظاهری فرم‌ها را هم به دلخواه خود تغییر دهیم. دقیقاً مشابه اسایل بلوک‌ها و کادرها، امکان گرد کردن یا فلت کردن فرم‌ها نیز وجود دارد.
به مانند تصویر بالا که مربوط به فرم ارسال نظر است، با تنظیم استایل فرم روی حالت گرد، فرم هم گرد شد. البته این گزینه روی فیلدها هم تاثیر می‌گذارد.
وودمارت در کنار امکانات و آپشن‌های فوق العاده‌ای که دارد از انعطاف پذیری بالایی نیز برخوردار است و تا این بخش از آموزش وودمارت، بدون شک متوجه این موضوع شد‌ه‌اید.
همچنین می‌توان از نظر رنگ بندی هم، رنگ نکته‌ها مانند هشدارها، خطا را از تب نکته‌ها سفارشی کرد.
در آخرین بخش استایل‌ها و رنگ‌ها، تنظیم‌هایی برای کروسل‌ها وجود دارد. منظور از کروسل همان اسلایدر یا بلوک‌های چرخشی است.
می‌شود آیکون یا رنگ بندی کروسل‌های قالب را تنظیم و سفارشی کرد. در این نمونه می‌بینید تغییر آیکون، ارتفاع، عرض و رنگ‌ها و سایر موارد امکان پذیر است.
این هم از معرفی بخش استایل در آموزش قالب وودمارت و در ادامه با سایر قسمت‌های محیط تنظیمات بزرگ این قالب آشنا خواهید شد.
جمع بندی آموزش رایگان قالب وودمارت
در آموزش قالب وودمارت، گام به گام و تصویری، بخش‌های مهم و اساسی این قالب را آموزش دادیم. با جزئیات کامل، با همه بخش‌های این قالب آشنا می‌شوید. نظر شما در مورد آموزش وودمارت چیست؟ آیا برایتان مفید بود؟ خوشحال می‌شویم از طریق فرم نظرات، نظرتان را با سایر هموطنان به اشتراک بگذارید. با آرزوی سلامتی و موفقیت روزافزون کسب و کار شما.
تیم تولید محتوای تم فور
همۀ تلاش مجموعه‌ی تم فور اینه که بهترین آموزش‌ها برای وردپرس رو به صورت کاملاً رایگان برای جامعه‌ی وردپرس ایران تولید بکنه. امیدواریم آموزشهای ما براتون مفید واقع بشه :)
این مقاله را با دوستان خود به اشتراک بگذارید
ثبت دیدگاه
