Domovská » WordPress » Optimalizace rychlosti WordPress s vlastní sociální sdílení ikony
Optimalizace rychlosti WordPress s vlastní sociální sdílení ikony
Může se zdát, že je to snadný úkol, ale přidávání dobře se chovajících tlačítek pro sociální sdílení na web WordPress může být hádka. Když říkám dobře se chováme, myslím jednoduché, lehké, zdrojově přátelské, rychlé - většina sociálních pluginů, které tam nejsou. Mají tendenci jíst zdroje jako blázen, a proč by někdo chtěl zvýšit dobu načítání pluginů o 25-35% jen pro zobrazení některých ikon na svých stránkách?
Dobrou zprávou je, že pro splnění tohoto úkolu nemusíte nutně potřebovat plugin. V tomto tutoriálu vám ukážu, jak můžete snadno přidat vlastní tlačítka pro sociální sdílení na konci příspěvků na vašem webu WordPress s jen pár řádků kódu.
Krok 1: Generování tlačítek pro sociální sdílení
Pro generování ikon sdílení budeme používat generátor tlačítek pro jednoduché sdílení, šikovný a snadno použitelný webový nástroj. Hlavní výhodou této aplikace je, že tlačítka generuje běh na frontend, proto nezatěžují váš server a můžete také udržet aktivity svých uživatelů soukromé.
Chcete-li vytvořit vlastní tlačítka, přejděte sem a stiskněte tlačítko Začít. Vyberte si 1 ze 6 různých stylů tlačítek. Klikněte na další a zaškrtněte sociální sítě chcete přidat na své stránky. Až budete hotovi, budete muset vyplnit vaše webové stránky info.
Na této obrazovce (níže) naleznete dvě možnosti: 'Žádný JavaScript' a 'JavaScript'. Klíště JavaScript, vzhledem k tomu, že umožní prohlížeči dynamicky detekovat adresu URL, takže návštěvníci budou moci každý příspěvek sdílet samostatně, nikoli pouze adresu URL domovské stránky.
Nakonec se podívejte na živý náhled, stáhněte si sadu vybraných ikon a vytvořte kód, který jste vytvořili.
Krok 2: Vytvořte podřízený motiv
Nyní budete muset přidat vygenerované ikony a kód na vaše stránky. Nejdříve budete muset vytvořit dětské téma.
Můžete snadno vytvořit WP dětské téma pomocí našeho tutoriálu, nebo můžete postupovat podle kroků tohoto článku WP Codex. Pokud ji již máte, můžete přejít na krok 3.
Téma dítěte souvisí s tématem, které aktuálně používáte - poněkud podobným způsobem jako dítě, které se týká jeho rodičů. To zdědí vše (styl a funkčnost) z nadřazeného motivu ale můžete přidejte další funkce k němu.
V našem případě se jedná o speciální sociální tlačítka pro sdílení.
Krok 3: Vytvořte vlastní funkci, která zobrazí ikony
Do souboru child.php podřízeného tématu přidáme vlastní funkci.
Pomocí této funkce budete moci přidat sociální ikony kdekoli chcete na svých stránkách pomocí vlastního háku akce. Pokud váš podřízený motiv ještě nemá soubor functions.php, vytvořte prázdný textový soubor v kořenové složce vašeho podřízeného tématu s funkcemi názvu a změňte jeho příponu na .php.
Do tohoto prázdného souboru vložte následující řádek kódu:
Když tvůj functions.php soubor je přidán následující fragment kódu:
/ * * Přidá vlastní sociální sdílené ikony * / function add_social_sharing () ?>
Sdílet tento příspěvek
Konečně smazat řádek komentáře HTML z útržku kódu výše a nahradit jej kódem HTML jste generovali v kroku 1 pomocí generátoru tlačítek sociálního sdílení.
Krok 4: Zkopírujte soubor odpovídající šablony do složky Podřízený motiv
Ve výchozím nastavení jsou jednotlivé příspěvky spravovány souborem šablony s názvem single.php. Někdy - zejména v modernějších tématech - struktura single.php je složitější, protože také načítá další soubory šablony. V tomto kroku musíme najít vhodný soubor šablony, do kterého můžeme později přidat ikony.
Pro nalezení správného místa pro sociální tlačítka musíme najít soubor šablony obsahuje funkci, která načítá obsah jednotlivých příspěvků.
Pojďme si otevřít editor editoru v ovládacím panelu WordPress admin pod Vzhled> Editor. V pravém horním rohu najdete rozevírací seznam, ve kterém můžete vybrat nadřazený motiv. Pod rozevíracím seznamem můžete vidět všechny soubory šablony, které obsahuje nadřazený motiv. Přejděte dolů, dokud nenajdete Šablona jednoho příspěvku (tzv. single.php) a otevřete ho.
Pokud nadřazený motiv používá get_template_part () Funkce WP v single.php znamená, že používá další soubor šablony k načtení obsahu jednoho příspěvku.
Nejdříve musíte zjistit, který z nich je. Jméno dalšího souboru šablony je prvním parametrem souboru get_template_part () funkce.
První parametr je 'obsah' což znamená, že hledáme soubor šablony nazvaný content.php. Tento soubor je třeba zkopírovat z kořenové složky nadřazeného motivu do kořenové složky podřízeného motivu, aby jej bylo možné upravit.
Krok 5: Přidejte hák akce do pravého souboru šablony
Vytvořili jsme funkci nazvanou add_social_sharing () v kroku 3 a připojili jsme ho k vlastnímu háku akce, který se nazýval custom_social_share. Nyní budeme muset přidat tento hák na místo, kde chceme, aby byla funkce provedena.
Zde je fragment kódu, který budete muset vložit na správné místo:
Dále se podívejme na správné místo.
Otevřete soubor šablony, který jste přidali do svého podřízeného tématu v kroku 4 v editoru kódu nebo v editoru motivů řídicího panelu aplikace WordPress admin, a vyhledejte obsah() funkce.
Zkontrolujte, zda je wp_link_pages () funkci ihned po obsah() funkce. Pokud existuje, pak po tom následuje úryvek kódu výše; jinak následuje obsah() funkce.
Krok 6: Přidejte kód CSS do podřízeného tématu
Otevři style.css soubor vašeho dětského motivu buď v editoru kódu nebo v editoru témat řídicího panelu aplikace WordPress admin, zkopírujte kód CSS, který jste vygenerovali v kroku 1, vložte jej na konec souboru a uložte jej.
Do souboru CSS přidáme další dva řádky, aby se ikony sociálních sdílení v jednotlivých motivech správně zobrazily. Zkopírujte a vložte následující fragment kódu na konec souboru style.css soubor:
ul.share-buttons li a border: 0; ul.share-buttons li img zobrazit: inline;
Krok 7: Nahrát sadu ikon sociálních médií na server
Nahrajte zvolenou ikonu sociálních médií, kterou jste stáhli v kroku 1, do složky podřízeného tématu. Připojte svůj server přes FTP, vytvořte novou složku s názvem snímky uvnitř kořenové složky vaší podřízené složky motivu (/ wp-content / themes / your-child-theme / images) a nahrajte zde nastavenou ikonu.
Pojmenujeme složku snímky protože se jedná o výchozí název složky obrázků, která používá generátor tlačítek pro jednoduché sdílení.
Krok 8: Zkontrolujte cestu ikonových souborů
Po nahrání ikon sociálních médií na server v kroku 7 je důležité zkontrolovat cestu souborů s ikonami, abyste se ujistili, že budou načteny..
Cesta souboru s obrázkem poskytuje prohlížeči nápovědu o jeho umístění na serveru. Podívejme se na cesty k obrázku uvnitř functions.php souboru podřízeného motivu. Otevřete soubor v editoru kódu a přejděte na add_social_sharing () funkce, kde musíte zkontrolovat kód HTML, který jste vygenerovali pomocí generátoru tlačítek pro jednoduché sdílení.
V HTML kódu najdete tag se znakem src pro každou ikonu. Zkontrolujte, zda každý src Atributy ukazují na přesné umístění, kde byla sada ikon nahrána v kroku 7.
Generátor tlačítek jednoduchého sdílení přidává relativní cesty k soubory. Někdy prohlížeče nemohou vykreslit obrázky, pokud použijete relativní cestu, takže je to dobrý nápad místo toho použít absolutní cesty. Tímto způsobem může být každý prohlížeč potenciálně používaný vašimi návštěvníky mrtvý, pokud jde o umístění požadovaných souborů ikon.
Relativní cesta obrázku přidaná generátorem vypadá takto:
Změňme to src atributu každé ikony na absolutní cestu, což znamená, že bude obsahovat úplnou adresu URL souboru.
Cesta URL výše bude vypadat takto:
Krok 9: Nahrajte změněné soubory a aktivujte podřízený motiv
Připojte svůj server přes FTP a nahrajte všechny soubory, které jsme vytvořili v tomto tutoriálu, který jste dosud nenahráli: functions.php, style.css, a příslušný soubor šablony (v tomto tutoriálu buď single.php nebo content.php).
Nakonec aktivujte podřízené téma v řídicím panelu WP admin pod Vzhled> Témata Jídelní lístek.
Nyní jste připraveni se svými mimořádně lehkými, zdrojově úspornými, přizpůsobenými sociálními sdílení ikon. Můžete jít online a zkontrolovat, zda žijí na vašich stránkách.
Závěr
V tomto tutoriálu jsem vám ukázal, jak přidat vlastní tlačítka pro sociální sdílení na konec jednotlivých příspěvků. Ikony sdílení můžete přidat na jakékoli jiné místo na svých webových stránkách pomocí akčního háku, který jsme vytvořili.
Stačí přidat kód, který jsme použili v kroku 5, na místo, kde chcete zobrazit tlačítka:
Budete také muset najít správný soubor šablony, pokud chcete umístit ikony někde jinde. Jednotlivé stránky řídí soubor šablony nazvaný page.php, zatímco jsou načítány přílohy médií, jako jsou obrázky attachment.php.
Chcete-li zobrazit tlačítka pro sociální sdílení na jiném místě na svých webových stránkách, můžete jej najít pomocí hierarchie šablony WordPress.
