به جلسه بیست و چهارم بخش دوره رایگان المنتور از آموزش جامع وردپرس رایگان خوش آمدید. در این قسمت قرار است با قابلیت ویجت لوپ گرید و کاروسل حلقه در المنتور آشنا شویم. با استفاده از ویجت‌های المنتور می‌توانید لیستی از برگه‌ها، نوشته‌ها، دسته‌بندی‌ها و اگر سایت فروشگاهی باشد محصولات خود را نیز نشان بدهید.
اما گاهی لازم است که ویجت اختصاصی خود را طراحی کنیم. همچنین ممکن است پروژه طرح UI داشته باشد و بخواهید دقیقاً همان ظاهر را پیاده‌سازی کنید. لوپ گرید و کاروسل حلقه در المنتور به شما کمک می‌کند که لیستی از آیتم‌های مذکور را دقیقاً مطابق با طرح و ظاهر مدنظر خود پیاده‌سازی کنید. برای یادگیری بیشتر در این مقاله از آژانس نوآوری رسام با ما همراه باشید.
ساخت آیتم حلقه در المنتور با استفاده از قالب‌ها
در قدم اول شما باید آیتم حلقه در المنتور بسازید. این بخش در قالب‌های المنتور قرار دارد. همان‌جایی که قالب هدر و فوتر را ساختید. در واقع ابتدا باید یک لوپ آیتم بسازید که بتوانید با آن لوپ گرید یا لوپ کاروسل مدنظر خود را در هر صفحه و به هر تعدادی که خواستید، ایجاد کنید. در پیشخوان وردپرس و در بخش قالب‌ها، روی قالب‌های ذخیره شده کلیک کنید و سپس روی “افزودن قالب جدید” کلیک کرده تا با صفحه زیر مواجه شوید.
تنظیمات آیتم حلقه در المنتور
نوع قالب را روی گزینه لوپ یا حلقه بگذارید (شاید ترجمه کامل نباشد و گزینه مدنظر در این حالت loop است). وقتی که این گزینه را انتخاب کنید، قبل از اینکه بخواهید برای قالب خود نام انتخاب کنید، یک گزینه دیگر نیز اضافه می‌شود که اگر منوی کشویی آن را باز کنید یک گزینه بیشتر ندارد که آن هم “پست” است. البته اگر فروشگاه (ووکامرس) نصب باشد، گزینه محصول یا product هم به آن اضافه می‌شود. این موضوع برای این است که باید انتخاب کنید که لوپ شما روی پست‌ها اعمال شود یا محصولات. بدیهی است که فعلاً فروشگاه وجود ندارد پس همان “پست” را انتخاب کنید و نام مدنظر خود را نیز برای قالب خود انتخاب کرده و ایجاد قالب را بزنید.
بازهم مثل قبل، برگه‌ساز المنتور باز شده و به همه ویجت‌ها دسترسی دارید. اما این‌بار باید با استفاده از محتوای داینامیک، مواردی همچون” عنوان، تصویر شاخص، اطلاعات پست یا همان ویجت post info و اگر مایل بودید دکمه ادامه مطلب را درج کنید. دقت کنید که اینجا اگر محتوای ثابت درج کنیم، لینک برای همه نوشته‌ها یکسان می‌شود و ما این را نمی‌خواهیم. ما قصد داریم این ساختار کلی، روی نوشته‌های دیگر (دست‌کم برخی از آنها) اعمال شود.
این نکته را نیز در نظر بگیرید که وقتی این لوپ را بسازید، هنگام طراحی سایت در هر صفحه از المنتور می‌توانید گزینه‌های لوپ گرید (برای نمایش لیستی و شبکه‌ای محتوا) و لوپ کروسل (برای نمایش گردونه‌ای و اسلایدشونده محتوا) را درج کنید. مثلاً بیایید آخرین نوشته‌ها را در صفحه اصلی خود نشان دهیم. پس صفحه اصلی خود را ویرایش کرده و ویحت لوپ گرید را به صفحه اضافه کنید.
درج آیتم حلقه در صفحات مختلف سایت
با درج ویجت المنتوری لوپ گرید در صفحه اصلی سایت، از تنظیمات بالای ویجت گزینه انتخاب نوع قالب یا اگر انگلیسی باشد Choose template type می‌توانید انتخاب کنید که از نوشته‌ها، محصولات یا دسته‌بندی‌ها لیست بسازید. ما قصد داریم از نوشته‌ها بسازیم. پس گزینه نوشته‌ها را انتخاب می‌کنیم. در بخش بعدی باید لوپ آیتمی که ساختید را انتخاب کنید. اسم آن را که سرچ کنید، لیست آیتم‌های شما از نوشته‌ها، دقیقاً مشابه تصویر بالا، داخل صفحه دیده خواهد شد.
حالا با سایر گزینه‌های ویجت می‌توانید مشخص کنید که گرید شما در چند سطر و ستون باشد، از چه دسته، برچسب، نویسنده و… محتوا را نشان دهد (در واقع همان include برای نمایش محتواهایی یا دسته‌بندی‌هایی) که می‌خواهید نشان دهید و exclude یا مواردی که در واقع می‌خواهید نشان داده نشوند. این موارد همگی در تب query یا اگر فارسی باشد “پرس‌وجو” وجود دارد. همچنین در قسمت صفحه‌بندی نیز می‌توانید Pagination بگذارید. در تب استایل نیز می‌توانید مانند سایر ویجت‌های المنتور استایل بدهید.
در نظر بگیرید که همه این موارد را نیز می‌توانید برای ویجت کاروسل حلقه در المنتور نیز داشته باشید. با این تفاوت که لوپ کروسل یک تنظیم هم برای نمایش Bullet و Arrow برای اسلایدری شدن محتوا دارد که آنها را نیز می‌توانید تنظیم کنید و استایل دهید. این را نیز در نظر بگیرید که نمایش لوپ صرفاً مختص صفحه اصلی نیست. هرجا بخواهید می‌توانید از آنها استفاده کنید. در قالب‌های آرشیو نیز بسیار از آنها استفاده خواهیم کرد.
لوپ گرید و کاروسل حلقه در المنتور، طلایی‌ترین ویجت‌ها
دلیل اینکه لوپ گرید و کاروسل حلقه در المنتور را خیلی دوست داریم این است که تا قبل از وجود این ویجت‌ها، شما باید از پلاگین‌های دیگر و افزونه‌هایی مانند جت‌انجین استفاده می‌کردید. البته جت‌انجین قابلیت‌های بسیاری دیگری هم دارد. اما دست‌کم برخی موارد جزئی‌تر دیگر نیازی به نصب این افزونه ندارید و با خود المنتور هم می‌توانید بسازید. در این جلسه از آموزش جامع طراحی سایت وردپرس حتماً با لوپ گرید و لوپ کروسل کار کنید. همچنین نظرات و تجربیات خود را با متخصصین آژانس نوآوری رسام در میان بگذارید.
19 پاسخ
سلام و احترام
چه قدر آموزش هاتون خوب و مفیده! دستمریزاد! اگه امکانش هست آموزش جت انجین رو هم بذارید.
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. خوشحالم که مفید بوده است. قطعا در گذر زمان محتواهای دیگری را نیز درج خواهیم کرد.
موفق باشید.
درود برشما
Loop item در وردپرس همون Component توی فیگما هست؟
درود بر شما. وقت شما بخیر
تا حدی بله. چون عملا یک ساختار قابل استفاده می‌سازیم و جاهای دیگر می‌توانیم از آن استفاده کنیم.
موفق باشید.
سلام وقت بخیر
از تصاویر شاخص برای لوپ استفاده میکنم ارتفاع و اندازه عکس ها نامیزان هست. عکس مطالب داخل رسانه یک سایز نیست
چیکار کنیم اینجا همه تصاویر یک سایز مشخص نشون داده بشه. الان از داخل خود الان نمایش پست عکس ها یه ارتفاع مشخص دارن واینجا داخل لوپ ها نداره چیکار کنیم؟
درود بر شما. وقت شما بخیر
به طور کل بهتر است که تصاویر شاخص بلاگ یا محصول را یکنواخت و متناسب درست کنیم و درج کنیم. حتی می‌خوام این رو بگم که اگر تعداد تصاویرتان کم هست بهتر است اصلا درستش کنید که مشکل از ریشه حل بشود. اما اگر تعداد آنها بالاست و یا به هر دلیلی فعلا نمی‌خواهید این کار را بکنید، می‌توان طوری نمایش داد که عرض ارتفاع آنها یکسان باشد. مثلا می‌توانیم داخل آن لوپ ساخته شده، تصویر شاخص را به عنوان تصویر بک‌گراند یک کانتینر نشان بدهد (تصویر را در حالت cover یا همان پوشش قرار بدهیم) و به آن کانتینر عرض و ارتفاع مدنظر را بدهیم. یا مثلا اصلا به همان ویجت تصویر هم می‌توان عرض و ارتفاع داد. مثلا می‌توانیم حداکثر ارتفاع بدهیم که از یک مقدار خاصی آن کانتینر بیشتر نشود. یا حداقل ارتفاع بدهیم که از یک مقدار خاصی کمتر نشود. این کارها جواب می‌دهد ولی مشکلاتی هم دارد.
مثلا اگر تصویر شاخص یک مقاله به شدت افقی و عریض باشد و یک تصویر دیگر قدی و خیلی دراز باشد، بالاخره در آن فضا کش می‌آیند و درسته اندازه عرض و ارتفاع درست می‌شود اما ظاهر خوب نمی‌شود. یا حتی اگر تنظیم کنید که مثلا صرفا بخشی از عکس را نشان بدهد و بقیه را در نظر نگیرد هم ممکن است بخشی از عکسی که اهمیت کمتری دارد را نشان بدهد. این مسائل هست. پس اگر تصاویر شاخص تفاوت فاحشی داشته باشند باز هم ممکن است ظاهر خوب نشود.
موفق باشید.
درود بر شما این ویدیو فوق العاده بود چون در ویدیو قبلی حالتی که فرمودید استفاده کردم که دیدم نمیشه Button ها را تغییر داد که تعجب کردم که با دیدن این پارت از آموزش دید من را نسبت عوض کرد که الان با این راه حل دیگه راحت میشه بخش مربوط و دلخواه را ایجاد کرد خداقوت
عرض ادب و درود بر شما جناب شفیعی عزیز 😍
کلی سورپرایز دیگه هم داریم. ادامه دوره هنوز کلی نکته داره. با قدرت جلو بروید که ایشالا وردپرس رو هم مثل ui/ux به جاهای خوبی برسانید. تبریک به شما و تلاش شما.
ارادتمندم. موفق باشید.
سلام وقت بخیر
زمانی که از لوپ کروسل استفاده میکنم باگ میشه و فضای زیادی از سایت خالی نشون داده میشه و کروسل هم نمایش داده نمیشه.
مثلا اگر صفحه اصلی من 3 سکشن داشته باشه و سکشن دوم کروسل باشه علاوه بر اینکه کروسل نشان داده نمیشه از سکشن اول تا سوم هم باید 5_6 بار کامل اسکرول کنم تا به سکشن سوم برسم.
مشکل از کجاست و چه کاری باید انجام بدم؟
ممنون از راهنماییتون
درود بر شما. وقت بخیر
دقت کنید شاید ویجت‌های زیادی را انداخته باشید و آها را از حالت responsive خاموش کرده باشید و در صفحه جای خالی گرفته باشند. اگر هم چنین چیزی نبود، ممکن است به برخی سکشن‌ها، پدینگ یا مارجین ناخواسته و یا ارتفاع ناخواسته اعمال شده باشد. حتی ممکن است به عناصر داخلی آنها نیز این موضوع اعمال شده باشد. اگر چیز خاصی طراحی نکرده‌ایم، می‌توانیم پاک کنیم و مجدد آنرا بسازیم.
موفق باشید.
سلام دقیقا منم همین مشکل رو داشتم المنتور رو غیر فعال و دوباره فعال کردم المنتور پرو هم ابدیت به اخرین نسخه کردم درست شد
ممنون بابت توضیحات عالی
درود و سپاس از همراهی شما.
موفق باشید.
سلام. در قسمت ایجاد قالب، در کنار سرصفحه و پاصفحه، برای من قالب حلقه وجود ندارد.
در قست تنظیمات المنتور هم رفتم، در قسمت ویژگی ها حلقه ای وجود نداشت که بخوام فعالش کنم.
ممنونم کمکم کنید.
درود بر شما. وقت شما بخیر
دقت بفرمایید هم نسخه المنتور و هم نسخه المنتور پرو بایستی بروز باشند. نسخه php قالب هم حتما بالای 8.1 بگذارید. مموری لیمیت هم حداقل روی 1024 مگابایت.
همچنین تنظیمات المنتور را بررسی بفرمایید. حالت کانتینر و گرید رو فعال کنید. (البته گرید الزامی نیست اما فعال کنید بهتر است).
در پیشخوان وردپرس و در منوی المنتور، به قسمت مدیریت عنصر یا event manager بروید. دقت بفرمایید که در این بخش هم ویجت‌های مدنظر شما غیرفعال نشده باشند.
موفق باشید.
برای من قسمت نویسنده و تاریخ نمایش نمیده فقط زده admin /با اینکه گزینه بقیه ها هم هست چ باید کرد؟
درود بر شما. وقت شما بخیر
شما در قسمت کاربران بروید و بخش شناسنامه را باز کنید. در وردپرس شما می‌توانید نام نمایشی را تغییر دهید. بدین صورت نام نمایشی کاربر، به طوری که می‌خواهید قابل ویرایش است در این صفحه. الزامی نیست که همان نام کاربری باشد. اصلا می‌تواند فارسی باشد.
در خصوص بقیه گزینه‌ها مثل ساعت، تاریخ و… اگر لازم شان ندارید می‌توانید حذف کنید. در ویدئو همین جلسه لوپ در خصوص آنها توضیح داده‌ام. حتما آنرا کامل مشاهده بفرمایید. این ویجت رو بعدا هم باهاش مواجه خواهید شد. در صفحات داخلی نوشته‌ها نیز از این ویجت استفاده شده است.
موفق باشید.
سلام برای من لوپ موارد پیشنهادی رو تو گزینه ها نمایش نمیده چطور باید فعال کنم؟
درود بر شما. وقت بخیر
در بخش پیشخوان وردپرس و قسمت قالب های المنتور بروید. روی قالب‌های ذخیره شده کلیک بفرمایید. ببینید آیا موردی از لوپ ساخته شده یا خیر؟ دقت کنید که پیش‌نویس نباشد و منتشر شده باشد. همچنین گاهی ممکن است اسم آن را فراموش کنیم و در سرچ آنرا پیدا نکنیم. بنابراین اسم لوپ را هم که انتخاب کردید آنجا ببینید که موقع سرچ فراموش نشود.
موفق باشید.