WordPress – localhost

Kreiranje datoteka
Svaka tema WordPressa se sastoji od nekoliko datoteka koje su temelj za izgradnju složenijeg okvira. Za bolje upravljanje, programeri kreiraju dodatne mape za hosting multimedijskih sadržaja i skripti kojima se koristimo za temu. Najčešća mapa je images koja se upotrebljava za pohranu zajedničkih ili često korištenih slika u temi. No, gdje stvoriti te datoteke unutar WordPressa? Sve teme se nalaze u mapi wp-content/themes. Dakle, napravimo mapu na tomu mjestu. Možete dati smisleni naziv za ovu mapu koja je bliska nazivu same teme. Izradimo mapu s nazivom moja_tema. Da bismo kreirali datoteke i radili s HTML kôdom, potreban nam je i kvalitetan HTML editor. Moj izbor je Brackets, odličan HTML editor otvorenog kôda. Možete ga preuzeti na http://brackets.io/. Pokrenite Brackets i kreirajte sljedeće datoteke (File zatim New i dodajte nazive i ekstenziju):

style.css
index.php
header.php
footer.php
sidebar.php
single.php
page.php
archive.php
functions.php

Spremite sve datoteke u mapu koju smo prethodno kreirali:
c:\xampp\htdocs\wordpress\wp-content\themes\moja_tema

 

Izrada teme WordPress-a
Nakon kreiranja potrebnih datoteka otvorite style.css i u editoru dodajte sljedeći komentar. To su informacije o nazivu teme, verziji, imenu autora, URI autora (Uniform Resource Identifier) i URI teme.

/*
Theme Name: Moja tema 1.0
Theme URI: http://www.inf.com.hr
Description: WordPress tema
Author: Ž.
Author URI: http:// www.inf.com.hr
Version: 1.0
*/

Naravno, vi možete promijeniti informacije o temi. Spremite i zatvorite datoteku i idite na Izgled zatim Teme WordPress nadzorne ploče. Pregled sadrži screenshot teme, naziv teme i aktivacijski gumb. Osvježite prozor svoga web preglednika. Ukoliko želite vidjeti screenshot svoje teme, napravite sliku veličine 600 × 450 piksela. Možete smanjiti tu veličinu i na pola (300 × 225 piksela). Spremite slikovnu datoteku pod nazivom: screenshot.png. Krenimo na sljedeći važan korak dodavanjem osnovnih kontejnera. Radi se o dijelovima primarnih sadržaja headera, sadržaja, sidebara i footera. Za stvaranje tih kontejnera, otvorite style.css i dodajte sljedeći kôd:

body{ 
    font-family:Arial;
    font-size:15px;
    color:#000;
    background:#fff;
}
h1 {
    font-size:50px;
}
h3 {
    font-size:22px;
}
#content-wrapper {
    width:960px;
    text-align:left;
    margin:0 auto;
    background:#fff;
    padding:15px;
}
#header{
    width:960px;
    height:120px;
}
#post-content {
    float:left;
    width:600px;
    padding:0 15px 15px 15px;
}
.sidebar{
    float:left;
    width:300px;
    margin:0 0 0 15px;
    font-size:15px;
    list-style:none;
}
#footer{
    height: 60px;
    background: #fff;
    padding: 15px;
    clear:both;
}

Nakon svakog dodanog kôda pogledajte kako izgleda tema. Aktivirajte temu i nakon toga kliknite na Posjeti web-stranicu. Ona je prazna. Ovaj kôd daje osnovni kostur web stranice. Možete primijetiti neke poznate nazive kao što su sidebar, zaglavlje i podnožje. Sljedeći važan korak uključuje stvaranje kostura zaglavlja teme. On sadrži minimalni, najbitniji kôd za zaglavlje teme WordPressa. Kreirajmo predložak zaglavlja:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php wp_title ( ‘|’, true,’right’ ); ?></title>
 <link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php
 if ( is_singular() && get_option( ‘thread_comments’ ) )
        wp_enqueue_script( ‘comment-reply’ );
 wp_head();   
?>
</head>
<body>
<div id=”content-wrapper”>
    <div id=”header”>
        <h1><a href=”<?php echo get_option(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>
    </div>

Primijetimo da se radi o kôdu neophodnom za komentare. Ova tema će imati normalne komentare, ali ako temu modificirate i proširite da biste komentarima dodali mogućnost threada, ovaj kôd će omogućiti njegovu jednostavnu aktivaciju. Također možete primijetiti poziv prema funkciji wp_head ();. To je jedna od bitnih funkcija koje moraju biti prisutne u datoteci zaglavlja predloška. Funkcija treba biti prisutna neposredno prije zatvaranja </ head> taga. Obratite pozornost i na uključivanje content-wrapper dijela koji će zaokružiti sve ostale u cjelinu. Dodajmo predložak početne stranice. U ovom, početnom dijelu izrade web stranice trebat će i malo strpljenja da biste vidjeli izgled svoje teme. Da bi to već sada bilo vidljivo, dodajte sljedeći kôd u datoteci index.php:

<?php get_header(); ?>
    <div id=”post-content”>
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> 
        <div class=”post”>
        <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
            <div class=”entry”> 
                <?php the_post_thumbnail(); ?>
                <?php the_content(); ?>
                <p class=”postmetadata”>
                <?php _e(‘Filed under&#58;’); ?> <?php the_category(‘, ‘) ?> <?php _e(‘by’); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link(‘Nema komentara &#187;’, ‘1 komentar &#187;’, ‘% Komentara &#187;’); ?> <?php edit_post_link(‘Edit’, ‘ &#124; ‘, ”); ?>
                </p>
            </div>
        </div>
<?php endwhile; ?>        
        <div class=”blog-pager”>
        <?php posts_nav_link(); ?>
        </div>      
        <?php endif; ?>
    </div>
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

Primijetite post-content u datoteci koji će omogućiti popunjenje najnovijih postova na vašem web stranici. Možda ćete primijetiti pozive sidebara i  footera koji su također uključeni u ovu datoteku. Iako ove sekcije još nisu kodirane, kôd u indeksu dovoljno je dobar da prikaže nešto na naslovnici. Spremite promjene, otvorite web pretraživač, unesite http://localhost/wordpress/wp-admin i podatke: Korisničko ime i Lozinka da se logirate.

Osvježite stranicu.

Opaaa… dobili ste osnovni kostur teme! Ovako izgleda početni post WordPressa. Važna stvar koja nedostaje je navigacijski izbornik i uobičajeno je da se postavlja odmah ispod zaglavlja. Dodajmo podršku za prilagođeni navigacijski izbornik. Koristeći se WordPressom 4.8.x možete jednostavno dodati podršku za stvaranje prilagođenih navigacijskih izbornika. To je moguće u dva jednostavna koraka. Najprije dodajte sljedeći kôd u datoteku functions.php:

<?php
add_theme_support( ‘menus’ );

nakon toga, dodajte sljedeći kôd na kraju datoteke header.php:

<?php wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-header’ ) ); ?>

Nakon ovih dodataka možete u nadzornoj ploči pod  Izgled pa Izbornici  kreirati prilagođeni izbornik za svoju temu. Također, u nadzornoj ploči pod Stranice zatim Dodaj Novu  možete dodati i nove stranice. Stavite naziv stranice i kliknite Objavi. No, bez oblikovanja, izbornik će se pojaviti poput jednostavne poveznice. Da biste ga uredili, trebate postaviti CSS kôd. Ako pažljivo pogledate izgled kôda, možete vidjeti da je klasa povezana s izbornikom menu-header. Priložite sljedeći kôd na kraju datoteke style.css:

.menu-header {
    width:960px; background:#f8f8f8;
    display:block;
    float:left;
    position:relative;
}
.menu-header ul{
    list-style:none;
    margin:0;
}
.menu-header li{
    float:left;
}
.menu-header a {
background:#f8f8f8;
color:#111;
display: block;
font-size:11px;
font-weight:normal;
padding:0 20px;
line-height:38px;
text-transform:uppercase;
}
.menu-header a:hover {
background:#e6e6e6;
color:#000;
}

Osvježite stranicu i pogledajte promjene. Ovdje se koristimo klasom menu-header za stiliziranje izbornika. Time smo napravili minimalan styling izbornika. Također možete dodati i podizbornik u ovaj izbornik. Blogeri često žele pokazati umanjene prikaze slika, thumbnail, poput nekog teksta u najnovijim postovima na naslovnici. Da biste to omogućili, jednostavno dodajte dvije linije kôda odmah ispod kôda prilagođenog izbornika prethodno postavljenog u datoteci functions.php:

add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(350, 200, true);

Prva linija omogućava podršku postovima za prikaz umanjenih sličica, thumbnail, dok druga određuje dimenzije same sličice. Izmjenom kôda možete lako promijeniti veličine sličica. Krenimo na sljedeći korak i dovršimo predložak stranice jednog posta da bismo mogli otvoriti i pregledati pojedinačne postove. Kôd koji ćemo upotrijebiti za ovu stranicu je gotovo isti kao i onaj u datoteci index.php. Jedina razlika je uključivanje kontejnera s komentarima. Kôd koji ćemo postaviti u datoteku single.php:

<?php get_header(); ?>
    <div id=”post-content”>
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div class=”post”>
        <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
            <div class=”entry”> 
                <?php the_post_thumbnail(); ?>
                <?php the_content(); ?>
                <p class=”postmetadata”>
                <?php _e(‘Filed under&#58;’); ?> <?php the_category(‘, ‘) ?> <?php _e(‘by’); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link(‘Nema komentara &#187;’, ‘1 Komentar &#187;’, ‘% Komentara &#187;’); ?> <?php edit_post_link(‘Edit’, ‘ &#124; ‘, ”); ?>
                </p>
            </div>
            <!– Komentar  –>
            <div class=”comments-wrapper”>
                <?php comments_template(); ?>
            </div>
    </div>
<?php endwhile; ?>
     <!—Navigacijske poveznice za postove–>
    <div class=”blog-pager”>
        <?php previous_post_link(‘< %link’) ?> <?php next_post_link(‘ %link >’) ?>
    </div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

Kao što vidite, poglavlje s komentarima uključeno je odmah nakon postova. Klasa povezana s ovim poglavljem je comments-wrapper, koji se može upotrijebiti za njegovo stiliziranje. Kako kreirati rubni stupac (sidebar) i predložak  podnožja (footera)? Rubni stupac je potrebno urediti u svrhu prihvaćanja widgeta. WordPress widgeti dodaju dodatni sadržaj i značajke rubnom stupcu. Nakon početne instalacije, WordPress sadržava widgete kao što su kategorije postova, navigacija, pretraživanje, itd. Pripremimo rubni stupac za prihvat widgeta. To možemo učiniti vrlo jednostavno dodajući sljedeći kôd u datoteku functions.php:

if ( function_exists(‘register_sidebar’) )
    register_sidebar( array (
    ‘name’ => ‘Widget Area’,
    ‘id’ => ‘widget_area’,
    ‘before_widget’ => ‘<li id=”%1$s” class=”widget-section %2$s”>’,
    ‘after_widget’ => “</li>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
  ) );

Pogledajte sada pod Izgled » Widgeti i  vidjet ćete prazan kontejner spreman za uporabu. Možete dodati različite widgete, ali neće biti vidljivi, jer je sidebar.php datoteka još uvijek prazna. No, prije nego u sidebar.php dodamo odgovarajući kôd, moramo prilagoditi funkciju za povlačenje statičnih widgeta, naravno, ukoliko ih ima. Ova prilagođena funkcija vraća povratne informacije o kontejneru pripremljenom za njihovo prihvaćanje. Slijedi kôd koji mora biti dodan u datoteku functions.php:

function is_sidebar_active( $count ){
  global $wp_registered_sidebars;
  $widgetcols = wp_get_sidebars_widgets();
  if ($widgetcols[$count]) return true;
    return false;}

Primijenit ćemo prilagođenu funkciju u predlošku našeg sidebara da bismo dohvatili informacije koje smo prethodno kreirali. Nakon toga slobodno dodajte widgete. Evo predloška za datoteku sidebar.php:

<div class=”sidebar”>
<?php if ( is_sidebar_active(‘widget_area’) ) : ?>
        <div id=”primary” class=”widget-area”>
            <ul class=”sidebar-list”>
                <?php dynamic_sidebar(‘widget_area’); ?>
            </ul>
        </div>
<?php endif; ?>      
</div>

Možete primijetiti da smo ovaj kôd upakirali u klasu sidebar koju smo deklarirali u datoteci style.css. Osim toga, upotrijebili smo tekst klase widget za prepoznavanje i aktiviranje ovog kontejnera, jer to je isti ID koji smo upotrijebili prilikom izrade kontejnera u datoteci functions.php. Kreirajmo i predložak podnožja za dovršetak osnovnog izgleda web stranice. Slijedi kôd koji mora biti dodan u datoteku footer.php:

<div id=”footer”>
    <p>
    <strong>Copyright 2013 <?php bloginfo(‘name’); ?> All Rights Reserved.</strong> |
        Created by <a href=”http://www.inf.com.hr”>Informatika</a> | 
        <a href=”<?php bloginfo(‘rss2_url’); ?>”>Posts RSS Feed</a> |
        Powered by <a href=”http://wordpress.org/”>WordPress</a></p>
    </div>
</div>
</body>
</html>

Osvježite web stranicu. Možete promijeniti kôd prema vašim zahtjevima. Primijetite da smo upotrijebili ID podnožja koji je u početku bilo deklariran u datoteci style.css. Kroz ovaj ID možete lako promijeniti izgled ovog kontejnera da bi poprimio ljepši i profesionalniji izgled. Posljednje dvije važne datoteke na koje treba obratiti pozornost su predlošci statične stranice i arhivske stranice. Krenimo s izradom osnovnog predloška za prikaz statične stranice kreirane od strane korisnika. Evo kôda koji bi trebao biti dodan u datoteku page.php:

<?php get_header(); ?>
    <div id=”post-content”>
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div class=”post”>
        <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
            <div class=”entry”>
            <?php the_content(); ?>
                <p class=”postmetadata”>
                <?php _e(‘Filed under&#58;’); ?> <?php the_category(‘, ‘) ?> <?php _e(‘by’); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?> <?php edit_post_link(‘Edit’, ‘ &#124; ‘, ”); ?>
                </p>
            </div>
        </div>    
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

Primjećujete da je kôd za page.php gotovo isti kao i za datoteku single.php. Postoje dvije male razlike: nedostaje kôd za sekciju komentara kojim se obično ne koristimo na statičkim stranicama, kao i kôd za navigaciju koji vodi na prethodnu ili sljedeću stranicu. Ako ih želite u svoj predložak, možete jednostavno dodati i te dvije sekcije. Prijeđimo na posljednju važnu datoteku koja će odrediti strukturu arhivske stranice. Uključimo sljedeći kôd u datoteku archive.php:

<?php get_header(); ?>
    <div id=”post-content”>
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div class=”post”>
        <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
            <div class=”entry”>
            <?php the_excerpt(); ?>
                <p class=”postmetadata”>
                <?php _e(‘Filed under&#58;’); ?> <?php the_category(‘, ‘) ?> <?php _e(‘by’); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link(‘Nema komentara &#187;’, ‘1 komentar &#187;’, ‘% Komentara &#187;’); ?> <?php edit_post_link(‘Edit’, ‘ &#124; ‘, ”); ?>
                </p>
            </div>
        </div>
<?php endwhile; ?>
    <div class=”blog-pager”>
        <?php posts_nav_link(); ?>
    </div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

Primijetite uključenu navigaciju u ovom predlošku koja prolazi kroz sve arhivirane stranice osim komentara koji nisu neophodni. Ovime smo napravili osnovnu temu WordPressa. Svrha je poznavati neophodne postupke potrebne za izradu teme od samih početaka, a ujedno vam može pomoći u kreiranju vlastite WordPress teme.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *