Homepage » WordPress » A WordPress sebesség optimalizálása egyéni szociális megosztási ikonok használatával
A WordPress sebesség optimalizálása egyéni szociális megosztási ikonok használatával
Lehet, hogy könnyű feladat, de jól viselkedő társadalmi megosztási gombok hozzáadása egy WordPress webhelyhez problémát jelenthet. Mikor azt mondom, hogy jól viselkedek, egyszerű, könnyű, erőforrás-barát, gyors, leginkább társadalmi megosztási bővítményeket értem. Ezek hajlamosak az őrült erőforrásokra, és miért akarna bárki 25-35% -kal növelni a plugin betöltési idejét, csak néhány ikon megjelenítéséhez saját webhelyén?
A jó hír az, hogy nem feltétlenül szükséged van egy pluginre a feladat végrehajtásához. Ebben a bemutatóban megmutatom, hogyan lehet könnyen Egyéni szociális megosztási gombok hozzáadása a WordPress webhelyen lévő bejegyzések végéig csak néhány sor kód.
1. lépés: A társadalmi megosztási gombok létrehozása
Az egyszerű megosztási gombok generátort, egy praktikus és könnyen használható webeszközt fogjuk használni a megosztási ikonok létrehozásához. Ennek az alkalmazásnak a fő előnye, hogy az általuk generált gombok a frontenden futnak nem terhelik a szervert és megőrizheti a felhasználók tevékenységeit is.
Az egyéni gombok létrehozásához menjen ide és nyomja meg a gombot Kezdődik. A 6 különböző gombstílus közül válassza az 1-et. Kattints következő és jelölje be a közösségi hálózatok szeretné hozzáadni a webhelyéhez. Ha elkészült, meg kell töltenie a webhelye adatait.
Ezen a képernyőn (lentebb) két lehetőség található: "Nincs JavaScript" és 'JavaScript'. Ketyegés JavaScript, mivel lehetővé teszi a böngésző számára, hogy dinamikusan észlelje az URL-t, ezért a látogatók egyedileg megoszthatják az egyes bejegyzéseket, nem csak a kezdőlap URL-jét.
Végül nézd meg az élő előnézetet, töltsd le a kiválasztott ikonkészletet, és ragadd meg a létrehozott kódot.
2. lépés: Gyermek témájának létrehozása
Most meg kell adnia a generált ikonok és kódot a webhelyére. Először is el kell készítenie a gyermek témáját.
A bemutatónk segítségével könnyen létrehozhat egy WP gyermek témát, vagy követheti a WP Codex cikk lépéseit. Ha már van ilyen, akkor ugorhat a 3. lépéshez.
A gyermek témája a jelenleg használt témához kapcsolódik - valamivel hasonló módon, mint a gyermek a szüleivel kapcsolatos. Azt örököl mindent (stílus és funkcionalitás) a szülő témától de megteheted további funkciók hozzáadása hozzá.
Esetünkben az extra funkciók az egyéni szociális megosztási gombok lesznek.
3. lépés: Hozzon létre egy egyéni funkciót, amely megjeleníti az ikonok
Egyéni függvényt adunk hozzá a gyermek téma függvényeihez .php.
Ezzel a funkcióval egyéni akcióhorog használatával hozzáadhatja a webhelyén található társadalmi ikonokat. Ha a gyermek témája még nem rendelkezik function.php fájldal, akkor hozzon létre egy üres szövegfájlt a gyermek témájának gyökérmappájában a névfunkciókkal, és módosítsa annak kiterjesztését .php.
Helyezze be a következő kódsorot az üres fájlba:
Mikor a functions.php állítsa be a következő kódrészletet:
/ * * Hozzáadja az egyéni szociális megosztási ikont * / függvény add_social_sharing () ?>
Oszd meg ezt a posztot
Végül törölje a HTML-megjegyzés sorát a fenti kódrészletből cserélje ki a HTML kóddal az 1. lépésben létrehozta a Szociális megosztási gombok generátort.
4. lépés: Másolja a megfelelő sablonfájlt a Gyermek téma mappába
Alapértelmezés szerint az egyes bejegyzéseket egy sablonfájl szabályozza single.php. Néha - különösen a modernebb témákban - a struktúra single.php bonyolultabb, mivel további sablonfájlokat is betölt. Ebben a lépésben meg kell találnunk a megfelelő sablonfájlt, ahol később hozzáadhatjuk az ikonokhoz.
Ahhoz, hogy megtaláljuk a megfelelő gombokat a szociális gombokhoz, meg kell találnunk a sablonfájlt tartalmazza az egyes bejegyzések tartalmát betöltő funkciót.
Nyissuk meg a téma szerkesztőt a WordPress admin irányítópultján Megjelenés> Szerkesztő. A jobb felső sarokban található egy legördülő lista, ahol kiválaszthatja a szülői témát. A legördülő lista alatt láthatók az összes szülőfájl, amelyet a szülői téma tartalmaz. Görgessen lefelé, amíg meg nem találja a Egyetlen üzenet sablon (az úgynevezett single.php) és nyissa meg.
Ha a szülői téma a get_template_part () WP funkció a single.php Ez azt jelenti, hogy egy további sablonfájl használatával betölti az egyetlen bejegyzés tartalmát.
Először is meg kell találnod, hogy melyik az. A további sablonfájl neve a get_template_part () funkció.
Az első paraméter az 'tartalom' ez azt jelenti, hogy keressük a hívott sablonfájlt content.php. Ezt a fájlt a szülői téma gyökérmappájából át kell másolni a gyermek téma gyökérmappájába, hogy módosítsa azt.
5. lépés: Adja hozzá a Action Hook-ot a jobb oldali sablonfájlhoz
Létrehoztunk egy hívott függvényt add_social_sharing () a 3. lépésben, és egy egyedi akcióhoroghoz csatoltuk custom_social_share. Most hozzá kell adnunk ezt a horogot azon a ponton, ahol azt szeretnénk, hogy a függvény végrehajtható legyen.
Itt van a kódrészlet, amelyet be kell illeszteni a megfelelő helyre:
Ezután keressük meg a megfelelő helyet.
Nyissa meg a gyermek témájához hozzáadott sablonfájlt egy kódszerkesztőben, vagy a WordPress admin irányítópultjának témaszerkesztőjében, és keresse meg a A tartalmat() funkció.
Ellenőrizze, hogy van-e a wp_link_pages () funkció után A tartalmat() funkció. Ha van, akkor a fenti kódrészlet következik; ellenkező esetben ez követi a A tartalmat() funkció.
6. lépés: A CSS kód hozzáadása a gyermek témához
Nyissa meg a style.css a gyermek témájának fájlja a kódszerkesztőben vagy a WordPress admin műszerfalának szerkesztőjében, másolja az 1. lépésben létrehozott CSS kódot, illessze be a fájl végére, és mentse el.
Két további sort fogunk hozzáadni a CSS fájlhoz, hogy az egyes témákban megfelelően jelenjenek meg a társadalmi megosztási ikonok. Másolja és illessze be a következő kódrészletet a style.css file:
ul.share-gombok li a border: 0; ul.share-button li img kijelző: inline;
7. lépés: Töltse fel a Szociális média ikonkészletet a kiszolgálóra
Töltse fel a kiválasztott szociális média ikonkészletet, amelyet az 1. lépésben letöltött a gyermek téma mappájába. Csatlakoztassa a kiszolgálót FTP-n keresztül, hozzon létre egy új mappát képek a gyermek témakönyvének (/ wp-content / themes / your-child-téma / képek) gyökérében, és töltse fel az itt található ikont.
Megnevezzük a mappát képek mert ez az alapértelmezett neve az egyszerű megosztási gombok generátor által használt képmappának.
8. lépés: Ellenőrizze az ikonfájlok elérési útját
Miután feltöltötte a szociális média ikonokat a kiszolgálóra a 7. lépésben, fontos, hogy ellenőrizze az ikonfájlok elérési útját, hogy megbizonyosodjon arról, hogy azok betöltésre kerülnek.
A képfájl elérési útja egy tippet ad a böngészőnek a helyéről a kiszolgálón. Nézzük meg a képútvonalakat a functions.php a gyermek témája. Nyissa meg a fájlt a kódszerkesztőben, és navigáljon a add_social_sharing () funkció, ahol ellenőrizni kell az egyszerű megosztási gombok generátorával létrehozott HTML kódot.
A HTML-kódban talál egy címke egy src attribútum minden ikonra. Ellenőrizze, hogy mindegyik src az attribútumok arra a pontos helyre mutatnak, ahol az ikonkészletet a 7. lépésben feltöltötték.
Az Egyszerű megosztási gombgenerátor relatív útvonalakat ad hozzá a fájlokat. Néha A böngészők nem képesek megjeleníteni a képeket, ha relatív útvonalat használ, így jó ötlet használjon abszolút útvonalakat. Ily módon minden látogató által esetleg használt böngésző biztos lehet abban, hogy a szükséges ikonfájlok elhelyezkedése miatt.
A generátor által hozzáadott relatív képút úgy néz ki, mint ez:
Változtassuk meg a src minden egyes ikon attribútuma abszolút elérési útra, ami azt jelenti, hogy tartalmazza a fájl teljes URL-jét.
A fenti URL-útvonal így néz ki:
9. lépés: Töltse fel a módosított fájlokat és aktiválja a gyermek témáját
Csatlakoztassa a kiszolgálót az FTP-n keresztül, és töltse fel az ebben a bemutatóban létrehozott összes fájlt, amelyet még nem töltött fel: a functions.php, a style.css, és a megfelelő sablonfájl (ebben a bemutatóban a single.php vagy a content.php).
Végül aktiválja a gyermek témát a WP admin irányítópult alatt a Megjelenés> Témák menü.
Most már készen áll a szuper könnyű, erőforrás-megtakarító, testreszabott szociális megosztási ikonokkal. Elérheted az internetet, és ellenőrizheted, hogy a webhelyeden élsz.
Következtetés
Ebben a bemutatóban megmutattam, hogyan lehet hozzáadni az egyéni társadalmi megosztási gombokat az egyes bejegyzések végéhez. A létrehozott akcióhorog segítségével hozzáadhatja a megosztási ikont a webhelyének bármely más helyéhez.
Csak add hozzá az 5. lépésben használt kódot, ahol a gombokat szeretné megjeleníteni:
Meg kell találnia a megfelelő sablonfájlt is, ha az ikont máshol szeretné elhelyezni. Az egyes oldalakat egy sablonfájl szabályozza page.php, míg a média-mellékleteket, például a képeket betölti attachment.php.
Ha szeretné megjeleníteni a szociális megosztási gombokat egy másik helyen a webhelyén, a WordPress Template Hierarchy használatával megtalálhatja azt.
