Subscribe
WordPress

Vlastná WordPress téma: Od HTML po funkčný web (1. diel)

Prvý diel praktického návodu na tvorbu WordPress témy od nuly. Od HTML po funkčný web.

Michal Forbak

• 2 min read
Vlastná WordPress téma: Od HTML po funkčný web (1. diel)
Photo by Lavi Perchik / Unsplash

WordPress je silný nástroj, ale skutočná sloboda prichádza vtedy, keď si vytvoríš vlastnú tému – presne podľa tvojich predstáv. V tomto článku ti ukážem, ako z obyčajného HTML webu spravíš plnohodnotnú WordPress tému.

🔧 1. Základná štruktúra témy

Každá WordPress téma musí obsahovať minimálne dva súbory:

style.css
index.php

Vytvor si adresár /wp-content/themes/mojatema a doň tieto dva súbory.

style.css

/*
Theme Name: Moja vlastná téma
Author: Tvoj Meno
Version: 1.0
*/

Tento komentár vo style.css registruje tému vo WordPresse.

🧱 2. Rozdelenie HTML do šablón

Povedzme, že máš statické HTML rozdelené takto:

  • header.html → hlavička
  • index.html → telo stránky
  • footer.html → päta

Vo WordPresse to rozdelíme:

  • header.php – obsahuje <!DOCTYPE html> až po otvorenie hlavného obsahu
  • footer.php – koniec stránky (vrátane </body></html>)
  • index.php – úvodná stránka + „loop“ pre príspevky

📄 3. Použitie funkcií WordPressu

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <h1><?php bloginfo('name'); ?></h1>
</header>

footer.php

<footer>
  <p>© <?php echo date('Y'); ?> Moja stránka</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>

<main>
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post();
  ?>
      <article>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div><?php the_excerpt(); ?></div>
      </article>
  <?php
    endwhile;
  else:
    echo '<p>Žiadne príspevky.</p>';
  endif;
  ?>
</main>

<?php get_footer(); ?>

🎨 4. Pripojenie CSS a JS súborov

Nepridávaj štýly ručne do header.php. Použi funkciu wp_enqueue_style() v súbore functions.php:

function moja_tema_assets() {
  wp_enqueue_style('hlavny-styl', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'moja_tema_assets');

✅ 5. Aktivácia témy

Po nahratí do wp-content/themes/ môžeš ísť do Admin → Vzhľad → Témy a aktivovať svoju tému.

🔚 Záver

Takto si vieš z HTML stránok vytvoriť vlastnú WordPress tému. V ďalšom diely sa pozrieme na vytváranie šablón pre jednotlivé stránky (napr. single.php, page.php, archive.php) a dynamické menu či widgety.