Témafájl

Ebben a kézikönyvben a header.php-ről beszélünk. egy szükséges fájl minden WordPress téma számára. Megmutatom neked egy jó példa erre a fájlra, és tanácsot adok arra vonatkozóan, hogy mi legyen benne, és mi nem.

1. lépés: Bevezetés

Ebben a fájlban nincs egy logó és egy menü, van egy fejtag és sok más címke is, például: link. script. meta és title.

Ne feledje, hogy a "sapka" a webhely összes oldalán megjelenő tartalom. Például egy logó és menü jelenik meg minden oldalon, így azok a header.php fájlba kerülnek.

Ha egy elem csak egy adott oldalon jelenik meg, újra kell gondolnia, hogy ezt az elemet hozzáadja-e a fejlécfájlhoz.

Legyünk dolgozni, remélem tetszik!

2. lépés: Kész kód

Itt kaphatja meg a teljes kódot a témában való felhasználáshoz. Olvassa el a többi lépést annak érdekében, hogy pontosan megértse, mit csinál minden sor.

A kupakban van néhány dolog. Ez a sablon, amit tettem, a következőket teszi: (a következő lépésekben minden egyes konkrét témáról beszélek)

Ezután meg fogjuk beszélni a használt kódot. Meg fogja tanulni, miért kell használni.

3. lépés: Fájlfunkciók.php

Beszéljünk a functions.php fájlról. a következő sorokat adtuk a fájlhoz:

Az első sor létrehozza az állandó THEME_DIR értéket. amely tárolja a sablon könyvtárat. Ezt a konstansot hoztuk létre a téma optimalizálása érdekében. Ha megnézed a header.php fájljunkat. látni fogod, hogy többször is használni kell a könyvtárat, azt is használjuk a functions.php fájlban. hogy eljusson a témához. Ha folyamatosan hívjuk a get_template_directory_uri () szót. csak kérdéseket hozunk létre. Egy konstans létrehozásával és használatával mentjük a processzor erőforrásait, mert csak egyszer hívjuk meg a funkciót.

Ez a sor törli a Meta Generator címkét. mivel ez a címke mindenkinek megmutatja a WordPress telepített verzióját. Ez az információ lehetővé teheti egy támadó számára, hogy felismerje a verzió hibáit és használja azokat.

A CSS hozzáadása

Itt létrehoztunk egy függvényt a linkcímkéknek a header.php-hez való hozzáadásával. A hivatalos WordPress útmutató azt jelzi, hogy a stílusok (.css) és a szkriptek (.js) hozzáadásának legjobb módja a wp_enqueue_script és wp_enqueue_style függvények használata. Tudjon meg többet erről itt.

Először létrehozunk egy függvényt enqueue_styles néven, majd add_action-t hívunk. Ez a sor azt mondja a WordPressnek, hogy hívja fel a funkciót, amikor a "wp_enqueue_scripts" esemény bekövetkezik, ami a wp_head () nevű header.php!

A funkción belül a következő sorok vannak:

Először regisztráljuk a stíluslapot, és hozzáadjuk a WordPress sorhoz.

A wp_register_style függvényt használjuk. regisztrálni egy stílust. Ez a funkció a következőket igényli:

• Az 1. paraméter. Az a név, amit választani lehet, olyan, mint a mystyle. mediaqueries ...
• 2. paraméter. A fájl elérési útja, vegye figyelembe, hogy itt használjuk az állandó THEME_DIR-t.
• 3. paraméter. Itt írja le a függőségeket, azoknak a stíluslapoknak a nevét, amelyeket be kell töltenie a fájl előtt.
• 4. paraméter. Változat.
• 5. paraméter. A linkcímke média attribútuma.

Ezután a wp_enqueue_style függvényt hívjuk, és a paraméterként hozzáadjuk a hozzáadni kívánt stílusunk nevét.

Ha több stílust szeretne hozzáadni a fájlhoz, csak másolja át ezt a két sort, és változtassa meg a nevet, a könyvtárat és egyéb paramétereket.

Szkriptek hozzáadása

Most megnézzük azt a funkciót, amely hozzáadja a szkriptjeinket.

Itt a folyamat ugyanaz, a különbség az, hogy más funkciókat használunk a szkriptek hozzáadásához.

Szkriptek hozzáadásához a wp_register_script és wp_enqueue_script függvényeket használjuk. A wp_register_script függvény a következő paramétereket igényli:

• Az 1. paraméter. A választott név olyan, mint a jquery. dojo. és hasonlók.
• 2. paraméter. A fájl elérési útja, vegye figyelembe, hogy itt használjuk az állandó THEME_DIR-t.
• 3. paraméter. Itt írja le függőségét, a szkriptfájlok nevét, amelyeket be kell töltenie a fájl előtt.
• 4. paraméter. Változat.
• 5. paraméter. Itt azt mondja, hogy ez a parancsfájl hozzáadódik a wp_head () (általában header.php) vagy a wp_footer () (általában a footer.php) függvénybe. Ha hamisítasz. a wp_head () betöltődik. Ha igazad van. betöltődik a wp_footer () -ban.

Ezután a wp_enqueue_script függvényt hívjuk, és a paraméterként adja meg annak a scriptnek a nevét, amelyet hozzá akarunk adni.

Ha további szkripteket szeretne hozzáadni a fájlhoz, csak másolja át a két sort, és változtassa meg a neveket, a könyvtárat és egyéb paramétereket.

4. lépés: header.php

Először felsorolom a könyvtárakhoz tartozó hivatkozásokat, amelyeket ebben a sablonban használhatunk, már használom a jQuery és a HTML5 Shim programot ebben a sablonban, de hozzáadhatok másokat is.

• A jQuery olyan könyvtár, amely kedvező hatásokkal jár a téma számára, azt hiszem, nem ismeri jól ezt a könyvtárat, alapértelmezés szerint már tartalmazza a WordPress programot.
• Modernizr - ez a könyvtár lehetővé teszi, hogy pontosan megismerhesse a böngésző által támogatott funkciókat.
• HTML5 Shim - ez a könyvtár olyan böngészőket támogat, amelyeknek nincs beépített HTML5 jelölőeszközük a támogatáshoz.
• Respond.js - lehetővé teszi a böngészők számára, akiknek nincs beépített támogatásuk a CSS3 médiakérésekre, elkezdjük azokat támogatni.

Letöltheti ezeket a könyvtárakat, és megváltoztathatja a header.php fájlban található útvonalakat.

Ebben a sablonban a standard HTML5 előtesztet használjuk:

címke

Ebben a részben bizonyos feltételeket használtunk az IE számára. amelyek az IE változatának megfelelő osztályt adnak hozzá. vagy nem ad hozzá semmit, ha a böngésző nem IE 8 vagy alacsonyabb (Firefox, IE9, Chrome és mások).

Ez nagyon kényelmes, mert létrehozhat egy szabályt a CSS fájlban, hogy hatással legyen az objektumra, ha az IE 7 böngésző:

De létrehozhat egy különálló CSS-fájlt is, és rákötheti azt az állapottéren belül, ezt a következő lépésekben fogjuk meg. A választás a tiéd.

címkék

A meta tagek nagyon fontosak, mert átadnak néhány információt a böngészőnek, hogy megbizonyosodjanak róla, hogy a téma helyesen fog fogadni.

Ez a sor megerősíti, hogy a böngésző nem használja a Quirks módot. ez nagyon hasznos, mivel ez a mód megszakíthatja a jelölést.

Ez a sor elárulja a böngésző kódolását, hogy elkerülje az ismeretlen karaktereket.

Csak olyan alapvető metatag címkék, amelyek javíthatják a téma témáját. Hozzáadhat kulcsszavakat, amelyek leírják a webhelyet, és írják be a vállalkozás nevét.

Ez a címke elhárítja / visszaállítja a mobileszköz bármely növekedését, iPad és iPhone típusát, nagyon kényelmes, ha rugalmas jelöléssel dolgozik.

címkék

Ez a sor egy faviconot ad hozzá az oldaladhoz, és egy kicsit profi megjelenést kölcsönöz a webhelyednek.

címke