
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);
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.ph
p, 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:
<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:
<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.
Komentarze
Bardzo dobra robota, wtedy się nie zabrałem za testowanie a teraz spróbuje!
odpowiedzjedna uwaga, czy przy używaniu jQuery kod – $(„#content h2”) to dobre wyjście? w WP jQuery śmiga, a przynajmniej powinno śmigać w noConflict.
odpowiedzpoza tym fajnie że w końcu coś nowego się pojawiło na blogu :)
a swoją drogą preferuję Cufon’a ;)
pozdr
Racja, mój błąd – dzięki :-).
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) :-)
odpowiedzA nie lepiej było by zastosować Web Fonts (http://www.kminek.pl/web-fonts/)? W takim przypadku tekst jest tekstem, a nie grafiką.
odpowiedzTak 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.
odpowiedzWygląda super, ale swoje waży. Jest to dość odczuwalna różnica czy raczej nie?
odpowiedzCo 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 :/
odpowiedzNo. I oby więcej takich wpisów ;>
odpowiedzA ja mam taki problem, że tak wtyczka obcina mi dolne części napisu i ostatnią literę w zdaniu.
odpowiedzPró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 :/
Ech, człowiek zamiast się żalić powinien najpierw poszukać :/
odpowiedzPrzepraszam, 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…
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ę…?
odpowiedzNo, 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…
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)
odpowiedzNie wiem dla czego, ale mi to nie działa.
odpowiedzPrzejrzałem Twój kod i wszystko wskazuje na to, że nie przegrałeś plików na serwer w odpowiednie miejsce (error 404):
odpowiedzhttp://sebapple.pl/wp-content/themes/urbanelements/wp-content/themes/urbanelements/facelift/flir.js
w ogóle jakaś ścieżka namieszana, nie wiem OCB ?
odpowiedzA gdzie na serwerze umieściłeś pliki FLIR-a?
odpowiedz/wp-content/themes/urbanelements/facelift
TU.
odpowiedzSpró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).
odpowiedzNiestety nie działa. Nadałem odpowiednie chmod-y, ścieżka też jest raczej poprawna. What went wrong?
odpowiedzP.s
skąd wiedzieć czy wpisać 'h1′, 'h2′ itd. dla edycji czcionek poszczególnych sekcji?
Ja mam problem z tym – czcionka leci w jednej linii, nie ważne, że nachodzi na inne elementy strony…
odpowiedzJaki powód?
Moje pytanie dotyczy http://www.gosiunia.pl
odpowiedz@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) ;)
odpowiedzDodaj własny komentarz