Kompjuterë dhe pajisje moderne

Përshëndetje, të dashur lexues të faqes së blogut. Ju, sigurisht, mund të përdorni një shtojcë për këtë detyrë, por nuk është aq e vështirë ta bësh vetë, dhe do të ketë më pak, veçanërisht pasi unë tashmë punoj mjaft prej tyre (shih artikullin në lidhjen e dhënë). Kam marrë ikonat e rrjeteve sociale nga, për të cilat kam shkruar tashmë në detaje (shpresoj që Dimox nuk do ta kundërshtojë këtë).

Dhe gjithashtu e konsiderova të përshtatshme për Email.

Krijoni një sprite nga butonat dhe futni kodin Html në sajt

Pasi të keni krijuar të gjitha grupet dhe faqet e nevojshme në rrjetet sociale, që do të thotë se keni marrë të gjitha lidhjet e nevojshme, mund të habiteni duke shtuar butona në faqe. Ju, natyrisht, në përputhje me postimin tim rreth, mund të zgjidhni një ikonë të përshtatshme për secilin rrjet social dhe, nëse është e nevojshme, zvogëloni madhësinë e saj në madhësinë e kërkuar në dhe.

Por ky nuk është alternativa më e mirë. Pse? Epo, sepse për të ngarkuar secilën fotografi të rrjetit social, një kërkesë e veçantë do t'i bëhet serverit tuaj. Nëse keni një duzinë ikona, do të thotë dhjetë kërkesa, të cilat në çdo mënyrë do të krijojnë një ngarkesë shtesë në server dhe . Një ekstravagancë e tillë nuk na shkon, aq më tepër që ka kohë që ka.

Vendosa të mos rishpik rrotën (krijoj një sprite), por përdora atë që krijon konstruktorin Share42 (lidhja për përshkrimin e punës me të është dhënë pak më lart). Në të, ju mund të zgjidhni ato rrjete sociale, ikonat e të cilave ju nevojiten, dhe së bashku me kodin do të merrni një sprite CSS, d.m.th. fizikisht një skedar grafik, i cili do të përmbajë të gjitha ikonat e rrjetit social që ju nevojiten dhe abonimet në burimin RSS (dhe Email, nëse është e nevojshme).

Zgjodha katër rrjete kryesore dhe disa ikona për abonimet e lajmeve me përmasa ikonash 24 me 24, kështu që spriti im duket si ky (, megjithatë, ai ende u ngjit atje, por nuk ka rëndësi):

Tani kemi të gjithë përbërësit - lidhje me grupet ose faqet e rrjeteve sociale dhe ikonat për t'i shfaqur ato në faqe. Mbetet vetëm për të përgatitur të gjitha këto në mënyrë korrekte, d.m.th. make up. Blogu im mundësohet nga WordPress, kështu që unë do të ngjis kodin e butonit në një nga . Në rastin tim quhet sidebar.php. kodi html kjo rezulton në një shumë të thjeshtë:

Epo, më interesante. Me ndihmë, ne përcaktojmë se cila zonë e spritit tonë do të shfaqet në këtë vend të veçantë si sfond (në rastin tonë, ky sfond vendoset nën një hiperlidhje). Duhet shumë kohë për të shpjeguar se si ndodh kjo, ndaj lexoni artikullin në link dhe gjithçka do të bëhet e qartë (ka edhe shembuj ilustrues). Nëse jeni shumë dembel, atëherë thjesht eksperimentoni me numrat, të cilët, siç mund ta keni vënë re, nuk janë më kot shumëfishi i 24.

Po, ngarkoni skedarin sprite përmes FTP në faqen tuaj dhe specifikoni shtegun drejt tij në sfond (). Kjo eshte e gjitha. Nëse nuk funksionon, lexoni më me kujdes materialet në lidhjet e mësipërme dhe nëse asgjë nuk funksionon fare, atëherë përshkruani situatën tuaj në komente (në detaje - për të futur kodin, mos harroni ta bashkangjisni në Etiketat PHP me kllapa katrore).

Paç fat! Shihemi së shpejti në faqen e faqeve të blogut

Ju mund të jeni të interesuar

Kohët e fundit, çdo klient i dytë (nëse jo i pari) në kërkesat për zhvillimin e faqes kërkon që të jetë i sigurt për ta lidhur atë me rrjetet sociale. Butonat "Social" në faqe janë mjeti numër 1 për tërheqjen e audiencës së synuar, shpërndarjen e përmbajtjes dhe PR në përgjithësi. Dhe plotësisht falas!

Rrjetet sociale ofrojnë kode për butonat dhe miniaplikacionet e tyre për vendosje në faqe dhe bashkangjisin udhëzime për instalimin e tyre në sistemin e menaxhimit të përmbajtjes. Çdo CMS (sisteme operative) ju lejon t'i instaloni ato, gjëja kryesore është t'i përshtatni ato në mënyrë harmonike në hartimin e faqes tuaj.

Cilat janë veçoritë dhe funksionet?

Nëse faqja juaj u drejtohet njerëzve që komunikojnë me rrjetet sociale të njohura. rrjete, për shembull, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, etj., dhe dëshironi t'i mbuloni të gjitha, pastaj në mënyrë që të mos vendosni butonat për secilën prej tyre veç e veç, duke pasur parasysh se ato mund të ndryshojnë në madhësi dhe dizajn, ne rekomandojmë përdorimin e shërbimeve të grumbullimit. Këto janë mjete të thjeshta dhe të përshtatshme që do t'u lejojnë vizitorëve të faqes të ndajnë shpejt informacionin me miqtë e tyre, pavarësisht se cilin rrjet social përdorin. Më poshtë do të analizojmë shërbimet më të njohura.

Ndani butonat e mediave sociale Pluso

Ka shumë mënyra për të shtuar butonat e rrjeteve sociale në sit tani, ka një zgjedhje dhe është e kënaqur. Butonat social luajnë një rol të rëndësishëm në faqe, me ndihmën e tyre, siç e dinë tashmë shumë, mund të ripostoni shpejt çdo hyrje në një nga rrjetet sociale të zgjedhura. Butonat social për sitin tani vendosen kudo dhe kudo, por ndonjëherë në vendin e gabuar.

Butonat social për sitin

Shumë njerëz tashmë e dinë se sa të zhvilluara janë tani rrjetet sociale dhe sa e mrekullueshme është nëse faqja juaj ka butona të tillë me të cilët mund të shtoni postimin tuaj të preferuar ose një pjesë të një postimi në mur. Me këtë veprim, ju jo vetëm që komentoni ose ripostoni mesazhe, por gjithashtu u jepni një sinjal shtesë motorëve të kërkimit.

Ëndrra e çdo pronari të faqes, nëse të gjitha postimet e tij ripostohen nga lexuesit në faqet e tyre në një nga rrjetet sociale. Tani mbi të gjitha ka një kërkesë për Vkontakte, Facebook, Twitter dhe Odnoklassniki. Do të shtoja gjithashtu LiveJournal, liveinternet dhe Blogger. Është e dëshirueshme të shtoni këto butona në faqe për lehtësinë e plotë të përdoruesit.

Sidomos Twitter sot meriton gjithnjë e më shumë vëmendje, me ndihmën e tij publikimet tuaja të reja shfaqen më shpejt në indeksin e motorit të kërkimit.

Nëse jeni pronari i faqes, ka shumë të ngjarë të keni një llogari në internet ose LiveJournal. Për të mos shtuar çdo herë hyrje të reja në këto shërbime, prania e butonave të tyre kursen kohë. Përveç kësaj, shumë njerëz i përdorin këto shërbime dhe gjithashtu mund të dëshirojnë të ripostojnë hyrjen tuaj në ditarin e tyre.

Ka disa mënyra më të mira për të shtuar shpejt butonat social në një sajt. Ju mund ta bëni këtë me ndihmën e shërbimeve në internet që do të ndihmojnë shpejt dhe lehtë me këtë. Ose drejtpërdrejt përmes secilit rrjet social veç e veç. Këtu secili ka zgjedhjen e vet. Më parë kisha butona të shtuara veçmas përmes secilit rrjet social, tani i instalova duke përdorur shërbimin.

Ekziston një shërbim i tillë, quhet aksion42. Për të janë shkruar shumë materiale, sa i zoti është dhe si ta shfrytëzojmë. Mirë, por për përdoruesin mesatar që nuk kupton asgjë për të, do të jetë e vështirë ta trajtojë atë.

Për një profesion kaq të vogël, kopjimi i dosjeve në host dhe më pas larja me stile, tani ajo nuk lëviz më. Ka opsione të tjera në të cilat ju duhet të kopjoni dhe ngjisni kodin tashmë të përfunduar pa ndonjë dosje shtesë. Pra, harrojeni këtë shërbim.

Shtoni vetëm butonat më bazë të rrjeteve sociale që përdorin shumica, mos gdhendni dhjetëra butona të panevojshëm të harruar.

Çfarë mund të përdorni sot për të shtuar butona sociale për sitin:

  1. Shërbim i këndshëm.
  2. Butonat social Yandex.
  3. Shtimi manual i secilit rrjet social veç e veç.
  4. Plus shërbim.
  5. Përdorimi i shtojcave për WordPress (për dembelët).

Ju ndoshta nuk keni nevojë të ndërhyni diku tjetër, nuk mund të gjeni mënyra më të mira. Secila prej këtyre opsioneve është e mirë në mënyrën e vet. Nëse dini një mënyrë më të përshtatshme ose tërheqëse, ju lutemi shkruani në komente.

Butonat e rrjeteve sociale duhet të futen në fund të çdo artikulli në mënyrë që pas leximit, vizitori i faqes të mund të ripostojë opsionalisht hyrjen tuaj. Ai nuk duhet t'i kërkojë diku në fund të faqes. Vendet më optimale, për mendimin tim, ku duhet të vendosen butona të tillë janë në shiritin anësor dhe menjëherë në fund të çdo hyrjeje.

I pëlqyeshëm

Në momentin që unë vetë përdor këtë shërbim, më pëlqeu. Përveç komoditetit, shërbimi uptolike ka disa privilegje ndaj të tjerëve të këtij lloji.

  • Zgjedhje e gjerë midis butonave të mediave sociale;
  • Butonat e përshtatur për pajisjet mobile;
  • Aftësia për të cituar ndonjë pjesë të tekstit në rrjetin social;
  • Mund të shtoni një buton në krye;
  • Mundësia për të shtuar një dritare pop-up për një pajtim në grupin Vkontakte;
  • Zgjedhja e madhësisë së ikonave;
  • Zgjedhja e stilit të ikonave për sitin;
  • Shto efektin hover;
  • Ndrysho sfondin e butonit, ngjyrën e tekstit, sfondin e kundërt;
  • Rritni ose ulni tekstin në numërues.

Privilegjet ndaj shërbimeve të tjera të tilla janë të mjaftueshme për ta përdorur atë. Në këtë rast, vetëm një kod i vogël shtohet në formën e një skripti dhe disa rreshta me stile. Në të njëjtën kohë, nuk ka asnjë lidhje të jashtme, e kontrollova atë përmes shërbimit të lidhjeve dalëse. Nëse e kam gabim, mund të më korrigjoni.

Përveç kësaj, çfarë tjetër mund të bëjë shërbimi i përshtatshëm.

Cilësimet më të rëndësishme Zgjidhni cilat butona sociale për sitin dëshironi të shihni. Nëse është e nevojshme, mund të hapni listën dhe të zgjidhni disa të tjera nga shumica. Kontrolloni kutinë për mbështetje. Pas kësaj, në telefonat celularë, butonat e rrjeteve sociale do të shfaqen gjithmonë në fund të ekranit.

Zgjidhni pozicionin horizontal të butonave, madhësinë dhe stilin. Dekoroni sipas dëshirës dhe shtoni një efekt hover. Asgjë më shumë nuk duhet bërë. Për të gjeneruar një kod numërues, duhet të specifikoni adresën e faqes në internet dhe kutinë postare. Menjëherë pas kësaj, do të shfaqet një kod për futjen e butonave social në sit.

Nëse keni një faqe WordPress, hapni skedarin single.php dhe ngjisni kodin e përfunduar menjëherë pas përfundimit të përmbajtjes së faqes. Rifresko faqen dhe shikoni se çfarë ndodh. Nuk ka asgjë të vështirë.

Yandex

Zgjidhni ikonat e dëshiruara të shërbimit. Twitter është vetëm në formën e ikonave, pa numërues. Ne zgjedhim pamjen e blloqeve dhe më poshtë do të ketë një kod të gatshëm për futje. Siç u përmend më herët, Yandex nuk shton asgjë tjetër, gjithçka është modeste dhe me shije.

Metoda e shtimit manual

Në këtë metodë, ju duhet të hapni çdo rrjet social veç e veç dhe të konfiguroni secilin buton të ripostimit veç e veç. Për të shtuar një buton Facebook, duhet të shkoni këtu. Për shokët e klasës dhe botën time, ju duhet të shtoni të dhëna. Për Twitter, gjithçka ndodh në . Për të shtuar një buton Vkontakte, shkoni te kjo faqe .

Do të keni kod të gatshëm vetëm nga rrjetet sociale, pa asnjë skript shtesë. Ndoshta mënyra më e mirë për të shtuar butonat e mediave sociale në një faqe interneti. Vështirësia lind në faktin se ju duhet të prisni secilin buton veç e veç, pastaj të ngjisni gjithçka në një vend dhe të përdorni stilet css për ta rreshtuar atë në një kolonë. Nëse nuk keni ndonjë problem me këtë, mund të provoni.

Në kontakt me

Për të shtuar një buton Vkontakte, klikoni Lidhni faqet dhe miniaplikacionet, më poshtë do të ketë një listë të plotë të të gjitha shtesave të mundshme. Ekziston gjithashtu mundësia për të shtuar komente në faqe, për të shkruar në mur, për të shtuar grupin tuaj, rekomandime, sondazhe, për t'u pajtuar me autorin dhe për të publikuar lidhje. Në rastin tonë, zgjidhni Publikoni Lidhjet.

Nuk ka asgjë të komplikuar, zgjedhim stilin e butonit (me ose pa numërues), shkruajmë tekstin në buton, opsionin e logos dhe në fund do të ketë një kod të gatshëm të ngulitjes. Unë vetë përdora këtë metodë manuale të shtimit, por për momentin po provoj një shërbim të palës së tretë. Le të shohim se çfarë ndodh. Nëse nuk më përshtatet, do të kthehem menjëherë në metodën manuale.

pluso

Një mënyrë tjetër për të shtuar butona në një faqe është me Shërbimi Pluso. Shërbimi gjithashtu nuk është i keq, shumë vunë re butona prej tij. Zgjedhja e opsioneve të projektimit është e madhe, përveç amatorit ka madhësi të mëdha imazhi. Aftësia për të shtuar rrjete nuk është aspak inferiore në krahasim me shërbime të tjera të ngjashme. Instalimi nuk kërkon asnjë skedar, vetëm kod.

Zgjidhni çdo stil dizajni dhe shtoni shërbimet e nevojshme. Pak më poshtë do të shfaqet një shembull i gatshëm se si do të duket e gjithë kjo në faqe. Ikonat mund të vendosen në të mëdha, të mesme ose të vogla. Gjithashtu ikona katrore për sitin ose të rrumbullakëta, në një rresht ose në dy rreshta, horizontale ose vertikale. Me ose pa një numërues, pa sfond, ose vendosni sfondin që të përputhet me dizajnin e faqes suaj të internetit.

Pas gjithë këtyre hapave, më poshtë do të ketë një kod të gatshëm për futje në faqe. Nëse keni nevojë për të futur në faqen kryesore, ne jemi duke u futur në skedarin index.php, nëse në të gjitha postimet tuaja, ne e shtojmë kodin në skedarin single.php menjëherë pas përfundimit të postimit.

WordPress

Nëse nuk kuptoni asgjë në këtë kod, çfarë duhet të kopjohet ku dhe si funksionon gjithçka, ka një rrugëdalje. Nëse keni një motor WordPress, mund të instaloni një shtojcë që do t'ju japë butona të mediave sociale. Sot ka vetëm një numër të madh të shtojcave të tilla. Shkoni te paneli i administratorit - Shtojcat. Mund të shkruani menjëherë në kërkimin e shtojcave "butonat sociale", "sociale" ose "VKontakte". Jam i sigurt që do të gjesh diçka.

Ndër shumicën e shtojcave të tilla të ngjashme për WordPress, duke parë vlerësimin, këto janë më të vendosurat:

  1. Butonat e ndarjes sociale për WordPress.
  2. sociale.
  3. Pendë e mediave sociale - butona të lehta për ndarjen dhe ndjekjen e mediave sociale.

Në fakt, ka shumë shtojca të tilla, duhet të instaloni dhe të zgjidhni se cila ju pëlqen më shumë, funksionon siç duhet, çfarë tregon dhe si mund ta personalizoni për veten tuaj. Le të shohim shembullin e shtojcës së parë të tillë Social Share Buttons për WordPress.

Vetë shtojca është në Rusisht, nuk do të ketë probleme me këtë. Pas instalimit, një buton i ri "Share Buttons" do të shfaqet në menynë në të majtë. Në cilësimet kryesore vendosim logon e faqes dhe shkruajmë tekstin përpara butonave social.

Sigurohuni që të aktivizoni gjenerimin e meta të dhënave, titulli dhe përshkrimi i faqes do të përfshihen. Vendosni butonat horizontalisht dhe zgjidhni ku do të jenë. Ne zgjedhim vetëm në postime. Opsionale, ju mund të përjashtoni faqet e nevojshme. Në fund, duhet të specifikoni pseudonimin në tritter.

Në skedën tjetër, Cilësimet e ndarjes, zgjidhni stilin e butonave. Më poshtë mund të aktivizoni ose çaktivizoni rrjetet sociale të panevojshme dhe të shtoni dhëmbëza për të gjithë bllokun sipër ose poshtë. Ju nuk keni nevojë të vendosni ndonjë kod shtesë askund, shtojca do të bëjë gjithçka për ju.

Zgjedhja është e juaja se cilën metodë do të përdorni. Shtoni ikonat e mediave sociale përmes uptolike, Pluso ose përmes Yandex. Ju nuk duhet të instaloni menjëherë shtojcën në WordPress, përpiquni të bëni gjithçka me dorë ose me ndihmën e një shërbimi.

Nëse dini ndonjë shërbim tjetër të mirë ose një mënyrë për të shtuar butona sociale për faqen, do të jem mirënjohës për komentin.

Një përmbledhje e stilistëve vendas dhe skriptet për butonat e rrjeteve sociale për faqet e internetit, si dhe analogët e huaj. Shkurtimisht, qartë dhe qartë.

Ndërtuesit e butonave të mediave sociale të faqes në internet

2. Një mënyrë e thjeshtë për të marrë lidhje me sitin - QIP.RU
Vendosni një buton në faqen tuaj dhe jepni vizitorëve mundësinë për të shtuar përmbajtjen e faqes që u pëlqen në faqeshënues, blogje dhe rrjete sociale. Tre hapa: ku të vendosni butonin (faqe, Blogger ose WordPress), stili i butonit (opsione të gatshme) dhe merrni butonin.

3. Butonat për shtimin e përmbajtjes në rrjetet sociale - Pluso
Vendosni butona dhe lejoni vizitorët të ndajnë faqet e tyre të preferuara në rrjetet sociale, si dhe të printojnë, dërgojnë një email dhe të shtojnë faqeshënues.

4. Shërbimi i aktivitetit social - UpToLike
Butonat e personalizuar të mediave sociale me aftësinë për të vendosur ngjyrën, formën, madhësinë dhe efektet speciale. Karakteristika shtesë janë miniaplikacioni i ndarjes së imazheve PicShare, funksioni "Quote" dhe funksioni i personalizuar "Në vijim".

5. Një buton! - për të gjitha shërbimet e faqeshënuesve dhe rrjetet sociale
Zgjidhni butonin e pamjes. Ku do të instalohet butoni: faqe interneti, Blogger ose WordPress. Shto një buton.

Skriptet e butonave të rrjeteve sociale për sitin

1. Butonat e bukur social për sitin - goodshare.js
Shfaqni butonat në pothuajse çdo pajisje. Kodi i pastër. Dokumentacion i shkurtër. SEO miqësore.

2. Butonat e skriptit për faqeshënuesit dhe rrjetet sociale - Share42
Zgjidhni madhësinë dhe shënoni ikonat e shërbimeve që dëshironi të përdorni në sajt. Zgjidhni opsionet që dëshironi. Shihni se si do të duket dhe/ose shkarkoni skriptin e përfunduar. Instaloni skriptin në një faqe WordPress, Drupal, etj.

3. Butonat e bukur si "Social Like" duke përdorur jQuery - Pëlqimet sociale
Pëlqeni skriptin e butonave me numërues në të njëjtin stil për rrjetet sociale: Facebook, Twitter, VKontakte, Odnoklassniki, Bota ime, Google+ dhe Pinterest.

Analoge të huaja të butonave të rrjeteve sociale për sitin

1. Butonat Share - AddThis
Butonat e ndarjes do t'ju ndihmojnë të rrisni audiencën e faqes duke tërhequr vizitorë nga burime të tjera dhe rrjete sociale përmes përmbajtjes së shpërndarë.

4. Ndarja sociale - Po.st
Përfitoni më shumë nga ndarja e mediave sociale. Shërbimi do të lehtësojë procesin e shpërndarjes në rrjetet sociale për vizitorët, gjë që do të rrisë trafikun organik të faqes.

5. Butonat e ndarjes për çdo faqe interneti - AddToAny
Merrni kodin e butonave të mediave sociale për çdo sajt. Zgjidhni llojin dhe stilin e butonave, specifikoni një email dhe opsione të tjera, ose zgjidhni një nga platformat: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad ose FeedFlare. Merrni kodin e butonit.

në orën 8:00 Redakto mesazhin 6 komente

Pershendetje te dashur miq. Artikulli i sotëm do t'i kushtohet krijimit të një blloku butonash social pa shërbime dhe shtojca. Dhe ky bllok do të përfshijë gjithashtu butona që lejojnë vizitorët e faqes të printojnë faqen, të dërgojnë një lidhje te artikulli me e-mail dhe të shënojnë artikullin tuaj. Butona të tillë mund të gjenden pothuajse në çdo faqe sot. Vetëm tani ato zbatohen duke përdorur shërbime ose shtojca. Dhe unë do t'ju tregoj se si ta bëni vetë.

Shërbimet që kam përdorur në sajtet e klientëve dhe në blogun tim - dhe . Këto shërbime e bëjnë mjaft të lehtë zbatimin e detyrës.

Cili është avantazhi i butonave tuaj social ndaj shërbimeve dhe shtojcave

  1. Sigurisht, faktori i padiskutueshëm është shpejtësia e ngarkimit të faqes. Kështu, për shembull, shërbimi PLUSO që përdor në blog, në rastin më të mirë, i shton ngarkesës 633 milisekonda.

Dhe në këtë bllok, përdoren vetëm imazhet e nevojshme të butonave social, të kombinuara në . Të gjitha stilet janë mbajtur në minimum. Plus një kornizë e thjeshtë html.

  1. Mënyra se si unë propozoj nuk përmban asnjë lidhje të jashtme. Jo, ka lidhje, por të gjitha do të jenë si lidhje të brendshme. Nëse dëshironi, mund t'i keni gjithmonë. Dhe atëherë nuk do t'i shihni fare.

  1. Instalim shumë i lehtë. Mjafton të futni kodin html të bllokut në kodin burimor të faqes së faqes, të ngarkoni sprite, të shtoni stile css dhe instalimi përfundon. Thjesht duhet të korrigjoni shtegun e skedarit të imazhit të butonit.
  2. Ky artikull nuk është më tepër as një plus dhe as një minus ndaj bllokut të tij të butonave socialë. Truku është se blloku i tij nuk ka një numërues të klikimeve të butonit. Dhe kjo mund të llogaritet si minus. Por, nga ana tjetër, është e mundur të vendosni çdo buton dhe do të dini saktësisht se sa herë vizitorët tuaj kanë klikuar mbi butonat dhe kanë shpërndarë artikujt tuaj në rrjetet sociale.
  3. Statistikat e mbledhura nga shërbimet në faqen tuaj nuk do t'u transferohen më palëve të treta.

Futja e një blloku butonash social në kodin burimor

Ne do të shqyrtojmë versionin klasik, kur butonat janë të vendosur pas artikullit.

Këtë mund ta bëni ose duke hapur skedarin përgjegjës për shfaqjen e artikujve (single.php) dhe duke shtuar një bllok butonash social në kodin burimor. Përndryshe, kjo mund të bëhet përmes skedarit të funksionit të temës (functions.php).

Unë do t'i tregoj të dyja opsionet, dhe ju zgjidhni atë që ju përshtatet.

Futja e një blloku në kodin burim single.php

Paralajmërim: Bëni një kopje rezervë të skedarit single.php përpara se të vazhdoni!

Hapja e panelit të administratorit të WordPress "Pamja""Redaktor""Single hyrje (single.php)".

Në kodin burimor, kërkoni vendin ku përfundon dalja e artikullit dhe fillon komentet ose faqet. Pikërisht në këtë vend do t'ju duhet të futni kodin html të bllokut të butonave social.

Shikoni me kujdes pamjen e ekranit, përqendrohuni në kodet përgjegjëse për prodhimin e artikullitdhe komentet. Dhe ngjitni kodin më poshtë.

Sigurisht, do të ketë disa ndryshime në shabllonet tuaja, por jam i sigurt që do ta kuptoni, nuk ka asgjë të komplikuar në këtë. Dhe përveç kësaj, ju keni një kopje rezervë, nuk ka asgjë për t'u frikësuar.

Dhe këtu është kodi html i bllokut të butonave social:

Shpjegimet e kodit:është një div e vetme me klasë .share që përmban lidhje me rrjetet sociale. Lidhja hapet në një dritare të veçantë pop-up, ky funksion onClick=window.open është përgjegjës për këtë. Zëvendësimi i një lidhjeje në një artikull bëhet me këtë kod. Çdo lidhje ka klasën e vet, përmes së cilës caktohet imazhi i butonit.

Kjo përfundon futjen përmes kodit burimor. Dhe pastaj ju duhet të shtoni stilet css.

Futja e bllokut në kodin burimor single.php nëpërmjet funksioneve të temës

Kujdes: para se të filloni, bëni një kopje rezervë të skedarit tuaj functions.php!

Për të përdorur këtë opsion, duhet të hapni skedarin functions.php dhe të shtoni këtë kod në fund:

/* Fut butonat social */ add_action("comments_template","soc_button"); funksioni soc_button() ( ?> Dhe kini kujdes pasi të keni ngjitur kodin, nuk duhet të keni hapësira ose karaktere të tjera. Apo thjesht mbyllni kodin php?>. Përndryshe, faqja do të ndalojë së punuari.

Shpjegimet e kodit: vendi ku do të vendosen butonat e mediave sociale përcaktohet nga çelësi API comments_template . Ky çelës përcakton vendin përpara komenteve. Vetë kodi i butonit social është i mbyllur në etiketat e pasme për hapjen dhe mbylljen e php. Në kod i shënova me të kuqe. ky është i gjithë truku i futjes së kodit html në php, përmes funksioneve të temës.

Në këtë dhe kjo metodë ka mbaruar, le të kalojmë në ngarkimin e imazheve në sit.

Ngarkimi i imazheve të butonit në server

Për shembull, kam përgatitur disa sprite me imazhe të butonave socialë. Ju mund t'i shkarkoni ato.

Sprite që po përdor si shembull është vetëm 3,97 kb dhe përmban vetëm butonat e nevojshëm. Dhe meqenëse kjo është një sprite, atëherë ka vetëm një kërkesë për bazën e të dhënave, dhe jo për secilin buton veç e veç.

Shkarkoni imazhe ose përgatitni tuajat dhe ngarkojini në faqen tuaj. Unë mendoj se ky nuk duhet të jetë problem. Më tej, një lidhje me këtë sprite do të kërkohet për të dizajnuar butonat përmes stileve css.

Përfshirë stilet CSS

Sigurisht, ky hap mund të bëhet fillimisht, por unë preferoj të bëj të gjitha punët komplekse teknike fillimisht, dhe më pas të vazhdoj te gjërat e vogla të këndshme me stilet css.

Pra, hapni skedarin style.css përgjegjës për dizajnin e faqes tuaj. Dhe ngjitni këto stile:

Ndani një ( ekran: blloku i linjës; rreshtimi vertikal: trashëgo; diferenca: 5 px 0 0 2 px; mbushja: 0 px; madhësia e shkronjave: 0 px; gjerësia: 40 px; lartësia: 40 px; sfondi: url ("http://test ..png ") lëvizje pa përsëritje 0px 0px transparente;) .share a.vkontakte ( sfond: url("http://test..png ") scroll pa përsëritje -168px 0px transparent; ) .share a.google ( sfondi: url ("http://test..png ") lëviz pa përsëritje -252px 0px transparent; ) .share a.livejournal ( sfond: url("http://test..png ") pa përsëritje lëviz -336px 0px transparent; ) .share a.twitter ( sfond: url("http://test..png ") scroll pa përsëritje -42px 0px transparent; ) .share a.mail ( sfond: url("http ://test..png ") lëvizje pa përsëritje -294px 0px transparente; ) .share a.odnoklassniki ( sfond: url("http://test..png ") lëvizje pa përsëritje -126px 0px transparente; ) .share a.pinterest ( sfond: url ("http://test..png ") rrotullim pa përsëritje -210px 0px transparent; ) .share a.liveinternet ( sfond: url("http://test..png ") lëvizje pa përsëritje -378px 0px transparente; ) .share a.evernote ( sfond: url("http://test..png") rrotullim pa përsëritje -420px 0px transparent; ) .share a.bookmark ( sfond: url("http://test.. png ") scroll pa përsëritje -462px 0px transparente; ) .share a.email ( sfond: url("http://test..png ") scroll pa përsëritje -504px 0px transparent; ) .share a.print ( sfond: url("http://test..png ") lëvizje pa përsëritje -546px 0px transparente; ) .share a.digg ( sfond: url("http://test..png ") lëvizje pa përsëritje -588px 0px transparent; ) .share a.spring ( sfond: url("http://test..png") lëvizje pa përsëritje -630px 0px transparente; )

Shpjegimet e kodit: klasa .share përcakton pamjen e përgjithshme të bllokut, madhësinë e secilit buton, mbushjen dhe vendos një sfond uniform. Dhe pastaj secila lidhje ka klasën e saj dhe secilës lidhje të tillë, përmes veçorisë së sfondit, i caktohet pamja e një butoni. Butonat janë dhënë si një sprite css, dhe secili buton është 40 pikselë i gjerë dhe 40 pikselë i lartë, me mbushje 2 px mes tyre, duke ju lejuar të përcaktoni me saktësi imazhin për secilin buton. Kjo do të thotë, butoni i parë është specifikuar si 0, dhe i dyti si 42, e kështu me radhë. Në kod, këto vlera tregohen në portokalli. Lidhja me sprite është gjithashtu e theksuar me portokalli, ju e ndryshoni atë në shtegun drejt spritit tuaj.

Kjo përfundon të gjithë procesin e krijimit të bllokut tuaj të butonave socialë. Mund të vazhdoni me siguri të kontrolloni.

Dhe unë gjithashtu kam një video tutorial në të cilin i gjithë procesi tregohet vizualisht, shtylla tregon funksionimin e vetë butonave. Shikoni dhe zbatoni në faqet e internetit dhe bloget tuaja.


Tani kjo është e gjitha. Ai e përballoi detyrën. Ju uroj të gjithëve fat dhe shihemi në artikuj të rinj dhe video tutoriale.

Nëse vëreni një gabim, zgjidhni një pjesë të tekstit dhe shtypni Ctrl + Enter
SHPËRNDAJE:
Kompjuterë dhe pajisje moderne