آموزش افزونه ابزارک های کاربردی وردپرس Astra Widgets

آموزش افزونه ابزارک های کاربردی وردپرس Astra Widgets

  • آخرین بروز رسانی: 2 ماه قبل
  • تعداد نصب های فعال:+ 300000
  • نسخه افزونه: 1.2.8
  • امتیاز کاربران وردپرس :4.3 از 5 ستاره
  • نسخه وردپرس : آزمایش شده تا 5.7.2
  • حداقل نسخه وردپرس :4.7
دانلود افزونه وردپرس Astra Widgets
لینک دانلود
اطلاعات نویسنده
سعید طاهری

11 ماه عضو افزونه جو

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

افزونه ابزارک های کاربردی وردپرس

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

افزونه ابزارک های کاربردی وردپرس
ابزارک های اضافه شده توسط افزونه

برای دستیابی به ابزارک ها از مسیر “نمایش / ابزارک ها” اقدام کنید.

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

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

به منظور استفاده از ابزارک کافی است به مسیر “نمایش / ابزارک ها” برویم. سپس ابزارک آدرس “Astra : Address” را به نوار کناری یا مکان دلخواه اضافه می کنیم. سپس اطلاعات لازم را تکمیل می کنیم.

افزودن ابزارک آدرس
  1. عنوانی که در بالای ابزارک نمایش داده می شود به عنوان مثال اطلاعات تماس.
  2. style: انتخاب استایل نمایش فیلدها. توصیه می شود حالت stack انتخاب شود تا هر فیلد در یک خط جدید نمایش داده شود. اگر گزینه inline انتخاب شود فیلد ها به صورت اینلاین و در کنار هم نمایش داده می شوند.
  3. Display icons?: با فعالسازی این گزینه آیکون های گوشی تلفن، پاکت نامه و … در کنار فیلدها نمایش داده می شود.
  4. Address : در این فیلد آدرس را وارد می کنیم.
  5. شماره تلفن را وارد می کنیم.
  6. در صورت تمایل شماره فکس را وارد می کنیم.
  7. آدرس ایمیل را وارد می کنیم.
  8. Icon Color: اگر گزینه ۳ را فعال کرده باشیم از این قسمت می توانیم رنگ آیکون ها را انتخاب کنیم.
  9. فاصله بین متن و آیکون را تنظیم می کنیم. در صورت اعمال نشدن فاصله به این قسمت مراجعه کنید.
  10. فاصله بین فیلدها را تنظیم می کنیم.

در پایان دکمه “ذخیره” را کلیک می کنیم و ابزارک آدرس در نوار کناری سایت نمایش داده می شود:

افزونه ابزارک های کاربردی وردپرس
نمایش اطلاعات تماس با استفاده از ابزارک آدرس

افزودن ابزارک لیست آیکون به نوار کناری / هدر یا فوتر سایت

دومین ابزارک از ابزارک های کاربردی آستارا، لیست آیکون یا Astra: List Icons است. با استفاده از این ابزارک می توانیم یک لیست آیکون/تصویر شامل متن، پیوند و آیکون را در نوار کناری، هدر یا فوتر سایت به نمایش بگذاریم.

توصیه می شود بخوانید: افزونه افزودن آیکون به منو وردپرس

به منظور استفاده از ابزارک کافی است به مسیر “نمایش / ابزارک ها” برویم. سپس ابزارک آدرس “Astra : List Icons” را به نوار کناری یا مکان دلخواه اضافه می کنیم. سپس اطلاعات لازم را تکمیل می کنیم.

افزودن ابزارک لیست آیکون
  1. عنوان دلخواه برای ابزارک وارد می کنیم.
  2. با استفاده از دکمه “Add Item” هر تعداد آیتم که نیاز داشته باشیم اضافه میکنیم. توضیحات کامل تر در ادامه مطلب آورده شده است.
  3. تنظیم فاصله ها: دو فیلد این قسمت برای تنظیم فاصله بین متن و آیکون، و همچنین فاصله بین آیتم های لیست است. در صورت اعمال نشدن فاصله به این قسمت مراجعه کنید.
  4. Divider : در این قسمت چهار گزینه وجود دارد:
    1. Show Divider: آیا دیوایدر (خط بین آیتم ها) نمایش داده شود یا خیر.
    2. Style: انتخاب سبک خط به صورت توپر، نقطه چین یا خط چین.
    3. Weight: وزن خط. منظور قطر یا همان پهنا و عرض خط است.
    4. Color: انتخاب رنگ دیوایدر
  5. در این قسمت سه گزینه مربوط به آیکون یا تصویر قرار دارد:
    1. Icon Color: رنگ آیکون
    2. Background Color: رنگ پس زمینه
    3. Image / Icon Size: اندازه آیکون یا تصویر.

در پایان بر روی گزینه “ذخیره” کلیک می کنیم تا ابزارک ذخیره شود.

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

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

با کلیک بر روی دکمه Add Item باکس زیر باز می شود:

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

اطلاعات مورد نیاز را به شکل زیر پر می کنیم:

List Item: متنی که در لیست نمایش داده می شود.
Link: آدرس پیوند. در صورتی که بخواهید این آیتم پیوند یا لینک باشد آدرس آن را در این قسمت وارد می کنیم.
Target: اگر آیتم به صورت لینک باشد در این قسمت صفحه مقصد را انتخاب می کنیم. گزینه Same Page پیوند را در صفحه جاری باز می کند و گزینه New Page پیوند را در یک صفحه جدید باز می کند.
No Follow: در این قسمت می توانیم خصوصیت نوفالو برای لینک را فعال یا غیرفعال کنیم.
Image / Icon: تصویر آیکون لیست که می تواند آیکون یا تصویر باشد. با کلیک بر روی گزینه Chosse Icon می توانیم لیست آیکون ها نمایش داده می شود و می توانیم از بین آنها آیکون مناسب را انتخاب کنیم.

انتخاب آیکون دلخواه

در صورتی که بجای آیکون از تصویر (Image) استفاده کنیم با کلیک بر روی دکمه Choose Image کتابخانه رسانه وردپرس باز شده و می توانیم تصویر دلخواه را انتخاب یا بارگذاری کنیم.

انتخاب تصویر

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

با استفاده از ابزارک کاربردی پروفایل شبکه های اجتماعی یا Astra: Social Profiles می توانیم لینک شبکه های اجتماعی را در نوار کناری، هدر یا فوتر سایت به اشتراک بگذاریم.

به منظور استفاده از ابزارک کافی است به مسیر “نمایش / ابزارک ها” برویم. سپس ابزارک آدرس “Astra : Social Profiles” را به نوار کناری یا مکان دلخواه اضافه می کنیم. سپس اطلاعات لازم را تکمیل می کنیم.

افزودن ابزارک پروفایل شبکه های اجتماعی
  1. در قسمت Title عنوان ابزارک را وارد می کنیم.
  2. شبکه های اجتماعی مورد نظر را با استفاده از دکمه Add Item اضافه می کنیم.

با کلیک بر روی گزینه Add Item باکس زیر باز می شود:

افزودن آیتم جدید به لیست پروفایل ها

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

  1. تنظیمات styling یا ظاهر نمایش پروفایل ها را تنظیم می کنیم:
    • Alignment: گزینه Inline پروفایل ها در کنار هم و گزینه stack زیر هم نمایش می دهد.
    • Icon Style: انتخاب سبک آیکون شامل گزینه های ساده، دایره، مربع، حاشیه دار
    • Icon Color: رنگ آیکون ها. گزینه Official Color از رنگ رسمی شبکه های اجتماعی استفاده می کند. در صورتی که گزینه گزینه Custom انتخاب شود می توان رنگ سفارشی برای آیکون ها تنظیم کرد.
    • Icon width: عرض آیکون ها
    • Space Between Icon & Test: فاصله بین تصویر و آیکون شبکه اجتماعی را تنظیم می کند. در صورت اعمال نشدن فاصله به این قسمت مراجعه کنید.
    • Space Between Social Profiles: فاصله بین آیتم ها را تنظیم می کند.

در نهایت بر روی گزینه “ذخیره” کلیک می کنیم تا تنظیمات ما ذخیره شود.

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

چند تصویر دمو نیز در ادامه مشاهده می کنید:

افزونه ابزارک های کاربردی وردپرس
افزونه ابزارک های کاربردی وردپرس
افزونه ابزارک های کاربردی وردپرس
افزونه ابزارک های کاربردی وردپرس

حل مشکل تنظیم فاصله متن و آیکون

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

تنظیم فاصله بین متن و آیکون در ابزارک آدرس:

#astra-widget-address .widget-address .widget-address-field .address-meta {
    margin-right: 10px;
}

تنظیم فاصله بین متن و آیکون در ابزارک لیست آیکون:

#astra-widget-list-icons.astra-widget-list-icons ul li .link-text {
    margin-right: 10px; // مقدار فاصله از سمت راست
}

تنظیم فاصله بین متن و آیکون در ابزارک پروفایل شبکه های اجتماعی:

#astra-widget-social-profiles .astra-widget-social-profiles-inner li > a .ast-widget-icon {
    margin-left: 5px;
}

خلاصه آموزش

در این آموزش به معرفی افزونه ابزارک های کاربردی وردپرس یا Astra Widgets پرداختیم که سه ابزارک کاربردی آدرس، لیست آیکون و پروفایل شبکه های اجتماعی را در اختیار ما قرار می دهد. به منظور استفاده از این ابزارک ها کافیست از مسیر “نمایش/ ابزارک ها” در مدیریت وردپرس اقدام کنیم و ابزارک ها را به مکان مورد نظر شامل نوار کناری، هدر یا فوتر سایت اضافه کنیم. سپس اطلاعات مورد نیاز هر ابزارک را تنظیم و ذخیره می کنیم. کار تمام است و اطلاعات تماس، لیست آیکون دلخواه یا پروفایل های شبکه های اجتماعی در مکان تعیین شده نمایش داده خواهد شد.

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

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

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