V tomto článku sa pozrieme na to, ako vložiť ikony do položiek ponuky webu Joomla tak, aby sa zobrazoval nielen názov, ale aj vedľa neho bola ikona symbolizujúca túto položku ponuky. Pripomeniem, že pracujem so šablónou Protostar. A materiál v tomto článku ovplyvňuje štýly tejto konkrétnej šablóny. Ak však použijete inú šablónu, nie je pravda, že nižšie uvedený recept bude zbytočný. ;)

Formulácia problému

Takže máme hlavné menu webu, ktoré už máme presunuté do hlavičky stránky a dokonca to dal horizontálne usporiadanie... Vyzerá to takto:

Vo všeobecnosti štandardné menu. Ale nie je v ňom žiadna individualita, ale ja veľmi chcem. =)

Keď sme sa teda pozreli na iné weby, že je možné vkladať ikony do položiek ponuky vedľa ich názvov, urobíme to aj na našich stránkach.

Správca menu. Položka ponuky. Tabuľka možností prepojenia

Aby sme mohli zmeniť vzhľad našej položky ponuky, potrebujeme administračný panel Joomla, konkrétne „ Parametre odkazu", Ktorý je k dispozícii v" Správca menu»Pri úprave alebo vytvorenie položky ponuky... Budeme pracovať s poľom „“, ako je znázornené na obrázku:

1. Do poľa zadajte názov ikony, ktorú chceme v položke ponuky vidieť pred jej názvom, napríklad ikonoví užívatelia
2. Okamžite vložte miesto do poľa “ Názov ponuky"(Aby sa ikona nezlučovala s názvom položky ponuky)
3. Uložme zmeny a uvidíme, čo sa stalo

Názov položky ponuky sa plazí nadol (nie je umiestnený horizontálne, ale vertikálne)

Keď sa pozriete na výsledný výsledok, všetko vyzerá deprimujúco. Aj keď sa ikona objavila v položke ponuky, plazila sa až k názvu položky ponuky a vertikálne sa tiahla po jednom písmene:

Oprava situácie. Položku ponuky prinášame do horizontálneho pohľadu.

Ešte nerozumiem, čím sa tvorcovia predlohy Protostar riadili a prečo sa taký jamb objavuje. Jedna vec je jasná: vlastnosť zobrazenia položky ponuky je nastavená na blokovanie, takže zobrazuje každý znak blok po bloku a ukladá ich pod seba. Musíme ich roztiahnuť do riadka, čo znamená, že hodnota vlastnosti zobrazenia by mala byť vložená.

Ak to chcete urobiť, musíte vykonať zmeny v súbore template.css, ktorý sa nachádza v priečinku šablóny:

./templates/protostar/css/template.css

Tento tutoriál vám ukáže, ako pridať chýbajúce ikony FontAwesome do šablóny Joomla 3.x.

Na vašom webe môžu chýbať niektoré ikony. Je to pravdepodobné vtedy, ak bola vydaná nová verzia písma FontAwesome, alebo ak návrhár pridal iba ikony použité v ukážke šablóny.

Pripojte sa k serveru pomocou klienta FTP alebo otvorte správcu súborov cPanel a nájdite súbor šablóny / themeXXX / css / template.css.

Nájdite posledný z kódov pre ikony FontAwesome v template.css. Potom musíte pridať nové ikony, napríklad ikonu fa-comments:



Teraz otvorte súbor šablóny / themeXXX / menej /font-awesome/font-awesome.css, nájdite poslednú položku zoznamu ikon zo súboru template.css v súbore, ktorý ste otvorili. Skopírujte celý kód pod túto ikonu (v našom prípade ide o fa-comments) a prilepte tento kód na koniec súboru template.css.

Uložte zmeny. Teraz môžete vidieť ikony, ktoré sa zobrazujú na vašom webe:



Ak z nejakého dôvodu vo vašej šablóne chýba súbor font-awesome.css, otvorte súbor na oficiálnom serveri FontAwesome a skopírujte kód zo súboru maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css na konci template.css.

Od autora: Zdravím vás, milí čitatelia. V tomto článku sa s vami porozprávame o malom, ale zároveň užitočnom detaile každého dobrého webu, ikone pre CMS Joomla - favicon. Dozviete sa, ako pridať favicon na stránku, ako aj zmeniť existujúci.

Pre tých, ktorí nevedia, je favicon malá ikona (ikona) webu, ktorá sa zobrazuje vo webovom prehliadači na karte bezprostredne pred názvom stránky, presnejšie pred obsahom značky názvu. To znamená, že celkovo ide o obrázok určitého formátu a veľkosti s príponou ico.

Zároveň musíte súhlasiť s tým, že správne zvolený favicon dodá stránke jedinečnosť a originalitu a tiež si ho používatelia rýchlo zapamätajú. Vyhľadávače, ktoré tvoria zoznam výsledkov vyhľadávania (zoznam s výsledkami vyhľadávania), tiež zobrazujú pred názvom stránky favicon.

To znamená, že prvá vec, ktorá upúta pozornosť používateľa, je práve ikona - ikona stránky, respektíve ani nestojí za to hovoriť o tom, že ak používateľ medzi nimi uvidí priateľa, bude ho to tlačiť na navštívte stránku. Preto je otázka, ako zmeniť favicon v joomla 3, medzi začiatočníkmi veľmi populárna, a potom sa pokúsim dať podrobnú odpoveď.

Aby bola zaistená kompatibilita medzi prehliadačmi, pri vytváraní faviconu sa spravidla volí formát obrázku ico, pretože ho podporujú úplne všetky prehliadače. Aj keď teraz moderné prehliadače podporujú také formáty ako PNG a GIF, Mozilla FireFox podporuje aj JPEG a animovaný GIF. Ale tak či onak existujú používatelia, ktorí používajú zastarané verzie webových prehliadačov, takže podľa môjho názoru by ste stále mali používať všeobecne uznávaný formát ico.

Keď vezmeme do úvahy formát, zistíme veľkosť obrázka, ktorý možno použiť ako ikonu webu. Všetko je tu jednoduché, veľkosť faviconu je dosť „štandardná“ a je 16 x 16 pixelov, ak potrebujete zaistiť maximálnu kompatibilitu medzi prehliadačmi. Zároveň pre rôzne mobilné zariadenia a ich konkrétne prehliadače môžete použiť ikony 32 × 32, 96 × 96 a dokonca 192 × 192 pixelov.

Teraz sa porozprávajme o tom, ako nainštalovať favicon na vašu stránku Joomla. Keďže však ikonu ešte nemáme, vytvorte si ju. Najpohodlnejším spôsobom vytvárania je použitie online generátorov, pretože sa tak ušetrí inštalácia ďalšieho softvéru a spravidla tieto služby spolu s vytvorenými ikonami ponúkajú skopírovanie kódu, ktorý je potrebný na zobrazenie ikona.

Jednou z najobľúbenejších služieb na vytváranie ikon favicon je v súčasnosti generátor favicon.ru, ktorý používame v tomto článku. Tiež celkom dobrý generátor favicon-generator (favicon-generator.org), ktorý namiesto jednej ikony vytvorí celý archív, v ktorom sa generujú ikony rôznych veľkostí. Preto je pre každú veľkosť uvedený aj kód pripojenia.

Ak chcete vytvoriť favicon, vyberte nasledujúci obrázok.

Moderné trendy a prístupy vo vývoji webových aplikácií

Naučte sa algoritmus rýchleho rastu od začiatku pri vytváraní stránok

Teraz stačí nahrať vybraný obrázok pomocou špeciálneho formulára a generácia sa dokončí.

Po načítaní obrázku vyberte oblasť záujmu, z ktorej sa ikona vytvorí, a kliknite na „Ďalej“.

Po vygenerovaní môžete vidieť príklad zobrazenia nového favicon v prehliadači, a ak vám zobrazenie vyhovuje, kliknutím na tlačidlo „Stiahnuť favicon“ súbor stiahnete. Ikona je teda pripravená.

Favicon in jumla - nachádza sa v koreňovom adresári aktívnej šablóny. Napríklad pre šablónu Beez3 je to priečinok templates \ beez3. To znamená, že stačí umiestniť stiahnutý súbor do určeného priečinka, čím nahradíte štandardnú ikonu, a aktualizujte informácie v prehliadači. Kód, ktorý zobrazuje favicon v prehliadači, je generovaný priamo motorom Joomla, takže ho nemusíte písať ručne. Koho zaujíma objasniť, že tento kód je generovaný v \ libraries \ joomla \ document \ html, v súbore html.php. Na zobrazenie ikony poskytuje jadro Joomla špeciálnu metódu nazývanú addFavicon (), ktorá sa nazýva v uvedenom súbore.

Teraz viete, ako zmeniť favicon v joomla 3, jediná vec, ktorú by som takpovediac chcel pre všeobecný vývoj, je priniesť kód na zobrazenie ikony - v prípade, že ho potrebujete napísať ručne.

Ďalšou identifikáciou vášho webu Joomla môže byť jedinečná ikona alebo favicon. Favicon na webe Joomla sa v prehliadačoch prejaví v názve záložiek a záložiek vytvorených spolu so všetkými stránkami na vašom webe. Štandardne majú všetky weby spravované CMS Joomla rovnaké štandardné ikony. Jediným rozdielom je ikona pre viditeľnú časť stránky Joomla a pre panel správcu. Ikonu pre časť stránky, ktorú návštevníci vidia, je možné ľahko zmeniť.

Musím zmeniť ikonu (favicon) webu Joomla

Výmena ikony na vašom webe má vplyv iba na subjektívnu zložku optimalizácie webu. Návštevník, ktorý si vytvoril záložku stránky stránky, ju potom môže ľahko nájsť v zozname všetkých svojich záložiek. Ikona stránky sa navyše odráža vo vyhľadávacích a použitých nástrojoch. napríklad v zozname stránok v Yandex Webmaster.

Navyše nahradením štandardnej ikony Joomla prestanete inzerovať, že vašu stránku prevádzkuje Joomla, a to je jeden z krokov k zvýšeniu bezpečnosti stránky.

Požiadavky na novú ikonu Joomla

Favicon je skratka pre dve anglické slová, obľúbené položky a ikonu. Ikony Joomla majú svoj vlastný štandard. Ich veľkosť by mala byť 16x16 alebo 32x32 pixelov. Vyrobený favicon, by mal byť v 256 farbách. A čo je najdôležitejšie, formát ikony Joomla by mal byť favicon .ico.

Kroky na nahradenie faviconu Joomla

Výmena ikony stránky Joomla sa vykonáva v niekoľkých jednoduchých krokoch:

• Vytvorte jedinečnú ikonu z ľubovoľnej fotografie PNG alebo JPEG. Alebo nakreslite ikonu sami pomocou online služieb alebo fotografických programov;
• Vytvorte formát favicon ico, veľkosť 16 (32) × 16 (32) px;
• Nahrajte novú ikonu do adresára stránok a súčasne odstráňte všetky staré ikony;
• Vložte vlastný kód do šablóny domovskej stránky vášho webu.

Poďme analyzovať každý krok podrobne.

Krok 1. Vytvorenie ikony pre stránku Joomla

Na internete je veľa online nástrojov na generovanie ikon favicon .ico z akejkoľvek fotky. Tu musíte venovať pozornosť nasledujúcemu.

Ak chcete, aby bol váš favicon bez bieleho pozadia, jeho zdroj musí byť pri vytváraní a vo formáte s priehľadným pozadím. PNG pri ukladaní... Použitím iných formátov fotografií ako png získate favicon s bielym alebo čiernym pozadím. Vynikajúce archívy ikon na internete nájdete v hornom menu tejto stránky v časti: Nástroje správcu webu.

Generátory faviconov môžete nájsť aj vy sami zadaním do vyhľadávacieho poľa: generátor favicon. Tu sú adresy generátorov ikon.

1. pr-cy.ru/favicon
2. tools.dynamicdrive.com/favicon

• ikonafinder.com
• freepik.com/free-icons
• genericons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• iconspedia.com
• iconsearch.ru
• icons8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• themify.me
• thenounproject.com
• flaticon.com

Ikony favicon sú vyrobené nasledovne

• Vopred nájdite originálny obrázok pre svoju budúcu ikonu;
• Otvorte generátor;
• V okne generátora zavádzača vyberte v počítači svoju ikonu. Vyberte veľkosť budúcej ikony pre Joomla 16 × 16 pixelov;
• Stlačte tlačidlo, napríklad „Vytvoriť“.
• Favicon je vygenerovaný v priebehu niekoľkých sekúnd. Potom si ho stačí stiahnuť do počítača. Na to slúži tlačidlo „Stiahnuť“. Ikona je v počítači, musíte ju nahrať do katalógu.

Krok 2. Nahrajte novú ikonu do adresára stránok

Situácia s miestom v adresári stránok, kam musíte nahrať novú ikonu (favicon) webu, je nasledovná.

Predtým bol koreň stránok požadovaným miestom na umiestnenie súboru favicon .ico. Teraz sa situácia trochu zmiernila. Použitie dynamických šablón vám umožňuje nahrať ikonu do ľubovoľného adresára na vašom webe, iba v kóde (nižšie) musíte jasne určiť cestu k tomuto adresáru. Zároveň si však musíte pamätať na to, že čím ďalej je ikona od koreňa stránky, tým dlhšie sa načítava do prehliadača. A musíte bojovať o rýchlosť načítania stránky, dokonca aj v malých veciach.

class = "eliadunit">

Preto vám odporúčame nahrať hlavný favicon do koreňa vášho webu Joomla. Na stiahnutie potrebujete klienta FTP alebo autorizáciu v administračnom paneli na hostiteľovi. Pred odoslaním nového favikonu skontrolujte všetky priečinky stránok a odstráňte alebo premenujte starý favicon, ktorý mohol byť nainštalovaný v stiahnutých šablónach. Samostatne skontrolujte priečinok so šablónami. Odstráňte súbor favicon.ico z podpriečinkov šablón. Keď starý favicon odstránite, nahrajte nový do koreňa webu. Favicon v adresári stránok, zostáva vložiť kód do šablóny hlavnej stránky webu.

Poznámka: V tejto fáze sa ikona stránky už môže zmeniť. V niektorých šablónach je kód na zobrazenie ikony (o nižšie uvedenom kóde) už zaregistrovaný v šablóne stránky, a preto keď sa ikona nahradí v katalógu, môže sa zmeniť aj na karte prehliadača. Aby ste to videli, musíte vymazať vyrovnávaciu pamäť webu a pravdepodobne reštartovať prehliadač.

Krok 3. Vložte kód do šablóny webu, aby sa zobrazila ikona favicon

Poznámka: Táto metóda je zastaraná, vo veľkých prehliadačoch sa nová ikona zobrazuje bez vloženia tohto kódu. Stačí odstrániť všetky staré favikony z koreňa lokality a zo šablóny. a tiež vymazať vyrovnávaciu pamäť prehliadača a webu.

Kód (nižšie) je vložený do šablóny hlavnej stránky webu Joomla medzi značky (príklad nižšie). Na internete nájdete niekoľko variantov kódov (favicon) pre stránky Joomla. Uvediem príklad iba tých kódov, ktoré fungujú na všetkých mojich stránkach Joomla.

Kód jeden... Ikona sa zobrazí takmer okamžite po vymazaní vyrovnávacej pamäte stránok.

Druhý kód... Pretože sa v prehliadači nezobrazuje typ prvku formulára (typ), zobrazí sa táto ikona v prehliadači po 1 až 2 dňoch.

Tretí kód. Pre ikonu (favicon), ktorá sa nenachádza v koreňovom adresári (patch-to je cesta k priečinku s favicon).

• Kódy fungujú s ikonou SHORTCUT ICON a ikonou skratky
• Ak je kód vašej stránky HTML, nie XHTML, musíte kód ukončiť príponou „>“, nie „/>“

Ak potrebujete zobraziť ikonu v prehliadači IE, skúste pridať kód takto:

Po vložení kódu do šablóny nezabudnite uložiť, tiež vymažte vyrovnávaciu pamäť stránok.

• Panel pre správu >>> Web >>> Údržba >>> Vymazať všetku vyrovnávaciu pamäť (pre verzie Joomla 1.7-2.5-3.x)
• Panel pre správu >>> Nástroje >>> Vymazať všetku vyrovnávaciu pamäť (pre verziu 1.5)

Príklad vloženého kódu na zobrazenie ikony webu:

Jednou z možností, ako zvýšiť atraktivitu stránok, je pridanie ikon do položiek ponuky. Ikony sú malé obrázky súvisiace s obsahom položky ponuky. Ich prínos spočíva v tom, že priťahujú pozornosť používateľov a robia ich vernejšími stránkam. V tomto článku vám ukážem dva spôsoby pridávania ikon k položkám ponuky: rýchly, ľahký, ale zlý a ťažký, dlhý, ale dobrý ..

Joomla... Krok 1. Výber veľkosti ikon.

Ikona je malý obrázok. Najprv sa pozrime na požiadavky na ikony. Zdôraznil by som:

1. Ikona musí zodpovedať textu.
2. Ikona musí mať priehľadné pozadie alebo pozadie podobné tomu, na ktorom je umiestnená ponuka.
3. Ikona by mala mať malú veľkosť súboru (nie „ťažkú“).

Najbežnejšia veľkosť ikon na internete je 16 x 16 pixelov, pretože to by mala byť veľkosť favicon stránok (malý obrázok umiestnený pred panelom s adresou v prehliadači).

Tu je príklad takejto ikony:

Pre webovú stránku zvolím túto veľkosť.

Pridávanie ikon k položkám ponukyJoomla... Krok 2. Vyhľadajte zodpovedajúce ikony.

Ak existuje niekoľko spôsobov hľadania a výberu ikon. Prvým je vyhľadávanie obrázkov Google.

Je zvláštne, že toto hľadanie stále funguje veľmi neobratne. Niekedy to nefunguje vôbec. Je 21. storočie a Yandex a Google sa nikdy nenaučili vyhľadávať obrázky podľa presnej veľkosti.

Aby sa vo vyhľadávaní zobrazovali iba ikony požadovanej veľkosti, vykonajte nastavenia:

Neponáhľajte sa, neprajníci Google, pokarhajte túto PS. Yandex vôbec nevyhľadáva presnú veľkosť :-).

Druhým spôsobom je vyhľadávanie stránok s množinami ikon alebo hľadanie súborov priamo. Ikony sa delia na bezplatné a komerčné. Výber bezplatných ikon je pomerne bohatý.

Ak potrebujete vyzdvihnúť veľa ikon, ľahko sa zamotáte. Nezabudnite si viesť zoznam, ako sú mapované položky ponuky a ikony.

Pridávanie ikon k položkám ponukyJoomla... Krok 3. Ikony väzby. Jednoduchý spôsob.

Keď sú ikony vybraté, môžete ich začať prepojovať s položkami ponuky na webe. Poviem vám dva spôsoby. Prvým bude ukotvenie v nastavení položky ponuky, možnosť „Odkaz na obrázok“:

Tu stačí vybrať obrázok pre položku ponuky a je to. Je to veľmi jednoduché, rýchle a pohodlné. Ale to nie je ani zďaleka najlepšia možnosť, a tu je dôvod. Každá ikona je obrázok, ktorý je zobrazený na webe. Prehliadač používateľa pri návšteve stránky načítava všetky obrázky postupne. Pošle žiadosť, dostane odpoveď, načíta obrázok. A tak ďalej, až kým si nestiahne všetky obrázky. Zakaždým, keď takáto operácia trvá zlomok sekundy, ale keď je k dispozícii veľa obrázkov, toto všetko má za následok ďalšie sekundy načítania stránky. Pozoruhodným príkladom, ako to neurobiť, je stránka joomla-master.org. Vývojár zrejme týmto spôsobom pridal obrázky k položkám ponuky. Pozrime sa, čo to zmenilo:

Otvorenie hlavnej stránky webu jednoducho znásilní prehliadač a počítač používateľa.

Pridávanie ikon k položkám ponukyJoomla... Krok 3. Väzbové ikony. Dobrý spôsob.

Dobrým spôsobom je použiť CSS sprites. Ich podstatou je, že všetky ikony sú umiestnené na jednom obrázku a je k nim prístup pomocou CSS. Vďaka tomuto prístupu prehliadač užívateľa načíta iba jeden obrázok a podľa toho sa zníži čas načítania stránky. Zlou správou je, že pridávanie ikon do položiek ponuky pomocou CSS sprite je oveľa zložitejšie ako vyššie uvedená metóda. Dobrou správou je, že v súčasnosti existujú služby, ktoré tvorbu sprajtov výrazne uľahčujú.

Pozrime sa, ako vytvoriť sprite.

Všetko je pripravené. Stáva sa, že musíte zobrazenie obrázkov sprite trochu viac upraviť. S Firebugom sa dá ľahko vyrovnať. Na ľavej strane môžete vidieť, čo sa stalo na tomto webe.

Hlavnou nevýhodou sprajtov je zložitosť ich aktualizácie. Ak napríklad máte dokonca jednu novú položku ponuky, ku ktorej potrebujete pridať ikonu, sprite bude potrebné znova vytvoriť.

Aj keď som povedal, že spôsoby vytvárania ikon pre položky ponuky Joomla sú jednoduché a dobré, nie je jasné, ktorá je lepšia. Každá metóda má svoje výhody a nevýhody. Ak je ikon málo alebo sa často menia, je lepšie použiť prvú metódu. Ak existuje veľa ikon a zostávajú konštantné, podobne ako položky ponuky, ku ktorým sú pripojené, potom musíte jednoznačne použiť sprajty.

V kontakte s