Хей, имам нещо специално за теб!

5 грешки, които допускаш по време на интервю

Попълни имейл адрес, на който до минута ще получиш обещаното ;)

blond hacks - как да добавиш къстъм лого в WordPress admin

Custom лого на wp-admin страницата [без плъгин]

За да добавиш щипка персонализираност към WordPress сайта, който разработваш, е добра идея да сложиш логото на сайта и на login формата, която се намира на /wp-admin (или какъвто е login адресът ти).

Може би първото нещо, което ти хрумва, е да подмениш изображенито на WordPress логото (wordpress-logo.svg) с твоето. И това не е грешна идея, само че всеки път, когато обновяваш ядрото на WP – промяната ти ще се презаписва от новите файлове.

Затова и най-лесният и перманентен начин да имаш custom лого, е да добавиш тази функция към functions.php файлът на темата ти:

    // Override the default settings for WP logo
    function custom_logo_func() { 
        ?> 
            <style type="text/css"> 
            body.login div#login h1 a {
                background-image: url(<?=get_template_directory_uri()?>/images/new-logo.svg); // replace with your image name here
                background-image: none, url(<?=get_template_directory_uri()?>/images/new-logo.svg); // replace with your image name here
                background-size: 170px;
                background-position: center top;
                background-repeat: no-repeat;
                color: #3c434a;
                height: 84px;
                font-size: 20px;
                font-weight: 400;
                line-height: 1.3;
                margin: 0 auto 25px;
                padding: 0;
                text-decoration: none;
                width: 170px;
                text-indent: -9999px;
                outline: none;
                overflow: hidden;
                display: block;
            } 
            </style>
         <?php 
    } 
    
    add_action( 'login_enqueue_scripts', 'custom_logo_func' );

Както виждаш, това, което се случва е:

  • в нова функция добавяме style таг, в който селектираме контейнера, който държи логото (селекторите са винаги едни и същи, без значение версията)
  • стилизираме така, че логото да изглежда добре (ширина, височина и пр.)
  • добавяме action hook, който “инжектира” стиловете ни в стиловете на wp-admin

Както се досещаш, тук може да добавиш и фон (цвят, градиент или изображение), да смениш цветовете на формата и бутона за login и още.

Stay blond 🙂

Остави коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *