Något fel på min hemsida under okänd tid

Hoppsan! Idag upptäckte jag att vissa bilder i mina gallerier inte öppnade sig stora, de visade sig bara som tumnaglar. Jag vet tyvärr inte hur länge detta problemet varat, bara att det har sitt ursprung i ett serverbyte på mitt webbhotell. Det fungerade efter bytet, men någonstans mellan detta och nu, så slutade vissa länkar att fungera.

Problemet ska vara ordnat nu och jag ber om ursäkt om min hemsida under en period inte fungerat som tänkt!

Navigation menu walker för WordPress och Bootstrap (version 2)

Jag skrev för inte alls så länge sedan om ett arbete som krävde att jag använde Bootstrap för navigation i en WordPressmiljö: Navigation menu walker för WordPress och Bootstrap

Jag fortsatt att förfina en aning för att undvika eventuella problem i framtiden. Bättre stöd för de inbyggda WordPress-funktionerna som stödjs även av Bootstrap, och inget slutar fungera om man trots allt skulle ange parametrar som inte stödjs.

Den nya klassen hittar du på GitHub Gist, eller här nedan.

Håll till godo!

<?php
/**
 * Wordpress Bootstrap navbar walker
 * 
 * For WordPress version 3.0.0+ and Bootstrap 3+
 * 
 * Set Title Attribute to "divider" for submenu divider.
 * Set Title Attribute to "header" for submenu header.
 *
 * Code example:
 * <code>
 * <nav class="navbar navbar-inverse" role="navigation">
 *     <div class="navbar-header">
 *         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
 *             <span class="sr-only">Toggle navigation</span>
 *             <span class="icon-bar"></span>
 *             <span class="icon-bar"></span>
 *             <span class="icon-bar"></span>
 *         </button>
 *         <a class="navbar-brand" href="<?php echo home_url(); ?>">
 *             <?php bloginfo('name'); ?>
 *         </a>
 *     </div>
 * 
 *     <div class="collapse navbar-collapse" id="navbar-collapse">
 *         <?php wp_nav_menu(array(
 *             'menu'       => 'main',           // Name of menu in WordPress.
 *             'depth'      => 2,                // Bootstrap only supports two levels.
 *             'menu_class' => 'nav navbar-nav', // 'nav navbar-nav' is required by Bootstrap.
 *             'walker'     => new bootstrap_navbar_walker()
 *         )); ?>
 *     </div>
 * </nav>
 * </code>
 *
 * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
 * 
 * Note:
 * When using this walker, only these arguments to wp_nav_menu are supported:
 * $menu, $walker, $link_befrore, $link_after and $menu_class.
 *
 * @author Ola Waljefors
 */
class bootstrap_navbar_walker extends Walker_Nav_Menu
{
    /**
     * start_lvl
     * 
     * @param  string  $output HTML output.
     * @param  integer $depth  Menus total depth.
     * @param  array   $args   Parameters.
     */
    public function start_lvl(&$output, $depth = 0, $args = array())
    {
        // Class name dropdown-menu is Bootstrap, sub-menu is WordPress.
        $output .= "\n<ul class=\"dropdown-menu sub-menu\">\n";
    }
 
    /**
     * start_el
     * 
     * @param  string  $output  HTML output.
     * @param  object  $item    Current menu item.
     * @param  integer $depth   Current items depth.
     * @param  array   $args    Parameters.
     */
    public function start_el(&$output, $item, $depth = 0, $args = array())
    {
        // WP classes.
        $classes   = empty($item->classes) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
 
        // Add Bootstraps active menu class.
        if (in_array('current-menu-item', $classes)) {
            $classes[] = 'active';
        }
 
        // Join and escape class names.
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? esc_attr($class_names) : '';
 
        // Apply and escape id
        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? 'id="' . esc_attr($id) . '"' : '';
 
        // Anchor attributes
        $atts = array(
            'title'  => !empty($item->attr_title) ? $item->attr_title : '',
            'target' => !empty($item->target)     ? $item->target     : '',
            'rel'    => !empty($item->xfn)        ? $item->xfn        : '',
            'href'   => !empty($item->url)        ? $item->url        : '',
        );
 
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
 
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= "$attr=\"$value\" ";
            }
        }
 
        // Check if title is divider, header or other menu item.
        if ($item->attr_title == 'divider') {
            $output .= "<li $id class=\"divider\">";
        } elseif ($item->attr_title == 'header') {
            $output .= "<li $id class=\"dropdown-header\">{$args->link_before}{$item->title}{$args->link_after}";
        } else {
            // If menu item has children add Bootstrap dropdown functions.
            if(in_array('menu-item-has-children', $classes)) {
                $output .= "<li $id class=\"dropdown $class_names\">"
                        .  "<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">{$args->link_before}{$item->title}{$args->link_after} <b class=\"caret\"></b></a>";
            } else {
                $output .= "<li $id class=\"$class_names\">"
                        .  "<a $attributes>{$args->link_before}{$item->title}{$args->link_after}</a>";
            }
        }
    }
}

Navigation menu walker för WordPress och Bootstrap

Jag hade för någon vecka sedan användning för en webbplats med en navigation fixerad i toppen av sidan. Som så ofta så är sidan baserad på wordpress som cms och bootstrap ramverk (före detta twitter bootstrap) som hjälp för responsiv layout.

Bootstrap navbar walker

Problemet med wordpress är dock att deras dynamiska menyer inte passar in i bootstraps uppmärkning, vilket gör att det blir besvärligt att få det att fungera helt bra. Men det finns en lösning i wordpress som heter custom walkers. En class du kan ärva för att ändra på sättet som wordpress rendrerar navigationsmenyer.

Det finns andra man hittar efter lite sökningar som har liknande lösning på problemet som jag, men jag kände att jag behövde en mer flexibel lösning. Det ska vara lätt att ändra på den genererade uppmärkningen om så behövs, och den ska stödja både dividers och headers i undermenyer. Däremot har jag inga behov av undermenyer i mer än ett steg.

Grunden till navigationen ska således vara liknande den i bootstraps manual.

WordPress custom walker

Walker-klassen (som lämpligen placeras i functions.php) ser ut som följande:

class bootstrap_navbar_walker extends Walker_Nav_Menu
{
    public function start_lvl(&$output, $depth = 0, $args = array())
    {
        $output .= "\n<ul class='dropdown-menu'>";
    }
 
    public function start_el(&$output, $item, $depth = 0, $args = array())
    {
        // if 'divider' or 'header' else normal link
        if (strtolower($item->attr_title) == 'divider') {
            $output .= "\n<li class=\"divider\">";
        } elseif (strtolower($item->attr_title) == 'header') {
            $output .= "\n<li class=\"dropdown-header\">$item->title";
        } else {
            if(in_array('current-menu-item', $item->classes)) {
                $item->classes[] = 'active';
            }
            $strclasses = implode(' ', $item->classes);
 
            if(in_array('menu-item-has-children', $item->classes)) {
                $output .= "\n<li class=\"dropdown $strclasses\"><a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">$item->title <b class=\"caret\"></b></a>";
            } else {
                $output .= "\n<li class=\"$strclasses\"><a href=\"$item->url\">$item->title</a>";
            }
        }
    }
}

Klassen bootstrap_navbar_walker ärver alltså här den inbyggda klassen Walker_Nav_Menu. Klassen nyttjar två metoder (start_lvl och start_el) för att skapa uppmärkningen till för menyalternativen. Det finns fler, men dessa är de enda jag behöver för detta ändamålet.

Metoden start_el, som är den intressantaste här, skriver ut uppmärkning för varje menyalternativ. Här ligger logik för att skriva ut dividers eller headers, dvs om titeln i menyalternativet är satt till desamma, så kommer de att generera dessa istället för normala menylänkar. Om menyalternativet har en undermeny (menu-item-has-children), så ser vi till att den får css-klassen dropdown enligt bootstraps standard. Vi ser också till att föra in wordpress standard css-klasser och kompletterar med bootstraps active för aktivt menyval.

Använda walkern i din template

För att använda dig av klassen i en template kan det se ut som nedan:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Visa meny</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo home_url(); ?>">Branding</a>
    </div>
 
    <div class="collapse navbar-collapse" id="navbar-collapse">
 
        <?php wp_nav_menu(array(
            'menu'       => 'main',
            'container'  => false,
            'menu_class' => 'nav navbar-nav',
            'walker'     => new bootstrap_navbar_walker()
        )); ?>
 
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search" title="Sök efter information"></span></a>
                <ul class="dropdown-menu" style="padding: 15px;">
                    <li>
                        <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                            <div class="form-group">
                                <input type="text" name="s" id="s" class="form-control" placeholder="Sök efter">
                            </div>
                            <button type="submit" class="search-submit btn btn-default">Sök</button>
                        </form>
                    </li>
                </ul>
            <li>
        </ul>
    </div>
</nav>

Detta är i princip en standard navbar i bootstrap, med funktion för att dölja menyn i mindre upplösningar och att istället skapa en klickbar dropdownmeny, samt ett sökformulär för sökning i wordpress.

Det viktiga sker i anropet av wordpress inbyggda wp_nav_menu(). Här väljer vi att använda oss av den nyskapade walkern bootstrap_navbar_walker(), adderar css-klasserna nav och navbar-nav för bootstrap. Det är också viktigt att standard-uppmärkningen av menyn i wordpress åsidosätts genom att container sätts till false.

Summering

Med denna koden känner jag att jag uppnått mitt mål, att ta full kontroll över sättet som wordpress normalt skapar en meny. Jag kan enkelt påverka css-classer och html-uppmärkning, menyn är helt kompatibel med både wordpress och bootstrap (med undantag för undermenyer i flera nivåer) och framförallt är den responsiv och fungerar därför bra på både datorn och i smarttelefoner och surfplattor.

Mission accomplished!

”Webbpublicering med WordPress”, en gratis bok

Webbpublicering med WordPressJag kan inte förstå att jag inte sett detta tidigare, men av någon anledning har jag helt missat det.

Thord Daniel Hedengren, eller TDH som han ofta kallar sig, har skrivit en bok om hur man använder WordPress som är helt gratis att ladda ner. Jag äger ett par av hans andra böcker och gillar sättet han skriver på. Det är tydligt, enkelt och inspirerande att läsa.

Just denna boken har jag kanske inte så mycket nytta av att läsa själv. Men eftersom jag skapar WordPressbaserade hemsidor åt vänner, småföretag och andra kunder är det underbart att kunna visa upp en ”manual” på svenska. Jag behöver inte längre ha dåligt samvete för att jag inte själv skrivit en svensk bruksanvisning till sidorna jag levererar. Nu kan jag koncentrera mig på det som skiljer den utökade funktionaliteten jag gjort mot standardinstallationen. Och mina kunder har alltid tillgång till uppdaterad information om systemet.

Boken är sponsrad av en rad webbhotell, webbyråer m.m. vilket gjort det möjligt att hålla ner priset till noll.

All heder åt detta initiativet av alla inblandade parter!

Bokens hemsida med nedladdningslänk är: wpmwp.se

Vad är WordPress?

För er som inte redan vet så är WordPress ett bloggverktyg och Content Management System, som driver mellan 15-20% av världens alla hemsidor. En otroligt imponerande bedrift, vilket bara det är ett bevis på styrkan i systemet. Så här skriver svenska wordpress själva:

”WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för privatperson som företag. WordPress är gratis och ovärderligt på en och samma gång.”

Inte så olikt min syn faktiskt! 🙂 Jag har använt det i några år nu och det har faktiskt blivit ett ovärderligt verktyg för mig. Det har aldrig varit enklare att uppdatera mina sidor med nytt innehåll, och det är på samma gång lätt att utveckla nya teman och funktionalitet. Visst finns det tillkortakommanden även i WordPress, men de blir färre och färre för varje ny version. Och bristerna märks aldrig i handhavandet, som användare är det en dröm!

Något är ruttet på world wide web (www)

WordPress är precis släppt i version 3.5. En lysande uppdatering som vanligt, där mycket tid har lagts ner på att uppdatera mediehantering och gallerier. Positivt för mig!

Men efter uppdateringen så tog jag mig en titt på hur det stod till bakom kulisserna. Jag blev väldigt överraskad när jag tittade över statistiken på mitt spam-filter och fick se följande resultat:

spam

Staplarna visar antalet spam som stoppats från december förra året och fram tills nu. Det senaste året har alltså antalet spam-försök på waljefors.se ökat lavinartat. Högsta siffran är visar oktober 2012 med 477 stycken. Och allt detta på en hemsida som i ärlighetens namn inte är så värst populär (ur ett besöksstatistiskt perspektiv).

Det positiva i sammanhanget är ju att jag inte själv sett röken av dessa, utan spam-filtret akismet har handskats med dessa åt mig helt utan min handpåläggning.

Men jag kan inte annat än undra över vad det är för ena personer som håller på med sådant här? Varför förstöra för andra människor genom att skriva nonsens? För att sprida virus och trojaner, eller tjäna pengar på andra olagligheter?

Det är inte utan att jag blir lite förbannad och trött på mänskligheten. Busar!

Nästa sida »