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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تفاوت بین این بلوک و بلوک “Icon” که قبلا استفاده می کردیم این است که “Icon Box” به شما امکان می دهد متن را به همراه نماد انتخابی خود اضافه کنید.

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

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

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

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

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

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

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

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

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