WP лого в wp-admin. Как да го сменим?

Всеки е наясно и в даден момент е искал да промени това (за мен) досадно WP лого от страницата за вход в административния панел на WordPress сайта. В тази публикация ще ви дадем код, който трябва да поставите във вашия function.php файл на вашата дъщерна тема и той ще сложи вашето лого над формата за вход в сайта.

Освен логото, променяме и URL адреса

Може би повечето от вас знаят, че като се натисне самото WP лого в wp-admin, то ви препраща към линка на плаформата https://wordpress.org/. Разбира се, ние не искаме това да се случва и и ще добавим в кода и промяна на линка, към началната страница на сайта.

Разбира се трябва да имате достъп до FTP или CPanel-а си, за да можете да поставите кода във файла function.php. Препоръчително е да редактирате сайта си през дъщерна тема или по-позната, като „child-theme“.

Функция за добавяне на действие

Във файла function.php трябва да се добави действие, което системата на WordPress да извършва. Как добавяме действие?… разбира се, че с функцията „add_action“

add_action( 'login_enqueue_scripts', 'exito_login_logo' );

Това е функция, която показва на системата, че трябва да извърши промяна в скрипта, който отговаря за Login заявките. Това означава, че не само с адрес /wp-admin/, но и с линка /wp-login.php, който впрочем е същата заявка ще приеме промяната. Сега трябва да обясним самата функция, което става по следния начин.

function exito_login_logo()

Нужно е разбира се да покажем, какво точно искаме да направим с login logo. Как ще го направим ли…? Чрез добавяне на стил към функцията.

<style type="text/css">
        #login h1 a, .login h1 a {
           background-image: url(/wp-content/uploads/2022/06/logo.png);
           height: 150px;
           width: 250px;
           background-size: contain;
           background-repeat: no-repeat;
           background-color: transparent;
      }
    </style>

Както виждате в стила по-горе, добавяме изображение, което всъщност ще бъде нашето лого. Добавяме чрез връзка до самия файл, като казваме, че вместо стандартното WP лого, ние ще ползваме друго изображение.

Под него задаваме широчината и височината на логото. Веднага след това създаваме изискване, логото да „се съдържа“, да „не се повтаря“ и да няма цвят.

Промяна на линка при натискане на WP лого

Разбира се, трябва да променим и линка. Както казахме по-горе, той води към официалната страница на WordPress. Ние ще го пренасочим да води към началната ни страница. Как става това…? По следния начин:

add_filter( 'login_headerurl', 'exito_login_logo_link' );
 
function exito_login_logo_link( $url ) {
    return home_url( '/' );
}

Това е кода, разбит на парчета, за да можете да разберете идеята. По същия начин чрез файла function.php можете да правите много промени по сайта си.

Целият код за промяна на WP лого в WordPress

/**
 * @snippet       Custom logo - WordPress admin
 * @author        Студио за Уеб дизайн и Маркетинг EXITO.BG
 * @compatible    WooCommerce 5.1+
 */
 
add_action( 'login_enqueue_scripts', 'exito_login_logo' );
 
function exito_login_logo() {
   ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
           background-image: url(/wp-content/uploads/2022/06/logo.png);
           height: 150px;
           width: 250px;
           background-size: contain;
           background-repeat: no-repeat;
           background-color: transparent;
      }
    </style>
   <?php
}
 
add_filter( 'login_headerurl', 'exito_login_logo_link' );
 
function exito_login_logo_link( $url ) {
    return home_url( '/' );
}