juust ~ php oddities » wordpress http://www.juust.org Link theory and search engine optimization Thu, 19 Jan 2012 09:39:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 QuickGlossary wordpress plugin http://www.juust.org/index.php/quickglossary-wordpress-plugin/2011/12/ http://www.juust.org/index.php/quickglossary-wordpress-plugin/2011/12/#comments Sat, 24 Dec 2011 12:41:54 +0000 admin http://www.juust.org/?p=1911 Continue reading →]]> 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.

  1. <dl>
  2.   <dt>
  3.      <dfn>PIYF</dfn>
  4.   </dt>
  5.   <dd>
  6.       Acronym : Panda Is Your Friend
  7.   </dd>
  8. </dl>

First the basic widget code, I’ll call it Quick Glossary :

  1.  
  2. function widget_QuickGlossary($args) {
  3.         extract($args);
  4.  
  5.         //preparation : scope, css, javascript
  6.        
  7.         echo $before_widget;
  8.         echo $before_title . 'Quick Glossary' . $after_title;
  9.  
  10.         //output  
  11.  
  12.         echo $after_widget;
  13. }
  14.  
  15. 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 :

  1.     if(!is_single()) return
  2.     global $post;
  3.     $tags = get_the_tags($post->ID);
  4.     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 :

  1. <style>
  2. dl {
  3.  width:100%;
  4.  overflow:hidden;
  5. }
  6. dt {
  7.  float:left;
  8.  width:50%; /* adjust the width; make sure the total of both is 100% */
  9. }
  10. dd {
  11.  float:left;
  12.  width:50%; /* adjust the width; make sure the total of both is 100% */
  13. }
  14. </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 :

  1. <style>
  2. .morecontent span {
  3.     display: none;
  4. }
  5. a.morelink {
  6.     text-decoration:none;
  7.     outline: none;
  8. }
  9. </style>

I put the extra CSS script in it’s own function :

  1. function quickGlossary_scripts() {
  2. //css for doyble column
  3. //css hooks for jquery
  4. }

…and make sur the jquery script only loads when thr query is loaded :

  1. add_action('init', 'register_QuickGlossary_script');
  2. add_action('wp_footer', 'print_QuickGlossary_script');
  3.  
  4. function register_QuickGlossary_script() {
  5.  wp_register_script('QuickGlossary', plugins_url('QuickGlossary.js', __FILE__), array('jquery'), '1.0', true);
  6. }
  7.  
  8. function print_QuickGlossary_script() {
  9.  global $add_QuickGlossary_script;
  10.   if ( ! $add_QuickGlossary_script ) return;
  11.   wp_print_scripts('QuickGlossary');
  12. }
  13.  
  14. //nb.: requires setting the global var to true in the widget function
  15. …
  16.     global $add_QuickGlossary_script;
  17.     $add_QuickGlossary_script = true;
  18. …

…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.

  1. function QuickGlossary_datalist($tags) {
  2.    $html = '<dl class="post_tags">';
  3.    foreach ($tags as $tag){
  4.  $tag_link = get_tag_link($tag->term_id);
  5.  $html .=
  6.        "<dt><dfn><a href='{$tag_link}' title='more articles on {$tag->name}' class='{$tag->slug}'>{$tag->name}</a></dfn></dt>
  7.        <dd class='more'>{$tag->description}</dd>";
  8.    }
  9.    $html .= '</dl>';
  10.    return $html;
  11. }

You can edit your tag description under Admin-Posts-Post Tags menu.

Now my main widget function is :

  1. function widget_QuickGlossary($args) {
  2.     extract($args);
  3.  
  4.     if(!is_single()) return;
  5.  
  6.     global $post;
  7.     $tags = get_the_tags($post->ID);
  8.     if(!$tags) return;
  9.  
  10.     global $add_QuickGlossary_script;
  11.     $add_QuickGlossary_script = true;
  12.  
  13.     quickGlossary_scripts();
  14.  
  15.     echo $before_widget;
  16.     echo $before_title . 'Glossary' . $after_title;
  17.  
  18.     echo QuickGlossary_datalist($tags);
  19.  
  20.     echo $after_widget;
  21. }

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.

]]> http://www.juust.org/index.php/quickglossary-wordpress-plugin/2011/12/feed/ 0 spot the bot http://www.juust.org/index.php/spot-a-bot/2009/09/ http://www.juust.org/index.php/spot-a-bot/2009/09/#comments Thu, 10 Sep 2009 09:10:25 +0000 juust http://www.juust.org/?p=837 Continue reading →]]> I have some overhead scripts fetching data that can cost a few seconds extra loading time. Having traffic trigger tasks saves me the trouble of using cron-jobs, but I don’t want to run overhead scripts with visitors or googlebot on the site. Apart from that, some routines can use a lot of resources which are wasted on some crawlers.

I actually want the crawlers to come around, so I will make an array with bots and allowed_bots. Whatever is not on the white-list gets a meager page with overhead jobs attached to it, the rest (iow visitors and the big search engines) get the standard page.

There are truckloads of bots (see crawltrack), for my purposes a few regulars will do.

  1.  
  2. //hook it into 'init', run when calling script
  3. add_action( 'init', 'spotabot' );
  4.  
  5. /**
  6.  * checks if visitor is a bot
  7.  *
  8.  * This method checks the http_user_agent string
  9.  * to see if the visitors is a non-essential bot
  10.  *
  11.  * @param void
  12.  * @return void
  13.  */
  14.  
  15. /*
  16.    if(IS_A_BAD_BOT) {}
  17. */
  18. function spotabot()
  19. {
  20.     $bot_list = array("Teoma", "betaBot", "alexa", "froogle", "Gigabot", "inktomi",
  21.     "looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory",
  22.     "Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot",
  23.     "crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp",
  24.     "msnbot", "appie", "FAST", "WebBug", "Radian6", "Spade", "ZyBorg", "rabaz",
  25.     "Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot",
  26.     "Mediapartners-Google", "Sogou web spider", "WebAlta Crawler");
  27.  
  28.     $bot_allowed = array("Googlebot", "Feedfetcher-Google", "Mediapartners-Google", "Slurp", "Baiduspider", "msnbot");
  29.  
  30.     foreach($bot_list as $bot) {
  31.         if(strpos(strtolower("x".$_SERVER['HTTP_USER_AGENT']), strtolower($bot))>0)
  32.         {
  33.             foreach($bot_allowed as $okbot) {
  34.                  if($okbot==$bot) {
  35.                     define("IS_A_BAD_BOT", false);
  36.                     return;
  37.                  }
  38.            
  39.             define("IS_A_BAD_BOT", true);
  40.             return;
  41.             }
  42.         }
  43.     }
  44.    
  45.     define("IS_A_BAD_BOT", false);
  46.     return;
  47. }

In templates and functions i can use some simple code to run stuff conditional :

  1. if (defined('IS_A_BAD_BOT')) {
  2.    if(IS_A_BAD_BOT)
  3.    {
  4.     echo "hi bot<br />";
  5.                                 run_time_consuming_overhead_tasks();
  6.                                 and_omit_the_sidebar();  
  7.    } else {
  8.     echo "hello wonderful visitor<br />";
  9.    }
  10.   }
  11. //if it is not defined it is not a bot or the function ain't present,
  12. //I am lazy and sloppy and don't want a code-break

It would be nice if WordPress built in a switch to run plugins conditional.

one related smart plugin is the chennai central plugin that sends 304 not modified headers on conditional GETs, so crawlers don’t fetch the page. That can save some bandwidth and serverload.

]]> http://www.juust.org/index.php/spot-a-bot/2009/09/feed/ 0 quick note : serp plugin beta http://www.juust.org/index.php/wordpress-serp-plugin-beta/2009/09/ http://www.juust.org/index.php/wordpress-serp-plugin-beta/2009/09/#comments Wed, 02 Sep 2009 17:47:40 +0000 juust http://www.juust.org/?p=724 Continue reading →]]> I am developing a new google serp plugin for wordpress. I developed it over the weeknd on wp2.8, it should run on anything with a ‘shutdown’ hook and jquery. I will be adding some other stuff to it over the next few weeks, but I thought I’d put a beta on the blog. If you try it, I hope it runs, send some feedback.

If you have some ideas about cool features drop me a note, I might put it in there. I was pondering on a rest service to pool sem-data and develop some competitor analysis functionality, but that is just a vague idea.

]]> http://www.juust.org/index.php/wordpress-serp-plugin-beta/2009/09/feed/ 3 wordpress : fun with pluggable classes http://www.juust.org/index.php/wordpress-fun-with-pluggable-classes/2009/07/ http://www.juust.org/index.php/wordpress-fun-with-pluggable-classes/2009/07/#comments Fri, 31 Jul 2009 10:09:26 +0000 juust http://www.juust.org/?p=685 Continue reading →]]> I was checking some idea i had about writing a small user class with an option to ‘plug in’ functions for wordpress.

This page covers most of it :
dynamically add functions to php classes @ www.gen-x-design.com. The class construct at the end of the comment thread, Martin Pietschmann’s contribution, is rather useful. This pattern revolves around importing functionality from pluggable classes and exposing it through one object instance (the ‘decorator’ pattern mentioned is mostly used for writing extended classes, different objects with the same base data and functionality, ‘views’ sort of).

I can include the file with base, import and user class into function.php, and on making a user object have it read the directory and import functions modules (or load functionality conditional based on user role/authorization).

For this example I used the wordpress options table. I write a new functions class

  1. class UserBogusPlugin extends MI_Importable
  2. {
  3.  public function the_anchor() {
  4. //user_url and user_nicename are exposed through the user class
  5. //I plug the functions class into, i can use the $this reference
  6. //as if i am writing code in the user class
  7.                 if($this->user_url<>'') {
  8.                     return '<a href="'.$this->user_url.'">'.$this->user_nicename .'</a>, ' . $this->first_name;
  9.                 }
  10. //no url, no anchor….  
  11.   return $this->user_nicename;
  12.  }
  13. }

…store the added class name in the options table…

  1. //load $arr from options table
  2. $modules = get_option('usermodules');
  3. if($modules) $usermodules = json_decode($modules);
  4. //add module
  5. $usermodules[] = 'UserBogusPlugin';
  6. //store back in options
  7. add_option('usermodules', json_encode($usermodules));

…and load the plugin classes when instantiating the user object :

  1. class User extends MI_Base
  2. {
  3.  public function __construct($ID) {
  4.             $modules = get_option('usermodules');
  5.             if($modules) {
  6.                 $usermodules = json_decode($modules);
  7.                 foreach($usermodules as $module) {
  8.                   if(class_exists($module)) $this->import(new $module);
  9.                  //or..
  10.                  //include('plugclass/'.$module.'.class.php');
  11.                  //$this->import(new $module);
  12.                 }
  13.             }
  14.             $this->ID=$ID;
  15.  }
  16. }

In the wordpress template i can use the added functionality through the user instance :

  1.       $my_user = new User($user_id);
  2.       …
  3.       echo $my_user->the_anchor();

Fun with classes :)

add. 3-8 (qed) :
a function to load a directory with plugin files, i add a header /* plugin pluginfilename */ and check the files if there is a header.

  1.        public function getPlugins()
  2.         {
  3.             $plugdir = TEMPLATEPATH .'/plug';
  4.             if ($handle = opendir($plugdir)) {
  5.                 $retval = array();
  6.                 while (false !== ($file = readdir($handle))) {
  7.                     if (($file <> ".") && ($file <> "..")) {
  8.                         $fh = fopen($plugdir.'/'.$file, 'r');
  9.                         $contents = '';
  10.                           $contents .= fread($fh, 1024);
  11.                         fclose($fh);
  12.                         if(preg_match('/lugin/', $contents))
  13.                         {   //check for header : plugin, grab pluginname
  14.                             $a = strpos($contents, 'lugin');
  15.                             $a += 6;
  16.                             $b = strpos($contents, ' ', $a);
  17.                             $plugname = substr($contents, $a, $b-$a);
  18.                             $retval[] = array($plugdir.'/'.$file, $plugname);
  19.                 }  }  }
  20.                 closedir($handle);
  21.             }
  22.             return $retval;
  23.         }
  24.  
  25.  
  26.  public function __construct($id) {
  27. //get he array with plugin files
  28.             $usermodules = $this->getPlugins();
  29.             if($usermodules) {
  30.                 foreach($usermodules as $module) {
  31.  
  32.                   //use require to load and import to add the function
  33.  
  34.                    require_once($module[0]);
  35.                    $this->import(new $module[1]);    
  36.                 }
  37.             }
  38.             $this->ID=$id;  
  39.  }
]]> http://www.juust.org/index.php/wordpress-fun-with-pluggable-classes/2009/07/feed/ 0 sneak preview http://www.juust.org/index.php/sneak-preview/2009/05/ http://www.juust.org/index.php/sneak-preview/2009/05/#comments Wed, 06 May 2009 15:18:04 +0000 juust http://www.juust.org/?p=472 Continue reading →]]> I was working on a wordpress install for friends of mine. Marieke Zijlstra and Ruerdtsje made the layout, I stuffed it in a template.

I had to learn a bit of css and jquery and brush up on photoshop.

pallieter small

We still have to add the sidebar slideshow and add some pictures for rotating header graphics, I’ll do that after it goes live, it was a short term. The css does not validate completely, fortunately there are hundreds of css experts that can iron out the glitches in the stylesheet.

Maybe I’ll dig into css some more later and fix it myself, it’s pretty basic stuff.

When the site is live I’ll add a link to it.

]]> http://www.juust.org/index.php/sneak-preview/2009/05/feed/ 0 using wordpress custom pages for service templates http://www.juust.org/index.php/using-wordpress-custom-pages-for-service-templates/2009/05/ http://www.juust.org/index.php/using-wordpress-custom-pages-for-service-templates/2009/05/#comments Wed, 06 May 2009 13:21:26 +0000 juust http://www.juust.org/?p=467 Continue reading →]]> I was reading a discussion elsewhere on a rest service plugin for wordpress. Problem seemed that wordpress kept rerouting all requests to index.php. Most wordpress installs use server modules for url rewriting, where .htaccess contains a rule that checks first if a file exists on the server that matches the request. If it doesn’t, wordpress handles it. Unless you write an extra .htaccess rule to direct requests to the service endpoint, you have to have all endpoint files present under the request name. That’s awkward.

using custom pages

You can solve that by masking your service as a page. WordPress tests if the file exists as ‘single’ (page or post), and if a page exists with that permalink, wordpress generates the page.

I can write custom templates for pages. That template can be any file, so it can also be the main request handler of the REST service.

If I place my request handler in the template directory with a remark

/* Template Name: XMLServices
  1. */

then wordpress adds it to the custom pages list, that I can use on the backend when I add a new page.

custom content-type headers

Services usually reply with json or xml data, and not with wordpress content pages. I need a custom file header.
black magic

No problem, if I leave get_header(); out of the page template, I can specifiy my own header and use an text/xml content type or vcard text/directory content type.

I made a small example by adding my twitter friends timeline as xml output to the blog menu, by placing a file xmlservices.php in the template directory :

/* Template Name: XMLServices
  1. */
  2.  
  3. $x = simplexml_load_file('http://www.juust.org/friends_timeline.xml');
  4. if($x) {
  5.  
  6. //make the XML-header :
  7. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
  8. header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
  9. header("Cache-Control: no-cache, must-revalidate" );
  10. header("Pragma: no-cache" );
  11. header("Content-type: text/xml");
  12.  
  13. //make some xml :
  14. $xml = "< ?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
  15. $xml .= "<rows>";
  16. $xml .= "<page>1</page>";
  17. $xml .= "<total>15</total>";
  18. foreach($x->status as $s) {
  19.  $xml .= "<row id='".$s->user->id."'>";
  20.  $xml .= "<cell>< ![CDATA[".$s->source."]]></cell>";  
  21.  $xml .= "<cell>< ![CDATA[".$s->text."]]></cell>";
  22.  //$xml .= "<cell>< ![CDATA[".$s->user->screen_name."]]></cell>";    
  23.  $xml .= "<cell>< ![CDATA[".$s->user->name."]]></cell>";  
  24.  $xml .= "<cell>< ![CDATA[".$s->user->screen_name."]]></cell>";  
  25.  $xml .= "<cell>< ![CDATA[".$s->user->followers_count."]]></cell>";  
  26.  $xml .= "</row>";  
  27. }
  28.  
  29. $xml .= "</rows>";
  30. echo $xml;
  31. } else {
  32. //no data, relocate to the blog index or something
  33. }

Then added a page services with xmlservices as template. I can make a whole tree of xml service pages, as long as I use my XMLServices template when I make the page. You can use both http-get-queries and http-post.

Adding a vCard

wordpress custom page You can also add your  vcard, if you work business to business that comes in very handy.

I picked Troy Wolf’s vcard class of the net, made a file vcard.php with vcard as Template Name and put it in the template directory.

/* Template Name: vcard
  1. */
  2.  
  3. //include the class file
  4. include('../../../classes/vcard.class.php');
  5. //here we go : add my personal data
  6. $vc = new vcard;
  7. $vc-&gt;display_name ='Juust';//….
  8. $vc-&gt;download();

I added a empty new page with ‘about’ as parent and vcard as custom template, published it and now anyone can download my vCard straight from the ‘about’ menu.

]]> http://www.juust.org/index.php/using-wordpress-custom-pages-for-service-templates/2009/05/feed/ 0 faking links & dblclick search http://www.juust.org/index.php/faking-links-dblclick-search/2009/04/ http://www.juust.org/index.php/faking-links-dblclick-search/2009/04/#comments Sun, 26 Apr 2009 10:17:44 +0000 juust http://www.juust.org/?p=434 Continue reading →]]> Being a noob at jquery, I was very satisfied with these two : the first is a one liner to search the blog when someone doubleclicks on a word, the second is an easy fake anchor.

double click search

If you double click (in some browsers?) you select the word under the cursor. Bind the double click event of a paragraph element to a function that uses the standard worpdress search, using bloginfo(‘home’) to get the home url, with the selected text as ?s= search parameter, and relocates to the search result page.

  1. jQuery(document).ready(function() {
  2.  jQuery('p').bind('dblclick', function(e){
  3.   window.location = '&lt;?php bloginfo('home'); ?&gt;/?s='+getSelectedText();
  4.     });
  5.  
  6. });
  7.  
  8. function getSelectedText(){
  9.     if(window.getSelection){
  10.         return window.getSelection().toString();
  11.     }
  12.     else if(document.getSelection){
  13.         return document.getSelection();
  14.     }
  15.     else if(document.selection){
  16.         return document.selection.createRange().text;
  17.     }
  18. }

fake a link

You can also fake a hyperlink, makes seo life easier.

Any surplus inline element will do, in this case the dfn tag, as most have the title attribute that I use to store the url  :

<dfn title="http://elgoog.rb-hosting.de/index.cgi?dir=/Top/News/&amp;page=Satire/">hyperlink</dfn>

Style the dfn element with a bit of css :

  1. dfn {
  2.   color: blue;
  3.  text-decoration: underline;
  4.  font-size: 14px;
  5. }

…and it looks like a hyperlink, add some jQuery to bind a click event on the dfn element to a function that jumps to the title attribute.

  1. jQuery(document).ready(function() {
  2.  
  3.  jQuery('dfn').bind('click', function(e){
  4.   window.location = jQuery(this).attr('title');
  5.     });
  6. });

…and we have the link that search engines do not index as a link, but it does work.

 

]]> http://www.juust.org/index.php/faking-links-dblclick-search/2009/04/feed/ 0