Alakítsuk ki a kezdőlapunkat. Ehhez az index.php oldal tartalmát kell kitöltenünk, illetve a fejlécet és a láblécet külön kell választanunk. Ezért létrehozzuk a header.php és footer.php állományokat.
Nyissuk meg a HTML-sablonunkat egy HTML-szerkesztő programban, majd a <!doctype>-tól a </header> tagig elhelyezkedő kódot helyezzük el a header.php állományban. A <footer> tagtől a </html>-ig tartó kódrészlet pedig kerüljön a footer.php állományba! A többi kód pedig kerüljön az index.php állományba!
Viszont az index.php állományban hivatkoznunk is kell a külső állományokban elhelyezett fejléc és lábléc tartalomra. Ezt az alábbi kódokkal meg is tehetjük:
<?php get_header(); ?>
A fenti kódot az index.php állomány legelején helyezzük el.
Az alábbi kód pedig kerüljön az oldal aljára, hiszen ez a lábléc megjelenítéséért felelős.
<?php get_footer(); ?>
Alakítsuk tovább a sablonokat. Jelenleg a fejlécben a <title> tag tartalma statikus szöveget tartalmaz, viszont a blog esetén minden oldalon más szövegnek kell megjelenni, ezért a statikus szövegeket ki kell cserélnünk azon függvényekre, amely az adott információt szolgáltatják. Például a Wordpress esetén a következő módon generálhatnánk az oldal címét:
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
Adjuk meg tehát a <title> tag tartalmát a fenti módon a header.php állományban!
Természetesen a továbbiakban sok más függvényt is fel kell használnunk a kívánt eredmény eléréséhez.
A Wordpress függvényekről a http://codex.wordpress.org/Function_Reference címen találhatunk leírást.
Most tegyünk egy kisérletet arra, hogy aktiváljuk (bekapcsoljuk) az alaplap sablonunkat, és nézzük meg az eredményt!
wordpress_alaplapsablon_mod1_full.jpgA sablonunk első változatának megjelenése A helyzet kissé elkeserítő a képek nem látszanak, és a stílusunk sem érvényesül. Ennek oka, hogy a sablonunkban nem adtuk meg precízen azt a mappát, ahol ezek az állományok elérhetőek.
Módosítsuk a header.php állományt! A <?php bloginfo('template_url');?> kóddal megkaphatjuk a sablon elérési útvonalát, vagyis a stíluslapra hivatkozzunk az alábbi módon:
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/style.css" type="text/css" media="screen, projection">
Ezek után a következőképpen jelenik meg a blogunk:
wordpress_alaplapsablon_mod2_full.jpgA sablon megjelenése a stílusállomány elérhetőségének beállítása utánAz ikonsorban elhelyeztt statikus képek viszont továbbra sem jelennek meg. Ez természetesen, hiszen ezek elérési útvonalát is meg kell adnunk a fentiekhez hasonlóan.
<section id="ikonsor">
<h1>Közösségi média és gyengénlátóknak szóló változat</h1>
<a href="#"><img src="<?php bloginfo('template_url');?>/images/ikon_rss.png"
alt="RSS-csatornánk" title="RSS-csatornánk"></a>
<a href="#"><img src="<?php bloginfo('template_url');?>/images/ikon_twitter.png"
alt="Twitter azonosítónk" title="Twitter azonosítónk"></a>
<a href="#"><img src="<?php bloginfo('template_url');?>/images/ikon_facebook.png"
alt="Facebook azonosítónk" title="Facebook azonosítónk"></a>
<a href="#"><img src="<?php bloginfo('template_url');?>/images/ikon_gyengenlato.png"
alt="Gyengén látók számára optimalizált változat"
title="Gyengén látók számára optimalizált változat"></a>
</section>
Ha a fentiek alapján elvégezzük a módosítást, a képek máris megjelennek az ikonsorban.
wordpress_alaplapsablon_mod3_full.jpgA sablon megjelenése az images mappa elérhetőségének beállítása utánAz ikonsoron elhelyezett első ikon a blog RSS-csatornájára kell, hogy mutasson. Ezt is dinamikusan kell megadnunk. A blog RSS 2.0 csatornájára mutató linket a <?php bloginfo('rss2_url'); ?> kóddal kérhetjük le. Módosítsuk a header.php állományt ennek megfelelően!
<a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_url');?>/images/ikon_rss.png"
alt="RSS-csatornánk" title="RSS-csatornánk"></a>
Ezek után ez az ikonunk már működik is.
A Facebook és Twitter ikonra elég lenne elhelyeznünk a kapcsolódó profilokra mutató linkeket. A magas kontrasztú változat esetén kissé bonyolultabb a helyzet, ott a stílusváltásról gondoskodó JavaScript-kódot kellene elhelyeznünk, de ettől most eltekintünk.
A blogunk neve módosítható a vezérlőpulton, ezért jó lenne, ha a sablon sem statikusan tartalmazná a blog nevét, hanem adatbázisból kérdezné le. A blog nevét a bloginfo('name'); függvénnyel kérdezhetjük le, ezért a megfelelő kód:
<h1><?php bloginfo('name'); ?></h1>
Más sablonok esetén megszoktuk, hogy amennyiben be vagyunk jelentkezve a Wordpress portálra, akkor a képernyő tetején megjelenik egy olyan eszköztár, amelynek segítségével válthatunk a publikus nézet és a vezérlőpult között. Ahhoz, hogy ez a funkció a mi sablonunknál is elérhető legyen, módosítsuk a láblécet! Nyissuk meg a footer.php állományt, és a </body> tag elé helyezzük el a <?php wp_footer(); ?> kódot! Vagyis a tartalom a következőképpen módosul:
<footer>
<a href="#">Jogi nyilatkozat</a>
<a href="#">Impresszum</a>
<a href="#">Kapcsolat</a>
<a href="#">Oldaltérkép</a>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Ennek eredményeképpen megjelenik az eszköztár.
wordpress_alaplapsablon_mod4_full.jpgA kód módosítása után felül megjelenik az eszköztár.Folytassuk azzal, hogy az egyelőre statikus menünket lecseréljük a dinamikus menüre, vagyis arra, amit maga a Wordpress CMS generál.
Ehhez nyissuk meg az index.php állományt! A menü a <nav id="menu"> tagben helyezkedik el, egy felsoroláslistában. A statikus felsoroláslistánkat cseréljük le a következő kódra: <?php wp_nav_menu() ?>
Vagyis a kód legyen a következő:
<nav id="menu">
<h1>Menü</h1>
<?php wp_nav_menu() ?>
</nav>
A Wordpress Blogmotor is felsoroláslistában helyezi el menüpontokat. Ha ez nem így lenne, akkor további módosítások lennének szükségesek, ami a PHP-állományokat és a stíluslapot is érinthetné!
Ha megnézzük a blog publikus változatát, akkor – amennyiben az arculattervben szereplő összes oldalt létrehoztuk – akkor nem is látunk változást. Ha viszont újabb oldalt létrehozunk, akkor a változás mindjárt látszik az oldalon.
Mi egyelőre csak négy oldalt hoztunk létre, ezért az alábbi menü jelenik meg:
wordpress_alaplapsablon_mod5_full.jpgA menü megjelenítéséért felelős kód elhelyezése után a menü immáron a Wordpress adatbázis alapján jelenik megHa a Wordpress vezérlőpultban létrehozzuk az ötödik (Kapcsolat) oldalt is, akkor a menünk is automatikusan bővül.
wordpress_alaplapsablon_mod6_full.jpgÚjabb oldal létrehozása után a menü is megváltozik.Ha azonban az oldalra kattintunk, nem fog megjelenni, mivel az oldalak megjelenítéséért felelős sablont (page.php) még nem készítettük el.
Ahogy a menüt lecseréltük, a többi blokk dinamikussá tételéről is gondoskodnunk kell!
Ehhez első lépésként hozzunk létre a sablon mappájában egy functions.php állományt! Ebben fogjuk részletezni az oldalunk működéséhez szükséges funkciókat.
Első lépésként helyezzük el ebben az alábbi kódot, amely az oldalsáv funkciót használatát lehetővé teszi.
<?php
if ( function_exists('register_sidebar') )
{
register_sidebar();
}
?>
A fenti kód eredményeként a Wordpress vezérlőpult Megjelenés almenüpontjában megjelenik a Widgetek almenüpont, amelyre kattintva meghatározhatnánk, hogy milyen blokkok legyenek láthatóak az oldalainkon. A blokkokat a bal oldali oszlopból fogd és vidd módszerrel húzhatjuk át az Oldalsáv területére.
wordpress_widgetek_full.jpgA Wordpress vezérlőpultján megjelenő Widget funkcióAz alábbi képen látható, hogy az oldalsáv területére elhelyeztük a címkefelhő blokkot.
wordpress_widgetek2_full.jpgA címkefelhő blokk elhelyezése az oldalsávonVáltozást egyelőre nem látunk a publikus oldalon, hiszen nem gondoskodtunk ezen terület dinamikus megjelenítéséről. Nyissuk meg az index.php oldalt, és a statikus tartalom helyére írjuk be <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?> kódot, amely a dinamikus oldalsáv megjelenítéséért felelős! Vagyis a tartalom az alábbi kódnak megfelelő legyen!
<section id="blokkok">
<h1>Blokkok</h1>
<nav id="menu">
<h1>Menü</h1>
<?php wp_nav_menu() ?>
</nav>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</section>
Elvileg használhatnánk az egyszerűbb <?php get_sidebar(); ?> kódot is, de ebben az esetben az elemek felsoroláslistában, <ul> elemek között jelennének meg, amely számunkra most nem lenne megfelelő.
Ha most megtekintjük az oldalt, már látunk változást. (Ha a bejegyzéseket publikáláskor nem láttuk el címkékkel, akkor ezt utólag is pótolhatjuk. Legegyszerűbb a gyorsszerkesztés funkciót használni erre a célra. Néhány címke megadása után meg kell jelennie a címkefelhőnek.)
wordpress_cimkek_full.jpgA megjelenés az oldalsávra történő hivatkozás utánLátjuk, hogy megjelent az adott blokk, de nem úgy, ahogy kellett volna. Ez azért van, mert nem határoztuk meg, hogy milyen tagek között, milyen stílussal kell megjelenítenünk a blokkokat. A HTML-kódban ezek a blokkok <aside> tagek közt voltak elhelyezve úgy, hogy a blokk címe 1-es címsorként jelent meg.
<aside>
<h1>Címkék</h1>
<a href="#">címke</a> <a href='#'>címke</a> <a href='#'>címke</a>
</aside>
Vagyis úgy kell módosítanunk a kódot, hogy az elemeink a fenti struktúrát kövessék. Ennek érdekében a functions.php oldalban helyezzünk el további argumentumokat. A before_widget és after_widget paraméterben megadhatjuk a megfelelő határoló tageket, illetve a cím (title) esetén is beállíthatjuk, hogy milyen tag jelenjen meg a cím előtt (before_title) és mögött (after_title).
<?php
if ( function_exists('register_sidebar') )
{
register_sidebar(array(
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<h1>',
'after_title' => '</h1>',
));
}
?>
Ha ezt a módosítást elvégezzük, akkor már helyesen jelennek meg a blokkjaink.
A vezérlőpulton add hozzá a Legutóbbi bejegyzések blokkot is az oldalsávhoz!
Rendszeresen validáljuk a legenerált oldalt a http://validator.w3.org szolgáltatás segítségével, hogy fejlesztés közben már javíthassuk is a hibákat!
A módosításokkal tehát már dinamikussá tettük a menünket és a blokkokat (widgeteket) tartalmazó területet. A bejegyzések viszont még mindig statikusak, folytassuk tehát ezzel!
A bejegyzések dinamikussá tétele érdekében nyissuk meg az index.php oldalt, és keressük meg a kiemelt bejegyzések szakaszt! (<section id="kiemeltbejegyzesek">)
Láthatjuk hogy a bejegyzésnek a következő HTML-sablon szerint kell megjelennie:
<article>
<h1><a href='#'>Példa bejegyzés 3.</a></h1>
<time datetime="2013-01-07">2013. január 7.</time>
<p><a href="images/technics3.jpg"><img src="images/technics3.jpg" alt=""
width="100" height="100" /></a>Donec tincidunt fringilla magna, a molestie neque
convallis ut. Phasellus tristique molestie gravida. Integer luctus purus mi.
Morbi a sagittis enim. Vivamus dolor mi, fringilla id laoreet nec,
dignissim id est. Morbi blandit tempus ligula ornare dignissim.
Mauris iaculis, velit at posuere aliquam, mi neque tempor nibh,
eu ullamcorper nulla est eget mauris. Ut hendrerit blandit massa
et condimentum. Suspendisse ullamcorper massa massa. Aenean massa
felis, condimentum vel adipiscing id, dignissim auctor dolor.
Sed ut risus ac ipsum convallis egestas a id leo. Mauris porta l
uctus leo, ut cursus elit scelerisque sed. In aliquam, purus a
dictum accumsan, nibh nulla rutrum odio, non adipiscing turpis
enim sit amet velit. <a href="#">(tovább...)</a></p>
</article>
Vagyis <article> és </article> tagek között kell megjelennie, a címét egyes címsorban kell elhelyeznünk, amely alatt a publikálás dátuma <time> tagek között van elhelyezve. Ezt követően jelenik meg a bejegyzés szövege. Fontos, hogy a kiemelt bejegyzések szakaszban a ténylegesen kiemelt (ragadós, vagy angolul sticky post) bejegyzések legyen láthatóak, vagyis a ciklusban csak ezen kategóriába tartozó elemeken kell végigmennünk.
A megfelelő kódot az alábbiakban láthatjuk:
<section id="kiemeltbejegyzesek">
<h1>Kiemelt bejegyzések</h1>
<?php
$sticky = get_option( 'sticky_posts' );
$args = array(
'posts_per_page' => 1,
'post__in' => $sticky,
'ignore_sticky_posts' => 1
);
query_posts( $args );
if ( $sticky[0] ) {
$query = array(
'post__in'=>get_option('sticky_posts')
);
$queryObject = new WP_Query($query);
if ($queryObject->have_posts()) {
while ($queryObject->have_posts()) {
$queryObject->the_post();
echo "<article>";
echo "<h1><a href='";
echo get_permalink();
echo "'>";
the_title();
echo "</a></h1>";
echo "<time datetime=";
the_time('Y-m-j');
echo ">";
the_time('Y. F j.');
echo "</time>";
the_content();
edit_post_link('Bejegyzés szerkesztése');
echo "</article>";
}
}
}
else
{echo "<article>Jelenleg nincsen kiemelt bejegyzésünk.</article>";}
?>
</section>
A fenti kóddal a kiemelt bejegyzések listáján megyünk végig egy ciklusban úgy, hogy a bejegyzések címét (the_title), a publikálás idejét (the_time('Y. F j.');) és a tartalmat (the_content();) a megfelelő tagek között helyezzük el. Ahhoz hogy a bejegyzéseket egyszerűbben lehessen módosítani, elhelyezünk egy Bejegyzések szerkesztése linket is, amely a megfelelő adminisztrációs funkcióra mutat.
A fenti kódban láthatjuk, hogy ha nincs kiemelt bejegyzés, akkor a "Jelenleg nincsen kiemelt bejegyzésünk" üzenet jelenik meg. Ebben az esetben jobb lenne, ha meg sem jelenne ez a blokk.
Ezt ne felejtsük el, a későbbiekben lesz erre vonatkozó feladat.
Ezek után az oldalunkon már az adatbázisban található bejegyzésnek kell megjelennie.
wordpress_kiemeltbej_full.jpgA blogunk megjelenése a kiemelt bejegyzések megjelenése után.Sőt, ha a bejegyzés címére kattintunk, akkor annak teljes változatát is olvashatjuk, bár még nem az ideális módon.
Folytassuk a további bejegyzések szakasszal!
A további bejegyzések szakaszt nagyon hasonlóan kell kialakítanunk.
A <section id="tovabbibejegyzesek" >szakaszból töröljük ki az <article> tageket és helyezzük el az alábbi php kódot!
<section id="tovabbibejegyzesek" >
<h1 class="elvalaszto">További bejegyzések</h1>
<?php query_posts( array( 'post__not_in' => get_option( 'sticky_posts' ) ) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
echo "<article>";
echo "<h1><a href='";
echo get_permalink();
echo "'>";
the_title();
echo "</a></h1>";
echo "<time datetime=";
the_time('Y-m-j');
echo ">";
the_time('Y. F j.');
echo "</time>";
the_content();
edit_post_link('Bejegyzés szerkesztése');
echo "</article>";
endwhile;
else: ?>
<p>
<?php _e('Sajnáljuk, nincsenek bejegyzések'); ?>
</p>
<?php endif; ?>
</section>
Módosítsd úgy a sablont, hogy ha nincs kiemelt bejegyzés, akkor egyáltalán ne jelenjen meg a kiemelt bejegyzések szakaszt, és a további bejegyzések szakasz fejlécében a "További bejegyzések" szöveg helyett csak a Bejegyzések szöveg legyen látható!
Egy blogbejegyzés címére kattintva egy olyan oldalnak kellene megjelennie, amelyen a blogbejegyzés teljes terjedelmében látszik. Folytassuk ezzel a kialakítást! A blogbejegyzés oldal tartalmát a single.php oldal írja le. Készítsünk egy másolatot az index.php oldalból ilyen néven és végezzük el a megfelelő módosításokat!
<?php get_header(); ?>
<section id="bejegyzesek">
<h1>Bejegyzések</h1>
<section id="teljesbejegyzes">
<?php while ( have_posts() ) : the_post();
echo "<article>";
echo "<h1><a href='";
echo get_permalink();
echo "'>";
the_title();
echo "</a></h1>";
echo "<time datetime=";
the_time('Y-m-j');
echo ">";
the_time('Y. F j.');
echo "</time>";
the_content();
edit_post_link('Bejegyzés szerkesztése');
echo " </article>";
endwhile;
?>
</section>
</section>
<!-- bejegyzések vége -->
Ezek után, ha egy bejegyzésre kattintunk kezdőlapon, akkor az teljes tartalommal meg fog jelenni a képernyőn.
wordpress_bejegyzes_full.jpgA bejegyzésre kattintva most már a teljes szöveg olvashatóFontos lenne, hogy a bejegyzés alján a korábbi és későbbi bejegyzésekre mutató linkek is elhelyezésre kerüljenek a könnyebb navigáció érdekében.
<div class="elozobejegyzes">
<?php previous_post_link( '%link', _x( '←', 'Previous post link', '' ) . ' %title' ); ?>
</div>
<div class="kovetkezobejegyzes">
<?php next_post_link( '%link', '%title ' . _x( '→', 'Next post link', '' )); ?>
</div>
wordpress_elozobej_full.jpgA módosítás után megjelenik az előző és következő bejegyzésre mutató linkA menüpontokra kattintva egyelőre nem jelenik meg az oldalak tartalma, mert a page.php sablont még nem alakítottuk ki. Készítsünk egy másolatot a single.php oldalból page.php néven!
Láthatjuk, hogy ezek után már az oldalak is megjelennek.
wordpress_oldalsablon_full.jpgA page.php oldal kialakítása után már a menüpontokban szereplő oldalak is elérhetőek lesznek.A Wordpress CMS rendszer rendelkezik beépített keresőmechanizmussal, így csak annyi a dolgunk, hogy az űrlapot az elvárásoknak megfelelően átalakítsuk, illetve létrehozzuk azt a sablont (search.php), ami a találati lista megjelenítéséért felel.
Kezdjük az elsővel!
Hozzuk létre a searchform.php oldalt, amelyben kialakítjuk a kereső űrlapot. A Wordpress-dokumentáció alapján ez alapesetben a következőképpen nézhet ki:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>">
<input type="text" size="18" value="" name="s" id="s" >
<input type="submit" id="searchsubmit" value="Keres" >
</form>
Erre a sablonra aztán hivatkoznunk is kell a header.php oldalon.
<section id="kereses">
<h1>Keresés</h1>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</section>
Ezek után gondoskodnunk kell arról, hogy a találati lista eredménye is megjelenhessen az oldalon, vagyis ki kell alakítanunk a search.php oldal tartalmát.
<?php get_header(); ?>
<section id="bejegyzesek">
<h1>Találati lista</h1>
<section id="teljesbejegyzes">
<?php if (have_posts()) : ?>
<div class="arch"><?php printf(__('\'%s\''), $s) ?> kifejezésre vonatkozó találati lista:</div>
<?php while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a></h2>
<?php the_excerpt(' '); ?>
<?php endwhile; ?>
<?php else : ?>
<h2>Nincs találat a következő kifejezésre:<?php printf(__('\'%s\''), $s) ?></h2>
<p>A keresett kifejezés nem található a bejegyzésekben.</p>
<?php endif; ?>
</section>
</section>
<section id="blokkok">
<h1>Blokkok</h1>
<nav id="menu">
<h1>Menü</h1>
<?php wp_nav_menu() ?>
</nav>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</section>
<!-- blokkok vége -->
<?php get_footer(); ?>
Most már a keresési lista is megjelenik az oldalon.
Fejleszd tovább a találati lista oldalát a Wordpress-dokumentáció alapján! A bejegyzések címe alatt legyen látható az is, hogy milyen felhasználó készítette, és milyen kategóriában van elhelyezve. Módosítsd a stíluslapot úgy, hogy az egyes elemek jobban elkülönüljenek egymástól!
A fejlécünkben van egy nyomvonal navigáció, ami még mindig statikus módon jelenik meg. Fejlesszük tovább a rendszert úgy, hogy ez a navigáció is működjön. A Wordpress CMS-ben alapértelmezetten nincs ilyen funkció, de sebaj, rengeteg bővítményt találunk a rendszerhez, amivel kiegészíthetjük a funkcionalitását.
A Vezérlőpulton válasszuk ki a Bővítmények menüpontot és azon belül kattintsunk az Új hozzáadása linkre! A keresőmezőbe írjuk be a breadcrumb kifejezést!
wordpress_breadcrumb_full.jpgKeresés a Wordpress bővítmények között a breadcrumb kulcsszóraLátható, hogy sok olyan bővítményt találunk, amely ehhez a kulcsszóhoz kapcsolódik. A Részletek linkre kattintva elolvashatjuk az adott bővítményre vonatkozó információkat, a funkciókat, használat módját. Telepítsük a Breadcrumb NavXT bővítményt! A telepítés után ne felejtsük el azt bekapcsolni, hogy a funkciókat kihasználhassuk.
A dokumentáció szerint a nyomvonal navigáció megjelenítéséhez az alábbi kódot kell használnunk:
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
Módosítsuk ezek alapján a header.php oldalunkat!
<nav id="nyomvonal">
<h1>Nyomvonal morzsa</h1>
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</nav>
A blogunk megtekintése után már látjuk is, hogy a nyomvonal navigáció tartalma dinamikusan változik, attól függően, hogy milyen oldalra, bejegyzésre kattintunk.
Az, hogy a nyomvonal navigáció hogyan jelenjen meg, beállíthatjuk a bővítmény beállítások oldalán.
wordpress_breadbeall_full.jpgA Breadcrumb modul a bővítémények oldalonItt például beállíthatjuk, hogy látszódjon-e a kezdőlapra hivatkozás, illetve a magyarítást is elvégezhetjük ezen az oldalon.
A blogunk még korántsem teljes, több hiányzó sablont is el kellene készítenünk ahhoz, hogy minden funkció elérhetővé váljon, például a címkék és kategóriák alapján történő szűrés (tag.php, category.php), a hozzászólásokra vonatkozó sablonok (comments.php), illetve az archívum (archive.php) is hiányzik. Ezek továbbfejlesztését az olvasóra bízzuk a Wordpress dokumentáció alapján.
A konkrét példánkban egy blog megvalósítását tűztük ki célul, ezért a Wordpress CMS rendszerre esett a választásunk a megvalósítást illetően. Természetesen sok más CMS rendszer létezik, amelyeket felhasználhatunk, testre szabhatunk a munkánk során. Ilyenek például:
http://www.makeuseof.com/tag/10-popular-content-management-systems-online/
Bármelyik rendszer mellett döntünk is, a dokumentációval alaposan meg kell ismerkednünk, hogy a rendszert a kialakított terveknek megfelelően testreszabhassuk. Ebben például az alábbi oldalak segíthetnek bennünket:
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.