Ajouter un favicon au tableau de bord de WordPress

Vous souhaitez personnaliser le favicon du tableau de bord? Copiez simplement le code suivant dans le fichier functions.php de votre thème:

function bweb_admin_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . 'img/icon_bweb.png';
    echo '<link rel="shortcut icon" href="' . $favicon_url . '" />';
}
add_action( 'admin_head', 'bweb_admin_favicon' );

Modifier l’url de connexion à l’administration WordPress

Pour vous connecter à votre administration WordPress, il convient d’ajouter le suffixe /wp-admin ou /wp-login.php à l’adresse Web de votre site.

Dans un souci de simplification vis-à-vis de vos clients ou vos collaborateurs, sachez qu’il est possible de modifier ce lien d’accès par celui de votre choix – par exemple, /login. Une manipulation via le fichier .htaccess s’impose.

A l’aide de votre client FTP favori, connectez-vous à la racine de votre hébergeur. Faites afficher les fichiers cachés puis modifiez le fichier .htaccess.

Le point rappelle qu’il s’agit d’un fichier caché sous un système à base UNIX comme Linux ou MacOS X. Si un tel fichier est absent, créez-le à l’aide d’un éditeur de texte – bien qu’il devrait être présent dans la plupart des cas, celui-ci apparaissant dès lors que les permaliens de WordPress sont modifiés.

Une fois le fichier .htaccess ouvert dans votre éditeur de texte favori, rajoutez la ligne suivante :

RewriteRule ^login$ http://NOM_DU_SITE.com/wp-login.php [NC,L]

Il suffit de remplacer le mot-clé login par celui qui convient ainsi que l’URL de votre site.

Par exemple:

RewriteRule ^connexion$ http://NOM_DU_SITE.com/wp-login.php [NC,L]

L’URL de connexion au Tableau de bord sera alors: http://NOM_DU_SITE.com/connexion

Modifier le logo Paypal dans les options de paiement de WooCommerce

Par défaut, WooCommerce affiche l’un des nombreux icônes PayPal standards. Cependant, il est très courant de vouloir remplacer cette image par une autre.

Pour modifier cet icône, entrez le code suivant dans le fichier functions.php de votre thème et modifiez l’URL dans les guillemets pour qu’il corresponde à l’image de votre choix:

<?php

/* Change PayPal Icon */

function my_new_paypal_icon() {
    return '/wp-content/uploads/2017/04/paypal-icon.png';
}

add_filter( 'woocommerce_paypal_icon', 'my_new_paypal_icon' );

 

Débarrassez-vous définitivement des liens HTML dans les commentaires

Le problème

Les blogueurs cherchent toujours à promouvoir leurs blogs et les spammeurs sont partout. Une chose qui m’agace totalement sur mes blogs est la quantité incroyable de liens laissés dans les commentaires, qui ne sont généralement pas pertinents. Par défaut, WordPress transforme les URL des commentaires en liens. Heureusement, si vous êtes aussi fatigué que moi, cela peut être remplacé.

La solution

Ouvrez simplement votre fichier function.php et collez ce code:

function plc_comment_post( $incoming_comment ) {
  $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);
  $incoming_comment['comment_content'] = str_replace( "'", '&apos;', $incoming_comment['comment_content'] );
  return( $incoming_comment );
}

function plc_comment_display( $comment_to_display ) {
  $comment_to_display = str_replace( '&apos;', "'", $comment_to_display );
  return $comment_to_display;
}

add_filter('preprocess_comment', 'plc_comment_post', ’, 1);
add_filter('comment_text', 'plc_comment_display', ’, 1);
add_filter('comment_text_rss', 'plc_comment_display', ’, 1);
add_filter('comment_excerpt', 'plc_comment_display', ’, 1);

 

Ajouter un texte personnalisé juste avant le formulaire de commentaire

Ajoutez le code suivant au fichier functions.php de votre thème pour personnaliser le texte avant le formulaire de commentaire. Remplacez le texte par celui de votre choix:

function collectiveray_comment_text_after($arg) {

$arg['comment_notes_after'] = "Ajoutez ici le texte que vous souhaitez faire apparaître juste au dessus du formulaire de commentaire.";

return $arg; }

add_filter('comment_form_defaults', 'collectiveray_comment_text_after');

Et voilà le résultat:

Ajouter manuellement le protocole Open Graph à votre site WordPress

Copiez simplement le code ci-dessous dans le fichier functions.php de votre thème:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Prenez soin de remplacer certaines valeur par celles de votre site et le tour est joué!

Comment créer un formulaire responsive en 2 colonnes avec Contact Form 7?

Dans ce tutoriel nous allons voir comment créer non seulement un formulaire de contact à deux colonnes avec le célèbre Contact Form 7 qui deviendra un formulaire à 1 seule colonne sur un mobile, autrement dit un formulaire de contact responsive.

Le balisage HTML du formulaire dans CF7

Nous allons tout d’abord mettre en place les balises HTML du formulaire nouvellement ajouter via le panel d’administration de l’extension Contact Form 7. On va envelopper ce formulaire dans une balise <div> avec comme id="formulaire-responsive" comme ceci :

<div id="formulaire-responsive" class="clearfix">

<div class="rang-form">
<div class="demi-colonne">Votre prénom [text* first-name]</div>
<div class="demi-colonne">Votre nom [text* last-name]</div>
</div>

<div class="rang-form">
<div class="demi-colonne">Email [email* your-email]</div>
<div class="demi-colonne">Téléphone [text* your-phone]</div>
</div>

<div class="rang-form">
<div class="colonne">Sujet [text* your-subject]</div>
</div>

<div class="rang-form">
<div class="colonne">Votre message  [textarea your-message]</div>
</div>

<div class="rang-form">
<div class="colonne">[submit "Envoyer"]</div>
</div>

</div><!--fin de formulaire-responsive-->

Si vous publiez le formulaire de suite, il ressemblera à ça :

Ajoutons les styles CSS

On va donc ajouter les styles pour créer 2 colonnes :

#formulaire-responsive {
	max-width:600px /*-- à modifier en fonction de la largeur désirée --*/;
	margin:0 auto;
        width:100%;
}
.rang-form {
	width: 100%;
}
.demi-colonne, .colonne {
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.demi-colonne {
		width: 50%;
	}
}

Et des styles pour les champs, les labels, le bouton d’envoi et les messages de CF7 :

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	color: #69af36; 
      font-family: 'Noto Sans', sans-serif;
      border-color: #69af36; 
      font-size: 14px; 
  	  line-height: 49px; 
      height: 49px; 
      font-weight: 600; 
      background-color: #ffffff; 
      border-radius: 4px; 
          -moz-border-radius: 4px; 
          -webkit-border-radius: 4px; 
       text-transform: uppercase; 
       border-width: 2px;  
       padding-left: 26px; 
       padding-right: 26px;
}
.wpcf7-submit:hover{
	background: #69af36;
      color: #ffffff;
  }
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

Et voici le résultat final:

Ajouter une colonne avec les images à la une dans l’administration WordPress

Pour afficher les images à la une dans votre liste d’articles, copiez le code suivant dans le fichier functions.php de votre thème:

/* --- Start : Post Thumbnail in admin --- */
    // Add the posts and pages columns filter. They can both use the same function.
    add_filter('manage_posts_columns', 'tcb_add_post_thumbnail_column', 1);
    add_filter('manage_pages_columns', 'tcb_add_post_thumbnail_column', 1);
 
    // Add the column
    function tcb_add_post_thumbnail_column($cols){
      $cols['tcb_post_thumb'] = __('Image','sensa');
      return $cols;
    }
 
    // Hook into the posts an pages column managing. Sharing function callback again.
    add_action('manage_posts_custom_column', 'tcb_display_post_thumbnail_column', 1, 2);
    add_action('manage_pages_custom_column', 'tcb_display_post_thumbnail_column', 1, 2);
 
    // Grab featured-thumbnail size post thumbnail and display it.
    function tcb_display_post_thumbnail_column($col, $id){
      switch($col){
        case 'tcb_post_thumb':
          if( function_exists('the_post_thumbnail') )
            echo the_post_thumbnail( 'thumb' );
          else
            echo __( 'Not supported in theme','sensa' );
          break;
      }
    }
/* --- End : Post Thumbnail in admin --- */

 

Créer des pages d’erreur personnalisées pour votre site WordPress

Créez des pages d’erreur pour les erreurs 403, 404 et 500 et téléchargez-les dans votre installation WordPress de base. Ensuite, ajoutez l’extrait de code suivant à votre fichier .htaccess pour activer les pages d’erreur personnalisées:

# Custom error page for error 403, 404 and 500
ErrorDocument 404 /404-error.html
ErrorDocument 403 / 403-error.html
ErrorDocument 500 / 500-error.html

Et voilà!

Rediriger votre site WordPress vers une page de maintenance

Vous pouvez avoir besoin une fois de rediriger vos visiteurs vers une page de maintenance, le temps d’apporter quelques modifications à votre site.

La méthode

Créez une page maintenance.html et uploadez-la à la racine de votre site.

Ajoutez ensuite cette portion de code à votre fichier .htaccess:

RewriteEngine on
RewriteCond %{REQUEST_URI} !/maintenance.html$
RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
RewriteRule $ /maintenance.html [R=302,L]

Et voilà vos visiteurs seront redirigés vers votre page.

Pour annuler la redirection, supprimez le code de votre fichier .htaccess.