Как в Вордпрессе изменить логотип на странице входа на сайт

Инструкции

В этой статье я покажу, как на экране авторизации с помощью кода вы сможете заменить стандартный логотип WordPress на свой.

Итак, вы пытаетесь залогиниться на сайт через страницу wp-login.php. На экране вы видите стандартный логотип Вордпресса:

Как поменять стандартный логотип WordPress на сайте

Вам он не нужен, вы хотите чтобы вместо него отображался ваш логотип. Причем, чтобы ссылка вела на ваш сайт, а не на сайт Вордпресса. Чтобы это исправить, вам нужно будет добавить следующий код в файл functions.php:

<?php

/* Это мы вставили - Начало */

function editLoginPage() { ?>
	<style type="text/css">
		#login h1 a {
			background-image: url(https://timeto.top/wp-content/themes/golovolomka/img/icons/help.svg);
			display: block;
			width: 272px;
			height: 92px;
			background-size: auto;
		}
	</style>
<?php }

add_action('login_enqueue_scripts', 'editLoginPage');

function editLoginPageTitle() {
	return 'Web Головоломки';
}

add_action('login_headertext', 'editLoginPageTitle');

function editLoginPageTitleUrl() {
	return 'https://timeto.top';
}

add_action('login_headerurl', 'editLoginPageTitleUrl');

/* Это мы вставили - Конец */

?>

Теперь наша страница входа будет выглядеть вот так:

Давайте теперь подробно разберем, что мы сделали.

Мы прописали три функции: первая функция (editLoginPage) добавляет на страницу wp-login нужные нам стили. По умолчанию логотип WordPress прописан в стилях, и мы с помощью добавления своих стилей переписываем это.

Вам нужно только поменять значение в свойстве background-image. Вставьте туда ссылку на свой логотип. Также подставьте нужные значения в height и width, в зависимости от размера вашего лого.

Далее, функция editLoginPageTitle меняет содержимое внутри ссылки. Вы можете ее и не добавлять, ведь содержимое скрывается под логотипом.

Чтобы было понятнее, откройте инспектор:

Обратите внимание на div с айдишкой login и все что внутри него. Теперь вы лучше понимаете, как отображается логотип на странице входа 🙂

И последняя, третья функция editLoginPageTitleUrl возвращает нам адрес сайта, на который будет совершен переход, когда пользователь кликнет на лого. Вставьте свое значение.

После этого мы добавляем наши функции к определенным событиям (action).

В конце статьи добавил видео. Я постарался подробно объяснить, как изменить логотип на странице входа в WordPress.

Если остались вопросы или что-то не получается - пишите в комментариях.

Похожие записи
Обсуждение