I am curious with the ongoing discussion on LSI in search, how Googlebot responds to using the Datalist and it’s DFN definition element on page. Maybe it helps if we provide the search engines with more on page context. So I built a Quick Glossary WordPress plugin. It puts the single post tags with description as a Glossary in the sidebar and uses jQuery to shorten the displayed text and add a [more] link, so visitors can choose to read a full description but it does not dominate the page, whilst Googlebot and Slurp get the full context of the content according to my tag definitions.
-
<dl>
-
<dt>
-
<dfn>PIYF</dfn>
-
</dt>
-
<dd>
-
Acronym : Panda Is Your Friend
-
</dd>
-
</dl>
First the basic widget code, I’ll call it Quick Glossary :
-
-
function widget_QuickGlossary($args) {
-
extract($args);
-
-
//preparation : scope, css, javascript
-
-
echo $before_widget;
-
echo $before_title . 'Quick Glossary' . $after_title;
-
-
//output
-
-
echo $after_widget;
-
}
-
-
register_sidebar_widget('Quick Glossary', 'widget_QuickGlossary');
the preparation
scope
I want my widget to only show on single posts, and only if the post has tags :
-
if(!is_single()) return
-
global $post;
-
$tags = get_the_tags($post->ID);
-
if(!$tags) return;
layout
I want a double column layout with the term (tag) linking to the tag page, and the definition itself only part visible, with a fancy [more] link like on Facebook.
First some css for a double column data list :
-
<style>
-
dl {
-
width:100%;
-
overflow:hidden;
-
}
-
dt {
-
float:left;
-
width:50%; /* adjust the width; make sure the total of both is 100% */
-
}
-
dd {
-
float:left;
-
width:50%; /* adjust the width; make sure the total of both is 100% */
-
}
-
</style>
and then some jQuery : I want the whole definition on the page but only part visible to the reader. Viralpatel list a nice cut and paste jQuery snippet. That requires I add a class “more” to the DD element, and add some css for it and for the link :
-
<style>
-
.morecontent span {
-
display: none;
-
}
-
a.morelink {
-
text-decoration:none;
-
outline: none;
-
}
-
</style>
I put the extra CSS script in it’s own function :
-
function quickGlossary_scripts() {
-
//css for doyble column
-
//css hooks for jquery
-
}
…and make sur the jquery script only loads when thr query is loaded :
-
add_action('init', 'register_QuickGlossary_script');
-
add_action('wp_footer', 'print_QuickGlossary_script');
-
-
function register_QuickGlossary_script() {
-
wp_register_script('QuickGlossary', plugins_url('QuickGlossary.js', __FILE__), array('jquery'), '1.0', true);
-
}
-
-
function print_QuickGlossary_script() {
-
global $add_QuickGlossary_script;
-
if ( ! $add_QuickGlossary_script ) return;
-
wp_print_scripts('QuickGlossary');
-
}
-
-
//nb.: requires setting the global var to true in the widget function
-
…
-
global $add_QuickGlossary_script;
-
$add_QuickGlossary_script = true;
-
…
…and proceed to generating the output, the data list :
the output
Straight forward, using DL as list container, tagname and description as list of DT DD elements, with an added class=”more” to the DD description as hook for jQuery.
-
function QuickGlossary_datalist($tags) {
-
$html = '<dl class="post_tags">';
-
foreach ($tags as $tag){
-
$tag_link = get_tag_link($tag->term_id);
-
$html .=
-
"<dt><dfn><a href='{$tag_link}' title='more articles on {$tag->name}' class='{$tag->slug}'>{$tag->name}</a></dfn></dt>
-
<dd class='more'>{$tag->description}</dd>";
-
}
-
$html .= '</dl>';
-
return $html;
-
}
You can edit your tag description under Admin-Posts-Post Tags menu.
Now my main widget function is :
-
function widget_QuickGlossary($args) {
-
extract($args);
-
-
if(!is_single()) return;
-
-
global $post;
-
$tags = get_the_tags($post->ID);
-
if(!$tags) return;
-
-
global $add_QuickGlossary_script;
-
$add_QuickGlossary_script = true;
-
-
quickGlossary_scripts();
-
-
echo $before_widget;
-
echo $before_title . 'Glossary' . $after_title;
-
-
echo QuickGlossary_datalist($tags);
-
-
echo $after_widget;
-
}
Activate the widget, drag and drop it from Admin-Appearance-Widgets menu and it is a Quick Glossary, if you want to play with it, code is overhere as zip.
