Sākums / Jaunumi / Ikonu pievienošana Joomla raksta virsrakstam. Ikonu pievienošana Joomla izvēlnes vienumiem. Vienkārši un labi veidi. Tagad nokopējiet kodu

Ikonu pievienošana Joomla raksta virsrakstam. Ikonu pievienošana Joomla izvēlnes vienumiem. Vienkārši un labi veidi. Tagad nokopējiet kodu

Sveiki lasītāji)

Šajā rakstā mēs aplūkosim sociālo ikonu ievietošanu jūsu Joomla vietnē.

Sociālās ikonas ir nepieciešamas, lai lietotājs varētu kopīgot jūsu rakstu vai saiti uz vietni, izmantojot sociālos tīklus.

Vispirms dodamies uz vietni share42.com/ru.

Šī vietne ļauj ģenerēt skriptu un izskats ikonas

1. darbība — atlasiet izmēru un atzīmējiet vajadzīgās ikonas:

Izvēlieties ikonas izmēru (32x32, 24x24, 16x16 pikseļi). Noklusējums ir 32x32 pikseļi.

Mēs izvēlamies vajadzīgos tīklus (vienkārši noklikšķiniet uz ikonām, varat vilkt un nomest, lai iestatītu vēlamo secību)

2. darbība — iestatīšana:

  • izvēlieties paneļa veidu ar ikonām: horizontāls, vertikāls (peldošs);
  • ierobežot redzamo ikonu skaitu (pieejams, izvēloties veidu - vertikāli);
  • vietnes kodējums, joomlai tas ir UTF-8;
  • pievienot vai nepievienot share42 vietnes ikonu (pēc saviem ieskatiem);
  • saite uz RSS, pieejama, ja iepriekš bija atzīmēta RSS ikona;
  • iespējot JQuery, iestatīt publikāciju skaitītājam;
  • Pēc šīm darbībām mēs varam apskatīt piemēru, kā izskatīsies mūsu ikonu bloks, un lejupielādēt gatavo skriptu.

Nākamās darbības ir skripta instalēšana savā vietnē.

Pēc arhīva ar skriptu lejupielādes, mape share42 ir jāizpako vietnes saknē.

4. punktā - “Izvēlies piemērotāko vietnes veidu”, atlasiet “Jebkura vietne”.

Tagad nokopējiet kodu:


Vietnes site.name vietā norādiet savas vietnes domēnu. Un ievietojiet to veidnes avota kodā vai "HTML" tipa modulī.

Lai izstrādātu ikonu paneli, mēs izmantojam piedāvāto css kodu:

#share42 (polsterējums: 6px 6px 0; fons: #FFF; apmale: 1px ciets #E9E9E9; apmales rādiuss: 4px;)

#share42:virs (fons: #F6F6F6; apmale: 1px ciets #D4D4D4; lodziņa ēna: 0 0 5px #DDD;)

#share42 a (necaurredzamība: 0,5)

#share42:virziet kursoru a (necaurredzamība: 0,7)

#share42 a:hover (necaurredzamība: 1)

Mēs ievietojam to jebkurā css failā jūsu vietnē.

Papildu iestatījumi, kas jākonfigurē:

Parametrs

Apraksts

Lietošanas piemērs

lapas virsraksts

datu apraksts

lapas apraksts

ceļš uz mapi ar failu icons.png

Vertikālā paneļa opcijas

attālums no lapas sākuma līdz panelim, pikseļos

attālums no lapas redzamā laukuma augšdaļas līdz panelim, pikseļos

paneļa horizontālā nobīde pikseļos (negatīvā vērtība - pa kreisi, pozitīva vērtība - pa labi)

Tam vajadzētu izskatīties šādi:

Tas arī viss, lai veicas)

P.S Ja kaut kas nav skaidrs, rakstiet komentāros.

Šī apmācība parādīs, kā Joomla izvēlnes vienumiem teksta vietā izmantot attēlus.

Ir vairāki veidi, kā izvēlnei pievienot ikonas:

Attēlu pievienošana izvēlnēm, izmantojot izvēlņu pārvaldnieku

Standarta Joomla modulis darbam ar izvēlnēm ļaus aizstāt izvēlnes vienumu nosaukumus ar attēliem:

Attēlu pievienošana, izmantojot CSS kodu

Otrā metode ir balstīta uz attēla css klases pievienošanu failam (kur ### ir jūsu veidnes numurs). Daži Joomla izvēlnes moduļi, piemēram, IceMegaMenu modulis, neļaus jums pievienot attēlu izvēlnes vienumam administratora panelī. Varat pievienot attēlu, izmantojot css kodu:

Fona attēla izmantošana css kodā:


  • Izmantojot FontAwesome ikonas:

  • Izpētiet savu vietni, izmantojot izstrādātāja rīku, lai atrastu pielāgotu css klasi.

    Veiciet izmaiņas failā templates/theme###/css/templates.css (kur ### ir jūsu veidnes numurs).

    CSS kods, kas jāpievieno failam, parasti izskatās šādi:

    #iceMenu_101 .iceMenuTitle:before ( fontu saime: FontAwesome !important; saturs: "###" !svarīgi; fonta izmērs: 45 pikseļi !svarīgi; augšpusē: 20 pikseļi !svarīgi; pozīcija: relatīvs !svarīgi; displejs: inline-block !svarīgi; line-height: 45px !important !important

    Kur ### ir FontAwesome ikonu klase. Pieejamo ikonu sarakstu var atrast FontAwesome vietnē.

    Pārbaudiet savu vietni, lai redzētu izmaiņas.

  • Tagad jūs zināt, kā Joomla izvēlnes elementos teksta vietā izmantot attēlus.

    Favicon ir sava veida vietnes ikona. To var redzēt pārlūkprogrammas cilnēs, šeit ir četru populāru vietņu piemērs. Katram no tiem ir savs favicona attēls.

    Turklāt Yandex meklētājprogramma blakus lapas nosaukumam parāda favicon.

    Lielākajai daļai vietņu ir favicon, kas palīdz izcelties starp citiem resursiem, kā arī padara vietni atpazīstamāku. Izmantojot favicon, jums būs vieglāk izsekot savām pozīcijām Yandex.

    Favicon izveide, izmantojot tiešsaistes ģeneratoru

    Vispirms jums ir jāsagatavo attēls ar izmēru 16 x 16 pikseļi. Šis standarta izmērs favicon. Lai to izdarītu, varat izmantot vietnes logotipu vai savu iecienītāko attēlu. Lai pielāgotu vajadzīgo izmēru, varat izmantot programmu "Paint" vai kādu citu trešās puses programmu.

    Lūdzu, ņemiet vērā, ka, saspiežot attēlu līdz 16 x 16 pikseļiem. Oriģināla sānu izmēriem jābūt vienādiem. Pieņemsim, ka 243 x 243 pikseļi. Pretējā gadījumā, saspiežot, jau tā mazais attēls kļūs izplūdis.

    Tālāk mēs izmantosim tiešsaistes favicon ģeneratoru. Sekojot šai saitei favicon.ru Galvenās lapas vienumā “Izveidot favicon no attēla”. Datorā atlasiet iepriekš sagatavotu attēlu, kura izmērs ir 16 x 16 pikseļi.

    Nākamais solis ir “rediģēt attēlu”. Šeit mēs noklikšķinām uz "Saglabāt proporcijas" un "nākamais".

    Tagad mūsu favicon ir gatavs. Atliek tikai redzēt, kā tas izskatās pārlūkprogrammā, un lejupielādēt to. Ja vēlaties, varat arī rediģēt attēlu. Vai arī izveidojiet to no nulles.

    Lejupielādētajam favicon ir nepieciešamais formāts (.ico) un favicon nosaukums. Nekas nav jāmaina. Atliek tikai to instalēt vietnē.

    Favicon instalēšana uz joomla 3

    Pirmā un vienkāršāka instalēšanas metode ir vietējās favicon aizstāšana. Lielākajai daļai Joomla veidņu jau ir favicon, jums tas vienkārši jāmaina uz mūsu sagatavoto favicon.

    Lai to izdarītu, jums jāiet uz vietnes sakni. Pēc tam dodieties uz mapi "veidnes" un atrodiet mapi ar noklusējuma veidni. Man ir šī vietējā veidne “Beez3”, un tur es varu mainīt favicon ar to, ko izveidojām.

    Pēc tam dodieties uz savu vietni un atjauniniet mājas lapa. Ja favicon nav mainījies, iztīriet pārlūkprogrammas kešatmiņu, aizveriet to un atveriet to vēlreiz, atkārtoti ievadot lapas adresi. Ikonai vajadzētu mainīties.

    Bet jums nevajadzētu uzreiz gaidīt favicon Yandex meklēšanas rezultātos. Tas parādīsies pēc tam, kad īpašs robots indeksēs jūsu attēlu un pārveidos to jpg formātā. Tas var ilgt vairāk nekā mēnesi.

    Varat pārbaudīt, vai Yandex ir indeksējis jūsu izlases ikonu vai nē, pārlūkprogrammā ierakstot: http://favicon.yandex..ru", ievadiet savas vietnes domēna nosaukumu.

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

    Ja pirmā instalēšanas metode nepalīdzēja un favicon jūsu vietnē neparādījās, varat to instalēt, ierakstot nepieciešamo kodu index.php failā.

    Otrs veids, kā instalēt favicon uz joomla 3

    Lai instalētu attēlu, vietnes saknē ir jāievieto favicon, kuru mēs sagatavojām.

    Pēc tam dodieties uz mapi ar noklusējuma veidni: veidnes / noklusējuma veidne. Atrodiet un atveriet failu index.php, izmantojot notepad++. Šajā dokumentā starp sākuma tagu un beigu tagu ievadiet šādu kodu:


    Atliek tikai notīrīt pārlūkprogrammas kešatmiņu un atkārtoti ielādēt vietni. Pēc tam favicon jāparādās jūsu vietnē.

    No autora: Sveicieni, dārgie lasītāji. Šajā rakstā mēs ar jums runāsim par nelielu, bet tajā pašā laikā noderīgu jebkuras labas vietnes detaļu, CMS Joomla ikonu - favicon. Jūs uzzināsiet, kā vietnei pievienot favicon, kā arī mainīt esošo.

    Tiem, kas nezina, favicon ir maza vietnes ikona (ikona), ko tīmekļa pārlūkprogramma parāda cilnē tieši pirms vietnes nosaukuma vai precīzāk, pirms nosaukuma taga satura. Tas ir, kopumā šis ir noteikta formāta un izmēra attēls ar paplašinājumu ico.

    Tajā pašā laikā jūs piekrītat, ka pareizi izvēlēts favicon piešķir vietnei unikalitāti un oriģinalitāti, kā arī lietotāji to ātri atceras. Meklētājprogrammas, veidojot meklēšanas rezultātu sarakstu (meklēšanas rezultātu sarakstu), tie arī parāda favicon pirms vietnes nosaukuma.

    Tas nozīmē, ka pirmā lieta, kas piesaistīs lietotāja uzmanību, ir tieši ikona - attiecīgi vietnes ikona, nav pat vērts pieminēt, ka, ja lietotājs redz draugu, tas mudinās viņu apmeklēt vietni. Tāpēc jautājums par to, kā mainīt favicon joomla 3, ir diezgan populārs iesācēju vidū, un tālāk es mēģināšu sniegt detalizētu atbildi.

    Lai nodrošinātu saderību starp pārlūkprogrammām, veidojot favicon, parasti izvēlieties ico attēla formātu, jo to atbalsta pilnīgi visas pārlūkprogrammas. Lai gan mūsdienu pārlūkprogrammas tagad atbalsta tādus formātus kā PNG un GIF, Mozilla FireFox arī JPEG, kā arī Animated GIF. Bet vienā vai otrā veidā ir lietotāji, kuri izmanto novecojušas versijas tīmekļa pārlūkprogrammas, tāpēc, manuprāt, joprojām ir vērts izmantot vispārpieņemto ico.

    Izlēmuši par formātu, noskaidrosim attēla izmēru, ko var izmantot kā vietnes ikonu. Šeit viss ir vienkārši, favicon izmērs ir diezgan “standarta” un ir 16x16 pikseļi, ja nepieciešams nodrošināt maksimālu saderību starp pārlūkprogrammām. Tajā pašā laikā dažādiem mobilajām ierīcēm un to konkrētajām pārlūkprogrammām, varat izmantot ikonu izmērus 32x32, 96x96 un pat 192x192 pikseļus.

    Tagad parunāsim par to, kā Joomla vietnē instalēt favicon. Bet, tā kā mums vēl nav ikonas, izveidosim to. Ērtākais veids, kā izveidot, ir izmantot tiešsaistes ģeneratorus, jo tādējādi jūs ietaupīsit sevi no papildu instalēšanas programmatūra, un parasti šie pakalpojumi kopā ar izveidotajām ikonām piedāvā kopēt kodu, kas nepieciešams ikonas parādīšanai.

    Viens no šobrīd populārākajiem favicon ikonu izveides pakalpojumiem ir favicon.ru ģenerators, ko mēs izmantojam šajā rakstā. Ir arī diezgan labs favicon-generator ģenerators (favicon-generator.org), kas vienas ikonas vietā izveido veselu arhīvu, kurā tiek ģenerētas dažāda izmēra ikonas. Attiecīgi katram izmēram tiek norādīts arī pieslēguma kods.

    Lai izveidotu favicon, atlasiet šo attēlu.

    Mūsdienu tendences un pieejas tīmekļa izstrādē

    Apgūstiet algoritmu ātrai izaugsmei no nulles vietņu veidošanā

    Tagad pietiek augšupielādēt atlasīto attēlu, izmantojot īpašu veidlapu, un kopumā ģenerēšana tiks pabeigta.

    Pēc attēla ielādes atlasiet interesējošo apgabalu, no kura tiks izveidota ikona, un noklikšķiniet uz "Tālāk".

    Pēc ģenerēšanas jūs varat redzēt piemēru, kā pārlūkprogrammā parādīt jaunu favicon, un, ja esat apmierināts ar izskatu, noklikšķiniet uz pogas “Lejupielādēt favicon”, lai lejupielādētu failu. Tādējādi ikona ir gatava.

    Favicon Joomla — atrodas aktīvās veidņu direktorijas saknē. Piemēram, Beez3 veidnei šī mape ir templates\beez3. Tas nozīmē, ka jums vienkārši jāievieto lejupielādētais fails norādītajā mapē, tādējādi aizstājot standarta ikonu, un jāatjaunina informācija pārlūkprogrammā. Kodu, kas pārlūkprogrammā parāda favicon, ģenerē tieši Joomla dzinējs, tāpēc tas nav jāraksta manuāli. Tiem, kurus interesē, ļaujiet man precizēt, ka šis kods ir ģenerēts \libraries\joomla\document\html failā html.php. Lai parādītu ikonu, Joomla kodols nodrošina īpašu metodi, ko sauc par addFvicon(), kas tiek izsaukta iepriekš minētajā failā.

    Tagad jūs zināt, kā mainīt favicon joomla 3, vienīgais, ko es vēlētos, tā sakot, vispārējai attīstībai, ir nodrošināt kodu ikonas parādīšanai - gadījumam, ja jums tas jāraksta manuāli.