محتوانوشته
اگر میخواهید ظاهر سایتتان را چشمگیرتر کنید، یکی از بهترین کارهایی که میتوانید انجام دهید استفاده از فونت آیکونها است. این آیکونها درست مثل فونتهای معمولی روی مرورگر بارگذاری میشوند، سرعت سایت شما را پایین نمیآورند، و با CSS میتوانید هر جور که دوست دارید استایلشان بدهید. جالبتر اینکه برای استفاده از Font Awesome در وردپرس، نه به دانش برنامهنویسی نیاز دارید و نه به تجربه طراحی. در این مطلب، سه روش مختلف برای افزودن Font Awesome به وردپرس را به شما نشان میدهیم.
بیشتر بخوانید: دلایل عدم نمایش فهرست در وردپرس | چرا منو در سایت وردپرسی نمایش داده نمی شود؟
فونت آیکون (Font Awesome) چیست؟
فونت آیکونها در واقع مجموعهای از تصاویر برداری هستند که به شکل فونت بارگذاری میشوند. به جای حروف یا اعداد، شما یک آیکون دریافت میکنید؛ ساده، مقیاسپذیر، و سریع. اندازهشان با CSS تنظیم میشود و برخلاف تصاویر معمولی، در هیچ وضوح نمایشی تار نمیشوند.
مزیت اصلیشان نسبت به آیکونهای تصویری، سرعت است. چون به عنوان فونت بارگذاری میشوند، سربار کمتری به مرورگر تحمیل میکنند و در نتیجه سایت شما سبکتر و سریعتر کار میکند.
از آیکونهای فونت میتوانید در بخشهای مختلف سایت استفاده کنید: سبد خرید، دکمههای دانلود، جعبههای ویژگی، منوها، شبکههای اجتماعی و هر جایی که یک آیکون میتواند محتوای شما را گویاتر کند. ضمناً این آیکونها با تقریباً تمام مرورگرهای مدرن سازگار هستند، پس نگران مشکل نمایش نباشید.
بیشتر بخوانید: پکیج جامع از افزودنی های افزونه Awesome Suppoort
روش های استفاده از فونت آیکن ها در وردپرس
روش های مختلفی برای افزودن Font Awesome به قالب وردپرس وجود دارد که ما در ادامه مطلب قصد داریم چند مورد از آنها را به شما آموزش دهیم. همراه ما باشید.
بیشتر بخوانید: آموزش ساخت حساب کاربری با المنتور | نحوه طراحی صفحه ثبت نام با المنتور پرو
1- استفاده از افزونه (سادهترین روش)
اگر شما مبتدی هستید و می خواهید از آیکون های مختلفی در پست ها و صفحات سایت خود استفاده کنید، ساده ترین و سریع ترین روش استفاده از یک افزونه وردپرس می باشد. با استفاده از این روش نیازی نیست تغییراتی در فایل های قالب خود اعمال کنید و می توانید از فونت های آیکون در هر قسمتی از سایت خود به سادگی استفاه نمائید.
یکی از بهترین افزونه ها در این خصوص، افزونه رایگان Font Awesome می باشد که به صورت رایگان در مخزن وردپرس به ثبت رسیده و هم اکنون دارای بیش از 300 هزار نصب فعال می باشد. اولین کاری که باید انجام دهید این است که افزونه Font Awesome را در سایت وردپرسی خود نصب و فعال کنید. اگر با طریق نصب افزونه آشنایی ندارید می توانید نحوه نصب افزونه وردپرس را مشاهده نمائید.
پس از فعال سازی افزونه اکنون می توانید هر پست یا صفحه وردپرس را ویرایش کنید و از کد کوتاه آیکون مانند زیر استفاده نمائید:
[icon name=”rocket”]
می توانید از این کد کوتاه همراه با متن دیگر یا به تنهایی در یک بلوک کد کوتاه اختصاصی استفاده نمائید.
پس از افزودن، می توانید پیش نمایش پست یا صفحه خود را مشاهده کنید تا ببینید آیکون ها چگونه در سایت شما به نظر می رسند. به عنوان مثال: در تصویر زیر یک نمونه فونت آیکون را مشاهده می کنید:
همچنین می توانید کد کوتاه آیکون فونت را در یک بلوک پاراگراف اضافه نمائید.
بیشتر بخوانید: نحوه استفاده از کپچا در وردپرس | چگونه کد امنیتی گوگل را در وردپرس فعال کنیم؟
2- استفاده از صفحهسازها
اکثر افزونه های صفحه ساز وردپرس دارای ویژگی فونت آیکون می باشد که شما می توانید به سادگی از آنها در صفحات مختلف سایت خود استفاده کنید.
– اضافه کردن فونت آیکون در وردپرس با صفحه ساز Beaver Builder
افزونه Beaver Builder یکی از افزونه های محبوب صفحه ساز برای وردپرس می باشد که به شما این امکان را می دهد تا به راحتی طرح بندی صفحات سفارشی را در وردپرس بدون نوشتن هیچ کدی ایجاد کنید. همچنین این افزونه دارای مجموعه ای از آیکون های زیبا و ماژول های آماده برای استفاده است که می توانید آنها را بکشید و در پست و صفحات خود رها کنید.
میتوانید گروه های آیکون ایجاد کنید، یک نماد واحد اضافه نمائید و آنها را به ردیف ها و ستون هایی با موقعیت مناسب انتقال دهید. علاوه بر آن شما همچنین می توانید رنگ بندی، پس زمینه، فاصله، حاشیه و غیره هریک از آیکون های خود را سفارشی نمائید.
– اضافه کردن فونت آیکون در وردپرس با صفحه ساز المنتور پرو
بی تردید یکی از بهترین و پرطرفدارترین افزونه صفحه ساز وردپرس جهان که محبوبیت بسیار بالای را در بین کاربران به دست آورده، افزونه المنتور پرو می باشد. این افزونه به شما این امکان را می دهد تا به سادگی فونت آیکون های مختلفی را در سایت خود قرار دهید.
تنها کاری که شما باید انجام دهید این است که یک آیکون را بکشید و در موقعیت دلخواه رها کنید. همچنین می توانید از ردیف ها، ستون ها و جداول برای ایجاد صفحات زیبا استفاده نمائید.
بیشتر بخوانید: آموزش تغییر و افزودن فونت به قالب وردپرس + 7 افزونه تغییر فونت
3- افزودن دستی Font Awesome
همچنین شما می توانید کل فهرست فونت را در یک پوشه در قالب وردپرس خود آپلود کنید و سپس از آن فونت ها در شیوه نامه خود استفاده نمائید. در ابتدا وارد وب سایت Font Awesome شوید و سپس آدرس ایمیل خود را برای دریافت کد جایگذاری فونت وارد نمائید.
پس از اینکه آدرس ایمیل خود را وارد و روی گزینه ارسال کلیک کردید، یک ایمیل همراه با یک کد برای شما ارسال می شود. سپس این کد را شما باید درست قبل از تگ </head> در فایل header.php قالب وردپرس خود کپی و جایگذاری نمائید. کد شما همانند زیر خواهد بود:
<script src=”https://use.fontawesome.com/123456abc.js”></script>
این روش بسیار ساده است، اما از طرفی می تواند باعث تداخل با سایر افزونه ها شود. یک رویکرد بهتر، بارگیری صحیح جاوا اسکریپت در وردپرس با استفاده از مکانیزم صف بندی داخلی می باشد. برای انجام دادن اینکار، شا می توانید کد زیر را در فایل functions.php قالب خود یا در یک افزونه مخصوص سایت اضافه نمائید:
function wpb_load_fa() {wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );در نهایت فایل را ذخیره کنید.
بیشتر بخوانید: افزونه فارسی پشتیبانی و ارسال تیکت | Awesome Support
جمع بندی: آموزش استفاده از آیکون Font Awesome
افزودن فونت آیکون به وردپرس یکی از سادهترین و مؤثرترین کارهایی است که میتوانید برای بهبود ظاهر سایتتان انجام دهید. در این مطلب سه روش را با هم بررسی کردیم: استفاده از افزونه برای تازهکارها، استفاده از صفحهسازهایی مثل Beaver Builder و المنتور پرو برای کار بصری، و افزودن دستی برای کسانی که کنترل بیشتری میخواهند. هر سه روش کار میکنند؛ فقط بستگی دارد که چقدر با وردپرس آشنایی دارید و چه رویکردی برای شما راحتتر است. امیدواریم این آموزش برایتان مفید بوده باشد.
نظراتمقاله
چیزی اینجا نیست!
خوشحال می شویم همین الان میتوانید اولین نظر خود را ارسال نمایید!