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.

targetalas

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.

Töltsd le Most!


DOLGOZZUNK EGYÜTT?
Jelenleg új együttműködést sajnos nem tudok vállalni, köszönöm megértésed!