Zlecenia z WordPressa bywają są różne, podobnie jak różni bywają zlecający je klienci. Z niektórymi współpracuje się tak dobrze, że aż żal kończyć projekt. Trafiają się niestety i tacy, o których można powiedzieć „diabli nadali”. Ci ostatni na pewno dają nam do myślenia. I niekoniecznie są to rozważania czysto programistyczne. Na przykład, zaczynamy się zastanawiać, czy inwestycja w kurs asertywności nie będzie lepsza niż w kolejny podręcznik o programowaniu webowym.
Podobno nie ma takiej książki, z której nie można by się było czegoś nauczyć. Moja „deweloperska”, parafraza tego powiedzenia brzmi: „Nie ma takiego WordPressowego zlecenia, z którego nie można byłoby nauczyć się czegoś nowego”. I to bez czytania książek. Czasami z pomocą Google’a, a czasami niemal wprost od klienta (jak zobaczymy na przykładzie w dalszej części).
Niżej przedstawiam pięć wybranych zagadnień, które poznałam podczas realizacji projektów z WordPressa.
1. Jak sprawić, aby zdjęcie w tle automatycznie dopasowywało się do rozmiaru przeglądarki
Strona swimple.pl, na której wykorzystano bgStrecher
Klient postawił wymaganie, żeby na blogu zdjęcia w tle zawsze rozciągały się na całą szerokość, słowem, dopasowywały do rozmiaru okna przeglądarki. Tak jak na stronie podlinkowanej obok.
Kiedy mamy link do strony z działającym przykładem, po podpowiedź, jak to zrealizować, nie potrzeba nawet sięgać do Google’a. Wchodzimy w podgląd źródła wskazanej przez klienta strony i widzimy, że użyto skryptu opartego o jQuery – bgStrecher. Na stronie skryptu znajdziemy paczkę z kodami, pozostaje zintegrować go z WP.
Integracja skryptu bgstretcher z WordPressem
1. Pobrane pliki bgstretcher.js oraz jquery-1.3.2.min.js przerzucamy do katalogu z motywem, podkatalogu js. 2. Obrazek tła przerzucamy do katalogu z motywem, podkatalogu images (w przykładzie użyto nazwy body-bg.jpg) 3. Do pliku functions.php motywu wstawiamy taki oto kod:
function load_javasrcipts() {
if(!is_admin()) {
wp_register_script( 'jquery_1_3_2',
get_bloginfo('template_directory') . '/js/jquery-1.3.2.min.js');
wp_enqueue_script('jquery_1_3_2');
wp_register_script( 'bgstretcher',
get_bloginfo('template_directory') . '/js/bgstretcher.js');
wp_enqueue_script('bgstretcher');
}
add_action('wp_print_scripts', 'load_javasrcipts');
4. Na końcu pliku style.css motywu wstawiamy linie, znalezione w kodach źródłowych pobranej paczki:
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed !important;
z-index: 1;
}
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
margin: 0;
padding: 0;
list-style: none;
}
5. Do pliku header.php motywu w części head dodajemy następujące linie (gdzie body-bg.jpg jest nazwą naszego obrazka):
<script type="text/javascript">
$(document).ready(function(){
$(document).bgStretcher({
<?php
$imgbg = get_bloginfo('template_directory') . '/images/body-bg.jpg'; ?>
images: ['<?php echo $imgbg ?>']
});
});
</script>
Po wykonaniu tych kroków powinniśmy zobaczyć obrazek w tle, elegancko dopasowany do szerokości okna.
2. Dlaczego po przeniesieniu WordPressa na inną domenę zniknęły widgety i jak temu zapobiegać
Kiedy po raz pierwszy przenosiłam WordPressa na inną domenę i z paska bocznego zniknęły widgety, specjalnie się tym nie przejęłam. Było ich tylko kilka, ustawiłam je ponownie ręcznie. Kiedy stało się to po raz drugi, w przypadku innego zlecenia, już wiedziałam, że to ja robię coś nie tak. Nie wiedziałam natomiast co. Kiedy problem znikających widgetów przy zmianie domen zgłosił klient, pomyślałam, że problem jest raczej globalny (to znaczy – ufff, nie tylko ja czegoś nie wiem), a skoro tak, to na pewno ktoś na świecie zna już obejście. No i faktycznie zna.
Strona interconnectit.com ze skryptem Search Replace DB
I nazywa się David Coveney. I jest autorem fenomalnego skryptu php „Search Replace DB”, rekomendowanego nawet przez Codex WordPressa (link do strony w formie obrazka obok).
O co chodzi? WordPress niektóre dane tekstowe (np. zawartość widgetów) przechowuje w bazie jako jako tzw. „serialized data”. Tworzone są indeksy, dzięki którym polepszona zostanie wydajność. Problem pojawia się wtedy, gdy przenosimy bazę WordPressową na nowa domenę i nazwa nowej domeny jest innej długości niż stara. Jeśli przy przeniesieniu bazy MySQL w nowe miejsce wykonaliśmy na bazie tradycyjny search/replace, to nie uwzględniliśmy danych serializowanych. W efekcie WordPress widgetów nie wyświetli w ogóle.
Skrypt pozwala zrobić zmiany na bazie w taki sposób, aby dla danych serializowanych zostały uwzględnione nowe długości stringów.
Przenoszenie bazy między domenami z wykonaniem podmiany nazw za pomocą skryptu Search Replace DB
1. Pobrać skrypt ze strony. 2. Wrzucić skrypt do katalogu głównego, w nowej domenie, gdzie zainstalowaliśmy WP 3. Przerzucić bazę MySQL z witryny w starej domenie na nową bez wykonywania żadnych zmian (w tym celu możemy użyć funkcji exportu i importu w phpMyAdmin) 4. Uruchomić skrypt wpisując odpowiedni URL w przeglądarce. Skrypt ma wygodny interfejs i zapyta o wszystkie potrzebne rzeczy, takie jak dostęp do bazy, a na końcu o stringi do podmiany (nazwa starej domeny -> nazwa nowej domeny). 5. Usunąć skrypt z serwera! 6. Przekonać się, że widgety są na swoim miejscu 🙂
3. Jak zaimplementować galerię z ciekawymi efektami bez przeładowywania strony.
Mało który klient wie, co to właściwie jest „ten AJAX”, ale już całkiem sporo ludzi „spoza branży” kojarzy AJAX-a jako coś, co magicznie sprawia, że strona zaczytuje kolejne porcje treści z serwera bez wymuszenia przeładowywania strony. „No, tak jak działają mapy Google”, mówią niektórzy. „Albo niektóre galerie” dopowiadają bardziej zorientowani.
Strona z demkiem galerii Spry
No i przychodzi taki obeznany-w-nowoczesnych-technologiach klient do dewelopera WordPressa i mówi: „Chcę mieć taka fajną galerię z bajerami, bez przeładowywania strony i koniecznie taką, która wyglądem wkomponuje się pięknie w całość witryny.” A ty programisto teraz się męcz i spróbuj klientowi wytłumaczyć, że bez użycia wtyczek to nie jest taka banalna sprawa. I zastanawiaj się, czy za 150zł, które zlecający jest w stanie na to przeznaczyć warto w ogóle podchodzić do tematu. Albo czekaj, aż los sam przyśle rozwiązanie.
Bo cuda się zdarzają… I tak oto pewnego dnia zjawia się inny klient, który nigdy nie śnił o zaczytywaniu zdjęć bez przeładowywania strony, a AJAX’a kojarzy tylko z płynem do podłóg, ale za to wysyła link do takiej właśnie galerii, bo ona po prostu mu się podoba. I ta galeria okazuje się nie być wtyczką. Co więcej, oparta jest na frameworku zupełnie darmowym, dobrze udokumentowanym i napisanym z myślą o webmasterach! Oczywiście klient (ten słabiej-obeznany-w-technologiach) nie ma o tym pojęcia, widzi tylko fajny efekt. Sprytny programista WordPressa natomiast szybko zagląda do źródeł HTML-a i po krótkiej wymianie zdań z Googlem już jest na tropie. I w ten oto sposób odkrywa darmową Galerię Spry firmy Adobe.
Demo galerii: labs.adobe.com/technologies/spry/demos/gallery/index.html Dokumentacja: http://labs.adobe.com/wiki/index.php/Spry:FAQ
Temat integracji tego frameworka z WP wykracza poza ramy tego artykułu, ale jeśli, drogi czytelniku, zaciekawi Cie jego rozwinięcie, daj znać w komentarzach. Napiszę osobny artykuł.
4. Jak bez użycia wtyczek dodać kontrolę antyspamową do formularza w WordPressie
Strona ze skryptem Securimage
Wtyczka Contact Form 7 (obsługa formularzy w WordPressie) jest prosta w obsłudze i potrafi sporo. Również wygenerować CAPTCHA (te bahomazy, które trzeba przeczytać i wpisać w pole formularza – BTW, kiedyś się zastanawiałam, czy pomysłodawcami tej dziedziny nie są przypadkiem aptekarze mszczący się nad lekarzami bazgrolącymi po receptach, ale doszłam do wniosku, że prędzej za tym stoją ludzie uczelni, to znaczy profesorzy, biorąc odwet na studentach, co to kolokwia piszą jak kura pazurem. Zdecydowanie profesorzy – CAPTCHA mogą przecież zawierać zagadnienia matematyczne).
Czasami jednak trzeba napisać bardzo specjalistyczny formularz, który oprogramujemy ręcznie. „No i ma być przy nim kontrola antyspamowa”, dorzuca na odchodne klient, tak jakby taką kontrolę dodawało się w 5 minut.
A tu się okazuje, że jednak można to zrobić w przysłowiowe 5 minut. Gdy się wie jak, oczywiście. Ja już wiem, Ty za chwilę też będziesz wiedzieć. Służy do tego darmowy skrypt Securimage, który dorzucamy do motywu WP.
Wskazówki w jaki sposób zintegrować ten skrypt z własnym kodem podane są szczegółowo na stronie quick-start-guide.
5. Jak dodać do zdjęć efekt lupy?
Strona z demkiem skryptu loupe
Czasami zachodzi potrzeba odczytania jakieś szczegółów ze zdjęcia. Na przykład internetowi zakupowicze lubią widzieć, co kupują i potrzebują dojrzeć szczegóły produktu. Albo może to być chęć odczytu słabo widocznego kodu, podpisu, czegoś z pewnością ważnego, skoro są ludzie, którzy takie potrzeby mają i skoro znajdują się programiści, którzy na takie zachcianki odpowiadają, przykładowo, tworząc skrypty z wirtualną lupą. Ja nie odpowiedziałam… To znaczy, odpowiedziałam klientowi, że nie wiem, za pomocą jakiego gotowego skryptu można ten efekt uzyskać w WordPressie. I wtedy klient sam wyruszył na poszukiwanie.
No i już wiem (od klienta!), że za pomocą darmowego skryptu loupe – a jQuery image magnifier jesteśmy w stanie łatwo uzyskać ten efekt. Pozostaje jego integracja z WordPressem, którą robimy analogicznie jak skryptu w punkcie 1. tego artykułu. Na koniec trzeba zadbać tylko o to, aby obrazek został zaopatrzony w odpowiednią klasą (class=”demo”).
Podsumowanie
Roboczy tytuł tego artykułu brzmiał: „WP-klient – anioł czy szatan wcielony?” i miał być odreagowaniem moich frustracji z powodu tych ostatnich. Kiedy jednak w trakcie pisania uświadomiłam sobie, jak dużo klientom zawdzięczam, postanowiłam zmienić temat na bardziej tendencyjny. Pierwotną ikonkę zostawiłam, dopisując na dole słówko „straszny”.
No to teraz już wiadomo, że WP-klient, to niekoniecznie ten z różkami. Czasami można się u niego dopatrzeć nawet aureoli. Prawie anioł: wzmocni poczucie bezpieczeństwa, godziwie płacąc za zlecenie i przy okazji zmotywuje do rozwoju. Oczywiście rzeczy, których nauczyłam się dzięki realizacji projektów z WordPressa jest znacznie więcej. Jeśli uważasz, że jest to dobry temat na kolejny artykuł (albo któreś z zagadnień trzeba uszczegółowić), daj proszę znać w komentarzach.
A co Ty zawdzięczasz swoim klientom?. Nauczyłeś się czegoś od nich albo tworząc projekty dla innych? Zapraszam do komentowania.
Comments