Annak ellenére, hogy WordPress végtelenül felhasználóbarát, ha egyedi sablont szeretnél, vagy csak hozzányúlni egy már meglévőhöz, ahhoz kell némi fejlesztői tapasztalat. De nem kell megijedni…
Egy jó WordPress sablon megírásának előfeltétele, hogy tudj statikus HTML-CSS weboldalt létrehozni hibamentesen. Ezen háttér tudás nélkül a sablon nem olyan lesz amilyen akarod, hanem amilyenre sikerül.
Azért van annyi rendezetlen, széteső weboldal, mert sokan megvélő sablonokat próbálnak meg “átírni”, de gányolás helyett van egy jobb módszer.
Hogyan kezdj hozzá?
Legyen meg a weboldal felépítése és a grafikai elmei egy validált, szabványos, statikus HTML oldaladban, jól elkülönített CSS-el. HTML5 szabvánnyal dolgozz!
Nem árt, ha a WordPressben már van egy kis szöveges tartalom, hogy jobban látható legyen a sablonunk felépítése.
A következő lépésben a statikus sablont a WordPress számára alakítjuk át.
Érdemes elolvasni a dokumentációt, hogy a WP sablonjának mi a logikája, felépítése. Mik azok a minimálisan szükséges file-ok, amik a nélkülözhetetlenek a futáshoz.
Az alábbi egy általam kiegészített lista, amely a legkevesebb file-t tartalmazza, ahhoz, hogy egy nagyon egyszerű WP sablont készíts.
WordPress sablon file-ok
Készíts egy mappát a sablon nevével FTP-n keresztül a weboldalad.hu/wp-content/themes/ mappába és készítsd el az alábbi file-okat:
- header.php – fejléc, logó, navigáció, meta elemek, mérőkódok stb…
- index.php – tartalmi kinézet (lehet üres, ha van page.php és single.php)
- sidebar.php – oldalsáv, “widgetek”, egyéb másodlagos infó, vagy CTA
- footer.php – lábléc
- style.css – sablonhoz tartozó stílus elemek
- functions.php – egyedi funkciók hozzáadása, módosítása
- page.php – oldal tartalomtípushoz tartozó kinézet
- category.php – kategória tartalomtípushoz tartozó kinézet
- single.php – bejegyzés tartalomtípushoz tartozó kinézet
- images/ – Itt lesznek a design kép elemei, háttérképek, logók
A fenti listából jól látszik, hogy az egyes tartalomtípusokhoz (Oldal, Bejegyzés, Kategória, Címke stb) külön kinézet tartozik. További PHP file-ok hozzáadásával készíthetünk teljesen egyedi megjelenést egy-egy oldalnak, vagy kategóriáknak (Pl.: single-szolgaltatasok.php, category-szolgaltasok.php).
A sablonok HTML nyelven íródnak, melyben a dinamikusan változó elemeket WordPress függvényekkel tudjuk megadni PHP-ban.
Fontosabb WordPress alapfüggvények
<?php wp_title(); ?>– az oldal címe böngészőben<?php bloginfo('stylesheet_url') ?>– style.css elérési útvonala<?php bloginfo('template_url') ?>– sablonod elérési útvonala<?php wp_nav_menu(); ?>– navigáció<?php wp_head(); ?>– fontos! e nélkül nem működnek a bővítmények<?php the_title(); ?>– az oldal vagy bejegyzés címe<?php the_excerpt(); ?>– kivonat, vagy rövid intró szöveg<?php the_content(); ?>– teljes tartalom<?php the_thumbnail(); ?>– az oldalhoz tartozó bélyegkép<?php the_date(); ?>– létrehozás dátuma<?php the_author(); ?>– szerző<?php the_category(); ?>– a bejegyzés kategóriája<?php the_sidebar(); ?>– oldalsáv<?php wp_footer(); ?>– fontos! e nélkül nem működnek a bővítmények
Minden függvények további paraméteri vannak, amikkel jobban testre szabható. Pl: <?php the_date(‘Y.m.d’, ‘<h2>’, ‘</h2>’); ?> Ezekről bővebben szintén a dokumentációban lehet olvasni.
Az alábbi kódrészletben, egy egyszerű WordPress sablon felépítését látjátok
<!DOCTYPE html> <html <?php language_attributes() ?>> <head> <title><?php wp_title(); ?></title> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" /> <?php wp_head(); ?> </head> <body> <header> <div class="container"> <div id="logo"> <a href="/"> <img src="<?php bloginfo('template_url') ?>/images/logo.png"> </a> </div> <div id="navigation"> <nav id="nav"> <?php wp_nav_menu(); ?> </nav> </div> </div> </header> <?php get_header(); ?> <section id="content"> <div class="container"> <article> <h1><?php the_title(); ?></h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <?php the_post_thumbnail(); ?> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?> </article> <?php get_sidebar(); ?> </div> </section> <?php get_footer(); ?>
<?php get_header(); ?> <section id="content"> <div class="container"> <article> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_date(); ?> <p><?php the_excerpt(); ?></p> <p><a href="<?php the_permalink(); ?>">Tovább</a></p> <?php endwhile; ?> <?php endif; ?> </article> <?php get_sidebar(); ?> </div> </section> <?php get_footer(); ?>
<?php get_header(); ?> <section id="content"> <div class="container"> <article> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <p><?php the_date(); ?> </p> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?> </article> <?php get_sidebar(); ?> </div> </section> <?php get_footer(); ?>
<aside> <?php dynamic_sidebar( 'Oldalsav' ); ?> </aside>
<footer> <div class="container"> Lábléc tartalmak, jogi információkat, stb... </div> </footer> <?php wp_footer(); ?> </body> </html>
<?php if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Oldalsav', 'description' => 'Oldalsáv', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); } ?> Ha valamilyen frameworkot használsz (Pl.: Bootstrap), akkor értelem szerűen az adott keretrendszer előre meghatározott osztályait kell használnod a sablonban.
Programozás
Pár utasítást ismerni kell (IF, FOR, DO, WHILE…) ahhoz, hogy a sablonod 100%-ban illeszkedjen a már megtervezett designra és ne legyen teli innen-onnan átmásolt töltelék kódokkal. Akkor végeztél jó munkát, ha a sablonod minden file-jának minden soráról tudod, hogy micsoda, és miért kell oda.
Jelen esetben PHP-t használunk, de a programozás kepésségét nem a nyelv szintaktikájának ismerete jelenti. Éppen olyan mintha angol tanuláskor bemagolnád a kész szöveget, de nem tudnád, hogy a szavak külön-külön mit jelentenek. Ha megérted a logikát, a szintaktikát ki lehet guglizni.
Nem kell nagyon bonyolult dolgokra gondolni, egy egyszerű IF elágazás, aminek a feltétele, hogy a kezdőlapon vagyunk vagy sem, mindössze ennyi:
<?php if(is_front_page()) { ?> <div class="home">Ez itt a kezdőlap</div> <?php } else { ?> <div class="inner">Ez egy belő oldal</div> <?php } ?> Bővítményt csak végső esetben használj!
Nagyon rá vagyunk szokva az indokolatlan bővítményhasználatra. Olyan bővítmény, ami pontosan azt tudja és csak azt tudja, amit szeretnél nem lesz, mivel két egyforma cég és két egyforma oldal sem létezik. A gond ott van, hogy már a legegyszerűbb logikai feltételek megvalósítására is plugint akarunk használni.
“Milyen bővítmény kell, ahhoz, hogy két oldalsáv oszlop legyen?” Hát röviden semmilyen. Bele kell írnod a sablonodba kézzel. Varázsolni egyik plugin sem tud, nem ismeri a te weboldalad felépítését.
Néhány egyszerűbb PHP kóddal kiválthatod a felesleges és olykor nagyon sok erőforrást zabáló pluginokat.
Validálás
Ellenőrizd az elkészült sablon szabványosságát. A statikus HTML feldarabolása közben fokozottan figyelni kell a lezáró tag-ekre. Használj olyan kódszerkesztő szoftvert, ami színezi a kódokat és automatikusan bezárja a tageket.
Csináltam egy egyszerű példa sablont, amit kipróbálhatsz. Másold fel a weboldalad.hu/wp-content/themes/ mappájába, majd kapcsold be az admin felületen.
Szólj Hozzá!
Hozzászólások
Kedves Emese!
Nagyon hasznos és átfogó cikk. Köszönöm…
Kedves Emese!
Milyen CMS rendszert javasolsz egy fotós oldal létrehozására? Vagy esetleg flash?
Nyilván kell bemutatkozó “rész”, galéria, kapcsolat, üzenet küldéssel.
Előre is köszönöm a válaszod.
Szia!
Flash-t semmikép sem javasolok, tavaly a Chrome megszüntette a flash tartalmak támogatását. Egy WordPress weboldal elengedő számodra. Én épp most dolgozom egy fotós portfólión. Könnyen fel lehet ölteni új fotókat és kategóriákat is.
Kedves Emese!
Az alábbi zip filebol szerintem hiányzik a lényeg: az index.php tartalma. Nekem kicsomagolas utan nulla byteos az a file. Kérem küldje el, vagy töltse fel ide. Előre is köszönöm.
János
Kedves János!
Az index.php lehet üres, ha van page.php és single.php mivel ezek a hierarchiában magasabb szintűek. Ha zavar hogy üres, vagy máshogy épül fel az oldalad, akkor a legegyszerűbb, ha lemásolod a page.php-t és átnevezed index.php-ra. Itt találsz egy bővebb áttekintést a theme hierarchiáról.
Koszonom a linket! Ez alapjan a kep alapjan mar erthetobb: https://developer.wordpress.org/files/2014/10/template-hierarchy.png
Kedves Emese!
Mitől függ, hogy a megjelenés/testreszabás résznél mit tudok állítani?
Illetve az ott beállított részek elérhetők vmi függvénnyel?
Köszönöm!
Szia!
Ez egy következő szint már. Ha van egy sablonod, ami működik már jól és szeretnél bele rakni admin felületen testreszabható részeket, akkor ahhoz meg kell határoznod a sablonod bizonyos elemit változóként. Pl: Ha azt szeretnéd, hogy a fejléc színét meg lehessen változtatni, akkor a sablonod function.php filejában meg kell határoznod egy “fejlécszín” változót, ami a bemeneti értéke lehet egy egyszerű hexakód pl: #009999. Ezt az értéket aztán át lehet adni a CSS-nek. Ezt LESS-el tudod a leghatékonyabban megoldani. Itt van egy részletes leírás igaz angol nyelven, de jól levezeti.
Kedves Emese!
SOS segítséget szeretnék kérni tőled! WordPress / kapcsolati űrlapok szerkesztése témában.
Konkrétan: berakok néhány sort pl. név, telefonszám, stb. és a hozzájuk tartozó kitöltő mezőket. Viszont itt megrekedtem. Nem tudom szerkeszteni a nagyságát /hosszát/ és helyét /jobbra igazítás/ !
Ami infót beszereztem, hogy a vezérlőpulton a /CSS/ szerkesztésben kell állítólag, de ott én elveszek!
Kérlek adj egy kis segítséget, hogyan tudnék átlendülni ezen a “problémán”?!
Köszönöm!
Szia Tibor!
A sablonod CSS filejában tudod megadni a formázástát. A Contac Form 7-nek vannak osztályai, amikre tudsz hivatkozni. Ha kinyitod a weboldalad forráskódját akkor látni fogod. Ilyesmit keress: “wpcf7-form-control”. Ezekre ha hivatkozol CSS-ben, akkor lehet formázni.