Dobrý den, drazí přátelé. Dnešní článek bude věnován vytvoření bloku sociálních tlačítek bez služeb a pluginů. Tento blok bude také obsahovat tlačítka, která návštěvníkům webu umožní stránku vytisknout, odeslat odkaz na článek e-mailem a uložte si článek do záložek. Taková tlačítka dnes najdeme téměř na každém webu. Teprve nyní jsou implementovány pomocí služeb nebo pluginů. A já vám ukážu, jak to udělat sami.
Služby, které jsem používal na klientských stránkách a na svém blogu – a . Tyto služby usnadňují realizaci úkolu.
Jaká je výhoda vlastních sociálních tlačítek oproti službám a pluginům?
- Samozřejmě neoddiskutovatelným faktorem je rychlost načítání stránek. Takže například služba PLUSO, kterou na blogu používám, v lepším případě přidá k zátěži 633 milisekund.
A v tomto bloku jsou použity pouze nezbytné obrázky sociálních tlačítek, kombinované do . Všechny styly jsou omezeny na minimum. Plus jednoduchý html framework.
- Metoda, kterou navrhuji, neobsahuje žádné externí odkazy. Ne, existují odkazy, ale všechny budou jako interní odkazy. Vždy je můžete použít, pokud chcete. A pak nebudou vůbec vidět.
- Velmi lehká instalace. Stačí vložit html kód bloku do zdroj stránky webu, nahrajte sprite, přidejte styly css a instalace je dokončena. Stačí opravit cestu k souboru s obrázky tlačítek.
- Tento bod není ani plus, ani mínus směrem k vašemu vlastnímu bloku sociálních tlačítek. Trik je v tom, že jeho vlastní blok nemá počítadlo stisknutí tlačítka. A to lze považovat za mínus. Ale na druhou stranu je možné každé tlačítko nasadit a budete přesně vědět, kolikrát vaši návštěvníci klikli na tlačítka a sdíleli vaše články na sociálních sítích.
- Statistiky shromážděné službami na vašem webu již nebudou přenášeny třetím stranám.
Vložení bloku sociálních tlačítek do zdrojového kódu
Budeme zvažovat klasickou možnost, kdy jsou tlačítka umístěna za článkem.
To lze provést buď otevřením souboru odpovědného za výstup článků (single.php) a přidáním bloku sociálních tlačítek do zdrojového kódu. Alternativně to lze provést prostřednictvím souboru funkcí tématu (functions.php).
Ukážu obě možnosti a vy si vyberete tu, která vám vyhovuje.
Vložení bloku do zdrojového kódu single.php
Upozornění: Před zahájením všech akcí proveďte záložní kopie single.php soubor!
Otevřete administrační panel WordPress - « Vzhled» — "Editor" — "Jeden záznam (single.php)".
Ve zdrojovém kódu hledejte místo, kde výstup článku končí a komentáře popř navigace na stránce. Právě na toto místo budete muset vložit html kód pro blok sociálních tlačítek.
Podívejte se pozorně na snímek obrazovky, zaměřte se na kódy odpovědné za zobrazení článkua komentáře. A vložte kód níže.
Samozřejmě, že ve vašich šablonách budou nějaké rozdíly, ale jsem si jistý, že na to přijdete, není na tom nic složitého. A navíc máte záložní kopii, není se čeho bát.
A zde je html kód pro blok sociálních tlačítek:
Vysvětlení ke kódu: Toto je jeden blok DIV s třídou .share, která obsahuje odkazy na sociální sítě. Odkaz se otevře v samostatném vyskakovacím okně, za to je zodpovědná funkce onClick=window.open. Nahrazení odkazu na článek se provádí pomocí tohoto kódu. Každý odkaz má svou třídu, jejímž prostřednictvím je přiřazen obrázek tlačítka.
Tím je vkládání přes zdrojový kód dokončeno. A pak je potřeba propojit css styly.
Vložení bloku do zdrojového kódu single.php pomocí funkcí tématu
Upozornění: před zahájením práce si vytvořte záložní kopii svého souboru functions.php!
Chcete-li použít tuto možnost, musíte otevřít soubor functions.php a přidat tento kód na úplný konec:
/* Vkládání sociálních tlačítek */ add_action("šablona_komentářů","soc_button"); funkce soc_button() ( ?> A pozor, po vložení kódu byste neměli mít mezery ani jiné znaky. Nebo jen zavřete php kód?>. Jinak stránka přestane fungovat.Vysvětlení ke kódu: místo, kde budou tlačítka zobrazena sociální sítě, definovaný pomocí klíče API comments_template . Tento klíč určuje místo před komentáři. Samotný kód sociálního tlačítka je uzavřen v otevíracích a zavíracích návratových značkách php. V kódu jsem je označil červeně. Toto je celý trik vkládání html kódu do php prostřednictvím funkcí tématu.
Tím je metoda dokončena; přejděme k nahrávání obrázků na web.
Nahrání obrázků tlačítek na server
Například jsem připravil několik skřítků s obrázky sociálních tlačítek. Můžete si je stáhnout.
Sprite, který používám jako příklad, má pouze 3,97 kb a obsahuje pouze nezbytná tlačítka. A protože se jedná o sprite, pak je pouze jeden požadavek na databázi, a ne pro každé tlačítko zvlášť.
Stáhněte si obrázky nebo si připravte vlastní a nahrajte je na svůj web. Myslím, že by s tím neměly být žádné problémy. Dále bude potřeba odkaz na tento sprite k návrhu tlačítek pomocí stylů css.
Propojování CSS stylů
Tento krok lze samozřejmě dokončit jako první, ale já preferuji nejprve dokončit všechny obtížné kroky. technické práce a teprve poté pokračujte k příjemným drobnostem se styly css.
Otevřete tedy soubor style.css, který je zodpovědný za design vašeho webu. A vložte tyto styly:
Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparentní; ) .share a.twitter (pozadí: url("http://test..png") bez opakování rolování -42px 0px transparentní; ) .share a.mail ( background: url("http ://test..png ") posouvání bez opakování -294px 0px průhledné; ) .share a.odnoklassniki (pozadí: url("http://test..png ") posouvání bez opakování -126px 0px průhledné; ) .share a.pinterest ( background: url("http://test..png ") neopakovatelné posouvání -210px 0px transparentní; ) .share a.liveinternet ( background: url("http://test..png) ") rolování bez opakování -378px 0px průhledné; ) .share a.evernote ( background: url("http://test..png") neopakovatelné posouvání -420px 0px transparentní; ) .share a.bookmark ( background: url("http://test.. png ") posouvání bez opakování -462px 0px průhledné; ) .share a.email (pozadí: url("http://test..png ") posouvání bez opakování -504px 0px průhledné; ) .share a.print ( background: url("http://test..png ") neopakovatelné posouvání -546px 0px průhledné; ) .share a.digg ( background: url("http://test..png ") posouvání bez opakování -588px 0px transparentní; ) .share a.spring (pozadí: url("http://test..png ") neopakovatelné posouvání -630px 0px transparentní; )
Vysvětlení ke kódu: class.share definuje obecný vzhled bloku, velikost každého tlačítka, výplň a nastavuje jediné pozadí. A pak má každý odkaz svou třídu a každému takovému odkazu je přiřazen typ tlačítka prostřednictvím vlastnosti pozadí. Tlačítka jsou vytvořena jako sprite CSS a každé tlačítko má šířku a výšku 40px a mezi nimi okraj 2px, což umožňuje přesně určit obrázek pro každé tlačítko. To znamená, že první tlačítko je označeno jako 0 a druhé jako 42 a tak dále. V kódu jsou tyto hodnoty vyznačeny oranžově. Odkaz na sprite je také zvýrazněn oranžově, změníte jej na cestu k vašemu spritu.
Tím je celý proces vytváření vlastního bloku sociálních tlačítek dokončen. Můžete bezpečně přejít ke kontrole.
Mám také video tutoriál, ve kterém je celý proces názorně ukázán a je ukázána činnost samotných tlačítek. Sledujte a implementujte na své weby a blogy.
To je vše. S úkolem jsem se vyrovnal. Přeji vám všem hodně štěstí a na viděnou u nových článků a videonávodů.
Online zdroje pro tvorbu CSS skřítci, například http://spritepad.wearekiss.com/ nebo http://www.spritecow.com/ . Můžete však snadno najít ty, které vám vyhovují. Zde použiji hotové CSS skřítci. Zde jsou:
Struktura HTML
Běžný kontejner div obsahuje kontejnery div sociální tlačítka s přechodem.
Struktura CSS pro použití sprajtů
body( background: url("fon.png"); color: #1aa5ca; ) .box ( margin: 250px; padding: 25px; background: #; text-indent: -9999px; display: inline-block; ) .click ( pozadí: url("click.png"); šířka: 200px; výška: 86px; zobrazení: blok; ) .vk( pozadí: url("vc.png"); šířka: 51px; výška: 52px; okraj: 10px ; background-position: 0 0px; transition: opacity 0.5s; -moz-transition: opacity 0.5s; /* Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari a Chrome */ -o-transition: opacity 0.5s; /* Opera */ opacity: 0.6; float: left; ) .vk:hover ( background: url("vc.png"); width: 51px; height: 52px; background-position: 0 -51px; opacity: 1; ) .ya( background: url("ya.png"); width: 50px; height: 50px; margin: 10px; background-position: 0 0px; transition: opacity 0.5s; -moz-transition: opacity 0,5s; /* Firefox 4 */ -webkit-transition: opacity 0,5s; /* Safari a Chrome */ -o-transition: opacity 0,5s; /* Opera */ opacity: 0,6; float: left; ) .ya :hover ( pozadí: url("ya.png"); šířka: 50px; výška: 50px; background-position: 0 -50px; krytí: 1; ) .ma( background: url("ma.png"); šířka: 51px; výška: 52px; okraj: 10px; background-position: 0 0px; přechod: neprůhlednost 0,5 s; -moz-přechod: neprůhlednost 0,5 s; / * Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari a Chrome */ -o-transition: opacity 0.5s; /* Opera */ opacity: 0.6; float: left; ) .ma:hover (pozadí) : url("ma.png"); šířka: 51px; výška: 52px; pozice na pozadí: 0-51px; neprůhlednost: 1; )Naznačujeme background-position: 0 0px;. Všimněte si, že jsem nastavil krytí na 0,6, trochu průhlednosti. Při najetí na neprůhlednost: 1;, vše se děje za (0,5 s) přechod: neprůhlednost 0,5s;. Pozice obrázku se změnila při najetí myší background-position: 0 -51px;.
Pomocí této techniky můžete výrazně optimalizovat obrázky(méně volání na server).
P.S. Pokud máte nějaké dotazy, napište!
Vítejte na mém blogu. Dnes bych vám chtěl krok za krokem ukázat, jak můžete vytvořit tlačítka sociálních sítí pomocí html a css. Začněme od úplné nuly a nakonec se dočkáme požadovaného výsledku. Vpřed!
Značení a základní styly
Jednoduše jsem do adres odkazů vložil značku hash. Samozřejmě při reálném použití musí mít každý odkaz funkční adresu, na kterou bude přechod probíhat.
Nyní přidáme tyto styly:
Podíl (
šířka: 280px;
okraj: 0 auto;
odsazení: 10px;
pozadí: #D3CDEE;
}
.sdílet i (
pravý okraj: 15px;
Černá barva;
text-transform: velká písmena;
}
Lehce jsme navrhli kontejner pro odkazy (velikosti, odsazení, pozadí) a nápis.
Navrhování ikon
Sociální (
displej: inline-block;
šířka: 40px;
výška: 40px;
pozadí: #bdc3c7;
vertikální zarovnat: střed;
pravý okraj: 10px;
}
S vlastností display: inline-block jsme zajistili, že naše odkazy byly převedeny na blokové prvky, ale zároveň si zachovali schopnost stát v řadě. Dále naznačíme rozměry a odsazení vpravo, aby bloky nezapadaly do sebe.
Dobře, ale proč potřebujeme vertical-align: middle ? Tato vlastnost zarovná text v kontejneru tak, aby byl přesně svisle vycentrován. Svým buňkám dáme také nějaké pozadí, abychom je mohli vizuálně vidět již v této fázi. Výsledkem bylo prázdné místo. Je čas konečně přidat ikony.
Poslední stadium
Stačí do každého z připravených bloků umístit vlastní ikonku, která by identifikovala tu či onu sociální síť. síť. Chcete-li to provést, doporučuji použít nejsprávnější metodu - připojit obrázek sprite a pomocí umístění na pozadí umístit vše na své místo.
Zkrátka takový obrázek potřebujeme. U mě je to asi 120 až 40.
Ke stylům CSS přidáváme následující pravidla:
Social-vk(
pozadí: url(ikona.png);
}
.social-fb(
pozadí: url(ikona.png) -40px 0;
}
.social-tw(
pozadí: url(ikona.png) -78px 0;
}
Výstupem je plně navržený blok s ikonami.
Chápete, jak jsme na to přišli? Pokud ne, tak to vysvětlím. Každý blok odkazu má velikost 40 x 40. Když mu tedy dáme obrázek na pozadí 120 x 40, blok jej jednoduše nemůže obsáhnout celý, a ve výsledku toho obsahuje tolik, kolik může.
Ve výchozím nastavení se v tomto případě vezme prvních 40 pixelů šířky a výšky obrázku na pozadí, ale s výškou je vše v pořádku - obrázek na výšku zcela zapadá do bloků. V souladu s tím zbývá pouze určit pozici pozadí pro ikony Facebooku a Twitteru.
Zapsáním na pozadí takto: background: url(icon.png) -40px 0 výslovně naznačujeme, že pro blok social-fb by se obrázek na pozadí měl zobrazovat přesně od zadané pozice - čtyřicet pixelů na šířku doleva a na výšku bez odsazení, protože to není potřeba. Je to tak jednoduché, opravdu.
Co jiného můžete dělat?
Možná byste chtěli přidat nějaký další design do bloku sociální sítě. Existuje několik nápadů. Nejprve můžete všem ikonám přidat zaoblené rohy.
Sociální(
Poloměr ohraničení: 5px;
}
Za druhé k nim můžete přidat rámeček.
Ohraničení: 3px plná fialová;
Designově se nám v tomto případě bude hodit fialová, zdá se mi. Můžete také zaoblit rohy samotného odkazového kontejneru.
Opět existuje mnoho možností designu. A samozřejmě můžete snadno měnit barvy. V tomto článku vám nabízím tuto možnost designu, ale nyní si ji můžete snadno vytvořit vlastní: žlutá, zelená, červená a jakékoli další ikony.
Sečteno a podtrženo
Jak vidíte, i sami si můžete velmi snadno přidat sociální tlačítka na své stránky a html a css nám s tím pomohou. Alespoň vizuálně můžeme naše ikony navrhnout podle potřeby pro design každého konkrétního webu.
Tímto končí dnešní článek-lekce. Příště vytvoříme něco jiného pomocí CSS
Pokračujeme v socializaci našich stránek. Čtenářům často vyhovuje dostávat aktualizace blogu přímo na jejich oblíbenou sociální síť. Dejme jim tuto příležitost. Chcete-li to provést, musíte se zaregistrovat na stejných sociálních sítích. Můžete vytvořit profil pro administraci nebo autora webu nebo můžete vytvořit veřejnou stránku pro společnost nebo projekt. V budoucnu budete muset pravidelně publikovat novinky a aktualizace stránek do svých profilových novinek, aby se s nimi vaši odběratelé mohli seznámit. Mimochodem, je to vhodné provést pomocí těch, které jsme nainstalovali dříve. Navrhneme odkazy na sociální profily pomocí techniky CSS sprite nebo CSS sprite.
Co jsou CSS sprite a sprite obecně?
Skřítci- sada malých obrázků, které jsou spojeny do jednoho. To se provádí tak, aby se nestahovalo 10–20 malých, lehkých obrázků ze serveru do počítače uživatele, ale aby se posílaly v jednom proudu a spojily je do jednoho souboru. Skřítci ve webdesignu přišli z herního průmyslu, kde se používali k vytváření animované 2D grafiky, jako je střílení příšer atd.
V designu webových stránek se také používá technika, ve které jsou různé ikony kombinovány do jednoho souboru, například takto:
Jak můžete vidět na tomto příkladu, do jednoho souboru nebyly shromážděny pouze ikony sociálních sítí, ale také další designové prvky, jako jsou šipky, tlačítka „jako“ atd. Ale spojovat naprosto veškerou grafiku, která je na webu použita do jednoho spritu, není úplně správné. Je lepší rozdělit prvky do skupin a načíst pouze ty potřebné na určitý typ stránky.
Na tomto obrázku jsem se pokusil schematicky znázornit princip fungování CSS spritů. Pokud je blok větší než obrázek na pozadí, je ve výchozím nastavení umístěn do levého horního rohu, pokud je ve stylech css zadáno no-repeat. Můžeme ale změnit polohu obrázku na pozadí vzhledem k levému hornímu rohu bloku. To je zvláště užitečné, pokud má blok například velikost stejné ikony. Máme sedm ikon, každá o velikosti 32x32. Jsou umístěny vodorovně, takže nemusíme měnit polohu pozadí svisle. Pozici obrázku na pozadí nastavíme -32 px, získáme ikonu v bloku, -64 px - ikonu Facebooku atd.
Jak vytvořit odkazová tlačítka na profily na sociálních sítích?
Po registraci v příslušných komunitách a v jsem obdržel odkazy na profily, adresu mého RSS kanálu a odkaz na formulář pro odběr novinek e-mailem. Poté jsem je zkombinoval do následujícího kódu a vložil jej do textového widgetu na panelu administrátora WordPress:
Kotva odkazu v tomto kódu používá značku : . Toto je blok, ve kterém se zobrazí požadovaná ikona. Odsazení obrázku pozadí je nastaveno v souboru stylu styl.css přes nemovitost pozadí-pozice:
/* Tlačítka pro přihlášení k odběru aktualizací*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover (kurzor : ukazatel; barva: #1E90FF; zdobení textu: žádné; velikost písma: 100 %; ) .spmenu span ( display: inline-block; width: 32px; height: 32px; background: url("images/icons.png] " ) no-repeat; ) .spmenu span.sprite_gplus (pozice-pozadí: 0px 0px;) .spmenu span.sprite_twitter (pozice-pozadí: -32px 0px;) .spmenu span.sprite_fbook (pozice-pozadí: -64px 0px; ) .spmenu span.sprite_rss (pozice-pozadí: -96px 0px;) .spmenu span.sprite_email (pozice-pozadí: -128px 0px;)
Tedy pro každý prvek uvnitř třídy" spmenu» je nastaveno obrázek na pozadí icons.png, což je sada ikon. Vezměte prosím na vědomí, že je vložený prvek podle specifikace HTML, takže abychom mu dali přísné rozměry (šířku a výšku), musíme změnit způsob jeho zobrazení tak, aby blokoval Vlastnosti CSS(čára: displej: inline-block;). Rozměry bloku 32x32 přesně odpovídají formátu našich ikon.
Často místo toho
používat značky
,
,
atd., považuji tento přístup za špatný. Proč měnit styly standardních značek, pokud existuje univerzální
. Značka
obecně vytváří další požadavek na server a my používáme sprajty, abychom se pokusili snížit počet těchto požadavků.
Kde mohu získat ikony pro sprite?
- Nakreslete si to sami.
- Hledejte ve vyhledávači mezi obrázky.
- Na internetu existují speciální sbírky ikon, které se často rozdávají zdarma.
- Mnoho sociálních sítí a služeb zobrazuje na svých webových stránkách oficiální loga a ikony, které lze použít v jejich aplikacích.
- Chcete-li automaticky vytvořit soubor sprite pro ikony sociálních sítí, můžete použít službu. Vyberte ikony v požadovaném pořadí, uložte archiv se skriptem, rozbalte jej a podívejte se na obrázek icons.png- hotový sprite soubor.
Kromě zobrazování ikon jsou skřítci užiteční při vývoji animovaného menu, kdy při najetí na jeho položku buď ztmavne, nebo se rozsvítí. Poté se do souboru sprite uloží dvě sady tlačítek a na základě události „myš přes“ se dynamicky změní pozice obrázku na pozadí pomocí JS.
Nabídka tlačítek s odkazy na kanály pro příjem aktualizací, která byla slíbena na začátku poznámky, byla hotová a tímto článek končím. Přihlaste se k odběru aktualizací, zábava právě začíná.
Dobrý den, milí čtenáři tohoto blogu. Pro tento úkol můžete samozřejmě použít plugin, ale Není to tak těžké udělat to sami, a bude jich méně, tím spíš, že už jich mám hodně funkčních (viz článek na uvedeném odkazu). Vzal jsem si ikonky sociálních sítí, o kterých jsem již psal dost podrobně (doufám, že Dimox proti tomu nebude nic namítat).
A také jsem považoval za vhodné poslat email.
Z tlačítek vytvoříme sprite a do stránky vložíme Html kód
Poté, co jste vytvořili všechny potřebné skupiny a stránky na sociálních sítích, a proto obdrželi všechny potřebné odkazy, můžete být zmateni přidáním tlačítek na web. Můžete si samozřejmě v souladu s mým příspěvkem o vybrat pro každou sociální síť vhodnou ikonu a případně její velikost zmenšit na požadovanou velikost v a.
Ale není nejlepší možnost. Proč? No, protože pro načtení každého obrázku sociální sítě bude na váš server odeslán samostatný požadavek. Pokud máte tucet ikon, znamená to deset požadavků, které v každém případě způsobí další zatížení serveru a . Takové plýtvání se nám nehodí, zvlášť když se to děje už delší dobu.
Rozhodl jsem se znovu nevynalézat kolo (vytvořit sprite), ale použil jsem to, které vytvořil konstruktor Share42 (odkaz na popis práce s ním je uveden výše). V něm si vyberete ty sociální sítě, jejichž ikony budete potřebovat, a spolu s kódem obdržíte CSS sprite, tzn. fyzicky sám grafický soubor, na kterém budou umístěny všechny potřebné ikony sociálních sítí a přihlášení k odběru RSS kanálu (a případně e-mailu).
Vybral jsem čtyři hlavní sítě a pár ikon pro přihlášení k odběru novinek s velikostí ikony 24 x 24, takže můj sprite vypadá takto (i když je tam stále zaseknutý, ale to nevadí):
Nyní máme všechny ingredience – odkazy na skupiny nebo stránky sociálních sítí a ikony pro jejich zobrazení na webu. Nezbývá než to vše správně připravit, tzn. makeup. Můj blog běží na WordPressu, takže kód s tlačítky vložím do jednoho z . V mém případě se nazývá sidebar.php. HTML kód toto se ukazuje jako velmi jednoduché:
No a to nejzajímavější. S naší pomocí určíme, která oblast našeho spritu se na tomto konkrétním místě zobrazí jako pozadí (v našem případě je toto pozadí umístěno pod hypertextovým odkazem). Vysvětlení, jak k tomu dochází, trvá velmi dlouho, proto si přečtěte článek odkazovaný na odkaz a vše bude jasné (uvádí i názorné příklady). Pokud jste líní, pak jen experimentujte s čísly, která, jak jste si mohli všimnout, nejsou dělitelná 24 nadarmo.
Ano, nahrajte soubor sprite přes FTP na váš web a uveďte cestu k němu () na pozadí. To je vše. Pokud to nevyjde, přečtěte si pozorněji materiály na výše uvedených odkazech, no, a pokud nebude fungovat vůbec nic, popište svou situaci v komentářích (podrobně - pro vložení kódu jej nezapomeňte přiložit do PHP značky s hranatými závorkami).
Hodně štěstí! Brzy se uvidíme na stránkách blogu
Mohlo by vás to zajímat