«
»
WordPressWordPress - АдминкаВсе для functions.phpВсе для разработки плагиновВсе для разработки шаблонов

WordPress – как изменить страницу входа в админ панель (админку) сайта?

Здравствуйте с друзьями в данной записи я поделюсь с вами тем как придать фирменный стиль для сайта который Вы создаете для той или иной организации. Причём важно понимать что фирменный стиль важен не только для сайта организации а по сути для любого вашего клиента, так как подчеркивает и ваш профессионализм, и радует клиента заботой о нём с вашей стороны.

Для того чтобы кастомизировать страницу входа WordPress достаточно применить код в файле function.php, добавить файл стилей — в данном случае файл _SDStudio_login_styles.css. В который необходимо добавить стили оформления страницы.

Ниже находится код который подключает файл оформления страницы входа в function.php:

/* Кастомизированная страница входа в WordPress */ function custom_login_css() { echo '<link rel="stylesheet" ENGINE="text/css" href="'.get_stylesheet_directory_uri().'/_SDStudio_login_styles.css" />'; /* JS код для страницы входа wp-admin - при клике по лого переходим на главную*/ echo "<script>n"; echo "jQuery( document ).ready(function( $ ) {n"; echo "$('#login > h1 > a').on("click", function() {n"; echo "window.location.href='/';n"; echo "return false;n"; echo " });n"; echo "});n"; echo "</script>"; } add_action('login_head', 'custom_login_css');

Данный вариант в случае если переход по клику на лого срабатывает на страницу WordPress:

/* Кастомизированная страница входа в WordPress */ function custom_login_css() { echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/_SDStudio_login_styles.css" />'; ?> <!-- Подключение jQuery --> <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js'></script> <!-- JS код для страницы входа wp-admin - при клике по лого переходим на главную*/ --> <script> jQuery( document ).ready(function( $ ) { $('.login h1 a').on("click", function() { window.location.href='/'; return false; }); }); </script>"; <?php } add_action('login_head', 'custom_login_css');

Содержимое _SDStudio_login_styles.css (не забудьте создать данный файл вкорне вашей темы):

/* Background WordPress Login Page */ body.login { background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.37)), transparent url('/wp-content/uploads/2017/12/StockSnap_959IURDRGJ-1-1200x800.jpg') center center/cover no-repeat fixed; } /* Logo */ .login h1 a { background-image: url('/wp-content/uploads/2017/12/ORGANIZATION_LOGO_ONLY.jpg'); background-size: 150px 150px; width: 150px; height: 150px; }

Обратите внимание на файл StockSnap_959IURDRGJ-1-1200×800.jpg который прописан в стилях в качестве бекграунда (бекграунд на любой случай жизни Вы можете найти по данной ссылке, ), и на файл ORGANIZATION_LOGO_ONLY.jpg который используется в качестве логотипа компании.

За частую сразу после кастомизации страницы для входа в вордпресс, я прописываю свой код для горячих клавиш:

Источник записи: https://mediadoma.com

Связанные записи
Windows инструкцииWordPress

Как разделить большие файлы XML в WordPress

PageSpeed InsightsWordPressПлагины

Как отключить плагины WordPress на определенных страницах и постах с плагином и без (через функцию)

WordPressПлагины

Создать сайт членства с WordPress

ElementorWordPressПлагины

Как закрыть по умолчанию аккордеон в Elementor