Úvodná » WordPress » Optimalizácia rýchlosti WordPress s vlastnými Ikonami zdieľania v sociálnej sieti

    Optimalizácia rýchlosti WordPress s vlastnými Ikonami zdieľania v sociálnej sieti

    Zdá sa, že je to ľahká úloha, ale pridávanie dobre fungujúcich tlačidiel sociálneho zdieľania na stránku WordPress môže byť ťažké. Keď hovorím, že sa správajú dobre, myslím jednoduché, ľahké, priateľské k zdrojom, rýchle - najväčšie pluginy pre sociálne zdieľanie tam nie sú. Majú tendenciu jesť zdroje ako blázon a prečo by niekto chcel zvýšiť čas načítavania pluginov o 25-35% len na zobrazenie niektorých ikon na svojich stránkach?

    Dobrou správou je, že nevyhnutne nepotrebujete plugin na splnenie tejto úlohy. V tomto návode vám ukážem, ako môžete ľahko pridať vlastné tlačidlá sociálneho zdieľania na konci príspevkov na vašom webe WordPress s len niekoľko riadkov kódu.

    Krok 1: Vytvorte tlačidlá pre spoločenské zdieľanie

    Na generovanie ikon zdieľania použijeme generátor jednoduchých zdieľaných tlačidiel, ktorý je praktický a ľahko použiteľný webový nástroj. Hlavnou výhodou tejto aplikácie je, že tlačidlá, ktoré generuje, bežia na fronte nebudú zaťažovať váš server a môžete tiež udržať aktivity vašich používateľov súkromné.

    Ak chcete generovať vlastné tlačidlá, prejdite tu a stlačte tlačidlo Začať. Vyberte 1 zo 6 rôznych štýlov tlačidiel. kliknite Ďalšie a začiarknite políčko sociálne siete ktoré chcete pridať na svoje stránky. Keď skončíte, budete musieť vyplniť informácie o vašich webových stránkach.

    Na tejto obrazovke (nižšie) nájdete dve možnosti: 'No JavaScript' a 'JavaScript'. kliešť JavaScript, pretože umožní prehliadaču dynamicky zistiť adresu URL, takže vaši návštevníci budú môcť zdieľať každý príspevok individuálne nielen s adresou URL domovskej stránky.

    Nakoniec sa pozrite na živý náhľad, stiahnite si vybratú sadu ikon a uchopte vygenerovaný kód.

    Krok 2: Vytvorte téma pre deti

    Teraz budete musieť pridať generované ikony a kód na svoje stránky. Najprv budete musieť vytvoriť dieťa tému.

    Pomocou nášho tutoriálu môžete ľahko vytvoriť motív WP, alebo môžete postupovať podľa krokov tohto článku WP Codex. Ak už máte jednu, môžete prejsť na krok 3.

    Téma dieťaťa sa vzťahuje na tému, ktorú práve používate - podobne ako dieťa sa týka jeho rodičov. to zdedí všetko (štýl a funkčnosť) z nadradenej témy ale ty možeš pridajte ďalšie funkcie na to.

    V našom prípade budú navyše funkčné vlastné tlačidlá sociálneho zdieľania.

    Krok 3: Vytvorte vlastnú funkciu, ktorá zobrazuje ikony

    Pridáme vlastnú funkciu do súboru functions.php podriadenej témy.

    Pomocou tejto funkcie budete môcť na svojich stránkach pridávať ikony sociálnych sietí pomocou vlastného akčného háku. Ak téma vášho dieťaťa ešte nemá súbor funkcií.php, vytvorte prázdny textový súbor v koreňovom priečinku motívu podradenej témy s názvovými funkciami a zmeňte jeho rozšírenie na .php.

    Do tohto prázdneho súboru vložte nasledujúci riadok kódu:

     

    Keď váš functions.php súbor je pridaný nasledujúci útržok kódu:

     / * * Pridáva vlastné ikony sociálneho zdieľania * / function add_social_sharing () ?> 

    Zdieľať tento príspevok

    konečne odstráňte riadok komentára HTML z útržku kódu vyššie a nahraďte ho kódom HTML ktoré ste generovali v kroku 1 pomocou generátora spoločných zdieľaní tlačidiel.

    Krok 4: Skopírujte príslušný súbor šablón do priečinka Téma detí

    V predvolenom nastavení sú jednotlivé príspevky riadené súborom šablón, ktorý sa nazýva single.php. Niekedy - najmä v modernejších témach - štruktúra single.php je zložitejšia, pretože načíta aj ďalšie súbory šablón. V tomto kroku musíme nájsť príslušný súbor šablóny, do ktorého môžeme neskôr pridať ikony.

    Ak chcete nájsť správne miesto pre tlačidlá sociálnych sietí, musíme nájsť súbor šablóny obsahuje funkciu, ktorá načíta obsah jednotlivých príspevkov.

    Poďme otvoriť editor tému v administrátorskom paneli aplikácie WordPress pod Vzhľad> Editor. V pravom hornom rohu nájdete rozbaľovací zoznam, v ktorom môžete vybrať svoju nadradenú tému. V rozbaľovacej ponuke sa zobrazia všetky súbory šablón, ktoré obsahuje vaša nadradená téma. Prejdite nadol, kým nenájdete Šablóna s jedným príspevkom (tzv. single.php) a otvorte ho.

    Ak nadradený motív používa get_template_part () WP funkcia v single.php súboru, čo znamená, že na načítanie obsahu jedného príspevku sa použije ďalší súbor šablóny.

    Najprv musíte zistiť, ktorý z nich je tento. Názov súboru dodatočnej šablóny je prvým parametrom get_template_part () funkcie.

    v Dvadsať pätnásť to vyzerá takto:

    get_template_part ('obsah', get_post_format ());

    Prvý parameter je , Obsah ' čo znamená, že hľadáme súbor šablón nazvaný content.php. Tento súbor musíte skopírovať z koreňového priečinka nadradenej témy do koreňového priečinka motívu dieťaťa, aby ste ho mohli upraviť.

    Krok 5: Pridajte akčný hák do správneho súboru šablón

    Vytvorili sme funkciu nazvanú add_social_sharing () v kroku 3 a pripojili sme ho k vlastnému akčnému háku nazvanému custom_social_share. Teraz budeme musieť tento hák pridať na miesto, kde chceme vykonať funkciu.

    Tu je útržok kódu, ktorý budete musieť vložiť na správne miesto:

    Ďalej hľadať správne miesto.

    Otvorte súbor šablóny, ktorý ste pridali do vášho motívu v kroku 4, v editore kódov alebo v editore motívov aplikácie WordPress admin dashboard a vyhľadajte obsah() funkcie.

    Skontrolujte, či existuje wp_link_pages () funkcia hneď po obsah() Funkcie. Ak existuje, potom nasleduje útržok kódu hore; inak nasleduje obsah() funkcie.

    Krok 6: Pridajte kód CSS na tému Dieťa

    Otvor style.css súbor vášho dieťaťa buď vo vašom editore kódu, alebo v editore motívov aplikácie WordPress admin dashboard, skopírujte kód CSS, ktorý ste vygenerovali v kroku 1, vložte ho na koniec súboru a uložte ho.

    Do súboru CSS pridáme dve ďalšie riadky, aby sa ikony sociálneho zdieľania správne zobrazovali v každej téme. Skopírujte a prilepte nasledujúci útržok kódu na koniec style.css file:

     Tlačidlá ul.share-li a okraj: 0;  ul.share-tlačidlá li img zobrazenie: inline;  

    Krok 7: Odovzdajte sadu ikon sociálnych médií na server

    Odovzdajte vybratú sadu ikon sociálnych médií stiahnutú v kroku 1 do priečinka motívu pre deti. Pripojte svoj server cez FTP, vytvorte nový priečinok s názvom snímky v koreňovom adresári vašej tematickej zložky (/ wp-content / themes / your-child-theme / images) a nahrajte tu ikonu.

    Pomenujeme priečinok snímky pretože toto je predvolený názov priečinka obrázka, ktorý používa generátor jednoduchých zdieľaných tlačidiel.

    Krok 8: Skontrolujte cestu k súborom ikon

    Po odovzdaní ikon sociálnych médií na server v kroku 7 je dôležité skontrolovať cestu k súborom s ikonami, aby ste sa uistili, že sa načítajú.

    Cesta súboru obrázkov poskytuje prehliadaču prehľad o jeho polohe na serveri. Pozrime sa na dráhy obrázkov vo vnútri functions.php súboru témy dieťaťa. Otvorte súbor v editore kódu a prejdite na add_social_sharing () kde potrebujete skontrolovať kód HTML, ktorý ste generovali pomocou generátora jednoduchých zdieľaných tlačidiel.

    V kóde HTML nájdete značka s src atribút pre každú ikonu. Skontrolujte, či každý z nich src atribúty ukazujú na presné miesto, kde bola vaša sada ikon odovzdaná v kroku 7.

    Generátor jednoduchých zdieľaných tlačidiel pridáva relatívne cesty k Súbory. niekedy prehliadače nemôžu zobrazovať obrázky, ak používate relatívnu cestu, takže je to dobrý nápad použite namiesto toho absolútne cesty. Týmto spôsobom každý prehliadač potenciálne používaný vašimi návštevníkmi môže byť mŕtvy istý o umiestnení požadovaných súborov s ikonami.

    Relatívna cesta k obrázku pridaná generátorom vyzerá takto:

    Zmeňme to src atribút každej ikony na absolútnu cestu, čo znamená, že bude obsahovať úplnú adresu URL súboru.

    Vyššie uvedená cesta URL bude vyzerať takto:

    Krok 9: Odovzdajte modifikované súbory a aktivujte téma pre deti

    Pripojte svoj server cez FTP a odovzdajte všetky súbory, ktoré sme vytvorili v tomto návode, ktoré ste ešte nenahrali: functions.php, style.css, a príslušný súbor šablóny (v tomto výučbe buď single.php alebo content.php).

    Nakoniec aktivujte podradenú tému na paneli správcu služby WP pod Vzhľad> Témy Ponuka.

    Teraz ste pripravení so svojimi super ľahkými, prispôsobenými ikonami sociálneho zdieľania, ktoré šetria zdroje. Môžete ísť online a skontrolovať to naživo na vašich stránkach.

    záver

    V tomto návode som vám ukázal, ako pridať vlastné tlačidlá sociálneho zdieľania na konci jednotlivých príspevkov. Ikony zdieľania môžete pridať na akékoľvek iné miesta na vašom webe s pomocou vytvoreného akčného háku.

    Stačí pridať kód, ktorý sme použili v kroku 5, do miesta, kde chcete zobraziť tlačidlá:

    Budete tiež musieť nájsť správny súbor šablóny, ak chcete umiestniť ikony niekde inde. Jednotlivé stránky sa riadia súborom šablón nazvaným page.php, kým sú načítané prílohy médií, ako sú obrázky attachment.php.

    Ak chcete zobraziť tlačidlá sociálneho zdieľania na inom mieste na vašich webových stránkach, môžete použiť hierarchiu šablón WordPress na jej nájdenie.

    • Stiahnuť zdroj