Cum să programezi o temă WordPress
17
WordPress este o platformă web cu ajutorul căreia puteţi crea web-siteuri sau web-bloguri foarte uşor şi foarte repede. În ceea ce priveşte instalarea si administrarea, totul vine de la sine deoarece această platformă ţinteşte atât publicul cu cunoştinţe de informatica, cât şi pe cei fără. Marea problemă, din câte am observat pe site-urile de free-lancer, este aceea a interfeţelor. Multă lume doreşte să-şi creeze o interfaţă proprie, dar se opresc la gândul că nu ştiu programare web. Singurele cunoştinţe de care aveţi nevoie sunt: (X)HTML, CSS şi foarte puţin PHP.
Creerea unei interfeţe wordpress nu se deosebeşte foarte mult de dezvoltarea unui web-site static (metoda mea):
1. Schiţăm ideia în Photoshop (dacă lucraţi ca free-lancer, atunci săriţi peste această etapă deoarece vreţi primi fişierul .psd).
2. Transformaţi ideia în pagini web ( cu ajutorul slice-urilor, HTML şi CSS; până aici PSD to HTML).
3. „Şablonizăm” paginile statice în interfaţă wordpress (puţine cunoştinţe de PHP).
Sau PSD->HTML->WordPress.
Temele instalate pe un site creat cu wordpress sunt situate în folderul /wp-content/theme. Fiecare temă este alcătuită din cel puţin 2 fişiere: index.php şi style.css. Fişierele php sunt numite şabloane (templates). Şabloanele sunt fişiere care controlează lookul site-ului. De exemplu: header.php, sidebar.php, footer.php, single.php, page.php etc. Aceste fişiere conţin funcţii predefinite (template tags) care insereaza conţinutul dinamic.
Mai multe informaţii:
http://codex.wordpress.org/Using_Themes
http://codex.wordpress.org/Template_Hierarchy
http://codex.wordpress.org/Stepping_Into_Templates
Pentru inceput, creem un folder nou în …/wordpress/wp-content/theme. Creem şi deschidem fişierul style.css. În acest fişier introducem următoarele linii de cod:
/* Theme Name: NumeleTemei Theme URI: http://www.siteultemei.com Description: Cateva cuvinte despre aceasta tema. Version: 1.0 Author: Autorul Temei Author URI: http://www.siteulautorului.cosm/ */
În CSS (Cascading Style Sheets), tot ce este între /* şi */ se numeşte comentariu. Interpretorul (în cazul nostru: browserul) nu ia in considerare aceste linii. Dacă nu le ia în considerare, atunci de ce le mai scriem? În primul rând, comentariile pentru un programator sunt sfinte şi, în al doilea rând, wordpress analizează aceste prime comentarii ca şi „actul de identitate” al temei. Fiecare temă trebuie să conţină aceste informaţii: Theme Name, Description, Version, Author, Author URI . Aceste informaţii sunt afişate în Administration->Apperance->Theme.
Să trecem la treburi mai serioare! Creem şi deschidem fişierul index.php. Ignorăm terminaţia php, momentan, şi introducem banalele coduri html.
<html> <head> <title>TitluSiteului</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="header"> </div> <div id="content'> </div> <div id="sidebar"> </div> <div id="footer"> </div> </body> </html>
Momentan, daca „executăm” acest fişier, nu vom observa nimic în browserul nostru. Tot ce am făcut până acum e doar o simplă înpărţire logică a paginii. Această împărţire respectă structura unui blog, ca în imaginea de mai jos.
De obicei, în header se grupează titlul şi descrierea, în content – conţinutul, în sidebar – categoriile, paginile, blogrollul, meta informaţiile, iar în footer – copyrightul şi unele informaţii.
<html> <head> <title>TitluSiteului</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="header"> <h1>Numele siteului</h1> <p>Descrierea</p> </div> <div id="content'> <div class="post"> <h3>Titlul 1</h3> <p>Continut</p> </div> <div class="post"> ... </div> ... </div> <div id="sidebar"> <div id="category"> <ul> <li>...</li> <li>...</li> </ul> </div> <div id="pages"> <ul> <li>...</li> <li>...</li> </ul> </div> ... </div> <div id="footer"> <p>Copyright © <a href="www.site.ro">NumeleSiteului</a></p> </div> </body> </html>
Abia acum browserul ne afişează ceva. Am creat o pagină web statică.
Pentru a respecta ideia din imaginea de mai sus, ne folosim de cunoştinţele de css.
body{
margin:0px;
padding:0px;
}
#header{
width:100%;
height:150px;
border:1px solid #000;
}
#content{
width:50%;
margin-left:20px;
border:1px solid #000;
float:left;
}
#sidebar{
width:30%;
float:left;
margin-left:10px;
border:1px solid #000;
}
#footer{
width:100%;
height:100px;
clear:both;
border:1px solid #000;
}
Am folosit border:1px solid #000; pentru a putea observa mai bine strcturarea facută în browser.
Deoarece acest articol se axează mai mult pe partea de wordpress (conţinut dinamic), layoutul şi designul siteului/blogului rămâne la putinţa/dorinţa domniilor voastre. Ideea principală a ceea ce am prezentat până acum este structurarea logică a codului sursă sau div-uirea.
Suntem în stagiul PSD to HTML.
HTML to WordPress
WordPress pune la dispoziţia developerilor mai multe funcţii astfel de dinamizare. Nu trebuie să ştim titlul paginilor din cap, descrierea blogului, câte comenturi sau câte posturi sunt când proiectăm temele. Toate aceste informaţii ne sunt date de funcţiile predefinite din WordPress (template tags). Aceste funcţii sunt scrise în php şi respectă sintaxa:
function name($arg1, $arg2, ...){
//corpul funcţiei;
return ;
}
func
function, return – cuvinte cheie (function defineste o functie, return returneaza o valoarea ca rezultat al functiei)
$arg1, $arg2 … – sunt argumentele date funcţiei şi folosite ca variabile în corpul acesteia
corpul functiei – o succesiune de instructiuni php
Mai multe informaţii aici.
Ca o mica paranteza, funcţiile din php se aseamănă cu cele din matematică:
f:[a,b]->[c,d] function f($x..)
f(x)=ax+b instructiunile phpf(3)=3a+b=y f(3)–>return y=3a+b
Folosind funcţiile predefinite, pagina noastră statică se transformă în una dinamică astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes();?>>
<head>
<meta charset="<?php blginfo('charset');?>"/>
<title> <?php bloginfo('name')?><?php wp_title();?> </title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>"/>
<?php wp_head();?>
</head>
<body>
<div id="header">
<h1><a href="<?php bloginfo('url');?>"> <?php bloginfo('name');?></a> </h1>
<p><?php bloginfo('description');?></p>
</div>
<div id="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 id="entry">
<?php the_content();?>
</div>
<p>
<?php _e("Categoria "); the_category(' , '); _e("; scris de "); the_author();?>
</p>
<p>
<?php comments_popup_link('Niciun comentariu','1 comentariu','% comentarii');?> | <?php edit_post_link('Editeaza');?>
</p>
</div>
<?php endwhile;?>
<?php posts_nav_link();?>
<?php else:?>
<div class="post">
<p>Nu exista niciun post</p>
</div>
<?php endif; ?>
</div>
<div id="sidebar">
<ul>
<li><?php get_search_form();?></li>
<?php wp_list_pages('depth=1&title_li=Pages');?>
<li><h2><?php _e('Categories:');?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1');?>
</ul>
</li>
<li><h2><?php _e('Archives:');?></h2>
<ul>
<?php wp_get_archives('type=monthly');?>
</ul>
</li>
<?php get_links_list() ?>
<li><h2><?php _e('Meta:');?></h2>
<ul>
<?php wp_register();?>
<li><?php wp_loginout();?></li>
<?php wp_meta();?>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright © <a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></p>
<?php wp_footer();?>
</div>
</body>
</html>
Dinamizarea s-a făcut cu ajutorul funcţiilor:
bloginfo() – afişează informaţii, completate în panul Admnistration, despre blog.
Argumente: name – numele blogului, description – descrierea blogului, stylesheet_url – calea absoluta a fişierului style.css, admin_mail – mailul adminului, url – adresa blogului
have_posts() – parte a „loopului”
the_post() – parte a „loopului”. Este cu o funcţie cu rol de iterare (parcurgere) a posturilor.
the_permalink() – ‘Permalinkul URLului unic locului unde se memorează un articol/pagină.’ Această funcţie se foloseşte în interiorul loop-ului pentru a prelua permalinkul fiecărui post. Pentru obţinerea permalinkului în afara loop-ului, folosim get_permalink($id), unde $id este ID-ul numeric al postului.
the_title() – Afişează titlul postului curent. Se foloseşte în interiorul loop-ului. Are 3 argumente, dintre care: $before- textul din înainte de titlu, $after- textul de după. Ex: the_title(„<p class=’titlul’>”,”</p>”). Există şi funcţia get_the_title($id).
the_content() – Afişează conţinutul postului curent. Se foloseşte în interiorul loop-ului., în afara loop-ului: get_the_content(). Unul dintre argumentele funcţiei „stilează” textul pentru , care default este (more…). De ex: the_content(‘Citeste in continuare..’).
the_category() – afişează categoria din care face parte post-ul curent.
the_author() – afişează autorul postului curent.
comments_popup_link() – Afişează numărul de comentarii. Ca şi argumente: $zero- textul pentru 0 commenturi, $one- textul pentru un comment, $more- textul pentru mai multe commenturi. Ex: comments_popup_link(‘Niciun comment’,’Un comment’,’% Commenturi’); (% , în execuţie, va fi înlocuit de numărul de commenturi).
edit_post_link() – Afişează un link pentru editarea postului curent (daca privilegii oferă această opţiune). Ca şi opţiuni $link, $before, $after. Ex: edit_post_link(‘Editează’, „<p class=’edit’>”,'</p>);
wp_list_pages() – Afişează lista cu paginile blogului. $args este un vector de mai mulţi parametrii dintre care: sort_order= ASC sau DESC
depth – controlează câte nivele vor fi afişate în ierarhie. 0 -pentru afişarea până la ultimul nivel, 1 – afişează varful ierarhic, 2,3,4…- numărul de nivele.
title_li – titlul afişat în topul listei.
include, exclude – include sau exclude din lista ID-ul paginilor separate prin ‘,’ (virgulă).
wp_list_cats() – afişează o listă cu categoriile blogului. Putem folosi aceeaşi parametrii ca la wp_list_pages()
get_search_form() – aduce în pagina noastră un text box pentru a fi folosit ca search.
get_links_list() – listează blogrollul.
wp_get_archives() – afişează o listă arhivată după zi, lună, an.
wp_register() – afişează „Site admin” în cazul în care sunteţi logat, în caz contrar „Register”.
wp_loginout() – afişează „Log in” dacă nu sunteţi logat, în caz contrat „Log out”.
wp_meta() – meta informaţiile.
query_posts() – folosind această funcţie, modificăm interogarea implicită pe care o foloseşte wordpress pentru a afişa posturile.
Despre toate aceste funcţii, puteţi afla mai multe la adresa aceasta (sau aranjate după alte criterii ).
„The Loop” este partea cea mai importantă din codul de mai sus. Aceste instructiuni afişează toate articolele scrise pe blog.
If( have_posts()) while(have_posts()): the_post(); endwhile; else: echo ' Nu sunt articole.'; endif;
Traducerea: dacă sunt articole ( have_posts() ) atunci cat timp exista un urmator articol ii luam ID-ul si il transmitem functiilor urmatoare.
Pentru cei cu cunoştinţe avansate de php, corpul funcţiei have_posts() se afla în fişierul /wp-include/query.php .
Mai multe informaţii: http://codex.wordpress.org/The_Loop_in_Action , http://codex.wordpress.org/The_Loop .
Momentan, orice pagină am accesa ( cu excepţia paginilor inexistente sau nepermise – 404.php), vom avea aceeaşi organizare, acelaşi design. Pentru a scăpa de această monotonie, vom crea celălalte pagini template, şi anume:
single.php – acest template este folositor atunci când accesăm un post.
page.php – templateul pentru pagini
category.php – afişajul, atunci când este cerut să se vadă categoriile
author.php – templateul pentru pagina autorului
search.php – templateul pentru pagina rezultată în urma căutărilor
attachement.php – când vreţi să observaţi un singur ataşament, acest template se va ocupa de look
image,php – vizionarea unei singure imagini
404.php – şablonul binelui cunoscut „404 Not Found”
comments.php – şablonul comentariilor
Înainte de a crea şabloanele de mai sus, şablonăm index.php, împărţindu-l exact după divurile principale: header, content, sidebar, footer.
Copiem tot, de la prima linie, până la div-ul de inchidere de deasupra linie < div id="content">. Lipim toate aceste instructiuni în fişierul (pe care l-aţi creat) header.php. Ştergem, din index.php, ce am copiat şi înlocuim cu <?php get_header(); ?>. Funcţia get_header() se comportă ca include() din php : include(TEMPLATEPATH.’/header.php’); deşi în fişierul general_template.php este definită altcumva. Această funcţie are şi un argument $name. Putem să-l folosim, de exemplu:
<?php
if(is_home()) get_header('home');
else get_header();
?>
În cazul de mai sus, trebuie să avem fişierele header.php şi header-home.php. is_home() este un tag condiţional (pentru mai multe http://codex.wordpress.org/Conditional_Tags ).
Copiem blocul sidebar în fişierul sidebar.php şi, în index.php, îl înlocuim cu <?php get_siderbar(); ?>. Ca şi get_header(), funcţia get_sidebar() are un argument şi trebuie respectate acelaşi reguli, dacă folosim argumentul ( să existe fişierul sidebar-{$argument}.php).
Facem aceeaşi operaţie, ca la header şi sidebar, şi asupra blocului footer, înlocuindul cu get_footer. Aceeaşi poveste.
get_header(), get_sidebar(), get_footer(), get_search_form() se numeste taguri de conţinut/includere.
În cazul în care folosiţi unul dintre aceste taguri, dar nu există fişierele respective, wordpress va include el, pe cele implicite din /wp-includes/theme-compat.
Conţinutul fişierului index.php ar trebuie să semene cu următoarele linii :
<?php get_header();?>
<div id="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 id="entry">
<?php the_content();?>
</div>
<p>
<?php _e("Categoria "); the_category(' , '); _e("; scris de "); the_author();?>
</p>
<p>
<?php comments_popup_link('Niciun comentariu','1 comentariu','% comentarii');?> | <?php edit_post_link('Editeaza');?>
</p>
</div>
<?php endwhile;?>
<?php posts_nav_link();?>
<?php else:?>
<div class="post">
<p>Nu exista niciun post</p>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Copiem codul de mai sus în fişierul page.php pentru a genera şablonul paginilor, de data aceasta. După ce-l copiem, dedesubt de <?php the_content();?> adăugăm <?php link_pages(‘<p>Paginile:’,'</p>’,’number’); ?> care creează mai multe „pagini” în funcţi de câte <!– nextpage–> avem. Ştergem paragrafele dintre </div> şi </div> , în afară de <?php edit_post_link(‘Editeaza’);?>. Ştergem şi linia cu <?php posts_nav_link(); ?> care se ocupă cu afişajul linkurilor spre ‘Previous Page’ şi ‘Next Page’ atunci când pe pagina noastră au fost afişate numărul implicit de posturi.
Copiem conţinutul fişierului index.php în fişierul single.php. De data aceasta, doar simple modificări: adăugăm <?php previous_post_link();?><?php next_post_link();?> între liniile cu endwhile şi else. Aceste taguri se asemănă cu posts_nav_list(), numai că acestea linkuiesc spre postul anterior, respectiv posterior. Ştergem paragraful unde se află comments_popup_link().
O parte importantă la un blog sunt comentariile. De aceea vom crea un template şi pentru comentarii: comments.php. Acestui şablon i se pot aplica foarte multe „efecte”. Am să schiţez în acest tutorial doar chestiile de bază, restul vă las pe voi să le descoperiţi ( http://www.instantshift.com/2009/02/08/30-most-wanted-wordpress-comments-page-hacks/ ).
Adăugăm fişierului single.php , duă linia cu the_content(), <?php comments_template();?> pentru a include în fişier template-ul pentru comentarii, comments.php. Adăugăm în fişierul contacts.php următoarele instrucţiuni:
<?php
/* Verificăm daca fişierul comments.php a fost accesat direct din browser. Accesându-l direct din browser, nu ştim a cărui post interogăm comentariile. */
if(!empty($_SERVER['SCRIPT_FILENAME'])&& 'contacts.php'==basename($_SERVER['SCRIPT_FILENAME']))
die('Nu accesaţi acest fişier direct din browser!');
//Verificăm să vedem dacă comentariilor sunt pentru persoane publice sau doar pentru cele logate
if(post_password_required()){
echo(' Lista de comentarii este destinta doar persoanelor logate! Creaţivă un cont, dacă nu aveţi. ');
return; } ?>
<div id="comments">
<h3><?php comments_number('No comments','1 comments','% comments');?></h3>
<?php if(have_comments()):?>
<?php wp_list_comments('avatar_size=64&type=comment');?>
<?php if($wp_query->max_num_pages>1):?>
<?php previous_comments_links();?>
<?php next_comments_links();?>
<?php endif;?>
<?php endif;?>
<?php if(comments_open()):?>
<div id="respond">
<h3>Leave a response:</h3>
<form action="<?php echo get_option('siteurl');?>/wp-comments-post.php" method="post" id="commentform">
<fieldset>
<label for="author">Name:</label>
<input type="text" name="author" id="author" value="<?php $comment_author; ?>"/><br/>
<label for="author">E-mail:</label>
<input type="text" name="email" id="email" value="<?php $comment_author_email; ?>"/><br/>
<label for="author">Website:</label>
<input type="text" name="url" id="uel" value="<?php $comment_author_url; ?>"/><br/>
<label for="comment">Message:</label>
<textarea name="comment" id="comment" rows="" cols=""></textarea><br/>
<input type="submit" class="commentsubmit" value="Submit Comment"/>
<?php comment_id_fields();?>
<?php do_action('comment_form',$post->ID); ?>
</fieldset>
</form>
<p class="cancel"><?php cancel_comment_reply_link('Cancel Reply'); ?></p>
</div>
<?php else:?>
<h3> Comments are now closed.</h3>
<?php endif;?>
</div>
Bineînţeles, ca doriţi o altă organizare, nimeni nu vă împiedică. Eu am vrut să arăt doar funcţionalitatea unor taguri: comments_number(), have_comments(), wp_list_comments(), previous_comments_links(), next_comments_links(). Dacă aveţi neclarităţi despre aceste taguri, http://codex.wordpress.org/Function_Reference/ este răspunsul.
Acestea fiind spuse, după parcurgerea acestui tutorial, puteţi programa o temă wordpress mai uşor decât credeaţi (sau nu).
„Code is poetry”.
Hm….prea mult de lucru.Mai bine modific un template deja existent…
Articolul nu era dedicat celor care sunt comozi. 🙂
Foarte util, poate imi voi transforma psd-ul facut de mine in o tema de wordpress cand , daca o gasesc ceva timp
eu cred ca e scris destul de bine, incat sa poata ajuta si unul care nu are cine stie ce cunostinte. ideea de baza este mai sus. dupa asta, cu putina munca si vointa poti face o tema personalizata pentru blogul tau.
Eu zic ca sunt destule teme bune unele si cu bani incat sa nu fi nevoie sa scrii una de la 0.
Daca tu vei dori sa faci teme WordPress pentru a castiga bani ce vei face? Vei cumpara temele premium?
foarte interesant articolul zic eu. Am sa ma documentez mai in detalii pentru ca vreau sa imi creez singur temele pentru siteurile pe wordpress pe care le detin, iar pe viitor nu scot din plan nici vanzarea lor contra cost bine inteles. numai bine ! ❓ 😉
Deja mi se arata mici tutoriale ca sa incep afacerea mea 🙂
….. e bine sa faci un template de la zero si sa-l faci in asa fel incat sa il poti vinde pe themeforest.net … iti da 50% din fiecare vanzare… stiu un prieten din vienna care face 50.000 Euro pe luna… se castiga mai bine din vanzari decat sa programezi pentru firme sau sa faci Design 😀
Foarte util Articolul, chiar acuma am inceput sa fac un template de la zero…
Am si eu o problema.va rog daca ma puteti ajuta!cum fac sa imi apara site-ul http://www.viatabuna.ro in 2 coloane(vezi exemplu).vreau sa-mi apara frumos ,aranjat in motoarele de cautare.ce am omis.astun raspus .multumesc!
(exemplu https://www.google.ro/#hl=ro&gs_nf=1&pq=viata%20libera&cp=6&gs_id=6a&xhr=t&q=viatabrailei.ro&pf=p&sclient=psy-ab&oq=viatab&aq=0&aqi=g2g-s1g1&aql=&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&fp=f2b05101eb94106e) in monentul cand caut pe google…?imi apare una sub alta(articole,pagini,etc)
un tutorial foarte bun,am gasit in engleza destule dar in limba romana sunt o raritate…dupa un astfel de tutorial in limba en am reusit sa fac o tema…
Foarte frumos tutorialul, multumesc.
Cateva teme WordPress facute de mine 😀
http://sirshadow.blog.com/2012/05/07/12-teme-noi-wordpress/
Un articol interesant, o dovadă că „se poate”, dar comparând facilitățile unei astfel de teme cu una premium de pe YOOtheme, WooThemes, șamd parcă nu vorbim de aceleași lucruri. Sigur, rămâi cu mândria de a avea o temă 100% originală.
In momentul in care ajungi sa iti construiesti propriile teme WordPress, facilitatile uneia premium devin o chestie de timp. Spre exemplu eu am ajuns sa-mi faca propriile teme premium in functie de functionalitatile de care am nevoie.
Alexxx, temele facute cu Artisteer nu intra in categoria „teme facute de mine”.
Multumesc tare mult 🙂 !
Sunt incepator in WordPress. Stiu sa-l instalez sa imi incarc o tema si sa o modific din panoul de administrare. Ideea este ca as vrea mai mult de o tema oricat de premium ar fi ea. Am si alte necesitati. Deci vreau sa o modific.
Un exemplu ar fi in cazul in care o tema „cumparata” are un bug sau nu permite un meniu cu submeniuri derulante. Unde trebuie sa incep modificarea? Care sunt fisierele de obicei care tin de stil? Stiu o sa vina un destept sa-mi spuna daca am auzit de css, insa nu cred ca e chiar asa de simplu. Sunt obisnuit sa editez paginile html in notepad++ si sa utilizez secvente de cod din diverse teme care imi plac. Cum pot face acest lucru in temele WordPress?