Egy mozgó keresőlap a wordpress alatt
Megjelenítjük a WordPress kereső formáját
A WordPress az alapértelmezett CSS-osztályokat hozzáadja a HTML-ben található különböző sabloncímkék által generált HTML-hez. A WordPress témák a sabloncímkét használják a keresési űrlap megjelenítéséhez. Ez a funkció két különböző keresési formát képes kibocsátani: egy a HTML4-es témákhoz, a második a HTML5-támogatású témákhoz. Ha a témában a functions.php fájlban van egy sor add_theme_support ('html5', array ('search-form')). akkor ez a sabloncímke megjeleníti a keresési űrlapot a HTML5-ben. Bármelyik esetben az űrlap megjelenik a HTML4-ben.
Egy másik módja annak, hogy megtudja, milyen formát generál a téma, hogy nézze meg a keresési űrlap forráskódját.
A következő kód jelenik meg, ha a sabloncímke get_search_form () kinyomtatja HTML4 formátumban:
Ez a kód lesz a HTML5 támogatással rendelkező téma eredménye.
Ebben a leckében a HTML5 keresőlapot használjuk. Ha a téma létrehoz egy űrlapot a HTML4-ben, akkor csak adja hozzá a következő kódsorozatot a téma funkcióihoz.php fájl:
Ezt követően győződjön meg róla, hogy a kód a 2. példában leírtak szerint van megadva. A következő lépés az, hogy a keresőlapot azon a helyen helyezzük el, ahol a téma leginkább vágyik.
Hozzáadás a WordPress keresési űrlaphoz
Először is szükségünk van egy képre - egy kereső ikonra. A standard WordPress téma Twenty Thirteen tartalmaz egy szép kis ikont, és ezt fogjuk venni a cikkünkhöz. Azonban ne habozzon létrehozni saját, például a Photoshop-ban, vagy töltse le azt a hálózaton. Csak győződjön meg róla, hogy a fájl neve search-icon.png.
Most be kell töltenie ezt az ikont a téma képmappájába. Csatlakozzon a webhelyéhez FTP kliensen, például a Filezilla vagy a Total Commander segítségével, és nyissa meg a könyvtárat a témával.
Most - az utolsó és legfontosabb lépés. A következő CSS stílusokat kell hozzáadnia a téma stíluslapjához:
Fontos tudni a kódról, hogy tartalmaz CSS3 átmeneti hatásokat, amelyek lehetővé teszik számunkra, hogy létrehozzunk egy kilépési hatást az űrlapra. Érdemes megjegyezni, hogy a keresési ikon és az űrlap pozícióját még mindig be kell állítania a téma megjelölésével.