publikacja: 8 września 2009, autor: , komentarze 22 http://wpninja.pl/artykuly/instalacja-flir-a-krok-po-kroku/

Instalacja FLIR-a krok po kroku

Instalacja FLIR-a krok po kroku

Pamiętasz FLIR-a – JS-ową mieszankę dzięki, której uzyskanie dowolnego kroju pisma jest bajecznie proste? Czas pokazać w jaki sposób zintegrować go z WordPressem bez użycia wtyczki.

Krok 1: Pobierz najnowszą wersję skryptu

Wejdź na oficjalną stronę skryptu i klikając na przycisk „download now!” pobierz najnowszą wersję. Ściągnięte archiwum rozpakuj.

Krok 2: Wybierz odpowiedni font

Font, który sobie upatrzyłeś powinien spełnić dwa warunki:

  • być w formacie TrueType (czyli z rozszerzeniem .ttf),
  • obsługiwać polskie ogonki (ą, ę, ń…).

Wybrany plik fonta umieść w rozpakowanym katalogu /facelift-x.x/fonts/.

Krok 3: Dodaj obsługę nowego fonta

Otwórz plik config-flir.php i w okolicach 40 wiersza znajdź poniższy kod:

$fonts = array();

Tuż za nim dodaj:

$fonts['krotka-nazwa'] = 'nazwa-pliku-z-fontem.ttf';

Gdzie „krotka-nazwa” będzie skrótem, za pomocą którego będziemy identyfikowali fonta. „nazwa-pliku-z-fontem.ttf” to nic innego jak nazwa pliku.

Dodawanie nowego fonta

Krok 4: Wgraj łatkę dla Internet Explorera

IE ma dziwną tendencję do niewyświetlania prawidłowo polskich ogonków. Aby usunąć problem powinieneś otworzyć plik flir.js, odszukać następującą linijkę:

enc_text = encodeURIComponent(enc_text.replace(/&/g, '{amp}').replace(/\+/g, '{plus}'));

i zaraz po niej dodać:

if(FLIR.isCraptastic) enc_text = escape(enc_text);

Poprawka dla Internet Explorera

Krok 5: Przegraj pliki na serwer

Zmień nazwę folderu na facelift i przegraj na serwer, np. do katalogu /js/, który znajdować się będzie w katalogu używanego szablonu graficznego. Ścieżka do pliku flir.php powinna wtedy wyglądać następująco:

(...)/wp-content/themes/nazwa-twojego-szablonu/js/facelift/flir.php

Podkatalogowi /cache/ nadaj prawa do swobodnego zarządzania (chmod 777).

Krok 6: Dodaj odwołanie do pliku JavaScript

Otwórz plik footer.php, który znajduje się w katalogu szablonu graficznego i tuż przez znacznikiem </body> dodaj odwołanie do pliku JavaScript FLIR-a:

  • jeśli korzystasz z jQuery:
    1
    2
    3
    4
    5
    
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/facelift/flir.js"></script>
    <script type="text/javascript">
    FLIR.init( { path: '<?php bloginfo('template_url'); ?>/js/facelift/' } );
    jQuery('#content h2').each( function() { FLIR.replace(this, new FLIRStyle({cFont:'dineng'})); } );
    </script>
  • jeśli nie korzystasz z jQuery:
    1
    2
    3
    4
    5
    
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/facelift/flir.js"></script>
    <script type="text/javascript">
    FLIR.init( { path: '<?php bloginfo('template_url'); ?>/js/facelift/' } );
    FLIR.replace( '#content h2' , new FLIRStyle({cFont:'dineng'}) );
    </script>

Krótkie wyjaśnienie powyższego kodu:

  • linijka 1: ładowanie plik JavaScript FLIR-a – powinieneś zwrócić uwagę na podanie poprawnej ścieżki (w powyższym przykładzie założyłem, że zamieściłeś FLIR-a w miejscu podanym w punkcie 5.);
  • linijka 2 i 5: otwarcie i zamknięcie znacznika JavaScript;
  • linijka 3: zainicjowanie FLIR-a – podobnie jak w przypadku 1. linijki powinieneś mieć baczenie na zachowanie poprawnej ścieżki;
  • linijka 4: wskazanie, które elementy mają być zamienione – jak widać ja wskazałem na H2, który znajduje się u mnie w bloku #content – najprawdopodobniej Ty będziesz musiał wskazać co innego; linijka ta zawiera także informację o tym jakiego fonta chcesz użyć (dineng) – jest to właśnie ta „krotka-nazwa” z punktu 3.

Krok 7: Dodaj style CSS do elementu

W tym momencie możesz już wszystko zapisać i odświeżyć stronę. Jeśli wszystkie powyższe kroki wykonałeś poprawnie to gratulacje – masz graficzne zamienniki dla tekstów. Teraz wystarczy otworzyć plik ze stylami CSS i dodać odpowiednie wartości dla wybranych elementów.

Porównanie: przed i po

Przed zastosowaniem FLIR-a - zwykły tekst

Po zastosowaniem FLIR-a - graficzny nagłówek

Jeśli masz jakieś pytania lub chciałbyś pochwalić się swoim dziełem – zapraszam do komentarzy.

tagi:

Komentarze

  1. aniec2 7 lat temu:

    Bardzo dobra robota, wtedy się nie zabrałem za testowanie a teraz spróbuje!

    odpowiedz
  2. rzepak 7 lat temu:

    jedna uwaga, czy przy używaniu jQuery kod – $(„#content h2”) to dobre wyjście? w WP jQuery śmiga, a przynajmniej powinno śmigać w noConflict.
    poza tym fajnie że w końcu coś nowego się pojawiło na blogu :)
    a swoją drogą preferuję Cufon’a ;)
    pozdr

    odpowiedz
  3. Szymon Skulimowski 7 lat temu:

    w WP jQuery śmiga, a przynajmniej powinno śmigać w noConflict.

    Racja, mój błąd – dzięki :-).

    a swoją drogą preferuję Cufon’a ;)

    Szkoda tylko, że przerobione JS-owe pliki fontów potrafią być naprawdę spore – ostatnio podczepiałem dwa fonty o łącznej wadze ponad 300 kb (bez kompresji) :-)

    odpowiedz
  4. SpeX 7 lat temu:

    A nie lepiej było by zastosować Web Fonts (http://www.kminek.pl/web-fonts/)? W takim przypadku tekst jest tekstem, a nie grafiką.

    odpowiedz
  5. Szymon Skulimowski 7 lat temu:

    Tak ale wspomniane Web Fonts nie posiada wsparcia dla starszych przeglądarek (innych niż IE) i nie oferuje żadnych zabezpieczeń fontów – każdy może je pobrać co może kolidować z licencją, którą posiadasz.

    odpowiedz
  6. Zacol 7 lat temu:

    Wygląda super, ale swoje waży. Jest to dość odczuwalna różnica czy raczej nie?

    odpowiedz
  7. SpeX 7 lat temu:

    Co do licencji, to raczej nie kłopot, bo raczej w rachubę wchodziło by jedynie wykorzystanie darmowych wersji. Ciekawą opcję jest .eot gdzie definiuje się na jakich stronach www można wykorzystać fonta. Tylko na razie wspiera je tylko IE :/

    odpowiedz
  8. Custom 7 lat temu:

    No. I oby więcej takich wpisów ;>

    odpowiedz
  9. Igor / vellkan 7 lat temu:

    A ja mam taki problem, że tak wtyczka obcina mi dolne części napisu i ostatnią literę w zdaniu.
    Próbowałem zrobić to jako h2, span, p i nic.
    Zawsze ten sam efekt, o taki: http://vellkan.pl/screen.jpg
    Ostatnie trzy litery to ygq :/

    odpowiedz
  10. Igor / vellkan 7 lat temu:

    Ech, człowiek zamiast się żalić powinien najpierw poszukać :/
    Przepraszam, ale znalazłem informacje o tym błędzie.
    Występuje on kiedy nasz PHP jest w wersji 5.3.0.
    W każdej innej problem nie występuje…

    odpowiedz
  11. marsjaninzmarsa 7 lat temu:

    Raczej nie zainstaluję, ale i tak ciekawy skrypt – zastanawia mnie tylko, co w przypadku dłuższych nagłówków – jak sobie radzi z zawijaniem wierszy? Pobiera dynamicznie szerokość elementu nagłówka za pomocą js? Bo rozumiem że generowany jest jeden, duży plik graficzny na całą stronę…?
    No, i co z tłem pod tekstem…? Bo z tego, co się orientuję, to php nie ma możliwości generowania obrazków z płynną skalą przezroczystości…

    odpowiedz
  12. hubert 7 lat temu:

    Ze swojej strony dodam że w przypadku korzystania z JSowego podmieniania fontów jest brzydki efekt przy samej podmianie. Najlepiej napisac helper’a (np w PHP)

    odpowiedz
  13. sebapple 7 lat temu:

    Nie wiem dla czego, ale mi to nie działa.

    odpowiedz
  14. Szymon Skulimowski 7 lat temu:

    Przejrzałem Twój kod i wszystko wskazuje na to, że nie przegrałeś plików na serwer w odpowiednie miejsce (error 404):
    http://sebapple.pl/wp-content/themes/urbanelements/wp-content/themes/urbanelements/facelift/flir.js

    odpowiedz
  15. sebapple 7 lat temu:

    w ogóle jakaś ścieżka namieszana, nie wiem OCB ?

    odpowiedz
  16. Szymon Skulimowski 7 lat temu:

    A gdzie na serwerze umieściłeś pliki FLIR-a?

    odpowiedz
  17. sebapple 7 lat temu:

    /wp-content/themes/urbanelements/facelift

    TU.

    odpowiedz
  18. Szymon Skulimowski 7 lat temu:

    /wp-content/themes/urbanelements/facelift

    Spróbuj otworzyć plik flir.js (znajduje się w katalogu FLIR-a) przez przeglądarkę internetową. Na razie masz pod tym adresem error 404 więc albo pomyliłeś ścieżkę albo masz dziwnie ustawione prawa dostępu do katalogu (chmod-y).

    odpowiedz
  19. Bielik 7 lat temu:

    Niestety nie działa. Nadałem odpowiednie chmod-y, ścieżka też jest raczej poprawna. What went wrong?
    P.s
    skąd wiedzieć czy wpisać ‚h1’, ‚h2’ itd. dla edycji czcionek poszczególnych sekcji?

    odpowiedz
  20. Paweł 7 lat temu:

    Ja mam problem z tym – czcionka leci w jednej linii, nie ważne, że nachodzi na inne elementy strony…
    Jaki powód?

    odpowiedz
  21. Paweł 7 lat temu:

    Moje pytanie dotyczy http://www.gosiunia.pl

    odpowiedz
  22. marsjaninzmarsa 7 lat temu:

    @Belik: h1, to zazwyczaj „główny” tytuł strony, h2 podtytuł, h3 tytuł posta, itd… Jak masz Fx, to możesz zainstalować sobie Firebuga, i za jego pomocą sprawnie przeglądać kod. A jak Chrome, to już to masz w standardzie (pod prawoklikiem) ;)

    odpowiedz

Dodaj własny komentarz