صفحه اصلی / عمومی / آموزش قالب ایمپرزا – آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

آموزش قالب ایمپرزا – آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

۲۶ آبان ۱۳۹۸

۵۹ بازدید

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

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

راهنمای مطالعه آموزش ۰ تا ۱۰۰ آموزش قالب ایمپرزا

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

 

شما می توانید بروی هر کدام از عنوان های زیر که با رنگ آبی مشخص شده، کلیک کنید تا به راهنمای همان بخش هدایت شوید.

تنظیمات کلی سایت

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

تنظیمات قالب ایمپرزا

  • تنظیمات عمومی قالب:  چطور صفحات پیش بارگزاری و حالت تعمیر و نگهداری را فعال کنیم؟ چطور طرح بندی سفارشی خود را به برگه نوشته ها اعمال کنیم؟
  • تنظیمات طرح بندی سایت و صفحات: چطور طرح بندی رسپانسیو و طرح بسته بندی شده (boxed) را تنظیم کنیم؟ چطور عرض نواحی محتوا را تغییر دهیم؟
  • تغییر تنظیمات طرح بندی برگه ها: چطور طرح بندی برگه را تغییر دهیم؟ چطور هدر، نوار عنوان ، سایدبار ، فوتر را برای هر برگه به طور اخصاصی تغییر دهیم؟
  • تنظیمات رنگ: چطور رنگ بندی های از پیش تعریف شده را تنظیم کنیم؟ چطور رنگ بندی بخش های مختلف لینک، متن، محتوا و … را تغییر دهیم؟

تنظیمات زیر به زودی به آموزش قالب imperza اضافه خواهد شد….

  • ساخت و تغییر هدر و نوار عنوان: چطور سربرگ فعال قالب را تغییر دهیم؟ چطور برای هر صفحه سربرگ سفارشی تنظیم کنیم؟ چطور هدر را به صورت شفاف تنظیم کنیم؟ کدام طرح بندی های هدر در قالب قرار داده شده است؟ چطور محتوا، رنگ و عرض نوار عنوان را تغییر دهیم؟
  • تغییر سبک دکمه: چطور رنگ و سبک دکمه های سایت را تغییر دهیم؟
  • تغییر و تنظیم سایدبار: چطور سایدبار پیش فرض را تغییر و تنظیم کنیم؟ چطور یک سایدبار سفارشی را برای برگه نوشته، صفحات، پورتفولیو، صفحات فروشگاهی و … تنظیم کنیم؟
  • ویرایش فوتر قالب: چطور فوتر سایت را تغییر دهیم؟ چطور پاورقی ایجاد شده را به انواع برگه های نوشته، پورتفولیو و … اختصاص دهیم؟
  • تنظیمات نمونه کارها و پورتفولیو: چطور کامنت گذاری در صفحه پورتفولیو را فعال کنیم؟ چطور نامک را در پورتفولیو تغییر دهیم؟
  • تنظیمات بلاگ: چطور برگه بلاگ و پست را باید تنظیم کرد؟ چطور دکمه مطالعه بیشتر را فعال کنیم؟ چطور تعیین کنیم کدام ویژگی های نوشته، فعال شوند؟ چطور لیست پست های مرتبط را فعال کنیم؟
  • تنظیمات فروشگاه: چطور نمایش صفحه محصولات قالب ایمپرزا را تغییر دهیم؟ چطور محصولات مرتبط فروشگاهی را برای نمایش تنظیم کنیم؟
  • تنظیمات سایز تصاویر: چطور اندازه جدیدی برای تصاویر اضافه کنیم؟ چطور عکس های بند انگشتی را تنظیم کنیم؟
  • تنظیمات پیشرفته قالب: چطور عملکرد سایت را بهبود دهیم؟ چطور نمایش شبکه ای را فعال کنیم؟
  • کد های سفارشی: کجا می توان کد های گوگل آنالیتیک، html، jQuery ،css و جاوا اسکریپت را وارد کرد؟
  • پورتفولیو: چطور می توان تنظیمات پورتفولیو را به طور اخصاصی انجام داد؟ 

آپدیت قالب ایمپرزا

تنظیمات کلی سایت

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

تغییر صفحه اصلی ایمپرزا

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

  1. از پیشخوان به تنظیمات> خواندن بروید.آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری
  2. گزینه “یک برگه یکتا” را انتخاب کنید.
  3. از لیست کشویی صفحه ای را که میخواهید به عنوان صفحه اصلی باشد، انتخاب کنید.
  4. تنظیمات را ذخیره کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

 

تغییر منوی قالب impreza

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

  1. از فهرست پیشخوان “نمایش” را انتخاب کنید.
  2. گزینه “فهرست ها” را انتخاب کنید تا منوی ویرایشگر را مشاهده کنید.
  3. یک فهرست جدید ایجاد کنید” را از بالای صفحه انتخاب کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

۴: یک نام در کادر نام فهرست وارد کنید.

۵: روی دکمه ایجاد فهرست کلیک کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

اضافه کردن ویژگی به لینک منوها

در این بخش از آموزش قالب impreza به بررسی پیوندهای همسو و سایر تنظیمات پیشرفته منو می پردازیم.

پیوندهای هم سو

برای اضافه کردن خصوصیاتی مانند nofollow به لینک منو، باید در بالای صفحه فهرست ها Screen Options را انتخاب کنید، سپس:

  1. پیوندهای همسو (XFN) را انتخاب کنید.
  2. به عنوان مثال در تنظیمات آیتم منوی مورد نظر در بخش پیوندهای هم سو، nofollow را وارد کنید. این گزینه ها با فلش قرمز در تصویر نشان داده شده است

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

تغییر ظاهر منوی هدر

اگر ادانز هدر فعال است، گزینه تنظیمات کشویی آیتم مورد نظر از منوی موردنظر را کلیک کنید. در غیر اینصورت برای تغییر رنگ هدر منو به مسیر تنظیمات قالب> رنگ ها مراجعه کنید.

به عنوان مثال: در تصویر زیر تنظیمات کشویی آیتم خانه از منوی اصلی را نمایش داده ایم.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

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

  • پهنا > خودکار: تعداد این ستون را می توانید از ۱ تا ۶ تنظیم کنید. عرض کامل: یا Width را بر اساس px تنظیم کنید (به طور پیش فرض عرض کامل برابر است با عرض محتوای سایت که از تنظیمات قالب> گزینه های طرح بندی سایت قابل تنظیم است).
  • Padding: فاصله اطراف یک محتوا را از این قسمت می توان تنظیم کرد.
  • رنگ پس زمینه سفارشی: یک رنگ پس زمینه دلخواه به آیتم منو اختصاص دهید.
  • رنگ متن سفارشی: یک رنگ متن دلخواه اختصاص دهید.
  • تصویر زمینه: یک تصویر پس زمینه اختصاصی انتخاب و تنظیمات آن را انجام دهید.

افزودن منو به فوتر و برگه

در این بخش از آموزش قالب ایمپرزا افزودن منوی سفارشی به برگه یا ناحیه خاص را یاد می گیریم.

برگه مورد نظر را در حالت ویرایشگر پیشرفته قرار دهید (زیر عنوان برگه). در ناحیه مورد نظر برگه، بر روی علامت + کلیک کنید. المان WP Custom Menu (فهرست سفارشی ) را از دسته المانهای ویژوال کامپوزر انتخاب کنید. سپس منوی مورد نظر را برای فراخوانی انتخاب نمائید. در کادر کشویی منو تمامی فهرست های تعریف شده قرار دارند، فقط کافی است منوی مورد نظر خود را انتخاب و تغییرات را دخیره کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

افزودن دکمه به منو

ابتدا تیک صفت عنوان و کلاس css را همانند آنچه در پیوندهای همسو گفته شد، فعال کنید.

برای تبدیل هر یک از آیتم های منوی سطح ۱ به یک دکمه، به قسمت نمایش> فهرست ها بروید و کلاس btn را در کادر CSS آیتم منو مورد نظر وارد کنید و تغییرات را ذخیره کنید.

افزودن آیکون به آیتم های منو

می توانید با افزودن <“i class = “fas fa-star> در قسمت “صفت عنوان” از تنظیمات منو ، آیکون خود را به منو اضافه کنید.

در تصویر زیر کادر ورود CSS و صفت عنوان با فلش قرمز نمایش داده شده است.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

 

ویرایش سایدبار قالب ایمپرزا

در این بخش از آموزش قالب impreza به سفارشی سازی سایدبار قالب خواهیم پرداخت.

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

این قالب شامل “ساید بار پیش فرض زیر” است:

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

افزودن سایدبار سفارشی

  • از منوی پیشخوان وردپرس نمایش> ابزارک ها رفته و سایدبار (نوار کناری) خود را در آنجا اضافه کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

  • سایدبار مورد نظر را با ابزارک مدنظر، ایجاد کنید. به عنوان مثال ما آخرین دیدگاه ها را به عنوان ابزارک به سایدباری با نام “نمونه نوار کناری” اضافه کردیم.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

سپس نوارکناری سفارشی خود را تخصیص دهید.
دو راه برای اختصاص یک نوار کناری وجود دارد:

  1. برای یک نوع پست خاص در تنظیمات قالب> نوارکناری.
  2. برای یک صفحه خاص می توانید از طریق تنظیمات صفحه در سمت چپ و زمانی که یک صفحه را ویرایش می کنید، اقدام کنید.

مدیریت آیکون ها

قالب چند منظوره Impreza با تمام آیکون های Font Awesome و Material یکپارچه شده است، و شما می توانید از آنها در محتوا ، هدر، طرح بندی شبکه، منو و … به عنوان بخشی از متن استفاده کنید.

آیکون های Font Awesome Pro

این قالب دارای آیکون های Font Awesome PRO داخلی است که تعداد آنها به صدها آیکون لایت می رسد.

آیکون های material

آیکون های material فونت آیکون هایی هستند که توسط Google ایجاد شده است.

المان های قالب Impreza یک کنترل ویژه برای تنظیم آیکون ها دارند. از بین ۵ استایل آیکون ، آیکون مناسب را انتخاب و نام آن را کپی کنید و در فیلد مورد استفاده paste کنید. سپس پیش نمایش آن را مشاهده کنید. در ادامه افزودن کردن آیکون به منو را آموزش می دهیم.

اضافه کردن آیکون به منو

اگر بخواهید آیکون FontAwesome را به منو اضافه کنید، باید نام کامل آیکون را با پیشوند بکار ببرید. به عنوان مثال برای اضافه کردن آیکون ستاره به صفحه its page on the Font Awesome site مراجعه و کد را در محل کپی کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

با افزودن کد زیر به قسمت “برچسب ناوبری” ، آیکون را به آیتم فهرست خود اضافه کنید

برای آیکون ستاره در FontAwesome کد زیر:

<i class="fas fa-star"></i>

و برای آیکون ستاره در Material کد زیر را استفاده کنید.

<i class="material-icons">star</i>

به عنوان مثال در منوی خانه از قالب وردپرسی ایمپرزا فارسی، آیکون ستاره را درج کردیم.آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

تغییر سایز تصاویر رسپانسیو قالب

توضیحات این بخش به درک مکانیسم نمایش تصاویر در سایت های وردپرسی کمک خواهد کرد.

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

اگر دو یا چند تصویر یکسان دارای اندازه های متفاوت باشند، فقط یک تصویر کوچک تولید می شود.
با توجه به جدول بالا هنگام بارگذاری یک تصویر بزرگ (بزرگتر از ۱۰۲۴ پیکسل) ، به طور پیش فرض ۵ تصویر کوچک (در صورت استفاده از WooCommerce7 عکس کوچک) ایجاد می شود. همه تصاویر کوچک در / wp-content / upload / پوشه نصب وردپرس شما قرار دارند ، همچنین این تصاویر کوچک دارای پسوندی است که ابعاد پیکسلی تصویر را بیان می کند.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

تغییر سایز تصاویر قالب وردپرس ایمپرزا

برای افزودن اندازه های تصویر سفارشی ، به تنظیمات قالب> اندازه های تصویر بروید.

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

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

توصیه می کنیم سایز های زیادی، تنظیم نکنید زیرا:

  • با افزودن تصاویر به Media Library ، زمان بارگذاری را افزایش می دهید.
  • با توجه به تعداد تصاویر آپلود شده ، فایل های اضافی دیگری نیز در فهرست بارگذاری شما ایجاد می شود. به عنوان مثال ، اگر ۱۰۰ تصویر را در وب سایت خود بارگذاری کنید ، به طور پیش فرض ۶۰۰ فایل خلاصه خواهید داشت و به ازای هر اندازه تصویر اضافی که ایجاد کرده اید، ۱۰۰ فایل را بعد از تنظیم مجدد تصاویر کوچک (thumbnails) اضافه می کند.

چه طور تصاویر کوچک خود را مجددا تنظیم کنیم؟

بازسازی تصاویر با اندازه های جدید فقط از طریق افزونه ها در دسترس است. توصیه می کنیم از افزونه Force Regenerate Thumbnails استفاده کنید زیرا این افزونه کلیه تصاویر با اندازه های بلااستفاده را از کتابخانه رسانه شما حذف می کند.

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

آموزش تنظیمات قالب ایمپرزا

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

تنظیمات عمومی ایمپرزا

برای تغییر و سفارشی سازی تنظیمت عمومی قالب، پیشخوان > impreza > تنظیمات قالب > عمومی را انتخاب کنید. در بخش تنظیمات عمومی به حالت تعمیر و نگهداری، در ادامه توضیح داده می شود.

  • حالت تعمیر و نگهداری

این گزینه را روشن کنید تا سایت خود را در حالت تعمیر قرار دهید. این صفحه خاص (که از لیست صفحات انتخاب شده است) برای همه بازدیدکنندگانی نمایش داده می شود، که وار سایت نشده اند.

وضعیت “۵۰۳ سرویس غیرقابل دسترسی” :

این گزینه را روشن کنید تا سرور خود را برای ارسال ۵۰۳ (سرویس در دسترس نیست) تنظیم کنید. این گزینه می تواند از ردیابی صفحه توسط ربات هاتی موتورهای جستجو جلوگیری کند. از این گزینه فقط برای مدت زمانی کوتاه استفاده کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

از این قسمت میتوانید برای تنظیم تصویری برای نماد سایت در مرورگر استفاده کنید. آیکون باید مربع و حداقل ۵۱۲*۵۱۲ پیکسل باشد. این گزینه برای راحتی بیشتر قرار داده شده و مشابه عملکرد تنظیمات پیش فرض وردپرس است.

  • صفحه پیش بارگذاری

یکی از صفحات از پیش تعریف شده را انتخاب کنید یا صفحه مورد نظر خودتان را اختصاص دهید.

گوشه های گرد را می توانید برای همه المان های قالب روشن یا خاموش کنید (به عنوان مثال آیکون پیوندهای اجتماعی را می توان به صورت لبه گرد تنظیم کرد).

  • خط زیر لینک ها

از طریق روشن/خاموش کردن خط زیر می توان نمایش یا عدم نمایش این خط را برای پیوندهای متنی تنظیم نمود.

  • قابلیت دسترسی به صفحه کلید

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

  • دکمه بازگشت به بالا

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

اگر این گزینه را روشن کنید، به بازدید کنندگان سایت جدید یک اعلان نشان داده می شود. با توجه به سیاست GDPR تنظیم این گزینه ممکن است مفید باشد.

این کلید API برای همه دامنه ها لازم است.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

طرح بندی کلی سایت

در تنظیمات قالب ایمپرزا و اکثر قالبهای دیگر وردپرسی دو نوع طرح بندی برای نمایش سایت در دسترس قرار می دهند. یکی طرح عریض و دیگری بسته بندی شده.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

طرح عریض تمام صفحه و طرح بسته بندی شده با حاشیه های کناری طراحی شده است. در زیر تفاوت دو طرح بندی را مشاهده می کنید.

طرح عریض طرح بسته بندی شده
آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

پس از انتخاب طرح بسته بندی شده (Boxed)، می توانید رنگ پس زمینه و تصویر پس زمینه را تنظیم کنید:

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

عرض طرح بندی

تصویر بعدی به درک بهتر طرح بندی می تواند کمک کند. در تصویر زیربه ترتیب عرض سایت، عرض محتوای سایت، عرض محتوای درون صفحه و عرض سایدبار با فلش های قرمز نمایش داده شده است:

  • بوم سایت: عریض ترین بخش طرح بندی
  • محتوای سایت: شامل محتوای دورن صفحه و سایدبار
  • محتوا: محتوای صفحه شامل متن ها، فرم ها، محصولات و ..
  • عرض نوار کناری یا سایدبار: نوار کناری شامل ابزارک های جستجو و فیلتر محصول، اطلاعات تماس و شبکه های اجتماعی و … که در برخی صفحات تکرار می شوند. تنظیمات سایدبار به طور اختصاصی در ادامه توضیح داده می شود.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

عرض افکت های غیر فعال

وقتی عرض صفحه از مقدار تعیین شده در این قسمت کمتر باشد، گزینه های زیر غیرفعال می شوند:

  • افکت پارالاکس از زمینه تصویر در سطر و نوار عنوان
  • ظاهر متحرک ستونها و عنصر تک تصویر
  • بازکردن صفحات پورتفولیو در پاپ آپ

عرض ستون های انباشته شده (تجمیع شده)

وقتی عرض صفحه کمتر از مقدار وارد شده در این بخش باشد، تمام ستون های یک ردیف به یک ستون واحد تبدیل می شوند.

تنظیمات طرح بندی صفحات

همانند تنطیمات قبلی، برای تغییر طرح بندی صفحات پیشخوان> impreza> تنظیمات قالب> طرح بندی صفحات را انتخاب کنید. تنظیمات طرح بندی برگه ها یکی از کاربردی ترین بخش آموزش قالب ایمپرزا است که در ادامه تک تک گزینه های طرح بندی مورد بررسی قرار می گیرد.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

تنظیم صفحه نتایج جستجو

صفحه ای را که تمایل دارید به عنوان الگوی صفحه نتایج نتایج جستجو مورد استفاده قرار گیرد ، در این قسمت تنظیم نمائید. این صفحه باید شامل شبکه نمایش عناصر (Grid element showing) باشد، که آیتم های پرس و جو فعلی را نشان می دهد.

برگه نوشته

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

برای تنظیم صفحه نوشته به تنظیمات> خواندن> صفحه نوشته ها مراجعه کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

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

صفحه “۴۰۴ یافت نشد”

صفحه انتخاب شده به جای پیام پیش فرض “صفحه یافت نشد” نمایش داده می شود.

تغییر طرح بندی صفحات قالب ایمپرزا

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

  • هدر: هدر ناحیه بالای صفحه است و هدر به طور پیش فرض برای تمام صفحات سایت فعال شده است. شما می توانید برای هر صفحه یک هدر جدید اضافه، ویرایش و یا حذف کنید تا نمایش داده نشود.
  • نوار عنوان: ناحیه بین هدر و محتوای صفحه است. نوار عنوان، عنوان محتوای بلاک صفحه خاص را نمایش می دهد. به عنوان مثال برای صفحه وبلاگ شما “خانه > بلاگ” نمایش داده می شود. به طور پیش فرض این تنظیمات غیر فعال است. شما می توانید از طریق تنظیمات قالب > پیشرفته آن را فعال کنید.
  • محتوا: محتوای صفحات شامل تمامی عناصری که در صفحه موجود است.
  • سایدبار (نوار کناری): سایدبار ها نواحی کناری صفحات هستند که شما می توانید سایدبارهایی را با ابزارهای ویژه ایجاد و ویرایش کنید.
  • فوتر: ناحیه پایین صفحه که به طور پیش فرض برای تمامی صفحات نمایش داده می شود.

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

چه طور برگه سفارشی برای قالب وردپرسی ایمپرزا ایجاد کنیم؟

برای ساخت صفحه سفارشی به دو روش زیر می توان عمل کرد:

از بلاک های از پیش تعریف شده استفاده کنید: از پیشخوان > imperza >  وارد سازی دموها را انتخاب کنید.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

صفحه جدیدی بر اساس قالب ایمپرزا ایجاد کنید: از پیشخوان >imperza > بخش بلاک ها را انتخاب کنید.

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

المان های پست

هر طرح بندی برگه می تواند از طریق المان های پست این قالب ساخته شود. در تصویر زیر همه المان های پست نمایش داده شده است.

  • تصویر پست– تصویر شاخص پست فعلی را نشان می دهد.
  • عنوان پست – عنوان پست فعلی را نشان می دهد.
  • تاریخ ارسال – تاریخ پست فعلی را نشان می دهد (منتشر یا اصلاح شده).
  • نویسنده پست – اطلاعات مربوط به نویسنده پست فعلی را نشان می دهد.
  • طبقه بندی پست – کلیه اصطلاحات طبقه بندی پست فعلی را نشان می دهد.
  • نظرات – لیست نظرات را با فرم پاسخ مربوطه نمایش می دهد.
  • نمایش پست قبلی/بعدی – پیوندهایی به پست های قبلی و بعدی را نمایش می دهد.
  • فیلد پست سفارشی – مقدار برخی از المان های از پیش تعریف شده یا سفارشی پست فعلی را در خروجی نمایش می دهد.
  • شکست افقی – مانند طرح بندی شبکه ( Grid Layout ) و یا Header Builder برای طبقه بندی عناصر بکار می رود.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

تغییر طرح بندی صفحات بایگانی

صفحات آرشیو چه صفحاتی هستند؟

صفحات آرشیو یا بایگانی به صفحاتی گفته می شود که لیست پست ها را بر اساس برخی ویژگی ها و پارامترها نمایش می دهد.

  • پست های یک دسته واحد
  • پست های یک تگ خاص
  • پست های هر سال
  • پست های ماه های خاص
  • پست های روز های خاص
  • صفحات پورتفولیو از دسته پورتفولیو

در تصویر زیر تنها بایگانی و دسته ها نمایش داده شده است. برچسب، نویسنده و پورتفولیو هم با همین گزینه ها در ادامه صفحه قرار دارند.

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

 

تنظیمات طرح بندی بایگانی، امکان مدیریت نواحی این نوع صفحات را بر اساس نوع پست (post type) فراهم میکند.

هر صفحه بایگانی ممکن است نواحی زیر را داشته باشد:

  • هدر: هدر ناحیه بالای برگه بایگانی است. هدر به طور پیش فرض برای تمام صفحات بایگانی فعال شده است. شما می توانید برای هر صفحه یک هدر جدید اضافه، ویرایش و یا حذف کنید تا نمایش داده نشود.
  • نوار عنوان: ناحیه بین هدر و محتوای برگه آرشیو است. نوار عنوان، عنوان محتوای بلاک صفحه خاص را نمایش می دهد. به عنوان مثال برای صفحه وبلاگ شما “خانه > بلاگ” نمایش داده می شود. به طور پیش فرض این تنظیمات غیر فعال است. شما می توانید از طریق پیشخوان> imperza > تنظیمات قالب > پیشرفته آن را فعال کنید.
  • محتوا: ناحیه اصلی صفحه بایگانی است. محتوای این صفحه از طریق ویرایشگر صفحه وردپرس، ویژوال کامپوزر یا سایر صفحه سازها ساخته می شود.
  • سایدبار (نوار کناری): سایدبار ها نواحی کناری صفحات هستند. شما می توانید سایدبارهایی را با ابزارک ها ایجاد و ویرایش کنید. اگر این گزینه غیر فعال است می توانید از طریق تنظیمات قالب > پیشرفته آن را فعال کنید.
  • فوتر: ناحیه پایین صفحه که به طور پیش فرض برای تمامی صفحات نمایش داده می شود.

چگونه می توان یک طرح سفارشی را به صفحه بایگانی ایمپرزا اعمال کرد؟

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

  • اضافه کردن طرح بندی شبکه را کلیک کنید. به عنوان مثال در تصویر بالا ما طرح بندی مورد نظر خودمان را با عنوان طرح ۳ ایجاد کردیم. پس از ایجاد طرح، با استفاده از المان های صفحه ساز ویژوال کامپوزر طرح خود را ایجاد کنید.

آموزش تنظیمات رنگ قالب ایمپرزا

شما می توانید تنظیمات رنگ قالب imperza را بدون دانش کد نویسی تغییر دهید و سفارشی سازی کنید. شما با تنظیم این قسمت قادر خواهید بود رنگ های از پیش تعریف شده قالب را انتخاب یا تغییر دهید.

از تنظیمات قالب> رنگ ها را انتخاب کنید. با کلیک بر روی دکمه انتخاب رنگ بندی می توانید از رنگ بندی های پیش فرض قالب ایمپرزا استفاده کنید. در این بخش رنگ بندی های متنوعی در اختیار کاربر قرار داده شده است.

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

آموزش قالب ایمپرزا - آموزش رایگان ۰ تا ۱۰۰ به صورت تصویری

 

مفهوم رنگ های بیان شده در تنظیمات رنگ بندی قالب ایمپرزا :

پس زمینه: رنگ پیش فرض پس زمینه برای تمام صفحات سایت
پس زمینه جایگزین: رنگ پس زمینه فیلدهای ورودی مثل دکمه های بارگزاری بیشتر، مطالعه بیشتر در بلاگ و پورتفولیو، جستجو و فیلتر در نمونه کارها و وبلاگ ، برای نوار فیلتر نمونه کارها ، پس زمینه عناوین تب و عنوان پلن های قیمت جدول قیمت گذاری
حاشیه : رنگ مرزی پیش فرض برای همه عناصر
عنوان : رنگ پیش فرض برای همه عناوین متن
متن: رنگ متن پیش فرض برای همه صفحات سایت
پیوند : رنگ پیوندهای متنی
لینک شناور: رنگ پیوندهای متنی در حالت هاور (در حالت اشاره موس روی لینک یا دکمه)
رنگ اصلی: رنگ اصلی، برای بسیاری از عناصر محتوا
رنگ فرعی: رنگ ثانویه ، معمولاً برای حالتهای کاور عناصر محتوا ست
متن محو شده: برای عناصر پست (تاریخ ، دسته ، برچسب ها ، نویسنده ، و غیره)، پیوندهای ابر برچسب و برخی از نمادها

آموزش سایر بخشهای تنظیمات به زودی اضافه خواهد شد…


منبع مطلب

این مطالب را نیز ببینید!

سایت لینک چیست؟ چگونه سایت لینک داشته باشیم؟

سایت لینک چیست؟ چگونه سایت لینک داشته باشیم؟

۲۷ تیر ۱۴۰۰ ۱۵ بازدید یکی از راه های افزایش نرخ کلیک Google Sitelinks است. …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *