Posts Tagged ‘WordPress’

« Older Entries

Improve page/post indexes’ accessibility

Saturday, February 27th, 2010

This is just and addendum to a previous tip about in-page anchors: I don’t know if anyone noticed, but I’ve made some little changes to those indexes.

There’s no more to add, but some hints to make the headings more accessible: I’m trying to get those fucking on , too — and it isn’t “so” easy.

First of all, I made the menus’ layout closer to : it depends on how you stylized them via , so I can only suggest you to have a look at the example (just in the upper-right side of the page).

As you might notice, chose to handle the show/hide toggle link… while I’m preferring jQuery instead. You don’t have to make any change there.

I changed other 2 things you could find useful: the 1st implies to use slugs to replace the existing anchors’ IDs. My previous post suggested as follows:

<h3 id="chapter-1">Chapter 1</h3>
<h3 id="chapter-2">Chapter 2</h3>
<h3 id="chapter-3">Chapter 3</h3>

To be clearer, the above IDs used the same semantic prefix – in these cases, chapter- – with ascending integers to differentiate the anchors. Here’s what you should have after modifying them:

<h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet</h3>
<h3 id="ut-wisi-enim-ad-minim-veniam">Ut wisi enim ad minim veniam</h3>
<h3 id="typi-non-habent-claritatem-insitam">Typi non habent claritatem insitam</h3>

I really hope that it helps with the automatic ‘ creation: otherwise, it’s even preferable. Of course, remember to change the anchors accordingly.

The 2nd point I considered is “optional” and lots of people discourage its use: anyway – if you haven’t them elsewhere on the same page – you could add accesskeys to the links.

<div id="toc">
<h4 id="toc-label">Index </h4>
<ol id="toc-toggle">
<li><a href="#lorem-ipsum-dolor-sit-amet" accesskey="1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#ut-wisi-enim-ad-minim-veniam" accesskey="2">Ut wisi enim ad minim veniam</a></li>
<li><a href="#typi-non-habent-claritatem-insitam" accesskey="3">Typi non habent claritatem insitam</a></li>
</ol>
</div>

Some browsers could override them by default, but they won’t hurt: just make sure you aren’t using the same accesskey for two or more different links.

Another thing: looking at the Jeff Starr’s blog (a very useful resource you must read) I noticed anchors to go back to the TOC in plain headings. Those are especially useful to avoid mouse scrolling.

<h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet <a href="#toc" rel="toc">↑</a></h3>

I suggest you to maintain the rel="toc" in the end of the anchor, because it’s a standard reference. Optionally, it’s possible to handle the link with jQuery to get a better scroll to the TOC — I’ll explain how later.

That’s it for now: feel free to post any questions and/or suggestions in the comments (now open to public guests). For those who cares, I didn’t finish this blog’s adoption yet.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

BuddyPress 1.2 is out: isn’t for all, nor for me

Sunday, February 21st, 2010

BuddyPressSo, is finally ready to work on standard installations: the latest version fits both WordPress and 2.9.1+ (starting from version 3.0, WordPressµ will be integrated directly in the main core).

Some people could mind to install it immediately, but even if BuddyPress is fucking awesome it doesn’t help for personal blogs and small sites: it focuses communities.

I mean, if you just want to add social networks integration on your own blog – such as , and/or logins – you don’t need BuddyPress at all.

I don’t like plugins much, but they’re better than BuddyPress for this purpose: of course, I prefer some additional lines of code to manually provide the same features.

Speaking about BuddyPress itself, Andy Peatling (the British creator of this platform I met last year in Milano) yet announced this availability at the Italian in May.

Apart from these advices, BuddyPress is very useful for running community-based projects: I’ll suggest it for my university too, if only its ICT administrators aren’t so stupid.

Tags: , , , , , , , , ,
Posted in Article | Comments Off

WordPress.com censored an Italian post on advertising

Monday, February 15th, 2010

John GolfI really dislike what recently happened on : one of my friends got her blog (and its relative account) suspended for what she wrote about a ’s advertising campaign.

Now, the blog has been republished without that post – still available from the ’s cache, but I won’t link it here – and the account restored.

Preventing someone who could ask for it, the image on the left would have been copyrighted by the John Ashfield’s company for this year too (even if the campaign was started in 2008): you can find the same credit on the picture’s data.

This blog has been archived or suspended for a violation of our Terms of Service.

The above message appears insted of Arianna’s blog until it came back online without the “indicted” article: it was written in Italian, but I assure that it didn’t contain any offenses. Just some critics on the ’s ads.

If that was enough to censor an entire blog for a few hours and to get a post removed… should have encountered a unconceivable error.

I don’t care about John Ashfield internals: I presume that someone asked for it, but Automattic hadn’t any right to do so. Unless they wanted to preserve that company’s public imagine. Fail.

Tags: , , , , , , , , ,
Posted in Article | Comments Off

Share on Google Buzz without plugins for WordPress

Sunday, February 14th, 2010

I’ve already talked about and web sites integration with : now it’s time to implement a sharing link on . It’s really quick and simple.

It seems that someone created a plugin to do so, but isn’t really necessary: Buzz uses to share links and you don’t need anything else, but its .

Let’s see how the should be constructed: the snippet below must be inside — you may always change the functions to get it working outside too.

<a href="http://www.google.com/reader/link?url=<?php urlencode ( the_permalink ( ) ); ?>&title=<?php htmlentities ( the_title ( ) ); ?>&srcURL=<?php bloginfo ( 'url' ); ?>/" rel="nofollow">Share with Google Buzz</a>

That’s it. Of course, the rel isn’t mandatory and you can replace the link’s text with whatever you want: I chose Share with Google Buzz because I found this in the Picasa’s documentation for Buzz.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

Why scheduling posts in the past

Monday, February 8th, 2010

I noticed this by chance: scheduling posts in the past is the fastest way to ping them across services. Feeds update immediately, while publishing live and/or in the future requires some minutes.

I don’t think that this applies just for , because the main advantages come from : it notifies faster with the ’s service — in the form of http://goo.gl/fb/foo.

I didn’t notice any affection for the ’s notes (I use to notify my fan pages), but I’m pretty sure it works for too.

Just “pretty”, because I’m still waiting for this blog to be reviewed as needed by the new claiming method. I don’t like it at all… anyway, you only need to schedule your post some minutes before.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

Removing /category from WordPress URLs

Monday, February 8th, 2010

WordPressAs you may noticed on this blog too, continues to show /category if you got rid of it from settings: this is caused by wp_list_categories(); and you can’t avoid this actually.

Elsewhere on my blog I use different functions, but I opt for that in the sidebar: I really hate this issue… luckily, there’s a quick solution.

Assuming you’re on – the most used way to get fancy s – with enabled, you can use to fix it.

RewriteRule ^category/(.+)$ http://domain.ext/$1 [L,NC,R=301]

This must be inserted before the WordPress’ standard rules: remember to replace the URL with your own domain. It’s case-insensitive and handles a redirection.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

Differences between SimplePie and SimpleXMLElement

Friday, February 5th, 2010

SimplePieIf you need to import external feeds on your web site you have many ways to choose from: IMHO there are just 2 of them that are really interesting.

The 1st method – working on all platforms – is a function to parse documents: called SimpleXMLElement, lets you to manually select elements in an array.

I used it in the past and I’ll explain why I changed my mind recently: if you want to take the maximum control of the output and you haven’t a -powered blog, you could easily choose this way.

Here’s how it works in details: below is just an example — you can change elements following this guidelines.

<?php
$count = 1;
$feed = file_get_contents ( 'http://domain.ext/path/to/feed' );
$rss = new SimpleXmlElement ( $feed );
if ( $rss->channel->item && ( $rss->channel->item != '' ) ) {
foreach ( ( $rss->channel->item) as $item ) {
if ( $count<=5 ) {
echo '<a href="' . $item->link . '">' . $item->title . '</a>';
$count++;
} else {
break;
}
}
} else {
echo 'No items to display.';
}
?>

As you may notice, I included $count to limit the number of displayed items: this is particularly useful for sidebar’s lists and/or if you can’t choose the items number otherwise.

If you don’t need this, just remove lines 2, 7, 9 and 13. The 2nd method to do the same is via : the library is actually used by WordPress — so you don’t need anything else, if you’re on it.

Of course, you can install SimplePie separately with every or, plain PHP site:

<?php
include_once ( ABSPATH . WPINC . '/feed.php' );
$rss = fetch_feed ( 'http://domain.ext/path/to/feed');
$count = $rss->get_item_quantity ( 5 );
$items = $rss->get_items ( 0, $count );
if ( $count==0 ) {
echo 'No items to display.';
} else {
foreach ( $items as $item ) {
?>
<a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a>
<?php
}
}
?>

The code length is quite the same for both the ways, but I think that SimplePie is preferable: line 2 of the above example is only required by WordPress (you need to change it accordingly on other platforms).

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

Learn FeedBurner’s feed picture building from WordPress.com

Tuesday, February 2nd, 2010

WordPressSome weeks ago I wrote about picture building for : this time I’d like to speak about : it’s possible to select a remote image to show on your feed too.

Unlike the previous post, the best example comes from : it exceeds the maximum recommended width for feeds, but it looks cool.

My interest starts with a Jonathan Snook’s post on how to add logos to the feeds: it could be useful to identify syndications with a custom picture.

I used to create a rounded-corner picture for this purpose, but you may use whatever you want — giving it the form you like most. You can see a preview of what I mean on my own feed.

Which are the best dimensions? ↑

It doesn’t really matter if you’re on FeedBurner or not: feeds allow 144×400 pixels images (but WordPress.com’s is 224×58 and it’s good for me).

Default values are 81px for width and 33px for height, like the smallest standard banner. It’s not enough for logos: the English WordPress.com’s official blog shows why.

What about adding it via FeedBurner? ↑

This is the best way to do so, especially because you don’t need to make changes on the source code: it’s enough to upload the created image anywhere on the web (of course, your own hosting is preferable).

Going to Optimize → Feed Image Burner you should provide its absolute address — selecting Specify custom image in the Image Source’s drop down menu.

Just notice that the Link field is completely useless if you don’t make use of the BrowserFriendly function (and I don’t suggest you to do so): on the contrary, the Title field should contain the blog’s title as an alternate text if the image isn’t reachable.

The BrowserFriendly view forces a standard, smaller picture because it has to fit the selected layout: I don’t like it because there’s no way to customize the theme.

What about adding it directly in the source code? ↑

If you don’t use FeedBurner (and I’d really like to understand why), you could always modify the feed source code: this means that you have to manually keep track of your readers and in most cases it needs a plugin.

I dislike both, but it’s up to you: have a look at the official reference for Atom and at the relative alternative for RSS before continuing. Keep in mind that editing the sources depends on the you’re on.

As you can imagine, the markup is different for each mentioned format. Here’s how to include your logo on an Atom feed — that’s simpler:

<logo>http://domain.ext/path/to/image.ext</logo>

The RSS way is a bit more complex because it allows more attributes: I think you’ll need both, at least. You may want to include all the optional fields too:

<image>
<url>http://domain.ext/path/to/image.ext</url>
<title>foo</title>
<link>http://domain.ext/</link>
</image>

Beware that in this case url stands for the full image address, while link points to your web site. Both need to be included before the item element.

I chose to create a transparent , but I don’t think that it really matters: 224×58 pictures could cause problems with portable devices… anyway, I have an alternate solution for them.

Tags: , , , , , , , , ,
Posted in Tutorial | Comments Off

Why do I write in English (although I’m not able to)?

Tuesday, February 2nd, 2010

I know that my English really sucks: I make lots of mistakes writing posts on this blog, but I won’t go back writing in Italian anymore. Explaining “why” is quite simple: the 99% of Italian blogs is crap… talking about nothing interesting at all.

I don’t care about Italian translation of foreign posts – as lots of them are – nor to know how many times in a journey a blogger goes to the toilet (I’m not jocking, I read this too).

Most of us is forced to write in English to get interesting feedbacks and constructive criticism: I’ll enable comments here ASAP — I’m working on styling them right now.

I feel so depressed for the Italian situation: both corporate and z-blogs are mainly focused on boring marketing or approximative humor. I don’t like to read bullshits.

Tags: , , , , , , , , ,
Posted in Article | Comments Off

A first look at Google’s Rich Snippets: People

Monday, February 1st, 2010

I spoke about the ’s twice in the past, although some of you could haven’t noticed: I mentioned them talking about — but are a form of snippet too.

If you got a multi-user blog powered by or WordPress MU (which will be integrated on the traditional WordPress’ core of the next 3.0 version) as well, I planned to release a plugin to automatically handle what I’m going to explain.

On the other hand, if you’re the only writer of your blog you could easily take advantages of the People’s snippet on : just remember to enable RDFa on your site, before.

It doesn’t matter how do you insert the needed information: for example, I used a normal page chapter instead a simple list of terms (that’s the suggested method for the posts’ footers).

I chose to use too, while helpers suggest to use it alternatively with RDFa: using both doesn’t break anything (Microformats reside in classes, RDFa relates to special attributes) — and ensures more compatibilities.

Below, the official Google’s way to embed People snippets on a page. The 1st piece of code stands for the Microformats’ method:

<div class="vcard">
<div class="fn">Federico Moretti</div>
<span class="nickname">fedmor</span>
<span class="url">http://federicomoretti.name/</span>
<span class="org">b:G | studio</span>
<span class="adr">
<span class="locality">Varese</span>
</span>
<span class="title">Publicist</span>
</div>

Of course, you could add other informations using the Microformats’ syntax — like additional-name and so on. Here’s how the same looks with RDFa:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span property="v:name">Federico Moretti</span>
<span property="v:nickname">fedmor</span>
<span property="v:url">http://federicomoretti.name/</span>
<span property="v:affiliation">b:G | studio</span>
<span rel="v:address">
<span property="v:locality">Varese</span>
</span>
<span property="v:title">Publicist</span>
</div>

As you may notice, the number of elements doesn’t change: my implementation includes other optional fields, but this is enough to get started.

Merging the two previous examples in a single portion of code is very simple and you could easily customize them to fit your needs:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person" class="vcard">
<span property="v:name" class="fn">Federico Moretti</span>
<span property="v:nickname" class="nickname">fedmor</span>
<span property="v:url" class="url">http://federicomoretti.name/</span>
<span property="v:affiliation" class="org">b:G | studio</span>
<span rel="v:address" class="adr">
<span property="v:locality" class="locality">Varese</span>
</span>
<span property="v:title" class="title">Publicist</span>
</div>

It isn’t important what kind of element are you using in the place of span: just remember to assign the proper values in a dedicated container.

Tags: , , , , , , , , ,
Posted in Tutorial | Comments Off

« Older Entries