Tutorial temă wordpress (2) – Definirea fișierelor

În această parte a tutorialului nostru vom defini fișierele și folder-ele ce trebuie create pentru tema noastră și vom explica rolul fiecăruia.

Ne ducem în folder-ul wp-content iar în folder-ul themes ne creem un folder ce va avea numele temei noastre. Voi numi acest folder „tema_mea”. În folder-ul tema_mea creem folder-ele

  • css – în care vom pune fișierele de stil;
  • js – în care punem fișierele cu scripturi jQuery;
  • images – în care punem imaginile ce definesc tema noastră.

În folder-ul tema_mea mai creem niște fișiere php:

  • header.php – în care se pune partea din header ce va apărea pe fiecare pagină din tema noastră;
  • footer.php – în care se pune partea de footer ce va apărea pe fiecare pagină din tema noastră;
  • index.php – care reprezintă pagina „Acasă” la blog-ul nostru și unde sunt afișate toate posturile ce le-am creat;
  • single.php – care reprezintă pagina pe care intrăm atunci când dăm click pe o postare de pe blog;
  • page.php – care reprezintă pagina din blog ( atunci când adăugăm din blog pagini ).

În folder-ul tema_mea mai creem fișierul style.css în care se află definițile din stil din tema. Fiți foarte atenți să nu faceți acest fișier în folder-ul css. Folder-ul css este pentru alte foi de stil exceptând foaia de stil principală.

Bineînțeles, în acest folder se pot construi și alte fișiere php cum ar fi:

  • search.php – care reprezintă pagina ce se afișează când am dat un search pe blog;
  • tag.php – care reprezintă pagina ce se afișează când am dat click pe un tag;
  • category.php – care reprezintă pagina ce se afișează când am dat click pe o categorie, etc.

În general, dacă nu ați creat o astfel de pagină atunci va fi afișată pagina implicită dată de wordress. Pentru a vedea mai multe informații despre aceasta intrați aici: http://codex.wordpress.org/Theme_Development

Pentru a activa tema ne ducem la Aspect -> Teme și vom vedea acolo tema noastră.

Mai departe mă voi referi puțin la fișierul header.php. În afară de partea de html ce știm să o punem ( e de preferat ca întâi că facem pentru site partea de html și apoi să tăiem bucăți pe care să le punem în fișierele ce ne trebuie ) aș vrea să adaug felul în care trebuie incluse scripturile și foile de stil.

Astfel pentru a defini o foaie de stil folosim funcția wp_enqueue_style ( nume, link ) unde nume reprezintă un nume asociat respectivei foi iar link este link-ul către respectiva pagină. E de preferată să nu folosim metoda brută pentru a descrie calea ( de genul: http://www.exemplu.ro/wp-content/theme/tema_mea/css/fisier.css ) ci să folosim funcția get_template_directory_uri () ( exemplu: get_template_directory_uri() . ‘/style.css’ ). Rețineți că funcția get_template_directory_uri () ne creează link-ul până la folder-ul temei noastre ( deci pentru fișiere ce se află în folder-ul css trebuie să scriem și folder-ul css atunci când scriem link-ul ).

Pentru a defini un fișier cu scripturi jQuery se folosește funcția wp_enqueue_script ( nume, link ) care e similară cu funcția wp_enqueue_style (nume, link).

Iarăși, pentru a vă referi în general la imaginile din folder-ul images folosiți funcția get_template_directory_uri ().

Pentru a defini stilul css al temei noastre se creează un mic antet în fișierul style.css:

/*
Theme name: Nume_tema
Theme URI: http://exemplu.ro
Author: autor
Author URI: url_autor
Description: descriere_tema
Version: versiunea
License: licenta
License URI: url_licenta
Tags: tag
*/

După acest antet se scriu definițiile de stiluri.

În fișierul index.php vrem să afișăm posturile așa că vom scrie:

<?php
if (have_posts()) {
   while (have_posts()) {
      the_post();
?>
<article>
   <h1><a title="<?php the_title ();?>" href="/?p=<?php echo get_the_ID(); ?>"><?php the_title (); ?></a></h1>
   <h2>by <?php the_author_posts_link(); ?></h2>
   <div>
      <?php echo get_the_date('d M Y'); ?>
      <?php comments_popup_link( 'No comments', '1 comment', '% comments' ); ?>
   </div>
   <?php the_content ('READ MORE'); ?>
</article>
<?php
     }
 }
?>
<aside>
    <?php get_sidebar (); ?>
</aside>
<?php get_footer(); ?>

Prima și ultima linie cred că e destul de clar și anume folosim get_header() pentru a afișa conținutul fișierului header.php și get_footer() pentru a afișa conținutul fișierul footer.php.

Folosim funcția have_posts() pentru a vedea dacă mai există post-uri iar funcția the_post() o folosim pentru a trece la următorul post.

Pentru a afișa titlul postării folosim funcția the_title(); get_the_ID () este folosit pentru a obține id-ul postării iar celelalte funcții cred că sunt destul de clare pentru ce s-au folosit (get_the_date() afișează data postării, comments_popup_link() afișează numărul de comentarii ).

Mai vedem apariția funcției get_sidebar () dar despre ea vom discuta într-o lecție viitoare.

Cam aceasta a fost lecția de azi.

Anunțuri

2 gânduri despre „Tutorial temă wordpress (2) – Definirea fișierelor

  1. Pingback: Cum sa schimbi o tema WordPress

  2. Pingback: Cum să schimbi o temă WordPress

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s