Encara que ja hem vist que fer un tema de WordPress des de zero no és molt complicat, de vegades, no tindrem temps de fer-ho o senzillament pot ser mase feina per un projecte ràpid. Una alternativa és agafar un Tema Base o Skeleton i transformar-lo per les nostres necessitats.

Avui mirarem un tema Base que jo mateix he utilitzat per alguns projectes. El podeu descarregar en aquest enllaç.

[download id=”1006″]

base-theme-preview

Característiques Tema Base

  • Simple i fàcil d’estendre
  • Responsive
  • Inclou estructura bàsica de columnes
  • Botó animat per tornar a la capçalera
  • Menús de capçalera i de peu perzonalitzats
  • Paginació (pàgina 1, 2, 3, 4 .. de navegació)
  • Suporta temes fills, +info

Documentació

Plantilles

La llista següent explica tots els arxius de plantilla a la carpeta del tema:

  • index.php = plantilla utilitzada en archive, Tag, search, etc…
  • single.php = plantilla que s’utilitza al single
  • page.php = plantilla que s’utilitza a la pàgina estàtica
  • search.php = plantilla que s’utilitza en la pàgina de resultats de cerca
  • 404.php = plantilla utilitzada en pàgina d’error 404
  • header.php = part de la capçalera
  • footer.php = part del peu de pàgina
  • sidebar.php = part de la barra lateral
  • includes/loop.php = la part referent al loop article class=”post”
  • includes/post-nav.php = anterior / següent enllaç per les entrades (inclòs al single.php)
  • includes/pagination.php = paginació utilitzada en les pàgines d’índex (la funció està en functions.php)
  • comments.php = formulari de comentaris (la funció està functions.php)
  • functions.php = conté les funcions de temes com ara: giny de la barra lateral, el registre de menú, paginació, etc
  • style.css = tema style.css
  • els mitjans de comunicació-queries.css = disseny de resposta CSS
  • js/respond.js = afegir compatibilitat amb consultes multimèdia per a Internet Explorer
  • js/theme.script.js = jQuery funcions utilitzades al tema

Videos Responsive

Hi ha un filtre a l’arxiu functions.php (themify_add_video_wmode_transparent) per embolicar el video incrustat amb div class=”post-video”. Aquest filtre només s’aplica al vídeo incorporat a través del contingut de l’entrada usant el mètode d’URL de vídeo.

Navegació mòbil

La funció jQuery de navegació mòbil es troba a l’arxiu ‘js / theme.script.js’ i l’estil a media-queries.css.

Columnes

L’estructura de columnes bàsica (col4-1, col3-1, col2-1) està inclòsa en el tema. La classe .first només es requereix en la primera columna per separar i netejar.

<div class="col4-1 first"> 4-1 </div>
<div class="col4-1"> 4-1 </div>
<div class="col4-1"> 4-1 </div>
<div class="col4-1"> 4-1 </div>

<div class="col3-1 first"> 3-1 </div>
<div class="col3-1"> 3-1 </div> 
<div class="col3-1"> 3-1 </div> 
<div class="col2-1 first"> 2-1 
</div> <div class="col2-1"> 2-1 

</div> <div class="col2-1 first"> 2-1 </div> 
<div class="col4-1"> 4-1 </div> 
<div class="col4-1"> 4-1 </div>


Com afegir Més barres laterals

Si necessitem registrar més barres laterals, copiar i enganxar la funció register_sidebar() amb el codi següent (cal canviar el nom i la id del sidebar):

if ( function_exists('register_sidebar') ) {
		register_sidebar(array(
			'name' => 'Sidebar',
			'id' => 'sidebar',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h4 class="widgettitle">',
			'after_title' => '</h4>',
		));
		register_sidebar(array(
			'name' => 'Custom Sidebar',
			'id' => 'custom-sidebar',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h4 class="widgettitle">',
			'after_title' => '</h4>',
		));
	}

Després, a l’arxiu de plantilla (per exemple sidebar.php, header.php, footer.php), cal cridar a la barra lateral amb:

<?php dynamic_sidebar( 'custom-sidebar' ); ?>

Com afegir més menús

Per afegir més menís, copieu i enganxeu el codi de la funció register_nav_menus().


function_exists('register_nav_menus')) {
		register_nav_menus( array(
			'main-nav' => __( 'Main Navigation', 'themify' ),
			'footer-nav' => __( 'Footer Navigation', 'themify' ),
			'custom-nav' => __( 'Custom Navigation', 'themify' ),
		) );
	}

Després s’ha d’especificar a quin arxiu de la plantilla volem mostrar el menú. El paràmetre theme_location ha de coincidir amb el ID de la funció register_nav_menus() del pas anterior. Podem canviar el contenidor del menú, el id, la classe com nosaltres vulguem.

<?php wp_nav_menu(
 	array(
 	'container' => 'nav',
	'container_id' => 'custom-nav',
 	'items_wrap' => '<ul id="menu-top">%3$s</ul>',
 	'theme_location' => 'custom-nav'
 )); ?>

Com agefir més Scripts

Per afegir javascripts o fulls d’estil personalitzades, pot utilitzar el següent codi en header.php o footer.php:

<script src="<?php echo get_template_directory_uri(); ?>/js/custom_script.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/media-queries.css">

Com afegir tamanys d’imatge personalitzats

Com ja sabem la funció the_post_thumbnail que ens ofereix la possibilitat de gestionar miniatures de mida personalitzada sense necessitat de plugins. Per tant, si volem afegir tamanys d’imatge personalitzats editarem el functions.php i afegirem:

<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'custom-thumb', width, height, true );
?>

I per mostrar la imatge a l’arxiu que vulguem:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'custom-thumb' ); } ?>

Si volem que la imatge destacada sigui un enllaç a lentrada a la que partany:

<a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'custom-thumb' ); } ?></a>

Si volem que l’enllaç vagi a la imatge destaca en si:


<?php $full_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');    ?>
					
<a href="<?php echo $full_image[0]; ?>" ><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'custom-thumb' ); } ?></a>		

I fins aquí hem arribat!