GeneratePress Fast WordPress sablon: könnyű, érzékeny, érvényes, ingyenes. A leggyorsabban reagáló alap WordPress téma A legegyszerűbb WordPress téma

Ne feledje, hogy a WordPress generál néhány osztályt, amelyeknek jelen kell lenniük a stíluslapon. Például osztályok aligncenter, alignleft és alignright a képek és a blokkelemek igazítására szolgál, és ezeket szerepeltetni kell a stíluslapon (másolhatja az alapértelmezett téma stíluslapjáról):


.aligncenter,
div.aligncenter (
kijelző: blokk;
margó-bal: auto;
margó-jobb: auto;
}
.balra igazít (
balra lebeg;
}
.alignright (
úszó: jobb;
}

A képaláírással rendelkező képek igazításához a következő osztályok szolgálnak (alapértelmezett témából másolhatók, később szükség esetén javíthatók):


.wp-caption (
keret: 1 képpont tömör #ddd;
szöveg igazítása: középre;
háttérszín: # f3f3f3;
padding-top: 4px;
margó: 10 képpont;
/ * opcionális paraméterek, amelyek lekerekített sarkokat eredményeznek a támogatott böngészőkben * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
határsugár: 3 képpont;
}
.wp-caption img (
margó: 0;
párnázás: 0;
határ: 0 nincs;
}
.wp-caption p.wp-caption-text (
betűméret: 11 képpont;
vonalmagasság: 17 képpont;
padding: 0 4px 5px;
margó: 0;
}

Ezen kívül van még néhány WordPress osztály, amelyeket nem kell leírni a stíluslapon. A WordPress ezek segítségével generál oldalakat, ezeket stílusozhatod is:


.categories (...)
.cat-item / * Ez az osztály minden kategóriához hozzá van rendelve * /)
.current-cat (/ * az aktuális kategória stílusa * /)
.current-cat-parent (/ * stílus az aktuális kategória szülőjéhez * /)
.childs (/ * gyermek osztály * /)
.pagenav (/ * oldalnavigáció * /)
.page_item (/ * bármely elem a listában * /)
.current_page_item (/ * ez az osztály az oldallistában az aktuálisan aktív oldalhoz van hozzárendelve * /)
.current_page_parent (/ * osztály a szülőoldalhoz az aktuális oldalhoz képest * /)
.current_page_ancestor (/ * minden legfelső szintű oldal ehhez képest * /)
.widget (/ * minden widget ebbe az osztályba van csomagolva * /)

Az elrendezés során használjon blokkokat és stílusokat hozzájuk a cikk elején található képernyőképeken meghatározottak szerint. Ez nem szükséges, de nagyon kívánatos.

Például a jövőben a keresési űrlapot speciálisan kapcsoljuk a webhelyhez. wordpress tag , aminek eredményeként a wordpress ezt az űrlapot jeleníti meg:

Ezért ezt figyelembe vesszük a téma tervezésénél.

És az utolsó dolog, amit hozzá kell adni a style.css-hez, az önmagadról és a létrehozott témáról szóló információk. Az információ a fájl elején, a megjegyzésekben található:

/*
Téma neve: Találjon ki egy egyedi témanevet
Téma URI: http:// link-to-theme-homepage
Leírás: A téma leírása
Szerző: Témaindító
Szerző URI: http:// link-to-author-page
Sablon: ős-téma-név
Címkék: témacímkék - csak a wordpress.org által javasolt listából
Verzió: verzió
Nos, itt az engedély szövege
*/

Továbbá ne felejtsd el megtenni screenshot.pngés tedd a sablon mappába (a gyökérbe). A stíluslapon így elhelyezett információk az adminisztrációs panelen jelennek meg a részben "témák" kezelése... Böngészőkben teszteljük a felépített sablont, ha minden szabályt betart, tovább lehet lépni.

A betûsablon oldalainak kódját nem adom meg, mert elég nagy, csak töltse le, aztán dolgozunk vele.

Hogyan működik a wp téma:

Ha megnyitja az alapértelmezett témamappát (wp-content / themes / default), sok PHP-fájlt (témafájlt) és egy style.css fájlt fog látni. Amikor a blogot böngészjük, a WP tartalmazza a témafájlokat (index.php<

Ezzel befejeződik az előzetes felkészülés, és továbbléphetünk a téma megalkotására a meglévő forrásanyagból.

1. lépés:
Először a WordPress témák könyvtárában (wp-content / themes) hozzon létre egy mappát a témánk nevével. Hadd legyen ruseller_lessons... Ezután az alapértelmezett téma mappából (wp-content / themes / default) másolja ki a fájlokat comments.php, search.phpés 404.php a téma mappánkba. Ezek a fájlok felelősek a blogon található megjegyzésekért és keresésekért. Aztán be ruseller_lessons másolja a stíluslapot stílus.css a sablonunk, screenshot.png (300x225)és mappa képeket.

Most a sablonunk fájljait "ki kell vágni", pl. húzza be a külön fájlláblécet, oldalsávot és fejlécet. Az ábra a fájl egyszerűsített nézetét mutatja index.php jelzésekkel, amelyek szerint vágjuk:

2. lépés - Header.php
Nyitunk index.htmlés vágj ki mindent, ami a megjegyzés előtt van, hozzon létre egy új fájlt header.phpés illessze be a kivágott kódot, mentse el a témánk könyvtárába ruseller_lessons:






index.html






Most lépjen az alapértelmezett témával rendelkező mappába, nyissa meg header.phpés onnan másolja ki a címkéket , <link>, <h1>, és <div class=description> </b>és cserélje ki őket a megfelelő sorokra a mi <b>header.php</b>.</p> <p>Aztán az összes címkét <li>található <b>id = "nav"</b>(oldalak listája a blog tetején) helyettesíti a wordpress funkciót</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Ennek eredményeként a következőket kapjuk:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" text / css "media =" képernyő "/>
" />





3. lépés – Sidebar.php
Visszatérés az index.htm fájlhoz. Először is töröljük a teljes keresési űrlapot, majd kivágunk belőle mindent