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″]
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.
[php]
<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>
[/php]
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):
[php]
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>’,
));
}
[/php]
Després, a l’arxiu de plantilla (per exemple sidebar.php, header.php, footer.php), cal cridar a la barra lateral amb:
[php]
<?php dynamic_sidebar( ‘custom-sidebar’ ); ?>
[/php]
Com afegir més menús
Per afegir més menís, copieu i enganxeu el codi de la funció register_nav_menus().
[php]
function_exists(‘register_nav_menus’)) {
register_nav_menus( array(
‘main-nav’ => __( ‘Main Navigation’, ‘themify’ ),
‘footer-nav’ => __( ‘Footer Navigation’, ‘themify’ ),
‘custom-nav’ => __( ‘Custom Navigation’, ‘themify’ ),
) );
}
[/php]
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]
<?php wp_nav_menu(
array(
‘container’ => ‘nav’,
‘container_id’ => ‘custom-nav’,
‘items_wrap’ => ‘<ul id="menu-top">%3$s</ul>’,
‘theme_location’ => ‘custom-nav’
)); ?>
[/php]
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:
[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">
[/php]
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]
<?php
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘custom-thumb’, width, height, true );
?>
[/php]
I per mostrar la imatge a l’arxiu que vulguem:
[php]
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘custom-thumb’ ); } ?>
[/php]
Si volem que la imatge destacada sigui un enllaç a lentrada a la que partany:
[php]
<a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘custom-thumb’ ); } ?></a>
[/php]
Si volem que l’enllaç vagi a la imatge destaca en si:
[php]
<?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>
[/php]
I fins aquí hem arribat!
Recent Comments