Plantilles d’entrada
Després de la classe anterior, un problema que tenim ara és que hem tingut de modificar l’arxiu single.php i, per tant, totes les entrades es veuran modificades. Per evitar això utilitzarem les plantilles d’entrada. Les plantilles d’entrada ens permeten visualitzar el contingut de les nostres entrades de diferent manera segons ens interessi.
Per defecte les plantilles d’entrada només es poden utilitzar a WordPress amb Entrades personalitzades. Si les volem utilitzar a les entrades normals necessitarem un pluguin per fer-ho. Aquest plugin es diu Custom Post Templates. Per millorar la nostre plantilla integrarem el pluguin en comptes de instal.lar-lo.
Primer descarregarem el plugin Custom post templates i el descomprimirem a la carpeta plugin del nostre tema. Fet això ja el podem inclore des de l’arxiu fuctions.php amb aquest codi:
[php]
/* INCLOU CPT PLUGIN */
include_once(‘plugin/custom-post-template/custom-post-templates.php’ );
[/php]
Com que tenim diferents arxius de single.php, de la classe anterior, ara els associarem a les entrades que corresponguin utilitzant les noves funcionalitats que ens aporta el plugin.
Primer de tot renombraren el single.php com a single-samarretes.php i ens assegurarem de tenir un arxiu anomenat single.php que tingui el següent codi:
[php]
<?php get_header(); ?>
<div id="wrapper"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entrada llistat">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_time(‘F jS, Y’) ?> | <?php the_author_posts_link(); ?>
</div><!– end of entrada –>
<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>
</div><!– end of wrapper–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]
Si ens fixem en el codi veureu que no tenim res corresponent als camps personalitzats ni de WordPress ni de ACF.
Ara començarem a utilitzar les noves funcionalitats creant la primera plantilla d’entrada. Obrirem l’arxiu single-samarretes.php i afegirem el següent codi al principi de l’arxiu abans de qualsevol tros de codi.
[php]
<?php
/*
Template Name Posts: Plantilla Samarretes
*/
?>
[/php]
Ja podem guardar guardar l’arxiu i comprovar que funciona la nostra plantilla d’entrada. Obrim qualsevol entrada i al lateral trobarem un nou selector que ens permetrà triar quina plantilla assignem a la nostra entrada.
El que farem és assignar aquesta plantilla a les entrades de samarretes i mirarem com es veuen. compareu amb una entrada normal i veureu que el format és diferent.
Per tant, per crear una plantilla d’entrada el que fa falta és instal.lar o integrar el plugin a la nostra plantilla, crear una entrada amb un nom similar a single-elnomquevulguem.php i al principi de l’arxiu posar alguna cosa semblant a :
[php]
<?php
/*
Template Name Posts: El Nom Que Vulguem
*/
?>
[/php]
Com ha exercici associeu una plantilla d’entrada per mostrar els camps personalitzats de WordPress de les entrades de producte. El codi que ha de tenir l’arxiu single-productes.php te que ser similar a:
[php]
<?php
/*
Template Name Posts: Plantilla Productes
*/
?>
<?php get_header(); ?>
<div id="wrapper"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entrada llistat">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_meta(); ?>
<p>Preu:<?php echo get_post_meta($post->ID, ‘Preu’, true); ?></p>
<p>Estoc:<?php echo get_post_meta($post->ID, ‘Estoc’, true); ?></p>
<?php the_time(‘F jS, Y’) ?> | <?php the_author_posts_link(); ?>
</div><!– end of entrada –>
<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>
</div><!– end of wrapper–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]
Plantilles de pàgina
A diferencia de les plantilles d’entrada, les plantilles de pàgina si que es poden utilitzar a WordPress sense cap plugin. Funciona exactament com ho hem estat fent amb les plantilles d’entrada.
Per començar crearem una plantilla de pàgina sense sidebar. Dupliquem el nostre arxiu page.php i el renombrem com a page-fullwidth.php. L’obrim i al inici agreguem el següent codi:
[php]
<?php
/*
Template Name: Full Width
*/
?>
[/php]
Fet això canviarem el contingut per que no tingui sidebar i agafem tota l’amplada de la web:
[php]
<div id="wrapper-full"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>
</div><!– end of wrapper-full–>
<?php get_footer(); ?>
[/php]
També haurem d’afegir una mica d’estils al final de las nostra fulla d’estils style.css:
[php]
/* PLANTILLA DE PAGINA FULL WITH */
#wrapper-full {
margin: 20px 20px 0px 20px;
float:left;
width:920px;
}
[/php]
Per comprovar que esta tot bé només hem d’obrir una de les nostres pàgines de WordPress i observar que al lateral apareix això:
Fet això ja podeu veure el resultat triant una plantilla o una altre.
Per fer una altre exemple i recordar conceptes farem una plantilla de pàgina utilitzant les Query_post. El que volem fer és mostrar a una pàgina una galeria de projectes. A més, com que ja tenim implementat el jquery posarem un efecte que ens mostri informació i un enllaç del projecte. L’efecte que volem mostrar es diu Mosaic.
Per començar descarregarem el plugin de la web i descomprimirem. Si l’obrim veurem que hi ha un exemple que ens servirà per veure com integrar-ho a WordPress.
Per simplificar les coses podeu descarregar una versió adaptada del plugin aquí:
[download id=”849″]
El descomprimirem i el posarem a dins de l’arrel del nostre tema.
Fet això, i seguint les indicacions de l’autor del plugin, modificarem el nostre header.php. Busquem:
[php]
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/scripts/themes/default/default.css" type="text/css" media="screen" />
[/php]
i afegim el següent codi just a sota:
[php]
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/mosaic/css/mosaic.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/mosaic/js/mosaic.1.0.1.js"></script>
<script type="text/javascript">
jQuery(function($){
$(‘.bar’).mosaic({
animation : ‘slide’
});
});
</script>
[/php]
Crearem una nova plantilla de pàgina page-projectes.php amb el següent codi per que WordPress ho reconeixi com una plantilla:
[php]
<?php
/*
Template Name: Els meus projectes
*/
?>
[/php]
A sota afegirem el loop per introduir el títol de la pagina i si fa falta contingut:
[php]
<?php get_header(); ?>
<div id="wrapper-full">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="descripcion"><?php the_content(); ?></div>
<?php endwhile; endif;
[/php]
Ara hja podem fer la Query de la categoria projectes-recents que serà el contingut que mostrarem.
[php]
query_posts( ‘category_name=projectes-recents’ );
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="mosaic-block bar">
<a href="<?php the_permalink() ?>" title="<?php the_title();?>" class="mosaic-overlay" >
<div class="details">
<h2><?php the_title(); ?> </h2>
<?php the_content(); ?>
</div>
</a>
<div class="mosaic-backdrop"><?php the_post_thumbnail(‘projectes-thumb’); ?></div>
</div>
<?php endwhile; endif; ?>
</div> <!– end of wrapper-full –>
<?php get_footer(); ?>
[/php]
En concret mostrarem el títol del projecte, el contingut i la imatge destacada. Com que la mida de la imatge que volem no està registrada al functions.php l’haurem de modificar i afegir aquesta línia a l’apartat corresponent:
[php]
add_image_size( ‘projectes-thumb’, 400, 250, true );
[/php]
També haurem d’afegir algunes línies a la fulla d’estils:
[css]
/* MOSAIC STYLES*/
.mosaic-block{ margin-left:-200px; margin-top:-125px; }
.details{ margin:15px 20px; }
a .details{
text-decoration:none;
color: #fff;
}
[/css]
Si la mida de les imatges no funciona, cosa que pot passar sovint, utilitzeu el plugin de WordPress Regenerate Thumbnails per regenerar les imatges.
Fet tota això podem crear una nova pàgina de wordpress, triar la plantilla que volem, guardar i veure el resultat.
Si volem canviar l’efecte de transició és bastant senzill si mirem els exemples que hem descarregat de la web. Bàsicament, haurem de modificar l’arxiu header.php i la nostra plantilla de pàgina.
Obrim el header i busquem:
[php]
<script type="text/javascript">
jQuery(function($){
$(‘.bar’).mosaic({
animation : ‘slide’
});
});
</script>
[/php]
I ho substituirem per:
[php]
<script type="text/javascript">
jQuery(function($){
$(‘.bar3’).mosaic({
animation : ‘slide’,
anchor_y : ‘top’
});
});
</script>
[/php]
Obrirem la plantilla de pàgina i buscarem:
[php]
<div class="mosaic-block bar">
[/php]
I afegirem un 3 després de bar per enllaçar amb el nou efecte. I ens quedarà:
[php]
<div class="mosaic-block bar3">
[/php]
Exercicis
Com a exercici per aquesta setmana duplicarem la plantilla page-projectes.php, li canviarem el nom a l’arxiu duplicat per page-projectesexterns.php i l’ojectiu serà modificar el codi per que l’enllaç del projecte vagi a una pàgina exterior a la web, utilitzant Advanced Custom Fields a les entrades per posar un nou camp amb l’enllaç extern.
Un altre exercic que es pot provar és crear una plantilla de pàgina (page-doblesidebar.php) que en comptes de tenir un sol sidebar en tingui un a l’esquerra i un a la dreta amb el contingut al mig. Els estils nous a utilitzar serian alguna cosa similar a:
[css]
/*Page doble sidebar*/
#wrapper-middle {
margin-top:20px;
float:left;
width:292px;
}
#sidebar-left{
float: left;
width: 280px;
padding: 40px 0 20px 54px;
}
[/css]
Podeu descarregar els arxius de la classe aquí:
[download id=”880″]
Recent Comments