Hakirajmo WordPress temu!

Ž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:

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:

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:

Kad temu aktiviramo, dobivamo:

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:

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(); ?>

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’.

I na ‘Upravljanje lokacijama’ vežemo lokaciju sa izbornikom:

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.

Arhiva s temom

Temu možete preuzeti ovdje i samo je raspakirajte u ‘/wp-content/themes/’:

Preuzmi