Categoria ‘Internet’


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...

FireFox: la gestione dei profili

Mozilla FireFox permette di gestire più profili, funzionalità utile a chi, come me, sviluppa siti web e necessita di tutta una serie di estensioni dedicate al debug e all’analisi delle pagine Web. Tramite l’uso dei profili è possibile configurare differenti impostazioni di FireFox:

Firefox salva le informazioni personali come i segnalibri, le password e le preferenze in un gruppo di file chiamato profilo situato in una posizione diversa rispetto ai file di programma di Firefox.

Su Windows Vista (vedi qui per altri sistemi operativi) è possibile accedere alla gestione dei profili dal comando Esegui usando:

1
firefox -ProfileManager

Gestione dei profili

Uno dei vantaggi nell’uso dei profili è quello di poter avere un FireFox per navigare, senza quindi tutte le toolbar e le estensioni per il debug e un FireFox per sviluppare, corredato da FireBug e tutti gli altri tool di sviluppo.

Continua...

Very short trick: valori undefined in Javascript

Esiste una forma abbreviata per assegnare “al volo” una valore ad una variabile se un’altra non è definita (undefined), usando l’operatore di OR logico (||) – doppio pipe:

1
2
3
4
5
// pluto risulta undefined
var pluto;
var pippo = pluto || '5';
alert( pippo );
// risultato: 5

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...

Camelize, CamelCase

Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:

Prototype.js

Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L’approccio dell’autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!

1
2
3
4
5
6
7
8
9
10
11
12
13
camelize: function() {
    var parts = this.split('-'), len = parts.length;
    if (len == 1) return parts[0];

    var camelized = this.charAt(0) == '-'
      ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
      : parts[0];

    for (var i = 1; i < len; i++)
      camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);

    return camelized;
  }

Continua...

CSS3: qualcuno ha visto Internet Explorer?

Io proprio no…

1
2
3
4
5
6
7
8
9
p {
/* Rounded Corners */
border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
}

Continua...

Very short trick: cicli for più rapidi in Actionscript

In Actionscript i cicli for è bene utilizzarli sempre con cura. Ad esempio è bene usare variabili uint quando è possibile:

1
2
3
for( var i:uint = 0; i++; i < 100) {
// ...
}

È anche possibile usare la – non sempre conosciuta – forma:

1
2
3
4
5
var i:uint = 0;
// ...
for(;  i++; i < 100) {
// ...
}

Continua...

jQuery: animate backgroundColor

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

1
2
3
4
5
<style type="text/css">
div#box { background-color: #eee; width:100px; height:100px }
</style>
<!-- .... -->
<div id="box"></div>
1
$('div#box').animate( {backgroundColor: "#f90"} );

Per risolvere il problema è necessario installare un’estensione: jQuery Color Animations. Questa permette di eseguire “animazioni” sull’attributo backgroundColor e non solo:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Continua...

Actionscript 3.0: MovieClip over MovieClip

Appena uno sviluppatore Flash/Actionscript si appresta a scrivere una funzione simile ad un tooltip, si scontra immediatamente con il problema della propagazione degli eventi tra MovieClip sovrapposti. Infatti se un MovieClip (B) si sovrappone ad un MovieClip (A) che risponde, ad esempio, ad un evento MouseEvent.Mouse_OVER, passando con il mouse sul MovieClip (B) più alto nessun evento verrà più intercettato dal MovieClip (A):

MovieClip over MovieClip

Continua...



Stop SOPA