Nola sortu WordPresseko zure themea

Post honetan WordPresseko zeure themea sortzeko oinarrizko urratsak  bildu ditut.

wordpress-water

WordPresseko theme baten atala ezberdinak ulertzeko oinarrizko azpiegitura garatzea da ideia nagusia. Aurrerantzean azpiegitura sinple hori diseinu zein funtzionamendu aldetik aberasten joango gara.

Hemen ikerbitwp themea eskuragarri duzue eta orain bere artxiboaren azalpen laburra burutuko dut.

Kasu honetan Web orrialde sinple baten hurrengo HTML kodea eredutzat hartuta sortu dut themea.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"><title>ikerbitwp theme</title>
	</head>
	<body>
		<h1>Hello world. I’m ikerbitwp theme</h1>
		<p>My first paragraph.</p>
		<div>
		Visit us at <a href='http://www.ikerbit.com'><a href="http://www.ikerbit.com/">ikerbit</a></a>.
		</div>
	</body>
</html>

Lehenik eta behin, jo WordPress instalatuta dagoen “/wp-content/themes” karpetara.  “Themes” karpetan agertuko dira instalatuta dauden themeak.

Beste themeak dauden karpeta horretan gure themearen karpeta sortuko dugu,  “ikerbitwp” adibidez.

Orain, gure themearen karpeta erroan egongo diren artxiboak sortuko ditugu, kasu honetan hurrengo karpeta “/wp-content/themes/ikerbitwp”.

Erabiliko dugun HTML kodea 3 zatitan banatuko dugu. Lehendabizikoa, goiburua, header.php artxiboan garatuko dugu. Bigarrenik, edukia, index.php artxiboan eta azkenik orrialdearen oina footer.php artxiboan.

1.- screenshot.png artxiboa

Lehenik, gure themea identifikatzeko irudia lortu edo eta sortuko dugu. Irudiak 300×225 px-eko tamaina izan beharko du eta screenshot.png izenarekin gordeko dugu.

2.- index.php artxiboa

index.php artxiboa hasierako orrialdetzat ulertzen da. Azpiegitura oso sinple batekin Index.php orrialdea sortuko dugu, goiburuaren karga (header.php), HTML 3 oinarrizko lerro eta bukatzeko oina (footer.php).

2.1.- get_header() eta get_footer() etiketak

get_header() etiketa artxiboaren hasieran txertatuko dugu. Etiketa honek goiburua azalduko du header.php artxiboaren kargarekin. Aldi berean get_footer() etiketa ezarriko dugu artxiboaren amaieran oinaren edukia azaltzeko. Formatu hau eredutzat hartu daiteke aurrerantzean orrialde gehiago sortzen hasteko.

Index.php artxiboaren kodea

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Hello world. I’m ikerbitwp theme</h1>
	<p>My first paragraph.</p>
<?phpget_footer(); ?>

3.- style.css artxiboa

Orain “style.css” artxiboa leku berean sortuko dugu. Artxibo honek gure themean edukiaren estiloa azaltzeko kodea izanen du eta horretaz aparte, themearen ezaugarriak bertan dituen komentarioa ere bai.

 

style.css artxiboa

/*
Theme Name: ikerbitwp
Theme URI: http://ikerbit.com
Version: 1.0
Description: Simple base WP theme
Author: Iker Zazpe
Author URI: http://ikerbit.com
Template: ikerbitwp
Tags: wordpress, basic, theme
License URI: http://creativecommons.org/licenses/by-sa/3.0/
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
*/
/*----------------- changes start here---------*/
body {
     padding-top: 60px;
     padding-bottom: 40px;
}

4.- header.php artxiboa

Themearen karpetan header.php artxiboa sortuko dugu. Artxibo honek webguneko goiburuaren kodea dauka. Goiburu bera orrialde guztietan kargatuko dela ulertzen da kasu gehienetan.

Lehenik goiburuari dagokion HTML kodea txertatuko dugu.

4.1.- bloginfo() etiketa

CSS estiloen orrialdea kargatzeko erabiliko dugu etiketa hau. Zihurtatu hurrengo lerroa dagoela header.php artxiboan.

<link href="<?phpbloginfo('stylesheet_url');?>" rel="stylesheet">

4.2.- wp_enqueue_script() etiketa
Etiketa honek WordPressek sortzen dituen orrialdeetako JavaScript edukia ezartzeko modu segurua da.

<?php wp_enqueue_script("jquery"); ?>

4.3.- wp_head() etiketa
“wp_head()” etiketa gehitu. Pluginen bitartez Javascript eta css edukiak aldatu ahal izateko erabiltzen da etiketa hau.

<?phpwp_head(); ?>

header.php artxiboa

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>ikerbitwp theme</title>
  <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
  </head>
  <body>

5.- footer.php artxiboa
Leku berean footer.php artxiboa sortu eta wp_footer() etiketa gehituko dugu. Etiketa honek wp_head() etiketaren funtzio bezalakoa da header.php artxiboan baina kasu honetan oina kargatuko du orrialdeetan.

Etiketa gehitu Body etiketaren itxiera baino lehenago

<?php wp_footer(); ?>
</body>

footer.php artxiboa

<div>
	Visit us at <a href='http://www.ikerbit.com'>ikerbit</a>.
</div>

<?php wp_footer(); ?>

</body>
</html>

6.- home.php orrialdea
Orrialde hau themearen orrialde estatikoa izango da. Index.php artxiboa plantillatzat harturik bere eduki berarekin home.php artxiboa sortuko dugu. Orrialde hau hasierakoa izateko administrazio gunean ezartzen da hurrengo irudian azaltzen den bezala.

ikerbitwp1

Edukia honakoa izan beharko litzateke:

ikerbitwp2

7.- front-page.php orrialdea
Orrialde hau eduki dinamikoa duen hasierako orrialdetzat hartzen du WordPressek (Yourlatestposts).  Hasierako orrialde bezala ezartzeko administrazio gunera jo ondorengo irudian ikusten den bezala.

ikerbitwp3

Index.php artxiboa plantilla bezala erabilita front-page.php orrialde sortuko dugu eduki berarekin. Gero bere edukia moldatuko dugu azken post edo orrialdeak modu dinamikoan azaldu ditzan. Hasteko, titulua aldatuko dugu “POSTS” ezarriz.

<h1>Posts</h1>

7.1.- WordPresseko loop-a txertatu
WordPresseko loop-a datu basean dauden orrialdeen eta posten eduki dinamikoa aurkezten du.

Loop hau get_header() eta get_footer() etiketen artean txertatuko dugu. Kasu honetan posten titulua “the_tittle()” eta edukia “the_content()” etiketekin aurkeztuko dugu loop hau erabilita.

front-page.php orrialdea

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Posts</h1>

	<!-- Loop WordPress -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	<?php endwhile; else: ?>
		<p><?php _e('Sorry, this page does not exist.'); ?></p>
	<?php endif; ?>

<?php get_footer(); ?>

Orrialdearen edukia kodetu dugun arabera azaldu beharko litzateke  kargatzerakoan:
Posts(HTML titulua)
Loop (post bakoitza)
– Postaren titulua
– Postaren edukia

ikerbitwp4

 

Gure themearekin bukatzeko erabat beharrezkoak ez diren 3 artxibo hutsak sortuko ditugu (functions.php, sidebar.php y comments.php). Etorkizunean kodetu daitezkeenak.

8.- functions.php artxiboa
Artxibo hau ez da erabat beharrezkoa WordPressentzat eta  themearen karpeta erroan aurkitzen bada bakarrik exekutatua izanen da.
Artxibo honetan themearen funtzio bereziak kodetzen dira aldi berean WordPresseko beste funtzioekin konektatzen direnak.

9.- sidebar.php artxiboa
Artxibo honetan alboko barra eta widgeten kudeaketa burutzen da non kategorietara estekak edo eta beste edukiak ere ezarri daitezkeen.

10.- comments.php artxiboa
Artxibo honetan posten bukaeran azaltzen ohi diren erabiltzaileen komentarioak kudeatzeko funtzioak kodetzen dira.

Besterik gabe zuentzako interesgarria izatea espero dut.