Ok, perfecto. Aquí van las instrucciones:
1. En library/css/, crea una nueva hoja de estilos (le vamos a poner custom.css) y pega este código adentro:
/* START Custom Changes */
.featured-post{
height:380px!important;
overflow:hidden!important;
}
.featured-post a img{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 8s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 8s;
-ms-transition-property: -ms-transform;
-ms-transition-duration: 8s;
-o-transition-property: -o-transform;
-o-transition-duration: 8s;
transition-property: transform;
transition-duration: 8s;
/* slide 1 */
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
.featured-post .slide-2 a img{
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
.featured-post .slide-3 img{
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
.featured-post .slide-4 a img{
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
}
.featured-post .slide-5 a img{
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
.featured-post .slide-6 a img{
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
.current img{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
/* END Custom Changes */
2. En js/, crea un nuevo script (llamado custom.js), y pega este código adentro:
/* CUSTOM SCRIPTS */
var jqu = jQuery.noConflict();
jqu( function () {
/* Remove a class from the body tag if JavaScript is enabled */
jqu( 'body' ).removeClass( 'no-js' );
/* Masonry */
var $container = jqu( '.hfeed-more');
var width = $container.width();
$container.imagesLoaded( function() {
$container.masonry( {
temSelector: '.hentry',
columnWidth: width * 0.4787234042553191,
gutterWidth: width * 0.0425531914893617,
isResizable: true,
} );
} );
/* Cycle */
jqu( '#featured-content' ).cycle( {
slideExpr: '.featured-post',
fx: 'fade',
speed: 500,
timeout: slider_settings.timeout,
cleartypeNoBg: true,
pager: '#slide-thumbs',
slideResize: true,
containerResize: false,
fit: 1,
prev: '#slider-prev',
next: '#slider-next',
pagerAnchorBuilder: function( idx, slide ) {
// return selector string for existing anchor
return '#slide-thumbs li:eq(' + idx + ') a';
},
before: function(){
jqu(this).siblings('.featured-post.current').removeClass('current');
},
after: function(){
jqu(this).addClass('current');
}
} );
/* FitVids */
jqu( ".entry-content" ).fitVids();
} );
jqu(window).load(function() {
//jqu('.featured-post > a').wrap('<div class="feat-img-wrap" />');
var i = 2;
jqu('.featured-post > a').not(":first").each(function(){
jqu(this).wrap('<div class="slide-'+i+'" />');
++i;
});
});
3. En library/functions/, crea un archivo llamado user-functions.php, y pega el siguiente código adentro:
<?php
function v10_custom_scripts() {
/* Registro de estilos */
wp_deregister_script('oxygen_footer_scripts');
wp_register_script('v10_custom_js', get_template_directory_uri() . '/js/custom.js', array( 'jquery', 'oxygen_imagesloaded', 'oxygen_masonry', 'oxygen_cycle', 'oxygen_fancybox', 'oxygen_fitvids' ), '', true );
wp_register_style('v10_custom_css', get_template_directory_uri() . '/library/css/custom.css', array(), '', 'all');
/* Llamado de estilos */
wp_enqueue_script('v10_custom_js');
wp_enqueue_style('v10_custom_css');
}
add_action('wp_enqueue_scripts', 'v10_custom_scripts');
4. Abre el archivo functions.php dentro del directorio principal del tema, y pega el código siguiente justo antes de la etiqueta de cierre de PHP (?>):
require_once('library/functions/user-functions.php');
Guarda todos los cambios. Con eso ya debería estar para tu localhost. Para implementarlo online, es sólo cuestión de subir los archivos modificados y los nuevos.
Cuando logres implementarlo, avísame y te pasaré algunos consejos sobre cómo usarlo y personalizarlo.
