![](https://jezgra.online/wp-content/uploads/2021/11/wp-theme.jpg)
Želimo shvatiti kako funkcioniraju teme u WordPressu pa ćemo malo to istražiti i istestirati.
Istraga
Prvo pravimo direktorij teme u ‘/wp-content/themes/’ i nazvat ćemo ga ‘fullempty’. Kada odemo na admin/izgled dobijemo poruku da nedostaje stylesheet:
![](https://ioox.studio/wp-content/uploads/2021/11/01-ostecena-tema.jpg)
Pa dobro, da ga napravimo:
/* Theme Name: Full Empty Theme URI: https://damir.ioox.studio Description: Blank theme, got nothing. Author: Damir Sijakovic Author URI: https://damir.ioox.studio Version: 1.0 Requires at least: 1.0 Requires PHP: 5.2.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog Text Domain: fullempty */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body{ font-family: 'Poppins', sans-serif; background: #B7DCF2; font-size: 17px; }
Dobivamo poruku u admin/izgled:
![](https://ioox.studio/wp-content/uploads/2021/11/02-ostecena-tema.jpg)
OK, idemo napraviti ‘index.php’ sa sadržajem:
<?php get_header(); ?> <p> Hello World </p> <?php get_footer(); ?>
Dodajmo ‘header.php’, koji sadržava header:
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <header id="masthead" class="site-header"> </header><!-- #masthead -->
A zatim i ‘footer.php’:
<footer id="colophon" class="site-footer"> <div class="site-info"> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
I sada admin/izgled ne prijavljuje grešku:
![](https://ioox.studio/wp-content/uploads/2021/11/03-tema.jpg)
Kad temu aktiviramo, dobivamo:
![](https://ioox.studio/wp-content/uploads/2021/11/000-hello-world.jpg)
functions.php i CSS
Nakon toga dodajemo ‘functions.php’. Datoteka ‘functions.php’ se koristi za dodavanje značajki ili promjenu zadanih značajki na WordPress stranici.
Tu možemo ubaciti neki CSS framework, na primjer, zbog jednostavnosti, w3.css:
add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_style( 'fullempty-w3-style', 'https://www.w3schools.com/w3css/4/w3.css', null, $theme_version); wp_enqueue_style( 'fullempty-style', get_stylesheet_uri() ); //učitava style.css });
‘ajmo sad dodati neki menu panel u header. Posuditi ćemo w3.css bar element.
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <header id="masthead" class="site-header"> <div class="w3-bar w3-green"> <div class="w3-bar-item">London</div> <div class="w3-bar-item">Paris</div> <div class="w3-bar-item">Tokyo</div> </div> </header><!-- #masthead -->
Pa sad naš novi ‘header.php’ izgleda ovako:
![](https://ioox.studio/wp-content/uploads/2021/11/000-bar-panel.jpg)
Objave
Listu objava dobivamo sa ‘get_posts’ funkcijom. Funkcija vraća niz (array) sa WP_Post objektima. Tako da postavljena ‘Dobar dan, svijete!’ objava izgleda ovako (print_r):
[0] => WP_Post Object ( [ID] => 1 [post_author] => 1 [post_date] => 2021-11-13 18:31:12 [post_date_gmt] => 2021-11-13 17:31:12 [post_content] => <!-- wp:paragraph --> <p>Dobro došli u WordPress. Ovo je vaša prva objava. Uredite je ili izbrišite, a zatim počnite pisati!</p> <!-- /wp:paragraph --> [post_title] => Dobar dan, svijete! [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => dan-svijete [to_ping] => [pinged] => [post_modified] => 2021-11-13 18:31:12 [post_modified_gmt] => 2021-11-13 17:31:12 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost:3000/?p=1 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 1 [filter] => raw )
Nas zanima ‘ID’ i ‘post_title’ jer želimo složiti UL listu. Link dobivamo preko ‘get_permalink’ funkcije. Ovako izgleda petlja s kojom dobivamo linkove objava:
<?php $myPosts = get_posts(); for ($i=0; $i<count($myPosts); $i++) { echo '<li>'. '<a href="' . get_permalink( $myPosts[$i]->ID ) . '">' . $myPosts[$i]->post_title . '</a></li>'; } ?>
Naslov i sadržaj objave dobivamo sa ‘the_title’ i ‘the_content’ funkcijama. Naš novi index.php sada izgleda ovako:
<?php get_header(); ?> <h1>Hello world</h1> <ul class="w3-ul w3-white w3-border w3-margin"> <li><h2>Sve objave</h2></li> <?php $myPosts = get_posts(); for ($i=0; $i<count($myPosts); $i++) { echo '<li>'. '<a href="' . get_permalink( $myPosts[$i]->ID ) . '">' . $myPosts[$i]->post_title . '</a></li>'; } ?> </ul> <br> <ul class="w3-ul w3-white w3-border w3-margin"> <li><h2>Objava</h2></li> <li><?php echo the_title(); ?></li> <li><?php echo the_content(); ?></li> </ul> <br> <?php get_footer(); ?>
![](https://ioox.studio/wp-content/uploads/2021/11/000-objave-1024x707.jpg)
Izbornik
Sada radimo izbornik. Trebamo registrirati menu i filter za LI elemente koji nam omogućava da postavimo css klase. Pa dodajemo u ‘functions.php’:
register_nav_menus( array( 'primary' => esc_html__( 'Primary', 'fullempty' ), ) ); function add_additional_class_on_li($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
A u header, dodajemo menu lokaciju:
if( has_nav_menu('primary')) { $args = [ 'echo' => false, 'theme_location' => 'primary', 'items_wrap' => '<ul class="w3-bar w3-green" style="margin:0;padding:0;">%3$s</ul>', 'add_li_class' => 'w3-bar-item', 'container' => '', 'fallback_cb' => false, 'add_li_class' => 'w3-bar-item' ]; $primaryMenu = wp_nav_menu($args); //error_log(print_r($primaryMenu, true)); echo $primaryMenu; }
Nakon toga u admin/izgled/izbornici pravimo izbornik kojeg zovemo ‘glavni’.
![](https://ioox.studio/wp-content/uploads/2021/11/000-menu-1024x480.jpg)
I na ‘Upravljanje lokacijama’ vežemo lokaciju sa izbornikom:
![](https://ioox.studio/wp-content/uploads/2021/11/000-menu-upravljanje-lokacijama.jpg)
Za kraj dodajemo u ‘index.php’ naslov i opis bloga sa ‘get_bloginfo’ funkcijom:
<div class="w3-margin"> <h1><?php echo get_bloginfo( 'name' ); ?></h1> <p><?php echo get_bloginfo( 'description', 'display' ) ?></p> </div>
I to je to! Umjesto w3.css možemo uvesti bilo koji framework ili iskoristiti ovo znanje da integriramo obićni HTML template u WordPress.
![](https://ioox.studio/wp-content/uploads/2021/11/finalno.jpg)
Arhiva s temom
Temu možete preuzeti ovdje i samo je raspakirajte u ‘/wp-content/themes/’: