WordPress හි Dashicons භාවිතා කරන්නේ කෙසේද - පියවරෙන් පියවර මාර්ගෝපදේශය

 WordPress හි Dashicons භාවිතා කරන්නේ කෙසේද - පියවරෙන් පියවර මාර්ගෝපදේශය

Patrick Harvey

එය සෑම කෙනෙකුටම සිදු වේ.

ඔබ කැමති තේමාවක් සොයා, ඔබ එය ස්ථාපනය කර ඔබේ වෙබ් අඩවියේ පෙනුම භුක්ති විඳීමට මාස කිහිපයක් ගත කරන්න. නමුත් මාස කිහිපයකට පසු, තේමාව යල් පැන ගිය බවක් දැනෙන්නට පටන් ගනී. ටිකක් කම්මැලියි.

එකම ගැටලුව නම්, ඔබට අලුත් දෙයක් සෙවීමට පැය කිහිපයක් ගත කිරීමට අවශ්‍ය නොවීමයි. ඔබේ තේමාවට කුළු බඩු ටිකක් එකතු කිරීමට ක්‍රමයක් තිබුනේ නම්, එය කැපී පෙනෙන කිරීමට කුඩා දැවිල්ලක් තිබේ නම්.

ඔබ බලාපොරොත්තු සුන්වීමෙන් ඔබේ දෑත් ඉහළට විසි කිරීමට පෙර, මම ඔබට ඔබේ රසකාරක කිරීමට පහසු ක්‍රමයක් පෙන්වන්නම්. වැඩි උත්සාහයකින් තොරව තේමාව, සහ ඔබේ වෙබ් අඩවිය මන්දගාමී කළ හැකි අනවශ්‍ය පින්තූර එකතු නොකර.

Dashicons ඇතුළු කරන්න. Dashicons යනු WordPress 3.8 හි හඳුන්වා දුන් අකුරු අයිකන වේ. ඒවා ඔබ ඔබේ උපකරණ පුවරුවට ලොග් වූ විට ඔබ දකින නියම සහ සිසිල් අයිකන වේ. ඔබට ඒවා ඔබේ තේමාවට ද එක් කළ හැකි නම් එය රසවත් නොවේද?

හොඳයි, ඔබට එය කළ හැකි අතර මම ඔබට පෙන්වන්නම්.

ඔබට Dashicons භාවිතා කළ හැක්කේ කෙසේද? navigation menu?

සරල උදාහරණයකින් පටන් ගනිමු. 3.8 අනුවාදයේ සිට Dashicons දැනටමත් WordPress හි ඇතුළත් කර ඇත, නමුත් ඒවා ඔබේ වෙබ් අඩවියේ ඉදිරිපස කෙළවරේ නිසි ලෙස ප්‍රදර්ශනය කිරීමට ඔබ තවමත් ඒවා ඇතුළත් කළ යුතුය; එනම්, ඔබේ තේමාවයි.

පියවර 1: ඔබේ තේමා Dashicons සූදානම් කරන්න

ඔබේ තේමා Dashicons සූදානම් කිරීමට පළමුව ඔබේ functions.php ගොනුව විවෘත කරන්න (පෙනුම> හි දක්නට ලැබේ ;සංස්කාරක - පෙරනිමියෙන් එය ඔබගේ වත්මන් තේමාවේ 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: මෙනු අයිතමවලට Dashicons එකතු කිරීම

අපි ඔබේ මුල් පිටුව සබැඳිය සඳහා Dashicon එකක් එකතු කරමු. Dashicons වෙබ් අඩවිය වෙත ගොස් ඔබ කැමති නිරූපකය තෝරන්න.

යාවත්කාලීන කිරීම: Dashicons GitHub.io හි මුලින් ලබා ගත හැකි නමුත්, පසුව ඒවා WordPress.org හි ලබා ගත හැක.

බලන්න: 2023 දී හොඳම Unbounce විකල්ප 9 (වර්ඩ්ප්‍රෙස් + දැරිය හැකි විකල්ප ඇතුළත්)

පියවර 4:

අවශ්‍ය අයිකනය මත ක්ලික් කරන්න (මෙම අවස්ථාවේදී මම නිවසේ නිරූපකය තෝරා ගත්තෙමි) ඉන්පසු HTML පිටපත් කරන්න ක්ලික් කරන්න. එය ඔබට අවශ්‍ය කේතය සහිත උත්පතන කවුළුවක් ලබා දෙනු ඇත.

පියවර 5:

ඔබේ වර්ඩ්ප්‍රෙස් උපකරණ පුවරුව වෙත ආපසු යන්න, පෙනුම > මත ක්ලික් කරන්න ; මෙනු සහ සංචාලන ලේබලය කියන තැනම කේතය අලවන්න.

බලන්න: 2023 සඳහා හොඳම වර්ඩ්ප්‍රෙස් රැකියා මණ්ඩල තේමා 6 (සංසන්දනය)

ඔබට තවමත් වචනය පෙන්වීමට අවශ්‍ය නම්, වසන div වරහනට පසුව එය ටයිප් කරන්න.

ක්ලික් කරන්න. ඔබගේ මුල් පිටුව සුරකින්න සහ පූරණය කරන්න. ඔබගේ නිවසේ සබැඳිය දැන් ලස්සන, හැපෙනසුළු Dashicon එකක් පෙන්විය යුතුය.

ඔබට මෙය සියලු සංචාලන මෙනු අයිතම සඳහා හෝ නිවස සඳහා පමණක් කළ හැක. ගැලපෙන අයිකන සමඟ ඉහත පියවර නැවත කරන්න. එය පහසුයි නේද?

පසු මෙටා තුළ ඔබ Dashicons භාවිතා කරන්නේ කෙසේද?

ඔබට තවත් පියවරක් ඉදිරියට ගොස් ඔබේ පළ කිරීම් මෙටා වෙත Dashicons එක් කළ හැකිය, නැතහොත් වෙනත් වචනවලින් කිවහොත් කර්තෘගේ ඉදිරියෙන් Dashicons එක් කරන්න. නම, දිනය, කාණ්ඩය හෝ ටැගය; මත පදනම් වෙමින්ඔබේ තේමාව සහ එය පෙන්වන තොරතුරු.

ඔබ දැනටමත් ඔබේ තේමාව තුළ Dashicons පෙළගස්වා ඇති බැවින්, ඔබ දැන් කළ යුත්තේ ඔබේ 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 භාවිත කළ හැකි ක්‍රම බොහොමයක් තිබේ - ඔබේ නිර්මාණශීලීත්වය අල්ලාගෙන ඔබට කළ හැකි දේ බලන්න.

සියල්ල එකතු කිරීම

ඉහත උදාහරණ හැරුණු විට, ඔබට ඔබේ පසුපෙළේ ඇති Dashicons භාවිතා කළ හැක.විවිධ පළ කිරීම් වර්ග සඳහා අයිකන, හෝ ඔබට ඒවා ඔබේ පළ කිරීම් මාතෘකා, විජට් මාතෘකා තුළ භාවිතා කළ හැකිය, නැතහොත් ඔබ අභිරුචි ගොඩබෑමේ පිටුවක් නිර්මාණය කරන්නේ නම්, ඔබට ඔබේ වෙබ් අඩවියේ විවිධ පිටු අතර වෙනස හඳුනාගත හැකිය.

මෙන්න කුමක් සඳහා මූලික උදාහරණයක් ඔබට ඒවා නිර්මාණය කිරීමට භාවිතා කළ හැක:

Patrick Harvey

පැට්‍රික් හාවි යනු කර්මාන්තයේ වසර 10 කට වැඩි පළපුරුද්දක් ඇති පළපුරුදු ලේඛකයෙක් සහ ඩිජිටල් අලෙවිකරුවෙකි. ඔහුට බ්ලොග්කරණය, සමාජ මාධ්‍ය, ඊ-වාණිජ්‍යය සහ වර්ඩ්ප්‍රෙස් වැනි විවිධ මාතෘකා පිළිබඳ විශාල දැනුමක් ඇත. සබැඳිව ලිවීමට සහ මිනිසුන්ට සාර්ථක වීමට උපකාර කිරීමට ඇති ඔහුගේ ආශාව ඔහුගේ ප්‍රේක්ෂකයින්ට වටිනාකමක් ලබා දෙන තීක්ෂ්ණ බුද්ධිය සහිත සහ ආකර්ෂණීය පළ කිරීම් නිර්මාණය කිරීමට ඔහුව පොලඹවා ඇත. ප්‍රවීණ වර්ඩ්ප්‍රෙස් පරිශීලකයෙකු ලෙස, පැට්‍රික් සාර්ථක වෙබ් අඩවි ගොඩ නැගීමේ අභ්‍යන්තර හා පිටස්තර ගැන හුරුපුරුදු වන අතර, ඔහු මෙම දැනුම ව්‍යාපාරවලට සහ පුද්ගලයන්ට ඔවුන්ගේ සබැඳි පැවැත්ම තහවුරු කිරීමට උපකාර කරයි. සවිස්තරාත්මක ඇසකින් සහ විශිෂ්ටත්වය සඳහා නොසැලෙන කැපවීමකින්, පැට්‍රික් ඩිජිටල් අලෙවිකරණ කර්මාන්තයේ නවතම ප්‍රවණතා සහ උපදෙස් තම පාඨකයන්ට ලබා දීමට කැපවී සිටී. ඔහු බ්ලොග්කරණය නොකරන විට, පැට්‍රික් නව ස්ථාන ගවේෂණය කිරීම, පොත් කියවීම හෝ පැසිපන්දු ක්‍රීඩා කිරීම සොයා ගත හැකිය.