Il existe sûrement plusieurs solutions d’hébergements gratuits, mais j’en essaye un actuellement en tant que serveur de test pour des clients : Hostinger.

J’ai créé un compte et en 24h, j’ai pu installer un WordPress, le mettre à jour (et en français), installer des plugins… bref tout pour montrer à un client leur futur site.

Voici ce que propose Hostinger :

• Nouvelle génération d’hébergementNous offrons un hébergement fiable et notre service est disponible à 99,9%
• Prise en charge du PHP et MySQL
  Nous soutenons PHP et MySQL sans aucune restriction
• Pas de publicités ou bannières sur vos pages
  Pas de liens textuels. Pas de pop-ups ennuyeux. Pas de bannières gênantes.
• Installateur automatique de script
  Wordpress, Joomla, Prestashop, phpBB, Drupal, et de nombreux autres scripts
• Constructeur de site Web en ligne facile
  Vous pouvez maintenant construire votre site très facilement.

Pourquoi ne pas le changer pour une page de connexion totalement personnalisée ? Les possibilités sont infinies. Avec un peu de CSS et de Javascript, vous pouvez avoir une page de connexion vous ressemble et surtout adapté à votre thème.

Dans ce tutoriel, nous allons voir quelles sont les étapes pour créer une page de connexion WordPress :

• avec un arrière-plan personnalisé,
• des polices et des styles personnalisés,
• ainsi que d’une fantaisie jQuery effet de fondu sur le formulaire.

<?php
/* Include du fichier pour la page login personalisée */
include_once "login/login-functions.php";
?>

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
}

add_action('login_head', 'custom_login_css');

function custom_fonts() {
    echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css" />';
}
add_action('login_head', 'custom_fonts');

add_action( 'login_head', 'untame_fadein',30);

function untame_fadein() {
    echo '
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function() { jQuery("#loginform,#nav,#backtoblog").css("display", "none");          jQuery("#loginform,#nav,#backtoblog").fadeIn(3500);     
    });
    // ]]></script>';
}

add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
    return 'URL_DE_MON_SITE';
}

body.login {background: #fbfbfb url('bg.jpg') no-repeat fixed center; }

.login h1 a {
    background-image: url('../login/logo.png');
    background-size: 299px 172px;
    width: 320px;
    height: 160px;
}

#login {
    padding: 70px 0 0;
}

.login form {
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden;
}
.login form input {
    width: 240px;
    height: 48px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: block;
}

.login form input:focus,
.login form textarea:focus {
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
}
.login label {
    color: #fff;
    line-height: 26px;
}

.login form .input,
.login input[type="text"] { color: #8c8a8a;}
input#rememberme {
    height: 18px;
    width: 18px;
    display: inline;
    vertical-align: middle;
    margin: 10px 0;
}
input.button-primary {
    width: 138px;
    height: 44px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float:right;
    border: 1px solid #888888;
    background: #888888;
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#888888));
    background: -webkit-linear-gradient(top, #333333, #888888);
    background: -moz-linear-gradient(top, #333333, #888888);
    background: -ms-linear-gradient(top, #333333, #888888);
    background: -o-linear-gradient(top, #333333, #888888);
    background-image: -ms-linear-gradient(top, #333333 0%, #888888 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}

input.button-primary:hover {
    border: 1px solid #888888;
    text-shadow: #333333 0 1px 0;
    background: #888888;
    background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#888888));
    background: -webkit-linear-gradient(top, #888888, #888888);
    background: -moz-linear-gradient(top, #888888, #888888);
    background: -ms-linear-gradient(top, #888888, #888888);
    background: -o-linear-gradient(top, #888888, #888888);
    background-image: -ms-linear-gradient(top, #888888 0%, #888888 100%);
    color: #fff;
}

input.button-primary:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #333333;
    background: #333333;
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#888888));
    background: -webkit-linear-gradient(top, #333333, #888888);
    background: -moz-linear-gradient(top, #333333, #888888);
    background: -ms-linear-gradient(top, #333333, #888888);
    background: -o-linear-gradient(top, #333333, #888888);
    background-image: -ms-linear-gradient(top, #416b68 0%, #888888 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}

.login #nav, .login #backtoblog {
    float: left;
    margin: 0 0 0 13px;
    padding-bottom: 20px;
}
.login #nav a, .login #backtoblog a {
    font-family: 'Sans ouvertes Condensé',sans-serif;
    font-size: 10px;
    color:#ffffff;
}
div.updated, .login .message {
    background-color: lightYellow;
    border-color: #E6DB55;
    font-family: 'Sans ouvertes Condensé',sans-serif;
    font-size: 16px;
    font-weight: 700;
}

div.updated,
.login .message {
    background-color: lightYellow;
    border-color: #E6DB55;
    font-family: 'Sans ouvertes Condensé', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

Source

HTML

La partie HTML est simple, on a un champ <input> auquel on définit une couleur par défaut.

<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />

Php

La partie fonction Php qui appelle en file d’attente les scripts et styles.

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

jQuery

Nous avons chargé ‘my-script.js‘, voilà son contenu :

var myOptions = {
    // you can declare a default color here,
    // or in the data-default-color attribute on the input
    defaultColor: false,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){},
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};

$('.my-color-field').wpColorPicker(myOptions);

Voilà ce que j’ai glané sur la toile pour vous (et surtout pour moi), pour vous aider. Cela m’a permis de personnaliser mon plugin WP Maintenance.

A bientôt

Le premier concernant la fonctionnalité d’upload d’images, le deuxième concernera l’ajout d’un color picker : “Ajouter un champ color picker dans vos plugins WordPress“.

Ces deux astuces m’ont permis de développer  le plugin WP Maintenance.

HTML

Commençons avec le code nécessaire pour charger le code HTML :

Uploader votre image <label for="upload_image"> <input id="upload_image" size="36" name="upload_image" type="text" /> <input id="upload_image_button" value="Uploader" type="button" /> </label>

Php

Nous allons appeler en file d’attente les scripts et les styles. Nous avons besoin de ’media-upload‘ et ‘thickbox’ pour leur exécution, ainsi que jQuery, qui est déjà inclus.

function my_admin_scripts() { 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); 
    wp_enqueue_script('my-upload'); 
}  
function my_admin_styles() { 
    wp_enqueue_style('thickbox'); 
}  

if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') { 
    add_action('admin_print_scripts', 'my_admin_scripts'); 
    add_action('admin_print_styles', 'my_admin_styles'); 
}

Vous remarquerez une contition if (isset($_GET['page']) && $_GET['page'] == ‘my_plugin_page’) n’oubliez pas de changer my_plugin_page par votre page.

jQuery

Nous avons chargé ‘my-script.js‘, voilà son contenu :

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});

J’espère que cela vous aidera pour vos futurs développement de plugins ou de thèmes WordPress.

Aujourd’hui, je vous propose un plugin pour activer cette page de maintenance que j’ai développé à partir de cet article.

Ce plugin vous propose de personnaliser cette page de maintenance avec diverses fonctions :

• Activez / désactivez votre page de maintenance
• Ajoutez votre propre texte d’attente
• Personnalisez les couleurs de fond et du texte
• Téléchargez une image pour agrémenter votre page

Cela m’a pris quelques heures de développement juste pour vous

Téléchargez le plugin ici (disponible aussi sur GitHub) : http://wordpress.org/extend/plugins/wp-maintenance/

Vous me direz peut-être que c’est du déjà vu… oui mais non ! Je n’ai rien trouvé qui fonctionnait correctement… avoir je vous propose de tester cela et pourquoi pas le mettre en place sur votre WordPress.

Voici la fonction à mettre dans votre functions.php

/* Mode Mainteance
 * Bien récupérer la page maintenance.php du thème
 * Attention si c'est un thème child
 */
function maintenance_mode() {

    global $current_user;
    get_currentuserinfo();
    if ($current_user->user_level != 10 ) {

        /* A dé-commenter si c'est un thème enfant */
        //$addContent = '-child';
        $content = file_get_contents( TEMPLATEPATH.$addContent '/maintenance.php' );
        die($content);
    }

}
add_action('get_header', 'maintenance_mode');

Voici maintenant la page proprement dite à personnalisé bien sûr :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Le Titre de la page de maintenance</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Site en maintenance" />
    <style type="text/css">
        h1 { margin:auto;width: 700px;padding: 10px;text-align: center; }
        img { margin:auto; }
        body { background: #FAFAFA;line-height: 1; }
        #maintenance { width: 300px; margin-left: auto;margin-right: auto;margin-top: 90px; }
    </style>
  </head>
  <body>
      <div id="maintenance"><img src="/wp-content/themes/twentyeleven/images/logo.png" width="300" height="174" /></div>
     <h1>Désolé le site est actuellement en maintenance</h1>
  </body>
</html>

Quelques défauts cependant. J’aimerais que cela soit sous plugin, vous ne trouvez pas ?

J’ai installé le plugin, créé des albums, créé des galeries d’images… et là… ben le client me demande une page avec tous les albums qui mèneront aux galeries de ceux-ci.

Bref, étonné quand même que les développeurs de NextGen Gallery n’y ont pas pensé, je me suis fait une petite fonction qui va faire tout cela.

Voici la fonction :

/* Affiche la lise des albums */
function ngg_liste_albums( $args = null, $thumbs = 1) {

    global $wpdb;
    $liste_albums = $wpdb->get_results("SELECT * FROM wp_ngg_album ORDER by id");

    $output = '';

    if ( count( $liste_albums ) > 0 ) {

        foreach ( $liste_albums as $albums ) {

            /* On va chercher l'image correspondante de l'album */
            $pic= $wpdb->get_row("SELECT * FROM wp_ngg_pictures WHERE pid = ".$albums->previewpic." LIMIT 1");
            /* On récupère le chemin vers l'album */
            $galerieid = $wpdb->get_row("SELECT * FROM wp_ngg_gallery WHERE gid = ".$pic->galleryid."");

            if($galerieid->gid>=1) {
                $output .= '<div class="ngg-album-compact">';
                if($thumbs==1 && isset($pic->filename)) {
                    $output .= '<div class="ngg-album-compactbox"><a class="Link" href="'.$path.''.$albums->slug.'/" /><img class="Thumb" alt="'.$albums->name.'" src="/'.$galerieid->path.'/thumbs/thumbs_'.$pic->filename.'" width="100" heigth="75" /></a></div>';
                }
                $output .= '<h4><a href="'.$path.''.$albums->slug.'/">'.$albums->name.'</a></h4>';
                $output .= '</div>';
            }
        }

    } else {
        $output = 'Aucun album trouvé !';
    }
    echo $output;
}

Puis j’ai créé un modèle de page à adapter selon votre thème :

<?php
/*
Template Name: Albums Photos
*/

get_header(); ?>

	<!-- CONTENT -->
	<div id="content">
		<section id="main-content" role="main" class="full-height">

			 <header class="entry-header">
                <h1 class="entry-title">Nos Galeries Photos</h1>
                </header>
            <div class="entry-content">
                <?php echo ngg_liste_albums(); ?>

			<?php
				// If comments are open or we have at least one comment, load up the comment template
				if ( comments_open() || '0' != get_comments_number() )
					comments_template( '', true );
			?>
            </div>
            <div class="divider-solid"/></div>
		</section>
	</div>
	<!-- END CONTENT -->

	<?php get_sidebar(); ?>

<?php get_footer(); ?>

Il faut ensuite penser à faire une page par album et le tour est joué !

Qu’en pensez-vous ? Pouvons-nous aussi simplifier cette fonction et ainsi l’améliorer ?

A vous de jouer !

Le menu latéral, cliquable via un bouton, contient des liens vers des différentes pages, c’est à dire la table des matières.

Lorsque vous cliquez sur une entrée de table des matières, nous passons à la page correspondant.

A vous de jouer et d’utiliser ce plugin avec ingéniosité !

Voici la démo ici.

Télécharger le plugin : Note: There is a file embedded within this post, please visit this post to download the file.

Article original sur Codrops

Il s’agit d’un lecteur très léger (4kb) avec un objectif très clair : lire un fichier audio unique.

Comment ça marche

Le plugin remplace les éléments <audio> avec certains évènements HTML et JavaScript qui s’y rattachent.

Responsive

Smartphone, tablette ou X pouces de largeur : ce lecteur audio se sent bien avec n’importe quelle taille de l’écran. Sans avoir besoin de requêtes médias, une simple mise en page fluide a été adoptée.

Touch-Friendly

Il est réel, vivant et vous pouvez le toucher. Ce lecteur audio peut être utilisé sur les écrans tactiles. Tout ce que vous pouvez faire avec votre souris, vous pouvez aussi le faire avec votre doigt. Chaque action a ses évènements tactiles définis et activés.

L’adaptabilité

- JavaScript désactivé ? Pas de soucis, le lecteur audio de votre navigateur par défaut fera le travail.
- Le bouton de volume se cache si la commande de volume n’est pas disponible.
- Lorsque le navigateur ne supporte pas tout à fait l’élément <audio> ou l’un des fichiers audios fournis, le lecteur audio se métamorphose gracieusement en un seul bouton (Lecture / Pause) avec l’élément <embed />, qui sera basée sur l’utilisation d’un plugin tiers (la plupart du temps de Quick Time sur Mac, Windows Media Player sous Windows), pour lire le fichier audio.

Voici une démo ici !

Télécharger les sources : Note: There is a file embedded within this post, please visit this post to download the file.

Article original sur Codrops 

Étant donné que ce site est entièrement “Responsive”, il me fallait un code vidéo YouTube pour modifier la taille en fonction de la taille du navigateur ou de la largeur appareil. Dans le code par défaut d’intégration fourni par YouTube la vidéo a une hauteur et une largeur fixes.

Cela avait l’air très bien sur les ordinateurs de bureaux, mais presque cassé le template lors de la visualisation sur un appareil mobile. J’avais donc besoin d’un code embed “Responsive” YouTube.


Le correctif a été en fait assez simple, et voici comment.

Vous aurez besoin d’envelopper le code d’intégration avec un <div> et spécifiez un fond de 50% à 60% de remplissage. Puis spécifiez pour les éléments enfants (iframe, objet embed) la largeur de 100%, 100% de la hauteur, en position absolue. Cela va forcer les éléments EMBED pour étendre pleine largeur automatiquement. Exactement ce qu’il nous faut.

D’abord, vous aurez besoin d’ajouter ce qui suit à votre feuille de style :

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ensuite, ajouter ce code HTML dans votre code d’intégration :

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/KbrOrR3wctc" frameborder="0" width="560" height="315"></iframe>
</div>

Et voilà. Vous voici en "Responsive" pour vos vidéos YouTube ! Magnifique non ?