WordPress Blog Standard Makeover Tutorial

Posted on by
WordPress Blog Standard Makeover Tutorial

WordPress Blog Standard Makeover Tutorial

What do you understand from the list?

  • Miniature
  • Standard
  • Giant

? Give up?! Well, it’s the sizes you can have for the dog breed, Schnauzer. Huh?!

Yes, bear with me here .

Can a Schnauzer change it’s mind … in the sense that the writer is currently on all fours on the ground looking up at some food?

Well, it appears they have phases in life … so … yes.

Well, it appears we’ve grown out of The “Teenager” Phase, apparently, and are changing our tack regarding mobile smaller device WordPress blog “repositioning” tactics that the Miniiature Schnauzer “within us” must have been so into when we presented WordPress Blog Mini Makeover Tutorial.

But it’s standard practice to review ideas every now and then, and when “mini” was the go, this WordPress Blog had less traffic, but in today’s scenarios you could get, on an iPhone, for instance, circumstances where …

  • a WordPress Blog webpage could flash up for perhaps a second and then …
  • blank content could take over, for a good while … before …
  • repositioned webpage content could eventually show

We accept, sometimes, there will be too much traffic to service every reader, but to see a “flash of it” and “then it disappears” is, to put it bluntly, disappointing.

And so, if you have been put out that way …

  1. we apologize …
  2. our research has indicated it is the efforts in trying to have “repositioned webpage content” that is the biggest drag here … and so …
  3. Standard schnauzer … still on all fours … is pulling the plug … though …

    Have you ever tried to get into a bath on all fours?

    … and, if so (and you claim you did?!) …

    Have you ever tried to pull a plug out just with your teeth?

    … and no animals were harmed in the making of this blog posting so that is today’s work, stopping that mobile iPhone sized device repositioning that involves either …

    • location.href=’#[someElementId]’;
    • window.scrollBy(deltax, deltay);

Good ol’ TwentyTen theme’s header.php, in it’s relevant bit, now shows code that goes …


function windowscrollBy(inxis, inyis) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
return null;
}
return window.scrollBy(inxis, inyis)
}

function img_alt() {
<?php
$iphone = strpos((isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' '),"iPhone");
$android = strpos((isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' '),"Android");
$blackberry = strpos((isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' '),"BlackBerry");
$ipod = strpos((isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' '),"iPod");


//if ($iphone && !isset($_GET['nojumping'])) {
// $_GET['nojumping']='y';
//}


if (($iphone || $android || $ipod || $blackberry)) { // thanks to //www.phpmysqlscript.com/2012/03/detecting-users-screen-size-and.html
//echo "\n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; windowscrollBy(36,220); } else { windowscrollBy(36,0); } \n";
$mainhash="";
if (!isset($_GET['nojumping']) || 'fix' == 'fix') {
$mainhash="#main";
if (isset($post->ID)) {
//$mainhash=str_replace('post-68495#andabit=-70','post-68495', "#post-" . $post->ID . "#andabit=-70");
$mainhash="#post-" . $post->ID . "#andabit=-70";
}
} else {
$mainhash="";
}
echo "\n if (1 == 1) { if (document.URL.replace('?nojumping=','').indexOf('?') != -1 || (document.URL.indexOf('/ITblog/') != -1 && (document.URL + '*').indexOf('/ITblog/*') == -1)) { if (('' + location.hash).indexOf('" . str_replace('#','',$mainhash) . "') == -1) { if (('' + document.referrer + '*').indexOf('rjmprogramming.com.au*') == -1 && ('' + document.referrer + '*').indexOf('rjmprogramming-com-au.translate.goog') == -1) { if (('' + top.document.URL).indexOf('rjmprogramming-com-au.translate.goog') == -1) { if (document.body.innerHTML.indexOf('processyt' + 'play') == -1) { if ('" . $mainhash . "' != '') { if (4 == 4) { if (document.getElementById('" . trim(explode('#',substr($mainhash . ' ',1))[0]) . "')) { document.getElementById('" . trim(explode('#',substr($mainhash . ' ',1))[0]) . "').scrollIntoView(); } } else { location.href='" . $mainhash . "'; } } } } } if (1 == 1) { if (4 == 4) { windowscrollBy(28,0); } } } } else if (1 == 1) { if (6 == 6) { windowscrollBy(28,0); } } \n";
$mainhash="";
} else {
echo "\n if (1 == 2) { \n";
}
?>
var ilis, clis;
var nfo, nfos;
var fromto='';
if (navigator.userAgent.toUpperCase().indexOf('SAFARI') != -1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { fromto=str_replace('nojumping=y','','nojumping=y'); }

var lis = document.getElementsByTagName("li");
for (ilis=0; ilis<lis.length; ilis++) {
clis = " " + lis[ilis].className + " ";
if (clis.indexOf(" page-item-80 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/ Statement/g, "");
} else if (clis.indexOf(" page-item-189 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/One Image Site/g, "1Image");
} else if (clis.indexOf(" page-item-366 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/All Posts/g, "All");
}
}

lis = document.getElementsByTagName("a");
for (ilis=0; ilis<lis.length; ilis++) {
if (fromto != '') {
if (('' + lis[ilis].href).indexOf(from) == -1 && (('' + lis[ilis].href + '~').indexOf('-tutorial/~') != -1 || ('' + lis[ilis].href + '~').indexOf('-tutorial~') != -1)) {
lis[ilis].href+='?' + fromto;
} else if (('' + lis[ilis].href).indexOf(from) == -1 && ('' + lis[ilis].href + '').indexOf('?p') != -1 && ('' + lis[ilis].href + '').indexOf('#') != -1) {
lis[ilis].href=lis[ilis].href.replace('#','&' + fromto + '#');
} else if (('' + lis[ilis].href).indexOf(from) == -1 && ('' + lis[ilis].href + '').indexOf('?p') != -1 && ('' + lis[ilis].href + '').indexOf('#') == -1) {
lis[ilis].href+='&' + fromto;
}
}
if (lis[ilis].innerHTML.indexOf("pink;") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace("pink;", "pink;width:580px;"); //180px;"); //212px;");
}
}

var h1st = document.getElementById("site-title");
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {

h1st.style.width = "250px"; //"350px";
h1st.style.marginTop = "-34px";
h1st.style.marginLeft = "20px";

h1st = document.getElementById("site-description");
h1st.style.position = "absolute";
h1st.style.left = "80px";
h1st.style.top = "35px";
h1st.style.fontSize = "8px";

h1st.style.marginLeft = "36px"; //"350px";
h1st = document.getElementById("site-info");
h1st.style.width = "250px"; // "350px";
h1st = document.getElementById("mywtoi");
if (h1st != null) {
h1st.style.width = "190px"; //"212px";
h1st.style.height = "254px"; //"282px";
}
h1st = document.getElementById("content");
if (h1st != null) {
h1st.style.width = "320px";
}

}

}

… and we hope it leads to more stability on your iPhone sized mobile devices.

Previous relevant WordPress Blog Mini Makeover Tutorial is shown below.

WordPress Blog Mini Makeover Tutorial

WordPress Blog Mini Makeover Tutorial

“Mini makeover WordPress Blog time” beckons today (or at least a few days ago). This “mini makeover” addressed issues as per …

  • mobile platform tutorial picture sizes could be larger
  • mobile navigation needed improved hashtag navigation
  • navigation from Landing Page to “Course Interest” view of the blog posting chosen needed improved hashtag navigation

… and as far as that goes let’s go into more detail with these changes to our WordPress Blog’s Twenty Ten theme’s header.php and functions.php …

  • mobile platform tutorial picture sizes could be larger …
    Remedies taken from MacBook Pro point of view Symptoms and Steps to Fixes for iPad and iPhone

    … needed new CSS within header.php PHP as per …

    <style>

    /* Portrait and Landscape ... thanks to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
    .alignnone { width: 98% !important; }
    .alignnone > img { width: 98% !important; }
    }

    /* Portrait and Landscape iPhone */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 765px) {
    div.entry-content > div.wp-caption.alignnone { width: 98% !important; }
    div.entry-content > div.wp-caption.alignnone > a > img { width: 98% !important; }
    }

    </style>

  • mobile navigation needed improved hashtag navigation …
    header.php code used to be …

    echo "\n if (1 == 1) { if (document.URL.indexOf('?') != -1 || (document.URL.indexOf('/ITblog/') != -1 && (document.URL + '*').indexOf('/ITblog/*') == -1)) { location.href='#main'; window.scrollBy(36,220); } else { window.scrollBy(36,0); } \n";
    … and becomes …

    $mainhash="#main";
    if (isset($post->ID)) {
    $mainhash="#post-" . $post->ID;
    }
    echo "\n if (1 == 1) { if (document.URL.indexOf('?') != -1 || (document.URL.indexOf('/ITblog/') != -1 && (document.URL + '*').indexOf('/ITblog/*') == -1)) { location.href='" . $mainhash . "'; if (1 == 1) { window.scrollBy(28,0); } } else if (1 == 1) { window.scrollBy(28,0); } \n";
  • navigation from Landing Page to “Course Interest” view of the blog posting chosen needed improved hashtag navigation …
    functions.php code used to be and then becomes …

    function previous_next($both = true) {
    // lots of code
    if ("$both" != "") {
    echo "<table id=iftable style='width:150%; background-color: #F6F5F1;'><tbody><tr>";
    } else {
    echo "<table style='width:150%; background-color: #F6F5F1;'><tbody><tr>";
    }
    // lots of code
    }
    header.php code used to be and then becomes to make use of new id=iftable above …
    … and becomes …

    <body onload=" pp_ref(('' + document.URL), ('' + document.referrer)); if (1 == 1) { lookforbincode(); } lookforhighlight(); postcalendar(); changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); pre_last_email_check(); setTimeout(last_email_check,15000); " <?php body_class(); ?>>

    … calls …

    function post_pp_ref() {
    if (document.getElementById('iftable')) {
    location.href='#iftable';
    }
    }

    function pp_ref(inuone, inutwo) {
    if ((inuone + inutwo).indexOf('pp=&pn=&title=') != -1 || (inuone + inutwo).indexOf('pp&pn&title=') != -1) {
    setTimeout(post_pp_ref, 8000);
    }
    }

… which you can see in action via a visit to the RJM Programming Landing Page and select a blog posting from the right hand midpage dropdown.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *