Salutare cititori)

În acest articol, vom analiza inserarea pictogramelor sociale pe site-ul dvs. Joomla.

Pictogramele sociale sunt necesare pentru ca utilizatorul să poată partaja articolul dvs. sau un link către site prin intermediul rețelelor sociale.

Mai întâi, să mergem la site-ul web share42.com/ru.

Acest site vă permite să generați un script și aspect icoane

Pasul 1 - Selectați dimensiunea și marcați pictogramele dorite:

Selectați dimensiunea pictogramei (32x32, 24x24, 16x16 pixeli). Valoarea implicită este 32x32 px.

Selectăm rețelele de care avem nevoie (doar faceți clic pe pictograme, puteți glisa și plasați pentru a seta ordinea dorită)

Pasul 2 - Configurare:

• selectați tipul de panou cu pictograme: orizontal, vertical (plutitor);
• limitați numărul de pictograme vizibile (disponibile la selectarea tipului - verticală);
• codificarea site-ului, pentru joomla este UTF-8;
• adăugați sau nu adăugați o pictogramă de site share42 (la discreția dvs.);
• link către RSS, disponibil dacă pictograma RSS a fost marcată anterior;
• activarea JQuery, setat pentru contorul de publicații;
• După acești pași, putem privi un exemplu despre cum va arăta blocul nostru de pictograme și putem descărca scriptul terminat.

Următorii pași sunt să instalați scriptul pe site-ul dvs. web.

După descărcarea arhivei cu scriptul, trebuie să dezarhivați folderul share42 la rădăcina site-ului.

La punctul nr. 4 - „Selectați cel mai potrivit tip de site”, selectați „Orice site”.

Acum copiați codul:

În loc de site.name, indicați domeniul site-ului dvs. Și introduceți-l în codul sursă al șablonului sau într-un modul de tip „HTML”.

Pentru a proiecta panoul cu pictograme, folosim codul CSS propus:

#share42 (complet: 6px 6px 0; fundal: #FFF; chenar: 1px solid #E9E9E9; chenar-rază: 4px;)

#share42:hover (fond: #F6F6F6; chenar: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;)

#share42 a (opacitate: 0,5)

#share42:hover a (opacitate: 0,7)

#share42 a:hover (opacitate: 1)

Îl inserăm în orice fișier CSS de pe site-ul dvs.

Setări suplimentare de configurat:

Parametru	Descriere	Exemplu de utilizare
	titlul paginii
descrierea datelor	descrierea paginii
	calea către folderul cu fișierul icons.png
Opțiuni pentru panoul vertical
	distanța de la începutul paginii până la panou, în pixeli
	distanța de la partea de sus a zonei vizibile a paginii până la panou, în pixeli
	offset orizontal al panoului, în pixeli (valoare negativă - la stânga, valoare pozitivă - la dreapta)

Iată cum ar trebui să arate:

Asta e tot, succes)

P.S Dacă ceva nu este clar, scrieți comentarii.

Acest tutorial vă va arăta cum să utilizați imagini în loc de text pentru elementele de meniu în Joomla.

Există mai multe moduri de a adăuga pictograme în meniu:

Adăugarea de imagini în meniuri folosind Menu Manager

Modulul standard Joomla pentru lucrul cu meniuri vă va permite să înlocuiți numele elementelor de meniu cu imagini:

Adăugarea de imagini utilizând codul CSS

A doua metodă se bazează pe adăugarea clasei CSS de imagine la fișier (unde ### este numărul șablonului). Unele module de meniu pentru Joomla, cum ar fi modulul IceMegaMenu, nu vă vor permite să adăugați o imagine pentru un element de meniu în panoul de administrare. Puteți adăuga o imagine folosind codul css:

Folosind imaginea de fundal în codul CSS:

Utilizarea pictogramelor FontAwesome:

Explorați-vă site-ul folosind Instrumentul pentru dezvoltatori pentru a găsi o clasă CSS personalizată.

Efectuați modificări în fișierul templates/theme###/css/templates.css (unde ### este numărul de șablon).

Codul CSS pe care trebuie să-l adăugați la fișier arată de obicei astfel:

#iceMenu_101 .iceMenuTitle:before (familie de fonturi: FontAwesome !important; conținut: „###” !important; dimensiunea fontului: 45px !important; sus: 20px !important; poziție: relativă !important; afișare: bloc inline !important; line-height: 45px !important; 90px !important; .iceMenuTitle (font:0/0 a !important; )

Unde ### este clasa de pictograme FontAwesome. O listă de pictograme disponibile poate fi găsită pe site-ul web FontAwesome.

Verificați site-ul pentru a vedea modificările.

Acum știi cum să folosești imagini în loc de text în elementele de meniu în Joomla.

Favicon este un fel de pictogramă de site. Poate fi văzut în filele browserului, iată un exemplu de patru site-uri populare. Fiecare dintre ele are propria imagine favicon.

De asemenea, motorul de căutare Yandex afișează o favicon lângă titlul paginii.

Marea majoritate a site-urilor au o favicon, care ajută la evidențierea altor resurse, precum și pentru a face site-ul mai ușor de recunoscut. Folosind o favicon, vă va fi mai ușor să vă urmăriți pozițiile în Yandex.

Crearea unui favicon folosind un generator online

Mai întâi trebuie să pregătiți o imagine care măsoară 16 pe 16 pixeli. Acest dimensiune standard favicon. Pentru a face acest lucru, puteți folosi sigla site-ului sau imaginea dvs. preferată. Pentru a ajusta dimensiunea necesară, puteți utiliza programul „Paint” sau alt program terță parte.

Vă rugăm să rețineți că atunci când comprimați imaginea la 16 pe 16 pixeli. Dimensiunile laturilor originalului trebuie să fie aceleași. Să spunem 243 pe 243 pixeli. În caz contrar, atunci când este comprimată, imaginea deja mică va deveni neclară.

În continuare, vom folosi generatorul de favicon online. Urmând acest link favicon.ru Pe pagina principală, în elementul „Creați o favicon dintr-o imagine”. Selectați o imagine pregătită în prealabil pe computer, care măsoară 16 pe 16 pixeli.

Următorul pas este „editați imaginea”. Aici facem clic pe „Salvare proporții” și „următorul”.

Acum favicon-ul nostru este gata. Rămâne doar să vedeți cum arată în browser și să îl descărcați. De asemenea, puteți edita imaginea dacă doriți. Sau creează-l de la zero.

Favicon-ul descărcat are formatul necesar (.ico) și numele favicon-ului. Nu este nevoie să schimbi nimic. Tot ce rămâne este să-l instalezi pe site.

Instalarea favicon pe joomla 3

Prima și mai ușoară metodă de instalare este înlocuirea favicon-ului nativ. Cele mai multe șabloane joomla au deja un favicon, trebuie doar să îl schimbați în favicon-ul pe care l-am pregătit.

Pentru a face acest lucru, trebuie să mergeți la rădăcina site-ului. Apoi, accesați folderul „șabloane” și găsiți folderul cu șablonul implicit. Am acest șablon nativ „Beez3” și schimb favicon-ul acolo cu cel creat de noi.

Apoi accesați site-ul dvs. și actualizați pagina de start. Dacă favicon-ul nu s-a schimbat, goliți memoria cache a browserului, închideți-l și deschideți-l din nou, introducând din nou adresa paginii. Pictograma ar trebui să se schimbe.

Dar nu ar trebui să așteptați imediat favicon-ul în rezultatele căutării Yandex. Va apărea după ce un bot special vă indexează imaginea și o convertește în format jpg. Acest lucru poate dura mai mult de o lună.

Puteți verifica dacă Yandex v-a indexat favicon-ul sau nu tastând în browser: http://favicon.yandex..ru", introduceți numele de domeniu al site-ului dvs.

Pentru Google: http://www.google.com/s2/favicons?domain=site

Dacă prima metodă de instalare nu a ajutat și favicon-ul nu a apărut pe site-ul dvs., atunci o puteți instala scriind codul necesar în fișierul index.php.

A doua modalitate de a instala favicon pe joomla 3

Pentru a instala o imagine, trebuie să plasați favicon-ul pe care l-am pregătit în rădăcina site-ului.

Apoi, accesați folderul cu șablonul implicit: șabloane / șablon implicit. Găsiți și deschideți fișierul index.php folosind notepad++. În acest document, între eticheta de deschidere și eticheta de închidere, introduceți următorul cod:

Tot ce rămâne este să ștergeți memoria cache a browserului și să reîncărcați site-ul. După care ar trebui să apară favicon-ul pe site-ul dvs.

De la autor: Salutări, dragi cititori. În acest articol vă vom vorbi despre un mic, dar în același timp util detaliu al oricărui site bun, o pictogramă pentru CMS Joomla - favicon. Veți învăța cum să adăugați o favicon la un site web, precum și cum să schimbați unul existent.

Pentru cei care nu stiu, un favicon este o pictograma mica (icoana) a unui site care este afisata de un browser web in fila imediat inaintea titlului site-ului, sau mai exact, inaintea continutului etichetei title. Adică, în mare, aceasta este o imagine de un anumit format și dimensiune cu extensia ico.

În același timp, veți fi de acord că o favicon selectată corect oferă site-ului unicitate și unicitate și este, de asemenea, reținută rapid de utilizatori. Motoarele de căutare, atunci când formează o listă cu rezultatele căutării (o listă cu rezultatele căutării), acestea afișează și un favicon în fața titlului site-ului.

Aceasta înseamnă că primul lucru care va atrage atenția utilizatorului este tocmai pictograma – pictograma site-ului prin urmare, nici măcar nu merită să vorbim despre faptul că dacă utilizatorul vede un prieten printre ei, acest lucru îl va împinge să viziteze site-ul; . Prin urmare, întrebarea cum să schimbi favicon-ul în joomla 3 este destul de populară printre începători, iar mai jos voi încerca să dau un răspuns detaliat.

Pentru a asigura compatibilitatea între browsere, atunci când creați un favicon, de regulă, alegeți formatul de imagine ico, deoarece este acceptat de absolut toate browserele. Deși browserele moderne acceptă acum formate precum PNG și GIF, Mozilla FireFox de asemenea, JPEG, precum și GIF animat. Dar, într-un fel sau altul, există utilizatori care folosesc versiuni învechite browsere web, așa că, în opinia mea, încă merită să folosiți ico-ul general acceptat.

După ce ne-am hotărât formatul, să aflăm dimensiunea imaginii care poate fi folosită ca pictogramă de site. Totul este simplu aici, dimensiunea favicon-ului este destul de „standard” și este de 16x16 pixeli, dacă trebuie să asigurați compatibilitate maximă între browsere. În același timp, pentru diferite dispozitive mobileși browserele lor specifice, puteți utiliza dimensiunile pictogramelor de 32x32, 96x96 și chiar 192x192 pixeli.

Acum să vorbim despre cum să instalați o favicon pe un site web Joomla. Dar, deoarece nu avem încă o pictogramă, să creăm una. Cea mai convenabilă modalitate de a crea este utilizarea generatoarelor on-line, deoarece astfel vă scutiți de instalarea suplimentară software, iar de regulă, aceste servicii, împreună cu pictogramele create, oferă copierea codului necesar pentru afișarea pictogramei.

Unul dintre cele mai populare servicii pentru crearea pictogramelor favicon în acest moment este generatorul favicon.ru, pe care îl folosim în acest articol. Există și un generator de favicon-generator destul de bun (favicon-generator.org), care, în loc de o pictogramă, creează o întreagă arhivă în care sunt generate pictograme de diferite dimensiuni. În consecință, pentru fiecare dimensiune, este dat și codul de conectare.

Pentru a crea o favicon, selectați următoarea imagine.

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru o creștere rapidă de la zero în construirea site-ului web

Acum este suficient să încărcați imaginea selectată folosind un formular special și, în general, generarea va fi finalizată.

După încărcarea imaginii, selectați zona de interes din care se va forma pictograma și faceți clic pe „Următorul”.

După generare, puteți vedea un exemplu de afișare a unei noi favicon în browser și, dacă sunteți mulțumit de aspect, faceți clic pe butonul „Descărcați favicon” pentru a descărca fișierul. Astfel, pictograma este gata.

Favicon în Joomla – situat în rădăcina directorului de șabloane active. De exemplu, pentru șablonul Beez3, acest folder este templates\beez3. Aceasta înseamnă că trebuie doar să plasați fișierul descărcat în folderul specificat, înlocuind astfel pictograma standard și să actualizați informațiile în browser. Codul care afișează favicon-ul în browser este generat direct de motorul Joomla, deci nu este nevoie să îl scrieți manual. Pentru cei interesați, permiteți-mi să clarific că acest cod este generat la \libraries\joomla\document\html, în fișierul html.php. Pentru a afișa o pictogramă, nucleul Joomla oferă o metodă specială numită addFavicon(), care este numită în fișierul de mai sus.

Acum, știi cum să schimbi favicon-ul în joomla 3, singurul lucru pe care mi l-aș dori, ca să spun așa pentru dezvoltarea generală, este să furnizez codul pentru afișarea pictogramei - pentru cazul în care trebuie să-l scrii manual.