July 15, 2008 – 3:01 pm
Following on my theme for this week, here are the steps to make Wordpress mobile friendly. This assumes you are using a separate URL for your mobile friendly wordpress (such as sitename.mobi):
1 - Buy your domain and park it on your current Wordpress site, so sitename.com and sitename.mobi are generating the same content
2 - Add (or modify) the file /wp-content/themes/yourtheme/functions.php and add the following lines:
<?php
remove_action(’template_redirect’, ‘redirect_canonical’);
function elixir_urlrewrite( $url ) {
if ( strpos( $url, get_bloginfo(”url”,”raw”) ) === false )
return $url ;
$urlparts = parse_url($url) ;
$url = str_replace( $urlparts[scheme] . “://” . $urlparts[host] , “” , $url ) ;
if ( strlen( $url ) == 0 )
$url = “/” ;
return $url ;
}
add_action(’day_link’, ‘elixir_urlrewrite’);
add_action(’feed_link’, ‘elixir_urlrewrite’);
add_action(’month_link’, ‘elixir_urlrewrite’);
add_action(’page_link’, ‘elixir_urlrewrite’);
add_action(’post_link’, ‘elixir_urlrewrite’);
add_action(’the_permalink’, ‘elixir_urlrewrite’);
add_action(’year_link’, ‘elixir_urlrewrite’);
add_action(’category_link’, ‘elixir_urlrewrite’);
add_action(’bloginfo_url’, ‘elixir_urlrewrite’);
?>
This will cause your wordpress installation to rewrite all links to remove sitename.com from them - this stops a mobile visitor always being redirected to the .com site
3 - Modify your .htaccess file and add the following lines (replacing sitename with your site name as applicable):
Options All -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^sitename\.com$
RewriteRule ^(.*)$ http://www.sitename.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^sitename\.mobi$
RewriteRule ^(.*)$ http://www.sitename.mobi/$1 [R=301,L]
</IfModule>
This replaces the built in ‘redirect_canonical’ so that it handles .com and .mobi correctly.
4 - modify your template so that it changes the doctype for a mobile device. Modify your header.php fie and replace the current ‘doctype’ line as follows:
<?php
function checkmobile(){
// Always mobile enabled on .mobi
if ( strpos( strtolower( $_SERVER['HTTP_HOST'] ) , “.mobi” ) !== false )
return true ;
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
if(preg_match(”/wap\.|\.wap/i”,$_SERVER["HTTP_ACCEPT"])) return true;
if(isset($_SERVER["HTTP_USER_AGENT"])){
$uamatches = array(”midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320″, “opwv”, “chtml”, “pda”, “windows\ ce”, “mmp\/”, “blackberry”, “mib\/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up\.b”, “audio”, “SIE\-”, “SEC\-”, “samsung”, “HTC”, “mot\-”, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “eric”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “\d\d\di”, “moto”);
foreach($uamatches as $uastring){
if(preg_match(”/”.$uastring.”/i”,$_SERVER["HTTP_USER_AGENT"])) return true;
}
}
return false;
}
if ( checkmobile() == true &&
strcmp( strtolower( $_SERVER['HTTP_HOST'] ) , “www.sitename.mobi” ) != 0 &&
strcmp( strtolower( $_SERVER['REQUEST_METHOD'] ) , “get” ) == 0 &&
$_SERVER['SERVER_PORT'] == 80 )
{
header(”HTTP/1.1 301 Moved Permanently”);
header(”Location: http://www.sitename.mobi” . $_SERVER['REQUEST_URI']);
exit();
}
if ( checkmobile() == true )
{ ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtd“>
<?php
}
else
{ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<?php
}
?>
5 - view with a mobile device. This is when you will need to change your CSS and page layout to take into account the limitations of the mobile environment. THis was covered in previous posts:
Making Your Site Mobile Friendly - CSS
To see this in action visit http://www.fionndownhill.mobi/
Posted in Accessibility, Web Design and Development | 6 Comments »
