Categoria ‘WordPress’


WordPress: scrivere un logout personale

Partendo dal post WordPress: come creare passo passo un proprio login, eseguita la procedura di login potrebbe essere utile indicare all’interno del nostro blog un link per effettuare la disconnessione, ovvero il logout. Non useremo anche in questo caso le procedure standard di WordPress, ma vedremo come eseguire il logout a basso livello. Prima di tutto dobbiamo capire se un utente è loggato o meno. Questo è possibile interrogando semplicemente la variabile $user_ID di WordPress. Ad esempio:

1
2
3
if( $user_ID != '' ) { // oppure if( is_user_logged_in() ) {
    // un utente risulta "loggato" ...
}

Una volta che sappiamo che un utente è “loggato” nel sistema, possiamo inserire un semplice link ad una nostra pagina di logout. Creiamo quindi una pagina, ad esempio logout.php, e inserendo il seguende codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Esegue il logout
 *
 * @author            Giovambattista Fazioli
 * @email             g.fazioli@undolog.com
 * @web               http://www.undolog.com
 */
 // Invoke WordPress bootstrap
@require_once('wp-config.php');
@require_once('wp-includes/pluggable.php');
// wp logout
wp_logout();
// carico qualsiasi altra pagina
header( "Location: /" );

E sufficiente quindi “linkare” alla nostra pagina per fornire una procedure di logout:

1
2
3
if( $user_ID != '' ) {
    echo 'Esegui il <a href="logout.php">logout</a>';
}

Continua...

WordPress: come creare passo passo un proprio login

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di WordPress, ad esempio tramite l’uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di WordPress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico “Password dimenticata?”
  • Per permettere l’accesso tramite l’email (come nell’esempio qui trattato) al posto dello user_login standard di WordPress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro – ed un’idea – per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di WordPress all’interno di una cartella mylogin. Creiamo due file php all’interno di questa cartella: index.php e logon.php. Il primo conterrà l’interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell’utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All’interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
  • index.php
  • logon.php
  • css
  • layout.css
  • images
  • ajax-loader.gif

Continua...

WordPress: migliorare la lista dei commenti

Il template standard di WordPress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

1
2
3
4
5
// file comments.php
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
[...]
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l’autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

1
2
3
4
5
<?php
    $authcomment = ($comment->user_id==3)?' authcomment':'';
    $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : '';  
?>
<li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment-&gt;user_id==3 può variare in base all’ID del vostro utente. Io, ad esempio, non uso l’amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l’ID dell’amministratore è 1, se usate questa utenza potete scrivere: $comment-&gt;user_id==1. In questo modo oltre ad avere l’alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell’autore del blog.

Continua...

WordPress: modifcare AdminBigWidth per gli sviluppatori

AdminBigWidth è un Plugin per WordPress in grado di impostare l’area di lavoro dell’amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

1
2
3
4
function AdminBigWidth () {
    echo '<style type="text/css">.wrap{max-width:none}</style>';
}
add_action('admin_head','AdminBigWidth');

Per chi come me usa l’editor di WordPress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull’editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all’ennesimo Plugin:

1
2
3
4
function AdminBigWidth () {
  echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
}
add_action('admin_head','AdminBigWidth');

Continua...

WordPress: come scrivere un reply to comment usando jQuery

Recentemente Cristiano Fino ha rilasciato un utile Plugin per WordPress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di WordPress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l’ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l’autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare – per gli utenti medio-esperti – il modo di aggiugere queste due funzionalità “a mano”, senza ricorrere all’istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l’uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template WordPress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all’interno del codice WordPress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link “reply” e “quote” all’interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

Continua...

WP-ABS: Ver.1.11 su WordPress.org

Da oggi potete scaricare il plugin per WordPress WP Add Browser Search direttamente dal sito di WordPress.org :)

WP-ABS

Continua...

WP-ABS: aggiornamento release 1.1

Aggiornamento: ultima versione

Rispondo alla richiesta di Yuri, che chiedeva come utilizzare il Plugin per WordPress WP Add Browser Search per aggiungere la ricerca di Google AdSense per la ricerca! Così ho rilasciato un aggiornamento del Plugin (scaricabile qui) che permette di impostare, tramite un classico pannello delle opzioni, i parametri per il file XML descrittore dello standard OpenSearch.

Continua...

WP-ABS: aggiungere il proprio blog al search del browser

Aggiornamento: ultima versione

OpenSearch è uno standard che definisce una serie di formati per la condivisione dei risultati di ricerca. Questo standard è utilizzato, ad esempio, da Social Network come Facebook, che possiedono uno proprio sistema di ricerca. Uno degli utilizzi di questo standard, per i browser che lo supportano, è la possibilità di riconoscere in automatico  e quindi aggiungere, il proprio sito web o blog alla lista dei motori di ricerca presenti nel menu a tendina del browser:

image

Se visitate (con FireFox o Flock) il motore di ricerca Divoogle, potrete inserirlo tra i motori di ricerca presenti nel menu.
Questa operazione, tuttavia, potrebbe essere svolta manualmente selezionando “Gestione motori di ricerca…” in Firefox, ad esempio. Ma oltre ad essere un’operazione particolare, ogni utente singolarmente dovrebbe svolgere. Browser di ultima generazione, come Flock, permettono grazie allo standard OpenSearch di automatizzare questa funzione, segnalando in automatico all’utente che il sito web o blog propone un suo motore di ricerca:

image

WordPress Plugin: il vostro Blog nei lista dei motori di ricerca

Il procedimento manuale, utile per attivare questa funzione dappertutto, lo vedremo più sotto. Nel frattempo, se avete un Blog WordPress, potete installare questo semplice Plugin (wp-abs.zip) che svolge tutto il lavoro per voi. Una volta installato e attivato non dovrete configurare nulla! Caricando il vostro Blog WordPress su Firefox o Flock, troverete magicamente il vostro Blog elencato nel menu a tendina dei motori di ricerca.
Per il sorgente fate riferimento qui.

Installazione manuale dello standard OpenSearch

Per chi volesse svolgere l’installazione dello standard OpenSearch in modo manuale può seguire il semplice tutorial di esempio esposto qui sotto e/o fare riferimento alla documentazione presente sul sito OpenSearch.

Per segnalare la presenza di un motore di ricerca al browser è sufficiente creare un file XML sul nostro sito o Blog. Eccone ad esempio il file opensearch_desc.xml di undolog.com:

1
2
3
4
5
6
7
8
9
<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
    <ShortName>Undolog</ShortName>
    <Description>Open Search Undolog.com</Description>
    <Image height="16" width="16" type="image/x-icon">http://www.undolog.com/favicon.ico</Image>
    <Url type="text/html" method="get" template="http://www.undolog.com/?s={searchTerms}"/>
    <moz:SearchForm>http://www.undolog.com/</moz:SearchForm>
</OpenSearchDescription>

Come potete vedere il suo formato è abbastanza semplice. Il punto importate è la riga 7:

1
2
3
...
<Url type="text/html" method="get" template="http://www.undolog.com/?s={searchTerms}"/>
...

Questa indica al browser dove e come effettuare la ricerca. Normalmente, come in questo caso, WordPress usa lo standard:

1
http://mioblog.com/?s=stringa da cercare

Tuttavia a seconda delle esigenza, come ho fatto per Divoogle, questa parte di codice può variare. Una volta creato questo file è sufficiente inserire un tag link all’interno della sezione head della nostra home page:

1
2
<!-- opensearch -->
<link rel="search" type="application/opensearchdescription+xml" href="http://www.undolog.com/opensearch_desc.xml" title="Undolog" />

Tramite l’attributo rel="search", questo link segnalerà al browser (che lo supporta) dove recuperare tutte le informazioni per aggiungere il motore di ricerca.

Continua...

Blogbabel riapre! Chiuso per ferie dal 19 luglio al 2 agosto

Blogbabel, che aveva preso un pausa qualche tempo fa, riapre con un nuovo look e tante novità. La riapertura di Blogbabel coincide proprio con la mia meritata pausa: un paio di settimane di riposo dopo due lunghi anni! Causa nascita gemelli.

Al mio ritorno ai primi di agosto, spero di poter riattivare tutti i widget per il monitoring delle statistiche Blogbabel. Ho già contattato i responsabili per verificare la disponibilità delle API; al momento in cui scrivo disabilitate apparentemente.

Per ora, quindi, pausa e un buon riposo a tutti :)

Continua...

Usare i Template WordPress per creare una Sitemap

Esiste una funzionalità in WordPress, a volte trascurata, che lo rende davvero molto versatile, soprattutto per chi crea temi: l’uso dei Template! Un Template non è altro che un file inserito nella cartella del tema. Per identificarlo come Template basta inserire all’inizio del file un particolare commento in PHP:

1
2
3
/*
Template Name: Sitemap
*/

Sfruttando questa caratteristica è possibile creare una pagina vuota, con il procedimento standard di WordPress, e collegarla al nostro template. Se create un file, ad esempio sitemap.php (aggiungendo quel commento indicato più sopra) e lo caricate all’interno della cartella del vostro tema, noterete che nell’editor WordPress durante la creazione di una pagina (non di un post) il menu Template (in basso) conterrà il nome del file template caricato. Come indicato nella sezione template:

Alcuni temi hanno dei template personalizzati da poter utilizzare per determinate pagine, che possono contenere funzionalità aggiuntive o una grafica personalizzata. [...]

Io, ad esempio, ho sfruttato questa caratteristica per creare una pagina dinamica (che esegue quindi codice PHP) in grado di mostrare una vera e propria sitemap del blog.

Creazione di una pagina Sitemap

Prima di tutto create una file sitemap.php e caricatelo all’interno della cartella del vostro tema. Dall’amministrazione di WordPress create una nuova pagina, dategli un nome e selezionate il Template dal menu che si trova sotto l’editor! Finito!

Il template, facendo parte del tema, contiene anche tutta la struttura del tema stesso ed è quindi importante saperlo scrive in modo corretto. Tuttavia ecco uno scheletro di una sitemap che potete modificare in base al tema che avete installato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
/*
Template Name: Sitemap
*/
?>
<?php get_header(); ?>
  <div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><?php the_title(); ?></h2>
    <small class="date-time"><?php the_time('l j F, Y') ?></small>
      <div class="entry">  
        <p><strong><a href="<?php bloginfo('url'); ?>" alt="<?php bloginfo('name'); ?>">Home</a></strong></p>
        <h3>Pagine</h3>
        <ul>
          <?php wp_list_pages('title_li='); ?>
        </ul>
        <h3>Post</h3>
        <ul>
          <?php $archive_query = new WP_Query('showposts=1000');
            while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
          <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
          <?php endwhile; ?>
        </ul>
        <h3>Archivi mensili</h3>
        <ul>
          <?php wp_get_archives('type=monthly'); ?>
        </ul>
        <h3>Categorie</h3>
        <ul>
          <?php wp_list_categories('title_li=0'); ?>
        </ul>
        <h3>Feeds RSS/FeedBurner</h3>
        <ul>
          <li><a href="<?php bloginfo('rdf_url'); ?>" alt="RDF/RSS 1.0 feed"><acronym title="Resource Description Framework">RDF</acronym>/<acronym title="Really Simple Syndication">RSS</acronym> 1.0 feed</a></li>
          <li><a href="<?php bloginfo('rss_url'); ?>" alt="RSS 0.92 feed"><acronym title="Really Simple Syndication">RSS</acronym> 0.92 feed</a></li>
          <li><a href="<?php bloginfo('rss2_url'); ?>" alt="RSS 2.0 feed"><acronym title="Really Simple Syndication">RSS</acronym> 2.0 feed</a></li>
          <li><a href="<?php bloginfo('atom_url'); ?>" alt="Atom feed">Atom feed</a></li>
        </ul>
      </div>
    </div>
  <?php endwhile; endif; ?>
  </div>
  <?php get_sidebar(); get_footer(); ?>

Continua...



Stop SOPA