به جلسه بیست و پنجم بخش آموزش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. یادگیری ساخت قالب نوشته با المنتور دست شما را برای طراحی این دسته از صفحات بازتر می‌کند. قالب‌های آماده وردپرسی معمولاً تنظیمات و قابلیت‌هایی مجزا برای صفحات داخلی نوشته‌ها دارند. حتی در تنظیمات این قالب‌ها می‌توانید سایدبار و خیلی چیزهای دیگر را نمایش بدهید یا ندهید. اما در قالب Hello Elementor از این خبرها نیست!
در واقع شما ظاهر جالبی را برای صفحات داخلی نوشته‌ها نخواهید داشت. باید خودتان قالب صفحات داخلی نوشته‌ها را ایجاد کنید. دقت کنید که این اصلاً بد نیست. چون شما راحت‌تر می‌توانید یک صفحه سبک و متناسب با طرح مدنظر خودتان را به بهترین شکل طراحی کنید. برای یادگیری بیشتر از شما دعوت می‌کنیم تا پایان این مقاله از آژانس نوآوری رسام ما را همراهی کنید.
ساخت قالب نوشته با المنتور
برای طراحی قالب نوشته‌های خود در المنتور، در پیشخوان وردپرس و در قسمت قالب‌ها، روی قالب‌های ذخیره شده کلیک کرده و سپس روی “افزودن قالب جدید” کلیک کنید. با تصویر زیر مواجه خواهید شد. از این قسمت قالب Single Post را انتخاب کرده و سپس یک نام برای آن انتخاب کنید. وارد برگه‌ساز المنتور خواهید شد. حالا می‌توانید قالب خود را برای نوشته‌ها طراحی کنید. دقت کنید که اینجا هم مانند لوپ آیتم، باید لینک‌ها، تصویر شاخص، عناوین و اطلاعات متا را با استفاده از برچسب‌های پویا (داینامیک) وارد کنیم.
در این بخش قالب Single Page هم وجود دارد اما آن را انتخاب نمی‌کنیم. به این دلیل که برگه‌ها عمدتاً طراحی متفاوتی دارند. مثلاً برگه تماس با ما ظاهر متفاوتی با درباره ما و فرصت‌های شغلی دارد. بنابراین هنگام طراحی سایت برگه‌ها را خودمان با برگه‌ساز المنتور به‌صورت مستقیم پیاده سازی خواهیم کرد. اما نوشته‌ها چون ظاهر مشابه هم دارند، یک قالب المنتوری می‌سازیم تا ظاهر همه آنها یکنواخت شوند. دقت کنید که بعداً نوشته‌ها را صرفاً با ادیتور گوتنبرگ درج می‌کنیم اما همه آنها خود به خود، ظاهر همین قالب کلی نوشته‌ها را به خود خواهند گرفت. بدین صورت طراحی بسیار سبک‌تری خواهید داشت.
درج سایدبار در قالب نوشته‌ها در المنتور
استفاده از سایدبار الزامی نیست. باید به این توجه کنید که در سایتی که می‌خواهید چقدر سایدبار و محتوای داخل آن ضرورت دارد و چقدر این موضوع متناسب با نیاز کاربران آن سایت است. مثلاً در سایدبار ممکن است بنر و مقالات مشابه را بگذارند. ممکن است دکمه‌های اشتراک‌گذاری یا تبلیغات مربوط به خدمات و محصولات خود را نیز درج کنند. پس این موضوع، بسته به سایت شما متغیر است. ما در این بخش آموزش المنتور پروژه محور از دوره رایگان طراحی سایت با وردپرس سایدبار را نیز درج کردیم که آموزش کامل‌تر شود.
درج کد CSS برای بهبود طراحی قالب نوشته‌ها در المنتور
اینکه کد CSS بزنید الزامی نیست. با همان امکانات افزونه‌های المنتور و المنتورپرو هم می‌توانید صفحه را طراحی کنید. البته گاهی برای بهتر شدن طراحی نیاز به درج کد است. اگر CSS بلدید به شما تبریک می‌گویم اما اگر هم بلد نیستید فعلاً مهم نیست. در گذر زمان یاد خواهید گرفت (به شرطی که از انجام تمرین نترسید). کدهای استفاده شده در ویجت محتوای متن صفحه (در تب پیشرفته و قسمت مربوط به کد سفارشی) قرار دادیم. در صورت تمایل از آنها استفاده کنید. دقت کنید که شما باید کلاس pooya-post-links را (بدون نقطه اول) در قسمت کلاس CSS در تب پیشرفته وارد کنید.
.pooya-post-links a strong, .pooya-post-links a {
font-weight: 700;
transition: 300ms;
}
.pooya-post-links a strong:hover, .pooya-post-links a:hover {
text-decoration: underline;
text-underline-offset: 8px;
}
.pooya-post-links .wp-block-video {
margin: 30px 0;
}
.pooya-post-links .wp-block-video video {
border-radius: 10px;
}
.pooya-post-links .wp-block-heading {
margin-top: 30px;
}
.pooya-post-links .wp-block-image {
margin: 30px 0;
}
.pooya-post-links .wp-block-image img {
border-radius: 5px;
}
.pooya-post-links mark {
padding: 5px;
border-radius: 5px;
font-weight: 500;
}یک قالب جذاب برای نوشته‌های خود بسازید
صفحات داخلی نوشته‌ها اهمیت بسیاری دارند. زمان‌های بسیار رخ می‌دهد که کاربران با جستجوی عبارتی وارد سایت شوند و مقصد آنها یکی از صفحات بلاگ شما باشد. پس باید روی سرعت، رابط کاربری و جذابیت این صفحه کار کنید تا به قول دیجیتال مارکترها، از طریق بازاریابی محتوایی مخاطب بیشتری بدست آورید. حتماً طراحی صفحه وبلاگ با المنتور را انجام دهید. همچنین، تجربیات و سوالات خود را نیز با متخصصین آژانس نوآوری رسام در این جلسه از آموزش رایگان وردپرس در میان بگذارید.
30 پاسخ
سلام. ممنون از آموزش خوبتون. من ی مشکلی توی سایدبار دارم. در حالت اسکرول سایدبار، مثل این میمونه که مارجینش با حالت عادی فرق داره و جابجا میشه. چیکار باید کنم؟
درود بر شما دوست گرامی، وقت شما بخیر
فاصله‌ای که از بالا می‌چسبد رو می‌فرمائید؟ اگر درست متوجه شده باشم، این آیتم رو در تب پیشرفته می‌توانید Offset بدهید که فاصله بگیرد. حتما گزینه ماندن در ستون Stay in Column رو هم بزنید که وارد فوتر نشود.
موفق باشید.
سلام و درود بر شما این ویدیو خیلی عالی بود چون به سرعت برای همه مطالب قالب اعمال شد به راحتی و این لذت بخشه یک سوال داشتم بخش ارسال دیدگاه به جز کد زنی نمیشه طور دیگری تغییر داد و کاستوم کرد؟
در کل آموزش‌های شما یک به یک عالی و بینظیر هستند خداقوت و دست‌مریزاد می‌گویم.
ارادتمندم.
درود بر شما جناب شفیعی عزیز. وقت شما بخیر
سپاس از لطف و همراهی و مهربانی شما. هم میشه با نوشتن کد بهترش کرد که من اغلب این کار را انجام می‌دهم. هم میشه با نصب پلاگین، این موضوع رو بهبود داد و ظاهرش رو بهتر کرد و حتی قابلیت‌هایش را نیز بهبود داد.
موفق باشید.
سلام
برای بخش فهرست مطالب میشه کاری کرد که کاربر وقتی روی عنوان فهرست هم کلیک کرد فهرست باز بشه یا کل بخش کلیک کرد باز بشه ؟
الان فقط وقتی روی اون فلش کوچیک بزنیم باز و بسته میشه
داخل بعضی از سایت ها دیدم هر قسمتش بزنیم باز و بسته میشه
درود بر شما. وقت شما بخیر
این ویجت نداره به‌نظرم البته خب میشه با کد javascript درستش کرد. راه دیگر اش هم این هست از پکیج دیگری که چنین ویجتی دارد استفاده کنیم.
موفق باشید.
درود مجدد از رنک مث در مسیر راهنما کپی کردم و در قالب هدر که ساخته بودم ردیف بعدش با ویجت کوتاه که قرار دادم اومدم کپی پیست کردم و مسیر راهنما درست بنظرتون این کاری که کردم اصولی بوده؟
درود بر شما ارشیا جان. وقت شما بخیر
بله اگر نشان میده در صفحه. بالاخره یکی از همان ویجت ها را استفاده کنید. یا از پکیج‌ها یا از رنک‌مث یا از یوست و…
موفق باشید.
من هرچی سرچ کردم در المنتور پرو ویجتش نشون نداد اصلا نداره حتی رفتم فعال کردم بازم نمیاره میخواستم بدونم اگه بشه بدون دستی انجام دادن و بدون استفاده از شورت کد امکانش هست فعالش کرد یا نه قالبم هلو المنتوره و فک کردم اونجا میشه راحت فعالش کرد. رنک مث در سایتم فعاله ولی سرچ میکنم ویجت مد نظرش نمیاد نمیدونم مشکل چیه ولی بالا نمیاره.
درود بر شما دوست گرامی. وقت بخیر
من خودم کمتر با رنک‌مث کار میکنم بیشتر با یوست کار میکنم. اون روز در واقع فراموش کردم بگم که نسخه pro در رنک‌مث هستش که ویجت Breadcrumbs رو داره. افزونه یوست هم داره، ویجت‌های کمکی المنتور مثل هپی ادانز، پلاس ادانز، اسنشیال ادانز و… هم ویجت المنتور رو دارند.
موفق باشید.
سلام افزونه رنک مث دارم و میخوام کد php رو کپی کنم یا در قالب یک متن [rank_math_breadcrumb] برم دستی بذارم ولی خب من چون قبلش نذاشته بودم بهتره برم در قالب فرزند کد php رو کپی کنم بذارم؟ یا بهتره دستی انجام بدم؟ ممنون میشم کمک کنین
درود بر شما. وقت شما بخیر
شورتکد رو می‌توانیم داخل تمپلیت‌ها هم استفاده کنیم و مشکلی نیست. می‌توان تمپلیتی که قبلا ساختید رو باز کنید و شورتکد مدنظر را در جایی که می‌خواهید نمایش داده بشود درج کنید. البته این را هم بگویم که افزونه رنک مث، خودش ویجت مربوط به Breadcrumb را دارد.
موفق باشید.
سلام چطور می‌شود در قسمت پست تایپ بدون افزونه تعداد بازدید پست اضافه کرد چون این مورد وجود ندارد و باید از افزونه استفاده کرد. آیا افزونه خاصی پیشنهاد می‌کنید.
درود بر شما. وقت بخیر
می‌توانید از افزونه wp post view استفاده کنید. حجم کمی دارد و شورتکد آن را می‌توان داخل المنتور هم استفاده کرد و مشکلی ندارد. من استفاده کردم قبلا.
موفق باشید.
سلام وقت بخیر
خسته نباشید و خداقوت برای آموزش های کاربردیتون♥
من یک قالب آماده ریختم روی سایت ولی طراحی قالب نوشته‌هاش زیاد جالب نبود. با این آموزش، قالب نوشته رو طراحی کردم اما فقط محتوایی که در قالب طراحی کردم در همه نوشته های قبلیم ایجاد شده. یعنی همه نشوته های قبلیم بهم ریخته. مشکل از کجاست؟
درود بر شما. وقت بحیر
قالب‌های المنتوری می‌توانند روی سایر Theme های وردپرس هم استفاده بشوند. مگر اینکه آن قالب با المنتور هماهنگ نباشد که گاهی برای برخی Theme ها رخ می‌دهد. گاهی نیز مشکل از تداخل Theme با المنتور نیست. ممکن است نوشته‌های قبلی با ادیتور مختص آن قالب درست شده باشند. یا ممکنه آن نوشته‌ها مستقیماً با المنتور ادیت شده باشند. در واقع بهتر است نوشته‌ها با همان ادیتور پیشفرض گوتنبرگ درج شده باشند تا قالب داینامیک المنتوری ساخته شده، روی آنها اعمال بشود و به درستی کار کند.
موفق باشید.
باعرض سلام و تشکر از آموزش خوبتون
با توجه به گفته جنابعالی که فرمودید: نوشته‌های درج شده در وردپرس نیز بایستی با همان ادیتور گوتنبرگ درج شده باشند.
یعنی امکان نداره که نوشته ها رو با المنتور ایجاد کنیم؟
درود بر شما. وقت بحیر
چرا می‌شود برگه، نوشته، محصول و یا هر پست تایپ دیگری را با المنتور طراحی کرد. اما گاهی اوقات نباید این کار را کرد. (در جلسات پیش رو توضیح می‌دهیم) در واقع زمانی که ساختار صفحات داخلی پست‌تایپی مثل نوشته اگر مشابه هم باشد باید با المنتور و در بخش قالب‌ها، یک قالب داینامیک برای نوشته‌ها بسازیم که وقتی با همان ادیتور گوتنبرگ نوشته‌ای درج می‌کنیم، آن قالب داینامیک را به خود بگیرد. این سرعت بالاتری خواهد داشت. در جلسات پیش رو، آن را آموزش خواهیم داد.
موفق باشید.
سلام
وقتی قالب نوشته کلی را ایجاد میکنم، آن چیزی که کلیه نوشته‌هایم نمایش می‌دهد، همان قالب طراحی شده است. به عبارتی همه‌ی نوشته‌ها تنها یک پیج که همان قالب طراحی است را نمایش می‌دهد. لطفا راهنمایی فرمائید.
درود بر شما. وقت بخیر
پس در واقع دارید قالب آرشیو رو درست می‌کنید؟ اگر قالب آرشیو هست که همه نوشته‌ها را نشان بدهد، مسیر را درست رفته‌اید (البته جلسه‌ای که داخل آن کامنت گذاشتید مربوط به جلسه قالب صفحه داخلی نوشته است، اما اگر هدف‌تان قالب کلی آرشیو بود درست طراحی کرده‌اید). در واقع این آرشیو در برگه بلاگ نشان داده می‌شود که تمامی مطالب را می‌آورد. طبیعی است که یکی باشد. اما معمولا از صفحه‌بندی و لودینگ با دکمه و… استفاده می‌کنند که اگر تعداد مطالب زیاد شد کاربر به مشکل نخورد. بنابراین درست انجامش داده‌اید.
موفق باشید.
سلام وقت بخیر.
من در برخی از نوشته های باید کدی رو نمایش بدم. مثلا کد html ولی وقتی که مطلب منتشر میشه نتیجه کد رو نمایش میده و نه خود کد رو ( یک قالب برای نمایش نوشته های تکی با المنتور ساختم . نوشته ها رو هم با گوتنبرگ می نویسم. کدها رو در بلاک کد قرار دادم ) آیا راهی وجود داره برای حل این مشکل
درود بر شما. وقت بخیر
داخل گوتنبرگ، مشابه المنتور هم می‌توان کد پردازش نشده را درج کرد و هم کدی که پردازش هم شده و در واقع خروجی کد را نشان می‌دهد. برای پردازش کد از “html سفارشی” و برای صرفاً درج کد که برای آموزش به کار می‌رود و پردازش نمی‌شود هم از ویجت “کد” در گوتنبرگ استفاده می‌شود.
موفق باشید.
ببخشید من کد css رو هم دقیقا وارد کردم در کانتینر مربوطه و کلاس pooya-post-links را بدون نقطه در جایش قرار دادم کار نکرد
اگه نکته خاصی داره ممنون میشم بفرمایید
درود بر شما. وقت بخیر
اتفاقا باید نقطه را بگذاریم. (منظورم در بخش css سفارشی هست) در جایی که صرفاً اسم کلاس را می‌خواهد، نیازی به نقطه نیست.
موفق باشید.
ببخشید یه سوال دیگه : اگه بخواییم یک عکس بزاریم و کنارش متن باشه ینی 50% کانترنر متن 50 درصد تصویر یا هر چیز دیگه به طوری که ادامه متن بیاد زیر عکس ادامه پیدا کنه
اینو چطور میشه انجام داد
باید کدنویسی بشه یا نه ؟
مثلا کاور مقاله اول مقاله بیاد در کنارش متن خلاصه مثل مقاله های سایت همیار ورد پرس
ممنون
درود بر شما. وقت بخیر
بله با کد رو که درست فرمودید و اغلب هرچیز خاصی را می‌توان با کد نوشت. اما توی المنتور با ویجت‌های پیشفرض من تا به حال این کارو نکردم. احتمال دارد پکیج‌های دیگر المنتوری این را داشته باشند. به نظر ساده باشد. یک بار باهاش سر و کله میزنم و در ویدئوهای آتی آن را درج میکنم قطعا.
سپاسگزارم از شما. موفق باشید.
سلام استاد اوقاتتون خوش
سایدبار برای من تیک داره موقع اسکرول اندازه نیم سانت جابجا میشه کلا کانتینر جابجا میشه
مشکل از چیه؟
درود بر شما. وقت بخیر
سایدبار را فیکس فرمودید؟ مقادیر آفست ببینید یه وقت عدد عجیبی ست نشده باشد (احتمال هست نه اینکه بگوئیم حتما اینطور شده) همین موضوع را برای تب پیشرفته و قسمت‌هایی مثل موشن افکت بررسی بفرمائید شاید افکتی در حالت هاور و… تنظیم شده است.
موفق باشید.
سلام و عرض خداقوت . آقای حمداللهی اون قسمت اطلاعات پست برای من توی قالب درست نمایش میده ولی زمانی که نمایش نوشته رو میزنم بهم ریخته اسن.کش رو هم پاک کردم ولی مشکل حل نشد. بنظرتون ایراد کار کجاست؟
درود بر شما. وقت بخیر
محتواهای این صفحه چون template هستند و قرار هست روی همه صفحات اجرا بشوند، بایستی حتما داینامیک باشند (ار برچسب‌های پویا باید استفاده کنیم). همچنین نوشته‌های درج شده در وردپرس نیز بایستی با همان ادیتور گوتنبرگ درج شده باشند. این موارد رو هم چک بفرمائید.
اگر درست شد، در صورت تمایل لینک سایت خود را بگذارید بنده هم بررسی کنم.
موفق باشید.