جستجو کردن
Close this search box.

فهرست مطالب

How to add the social icons to the main menu

اضافه کردن آیکون اجتماعی به منوی اولیه قالب Divi

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

در ابتدا شما نیاز به پوسته زیبای Divi دارید میتوانید این قالب را از “قالب وردپرس Divi – شرکتی و تجاری” تهیه کنید

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

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

چرا آیکن های اجتماعی را به منوی اصلی اضافه کنیم؟

سایت ها و کانال های شبکه های اجتماعی در بسیاری از موارد مکمل هستند یعنی نیازی به این نیست که شما محتوایی که در وب سایت دارید را درون کانال های اجتماعی خود به اشتراک بگذارید و یا بلعکس این موضوع . به همین دلیل ترویج وب سایت خود در کانال های رسانه های اجتماعی و ترویج کانال ها درون وب سایت خود یک امر مهم برای افزایش بازخورد و ترافیک می باشد همانطور که در مباحث قبلی مطرح شد تعامل در شبکه های اجتماعی باعث رشد و یکی از مهمترین موارد سئو می باشد.

شما قطعا میخواهید مردم با ارتباط با شرکت یا نام تجاری شما به نحوی که بیشتر آشنا هستند با آنها ارتباط برقرار کنید . وب سایت شما همواره ” قلمرو ناشناخته ” برای کاربرانتان است . یکی از موانعی که باعث عدم ارتباط مستقیم شما از طریق وب سایت با کاربرانتان می شود را میتوان رسمی بودن وب سایت عنوان کرد و یا بزرگتر بودن از شبکه های اجتماعی ! به این معنی که افراد در شبکه های اجتماعی به خاطر اینکه قبلا در سیستم های عامل ادغام شده اند احساس راحتی بیشتر و در نتیجه تعامل بیشتر می کنند و این عامل بر رفتار آنها تاثیر گذار خواهد بود به طوری که خود این موضوع باعث می شود تا در شبکه های اجتماعی به گونه ای کوچه بازاری تر و خودمانی تر با مردم صحبت شود.

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

  • به راحتی در دسترس هستند
    دسترس پذیری امکانات و ابزار هایی که کابران به وجود آنها اهمیت می دهند یکی از موارد مهم سئو می باشد .
  • منوی چسبان برای بازدید کننده
    با توجه به اینکه قالب Divi منوی چسبنده را پشتیبانی می کند این باعث می شود تا هر کجای صفحه که کاربر قرار دارد آیکون های اجتماعی نیز به دنبال آن باشند .

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

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

برای حمایت از ارتباط بین وب سایت و کانال های رسانه های اجتماعی، نمایش آیکون های اجتماعی درون هدر بسیار مناسب است که اغلب باعث می شود تا بازدیدکنندگان روی آن کلیک کنند و وارد کانال اجتماعی شما شوند. هر چه بیشتر این آیکون ها نمایش داده شوند احتمال بیشتری برای ایجاد حس کنجکاوی میان آنها دارد و به احتمال زیاد آنها نهایتا روی آن کلیک خواهند کرد .

 

چگونگی اضافه کردن آیکون های اجتماعی به منوی اصلی Divi

Font Awesome را نصب کنید

اول از همه، ما باید Font Awesome را به وب سایت وردپرس خود اضافه کنیم. ما قصد داریم این کار را با اضافه کردن برخی از کد های CSS در قسمت تنظیمات تم Divi انجام دهیم.

وب سایت وردپرس خود را باز کنید، به Divi بروید> تنظیمات تم و کد زیر را در قسمت <head> قرار دهید :

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Theme Options

البته شما میتوانید این کد را درون فایل header.php خود نیز قرار دهید و یا با استفاده از “آموزش فراخوانی فایل css در وردپرس” هم به قالب خود اضافه کنید.

Font awesome باید به وب سایت شما اضافه شود . شما میتوانید با استفاده از این استایلی که اضافه کردید آیکون های بی نظیری را به وب سایت خود اضافه کنید . و در هر کجا نیاز داشته باشید به نمایش در بیاورید .

 

آموزش ساخت منوی اصلی

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

new menu

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

Primary Menu
اضافه کردن آیکون های اجتماعی

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

با کلیک بر روی این لینک وارد وب سایتی می شوید که در بالا استایل مربوط به فونت آیکون ها را اضافه کردیم.

Font Awesome website

و حال در کادر جستجو کافیست نام شبکه اجتماعی را به طور مثال جستجو کنید ” instagram ” یک مثال می باشد .

Font Awesome website instagram

اضافه کردن آیکون به صورت دستی

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

گزینه ‘پیوند دلخواه’ را باز کنید و دو فیلد ظاهر می شود: نشانی ومتن پیوند. بدیهی است، فیلد نشانی که URL را تایپ می کند که یک بازدید کننده به یکی از کانال های رسانه های اجتماعی هدایت می شود . در این مثال، ما می خواهیم به شبکه اجتماعی اینستاگرام متصل شویم پس تنها آدرس صفحه اینستاگرام را در کادر مربوط به نشانی قرار می دهیم .

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

هنگامی که روی نماد Instagram کلیک کرده اید، می بینید که وب سایت کد HTML زیر را ارائه می دهد:
<i class = “fa en-instagram” aria-hidden = “true”> </ i>
Font Awesome instagram

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

ظاهر آیکن های اجتماعی را تغییر دهید

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

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

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

Change Appearance of The Social Icons

آیکن های اجتماعی را در برگه جدید باز کنید

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

برای اینکار دو راه وجود دارد یکی اینکه در هنگام افزودن پیوند جدید گزینه ” Open link in a new window/tab   ” را در فهرست خود فعال کنیم و یا قسمت نشانی را خالی کنیم و تنها در قسمت متن پیوند با استفاده از کد html یک لینک با خاصیت باز شونده در لینک جدید بسازیم .

Open Social Icons in New Tab

توجه داشته باشید که این آموزش میتواند برای تمامی پوسته های تجاری و قالب های رایگان وردپرس اعمال شود .

با تشکر از همراهی شما – شاد باشید .

 

منبع: آپ تم  مرجع: آموزش وردپرس | قالب وردپرس دایرکتوری

5/5 - (1 امتیاز)
اشتراک
اطلاع از
guest
0 نظرات
بازخورد درون خطی
مشاهده همه نظرات
0
نظر خود را به اشتراک بگذاریدx
عضو شوید و همه محصولات را رایگان دانلود کنید!!!