Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

Húsz tizenhét az alapértelmezett téma, a WordPress 4.7-es verziójában. Ez az üzletorientált téma jelentősen eltér a korábban megjelent szabványos témáktól, és tükrözi a WordPress szélesebb átállását a blogokhoz megfelelő platformra egy olyan platformra, amely minden típusú webhely létrehozásához alkalmas.

Ha megpróbálsz dolgozni a húszadik tizenhét évesnél, akkor gyorsan meg fogod érteni: ez a téma semmi köze az elődeihez. Korábban az alapértelmezett témák csak minimális kiigazítást követeltek, mivel funkcionális témák "kívül a dobozból". Húsz tizenhét egy másik eset.

Természetesen használhatod ezt a témát blogok számára, de eredetileg más célokra fejlesztették ki. A téma úgy tervezték, hogy üzleti oldalt hozzon létre céloldalt (céloldalt) főoldalként - ezt gyorsan meg tudja érteni a hivatalos demó megvizsgálásával.

Ennek a torzításnak köszönhetően a húsz tizenhét téma összetettebbé és időigényesebbé vált. Ebben a cikkben megnézzük a Huszonhét év témáját, megjegyezzük annak összetevőit, és átgondoljuk a professzionális kirakodások létrehozásának témáját.

Bevezetés a huszonhét évbe

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

A céloldalt főoldalként gyakran megtalálja az üzleti oldalak táborában. A Húsz tizenhét témája leegyszerűsíti a vonzó céloldalak kialakítását a vállalatok számára. A téma minden lehetőségeinek kiértékeléséhez csak nézze meg a következő demo példát.

A navigáció elég egyszerű, köszönhetően a vágott felső panel használatának. A téma egyetlen betűtípust használ - a Libre Franklin, amelyet különböző stílusokban és különböző nyomokban használnak.

A megfelelő hangolás után a huszonhét tizenhét téma professzionális, modern megjelenést kölcsönöz az ember által olvasható betűkészletek és sztrájkoló grafikák alapján, elég szűk szóközökkel.

Hogyan hozzunk létre szakaszokat a huszonhét témában a főoldalon?

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

Ez nagymértékben leegyszerűsíti a Huszonhét tizenhét különböző funkcióinak szerkesztését, például a fejlécben lévő képet, a webhely szlogenjeit, címét és az oldal minden egyes szakaszában található tartalmat. Csak keresse meg a szerkeszteni kívánt tartalmat, kattintson a parancsikonra, majd változtassa meg a tartalmat.

A Huszonhét Téma témájának felállításának bemutatásához a témát a saját webhelyemre telepítem. Menjünk le hozzá.

1. lépés: Hozzon létre oldalakat a főoldal egyes részeihez.

Wordpress-témákat állítunk fel, huszonhét éves, mindent a wordpress-ről

Először több oldalt kell létrehoznunk;

  • Egy olyan oldal, amely statikus kezdőlap lesz
  • Az oldal, amelyet bloglapként fog használni
  • Négy további oldal, amely tartalmat tartalmaz, amely a főoldal szakaszaiban jelenik meg. Ha a blogoldalt a főoldal egyik szakaszaként szeretné használni, elegendő három oldal helyett négy oldalt létrehozni.

Az én esetemben létrehoztam egy kezdőlapot, egy blog oldalt, egy "About Me" oldalt, egy szolgáltatást tartalmazó oldalt és egy kapcsolatot tartalmazó oldalt.

2. lépés: Adjon hozzá egy bélyegképet minden oldalhoz.

A parallax effekt végrehajtásához minden egyes oldalhoz hozzá kell adni egy széles bélyegképet. Ez az indexkép része lesz a fő oldal szakaszainak. Minden oldalt hozzá kell adnia bélyegképeket, kivéve, talán csak a főoldalt.

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

3. lépés: Csatlakoztassa a statikus kezdőlapot és a rekord oldalt

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

Válassza ki a Static Front Page menüpontot, majd hajtsa végre a következő beállításokat:

Ne felejtse el kattintson a Mentés gombra. Adja. Folytassa a következő lépéssel.

4. lépés: Az oldalak összerendelése a főoldal egyes részeihez.

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

5. lépés: Hozzon létre egy alapvető navigációs menüt

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

Kész! Szekciókkal ellátott statikus kezdőlapot hoztak létre.

Dinamikus navigáció létrehozása

A húsz tizenhét év egyik hiányzó funkciója a beépített navigációs támogatás a főoldal szakaszai között. Jó lenne, ha a navigáció azonnal lefordítaná a főoldal megfelelő szakaszait. Gyorsan meg tudjuk oldani ezt a pillanatot.

Az első dolog, amire szükségünk van, hozzon létre egy olyan menüt, amely hivatkozni fog az azonosító attribútumokra, nem pedig a webhely különböző oldalaira. Ennek megvalósításához olyan önkényes linkeket kell létrehoznia, amelyek hasonlítanak valami hasonlóra:

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

Egy azonosító létrehozásakor egyszerűen csak használja a lapok fejlécét a szakaszokból. Győződjön meg róla, hogy a fejléceket kisbetűvé alakítja, és a címkével ellátott összes üres helyet a kötőjellel helyettesíti.

Ha nem kell alkönyvtárakkal dolgoznia, elhagyhatja ezt az elemet, és létrehozhatja a fenti képen látható struktúrát.

Miután létrehozta a navigációt, meg kell adnia egy azonosítót a főoldal egyes részeihez. Ennek két módja van.

Megjegyzés: egy azonosító hozzáadásához bekerítettem a címet a span elemben. Az azonosító maga az oldal kisbetűs fejléce, a terek helyett a kötőjelekkel. Ez az azonosító megegyezik a navigációs menü linkjeinek hozzáadásával. Szintén hozzáadtam egy stílus-attribútumot és egy 96 képpontos felső margót. A hivatkozás kattintásakor ez a behúzási érték lehetővé teszi, hogy a tartalom lecsökken, így látható a lehajtható navigációs sáv alatt.

Íme a kód, amely ugyanazt az eredményt kapja meg:

Mit csinál? Először keressük meg az egyes szakaszok címét, és a megfelelő stílusokkal keressük össze. Ezenkívül a kód létrehoz egy id értéket, megkapja a fejlécet és átalakítja azt kisbetűsre, módosítva a kötőjel szóközeit. Így ha van egy címe a My Blog címmel (mint a fenti képen), ez a kód hozzáadja a id attribútumot id = 'my-blog'.

Ahhoz, hogy letöltsd a kódot a webhelyen, hozzá kell adnod az egyik helyhez: vagy a Huszonhét tizenkét gyermek téma JS-fájlához vagy a tetszőleges kódot betöltő bővítményhez.

Én inkább a második utat. Egyszerűen használhatja a Simple Custom CSS és JS plugint a jQuery kód hozzáadásához.

Navigációs menü létrehozásával és néhány jQuery kód hozzáadásával kényelmes és praktikus navigációt hoztunk létre.

Kitűnő. Most húsz tizenhét van beállítva céloldalként, és az alap navigáció navigációként működik a szakaszok között. További fejlesztéseket tehet:

Ha úgy dönt, hogy a jQuery használatával navigál a főoldal szakaszai között, akkor ebben az esetben használja a feltételes címkéket, ha a kódot csak a főoldalon töltheti be.

Ha webhelye olyan további oldalakat tartalmaz, amelyek nem a főoldal szakaszai, add hozzá őket a navigációs menühöz, és tegyük fel az összes hivatkozást a főoldal szakaszaira egy külön legördülő menüben, amint az az alábbi képernyőképen látható.

Wordpress-témákat állítunk fel huszonhét éves, mindegyik wordpress-ről

A WordPress feliratot eltávolítjuk a huszonhét éves laptól

Ez egyszerűen történik. Elegendő a CSS-stílusban megadni a szabályt:

A gyermek témában is megnyithatja a footer.php fájlt, és törölheti a sort:

Miért kell ezt tenni egy gyermek témában? Annak érdekében, hogy ne veszítse el a téma következő frissítésében bekövetkező változásokat.

A teljes témát szerkesztenie kell. Jobb, ha olyan témát választasz, ahol már mindenre szükség van.

Hello, egyszerű módszerek nem hajtják végre ezt. Legalábbis nem gondoltam semmit, amit tanácsolnának.

Kapcsolódó cikkek