Therefore, if it's free for jQuery and WordPress, and also if we eliminate the installation of a plugin in WordPress, with consequent savings in resources , why not do it ourselves?, that was my thought when I installed it on my blog, and with this, I invite you all to decubráis how easy it is and and I feel encouraged to install it manually , following the guidelines below step to tell you.
The first thing we do is to load jQuery in our theme, for which we have two options:
Always use the latest version of jQuery through an html link
Download the latest version of jQuery and deposit it in a theme folder
For the first case , we have to do is place the following lines of code in our file funtions.php
function mimetodo()
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
wp_enqueue_script('jquery');
}
}
add_action('init', 'mimetodo');
In the second case , we must download the jQuery JavaScript file from this link , and advise you to use the minimized version to save space and improve the load time of the page. The downloaded file, which at the time of writing this post would jquery-1.8.1.min.js, eg place it in a folder called scripts , so that if our song is called temaPrueba , take the following path / wp -content/themes/temaPrueba/scripts/jquery-1.8.1.min.js . In this case, the code needs to be implemented in the functions.php file , would be:
function mimetodo() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '/wp-content/themes/temaPrueba/scripts/jquery-1.8.1.min.js');
wp_enqueue_script( 'jquery' );
}
}
add_action('init', 'mimetodo');
As can be seen, in the one case as in the other, we have a conditional, so that load jQuery, only when we are not in the administration area. This is because jQuery, and is installed by default with Worpress burden to the administration area, and consequently as the version we carry ourselves and the WordPress default having possibly be different, this distinction should be made to avoid potential conflicts.
Well, with this we have the foundations laid , now go to the actual installation and Nivo Slider for it first thing we must do is to unburden the jQuery plugin called Nivo Slider coming to the page that appears when click this link .
The downloaded file is zipped, and there will be unzipped. We must set a bit in the structure of directories and files it contains, and also in the folder called demo is an example that we can set an example to reproduce the structure and formation of the necessary code in the sheet that we are creating. For now, what we have to do is copy the files jquery.nivo.slider.js and jquery.nivo.slider.pack.js which are the javascript containing instructions for our portfolio we have called scripts , also in this folder file will nivo-slider.css , which contains the presentation code (style sheet), and also as it will copy the folder themes that appear in the document that we have fallen unzipped. remains to clarify how and dependency files directories, I leave to the left a picture of my directory structure , as I have, with an arrow indicating the necessary files from Nivo Slider, which surely will clarify much discussed in the previous paragraph. Okay, now in the file header.php theme we indicate our css files to be used to display the html page, specifically, for this I have the following instructions:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/scripts/nivo-slider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/scripts/ themes/default/default.css" media="screen" />
Also in the footer.php file I included the statement that includes the javascript file that makes the effect Nivo Slider, along with instructions for it, namely I added the following, before the label that indicates the end of the body page.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.nivo.slider.pack.js"></script>I used the function bloginfo ('template_url') of WordPress, which gives us the patch to the scripts folder. Finally what remains is to add a set of tags , which contain the images we want to show, and that should be included in place of the page you want appears (I included it in the header.php file as the image slider I appeared on the top of each page of the blog) with the following structure:
<script type="text/javascript">
$(window).load(function() {
$('#nivoslider').nivoSlider();
});
</script>
<div id="slider">With all this mounting, the effect of slider images should go , and also in a more efficient than load the plugin, which also costs us money. Well then this is it, I hope you like your work, and of course I recommend you do a safeguard of your site , before making these changes, as it should do whenever significant changes are incorporated to the website.
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoslider" class="nivoSlider">
<img src="<?php bloginfo('template_url');?>/images/cruise1.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise1.jpg" alt=""/>
<img src="<?php bloginfo('template_url');?>/images/cruise2.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise2.jpg" alt="" />
<img src="<?php bloginfo('template_url');?>/images/cruise3.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise3.jpg" alt="" data-transition="slideInLeft" />
<img src="<?php bloginfo('template_url');?>/images/cruise4.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise4.jpg" alt=""/>
<img src="<?php bloginfo('template_url');?>/images/cruise5.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise5.jpg" alt="" />
<img src="<?php bloginfo('template_url');?>/images/cruise6.jpg" data-thumb="<?php loginfo('template_url');?>/images/cruise6.jpg" alt="" data-transition="slideInLeft" />
</div>
</div>
</div>
0 comments:
Post a Comment