Még nem érkezett válasz erre a témára

[George W.Push]

Minimum Requirements: Canvas V4.0+

Keep the Canvas Hook/Filter Reference on hand, as it will come in handy using the techniques explained below.

When you have more than 100 themes, it is expected that some users will want to port features between themes. One of the most requested is the Twitter feed that you can see in the header of the Busybee theme. In this tutorial you’ll learn how to add a Twitter feed to the Canvas header using hooks.

The final result

A Twitter feed in the Canvas header

The finished code

add_action('woo_header_inside','woo_add_twitter_header', 10);
function woo_add_twitter_header() {
?>

<div id="twitter_header">
 <ul id="twitter_update_list_header"><li></li></ul>
 <?php echo woo_twitter_script('header', 'woothemes', 1); ?>
 <div class="fix"></div>
</div>

<?php
} // End woo_add_twitter_header()

This code would be placed in your Canvas or child theme’s “functions.php” file.

What the code does

1. Instruct the “woo_header_inside” hook to look for and execute the “woo_add_twitter_header()” function.
2. Setup a wrapping DIV tag with an ID of “twitter_header” and the necessary markup for the Twitter script. The PHP code outputs the Twitter feed for the username woothemes (replace with yours).

If the use of the “woo_header_inside” action hook is confusing, please see our tutorial on using hooks and filters in Canvas.

Lastly, the CSS and the Twitter bird image

If you test the code right now, you should see the Twitter feed in your header above your logo. We don’t want it there so we must add some CSS to the “custom.css” file.

#twitter_header { float: right; padding-left:60px; background:url(images/twitter_bird.png) no-repeat left center; }
#twitter_header a.time { display:block; }

The CSS above adds the Twitter bird image as background to the left of your “twitter_header” DIV and also some padding or the image would be under your text. The last line moves the time to a new line.

You can grab the Twitter bird HERE. Add it to your theme “images” folder or, alternatively, replace “images/twitter_bird.png” with the full url to the image (example: http://your-site.com/twitter_bird.png).

A teljes bejegyzés elolvasása