Zlecenia z WordPressa – 5 rozwiązań, które poznałam dzięki klientom

Zlecenia z WordPressa - nauka od klientów
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

Zlecenia z WordPressa - jak rozciągnąć obrazek w tle
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.

Zleceina z WordPressa - rozciąganie obrazków tła
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.

Zlecenia z WordPressa - galeria na AJAX
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

Zlecenia z WordPressa - skrypt CAPTCHA
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?

Zlecenia z WordPressa - skrypt z lupą
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.

Inne wpisy o podobnej tematyce:

31 komentarzy do “Zlecenia z WordPressa – 5 rozwiązań, które poznałam dzięki klientom”

    1. Ja jestem zwolennikiem klasycznego powiększania, bo lubię ogarniać całość. Efekt lupy mnie raczej drażni np. na photostockach. Jednak czasami na zdjęciu nawet o dużych wymiarach nie widać wszystkich szczegółów, a miejsce na stronie jest ograniczone, żeby od razu pokazać fotkę w całości, głównie przy skanach i wtedy efekt lupy faktycznie może się sprawdzić.

        1. To jak się sprawdzi, to daj znać, podlinkuję Twoją stronę do artykułu, jako działający przykład.

  1. Wszystko fajnie, bardzo przydatna sprawa.
    Nie miałem pojęcia o tej galerii od Adobe.

    Ale…
    Wszytkie funkcje JS proponuję umieszczać nie w headerze, tylko na dole footera. To bardziej poprawna praktyka.
    A jezeli chodzi o prznoszenie WordPressa, bardzo polecam BackupBuddy – plugin ktory zorbi to wszytko za nas w kilka sekund. Pomocna sprawa – polecam.

    1. Dziękuję za konstruktywne uwagi. Może niedługo opublikuję artykuł z listą rzeczy, których nauczyłam się dzięki komentatorom bloga.

  2. Hej, a w punkcie pierwszym to może tak będzie łatwiej:

    html {
    background:url(image/background.png) no-repeat center center;
    height: 100%;
    background-size:cover;
    }

    1. Hej, dzięki za komentarz. To CSS3. Tak faktycznie będzie prościej, ale tylko dla nowszych przeglądarek. Sprawdzałeś czy IE7 i IE8 sobie z tym radzi?

    1. Dzięki za komentarz. Zawsze niezmiernie się cieszę, jeśli coś, o czym pisze komuś posłużyło. Weszłam właśnie nie Twój blog i mnie też zaciekawił artykuł u Ciebie „Reklama w blogu to kłopoty z fiskusem?”. Nie chciałeś skorzystać z opcji commentluv zostawiając komentarz? Masz ciekawy blog.

  3. Kulturalnie powiem Witam bo to mój pierwszy komentarz. Aczkolwiek odkąd zacząłem zabawę z WP zaglądałem tu już kilku krotnie i szczerzę powiem że przeczytane tu informacje niejednokrotnie ułatwiły mi życie 😉

    To może do rzeczy. Chodzi mi o pkt. 2. Mianowicie zastanawia mnie czy tym skryptem można przepisać wszystkie adresy. Niejednokrotnie byłem zmuszony przenosić WP wraz z bazą (export – import – phpMyAdmina – SQL i polecenie UPDATE) i niestety nie raz z dużymi komplikacjami mimo z pozoru prostego zabiegu :/ Chociaż mam świadomość że może to wynikać z mojej szczątkowej wiedzy na temat baz. Zastanawiam mnie też czy podany wyżej plugin „BackupBuddy” jest faktycznie tak banalny i błyskawiczny, ktoś może testował ?

    Mam też małe pytanie spoza tematu(jeśli można). Ostatnio klient zapytał się czy w menu bocznym, sidebarze nie można zrobić każdego punktu w menu, jak on to nazwał „z różnymi ikonkami w różnych kolorach”. Czyli przykładowo „o nas” słonik na różowym, „oferta” króliczek na zielonym itd. Jest może na to jakieś w miarę proste i szybkie rozwiązanie, np. wtyczka ? Z góry dziękuje i pozdrawiam 😉

    P.S. Naprawdę kawał dobrej wiedzy na temat wordpressa 😉

    1. Witam serdecznie. Dziękuję za ciekawy komentarz i miłe słowa.

      Jeśli chodzi o punkt 2. Mi przy przy użyciu tego skryptu udało się nadpisać wszystkie adresy, było to w przypadku zwykłej witryny na WP (nie MultiSite). Przenoszenie WP między domenami to wbrew pozorom nie jest wcale taki prosty zabieg, bo WP przechowuje te adresy w wielu miejscach i w różnej postaci – sprawa się bardziej komplikuje przy WP MultiSite i wcale mnie nie dziwi, że ludzie mają przy tym różne niespodzianki. Wcześniej, nie wiedząc jeszcze o serialized data, robiłam zwykły search/replace na pliku tekstowym po eksporcie bazy do pliku tekstowego, a przed importem na nową domenę, wszystko działało oprócz zapisów serializowanych. Przy bardzo dużych bazach taka operacja (z podmianką na pliku tekstowym) może się nie udać, bo nie wszystkie edytory sobie poradzą z wielkością pliku.

      Pluginu BackupBuddy jeszcze nie próbowałam, więc nie wypowiadam się.

      Jeśli chodzi o pytanie z menu w sidebarze. Jeśli to jest menu, które powstało przy pomocy funkcji wp_nav_menu, to jak najbardziej te ikonki można dodać techniką pokazaną w tutorialu na tym blogu (2 posty wstecz). Nie jest to prosta metoda (oczywiście zakładam, że znasz dobrze CSS-a), ale przeze mnie sprawdzona, a własne menu równie dobrze jak w headerze możemy umieścić w sidebarze, nawet poprzez widget. Podobno kontrolę nad menu można przejąć w jeszcze prostszy sposób, za pomocą filtrów. Pisała o tym Ola na blogu wpninja, zapowiedziała też ciąg dalszy artykułów.

  4. Witam!
    Mam pytanie odnośnie punktu pierwszego. Czy możliwa jest integracja skryptu bgstretcher z każdym gotowym szablonem WP? I w którym miejscu najlepiej wstawić kod do pliku functions.php
    Jestem początkująca, więc nie wiem czy moje pytania mają sens:)

    1. Teoretycznie tak, ale nie mamy gwarancji, że w trakcie integracji nie może wystąpi jakiś konflikt – np. z istniejącymi klasami CSS lub z innymi skryptami js. Ja próbowałam integrować go już z trzema motywami i w dwóch poszło gładko, w trzecim musiałam zmienić jedną regułę z-index w CSS. Kod do pliku functions.php należy wstawić na końcu, ale nie jest to konieczne, właściwie można w dowolnym.

  5. Przyznam szczerze, zainteresował mnie temat tej galerii, o której wspomniałaś w punkcie 3. Tworzenie galerii to póki co jeszcze nie moja działka, ale zastanawiam się, czy jednak nie była by to całkiem przydatna umiejętność.
    Jako bierny użytkownik lupy mogę stwierdzić, że robi najlepsze wrażenie. Takie małe oszustwo klienta, któremu wydaje się, że dojrzał każdy ubytek w towarze, który chce nabyć 😀

    1. Dziękuję za komentarz. Galeria z punktu 3. nie jest łatwa do integracji. To znaczy jakoś super trudna też nie jest, ale sprawdza się do dłubania w kodzie. Na początek chyba lepiej gryźć się w zastosowania domyślnej galerii WP albo nexg gen gallery i jakiś wtyczek, które ją „uatrakcyjniają”. Coś o ciekawych zastosowania galerii na pewno napiszę, bo to temat przewijający się w praktycznie każdym projekcie. Pozdrawiam! Aga

  6. Witam,

    Jak zawsze mnie zaskakujesz 🙂 pozytywnie 🙂
    Mam pytanko z innej beczki 🙂

    Mam strone na WP z 8 stronami (zakladkami). Jedna zakladka to GALERIA. Tutaj chce zrobic tak ze po kliknieciu jej pojawiaja sie 3 poddzialy np NASZE REALIZACJE I NASZE PROJEKTY, w kazdym z nich beda zdjecia powiazane z pluginem NEXTGEN GALLERY.
    Chce oczywiscie aby po dodaniu tych 2 stron z podgaleriami w menu glownym nie bylo ich, czyli chyba musze ustalic dla tych stron rodzica prawda? robi sie to bodajze w zakaldce STRONY tak? 🙂
    Dobrze rozumiem?:0

    1. Dzięki za komentarz.

      Odpowiadając na Twoje pytanie, najwygodniej zrobić to tak:

      1) W ngg utworzyć albumy:
      – realizacje
      – projekty
      – …
      i do nich na poziomie ngg przeciągać te galerie, które są powiązane z danym tematem

      2) Na poziomie zakładania stron w WP, założyć taką hierarchię stron:
      Galeria (strona) – tu wstawić shortcode albumu
      – realizacje (podstrona) – tu wstawić short code galerii
      – projekty (podstrona) – tu wstawić short code galerii

  7. Ale jak zaloze te podstrony na poziomie zakaldania stron w WP to one nie pojawia sie czasem w menu? (czego nie chce)?

    1. To zależy od motywu. Jeśli motyw ma menu oparte o wp_nav_menu, czyli że Ty sam sobie konfigurujesz menu z poziomu Wygląd->Menu, to po prostu tych podstron nie dodasz do menu.

  8. Tzn ja robie strone od podstaw na podstawie tutoriala z tej strony 🙂 i menu robie w oparciu o polecenie list-pages czy cos w tym stylu w kazdym badz razie te starsze polecenie to jest.
    A przy tym wlasnie pole ceniu lsit-pages tez moge t ozrobic czyli wyglad-menu i to tma ustalic?

    Sprawdze to dzis, dzieki za podpowiedz 🙂

  9. Wlasnie w list-pages jak sie doda strone to zawsze ona laduje rowniez i w menu, wiec zrobie menu oparte o wp_nav_menu i tam bedzie mozna wybrac co ma byc w menu ktora strona a ktora nie:) Jesli to osiagne to potem prosto bedzie podlinkowac dany link do tejze podstrony i umiescic w niej dana tresc 🙂

  10. Dzieki za skrypty z lupą i przenoszeniem domen.

    Mi potrzebny byłby artykuł najczęstszych pułapek pisania motywów – pułapek złego wyświetlania się strony gdy klient źle wprowadzi dane. Różne problemy jakie wynikają z nieznajomości się klienta. Jakie to są problemy i jak sobie z nimi radzić.

    Oraz różne tricki zapobiegawcze, coś w stylu tego co wyczytałem w stylu twentytwelve:
    Stworzona funkcja tworzenia menu, która obsługuje wp_nav_menu(), ale jeśli menu nie zostało przypisane to wyświetla wp_list_pages(). Jakie tego typu zabezpieczenia stosujesz / warto stosować.

    Bardzo fajny blog, od razu subskrypcja RSS 😀

Skomentuj Łukasz Więcek - Majsterkowo.pl Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.