Энэ нь хүн бүрт тохиолддог.

Та дуртай загвараа олоод суулгаад хэдэн сарыг өөрийн сайтын үзэмжийг үзэхэд зарцуулдаг. Гэвч дараа нь хэдэн сарын дараа энэ сэдэв хуучирч эхэлдэг. Жаахан уйтгартай.

Цорын ганц асуудал бол та шинэ зүйл хайж хэдэн цаг зарцуулахыг хүсэхгүй байна. Сэдэвдээ бага зэрэг амтлагч нэмж, түүнийгээ онцолж харуулах арга байсан бол.

Та цөхрөнгөө барсандаа гараа өргөхөөс өмнө би чамд сэтгэлээ хэрхэн яаж амтлах хялбар аргыг зааж өгье. Хэт их хүчин чармайлтгүйгээр, таны сайтыг удаашруулж болзошгүй шаардлагагүй зураг нэмэхгүйгээр сэдэв.

Dashicons-г оруулна уу. Dashicon бол WordPress 3.8-д нэвтрүүлсэн үсгийн дүрс юм. Эдгээр нь таныг хяналтын самбар руугаа нэвтрэх үед харагдах гайхалтай, гайхалтай дүрсүүд юм. Хэрэв та тэдгээрийг загвар дээрээ нэмж оруулбал сайхан биш гэж үү?

За, чи чадна, би чамд яаж хийхийг харуулах болно.

Та Dashicons-г өөрийн загвартаа хэрхэн ашиглах вэ? навигацийн цэс?

Энгийн жишээгээр эхэлцгээе. Dashicons нь 3.8 хувилбараас хойш WordPress-д аль хэдийн орсон байгаа боловч та тэдгээрийг сайтынхаа нүүрэн талд зөв харуулахын тулд тэдгээрийг оруулах шаардлагатай хэвээр байна; Энэ нь таны сэдэв юм.

Алхам 1: Theme Dashicon-г бэлэн болго

Загварын Dashicon-г бэлэн болгохын тулд эхлээд functions.php файлаа нээнэ үү (Гадаад төрх> дотроос олдсон). ;Editor – анхдагчаар энэ нь таны одоогийн сэдвийн 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' ); }

За! Одоо таны загвар Dashicon-г ашиглахад бэлэн боллоо.

Алхам 3: Цэсийн зүйлд Dashicon-г нэмэх

Таны Нүүр хуудасны холбоос дээр Dashicon-г нэмье. Dashicons вэб сайт руу орж, дуртай дүрсээ сонгоно уу.

Шинэчлэлт: Dashicons-г GitHub.io дээр анх ашиглах боломжтой байсан ч дараа нь WordPress.org дээр ашиглах боломжтой болсон.

Алхам 4:

Хүссэн дүрс дээр дарж (энэ тохиолдолд би гэрийн дүрсийг сонгосон) дараа нь HTML хуулбар дээр дарна уу. Энэ нь танд хэрэгтэй код бүхий гарч ирэх цонхыг өгөх болно.

Алхам 5:

Өөрийн WordPress хяналтын самбар руу буцаж очоод Гадаад төрх > дээр дарна уу. ; Цэсүүдийг сонгоод кодыг чиглүүлэгчийн шошго гэж бичсэн хэсэгт нь оруулна уу.

Хэрэв та энэ үгийг харуулахыг хүсвэл хаалтын div хаалтын ард бичнэ үү.

Үүнийг товшино уу. нүүр хуудсаа хадгалж, ачаална уу. Таны гэрийн холбоос одоо сайхан, тод Dashicon-г харуулах ёстой.

Та үүнийг навигацийн цэсийн бүх зүйлд эсвэл зөвхөн гэрт ашиглах боломжтой. Дээрх алхмуудыг тохирох дүрсээр давтана уу. Энэ нь амархан байсан биз дээ?

Та бичлэгийн мета дээр Dashicons-г хэрхэн ашигладаг вэ?

Та цааш явж, нийтлэлийн мета дээрээ Dashicons-г нэмж эсвэл өөрөөр хэлбэл зохиогчийнх нь өмнө Dashicon-г нэмж болно. нэр, огноо, ангилал эсвэл шошго; хамаарантаны сэдэв болон түүний харуулах мэдээлэл.

Та загвардаа Dashicon-г дараалалд оруулсан тул одоо та style.css файлаа нээхэд л хангалттай (эсвэл үргэлж илүү сайн сонголт болох Custom CSS засварлагчийг ашиглах) Загвараа шинэчлэгдсэний дараа өөрчлөлтөө бүү алдаарай!), тохирох сонгогчийг олоод CSS кодыг нэмнэ үү.

Та өөрийн нэр эсвэл зохиогчийнхоо нэрний өмнө дүрс нэмэхийг хүсэж байна гэж бодъё.

Алхам 1:

Эхлээд бид хүссэн дүрсээ сонгоно.

Алхам 2:

Дараа нь үүн дээр товшоод энэ удаад CSS-ийг хуулахыг сонгоно уу. Дахин хэлэхэд, энэ нь танд буулгах код бүхий попап цонхыг өгөх болно.

Алхам 3:

Одоо өөрийн style.css-г нээнэ үү. мөн харгалзах сонгогчийг олоорой, энэ тохиолдолд – .entry-author. Dashicons вэб сайтаас хуулсан CSS кодыг өмнө нь :-г нэмээд дараа нь буулгаснаар зохиогчийн нэр өмнө нь гоё дүрстэй болно. Та мөн 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-г ашиглан өөр өөр хувилбаруудыг зааж өгч болно.Төрөл бүрийн нийтлэлд зориулсан дүрс тэмдэг, эсвэл та тэдгээрийг нийтлэлийнхээ гарчиг, виджетийн гарчиг болгон ашиглаж болно, эсвэл захиалгат буух хуудас үүсгэж байгаа бол сайтынхаа өөр өөр хуудсуудыг ялгаж болно.

Энд юу болох тухай үндсэн жишээг үзүүлэв. Та тэдгээрийг ашиглан: