In order to complete this featured posts section in WordPress, you will need to use secondary and tertiary WordPress Loops, PHP and XHTML coding (with some light CSS), and a small piece of jQuery code for optional animations and transition effects. The overall process is quite easy, and here’s how it’s done on the average WordPress-based website:
Step 1: Placing the Featured <DIV> in the Index File
The process of adding this set of featured post tabs begins by adding a simple <div> tag to the website’s index.php template to essentially define where the box will go and to hold its place. This same <div> tag (and the ID it is given) will be used by the optional jQuery code at the end of this tutorial for those users who wish to add sliding animations to their featured posts area. For that reason, those users who are looking to turn their featured post tabs into a slider box should be mindful of the name given to this element. So, this is a pretty simple step. The <div> tag placed into the website’s index template is below:
<div id="featured-tabs">
<!-- The featured post box code will go between these tags -->
</div>
Step 2: Adding Optional “Featured Image” Code Support to an Existing WordPress Theme
The featured post tabs can either display an entry title with an entry summary underneath, or they can display a post-related image and rotate through those as users click through the tabs (or as the tabs rotate themselves using jQuery animations). This step is optional, and should only be performed by those site administrators who plan to use the featured post tabs as a way to display featured images alongside the content they’ll be highlighting. The line of code below should be placed into the “functions.php” file that accompanies the currently-selected theme. They’ll determine the size of the thumbnail images as well as the images that get displayed at full size in the content box. Here are those lines of code:
add_theme_support( 'post-thumbnails', array( 'post' ) );
add_image_size( 'large-tab-image', 600, 350, true );
add_image_size( 'small-tab-image', 60, 35, true );
In the sample above, the first line of code initiates the creation of a featured post image, while the second line defines the image’s larger size and the third line defines a smaller thumbnail that will be used to preview the image in the slider’s tabs. Again, this is only for those site administrators who are using images to highlight their posts. Those sticking to an all-text featured post tab configuration can skip this step and move on to the next one.
Step 3: Learning and Using Multiple WordPress Loops to Display Featured Content
A featured post slider must pull entry information from the database, and it must do this using a WordPress Loop. However, two Loop constructions simply cannot be placed on the same page using the standard code that pulls full-length posts from the database. In order to perform the task of a secondary WordPress Loop, the featured post slider must replace the standard Loop code with a database query that pulls information out of the database and displays it on the page. This is also done for a third loop, which will create and display clickable tabs that will take readers to a different featured post. Here’s how it’s done for the main post content or the featured post’s image.
For those readers pulling a featured image out of the database, the secondary Loop looks like this:
<?php $featuredPosts = new WP_Query(); $featuredPosts->query("showposts=5&cat=8"); while ($featuredPosts- >have_posts()) : $featuredPosts->the_post(); ?>
<div id="featured-post-number-< ?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
<?php the_post_thumbnail( 'large-tab-image' ); ?>
</a>
</div>
<?php endwhile; ?>
It’s easy to see how the query above works. Rather than use built-in WordPress code to pull information, it instead takes advantage of the software’s built-in ability to query the database and pull the same variables. When that process is complete, it can use standard constructions like the_permalink and the_title to display post information just like a regular Loop. Keeping in mind that any Loop-based variable will work in this construction, let’s look at how a non-image featured post tab would look:
<?php $featuredPosts = new WP_Query(); $featuredPosts->query("showposts=5&cat=8"); while ($featuredPosts- >have_posts()) : $featuredPosts->the_post(); ?>
<div id="featured-post-number-<?php echo $slide_id; $slide_id++;?>">
<a href="< ?php the_permalink() ?>">
<?php the_title(); ?>
<?php the_excerpt(); ?>
</a>
</div>
<?php endwhile; ?>
With these pieces of code in place, it’s now time to move on and add a third loop in order to display the clickable tabs that will allow readers to navigate between each selected entry featured in this area of the website.
Step 4: Creating the Tabbed Navigation for Featured Posts
Everything up to this point has created a wide and content-rich area to showcase a website’s featured posts, but there is not yet a way to navigate between each of the entries that are highlighted on the index page. In order to do this, a third WordPress Loop (using database queries) will be initiated; it will create a series of five tabs with optional image thumbnails for those sites using images in place of text. Here’s how the code looks:
<?php $tab_id=1; while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div id="featured-content-tab">
<a href="#featured-post-number-<?php echo $nav_id; ?>">
<? the_title(); $nav_id++;?>
<?php the_post_thumbnail( 'small-tab-image' ); ?>
//Use this line to display a featured image thumbnail, or omit the line if images are not being used.
</a>
</div>
<?php endwhile; ?>
With the tabs added right below the main featured content (either images or text), the hard work of placing the featured content into the index template itself is now complete. For those users who wish to leave the code as-is, without adding any animation, slide rotation, or transition effects, the index.php file can now be saved and uploaded to the server. For those who wish to use jQuery to enhance the appearance and “wow factor” of the featured posts box, there is one additional step that must be completed in order to include the jQuery libraries and call their attention to the featured post tabs.
Step 5: Turning a Static Featured Posts Box into a Sliding Rotator of Featured Content with AJAX
The jQuery JavaScript library is easily the most popular way to turn a regular website into one that is full of robust AJAX features. In this step of the tutorial, the website’s header will be modified in order to make use of these libraries and add some really slick effects to the featured post tabs that were just created in the previous four steps. WordPress actually includes all of the libraries a user needs, and allows their inclusion with a standard WordPress variable, which makes the process even easier than it would normally be while using other content creation and management systems.
The first part of this process involves actually calling the jQuery UI libraries from within the WordPress installation’s root directory. That’s done using three variables in the site’s <head> tag, so be ready to modify the current theme’s header.php file to add this information. Here is what will be added to the document:
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
Right below these crucial jQuery library inclusions, a simple script must be added in order to tell the libraries which part of the website to animate. In the first step of this tutorial, it was noted that the entire featured post box should be surrounded by a <div> tag with the featured-tabs ID so that the script could do its job. Now, it’ll be easy to see why. Bring the featured content area of the site to life by adding the following script to the site’s header template:
[js]
<script>
jQuery(document).ready(function($){
$("#featured-tabs").tabs({fx:{opacity: "toggle"}}).tabs("slide", 5000); });
</script>
[/js]
This script above clearly identifies #featured-tabs as the element to be animated and brought to life. This can be changed, of course, to the user’s liking, but it must match the <div> tag that encases the featured post tabs element. When this has been included, the header.php file can be saved and uploaded to the server.
Step 6: Don’t Forget to Modify the Stylesheet!
This process has added several new <div> elements and images (in some cases) that must be modified by the site’s stylesheet and made to look as slick as the rest of the site’s design. This is done using the stylesheet.css file located in the current theme’s root directory, and it should be done before the featured posts area is released to the public. Remember that all of the content is included within an <a> tag, so it is as important to style the actual link as it is to style the content that can be clicked on by the reader.
Step 7: Debug, Debug, Debug
With the coding complete, and with all of the template’s files saved and uploaded to the server, it’s time to test the new featured post tabs for any bugs or display errors that might have to be fixed by modifying the XHTML or CSS. Remember that the listing of featured content is only useful when its fully functioning and user-friendly; also remember that it should easily blend into the existing design and not cause users to totally disrupt their reading of the website’s latest additions. Finally, be sure to check that the jQuery code does not rotate the text or images too quickly, as this will frustrate users who can’t seem to finish reading before the next tab is presented automatically.
When these considerations have been fully addressed, the process is complete and users will now be able to quickly access a site’s best work with a single click.
0 yorum:
Yorum Gönder