این برای همه اتفاق می افتد.

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

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

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

Dashicons را وارد کنید. Dashicon ها آیکون های فونتی هستند که در وردپرس 3.8 معرفی شده اند. آنها همان نمادهای عالی و جالبی هستند که هنگام ورود به داشبورد خود می بینید. آیا جالب نیست اگر بتوانید آنها را نیز به طرح زمینه خود اضافه کنید؟

خب، شما می توانید و من به شما نشان خواهم داد که چگونه.

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

اجازه دهید با یک مثال ساده شروع کنیم. Dashicon ها قبلاً از نسخه 3.8 در وردپرس گنجانده شده اند، اما شما همچنان باید آنها را اضافه کنید تا به درستی در قسمت جلویی سایت خود نمایش داده شوند. یعنی تم شما.

مرحله 1: Dashicons طرح زمینه خود را آماده کنید

برای آماده سازی تم خود، ابتدا فایل functions.php خود را باز کنید (در Appearance> یافت می شود. ویرایشگر – به طور پیش فرض فایل CSS موضوع فعلی شما را باز می کند. ادامه دهید و به دنبال آن بگردیدفایل functions.php را کلیک کنید و روی آن کلیک کنید تا آن را در ویرایشگر بارگیری کنید.)

مرحله 2: اسکریپت را در صف قرار دهید

تا آخر اسکرول کنید و این خطوط را بچسبانید. کد در پایان:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

بسیار خوب! اکنون طرح زمینه شما برای استفاده از Dashicons آماده است.

مرحله 3: افزودن Dashicon به آیتم های منو

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

به روز رسانی: Dashicon ها در ابتدا در GitHub.io در دسترس بودند، اما از آن زمان در WordPress.org در دسترس هستند.

مرحله 4:

روی آیکون مورد نظر کلیک کنید (در این مورد من نماد خانه را انتخاب کردم) و سپس روی Copy HTML کلیک کنید. یک پنجره بازشو با کد مورد نیاز به شما ارائه می دهد.

مرحله 5:

به داشبورد وردپرس خود برگردید، روی Appearance > کلیک کنید. ; منوها را انتخاب کنید و کد را درست در جایی که روی آن نوشته شده است، برچسب ناوبری بچسبانید.

اگر همچنان می‌خواهید کلمه نمایش داده شود، آن را بعد از بسته شدن براکت div تایپ کنید.

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

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

چگونه از Dashicon ها در پست متای استفاده می کنید؟

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

از آنجایی که قبلاً Dashicons را در قالب خود قرار داده اید، اکنون تنها کاری که باید انجام دهید این است که فایل style.css خود را باز کنید (یا از ویرایشگر CSS سفارشی استفاده کنید که همیشه گزینه بهتری است. پس از به‌روزرسانی طرح زمینه، تغییرات را از دست ندهید!)، انتخابگر منطبق را پیدا کنید و کد CSS را اضافه کنید.

فرض کنید می‌خواهید یک نماد جلوی نام خود یا نام نویسنده خود اضافه کنید.

مرحله 1:

ابتدا نمادی را که می‌خواهیم انتخاب می‌کنیم.

مرحله 2:

سپس روی آن کلیک کنید و این بار Copy CSS را انتخاب کنید. مجدداً، یک پنجره بازشو با کدی که باید جای‌گذاری کنید به شما می‌دهد.

مرحله 3:

اکنون style.css خود را باز کنید. و انتخابگر مربوطه را پیدا کنید، در این مورد – .entry-author. با اضافه کردن :قبل و سپس چسباندن کد CSS که از وب سایت Dashicons کپی کرده اید، نام نویسنده یک نماد زیبا در جلوی آن خواهد داشت. همچنین باید مشخص کنید که از فونت Dashicons استفاده می کنید. کد اصلاح شده به این صورت است:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

بیایید کمی استایل نیز اضافه کنیم، و اکنون کد تکمیل شده به این صورت است:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

نتیجه نهایی

خب آیا این در نهایت به نظر می رسد؟

چیزی شبیه به این:

روش های زیادی وجود دارد که می توانید از Dashicons استفاده کنید - اجازه دهید خلاقیت شما تسخیر شود و ببینید چه کاری می توانید انجام دهید.

با کنار هم قرار دادن همه آنها

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

در اینجا یک مثال اساسی از آنچه وجود دارد آورده شده است. می توانید از آنها برای ایجاد: