Si nous travaillons avec Wordpress, il est possible que nous aimions personnaliser notre page avec tous les détails possibles. L'une des personnalisations les plus demandées par les clients est la connexion. Par défaut, le design que Wordpress nous propose pour la connexion est assez simple et propre. C'est pourquoi nous pouvons vouloir y inclure une touche plus personnelle, telle que notre marque.
Si vous avez un blog développé sous Wordpress, vous saurez que pour le gérer vous devez accéder à une url telle que http://www.midominio.com/wp-admin, qui affiche la page de connexion de l'administrateur d'installation; Ceci, par défaut, inclut un logo Wodpress que nous pouvons modifier. Mais non seulement cela, mais nous pouvons également modifier le lien vers lequel il pointe lorsque vous cliquez dessus, ainsi que son info-bulle (l'affiche qui s'affiche lorsque vous placez le pointeur de la souris sur le logo).
Il existe deux manières de réaliser cette personnalisation : par plug-ins spécialisé ou en ajoutant une pièce code au fichier d'installation correspondant.
Lors de la réalisation de toute personnalisation dans Wordpress C'est plus simple au moyen d'un plugin, la vérité est que ceux-ci affectent directement le temps de chargement de notre page de sorte que chaque fois qu'il est à notre portée, il sera plus léger d'effectuer ce type d'actions en "touchant" le code.
Dans ce tutoriel nous allons voir comment le faire directement ajouter les trois extraits de code php correspondants à chacune des personnalisations que nous réaliserons :
Personnalisations
- Changer le logo.
- Changer le lien du logo.
- Personnalisez l'info-bulle du logo.
1. Changer de logo
Étape 1
La première chose que nous devons faire est de préparer l'image que nous utiliserons comme logo. Cela devrait être carré, de 80 x 80 pixels et en format .png.webp, de préférence avec le Arrière-plan transparent, puisque la page de connexion est grisâtre et, de cette façon, elle "se fondra" parfaitement avec elle.
Étape 2
Une fois que nous avons l'image que nous utiliserons comme logo prête, qui dans notre exemple s'appelle logo.png.webp, nous devons l'enregistrer dans le dossier images de notre sujet actuel ( \ wp-content \ thèmes \sujet actuel\ images) où sujet actuel il correspond au nom du thème que vous avez actif dans votre installation.
Nous pouvons mener à bien ce processus, à la fois par le biais d'un client FTP comme à travers le gestionnaire de fichiers d'hébergement, au cas où vous l'auriez.
Étape 3
Maintenant il faudra ajouter le code php correspondant au fichier functions.php de notre thème actif. Le moyen le plus rapide de le faire est d'utiliser le propre éditeur de fichiers de Wordpress. Pour cela, dans l'installation de Wordpress, faites cliquez sur le menu Personnaliser puis environ Éditeur. Maintenant, dans la colonne de gauche, cliquez sur le fichier functions.php et faites défiler jusqu'à la fin.
Pour indiquer le logo que vous souhaitez afficher, ajoutez le code suivant. Dans l'extrait de code, vous devez remplacer le texte logo.png.webp par le nom que vous avez donné à votre propre logo
// personnaliser le logo de connexion function my_custom_login_logo () {echo ''; } add_action ('login_head', 'my_custom_login_logo');
2. Changer le lien du logo
Pour modifier l'URL liée au logo de la page, vous devez également ajouter au fichier fonctions.php le bout de code suivant :
// personnaliser la fonction de lien du logo put_my_url () {return ('http://www.solvetic.com'); // Indiquez ici l'URL vers laquelle le logo renvoie} add_filter ('login_headerurl', 'put_my_url');
3. Personnaliser l'info-bulle du logo
Enfin, et pour que la personnalisation de la page de connexion soit complète, nous allons modifier le texte qui apparaît au survol de l'image du logo, qui par défaut est "Powered by WordPress".
Pour cela, vous devrez ajouter un dernier fragment de code au fichier fonctions.php du sujet actif :
// personnaliser la fonction de lien du logo put_my_url () {return ('http://www.solvetic.com'); // Indiquez ici l'URL vers laquelle le logo renvoie} add_filter ('login_headerurl', 'put_my_url');
Une fois la modification terminée, il sera nécessaire de sauvegarder les modifications apportées pour qu'elles prennent effet. Pour cela, cliquez sur le bouton Fichier de mise à jour trouvé à la fin de l'éditeur. Maintenant, si vous accédez à votre page de connexion Wordpres, vous pouvez voir à quoi cela ressemble après les modifications appliquées.
Rappelles toiVous pouvez essayer ces "trucs" sans craindre de déconfigurer votre site dans Wordpress en utilisant une installation locale comme expliqué dans le tutoriel Comment avoir une installation portable de WordPress
Téléchargez des modèles Wordpress gratuits
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
