publikacja: 8 września 2009, autor: , komentarze 22 https://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:

Dodaj własny komentarz