نحوه استفاده از فونت های آیکون در ویرایشگر پست وردپرس (بدون کد)

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

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

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

ما چندین روش را به شما نشان خواهیم داد که هر کدام رویکردی کمی متفاوت از دیگری دارد. شما می توانید یکی از بهترین ها را برای شما انتخاب کنید.

روش 1: اضافه کردن فونت آیکون به ویرایشگر پست وردپرس با استفاده از آیکون های متن غنی JVM

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

ابتدا باید افزونه JVM Rich Text Icons را نصب و فعال کنید. برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.

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

با کلیک بر روی آن یک پنجره بازشو با نمادهایی برای انتخاب نمایش داده می شود. به‌طور پیش‌فرض، فونت‌های نماد محبوب Font Awesome را پیش‌فرض می‌کند.

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

یکی از مزایای استفاده از فونت های نماد این است که می توانید از CSS برای استایل دادن به آنها استفاده کنید.

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

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

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

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

این بار از فونت های درون خطی برای آیکون ها به همراه مقداری متن برای دو دکمه استفاده می کنیم.

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

روش 2. فونت های آیکون را به ویرایشگر پست وردپرس با Font Awesome اضافه کنید

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

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

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

پارامتر نام در اینجا نام فونت استفاده شده توسط Font Awesome است. می توانید کل لیست را در صفحه تقلب های Font Awesome پیدا کنید.

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

در اینجا نحوه ظاهر آن در سایت آزمایشی ما آمده است.

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

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

همچنین می‌توانید کد کوتاه را در ستون‌ها اضافه کنید تا یک ردیف از ویژگی‌ها ایجاد کنید.

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

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

احتمالاً باید چندین بار پیش‌نمایش کار خود را در یک برگه مرورگر جدید مشاهده کنید تا ببینید برای کاربران چگونه به نظر می‌رسد.

روش 3. استفاده از فونت های آیکون با صفحه سازهای وردپرس

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

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

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

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

پس از وارد کردن کلید مجوز و کلیک بر روی “تأیید کلید”، می توانید کار را در صفحه فرود خود شروع کنید.

فقط برو به SeedProd » صفحات فرود صفحه و روی دکمه افزودن صفحه فرود جدید کلیک کنید.

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

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

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

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

هنگامی که آنها را وارد کردید، برای ادامه روی دکمه “ذخیره و شروع ویرایش صفحه” کلیک کنید.

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

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

برای هدف این آموزش، بلوک آیکون را اضافه می کنیم.

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

ستون سمت چپ برای نمایش گزینه های بلوک نماد تغییر می کند. می توانید روی بخش نماد در سمت چپ کلیک کنید و تصویر نماد دیگری را انتخاب کنید یا رنگ و سبک را تغییر دهید.

راه دیگر برای استفاده از آیکون ها در SeedProd اضافه کردن بلوک Icon Box است.

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

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

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

علاوه بر این، می‌توانید متن همراه را با استفاده از نوار ابزار قالب‌بندی SeedProd قالب‌بندی کنید.

هنگامی که ویرایش صفحه خود را تمام کردید، فراموش نکنید که روی دکمه “ذخیره” در گوشه سمت راست بالای صفحه کلیک کنید.

وقتی آماده شدید، می‌توانید روی «انتشار» کلیک کنید تا صفحه زنده شود، یا می‌توانید روی «پیش‌نمایش» کلیک کنید تا مطمئن شوید که آنطور که می‌خواهید به نظر می‌رسد.

همچنین می‌توانید روی «ذخیره به‌عنوان الگو» کلیک کنید تا بتوانید از این طرح با SeedProd در قسمت‌های دیگر وب‌سایت خود استفاده مجدد کنید.

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

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

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