Buna ziua. Fiecare persoană care întreține și utilizează un șablon public dorește să-i adauge un pic de unicitate. Uneori, o astfel de performanță de amatori încalcă capacitatea de utilizare a site-ului, așa că citiți articolele mele în două părți: prima și a doua.
Astăzi vă voi arăta cum să setați pictogramele de meniuWordPress. Vom implementa folosind pluginul Pictograme categorii și pagini. Pluginul este gratuit, dar există și o versiune Pro. Se instalează direct din distribuția WordPress din consolă.
Nici pluginul în sine și nici motorul nu sunt necesare în anumite setări, așa cum cer alte plugin-uri similare. Functionalitatea pluginului este elementara, ba chiar as spune ca nu mai este nevoie de nimic. Pluginul ajută la setarea pictogramelor pentru categorii și pagini. În același timp, puteți seta selectiv și pentru subtitluri.
Configurarea pluginului pentru pictogramele categorii și pagini
Instalați pluginul. După cum am spus mai sus, îl puteți instala în consola WordPress din secțiunea de pluginuri. Activați pluginul și mergeți direct la secțiunea de setări plugin. Următoarea secțiune va apărea în elementul de meniu:
Apoi, accesați „Setări”. După cum am spus, nu există setări specifice. Tot ce trebuie să specificați este o locație diferită pentru stocarea pictogramelor descărcate, dacă doriți. Trebuie doar să specificați dimensiunea pictogramelor și să încărcați pictograme de aceeași dimensiune pe care ați specificat-o, altfel pictogramele se vor micșora/mărește și se vor pierde detaliile.
În continuare, când v-ați hotărât asupra dimensiunii dorite a pictogramelor și unde să le stocați, este timpul să le descărcați. Vă sfătuiesc să le denumiți în conformitate cu denumirile secțiunilor și paginilor către care le veți întreba, așa că este mult mai ușor de navigat și de a nu încurca.
Am găsit recent un set de pictograme interesante pe Vkontakte pe care le puteți folosi, după părerea mea, sunt drăguțe și realizate în .
- Cicons-40-Outline-Icons
- Simple_line_icons_by_Mirko_Monti
- Divi-icoane
- Pictograme de comerț electronic
- pictograme linii
- complicații ale sindromului patau
După ce ați descărcat și pregătit pictogramele, continuați să le încărcați pe server. Pentru a face acest lucru, accesați secțiunea „Icoane” și selectați toate pictogramele pe care doriți să le încărcați. Plugin-ul vă permite să încărcați pictograme în bloc, și nu unul câte unul.
Odată ce ați încărcat pictogramele, acestea vor fi afișate pe aceeași pagină într-un tabel simplu, pictograma fiind afișată după numele acesteia și posibilitatea de a le șterge dacă este necesar.
Acum că pictogramele sunt încărcate, să le atribuim categoriilor. Voi arăta doar un exemplu pentru categorii, deoarece procesul nu este diferit pentru pagini. Accesați fila „Atribuiți pictograme categoriilor”. Veți vedea un tabel cu numele categoriilor, iar vizavi de fiecare categorie va exista o listă derulantă cu numele pictogramelor descărcate. Selectați pictograma dorită pentru fiecare categorie. Pictograma selectată va fi vizibilă ca în captura de ecran.
Deoarece am dezvoltat șabloane personalizate (teme) pe WordPress, am descoperit o nouă oportunitate pentru mine - un set de pictograme „Dashicons”, care sunt setate implicit la wordpress, începând cu versiunea 3.8. Aceste pictograme pot fi văzute în panoul de administrare WordPress.
Numărul aproximativ de pictograme este de aproximativ 200 de bucăți.
Avantajul pictogramelor Dashicons este că rămân de bună calitate, indiferent de dimensiunea pe care o specificați în stilurile CSS.
Pentru panoul de administrare, pictogramele Dashicons pot fi folosite imediat fără conexiune, dar dacă doriți să utilizați pictograme într-un șablon (temă), atunci trebuie să le conectați.
Cum să conectați pictogramele „Dashicons” la un șablon (temă)
Pentru a utilizați pictogramele „Dashicons” nu numai în panoul de administrare, ci și pe un blog sau site web, trebuie să includeți un fișier css " /wp-includes/css/dashicons.min.css»:
Acest lucru se face în două moduri.
1 cale.
Conectarea pictogramelor „Dashicons” se poate face prin fișierul șablon „header.php”. Adăugați între etichete
2 sensuri.
Conectarea pictogramelor „Dashicons” se poate face prin fișierul „functions.php”. Lipiți acest cod înainte de semnul „?>”:
Funcția my_dashicons() ( wp_enqueue_style("dashicons"); ) add_action("wp_enqueue_scripts", "my_dashicons");
După conectarea pictogramelor, puteți începe să le afișați pe blog.
Cum să afișați pictogramele Dashicons
○ Pentru HTM-uri:
Inserați o clasă specială „dashicons” și „dashicons- * ”, unde „*” este numele pictogramei ( vezi numele pictogramei din tabelul de mai jos):
Ar putea fi asa:
Rezultat:
Dacă trebuie să măriți pictograma și să schimbați culoarea, procedați astfel:
font-size - dimensiunea pictogramei
culoare - culoare
○ Pentru CSS:
Adăuga:
site-myicon1:before (conținut: „\f303”; afișare: inline-block; -webkit-font-smoothing: antialiased; font: normal 22px/1 „dashicons”; vertical-align: top; )
site-myicon1 este o clasă. Înlocuiește-l cu al tău
:before - pictograma va fi adăugată înaintea elementului ( :după - pictograma va fi adăugată după element)
\f303 - cod pictogramă ( vezi tabelul de mai jos)
font - dimensiunea și numele fontului. Asigurați-vă că includeți „dashicons”
Să vedem tabelul cu pictograme. Poți să te uiți la oricare pe blogul meu:
Tabel cu pictograme Dashicons
| Tip de pictogramă | cod HTML | Cod CSS |
| dashicons-meniu | \f333 | |
| dashicons-admin-site | \f319 | |
| dashicons-tabloul de bord | \f226 | |
| dashicons-admin-post | \f109 | |
| dashicons-admin-media | \f104 | |
| dashicons-admin-link-uri | \f103 | |
| dashicons-admin-page | \f105 | |
| dashicons-admin-comments | \f101 | |
| dashicons-admin-aspect | \f100 | |
| dashicons-admin-plugins | \f106 | |
| dashicons-admin-users | \f110 | |
| dashicons-admin-tools | \f107 | |
| dashicons-admin-settings | \f108 | |
| dashicons-admin-network | \f112 | |
| dashicons-admin-home | \f102 | |
| dashicons-admin-generic | \f111 | |
| dashicons-admin-colaps | \f148 | |
| dashicons-welcome-write-blog | \f119 | |
| dashicons-welcome-add-page | \f133 | |
| dashicons-format-aparte | \f123 | |
| dashicons-format-imagine | \f128 | |
| dashicons-format-galerie | \f161 | |
| dashicons-format-video | \f126 | |
| dashicons-format-status | \f130 | |
| dashicons-format-quote | \f122 | |
| dashicons-format-chat | \f125 | |
| dashicons-format-audio | \f127 | |
| dashicons-camera | \f306 | |
| dashicons-images-alt2 | \f233 | |
| dashicons-video-alt | \f234 | |
| dashicons-video-alt2 | \f235 | |
| dashicons-video-alt3 | \f236 | |
| dashicons-media-archive | \f501 | |
| dashicons-media-audio | \f500 | |
| dashicons-media-code | \f499 | |
| dashicons-media-default | \f498 | |
| dashicons-media-document | \f497 | |
| dashicons-media-text | \f491 | |
| dashicons-media-video | \f490 | |
| dashicons-playlist-audio | \f492 | |
| dashicons-playlist-video | \f493 | |
| dashicons-controls-volumeon | \f521 | |
| dashicons-controls-volumeoff | \f520 | |
| dashicons-editor-video | \f219 | |
| dashicons-lock | \f160 | |
| dashicons-calendar | \f145 | |
| dashicons-calendar-alt | \f508 | |
| dashicons-vizibilitate | \f177 | |
| dashicons-post-status | \f173 | |
| dashicons-edit | \f464 | |
| dashicons-trash | \f182 | |
| dashicons-list-view | \f163 | |
| dashicons-twitter | \f301 | |
| dashicons-rss | \f303 | |
| dashicons-email | \f465 | |
| dashicons-email-alt | \f466 | |
| dashicons-facebook | \f304 | |
| dashicons-googleplus | \f462 | |
| dashicons-rețea | \f325 | |
| dashicons-ciocan | \f308 | |
| dashicons-acces-universal | \f483 | |
| dashicons-universal-access-alt | \f507 | |
| dashicons-bilete | \f486 | |
| dashicons-nametag | \f484 | |
| dashicons-clipboard | \f481 | |
| dashicons-inima | \f487 | |
| dashicons-megafon | \f488 | |
| dashicons-wordpress | \f120 | |
| dashicons-wordpress-alt | \f324 | |
| dashicons-update | \f463 | |
| dashicons-info | \f348 | |
| dashicons-cart | \f174 | |
| dashicons-cloud | \f176 | |
| dashicons-traducere | \f326 | |
| dashicons-tag | \f323 | |
| dashicons-locație | \f230 | |
| dashicons-scut | \f332 | |
| dashicons-search | \f179 | |
| dashicons-chart-pie | \f184 | |
| dashicons-chart-bar | \f185 | |
| dashicons-grupuri | \f307 | |
| dashicons-om de afaceri | \f338 | |
| dashicons-marturie | \f473 | |
| dashicons-portfolio | \f322 | |
| dashicons-carte | \f330 | |
| dashicons-book-alt | \f331 | |
| dashicons-descărcare | \f316 | |
| dashicons-upload | \f317 | |
| dashicons-ceas | \f469 | |
| dashicons-bec | \f339 | |
| dashicons-microfon | \f482 | |
| dashicons-desktop | \f472 | |
| dashicons-smartphone | \f470 | |
| dashicons-telefon | \f525 | |
| dashicons-morcov | \f511 | |
| magazin dashicons | \f513 | |
| dashicons-palmier | \f527 | |
| dashicons-album | \f514 | |
| zâmbetul lui dashicons | \f328 |
Am ales cele mai populare pictograme, iar restul le puteți vedea pe site-ul oficial.
Timp de citire: 5 min
Continuăm să facem șablonul dvs. de site unic și individual. De data aceasta vă sugerez să faceți o pictogramă vizavi de numele categoriei sau paginii din meniu (sus sau bara laterală).
Pluginul Category and Page Icons, care este distribuit gratuit și ușor de configurat, va ajuta la implementarea planului.
Pictogramele categorii și pagini vă permit să setați propriile pictograme pentru categoriile care sunt afișate în bara laterală (bara laterală a site-ului) folosind un widget. La fel, cu paginile (a nu se confunda cu articolele) pe care le creezi prin panoul de administrare al blogului tău. Vedeți captura de ecran:
Captura de ecran arată trei categorii și fiecare are propria pictogramă. Este exact ceea ce face pluginul în cauză.
Nu este nevoie de nicio intervenție specială în codul site-ului pentru a conecta pluginul. Începe să funcționeze automat dacă sunt utilizate funcții în codul site-ului wp_list_pagesȘi wp_list_categories.
Toate instalate și activate. Acum a apărut un nou bloc în consola de administrare a site-ului, numit icoane. Acest bloc are 2 subsecțiuni:
- Pictograme - în această secțiune: încărcăm pictograme; atribuie pictograme unor categorii și pagini specifice; elimina pictogramele.
- Setări (Setări) - aici: atribuim folderul în care se vor afla pictogramele; setați lățimea și înălțimea pictogramelor.
Să începem (Setări) cu setările acestui articol anume (așa ar trebui să fie :)))
În setări, în ordine, merge:
- Locația folderului cu pictograme de pe găzduirea dvs. Valoarea implicită este wp-content/încărcări/icoane. Dacă aveți o nevoie urgentă, puteți schimba această cale creând mai întâi un folder și setându-i drepturile la 777.
- Lățimea și înălțimea - totul este clar aici: setăm dimensiunile pictogramei tale. Bifând caseta - vei decupa imaginea mai mare, păstrând proporțiile.
- Ștergeți datele pictogramelor - atunci când ștergeți acest plugin, puteți șterge și setările pictogramelor pentru categorii și pagini, dar pictogramele în sine vor rămâne fizic pe găzduirea dvs.
- Notificare privind drepturile de autor - când acest articol este bifat, veți avea un link către dezvoltatorii de plugin în subsolul (subsolul) site-ului. Decide pentru tine.
Acum este rândul să încărcați pictogramele (articolul Pictograme) și să începeți să le plasați.
- Adăugați / șterge pictograme - ni se oferă imediat să încărcăm pictograme pe găzduire. Acest lucru se poate face din panoul de administrare (Choose Icons to upload - Select a file), sau prin ftp (de aceea am început cu setările pluginului, care specifică folderul în care vom pune pozele). În același paragraf, le putem elimina pe cele inutile.
- Elemente de meniu Atribuiți pictograme paginilorȘi Atribuiți pictograme categoriilor- alegeți o pictogramă pentru pagini și, respectiv, titluri. Totul este foarte simplu aici: în fața fiecărui titlu (pagină) există un câmp pentru selectarea unei pictograme din lista celor pe care le-ați încărcat. Tot ce rămâne este să specificați pictograma și să faceți clic pe Salvare.
Dacă ați lucrat deja cu WordPress, probabil ați văzut că tot conținutul util sub formă de imagini, foi de stil, teme și pluginuri în WordPress este stocat implicit în folder. wp-conținut. Dar probabil că nu ți-ai dat seama că numele acestui folder poate fi schimbat cu altceva, iar motorul va funcționa în continuare!
Unul dintre avantajele redenumiri „wp-content/” este că site-ul dvs. va arăta mai puțin WordPress-y, în timp ce această proprietate poate adăuga, de asemenea, un fel de securitate sau ceva.
Acum vom arăta cum se poate face acest lucru.
Creați un folder nou
În exemplul nostru, vom redenumi folderul wp-conținutîn active. Vă rugăm să rețineți că, după redenumirea acestui folder, toate pluginurile sau temele activate vor fi dezactivate și nu vor apărea pe paginile alocate acestora, deoarece WordPress nu le poate găsi în locația implicită - folderul wp-content.
Modificarea configurației
Acum trebuie să faceți câteva modificări fișierului wp-config.php, dar este mai bine să faceți o copie de rezervă a acestui fișier înainte de a-l modifica. Și apoi, în caz de ceva neprevăzut, îl putem returna oricând din backup.
Mai întâi, adăugați următoarea linie înainte require_once(ABSPATH . 'wp-settings.php');(situat de obicei în partea de jos) pentru a spune WordPress că calea wp-conținut a fost schimbat în active.
Define("WP_CONTENT_FOLDERNAME", "active");
Adăugăm apoi următoarea linie chiar sub cea anterioară pentru a indica WordPress către noua cale de folder.
Define("WP_CONTENT_DIR", ABSPATH . WP_CONTENT_FOLDERNAME) ;
După adăugarea liniei de mai sus, WordPress va detecta și afișa din nou o listă de teme și pluginuri instalate.
Pentru a remedia acest lucru, adăugați această linie pentru a specifica un nou link către dosar.
Define("WP_SITEURL", "http://" . $_SERVER["HTTP_HOST"] . "/"); define("WP_CONTENT_URL", WP_SITEURL . WP_CONTENT_FOLDERNAME);
Asta e tot. Acum toate pluginurile, temele și orice alte conținuturi media pe care le încărcați vor fi stocate în noul nostru dosar.
Ar trebui notat!
Există unele pluginuri și teme care nu respectă standardele de dezvoltare. Ei specifică „wp-content” ca cale și codifică hard linkul, conectând calea în fișier, mai degrabă decât definindu-le din mers. În astfel de cazuri, este posibil ca pluginurile și temele să nu funcționeze complet sau să nu funcționeze deloc.
În plus, întrerupe și link-uri către imagini care sunt deja atașate la postări și au fost încărcate în dosar wp-conținut.
Prin urmare, modificarea de mai sus ar trebui aplicată cu grijă și, în mod ideal, desigur, este mai bine să faceți acest lucru dacă doar doriți să instalați WordPress sau doar să îl instalați. În caz contrar, site-ul se poate „defecta” complet și va trebui să remediați un număr mare de detalii.
Cum să schimbați calea media implicită în WordPress
Noul instrument de încărcare a fișierelor media introdus în versiunea 3.5 este probabil una dintre cele mai semnificative modificări din acea versiune. O altă modificare importantă, dar mai puțin discutată, a fost dispariția setării din panoul de administrare pentru a schimba directorul pentru descărcări din meniu Parametrii. Motivul pentru această eliminare din interfață a fost că nu a fost folosit la fel de des ca celelalte opțiuni. De asemenea, schimbarea acestuia ar putea duce la consecințe dezastruoase pentru site dacă utilizatorul a făcut-o din întâmplare. Eliminarea setării a simplificat interfața, lăsând doar posibilitatea de a organiza folderele pe lună/an. Mai jos vă vom arăta cum să schimbați calea media implicită în WordPress 3.5+.
Notă: Urmați pașii de mai jos dacă NU sunteți nou în WordPress. Sau dacă știi ce faci.
Pentru a schimba calea implicită la fișierele media, trebuie să editați fișierul wp-config.php situat în directorul rădăcină al instalării dvs. WordPress. Dacă doriți ca folderul de descărcare să arate așa wp-conținut/fișiere, atunci trebuie să introduceți următorul cod wp-config.php:
Define("ÎNCĂRCĂRI", "wp-content/"."fișiere");
Dacă doriți ca folderul de descărcări să fie în afara directorului wp-content, cum ar fi http://www.example.com/files/ , atunci trebuie să setați calea de descărcări în wp-config.php astfel:
Define("ÎNCĂRCĂRI", ""."fișiere");
Amintiți-vă că oricând puteți alege să sortați fișierele descărcate după lună/an Opțiuni » Fișiere media.
Nu știți cum să adăugați imagini la categoriile, etichetele și alte taxonomii dvs. în WordPress? După ce ați citit acest articol, veți învăța cum să o faceți.
Taxonomiile sunt o modalitate de a grupa diferite lucruri în WordPress. Categoriile și etichetele sunt taxonomiile de bază care sunt încorporate în WordPress. În acest articol, vă vom arăta cum să adăugați pictograme nu numai la categorii, ci și la orice alte taxonomii din WordPress.
De ce să adăugați pictograme la categorii?
Tipurile de postări personalizate și taxonomiile fac din WordPress un CMS (sistem de management al conținutului) complet. În mod implicit, WordPress vine cu categorii și etichete, care sunt două taxonomii implicite pe care le puteți folosi pentru a vă sorta postările.
De asemenea, vă puteți crea propriile taxonomii personalizate și le puteți conecta la orice tip de postare de pe site-ul dvs. WordPress. Acest lucru va ajuta utilizatorii să obțină conținutul găsit în aceste taxonomii.
Imaginile de taxonomie sunt miniaturi sau pictograme care sunt aplicate termenilor din fiecare taxonomie.
Să vedem cum să adăugați imagini la taxonomii în WordPress.
Adăugarea de imagini la taxonomii în WordPress
Primul lucru de care avem nevoie este să instalăm pluginul Taxonomy Images. După activare, va trebui să vizitați pagina Setări » Imagini taxonomie pentru a configura setările pluginului.
Veți vedea o listă de taxonomii disponibile pentru site-ul dvs. WordPress. Selectați taxonomiile de care avem nevoie, apoi faceți clic pe butonul Salvare modificări.
În captura de ecran de mai sus, am inclus imagini pentru categorii.
Pentru a adăuga imagini la fiecare categorie, trebuie să accesați pagina Postări » Categorii. Dacă ați inclus imagini pentru alte taxonomii, va trebui să vizitați pagina de taxonomie corespunzătoare din panoul de administrare WordPress.
Pe pagina de rubrici, veți vedea o nouă coloană numită Imagine în lista de rubrici. Deoarece nu au fost adăugate imagini încă, veți vedea o imagine de substituent standard cu un buton de adăugare pentru fiecare categorie.
Faceți clic pe butonul de adăugare, care se află imediat sub imaginea substituentului. Va apărea o fereastră pop-up de bază pentru încărcarea conținutului media în WordPress.
Puteți selecta o imagine din biblioteca dvs. media WordPress sau puteți încărca una nouă. După aceea, adăugați imagini la toți ceilalți termeni din taxonomia dvs.
Puteți șterge o imagine în orice moment făcând clic pe butonul special de sub imagine.
Afișarea imaginilor pentru taxonomii pe un site WordPress
Pentru a afișa imagini pentru taxonomii pe un site WordPress, trebuie să vă editați tema (sau tema copil).
În primul rând, va trebui să vă conectați la site-ul dvs. prin FTP.
După conectarea la site, va trebui să găsiți șablonul responsabil pentru afișarea arhivelor taxonomiilor dvs. Acest fișier poate fi archives.php, category.php, tag.php sau taxonomy.php.
Trebuie să descărcați fișierul pe computer și să îl deschideți cu un editor de text, cum ar fi Notepad++ sau TextEdit.
Lipiți următorul cod unde doriți să apară imaginea taxonomiei dvs.
De obicei, acest cod este adăugat înainte de titlul taxonomiei sau eticheta the_archive_title().
printeaza filtre aplicate( „taxonomie-imagini-interogată-termen-imagine”, "" );După ce adăugați codul, salvați fișierul și încărcați-l înapoi pe site prin FTP.
Acum puteți vizita arhivele de taxonomie pentru a vedea imaginea. Iată cum arată pagina demo cu arhivele.
Puteți folosi CSS pentru a stila imaginea. Utilizatorii experimentați pot găsi exemple de cod pe pagina de plugin.
Se încarcă...