آموزش افزونه WD Instagram Feed و نمایش مطالب اینستاگرام در وردپرس

اگر یک وب سایت وردپرس عکاسی دارید، در مورد غذاها و آشپزی در وبلاگ وردپرس خود مطلب می نویسید، وب سایت شما در مورد سفر یا هر چیزی است که به تصویر ربط داشته باشد، به احتمال زیاد ترجیح می دهید تصاویر اکانت اینستاگرام خود را در سایت وردپرس تان نمایش دهید. افزونه WD Instagram Feed با نام جدید 10Web Social Photo Feed یکی از بهترین افزونه های اینستاگرام وردپرس برای اشتراک گذاری محتوای اینستاگرام در سایت وردپرس است که در این مقاله آن را آموزش می دهیم.

افزونه WD Instagram Feed یک ابزار عالی برای افزایش تعداد فالوورهای اکانت اینستاگرام شما است زیرا بازدیدکنندگان سایت را روانه پیج اینستاگرام تان می کند. از طرف دیگر با نمایش محتوای اینستاگرام در سایت باعث افزایش ترافیک وب سایت نیز می شود. همچنین می توانید هنگام اضافه کردن تصاویر به اینستاگرام به صورت خودکار گالری وب سایت تان را نیز بروزرسانی کنید.

نصب و استفاده از افزونه WD Instagram Feed بسیار آسان است و در عرض چند دقیقه می توانید این افزونه را نصب کرده، یک فید راه اندازی کنید و آن را در وب سایت خود نمایش دهید.

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

در این آموزش افزونه WD Instagram Feed را بررسی کرده و نحوه استفاده از آن را توضیح خواهیم داد.

آموزش افزونه WD Instagram Feed و نحوه نمایش محتوای اینستاگرام در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Instagram Feed در پیشخوان وردپرس اضافه می شود.

اولین گام برای ساخت فید، پیکربندی توکن دسترسی اینستاگرام است. برای این کار در پیشخوان وردپرس به مسیر Instagram Feed » Settings بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.

روی دکمه Connect an Instagram Account کلیک کنید.

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

به محض ورود به اینستاگرام و دریافت توکن دسترسی، حساب کاربری مورد نظر شما در قسمت Accounts ظاهر شده و می توانید با کلیک بر روی دکمه با آیکون فلش رو به پایین، آن را مشاهده کرده یا تغییر دهید.

با کلیک بر روی باکس Advanced می توانید تنظیمات زیر را پیکربندی کنید:

Check for new posts every (min): در این قسمت می توانید مشخص کنید که افزونه WD Instagram Feed هر چند وقت یکبار اکانت اینستاگرام شما را برای پیدا کردن پست های جدید چک کند. پس از سپری شدن این زمان، افزونه پست های جدید را از اکانت اینستاگرام شما درخواست کرده و در فید فچ می کند.

Reset cache with Instagram data: برای داشتن بهترین عملکرد، افزونه داده های فید را کش کرده و آنها را از کش لود می کند. در این قسمت می توانید کش را به صورت دستی پاک کنید. توجه داشته باشید که در هر صورت پست های جدید اکانت اینستاگرام شما بر اساس آنچه که در Check for new posts every (min) تعیین کرده اید، به طور خودکار فچ می شوند.

Minimal role to add and manage Feeds or Themes: با استفاده از این گزینه می توانید نقش کاربری که به افزونه WD Instagram Feed دسترسی خواهد داشت را انتخاب کنید. نقش های کاربر در سطوح بالاتر همچنین قادر به تغییر و مدیریت فیدها خواهند بود.

CSS سفارشی به شما امکان می دهد کد CSS مورد نظر خود برای فیدهای اینستاگرام را بنویسید. این گزینه درصورت نیاز به ایجاد تغییرات خاص در استایل فیدها می تواند کمک کننده باشد. با Javascript سفارشی می توانید اسکریپت های اضافی را اعمال کنید.

در صورت تمایل به حذف کامل افزونه WD Instagram Feed ، می توانید آن را با استفاده از دکمه  Uninstall حذف کنید. توجه به این نکته مهم است که با حذف نصب افزونه، همه فیدها حذف می شوند. قبل از اقدام مطمئن شوید که اطلاعات مهمی ندارید.

در ادامه، نحوه ساختن یک فید جدید در افزونه WD Instagram Feed را آموزش می دهیم.

آموزش ساخت فید اینستاگرام در افزونه WD Instagram Feed

برای ساخت اولین فید به زیرمنوی Feeds افزونه WD Instagram Feed بروید. برای این کار در پیشخوان وردپرس به مسیر Instagram Feed » Feeds بروید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

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

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

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

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

تب Feed Settings

قسمت اول صفحه تنظیمات فید، انتخاب طرح بندی است. در نسخه رایگان افزونه، طرح بندی های تصاویر بندانگشتی (Thunbnails) و مرورگر تصویر (Image Browser) در اختیار کاربران قرار داده شده است. با ارتقاء افزونه می توانید طرح بندی های Masonary و Blog Style را نیز داشته باشید.

برای انتخاب محتوای فید اینستاگرام باکس کشویی Media یا رسانه را باز کنید. در این قسمت می توانید فیدهای تصاویر و ویدئوهای اکانت اینستاگرام تان را نمایش دهید.

شما می توانید ترتیب قرارگیری رسانه ها را با استفاده از تنظیمات زیر سفارشی سازی کنید.

Sort Media By: این گزینه به شما اجازه می دهد نوع پارامتری که می خواهید تصاویر و ویدئوها براساس آن مرتب شوند را مشخص کنید. شما می توانید یکی از پارامترهای تاریخ (Date)، لایک ها (Likes)، کامنت ها (Comments) و تصادفی (Random) را انتخاب کنید.

Sorting Order: این گزینه به شما امکان می دهد جهت قرار گیری رسانه اینستاگرام روی فید را مشخص کنید. شما می توانید جهت را به صورت صعودی (Ascending) یا نزولی (Descending) مشخص کنید.

Action OnClick: بخش Media در تنظیمات فید به شما اجازه انتخاب عملی که بعد از کلیک کردن کاربران روی یک تصویر اتفاق می افتد را می دهد. افزونه WD Instagram Feed با گزینه Action OnClick چهار عملیات مختلف را به صورت زیر ارائه می دهد:

• Open Lightbox: با کلیک کردن بر روی پست، یک پنجره پاپ آپ باز می شود که نسخه بزرگتری از تصویر یا ویدئو مورد نظر را نشان می دهد. این پنجره امکان جابجا شدن بین دیگر رسانه های فید را می دهد.
• Redirect To Instagram: این گزینه کاربران را هنگام کلیک روی یکی از آیتم های فید ، به همان پست در اینستاگرام هدایت می کند.
• Custom Redirect: اگر این گزینه را انتخاب کنید باید در قسمت Redirect URL که با انتخاب این گزینه ظاهر می شود، یک لینک قرار دهید. کاربران بعد از کلیک روی یکی از پست های فید به این صفحه هدایت می شوند.
• Do Nothing: اگر این گزینه را انتخاب کنید با کلیک بر روی پست های فید هیچ اتفاقی نمی افتد.

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

قسمت های بعدی در صفحه تنظیمات فید افزونه WD Instagram Feed باکس های Advanced و Layout and Pagination هستند که در ادامه آموزش به بررسی آنها می پردازیم.

باکس کشویی مربوط به قسمت Advanced را باز کنید.

Theme: این گزینه مربوط به نسخه Pro افزونه WD Instagram Feed است. در نسخه پرمیوم افزونه می توانید قالب مورد نظر خود را برای استایل دهی ظاهر فید اینستاگرام انتخاب کنید. شما می توانید قالب را ویرایش کنید یا از قسمت Instagram Feed » Theme یک قالب جدید بسازید.

Show Feed Header: با فعال کردن این گزینه بخش هدر فید اینستاگرام شما نمایش داده می شود که شامل عنوان فید و تصویر شاخصی است که انتخاب کرده اید.

Show User Data: اگر این گزینه فعال شود، جزئیات دیگری از اکانت انتخاب شده در فید اینستاگرام شما نمایش داده خواهد شد.

شما می توانید دکمه های Follow On Instagram برای نمایش دکمه Follow در صفحه فید و امکان دادن به کاربران برای فالوو کردن اکانت اینستاگرام شما و Show Media Caption برای نمایش کپشن رسانه را فعال کنید که گزینه آخر مربوط به نسخه Pro افزونه است.

باکس بعدی که در صفحه تنظیمات فید افزونه WD Instagram Feed قرار دارد Layout and Pagination است. در ادامه آموزش به بررسی این باکس می پردازیم.

پنجره کشویی مربوط به باکس Layout and Pagination را باز کنید.

New Media Loading: در این قسمت روشی که هنگام بارگیری تصاویر و فیلم های بیشتر در فید اینستاگرام استفاده می شود را مشخص می کنید. شما می توانید یکی از گزینه های Pagination، Load More Button و None را انتخاب کنید. Infinite Scroll مربوط به نسخه Pro افزونه WD Instagram Feed است.

Number of Columns: در این قسمت می توانید تعداد ستون هایی که برای ردیف سازی رسانه های اینستاگرام در طرح بندی های بند انگشتی و Masonry را مشخص کنید.

Number of Images/Videos: در این قسمت می توانید تعداد رسانه هایی که در بارگذاری اولیه فید نمایش داده می شود را مشخص کنید.

Number of New Media: در این قسمت می توانید تعداد پست هایی که بعد از کلیک کاربر روی دکمه Load More یا اسکرول بی پایان ظاهر می شود را مشخص کنید.

Combine and Sort Again After Loading More: اگر این گزینه را فعال کنید رسانه های تازه بارگذاری شده و موجود با هم مخلوط شده و مطابق تنظیمات Sort Media با یکدیگر مجدداً مرتب می شوند.

Make Layout Not Responsive: اگر این گزینه انتخاب شود، طرح بندی فید به نمایش تک ستونی روی صفحه های کوچک تبدیل نمی شود. بلکه عرض فید کوچک شده و تعداد ستون ها ثابت باقی می ماند.

افزونه WD Instagram Feed یک باکس پاپ آپ دارد که هنگامی که کاربر روی یک عکس یا فیلم در فید کلیک می کند، ظاهر می شود. این باکس نسخه بزرگتری از عکس یا فیلم را نشان می دهد. همچنین ویدئو ها را پلی کرده و بین پست ها ناوبری می نماید. در ادامه آموزش به بررسی تب Lightbox Settings در افزونه WD Instagram Feed می پردازیم.

تب Lightbox Settings

قبل از شروع تنظیمات این بخش مطمئن شوید که در صفحه تنظیمات فید گزینه Action OnClick را روی Open Lightbox تنظیم کرده اید.

گزینه های تنظیمات لایت باکس به دو بخش اصلی General و Advanced تقسیم بندی می شوند.

General

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

Advanced

با بخش پیشرفته تنظیمات لایت باکس می توانید کنترل کامل آنچه که در باکس پاپ آپ تصاویر و ویدیوهای فید اینستاگرام نشان داده شده است را کنترل کنید. فقط چند مرحله طول می کشد تا ظاهر لایت باکس دقیقاً مطابق میل شما ظاهر شود.

گزینه های پیشرفته Lightbox به شما امکان می دهد:

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

و بسیاری گزینه های دیگر که برخی از آنها در نسخه رایگان قابل دسترسی هستند و برای دسترسی به بخشی دیگر باید نسخه Pro افزونه را خریداری کنید.

تب Conditional Filters تنها در نسخه پرمیوم افزونه WD Instagram Feed قابل دستیابی است.

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

انتشار فید در افزونه WD Instagram Feed

با استفاده از افزونه WD Instagram Feed  می توانید فیدهای خود را با 3 روش مختلف زیر منتشر کنید:

• در یک نوشته یا برگه وردپرس
• به عنوان ابزارک
• در یک قالب سفارشی با یک تابع PHP

انتشار فید در نوشته ها یا برگه های وردپرس

برای انتشار فیدهای اینستاگرام با این روش یک نوشته یا برگه جدید بسازید یا یکی از نوشته ها یا برگه های موجود را به حالت ویرایش باز کنید.

در ویرایشگر کلاسیک وردپرس از قسمت بالای ویرایشگر روی دکمه Add Instagram Feed  کلیک کنید. پس از آن، فید مورد نظر خود را برای انتشار انتخاب کرده و روی دکمه Insert کلیک نمایید.

پس از آن شورت کد افزونه Instagram Feed به محتوای نوشته یا برگه شما اضافه می شود.

در ویرایشگر گوتنبرگ وردپرس روی دکمه + که مربوط به اضافه کردن بلوک ها است کلیک کنید. سپس بلوک Instagram WD را پیدا کرده و روی آن کلیک نمایید.

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

از طرف دیگر می توانید شورت کد فیدها را از پیشخوان وردپرس در مسیر Instagram Feed » Feeds و در زیر ستون Shortcode کپی کرده و آن را در محتوای نوشته یا برگه وب سایت وردپرسی خود قرار دهید. توجه داشته باشید که در ویرایشگر گوتنبرگ باید شورت کد را در بلوک کد کوتاه قرار دهید.

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

در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید. ابزارک Instagram WD Widget را کشیده و در هر یک از نواحی ابزارک ها که مایلید فید خود را در آن نشان دهید، رها کنید.

پس از اضافه کردن ابزارک به ناحیه ابزارک ها باکسی مشابه شکل زیر ظاهر می شود.

عنوانی را برای فید اینستاگرام خود وارد کنید ، سپس با استفاده از کادر کشویی Feed  فیدی که می خواهید انتشار دهید را انتخاب کنید. حتما تعداد ستون ها و همچنین تعداد تصاویر را برای نمایش در فید اینستاگرام خود مشخص کنید.

همچنین می تواند ویژگی های نمایش لایک ها و کامنت ها و فعال کردن بارگذاری تصاویر جدید را فعال کرده و آنها را با فید نمایش دهید.

انتشار با استفاده از تابع PHP

شما می توانید ، فیدهای اینستاگرام را بر روی قالب های اختصاصی PHP با استفاده از توابع PHP شان منتشر کنید. برای این کار کافیست تابع PHP فید خود را از مسیر Instagram Feed » Feeds کپی کرده و آن را در بخش مورد نیاز قالب سفارشی خود پیست کنید.

در قسمت بعدی آموزش نشان خواهیم داد که چگونه با استفاده از افزونه WD Instagram Feed قابلیت فید هشتگ را در وب سایت وردپرسی خود ایجاد کنید.

پیکربندی توکن فید هشتگ

در 11 دسامبر سال 2018 ، اینستاگرام تغییرات قابل توجهی در API خود ایجاد کرده و ادغام فید در وب سایتها را تغییر اساسی داد. براساس تغییرات جدید اینستاگرام، فیدهای هشتگ برای پروفایل های شخصی کاهش پیدا کرده و در حال حاضر برای نمایش فیدهای هشتگ در وب سایت های شخص ثالث، باید یک پروفایل تجاری داشته باشید. توجه داشته باشید که استفاده از فید اکانت های تجاری تنها در نسخه Pro افزونه WD Instagram Feed در دسترس است.

برای پیکربندی توکن فید هشتگ، ابتدا جدیدترین نسخه افزونه WD Instagram Feed Pro را نصب کنید. سپس پروفایل اینستاگرام خود را به روش زیر به پروفایل تجاری تغییر دهید.

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

2- در مرحله دوم وارد اکانت فیسبوک خود شده و به صفحه تنظیمات بروید. سپس وارد بخش Instagram شوید.

3- در این قسمت روی دکمه Log in که در کنار بخش Add Instagram to get started قرار دارد، کلیک کنید. وارد اکانت اینستاگرام مورد نظر خود شوید.

4- پس از تأیید حساب، صفحه را مجدد بارگذاری کنید.

5- روی دکمه Get Started که در کنار بخش Switch to a Business Profile قرار دارد، کلیک کنید. ممکن است کمی طول بکشد تا دکمه Get Started ظاهر شود.

6- یک پنجره بازشو ظاهر می شود. روی دکمه Continue کلیک کرده و طبق دستورالعمل پیش بروید تا پروفایل تجاری اینستاگرام شما راه اندازی شود. وقتی پیکربندی پروفایل تجاری با موفقیت به پایان رسید، به پیشخوان وردپرس وب سایت خود برگشته و به مسیر Instagram Feed » Settings بروید. در صفحه تنظیمات افزونه WD Instagram Feed وارد اینستاگرام خود شوید. علاوه بر این ، شما باید با کلیک روی دکمه Log In with Facebook، وارد فیس بوک شوید.

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

دانلود افزونه