વર્ડપ્રેસમાં ડેશીકોન્સનો ઉપયોગ કેવી રીતે કરવો - એક સ્ટેપ-બાય-સ્ટેપ ગાઇડ
સામગ્રીઓનું કોષ્ટક
તે દરેકને થાય છે.
તમને ગમતી થીમ મળે છે, તમે તેને ઇન્સ્ટોલ કરો છો અને તમારી સાઇટના દેખાવનો આનંદ માણવામાં થોડા મહિના પસાર કરો છો. પરંતુ પછી, થોડા મહિનાઓ પછી, થીમ વાસી લાગે છે. થોડી કંટાળાજનક.
માત્ર સમસ્યા એ છે કે, તમે કંઈક નવું શોધવામાં થોડા કલાકો પસાર કરવા માંગતા નથી. જો તમારી થીમમાં થોડો મસાલો ઉમેરવાની કોઈ રીત હોય, તો તેને અલગ બનાવવા માટે થોડી જ્વાળા.
તમે નિરાશામાં તમારા હાથ ઉંચા કરો તે પહેલાં, ચાલો હું તમને તમારા મસાલાને મસાલેદાર બનાવવાની એક સરળ રીત બતાવીશ. થીમ ખૂબ જ પ્રયત્નો વિના, અને બિનજરૂરી છબીઓ ઉમેર્યા વિના જે તમારી સાઇટને ધીમું કરી શકે છે.
ડેશિકન્સ દાખલ કરો. Dashicons એ ફોન્ટ ચિહ્નો છે જે વર્ડપ્રેસ 3.8 માં રજૂ કરવામાં આવ્યા હતા. જ્યારે તમે તમારા ડેશબોર્ડમાં લૉગ ઇન કરો છો ત્યારે તે અદ્ભુત અને શાનદાર ચિહ્નો છે જે તમે જુઓ છો. જો તમે તેને તમારી થીમમાં પણ ઉમેરી શકો તો તે સારું નહીં લાગે?
સારું, તમે કરી શકો છો અને હું તમને કેવી રીતે બતાવીશ.
તમે તમારામાં Dashicons નો ઉપયોગ કેવી રીતે કરી શકો છો નેવિગેશન મેનૂ?
ચાલો એક સરળ ઉદાહરણથી શરૂઆત કરીએ. વર્ડપ્રેસમાં વર્ડપ્રેસ 3.8 થી Dashicons પહેલાથી જ સામેલ છે પરંતુ તમારે હજુ પણ તેમને તમારી સાઇટના આગળના છેડે યોગ્ય રીતે પ્રદર્શિત કરવા માટે સામેલ કરવાની જરૂર છે; એટલે કે, તમારી થીમ.
પગલું 1: તમારી થીમ Dashicons ને તૈયાર કરો
તમારી થીમ Dashicons ને તૈયાર કરવા માટે પહેલા તમારી functions.php ફાઇલ ખોલો (દેખાવ> માં જોવા મળે છે. ;એડિટર - મૂળભૂત રીતે તે તમારી વર્તમાન થીમની CSS ફાઇલ ખોલશે. આગળ વધો અને શોધોfunctions.php ફાઇલ અને તેને એડિટરમાં લોડ કરવા માટે તેના પર ક્લિક કરો.)
આ પણ જુઓ: RafflePress સમીક્ષા 2023: શું તે શ્રેષ્ઠ વર્ડપ્રેસ કોન્ટેસ્ટ પ્લગઇન છે?સ્ટેપ 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 પર ઉપલબ્ધ કરવામાં આવ્યા છે.
પગલું 4:
ઇચ્છિત આઇકન પર ક્લિક કરો (આ કિસ્સામાં મેં હોમ આઇકોન પસંદ કર્યું છે) અને પછી કોપી HTML પર ક્લિક કરો. તે તમને જરૂરી કોડ સાથે એક પોપ-અપ વિન્ડો આપશે.
પગલું 5:
તમારા WordPress ડેશબોર્ડ પર પાછા જાઓ, દેખાવ > પર ક્લિક કરો. ; કોડને મેનુ અને પેસ્ટ કરો જ્યાં તે નેવિગેશન લેબલ કહે છે.
જો તમે હજુ પણ શબ્દ બતાવવા માંગતા હો, તો બંધ div કૌંસ પછી તેને ટાઇપ કરો.
પર ક્લિક કરો તમારું હોમ પેજ સાચવો અને લોડ કરો. તમારી હોમ લિંક હવે સરસ, ચપળ Dashicon પ્રદર્શિત થવી જોઈએ.
તમે આ બધી નેવિગેશન મેનુ વસ્તુઓ માટે અથવા ફક્ત ઘર માટે કરી શકો છો. મેળ ખાતા ચિહ્નો સાથે ફક્ત ઉપરના પગલાંઓનું પુનરાવર્તન કરો. તે સરળ હતું ખરું?
તમે પોસ્ટ મેટામાં Dashicons નો ઉપયોગ કેવી રીતે કરશો?
તમે એક ડગલું આગળ જઈને તમારા પોસ્ટ મેટામાં Dashicons ઉમેરી શકો છો અથવા બીજા શબ્દોમાં કહીએ તો લેખકની સામે Dashicons ઉમેરી શકો છો નામ, તારીખ, શ્રેણી અથવા ટેગ; પર આધાર રાખવોતમારી થીમ અને તે જે માહિતી પ્રદર્શિત કરે છે.
તમે તમારી થીમમાં પહેલાથી જ Dashiconsને કતારબદ્ધ કર્યા હોવાથી, તમારે હવે ફક્ત તમારી style.css ફાઇલ ખોલવાની છે (અથવા કસ્ટમ CSS એડિટરનો ઉપયોગ કરો જે હંમેશા સારો વિકલ્પ હોય છે જેથી તમે એકવાર તમારી થીમ અપડેટ થઈ જાય પછી ફેરફારોને ગુમાવશો નહીં!), મેળ ખાતા પસંદગીકારને શોધો અને CSS કોડ ઉમેરો.
ચાલો કહીએ કે તમે તમારા નામ અથવા તમારા લેખકના નામની આગળ એક ચિહ્ન ઉમેરવા માંગો છો.
પગલું 1:
>પછી તેના પર ક્લિક કરો અને આ વખતે કૉપિ 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 નો ઉપયોગ કરી શકો તેવી ઘણી બધી રીતો છે – તમારી સર્જનાત્મકતાને પકડવા દો અને તમે શું કરી શકો તે જુઓ.
આ પણ જુઓ: Snapchat પર વધુ અનુયાયીઓ કેવી રીતે મેળવવું: પ્રારંભિક માર્ગદર્શિકાતે બધાને એકસાથે મૂકીને
ઉપરોક્ત ઉદાહરણો સિવાય, તમે તમારા બેકએન્ડમાં Dashicons નો ઉપયોગ અલગ અલગ સ્પષ્ટ કરવા માટે કરી શકો છોવિવિધ પોસ્ટ પ્રકારો માટેના ચિહ્નો, અથવા તમે તમારા પોસ્ટ શીર્ષકો, વિજેટ શીર્ષકોમાં તેનો ઉપયોગ કરી શકો છો અથવા જો તમે કસ્ટમ લેન્ડિંગ પૃષ્ઠ બનાવી રહ્યા હોવ તો તમે તમારી સાઇટના વિવિધ પૃષ્ઠો વચ્ચે તફાવત કરી શકો છો.
અહીં તેનું મૂળભૂત ઉદાહરણ છે તમે તેનો ઉપયોગ બનાવવા માટે કરી શકો છો:
