WordPress തീമുകൾക്കുള്ള കോഡുകളുള്ള ഐക്കണുകൾ. വിഭാഗവും പേജ് ഐക്കണുകളും പ്ലഗിൻ. ഒരു ഐക്കൺ സ്വമേധയാ വരയ്ക്കുന്നു

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

ഇതേ തത്വങ്ങൾ വെബ്സൈറ്റുകൾക്കും ബാധകമാണ്. ഒരു ഐക്കൺ പ്രദർശിപ്പിക്കുന്നത് നിങ്ങളുടെ സൈറ്റ് നാവിഗേറ്റ് ചെയ്യാൻ ഉപയോക്താക്കളെ സഹായിക്കും. ഇത് ഉപയോക്തൃ ലോയൽറ്റി മെച്ചപ്പെടുത്തുകയും സൈറ്റിനെ കൂടുതൽ ആകർഷകമാക്കുകയും ചെയ്യുന്നു.

എന്നിരുന്നാലും, CMS-ൽ അത്തരം ഐക്കണുകളുടെ ഔട്ട്പുട്ട് WordPress പോലെഒരു പ്രശ്നമായി മാറിയേക്കാം. നിങ്ങളുടെ സൈറ്റ് വേർഡ്പ്രസ്സിൽ നിർമ്മിച്ചതാണെങ്കിൽ, ഈ ലേഖനത്തിൽ ഐക്കണുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള എളുപ്പവഴി ഞങ്ങൾ നിങ്ങൾക്ക് കാണിച്ചുതരാം. വേർഡ്പ്രസ്സ് മെനു.

ആമുഖം

WordPress-ൽ ഐക്കണുകൾ ചേർക്കുന്നത് വളരെ എളുപ്പമാണ് വേർഡ്പ്രസ്സ് പ്ലഗിൻമെനു ഐക്കണുകൾ എന്ന് വിളിക്കുന്നു. ആദ്യം, ഇത് ഇൻസ്റ്റാൾ ചെയ്ത് സജീവമാക്കുക.

ഇപ്പോൾ മെനുവിലേക്ക് ഐക്കണുകൾ ചേർക്കാൻ എല്ലാം തയ്യാറാണ്.

ഒരു ഐക്കൺ ചേർക്കുന്നു

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

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

തുടർന്ന് ഓരോ ഘടകത്തിനും ഞങ്ങൾ ഒരു ഐക്കൺ ചേർക്കുന്നു. ആദ്യം, നമ്മുടെ മെനു ഇനങ്ങളിലൊന്ന് വികസിപ്പിക്കാം. അവിടെ നിങ്ങൾ ടെക്സ്റ്റുള്ള ഒരു ലിങ്ക് കാണും ഐക്കൺ: ഐക്കൺ തിരഞ്ഞെടുക്കുക. ഒരു ഐക്കൺ തിരഞ്ഞെടുക്കുന്നത് ആരംഭിക്കാൻ "ഐക്കൺ തിരഞ്ഞെടുക്കുക" എന്നതിൽ ക്ലിക്ക് ചെയ്യുക. വേർഡ്പ്രസ്സ് മീഡിയ ലൈബ്രറി പോലെയുള്ള ഒരു വിൻഡോ ഇവിടെ കാണാം.

നിലവിൽ എഴുതുന്ന സമയത്ത്, പ്ലഗിൻ 3 ഐക്കൺ ഫോണ്ട് ലൈബ്രറികൾ നൽകുന്നു, ഇവ Dashicons, Genericons, FontAwesome എന്നിവയാണ്.

ഏതൊക്കെ ഐക്കണുകൾ ഉപയോഗിക്കണമെന്ന് ഞങ്ങൾക്ക് തിരഞ്ഞെടുക്കാമെങ്കിലും, ഓരോന്നിനും അതിൻ്റേതായ ശൈലി, വലുപ്പം മുതലായവ ഉള്ളതിനാൽ അവ ഒരു ലൈബ്രറിയിൽ നിന്ന് തിരഞ്ഞെടുക്കുന്നതാണ് നല്ലത്. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, നിങ്ങൾ FontAwesome ഫോണ്ട് ഉപയോഗിക്കുകയാണെങ്കിൽ, അത് സൈറ്റിലുടനീളം ഉപയോഗിക്കുക. ഇത് ഡിസൈനിൻ്റെ സമഗ്രത നിലനിർത്തുകയും ഐക്കണുകൾ കൂടുതൽ "ഏകീകൃതമായി" കാണുകയും ചെയ്യും.

നിങ്ങൾ ഒരു ഐക്കൺ തിരഞ്ഞെടുത്തുകഴിഞ്ഞാൽ, വലതുവശത്തുള്ള പാനലിൽ നിങ്ങൾക്ക് അത് പ്രിവ്യൂ ചെയ്യാം. കൂടാതെ ഓൺ വലത് പാനൽനിങ്ങൾക്ക് നിരവധി ക്രമീകരണങ്ങൾ ചെയ്യാൻ കഴിയും. മൂലകത്തിൻ്റെ പേരിന് മുമ്പോ ശേഷമോ നിങ്ങൾക്ക് ഒരു ഐക്കൺ സ്ഥാപിക്കാം, ഫോണ്ട് വലുപ്പം വ്യക്തമാക്കുക, കൂടാതെ സജ്ജീകരിക്കുക ലംബ വിന്യാസം. നിങ്ങൾ ക്രമീകരണങ്ങൾ പൂർത്തിയാക്കിയ ശേഷം, തിരഞ്ഞെടുക്കുക ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, ബാക്കിയുള്ള മെനു ഇനങ്ങൾക്കായി നിങ്ങൾക്ക് സുരക്ഷിതമായി ഐക്കണുകൾ സജ്ജീകരിക്കുന്നത് തുടരാം.

നിഗമനങ്ങൾ

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

നിങ്ങളുടെ വേർഡ്പ്രസ്സ് മെനുവിലേക്ക് ഐക്കണുകൾ ചേർക്കാൻ ഈ ലേഖനം നിങ്ങളെ സഹായിച്ചിട്ടുണ്ടെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു. ഇംപ്രഷനുകൾ പങ്കിടാൻ ശ്രമിക്കുക.

എല്ലാ ചോദ്യങ്ങൾക്കും ഫീഡ്‌ബാക്കിനും, ദയവായി ചുവടെയുള്ള അഭിപ്രായങ്ങളിൽ എഴുതുക.

സാധ്യമെങ്കിൽ, നിങ്ങളുടെ ഇഷ്ടാനുസരണം നക്ഷത്രങ്ങളുടെ എണ്ണം ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രിയപ്പെട്ട പോസ്റ്റുകൾ റേറ്റുചെയ്യാൻ മറക്കരുത്.

ഹലോ സുഹൃത്തുക്കളെ!

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

പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യുന്നു

ഇത് ഇൻസ്റ്റാൾ ചെയ്യുന്നത് വളരെ ലളിതമാണ്. ഇത് വേർഡ്പ്രസ്സ് ശേഖരത്തിൽ സ്ഥിതി ചെയ്യുന്നതിനാൽ, നിങ്ങൾക്ക് അഡ്മിൻ പാനൽ കമാൻഡുകൾ തിരഞ്ഞെടുക്കാം പ്ലഗിനുകൾ - പുതിയത് ചേർക്കുകവയലിലും തിരയുകഎഴുതുക മെനു ഐക്കണുകൾ.

ഉടനടി ആവശ്യമായ ഫയൽപ്ലഗിൻ കണ്ടെത്തുകയും ഇൻസ്റ്റാൾ ചെയ്യുകയും സജീവമാക്കുകയും ചെയ്യും.

വേർഡ്പ്രസ്സ് മെനു എങ്ങനെ മാറ്റാം

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

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

ഞങ്ങൾ ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുക, ഐക്കണുകളുടെ ഒരു ലൈബ്രറി നമ്മുടെ മുന്നിൽ തുറക്കുന്നു. നിങ്ങൾക്ക് എല്ലാം കാണാൻ കഴിയും, നിങ്ങൾക്ക് വിഭാഗങ്ങളുടെ പട്ടിക ഉപയോഗിക്കാം.
നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന ഐക്കൺ തിരഞ്ഞെടുത്ത് അത് സജ്ജീകരിക്കുന്നതിലേക്ക് നീങ്ങുക. ഇവിടെ കുറച്ച് ഓപ്ഷനുകളും ഉണ്ട്:

എനിക്ക് ആദ്യം ഉണ്ടായിരുന്ന മെനു ഇതാണ്:

മെനു ഐക്കണുകൾ പ്ലഗിൻ ഉപയോഗിച്ചതിന് ശേഷമാണ് ഇത്:

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, എല്ലാം വളരെ ലളിതമാണ്.

ഏത് സാഹചര്യത്തിലാണ് ഈ പ്ലഗിൻ ഉപയോഗിക്കുന്നത് ഉചിതം? തീർച്ചയായും, ടെംപ്ലേറ്റ് പ്രത്യേക ക്രമത്തിൽ നിർമ്മിക്കുകയും അദ്വിതീയമാണെങ്കിൽ, ഡിസൈനിനെ സംബന്ധിച്ച എല്ലാ ആഗ്രഹങ്ങളും അത് കണക്കിലെടുക്കുകയും എന്തെങ്കിലും മാറ്റുകയോ കൂട്ടിച്ചേർക്കുകയോ ചെയ്യേണ്ടതില്ല.

എന്നാൽ നിങ്ങൾ റെഡിമെയ്ഡ് ഉപയോഗിക്കുകയാണെങ്കിൽ സ്വതന്ത്ര ടെംപ്ലേറ്റ്, പിന്നെ ഡിസൈനിലെ എല്ലാം നിങ്ങൾക്ക് ഇഷ്ടമല്ല മെനു പ്ലഗിൻഐക്കണുകൾ സഹായിക്കും.

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

ഹലോ സുഹൃത്തുക്കളെ!

ഇന്ന് സൈറ്റിലെ തലക്കെട്ടുകൾക്കും മെനു ഇനങ്ങൾക്കും ഐക്കണുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ലളിതവും എന്നാൽ അതേ സമയം പ്രസക്തവുമായ ഒരു ലേഖനം ഉണ്ടാകും.

മെറ്റീരിയൽ കൂടുതലും WordPress-നായിരിക്കും, എന്നാൽ നിങ്ങൾക്ക് മറ്റൊരു എഞ്ചിനിൽ എല്ലാ വിവരങ്ങളും പ്രയോഗിക്കാൻ കഴിയും. എല്ലായ്പ്പോഴും എന്നപോലെ, അത്തരം ഐക്കണുകളുടെ ഒരു ഉദാഹരണം ഞങ്ങൾ നോക്കും, അവ എന്താണ് നൽകുന്നത്, അവ ആവശ്യമാണോ എന്ന്. അതെ തീർച്ചയായും വിവിധ ഓപ്ഷനുകൾഅവരുടെ ഇൻസ്റ്റാളേഷനുകൾ.

വിഭാഗങ്ങളിലെ ഐക്കണുകളുടെ ഉദാഹരണം

എല്ലാ വിഭാഗങ്ങളുടെയും ലിസ്റ്റിലെ സൈഡ് കോളത്തിൽ നിങ്ങൾക്ക് എൻ്റെ വെബ്‌സൈറ്റിൽ ശ്രദ്ധേയമായ ഒരു ഉദാഹരണം കാണാൻ കഴിയും.

ലിങ്കുകളുടെ ലളിതമായ ലിസ്റ്റിനേക്കാൾ ഈ ഓപ്ഷൻ വളരെ മനോഹരമാണെന്ന് സമ്മതിക്കുക. അതുകൊണ്ടാണ് സൈറ്റ് ഡിസൈൻ കൂടുതൽ ശ്രദ്ധേയമാക്കുന്നതിന് ഓരോ വിഭാഗത്തിനും ഐക്കണുകൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നത് മൂല്യവത്താണ്. ഡിസൈനിൻ്റെ പ്രധാന ആശയം അത്തരം ചെറിയ കാര്യങ്ങൾ ഉൾക്കൊള്ളുന്നു.

പ്രധാന മെനുവിനും ഇത് ബാധകമാണ്. ഇതിലെ പോയിൻ്റുകൾ വളരെ ബോറടിപ്പിക്കുന്നതായി തോന്നുന്നുവെങ്കിൽ, ഡിസൈൻ ഇല്ലെങ്കിൽ, എന്തുകൊണ്ട് ചേർക്കരുത് ലളിതമായ ഐക്കണുകൾഅവരോട്.

ഒരു പ്ലഗിൻ ഉപയോഗിച്ചോ അല്ലാതെയോ അവ ഇൻസ്റ്റാൾ ചെയ്യാൻ കഴിയും. IN ഈ സാഹചര്യത്തിൽഒരു പ്ലഗിൻ ഇല്ലാതെ അവ ചേർക്കുന്നതിൽ അർത്ഥമുണ്ട്, കാരണം ഇത് ചെയ്തു CSS ഉപയോഗിക്കുന്നുശൈലികൾ. നിങ്ങൾക്ക് പതിവായി ചിത്രങ്ങൾ മാറ്റണമെങ്കിൽ, ഒരു പ്ലഗിൻ ഉപയോഗിക്കുന്നത് എളുപ്പമാണ്.

ഐക്കൺ ചിത്രങ്ങൾ ഇൻ്റർനെറ്റിൽ കണ്ടെത്താൻ വളരെ എളുപ്പമാണ്. ഉദാഹരണത്തിന്, ചിത്രത്തിലൂടെ ഗൂഗിളില് തിരയുക, അവിടെ അവർ ഒരേ വലുപ്പത്തിലും ശൈലിയിലും ഉള്ള മുഴുവൻ ശേഖരങ്ങളും പോസ്റ്റ് ചെയ്യുന്നു. നിങ്ങൾക്ക് സേവനങ്ങളിൽ ആവശ്യമായ പേര് തിരയാനും കഴിയും:

  • Iconfinder- ഇംഗ്ലീഷ് ഭാഷാ സേവനം;
  • ഐക്കൺസെർച്ച്- റഷ്യൻ ഭാഷ, എന്നാൽ ഐക്കണുകളുടെ തിരഞ്ഞെടുപ്പ് മുമ്പത്തേതിനേക്കാൾ ചെറുതാണ്.

പ്ലഗിൻ ഇല്ലാത്ത വിഭാഗങ്ങൾക്കുള്ള ഐക്കണുകൾ

ഓരോ വിഭാഗത്തിലും അനുയോജ്യമായ ശൈലികൾ ഉപയോഗിച്ച് ഒരു ഐക്കൺ ചേർക്കുന്നതാണ് രീതി, അതിന് ഒരു പ്രത്യേക ഐഡൻ്റിഫയർ ഉണ്ട്.

  • പച്ച ഫ്രെയിം - പൊതു ക്ലാസ്വിഭാഗ വിജറ്റിലെ ലിങ്കുകൾക്കായി;
  • ചുവന്ന ഫ്രെയിം - വ്യക്തിഗത ക്ലാസ് സംഖ്യാ മൂല്യംഒരു പ്രത്യേക ലിങ്കിനായി.

ഞങ്ങളുടെ വിഭാഗങ്ങൾ സൈഡ് കോളത്തിൽ ulli യുടെ ഒരു ലിസ്‌റ്റായി പ്രദർശിപ്പിച്ചിരിക്കുന്നതിനാൽ, ഈ ഘടകങ്ങളിലേക്ക് ഒരു സംഖ്യാ മൂല്യമുള്ള ഒരു ക്ലാസ് ചേർക്കുകയും അവയ്ക്ക് ഒരു നിശ്ചിത വലുപ്പത്തിലുള്ള ഒരു ചിത്രം നൽകുകയും ചെയ്യുന്നത് മൂല്യവത്താണ്. ഉദാഹരണത്തിന്, എൻ്റെ കാര്യത്തിൽ ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

Top_comm_wid > ul li .cat-item-16(പശ്ചാത്തലം: url("images/analitia.jpg") no-repeat;; ) .top_comm_wid > ul li .cat-item-12( പശ്ചാത്തലം: url("images/ps. jpg") നോ-ആവർത്തനം;; ) .top_comm_wid > ul li .cat-item-7( പശ്ചാത്തലം: url("images/tech.jpg") നോ-ആവർത്തനം;; )

Top_comm_wid > ul li .cat-item-16{

Top_comm_wid > ul li .cat-item-12{

പശ്ചാത്തലം: url ("images/ps.jpg") ആവർത്തനമില്ല; ;

Top_comm_wid > ul li .cat-item-7{

പശ്ചാത്തലം: url ("images/tech.jpg") ആവർത്തനമില്ല; ;

വ്യത്യസ്ത തലക്കെട്ടുകൾക്കുള്ള 3 ശൈലികളാണിത്. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഓരോ ശൈലിയിലും സൈഡ് കോളത്തിൽ ലിസ്റ്റ് ടാഗുകൾക്കായി ആദ്യം ഒരു ക്ലാസ് ഉണ്ട് (.top_comm_wid > ul li).

  • .top_comm_wid - സൈഡ് കോളത്തിലെ വിജറ്റിനായി ഏത് ശൈലികൾ വ്യക്തമാക്കിയിരിക്കുന്നു;
  • ul li - ലിസ്റ്റ് ടാഗ് (എണ്ണമില്ലാത്തത്).

അതിനാൽ, വിഭാഗങ്ങളിലെ ലിങ്കുകളുടെ ലിസ്റ്റിനായുള്ള പൊതുവായ ക്ലാസ് ഞങ്ങൾ കണ്ടെത്തുകയും ഓരോന്നിനും പുതിയ ശൈലികൾ സൃഷ്ടിക്കുകയും ഓരോ വിഭാഗത്തിനും ഒരു പ്രത്യേക ഐഡൻ്റിഫയർ ഉള്ള ഒരു വ്യക്തിഗത ക്ലാസ് ചേർക്കുകയും വേണം. അടുത്തതായി, "പശ്ചാത്തലം" പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ചിത്രത്തിലേക്കുള്ള പാത ചേർക്കുക. എല്ലാം വളരെ ലളിതമാണ്.

ഓരോ വിഭാഗത്തിനും ശൈലികളിൽ ഏത് ക്ലാസും ഐഡൻ്റിഫയറും എഴുതണമെന്ന് കണ്ടെത്തുന്നതിന്, നിങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട് സ്റ്റാൻഡേർഡ് ഫംഗ്ഷൻസന്ദർഭ മെനു വഴി ബ്രൗസർ:

  • Google chrome - എലമെൻ്റ് കോഡ് കാണുക;
  • മോസില്ല ഫയർഫോക്സ് - ഘടകം പര്യവേക്ഷണം ചെയ്യുക;
  • ഓപ്പറ - ഒരു ഘടകം പരിശോധിക്കുക.

ക്ലിക്ക് ചെയ്യുക വലത് ക്ലിക്കിൽആവശ്യമുള്ള ലിങ്കിൽ ക്ലിക്ക് ചെയ്ത് തിരഞ്ഞെടുക്കുക ഈ പ്രവർത്തനംനിങ്ങളുടെ ബ്രൗസറിൽ. എലമെൻ്റ് റിസർച്ച് ടൂൾ നിങ്ങൾക്ക് ഒരു പാനൽ നൽകും സോഴ്സ് കോഡ്, എവിടെ അത് ഉടനെ ഹൈലൈറ്റ് ചെയ്യും ആവശ്യമുള്ള ലൈൻ, അതിൽ നിങ്ങൾക്ക് സ്റ്റൈൽ ക്ലാസ് കണ്ടെത്താൻ കഴിയും, അത് ഞങ്ങൾ പിന്നീട് സ്റ്റൈൽ ഫയലിൽ എഴുതും. എൻ്റെ കാര്യത്തിൽ, ഇതാണ് "കാറ്റ്-ഇനം-ഐഡി വിഭാഗം" (മുകളിലുള്ള സ്ക്രീൻഷോട്ട് കാണുക).

അങ്ങനെ ഓരോ വിഭാഗത്തിനും. തുടർന്ന് നിങ്ങൾ സൈഡ്ബാർ ലിസ്റ്റ് ശൈലികളിലേക്ക് ചേർക്കുക ഈ ക്ലാസ്മുകളിലെ എൻ്റെ ശൈലികൾ പോലെ എന്തെങ്കിലും രൂപകല്പന ചെയ്ത് നേടുക. തത്വത്തിൽ, നിങ്ങളുടെ ടെംപ്ലേറ്റ് സാധാരണമാണെങ്കിൽ, ഇഷ്ടാനുസൃതമായി നിർമ്മിച്ചതല്ലെങ്കിൽ, വ്യക്തിഗത ക്ലാസ് സമാനമായിരിക്കും. തുടക്കത്തിൽ തന്നെ എഴുതിയിരിക്കുന്ന സൈഡ് കോളത്തിൻ്റെ ക്ലാസ് മാത്രം വ്യത്യാസപ്പെട്ടിരിക്കും.

ഡിസൈൻ ടെംപ്ലേറ്റിനുള്ളിലെ ഇമേജ് ഫോൾഡറിലേക്ക് ഓരോ വിഭാഗത്തിനുമുള്ള ഐക്കൺ ഇമേജുകൾ അപ്‌ലോഡ് ചെയ്യേണ്ടതുണ്ട്. ഇപ്പോൾ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കാനുള്ള സമയമാണ്. എൻ്റെ കാര്യത്തിൽ, ഇത് ഇതുപോലെ കാണപ്പെടുന്നു.

Top_comm_wid > ul li .cat-item-16(പശ്ചാത്തലം: url("images/analitia.jpg") no-repeat;; )

Top_comm_wid > ul li .cat-item-16{

പശ്ചാത്തലം: url ("images/analitia.jpg") ആവർത്തനമില്ല; ;

ആദ്യം സൈഡ് കോളത്തിൽ (.top_comm_wid > ul li) പൊതു ലിസ്റ്റ് ക്ലാസ് ul li വരുന്നു, തുടർന്ന് വിഭാഗ ഐഡൻ്റിഫയർ (.cat-item-16) ഉള്ള വ്യക്തിഗത ക്ലാസ്. ശൈലികൾക്കുള്ളിൽ ഞങ്ങൾ ചിത്രത്തിലേക്കുള്ള പാത എഴുതുന്നു. എൻ്റെ ശൈലികളിൽ, ടെംപ്ലേറ്റിനുള്ളിൽ ഞാൻ എല്ലാം അപ്‌ലോഡ് ചെയ്ത ഒരു ഇമേജ് ഫോൾഡർ ഉണ്ടെന്ന വസ്തുത കണക്കിലെടുത്താണ് ചിത്രത്തിലേക്കുള്ള പാത എഴുതിയിരിക്കുന്നത്. നിങ്ങളുടെ ഫോൾഡർ വ്യത്യസ്തമായി വിളിക്കുകയാണെങ്കിൽ, നിങ്ങൾ അതിലേക്കുള്ള പാത മാറ്റേണ്ടിവരും.

പ്രശ്നങ്ങളില്ലാതെ എല്ലാം സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് കഴിയുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. എന്തെങ്കിലും പ്രശ്നങ്ങൾ ഉണ്ടായാൽ, അഭിപ്രായങ്ങളിൽ സഹായിക്കുന്നതിൽ ഞാൻ എപ്പോഴും സന്തോഷിക്കുന്നു. നിങ്ങളുടെ ചോദ്യങ്ങൾക്കായി ഞാൻ കാത്തിരിക്കുകയാണ്.

അതുപോലെ, നിങ്ങൾക്ക് മെനു ഇനങ്ങളിലേക്ക് ചിത്രങ്ങൾ ചേർക്കാൻ കഴിയും, അവയ്ക്ക് അവരുടേതായ ഐഡൻ്റിഫയറുകളും ഉണ്ട്.


തത്വം സമാനമാണ്:

  1. മെനുവിലെ ലിസ്റ്റിനുള്ള പൊതു ക്ലാസ് നമുക്ക് കണ്ടെത്താം;
  2. ഓരോ ഇനത്തിനും ഐഡിയുള്ള വ്യക്തിഗത ക്ലാസ് കണ്ടെത്താം;
  3. വിഭാഗത്തിനായി ശൈലികൾ സജ്ജമാക്കുക പശ്ചാത്തല സ്വത്ത്, ഐക്കൺ ഫയലിലേക്കുള്ള പാത ഞങ്ങൾ സൂചിപ്പിക്കുന്നു.

എനിക്ക് എന്താണ് വേണ്ടത് ഈ രീതിഐക്കണുകൾ ക്ലിക്ക് ചെയ്യാനാകാത്തതാണ് എനിക്ക് ഇഷ്ടപ്പെടാത്തത്. വിഭാഗത്തിലേക്കുള്ള ലിങ്ക് മാത്രം ക്ലിക്കുചെയ്യാവുന്ന മിക്ക ടെംപ്ലേറ്റുകളുടെയും ലേഔട്ടാണ് ഇതിന് കാരണം. ലിങ്ക് സ്ഥിതി ചെയ്യുന്ന ബാക്കി ഏരിയയിൽ ക്ലിക്ക് ചെയ്യാനാകില്ല.

നിങ്ങളുടെ ടെംപ്ലേറ്റ് സെക്ഷൻ ലിങ്ക് ഏരിയ മുഴുവൻ ക്ലിക്കുചെയ്യാവുന്ന തരത്തിലായിരിക്കാം. അപ്പോൾ ഐക്കൺ ക്ലിക്ക് ചെയ്യാവുന്നതാണ്. എൻ്റെ കാര്യത്തിൽ ഇത് അങ്ങനെയല്ല.

പ്ലഗിനിലെ സ്ഥിതി തികച്ചും വ്യത്യസ്തമാണ്. യഥാർത്ഥത്തിൽ, നമുക്ക് അതിലേക്ക് പോകാം.

വിഭാഗവും പേജ് ഐക്കണുകളും പ്ലഗിൻ

പേരിനനുസരിച്ച് വിലയിരുത്തുമ്പോൾ, വിഭാഗങ്ങളിലേക്ക് മാത്രമല്ല, മെനു ഇനങ്ങളിലേക്കും ഐക്കണുകൾ ചേർക്കാൻ പ്ലഗിൻ നിങ്ങളെ അനുവദിക്കുന്നുവെന്ന് നിങ്ങൾ മനസ്സിലാക്കിയിരിക്കണം, ഇത് ഡിസൈനിനെ കൂടുതൽ സവിശേഷമാക്കുന്നു.

ഔദ്യോഗിക പേജിൽ നിന്ന് പ്ലഗിൻ ഡൗൺലോഡ് ചെയ്യുക.

ഇത് ഇൻസ്റ്റാൾ ചെയ്യുക, അത് സജീവമാക്കുക, നേരിട്ട് ക്രമീകരണങ്ങളിലേക്ക് പോകുക.

നിങ്ങൾ വളരെ വലിയ ചിത്രങ്ങൾ പെട്ടെന്ന് അപ്‌ലോഡ് ചെയ്യുകയാണെങ്കിൽ അവ കംപ്രസ് ചെയ്യപ്പെടുന്ന ഐക്കണുകളുടെ വലുപ്പം ഇവിടെ നിങ്ങൾ തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്. സ്ഥിരസ്ഥിതിയായി, കംപ്രഷൻ 28x28 പിക്സലുകളായി സജ്ജീകരിച്ചിരിക്കുന്നു. നിങ്ങൾക്ക് ചെറിയ വലിപ്പം വേണമെങ്കിൽ ഈ മൂല്യം മാറ്റാം.

എല്ലാ ഐക്കണുകളും സംരക്ഷിക്കപ്പെടുന്ന ഫോൾഡറിലേക്കുള്ള പാതയും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം. നിങ്ങളുടെ ഹോസ്റ്റിംഗിൽ അവയിലേക്ക് ആക്സസ് വേണമെങ്കിൽ, നിങ്ങൾക്ക് പാത മാറ്റാം. ഇതിൻ്റെ ആവശ്യകത ഞാൻ കാണുന്നില്ല, അതിനാൽ ഞാൻ ഒന്നും മാറ്റിയില്ല.

"ഫയലുകൾ തിരഞ്ഞെടുക്കുക" ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് എല്ലാം തിരഞ്ഞെടുക്കുക ആവശ്യമായ ഐക്കണുകൾ. എൻ്റെ സ്ക്രീൻഷോട്ടിലെന്നപോലെ അവ പെട്ടെന്ന് ലോഡ് ചെയ്യുകയും താഴെയുള്ള പട്ടികയിൽ പ്രത്യക്ഷപ്പെടുകയും ചെയ്യും. അവ ഒറിജിനൽ വലുപ്പത്തിലും കുറവു വരുത്തിയാൽ കുറഞ്ഞ വലുപ്പത്തിലും ലഭ്യമാകും.

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, എങ്ങനെ എന്നതിന് ഒരു തിരഞ്ഞെടുപ്പ് ഉണ്ട് യഥാർത്ഥ വലിപ്പം, കൂടാതെ കുറച്ചു. ഞങ്ങൾ നേരത്തെ ക്രമീകരണങ്ങളിൽ റിഡക്ഷൻ പാരാമീറ്റർ സജ്ജമാക്കി.


  1. മെനു ഇനങ്ങൾക്കായി ഐക്കണുകൾ നൽകുക;
  2. വിഭാഗങ്ങൾക്ക് ഐക്കണുകൾ നൽകുക.


ഒറിജിനൽ സൈസ് ഐക്കണുകളും കുറച്ചവയും തിരഞ്ഞെടുക്കാം. സ്വാഭാവികമായും, നിങ്ങളുടെ എല്ലാ കുതിരകളെയും നിങ്ങൾ ഡൌൺലോഡ് ചെയ്താൽ വ്യത്യസ്ത വലുപ്പങ്ങൾ, തുടർന്ന് ചെറിയ പതിപ്പ് തിരഞ്ഞെടുക്കുക, അങ്ങനെ അവ ഒരേ വലുപ്പത്തിൽ അവസാനിക്കും.

ഞാൻ തുടക്കത്തിൽ എല്ലാ ഐക്കണുകളും ഒരേ വലുപ്പത്തിൽ തയ്യാറാക്കി, അതിനാൽ ഞാൻ യഥാർത്ഥമായവ തിരഞ്ഞെടുത്തു.

നിങ്ങൾ തിരഞ്ഞെടുത്ത ശേഷം, തിരഞ്ഞെടുക്കൽ പേജിൻ്റെ ഏറ്റവും താഴെയുള്ള "മാറ്റങ്ങൾ സംരക്ഷിക്കുക" ബട്ടണിൽ ക്ലിക്കുചെയ്ത് ക്രമീകരണങ്ങൾ സംരക്ഷിക്കുന്നത് ഉറപ്പാക്കുക.

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

അത്രയേ ഉള്ളൂ കൂട്ടരേ. നിങ്ങൾ എല്ലാം സഹിച്ചുവെന്നും എൻ്റെ മെറ്റീരിയലുകൾ നിങ്ങളെ സഹായിച്ചുവെന്നും ഞാൻ പ്രതീക്ഷിക്കുന്നു. അങ്ങനെയാണെങ്കിൽ, അഭിപ്രായങ്ങളിൽ എന്നെ ബന്ധപ്പെടുക. എനിക്ക് കഴിയുന്നത് പോലെ ഞാൻ സഹായിക്കും.

വഴിയിൽ, ഏത് രീതിയാണ് നിങ്ങൾ തിരഞ്ഞെടുത്തത്? ദയവായി ചുവടെയുള്ള അഭിപ്രായങ്ങളിൽ എഴുതുക.

നിങ്ങളുടെ ശ്രദ്ധയ്ക്ക് എല്ലാവർക്കും നന്ദി. നിങ്ങളെ മറ്റ് മെറ്റീരിയലുകളിൽ കാണാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. കാണാം.

ആശംസകൾ, കോൺസ്റ്റാൻ്റിൻ ഖ്മെലേവ്!

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

നിങ്ങളുടെ വെബ്‌സൈറ്റ് മെനുവിൽ ഐക്കണുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഇത് മൂന്ന് തരത്തിൽ ചെയ്യാം:

  • Font Awesome ബന്ധിപ്പിക്കുന്നതിലൂടെ - ഇതിനായി നിങ്ങൾ കോഡ് അറിയേണ്ടതുണ്ട്, അതിനാൽ ഈ രീതി തുടക്കക്കാർക്ക് അനുയോജ്യമല്ല;
  • ഒരു പ്രത്യേക മെനു ഇമേജ് വിപുലീകരണം ഉപയോഗിക്കുന്നു - ഈ രീതിചിത്രങ്ങളിൽ കൂടുതൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചില്ല, മറിച്ച് പ്രതീക ഫോണ്ടുകളിൽ കൂടുതൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചു;
  • CSS-ൽ പ്രവർത്തിക്കുന്നത് ഒരു സാർവത്രിക രീതിയാണ്.

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

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

നിങ്ങൾ ഏത് രീതിയാണ് ഉപയോഗിക്കുന്നത്, "ലിങ്ക് ടെക്സ്റ്റ്" വരിയിൽ ഫോണ്ട് ആകർഷണീയമായ കോഡ് എഴുതേണ്ടത് പ്രധാനമാണ്. ഉദാഹരണത്തിന്, വേണ്ടി ഹോം പേജ്ഇത് ഇതുപോലെ കാണപ്പെടും:

കോഡ് ചേർത്ത ശേഷം, ഉചിതമായ ബട്ടണിൽ ക്ലിക്കുചെയ്ത് നിങ്ങൾ മാറ്റങ്ങൾ സംരക്ഷിക്കണം. കൂടാതെ ഫലം വെബ്സൈറ്റിൽ കാണുക.

WordPress-നുള്ള പുതിയ തീമുകളിൽ പലപ്പോഴും സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ടെന്ന കാര്യം ശ്രദ്ധിക്കുക. അതിനാൽ നിങ്ങൾ മറ്റൊന്നും ചെയ്യേണ്ടതില്ല. അത്തരം സ്ക്രിപ്റ്റുകൾ ഇല്ലെങ്കിൽ, നിങ്ങൾ ഫോണ്ട് ബന്ധിപ്പിക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, functions.php വിഭാഗത്തിൽ ഇനിപ്പറയുന്ന കോഡ് നൽകുക:

add_action ('wp_enqueue_scripts', 'enqueue_font_awesome');

ഫംഗ്‌ഷൻ enqueue_font_awesome() (

wp_enqueue_style('font-wesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css');

കുറിപ്പ്! സ്‌ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്യേണ്ട ആവശ്യമില്ല, കാരണം ഇത് സേവന വെബ്‌സൈറ്റിൽ നിന്ന് നേരിട്ട് ഡൗൺലോഡ് ചെയ്യുന്നു. കൂടാതെ, നിങ്ങളുടെ പ്ലാറ്റ്‌ഫോമിൻ്റെ മെനുവിനുള്ള മറ്റ് ഐക്കണുകൾ ഒരു പ്രത്യേക ഉപവിഭാഗം ഐക്കണുകളിൽ അവതരിപ്പിച്ചിരിക്കുന്നു.

രസകരമെന്നു പറയട്ടെ, ചില ലേഖനങ്ങളിൽ നിങ്ങൾക്ക് ശൈലികളിൽ ഉൾപ്പെടുത്തുന്നതിനുള്ള ഡെവലപ്പർ ശുപാർശകൾ കണ്ടെത്താനാകും:

#menu-item-121 a, #menu-item-122 a (font-family: FontAwesome;)

മെനു ഇമേജ് പ്ലഗിൻ

ഈ വിഭാഗത്തിൽ, ഞങ്ങൾ മെനു ഇമേജ് വിപുലീകരണം നോക്കാം, അത് മെനുവിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നത് വളരെ എളുപ്പമാക്കുന്നു. കൂടാതെ നിങ്ങൾ കോഡുകൾ ഉപയോഗിക്കേണ്ടതില്ല. എല്ലാത്തിനുമുപരി, ഇമേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ടാഗിനുള്ളിൽ ഒരു ലിങ്ക് സ്ഥാപിച്ചാൽ മതിയാകും. ഇത് അഡ്മിനിസ്ട്രേറ്റീവ് പാനലിലാണ് ചെയ്യുന്നത്.

പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്ത ശേഷം, "രൂപം" - "മെനു" ഉപവിഭാഗത്തിലേക്ക് പോകുക, എല്ലാ ക്രമീകരണങ്ങളും അവിടെ ലഭ്യമാകും.

കുറിപ്പ്! നിങ്ങൾ ഇതിനകം WPML വിപുലീകരണം ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾ "WPML" - "WP മെനുകൾ സമന്വയം" എന്നതിലേക്ക് പോയി സമന്വയം നടത്തുന്ന ബട്ടണിൽ ക്ലിക്ക് ചെയ്യണം.

വിവരിച്ച പ്ലഗിന് ചില ഓപ്ഷനുകളും സവിശേഷതകളും ഉണ്ട്, ഇനിപ്പറയുന്നവ ഉൾപ്പെടെ:

  • നാവിഗേഷനായി ഒരു ചിത്രം ലോഡ് ചെയ്യുന്ന ഒരു അധിക ബട്ടൺ;
  • ഹോവറിൽ ദൃശ്യമാകുന്ന മെനു ഐക്കണിനുള്ള മറ്റൊരു ഓപ്ഷൻ;
  • ശീർഷകത്തിൻ്റെ സ്ഥാനം തിരഞ്ഞെടുക്കുന്നു - വാസ്തവത്തിൽ, ഐക്കണിൻ്റെ ഏത് വശത്തും;
  • ഐക്കൺ വലുപ്പം തിരഞ്ഞെടുക്കുക.

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

ചുവടെയുള്ള കോഡ് ഐക്കണുകളുടെ സ്റ്റാൻഡേർഡ് വലുപ്പം (48 ബൈ 48) നീക്കംചെയ്യാനും മിനി-ഐക്കണുകൾ എന്ന് വിളിക്കപ്പെടുന്നവ ഇൻസ്റ്റാൾ ചെയ്യാനും നിങ്ങളെ അനുവദിക്കും, അതിൻ്റെ വലുപ്പം 16 ബൈ 16 ആണ്.

add_filter('menu_image_default_sizes', function($sizes) (

// ഡിഫോൾട്ട് 48×48 വലിപ്പം നീക്കം ചെയ്യുക

സജ്ജീകരിക്കാത്തത് ($ വലുപ്പങ്ങൾ['മെനു-48×48']);

//ഒരു പുതിയ വലുപ്പം ചേർക്കുക

$ വലുപ്പങ്ങൾ['മെനു-16×16'] = അറേ(16,16);

// $ വലുപ്പങ്ങൾ തിരികെ നൽകുക (ആവശ്യമാണ്)

$ വലുപ്പങ്ങൾ തിരികെ നൽകുക;

പ്ലഗിൻ വിവരണത്തിൽ നിങ്ങൾക്ക് വിപുലീകരണത്തിൻ്റെ മറ്റ് സവിശേഷതകളും അതിൻ്റെ കഴിവുകളും വായിക്കാം.

CSS ശൈലികൾ

  • അഡ്‌മിൻ പാനലിലേക്ക് പോയി “രൂപം” - “മെനു”, മുകളിൽ വലത് കോണിലുള്ള “ഡിസ്‌പ്ലേ ക്രമീകരണങ്ങൾ” ബട്ടണിൽ ക്ലിക്കുചെയ്‌ത് “CSS ക്ലാസുകൾ” ഉപ ഇനം സജീവമാക്കുക;
  • അതിനുശേഷം, മെനുവിൽ ഒരു പുതിയ ഘടകം ദൃശ്യമാകും - ഇതൊരു സ്റ്റൈൽ ക്ലാസാണ്, നിങ്ങൾ ആഗ്രഹിക്കുന്നതുപോലെ ലേബൽ ചെയ്യുക. ഉദാഹരണത്തിന്, ഇത് എൻ്റെ മെനു ആകാം;
  • "മീഡിയ ഫയലുകൾ" തിരഞ്ഞെടുത്ത് അതിലൂടെ നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ചിത്രം അപ്‌ലോഡ് ചെയ്യുക;
  • അടുത്തതായി, ടെംപ്ലേറ്റ് സ്റ്റൈൽ ഫയലിലേക്ക് (style.css എന്ന് വിളിക്കുന്നു) പോയി അതിൽ കോഡ് സ്ഥാപിക്കുക:

.my-menu (

പശ്ചാത്തല-ചിത്രം: url('http://your_വെബ്സൈറ്റ്/wp-content/uploads/menuimg.png');

പശ്ചാത്തലം-ആവർത്തനം: നോ-ആവർത്തനം;

പശ്ചാത്തല-സ്ഥാനം: ഇടത്;

പാഡിംഗ്-ഇടത്: 20px;

സേവ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്യാൻ മറക്കരുത്. അപ്പോൾ നിങ്ങൾ എന്താണ് അവസാനിപ്പിച്ചതെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും.

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

#മെനു-ഇനം-121 ഒപ്പംടി.പി.

ഓരോ ഇനത്തിലും ഒരു ഐഡി സ്വയമേവ ചേർക്കും.

കൂടാതെ, CSS പശ്ചാത്തല പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിൻ്റെ വിവരിച്ച ഉദാഹരണം മുകളിൽ വിശദമായി വിവരിച്ചിരിക്കുന്ന ഫോണ്ട് ആകർഷണീയമായ ഉദാഹരണം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാം:

li#മെനു-ഇനം-2996 a:മുമ്പ് (

ഉള്ളടക്കം: "\f015";

ഫോണ്ട് ഫാമിലി: FontAwesome;

പാഡിംഗ്-വലത്: 7px;

ഉപസംഹാരമായി: നമുക്ക് സംഗ്രഹിക്കാം

ഇവിടെ നിങ്ങൾ സജ്ജീകരിച്ചിരിക്കുന്ന ചുമതല കൃത്യമായി കണക്കിലെടുക്കണം, അത് എങ്ങനെ പരിഹരിക്കണം. അതിനാൽ, അവ തുടക്കക്കാരുടെ ജോലിയെ ഗണ്യമായി ലളിതമാക്കുന്നു. എന്നിരുന്നാലും, ഈ വിവരങ്ങൾ അമിതമായി തോന്നിയേക്കാം.

എന്നാൽ ഇതിനകം തന്നെ അവരുടെ വെബ്‌സൈറ്റിൽ നിർദ്ദിഷ്ട സ്‌ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നവർക്ക് ഫോണ്ട് ആകർഷണീയമായ ഉദാഹരണം അനുയോജ്യമായ ഒരു തിരഞ്ഞെടുപ്പായിരിക്കും. അഡ്മിനിസ്ട്രേറ്റീവ് പാനലിലൂടെ ഇത് ബന്ധിപ്പിക്കുന്നത് വളരെ ലളിതമാണ്!

മൂന്നാമത്തെ രീതി, മെറ്റീരിയലിൻ്റെ അവസാനം സൂചിപ്പിച്ചിരിക്കുന്ന കോഡ് ഉപയോഗിക്കുമ്പോൾ ഉപയോക്താക്കൾ ലേഔട്ട് അല്ലെങ്കിൽ ലളിതമായ പരിചരണത്തിൻ്റെ തത്വങ്ങൾ അറിയേണ്ടതുണ്ട്.

മെനുവിലേക്ക് ഐക്കണുകൾ ചേർക്കുന്നതിനുള്ള നിങ്ങളുടെ സ്വന്തം വഴികളും രീതികളും നിങ്ങൾക്കുണ്ടോ? അവ പങ്കിടുക!

ബ്ലോഗ് സബ്‌സ്‌ക്രൈബുചെയ്യുക, പ്രധാനപ്പെട്ട അപ്‌ഡേറ്റുകൾ നിങ്ങൾക്ക് നഷ്‌ടമാകില്ല!

സ്റ്റെപാൻ, ഈ രീതി ഉപയോഗിച്ച് ഐക്കണുകൾ പ്രദർശിപ്പിക്കുമെന്നും അത് ഏത് തരത്തിലുള്ള പശ്ചാത്തലമായിരിക്കും എന്നും നിങ്ങൾ തീരുമാനിച്ചത് എന്തുകൊണ്ടാണ്? അവ ഈ രീതിയിൽ പ്രദർശിപ്പിക്കില്ല, മെനുകളിലോ വിഭാഗങ്ങളിലോ അല്ല. നാല് വ്യത്യസ്ത വേർഡ്പ്രസ്സ് ടെംപ്ലേറ്റുകളിൽ ഞാൻ ഇത് വ്യക്തിപരമായി പരീക്ഷിച്ചു, അപ്പോൾ മാത്രമാണ് ഇത് എങ്ങനെ ശരിയായി ചെയ്യാമെന്ന് എനിക്ക് മനസ്സിലായത്. ആദ്യം അവരെ എവിടെ നിന്ന് കൊണ്ടുവരണമെന്ന് നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്. സൈറ്റ്ബാറിലെ ഔട്ട്പുട്ടിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:

  • ഇപ്പോൾ ഞങ്ങൾ വിഭാഗത്തിനുള്ള ഐക്കൺ ഇതുപോലെ പ്രദർശിപ്പിക്കുന്നു:

    സൈഡ്‌ബാർ li.cat-item-2 (list-style-image: url("images/captina.png"); )

    ക്ലാസ് ക്യാറ്റ്-ഇനം-നിങ്ങളുടെ വിഭാഗം ഐഡി ഉണ്ടായിരിക്കണം. പിന്നെ പശ്ചാത്തലവുമില്ല. നിങ്ങൾ എന്നെ വിശ്വസിക്കുന്നില്ലെങ്കിൽ, അത് സ്വയം പരിശോധിക്കുക, വലിയ വ്യത്യാസമുണ്ട്.

    ചിലർക്ക്, സൈഡ്‌ബാർ ക്ലാസ് പ്രകാരമല്ല, ഐഡി വഴി പ്രദർശിപ്പിക്കാം, അപ്പോൾ കോഡ് ഇതുപോലെയായിരിക്കും:

    #sidebar li.cat-item-2 (list-style-image: url("images/picture.png"); )

    എല്ലാം. ഇപ്പോൾ ആവശ്യമെങ്കിൽ ഇൻഡൻ്റുകൾ ഉണ്ടാക്കുക.
    ഇപ്പോൾ ഈ കോഡ് പ്രവർത്തിക്കും.

    ഞാൻ എഴുതിയ ലേഖനത്തിൽ - “...മെനുവിലെയോ വിഭാഗങ്ങളിലെയോ എല്ലാ ലിങ്കുകൾക്കും ക്ലാസ് മെനു-ഇനം- അസൈൻ ചെയ്യപ്പെടും, എന്നാൽ ഒരു അദ്വിതീയ നമ്പർ ഉപയോഗിച്ച്, ഉദാഹരണത്തിന് ഇതുപോലെ:

  • "

    നിങ്ങൾ എല്ലാം എഴുതിയത് വ്യത്യസ്ത വാക്കുകളിൽ മാത്രം.

    (“അഡ്മിൻ പാനൽ” => “രൂപം” => “മെനു”) വഴി നിങ്ങൾ അഡ്മിനിൽ ഒരു മെനു ചേർത്താൽ, ക്ലാസ് മെനു-ഇനം-xxxxxxx ആയിരിക്കും
    നിങ്ങൾ വിജറ്റുകൾ (“അഡ്മിൻ പാനൽ” => “രൂപം” => “വിജറ്റുകൾ”) വഴി അഡ്‌മിനിൽ ഒരു വിഭാഗം ചേർത്തിട്ടുണ്ടെങ്കിൽ, ക്ലാസ് cat-item-хххххх എന്നതായിരിക്കും

    എല്ലാം എൻ്റെ എല്ലാ ലേഔട്ടുകളിലും പ്രവർത്തിക്കുന്നു. നിങ്ങൾക്കത് എൻ്റെ ബ്ലോഗിൽ പരിശോധിക്കാം.
    എന്തുകൊണ്ടാണ് ഞാൻ പശ്ചാത്തലം സജ്ജീകരിച്ചത്, കാരണം ചില കാരണങ്ങളാൽ ലിസ്റ്റ്-സ്റ്റൈൽ-ചിത്രം പ്രവർത്തിക്കുന്നില്ല.

    അലക്സാണ്ടർ ഉത്തരം നൽകുന്നു:
    01/04/2016 09:48 ന്

    ഞാൻ സംസാരിക്കുന്നത്, നിങ്ങൾ cat-item-xxxxxxx എന്നെഴുതി അതിന് ഒരു ചിത്രം നൽകിയാൽ ഒന്നും പ്രവർത്തിക്കില്ല. പൂച്ച ഇനം മെനുവിലും സൈഡ്‌ബാറിലും ഉണ്ടെന്ന് സ്വയം ചിന്തിക്കുക, അതിനാൽ ഏത് പൂച്ച ഇനത്തിനാണ് നിങ്ങൾ ഐക്കണുകൾ നിർമ്മിക്കുന്നത്? ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ cat-item-ന് മുമ്പ് .sidebar li ചേർക്കേണ്ടതുണ്ട്. അല്ലെങ്കിൽ ഐക്കണുകൾ സ്ഥിതി ചെയ്യുന്ന ഒരു മെനു. പശ്ചാത്തലവും ലിസ്റ്റ്-സ്റ്റൈൽ-ചിത്രവും തമ്മിലുള്ള വ്യത്യാസം, പശ്ചാത്തലം ലിസ്റ്റിൻ്റെ പശ്ചാത്തലം വ്യക്തമാക്കുന്നു, ലിസ്റ്റ്-സ്റ്റൈൽ-ചിത്രം ലിസ്റ്റ് മാർക്കറിൻ്റെ പശ്ചാത്തലം വ്യക്തമാക്കുന്നു. അത്രയേയുള്ളൂ.

    നിങ്ങൾക്ക് തെറ്റി, അലക്സാണ്ടർ. എന്തുകൊണ്ടെന്ന് ഇപ്പോൾ ഞാൻ വിശദീകരിക്കും. എല്ലാ ടെംപ്ലേറ്റുകൾക്കും "സൈഡ്ബാർ" ക്ലാസ് ഇല്ല, നിങ്ങളുടെ ശൈലി ഒട്ടും പ്രവർത്തിക്കില്ല. എൻ്റെ അഭിപ്രായത്തിൽ, ഇത് എഴുതിയാൽ മതി:

    ലി#മെനു-ഇനം-xxx(ശൈലി;)

    xxx - പേജ് ഐഡി

    ഞാൻ തെറ്റാണെങ്കിൽ, എന്നെ തിരുത്തുക. എന്നാൽ ഇത് എൻ്റെ എല്ലാ ലേഔട്ടുകളിലും പ്രവർത്തിക്കുന്ന രീതിയാണെന്ന് ഞാൻ ആവർത്തിക്കുന്നു. "ലിസ്റ്റ്-സ്റ്റൈൽ-ഇമേജ്" എന്നതിനെക്കുറിച്ച്, ഞാൻ നിങ്ങളോട് യോജിക്കുന്നു, പക്ഷേ എന്തെങ്കിലും പ്രവർത്തിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾ പുറത്തുപോകണം. വ്യക്തിപരമായി എന്നെ സംബന്ധിച്ചിടത്തോളം, ഒരു സൈറ്റിൽ "ലിസ്റ്റ്-സ്റ്റൈൽ-ഇമേജ്" വിഭാഗങ്ങൾക്കായി പ്രവർത്തിച്ചില്ല (ഞാൻ മുൻഗണന പോലും സജ്ജീകരിച്ചു), അതിനാൽ എനിക്ക് പശ്ചാത്തലം ഉപയോഗിക്കേണ്ടിവന്നു.

    അലക്സാണ്ടർ ഉത്തരം നൽകുന്നു:
    01/04/2016 10:12 ന്

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