Creare un tema one page con wordpress

Per cambiare l’ordine di visualizzazione delle pagine potete modificare il box Ordinamento negli attributi pagina. Queste opzioni sono presenti nel pannello di amministrazione di wordpress.

Ora passiamo al menu

In un sito one page, tutti i link del menu puntano ad un unica pagina¹ quindi bisogna fare in modo di dire a wordpress di non creare il menù con i link alle singole pagine. Questo porterebbe alla singola pagina fuori dalla home e romperebbe il nostro “giocattolino”.

Create comunque il menu da pannello di controllo².

Il codice riportato di seguito crea le voci di menu legate alle sezioni di pagina. In sostanza una sorta di anchor link. Inseriamolo nel file functions.php

<?php

function new_nav_menu_items($items)
{
    $items = "";

    $args = array("post_type" => "page", "order" => "ASC", "orderby" => "menu_order");
    $the_query = new WP_Query($args);

    if($the_query->have_posts()):
        while($the_query->have_posts()):
            $the_query->the_post();
                $items .= '<li><a href="#post-'. get_the_ID() .'">' . get_the_title() . '</a></li>';
        endwhile;
    else:
        echo "";
    endif;
    return $items;
}
add_filter("wp_nav_menu_items", "new_nav_menu_items");

Questo codice crea automaticamente un link alle sezioni della nostra homepage attraverso il post ID. Come potete vedere aprendo il file dei contenuti, richiamato in precedenza nel nostro template, /post-formats/format.php ad ogni article viene assegnata in automatico una classe post-ID del post³.

E ora ci dedichiamo agli articoli del blog

Adesso dobbiamo fare in modo che una delle nostre pagine carichi gli articoli del blog. Per fare in modo che questo avvenga prendete tanta colla vinilica (scusate) inseriamo il codice che trovate di seguito nel file functions.php. Il codice crea uno short code che possiamo richiamare nella pagina che vogliamo contenga i nostri articoli, basterà inserire questi due “tag”: [post][/post] 

function articoli_callback($atts=null, $content=null)
{
    $args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish");
    $posts = new WP_Query($args);
    ?>
        <div style="text-align: center">
    <?php
    if($posts->have_posts()):
        while($posts->have_posts()):
            $posts->the_post();
            ?>
                <div style="display: inline-block; width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;">
                    <a href="javascript:post_popup('<?php echo get_the_ID(); ?>')"><?php echo get_the_title(); ?></a>
                </div>
            <?php
            $posts_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
            array_push($posts_array, $post_array);
        endwhile;
        else:
            echo "";
            die();
    endif;

    ?>
        </div>
    <?php
}
add_shortcode("post", "articoli_callback");

Piccolo intervallo Muciaccia: è chiaro che per vedere i post dovreste averli scritti in precedenza.

Per finire richiamiamo i nostri post e mostriamoli in un popup

Il codice riportato di seguito fa una richiesta da frontend attraverso AJAX e, dal post-ID ci mostra il contenuto del post in un popup.

Per rendere le cose più veloci ho usato un alert box ma per fare qualcosa di più bellino dovreste crearvi la vostra finestra modale.

Torniamo al nostro file functions e inseriamo il codice:

function post_content()
{
    $post_id = $_GET["post_id"];
    $content_post = get_post($post_id);
    $content = $content_post->post_content;
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    echo $content;

    die();
}

add_action("wp_ajax_post_content", "post_content");
add_action("wp_ajax_nopriv_post_content", "post_content");

function posts_popup()
{
    ?>
        <script>
            function post_popup(id)
            {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php?action=post_content&post_id="+id);
                xhr.onload = function(){
                    var content = xhr.responseText;
                    alert(content);
                }
                xhr.send();
            }
        </script>
    <?php
}
add_action("wp_head", "posts_popup");

Scarica i sorgenti del tema

Conclusioni

Ho utilizzato Bones per la prima volta per realizzare questo tutorial e direi che ci tornerò su magari per altri tutorial.

Spero che tutti i passaggi risultino abbastanza chiari e di non aver lasciato cose in sospeso o di non aver dato troppo codice per scontato, nel caso potete utilizzare il form dei commenti.

1. Questa potrebbe vincere almeno il primo posto nel premio GaC del mese.

2. Mi sento molto Giovanni Muciaccia, quello di art attack con la fissa per la colla vinilica, ma lo faccio per 2 motivi: il primo e per tentare di non lasciare nulla in sospeso o di non dare troppo per scontato. Il secondo ve lo racconterò in un articolo sull’argomento.

3. Questa soluzione non è molto seo friendly, infatti come potete vedere dal mio sito, l’ho risolta creando una classe post-slug aggiungendo altro codice. Inoltre ho aggiunto codice js e molto css per lo scorrimento delle pagine e le altre funzioni implementate nel mio sito. Qui però voglio darvi solo l’idea di come realizzare una one page, per eventuali richieste potete scrivermi nei commenti o aspettare eventuali tutorial futuri, vi garantisco che ci saranno.