facebooktwitteryoutube
in Kodowanie - 10 Lut, 2009
by admin - no comments
8 prostych kroków: Jak wstawić własne logo na stronie logowania WordPress + bonus

Promocja marki własnego bloga to rzecz pracochłonna. Jednym z elementów budowy marki jest świadomość jego znaku graficznego, więc dobrze byłoby mieć własny obrazek również na stronie do logowania. Cieszy, że w nowej wersji WordPress zamiana standardowego obrazka na własne logo jest taka prosta.

Przygotowanie

Zanim zaczniemy cokolwiek zmieniać przyda się zaznajomić z wersją pierwotną i ewentualnie zrobić kopię zapasową pliku graficznego:

1.) Wchodzimy na stronę logowania naszego bloga

2.) Ściągamy plik /wp-admin/images/logo-login.gif (albo zapisujemy plik graficzny pojawiający się nad polami “użytkownik” i “hasło”)

Obr. 1. Wyglad pierwotnego ekranu do logowania

login1

3.) Otwieramy plik w dowolnym edytorze graficznym

4.) Oglądamy jak wygląda pierwotny plik nagłówka

Zmiany

Widać, że pierwotny plik ma rozmiary 290 na 66 pikseli i jest w formacie GIF, więc nasze zastępstwo też powinno być w GIF’em o rozmiarach 290 pikseli szerokości na 66 pikseli wysokości (głębia kolorów nie gra roli).

5.) Tworzymy nowy plik graficzny o rozmiarach 290×66 z białym tłem

6.) Wklejamy nasze logo bądź to, co chcemy by pojawiało się nad polem do logowania. Nasza wyobraźnia ograniczona jest tylko dwoma czynnikami:

  • Format GIF ma tylko 256 kolorów
  • Grafika ma rozmiary 290 pikseli szerokości i 66 pikseli wysokości

7.) Zapisujemy nasze dzieło pod nazwą logo-login.gif (najlepiej w innym katalogu niż ten do którego ściągneliśmy wersję pierwotną, by nie nadpisać kopii zapasowej)

Podmiana

8.) Nowy plik logo-login.gif wysyłamy na serwer do katalogu /wp-admin/images/ nadpisując już istniejącą grafikę o tej samej nazwie.

 

Bonus

Po zmianie nasze logo wciąż linkuje do http://wordpress.org. Aby to zmienić należy edytować plik wp-login.php (przed edycją zrób kopię zapasową!):

  • W pliku wp-login.php wyszukujemy wiersz #30 o treści:

    <div id=”login”><h1><a href=”<?php echo apply_filters(’login_headerurl’,‘http://wordpress.org/’); ?>” title=”<?php echo apply_filters(’login_headertitle’, __(’Powered by WordPress’)); ?>”><?php bloginfo(’name’); ?></a></h1>

  • Podkreślony fragment zmieniamy na adres naszego bloga. W przypadku makrocentrum.pl wynik zmian jest następujący:

    <div id=”login”><h1><a href=”<?php echo apply_filters(’login_headerurl’,‘http://makrocentrum.pl/’); ?>” title=”<?php echo apply_filters(’login_headertitle’, __(’Powered by WordPress’)); ?>”><?php bloginfo(’name’); ?></a></h1>

  • Gotowe!

Działający wynik zmian możecie sprawdzić na stroniehttp://makrocentrum.pl/wp-login.php

A może wtyczka

Jeśli wolisz do sprawy podejść za pomocą wtyczek polecam dwie:

  • dla WordPress 2.3.3 i niższych: Binary Moon Custom Login Page
  • dla WordPress 2.5: Branded Login Screen