എല്ലാവർക്കും ഇത് സംഭവിക്കുന്നു.

നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന ഒരു തീം നിങ്ങൾ കണ്ടെത്തുകയും അത് ഇൻസ്റ്റാൾ ചെയ്യുകയും നിങ്ങളുടെ സൈറ്റിന്റെ രൂപം ആസ്വദിക്കാൻ കുറച്ച് മാസങ്ങൾ ചെലവഴിക്കുകയും ചെയ്യുക. എന്നാൽ കുറച്ച് മാസങ്ങൾക്ക് ശേഷം, തീം പഴയതായി തോന്നുന്നു. അൽപ്പം ബോറടിക്കുന്നു.

ഏക പ്രശ്‌നം, പുതിയതെന്തെങ്കിലും തിരയാൻ രണ്ട് മണിക്കൂർ ചെലവഴിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ല എന്നതാണ്. നിങ്ങളുടെ തീമിലേക്ക് അൽപ്പം മസാലകൾ ചേർക്കാൻ ഒരു വഴിയുണ്ടെങ്കിൽ, അത് വേറിട്ടുനിൽക്കാൻ ഒരു ചെറിയ ജ്വലനം മാത്രമേ ഉണ്ടായിരുന്നുള്ളൂ.

നിങ്ങൾ നിരാശയോടെ കൈകൾ ഉയർത്തുന്നതിന് മുമ്പ്, നിങ്ങളുടെ മസാല കൂട്ടാനുള്ള എളുപ്പവഴി ഞാൻ കാണിച്ചുതരാം. തീം അധികം പരിശ്രമിക്കാതെയും നിങ്ങളുടെ സൈറ്റിനെ മന്ദഗതിയിലാക്കുന്ന അനാവശ്യ ചിത്രങ്ങൾ ചേർക്കാതെയും.

Dashicons നൽകുക. വേർഡ്പ്രസ്സ് 3.8-ൽ അവതരിപ്പിച്ച ഫോണ്ട് ഐക്കണുകളാണ് ഡാഷിക്കോണുകൾ. നിങ്ങളുടെ ഡാഷ്‌ബോർഡിൽ ലോഗിൻ ചെയ്യുമ്പോൾ നിങ്ങൾ കാണുന്ന ആകർഷണീയവും രസകരവുമായ ഐക്കണുകളാണ് അവ. നിങ്ങളുടെ തീമിലേക്ക് അവയും ചേർക്കാൻ കഴിയുമെങ്കിൽ അത് രസകരമല്ലേ?

ശരി, നിങ്ങൾക്ക് കഴിയും, അത് എങ്ങനെയെന്ന് ഞാൻ കാണിച്ചുതരാം.

നിങ്ങൾക്ക് എങ്ങനെ ഡാഷികോണുകൾ ഉപയോഗിക്കാം നാവിഗേഷൻ മെനു?

ഒരു ലളിതമായ ഉദാഹരണത്തിലൂടെ നമുക്ക് ആരംഭിക്കാം. പതിപ്പ് 3.8 മുതൽ Dashicons ഇതിനകം തന്നെ WordPress-ൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, എന്നാൽ നിങ്ങളുടെ സൈറ്റിന്റെ മുൻവശത്ത് അവ ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് അവ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്; അതായത്, നിങ്ങളുടെ തീം.

ഘട്ടം 1: നിങ്ങളുടെ തീം ഡാഷിക്കോണുകൾ തയ്യാറാക്കുക

നിങ്ങളുടെ തീം ഡാഷിക്കോണുകൾ തയ്യാറാക്കാൻ ആദ്യം നിങ്ങളുടെ functions.php ഫയൽ തുറക്കുക (രൂപം&gt-ൽ കാണപ്പെടുന്നു ;എഡിറ്റർ - സ്ഥിരസ്ഥിതിയായി ഇത് നിങ്ങളുടെ നിലവിലെ തീമിന്റെ 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' ); }

ശരി! ഇപ്പോൾ നിങ്ങളുടെ തീം ഡാഷികോണുകൾ ഉപയോഗിക്കാൻ തയ്യാറാണ്.

ഘട്ടം 3: മെനു ഇനങ്ങളിലേക്ക് ഡാഷിക്കോണുകൾ ചേർക്കുന്നു

നിങ്ങളുടെ ഹോം ലിങ്കിനായി നമുക്ക് ഒരു ഡാഷിക്കോൺ ചേർക്കാം. Dashicons വെബ്‌സൈറ്റിലേക്ക് പോയി നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന ഐക്കൺ തിരഞ്ഞെടുക്കുക.

അപ്‌ഡേറ്റ്: ഡാഷിക്കോണുകൾ യഥാർത്ഥത്തിൽ GitHub.io-ൽ ലഭ്യമായിരുന്നു, എന്നാൽ പിന്നീട് അവ WordPress.org-ൽ ലഭ്യമാക്കിയിട്ടുണ്ട്.

ഘട്ടം 4:

ആവശ്യമുള്ള ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുക (ഈ സാഹചര്യത്തിൽ ഞാൻ ഹോം ഐക്കൺ തിരഞ്ഞെടുത്തു) തുടർന്ന് HTML പകർത്തുക എന്നതിൽ ക്ലിക്ക് ചെയ്യുക. നിങ്ങൾക്കാവശ്യമായ കോഡുള്ള ഒരു പോപ്പ്-അപ്പ് വിൻഡോ ഇത് നൽകും.

ഘട്ടം 5:

നിങ്ങളുടെ വേർഡ്പ്രസ്സ് ഡാഷ്‌ബോർഡിലേക്ക് മടങ്ങുക, രൂപഭാവം > ക്ലിക്ക് ചെയ്യുക ; മെനുകൾ, നാവിഗേഷൻ ലേബൽ എന്ന് പറയുന്നിടത്ത് കോഡ് ഒട്ടിക്കുക.

നിങ്ങൾക്ക് ഇപ്പോഴും വാക്ക് കാണിക്കണമെങ്കിൽ, ക്ലോസിംഗ് ഡിവി ബ്രാക്കറ്റിന് ശേഷം അത് ടൈപ്പ് ചെയ്യുക.

ക്ലിക്ക് ചെയ്യുക. നിങ്ങളുടെ ഹോം പേജ് സംരക്ഷിച്ച് ലോഡ് ചെയ്യുക. നിങ്ങളുടെ ഹോം ലിങ്ക് ഇപ്പോൾ ഒരു നല്ല, ചടുലമായ ഡാഷിക്കോൺ പ്രദർശിപ്പിക്കും.

നിങ്ങൾക്ക് ഇത് എല്ലാ നാവിഗേഷൻ മെനു ഇനങ്ങൾക്കും അല്ലെങ്കിൽ വീടിന് വേണ്ടിയും ചെയ്യാം. പൊരുത്തപ്പെടുന്ന ഐക്കണുകൾ ഉപയോഗിച്ച് മുകളിലെ ഘട്ടങ്ങൾ ആവർത്തിക്കുക. അത് എളുപ്പമായിരുന്നു അല്ലേ?

പോസ്‌റ്റ് മെറ്റായിൽ നിങ്ങൾ എങ്ങനെയാണ് ഡാഷികോണുകൾ ഉപയോഗിക്കുന്നത്?

നിങ്ങൾക്ക് ഒരു പടി കൂടി മുന്നോട്ട് പോയി നിങ്ങളുടെ പോസ്റ്റ് മെറ്റായിലേക്ക് ഡാഷികോണുകൾ ചേർക്കാം, അല്ലെങ്കിൽ മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ രചയിതാവിന്റെ മുന്നിൽ ഡാഷികോണുകൾ ചേർക്കുക പേര്, തീയതി, വിഭാഗം അല്ലെങ്കിൽ ടാഗ്; ഇതിനെ ആശ്രയിച്ച്നിങ്ങളുടെ തീമും അത് പ്രദർശിപ്പിക്കുന്ന വിവരങ്ങളും.

നിങ്ങളുടെ തീമിൽ ഡാഷിക്കോണുകൾ നിങ്ങൾ ഇതിനകം ക്യൂവുചെയ്‌തിരിക്കുന്നതിനാൽ, നിങ്ങൾ ഇപ്പോൾ ചെയ്യേണ്ടത് നിങ്ങളുടെ style.css ഫയൽ തുറക്കുക (അല്ലെങ്കിൽ കസ്റ്റം CSS എഡിറ്റർ ഉപയോഗിക്കുക, അത് എല്ലായ്പ്പോഴും മികച്ച ഓപ്ഷനാണ്, അതിനാൽ നിങ്ങൾക്ക് നിങ്ങളുടെ തീം അപ്‌ഡേറ്റ് ചെയ്‌തുകഴിഞ്ഞാൽ മാറ്റങ്ങൾ നഷ്‌ടപ്പെടുത്തരുത്!), പൊരുത്തപ്പെടുന്ന സെലക്ടർ കണ്ടെത്തി CSS കോഡ് ചേർക്കുക.

നിങ്ങളുടെ പേരിന്റെയോ രചയിതാവിന്റെ പേരിന്റെയോ മുന്നിൽ ഒരു ഐക്കൺ ചേർക്കണമെന്ന് നമുക്ക് പറയാം.

ഘട്ടം 1:

ആദ്യം ഞങ്ങൾ ആഗ്രഹിക്കുന്ന ഒരു ഐക്കൺ തിരഞ്ഞെടുക്കാൻ പോകുന്നു.

ഘട്ടം 2:

തുടർന്ന് അതിൽ ക്ലിക്ക് ചെയ്യുക, ഇത്തവണ CSS പകർത്തുക തിരഞ്ഞെടുക്കുക. വീണ്ടും, നിങ്ങൾ ഒട്ടിക്കേണ്ട കോഡുള്ള ഒരു പോപ്പ്-അപ്പ് വിൻഡോ ഇത് നൽകും.

ഘട്ടം 3:

ഇപ്പോൾ നിങ്ങളുടെ style.css തുറക്കുക ഈ സാഹചര്യത്തിൽ - .entry-author, അനുബന്ധ സെലക്ടർ കണ്ടെത്തുക. ഡാഷിക്കോൺസ് വെബ്‌സൈറ്റിൽ നിന്ന് നിങ്ങൾ പകർത്തിയ 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; } 

അവസാന ഫലം

അപ്പോൾ എന്താണ് ഇത് അവസാനമായി കാണപ്പെടുമോ?

ഇതുപോലൊന്ന്:

നിങ്ങൾക്ക് ഡാഷികോണുകൾ ഉപയോഗിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട് - നിങ്ങളുടെ സർഗ്ഗാത്മകത നിലനിർത്തി നിങ്ങൾക്ക് എന്തുചെയ്യാനാകുമെന്ന് നോക്കാം.

എല്ലാം ഒരുമിച്ച് ചേർക്കുന്നു

മുകളിലുള്ള ഉദാഹരണങ്ങൾ മാറ്റിനിർത്തിയാൽ, വ്യത്യസ്തമായവ വ്യക്തമാക്കാൻ നിങ്ങളുടെ ബാക്കെൻഡിൽ ഡാഷികോണുകൾ ഉപയോഗിക്കാംവ്യത്യസ്‌ത പോസ്‌റ്റ് തരങ്ങൾക്കായുള്ള ഐക്കണുകൾ, അല്ലെങ്കിൽ നിങ്ങളുടെ പോസ്‌റ്റ് ശീർഷകങ്ങൾ, വിജറ്റ് ശീർഷകങ്ങൾ എന്നിവയിൽ അവ ഉപയോഗിക്കാൻ കഴിയും, അല്ലെങ്കിൽ നിങ്ങൾ ഒരു ഇഷ്‌ടാനുസൃത ലാൻഡിംഗ് പേജ് സൃഷ്‌ടിക്കുകയാണെങ്കിൽ നിങ്ങളുടെ സൈറ്റിന്റെ വിവിധ പേജുകൾ തമ്മിൽ വേർതിരിച്ചറിയാൻ കഴിയും.

എന്തിന്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ. സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് അവ ഉപയോഗിക്കാം: