Modernizacja i przeniesienie strony na WordPressa – studium przypadku

Przeniesienie strony WordPress
Często dostaję zapytania o takiej mniej więcej treści: „Mam już stronę, ale chciałbym ją przenieść na WordPressa. Treści i wygląd zostają te same.” Ktoś, kto wysyła takie zapytanie, liczy, że koszt takiej usługi będzie niewielki, bo przecież wszystko już jest: treść, układ, grafiki, podział na zakładki. Trzeba tylko – w jakiś sposób (właściciela witryny nie interesuje w jaki, bo specjalistą od WordPressa to on nie jest, przecież do speca właśnie się zwraca) przenieść to wszystko do WordPressa.

Moje doświadczenia pokazują, że tego rodzaju zapytania kończą się zwykle dwoma scenariuszami.

Przypadek 1. Klient uprze się, że strona ma wyglądać koniecznie tak, jak wygląda obecnie, a potem oburzy się, że chcemy za tę usługę takie niemiłosierne pieniądze.

Przypadek 2. Klient zrozumie, że przeniesienie strony z innego systemu na WordPressa przy zachowaniu dokładnie tego samego wyglądu i funkcjonalności to kawał roboty programistycznej. Często bezsensownej, bo w WordPressie można podobny efekt osiągnąć szybciej innymi sposobami. I co ważniejsze, dzięki zmianie koncepcji jeszcze lepiej dostosować nową stronę do dzisiejszych standardów.

Klient, którego strona będzie przedmiotem tego artykułu, należał na szczęście do tej drugiej grupy. Zapraszam do lektury tych wszystkich, których ciekawi, na czym konkretnie polegała praca nad przeniesieniem strony do WordPressa.

Czego dowiesz się z artykułu:

  • Jak przebiegały konsultacje i prace nad ustaleniem nowej koncepcji strony.
  • Dlaczego zdecydowaliśmy się na takie a nie inne nowe ujęcie danej kwestii.
  • Jakie dobre praktyki tworzenia stron www zastosowaliśmy.
  • Jakie gotowe wtyczki do WordPressa zostały wykorzystane do osiągnięcia danego efektu.
  • Jakie zmiany programistyczne były niezbędne do osiągnięcia postawionych celów.

Przedmiot zlecenia

Cel:

Przeniesienie witryny potorski.pl na WordPressa połączone z wykonaniem modernizacji

Wymagania i założenia:

  • Na czas prac nad nową stroną dotychczasowa strona powinna być dostępna dla odwiedzających
  • Zmieścić się w budżecie klienta (zlecenie niskobudżetowe)
  • Zachowanie obecnej funkcjonalności, w tym m.in.:
    • możliwość dodawania informacji o warsztatach i szkoleniach
    • możliwość prowadzenia Media room – dodawania informacji o artykułach publikowanych dla prasy i innych portali
    • strona zintegrowana z blogiem, który przyciągnie odwiedzających i wzmocni pozycję witryny w wyszukiwarkach

Wygląd strony przed zmianami

Prace nad stroną – od czego zacząć

Prace nad stroną - checklist

Ustalenie budżetu
Nie odrzucam zleceń niskobudżetowych. Co więcej, wolę przyjąć kilka zleceń za mniejsze pieniądze od klientów, z którymi dobrze się dogaduję, niż jedno duże, za którym stoi jakiś nieprzyjemny agresor lub niezdecydowany maruda (ci są chyba jeszcze gorsi).
Ustalenie zasad współpracy i zakresu wymagań
Najważniejsze, żeby ustalić zasady współpracy i wytłumaczyć klientowi, jakie usługi w ramach danego budżetu możemy wykonać. Często w tym celu stosuję wtyczkę Clever list. Instaluję ją na nowo-tworzonej stronie klienta i wpisuję podzadania, na które się umówiliśmy. Zasada jest prosta. Gdy w trakcie prac dochodzą nowe wymagania, klient dopisuje je na tę listę ze świadomością, że liczba tych zadań wpłynie na kwotę końcową. W przypadku, gdy budżet jest określony tylko ogólnie i ostateczna kwota zależeć będzie od wszystkich wykonanych prac, taka lista będzie doskonałym przypomnieniem dla obu stron, jak dużo zostało zrobione.
Wybór motywu
Wszystkie zlecenia niskobudżetowe wykonuję w oparciu o gotowy motyw. Bez wyjątku. Inaczej się po prostu nie opłaca. Dla klienta oznacza to, że nie będzie mieć dużo swobody w decydowaniu, jak strona będzie wyglądać. Ale są i plusy takiego podejścia: nie kupujemy kota w worku, możemy zawczasu (np. na stronie demo) zobaczyć, jak to będzie funkcjonować.
Inwestycja w zdjęcia
Nie należy żałować pieniędzy na porządne zdjęcia. Dobrej jakości zdjęcia, odpowiednio dobrane, nadadzą stronie profesjonalny wygląd. Jeśli liczymy każdą stówkę, możemy zdecydować się na darmowy motyw, a 200zł które oszczędzimy na kupnie płatnego, możemy z powodzeniem przeznaczyć na zakup profesjonalnych zdjęć. Tak miało to miejsce w naszym przypadku.

Szukanie odpowiedniego motywu

Jak znaleźć odpowiedni motyw?

Sposobów na szukanie motywów jest mnóstwo. W tym przypadku chciałam znaleźć motyw:

  • darmowy
  • responsywny (dopasowujący się szerokością do dowolnego urządzenia: smartfon, table, …)
  • lekki, przejrzysty, o nowoczesnym wyglądzie i jasnych kolorach (tak kojarzy mi się dziedzina klienta, czyli psychologia i seksuologia)
W poszukiwaniu motywu WordPressa
W poszukiwaniu motywu WordPressa
Wybór pada na motyw responsywny Retina
Wybór pada na motyw responsywny Retina

Weszłam więc w wyszukiwarkę motywów w panelu WordPressa i wpisałam hasło responsywny (pierwsze zdjęcie z lewej).

Motyw Retina od razu wpadł mi w oko. Pewnie nie bez znaczenia było piękne zdjęcia drzewa na tle nieba. Po dokładniejszym obejrzeniu możliwości motywu, oczami wyobraźni już widziałam, jak zaadoptować go do treści klienta.

Nowa wizja strony – pierwszy pomysł

W związku z tym, że motyw był darmowy, mogłam od razu go zainstalować i zaadoptować moją wizję. Wybrałam kilka „prewek” zdjęć z istockphoto.com i wysłałam swoją propozycję klientowi, wraz z linkiem do strony demo motywu.

Wykaz usług na stronie głównej
Wykaz usług na stronie głównej
Pomysł na przedstawienie oferty szkoleniowej
Pomysł na przedstawienie oferty szkoleniowej
Pomysł na zagospodarowanie stopki
Pomysł na zagospodarowanie stopki

Klientowi pomysł się spodobał, jednak przy przeglądaniu witryny motywu, jeszcze bardziej do gustu klienta przypadł inny motyw tego samego autora.

Był to motyw Attitude. Bardzo zbliżony do motywu Retina, również darmowy i do pobrania z repozytorium WordPressa.

Czy w motywie Attitude uzyskamy pożądaną funkcjonalność?

Propozycja wykorzystania rotatora
Propozycja wykorzystania rotatora
Nowy pomysł na przedstawienie szkoleń
Nowy pomysł na przedstawienie szkoleń

Motyw Attitude też mi się podobał. Miałam tylko jedną wątpliwość. Czy uda się go przystosować małym kosztem do zarządzania szkoleniami i media-roomem. Okazało się, że jest to możliwe po wprowadzeniu niewielkich zmian w kodach źródłowych. Jakich, o tym w dalszej części artykułu.

Kolejna propozycja jaką wysłałam klientowi wyglądała tak, jak na obrazkach obok.

Klient ogólnie propozycję zaakceptował, miał jednak inny pomysł na wykorzystanie rotatora: Zamiast krzykliwych informacji informujących o zakresie usług i tym samym nadających stronie biznesowy charakter (czego klient chciał uniknąć), wprowadzić coś, co pozwoli odwiedzającemu zatrzymać się, wyciszyć natłok myśli i odnaleźć jakiś sens, cel, idee.

Ostatecznie ustaliliśmy, że rotator zostanie wykorzystany do prezentacji „złotych myśli”, powiązanych z życiem i psychologią.

Ustalenia finalne

Podstawy mieliśmy już ustalone:

  • Jaki motyw będzie wykorzystany – motyw responsywny Attitude.
  • Zdjęć poszuka klient, jako osoba, która lepiej czuje „klimat” swojej dziedziny. Ale sugestie z mojej strony mile widziane.
  • Prace będę wykonywać na stronie docelowej, w WordPressie zainstalowanym w podkatalogu.

Instalacja WordPressa na stronie klienta

WordPress nowy hosting stara domena

Wszystkie zlecenia wykonuję od razu w witrynie docelowej klienta.

  • Instaluję WordPressa w podkatalogu.
  • Stronę ukrywam na czas prac wtyczką Under Construction.
  • Daję klientowi dostęp do nowej strony, zakładając dla niego użytkownika na prawach admina.
  • Po zakończeniu prac:
    • przepinam wskazanie domeny głównej na podkatalog (szczegóły tutaj),
    • wyłączam wtyczkę Under Construction,
    • wyłączam blokadę dla botów indeksujących,
    • zgłaszam witrynę do zindeksowania dla wyszukiwarek.

Takie podejście pozwala mi zaoszczędzić sporo czasu:

  • Klient widzi wszystko „na żywo”. Nie muszę wysyłać screen shotów, żeby wytłumaczyć, jak coś wygląda i działa.
  • Nie muszę martwić się dodatkowym procesem przenoszenia witryny (np. z mojego localhosta lub mojego serwera na serwer docelowy) i tym samym martwić, że po przeniesieniu coś przestanie działać.
  • Przepięcie domeny głównej na podkatalog trwa ekspresowo. Strona jest niedostępna dla odwiedzających co najwyżej kilka minut.

Zacznijmy od początku, czyli od headera

Porównanie starej i nowej wersji headera
Porównanie starej i nowej wersji headera

Kiedy witryna już stoi, zabieramy się za zmiany w motywie. Zaczynam od headera, bo to na nim skupia się cała uwaga odwiedzającego. Rówież dlatego, że częścią headera jest zwykle menu główne, które pozwala nam określić podstawową strukturę strony.

Nazwa i podtytuł witryny
W stosunku poprzedniej wersji strony odwróciliśmy rolę tytułu i podtytułu. Zasada jest prosta: nazwa to coś, co identyfikuje firmę/osobę. Podtytuł jest konieczny, gdyż niesie ważne rozwinięcie: informuje, czym dana osoba/firma się zajmuje.
Menu główne
W stosunku do poprzedniej witryny zmieniliśmy kolejność pozycji w menu. Zasada, którą się kierujemy: spojrzeć na menu oczami odwiedzającego. Na pierwszych pozycjach umieszczamy informacje najbardziej poszukiwane. Dlatego u nas zaraz po stronie głównej znalazła się zakładka „Komu pomagam”.
Ważne odnośniki (zakładki społecznościowe)
Header to dobre miejsce do umieszczenia odnośników do miejsc powiązanych ze stroną (twitter, facebook, g+) oraz wyszukiwarki. Tutaj wykorzystaliśmy po prostu gotowe możliwości motywu.

Strona główna – zatrzymajmy się na dłużej

Nowa strona główna
Nowa strona główna

Cele strony głównej:

Informować o czym jest witryna
Gdy jesteś w obcym mieście i wchodzisz do przypadkowego sklepu, już po kilku sekundach jesteś w stanie odpowiedzieć na pytanie, jaki towar w tym sklepie znajdziesz. Podobnie powinno być ze stroną główną. Zerkając na nią, odwiedzający powinien szybko dowiedzieć się, gdzie trafił. Czyli jakie usługi i informacje znajdzie w witrynie.
Zainteresować i zrobić dobre wrażenie
Adres strony głównej podawany jest na wizytówkach. W odnośnik „Home” często klikają również ci odwiedzający, którzy trafili na Twoją stronę z Google, np. na jakiś konkretny artykuł, lecz zainteresowali się Twoją witryną.
Informować o nowościach
Strona główna, z racji tego, że jest bardzo często odwiedzana, będzie również idealnym miejsce na informacje o nowościach.

Dlatego na budowę strony głównej należy poświęcić najwięcej uwagi.

Przyjrzymy się zatem poszczególnym elementom składających stronę główną, każdemu z osobna.

Rotator i info pod rotatorem

Rotator i obszar z dodatkowym opisem
Rotator i obszar z dodatkowym opisem

Jak już wspomniałam wcześniej, została nieco zmieniona rola rotatora. Jego nowa funkcja to prezentacja zdjęć i mądrych myśli, które pozwolą na zatrzymanie się w gonitwie codziennych spraw i chwilę refleksji.

Wykorzystanie niebieskiego paska pod rotatorem było w motywie Attitude opcjonalne. Nie miałam jednak wątpliwości, że użycie go będzie dobrym posunięciem. Taki pasek stanowi nie tylko eleganckie dopełnienie graficzne do rotatora, lecz jest dobrym miejscem na wprowadzenie istotnego dla witryny przekazu. Zyskujemy też dodatkowe słowa kluczowe pod kątem SEO.

Zakres usług

Możliwość przedstawienia usług w motywie Attitude
Możliwość przedstawienia usług w motywie Attitude
Prezentacja usług z wykorzystaniem obrazków
Prezentacja usług z wykorzystaniem obrazków

Pod rotatorem zaplanowałam przedstawić 3 grupy informacji, które pozwolą na zorientowanie się, w czym specjalizuje się właściciel witryny.

Przygotowany na ten cel gotowy widget motywu Attitude (nazwa Services) nie do końca spełniał moje oczekiwania. Pozwalał wybrać do sześciu podstron i wyświetlić je w formie jak pokazano na pierwszym obrazku z lewej.

Dzisiaj gra obrazem to podstawa. Dlatego uznałam, że lepszym rozwiązaniem będzie skupienie uwagi czytelnika poprzez użycie dużych obrazków.

Złamanie dobrych zasad projektowania?

Wymagany efekt został osiągnięty poprzez osadzenie zdjęcia w wypisie (ang. excerpt) każdej z podstron. Wypisy wskazanych stron zaczytywanego są przez wspominany widget.

Wykorzystanie wypisu do prezentacji skróconej oferty
Wykorzystanie wypisu do prezentacji skróconej oferty

Złamałam zasadę przyjaznego przygotowania strony dla użytkownika, która mówi, żeby w WordPressie do osadzania treści nie używać HTML-a. Użytkownik zmuszany do edycji elementów HTML-owych będzie mieć problemy z samodzielną modyfikacją treści. Jednak jako, że jest to informacja raczej nie zmieniająca się, a użycie obrazka dawało dobry efekt zdecydowałam się na to rozwiązanie.

Zakres usług wymieniłam również w formie listy wypunktowanej. I tu ponownie musiałam posłużyć się kodem HTML. Jednak informacje na www dużo łatwiej się czyta w formie listy niż opisywane ciągiem.

Coś na zachętę – motto i najnowsze artykuły

Motto i najnowsze artykuły
Motto i najnowsze artykuły

Poniżej znalazło się motto oraz najnowsze artykuły.

Motto pełni dwie role: przekazuje niejako system wartości właściciela witryny, (być może pozyskując w ten sposób większe zaufanie czytelnika), a optycznie pozwala oddzielić poszczególne grupy treści, zwiększając przejrzystość strony.

W osiągnięciu celu wykorzystałam inny, gotowy widget motywu Attitude (Testimonial), przeznaczony do prezentowania opinii klientów.

Najnowsze wpisy z bloga pozwalają zainteresować czytelnika i informować o nowościach na stronie. W celu osiągnięcia takiego efektu z pomocą przyszła wtyczka Recent Posts Widget Extended.

Podstrony

Stara wersja strony Komu pomagam
Stara wersja strony Komu pomagam
Nowa wersja podstrony Komu pomagam
Nowa wersja podstrony Komu pomagam
Nowa wersja podstrony O mnie
Nowa wersja podstrony O mnie

W zagospodarowaniu tradycyjnych podstron (Komu pomagam, O mnie) nie było większej filozofii.

Na pierwszym obrazku obok poprzednia wersja strony „Komu pomagam”, a za nią jej nowa wersja.

Podstawowe zasady, których się trzymaliśmy przy tworzeniu podstron

W tworzeniu podstron skupiamy się na meritum
O ile umieszczenie szerokiego headera lub rotatora jest uzasadnione na stronie głównej, należy unikać jego powielania na wszystkich podstronach. Informacje prezentowane na podstronach powinny być adekwatne do zapowiadającego ją tytułu z menu.
Układ dwukolumnowy jest lepszy niż jedna szeroka kolumna
Po pierwsze łatwiej czyta się treść w łamie węższym, a po drugiej lepiej to wizualnie wygląda.
Używamy hierachii nagłówków
Dzięki temu wizualanie wyróżniamy poszczególne elementy strony i robimy miły ukłon dla botów indeksujących. Na takiej stornie również będzie się łatwiej poruszać osobom niedowidzącym i innym, korzystającym z czytników ekranów.
Zamiast treści w formie ciągłej używamy list wypunktowanych
Tekst na www czyta się inaczej niż tekst w papierowej gazecie. Używanie wypunktować ułatwi czytelnikowi ogarnięcie treści i zwiększy szansę, że nie zanudzimy go długimi opisami.
Nie zapominamy o roli zdjęć
Wplecenie przynajmniej jednego zdjęcia nie tylko uatrakcyjni wygląd, lecz zwiększy siłę przekazu.Na stronie „O mnie” najbardziej pożądane zdjęcie to fotka właściciela witryny. Nie brakło jej więc i w naszym przypadku. Na stronie „Komu pomagam” autor zdecydował się umieścić fotkę z wyciągniętą dłonią. Wg mnie strzał w dziesiątkę.

Strona z ofertą szkoleń

Stara wersja podstrony ze szkoleniami
Stara wersja podstrony ze szkoleniami
Nowa wersja podstrony ze szkoleniami
Nowa wersja podstrony ze szkoleniami

Nie wystarczy przedstawić dobrej oferty warsztatu, żeby przekonać czytelnika do wzięcia w nim udziału. W procesie decyzyjnym bierze udział również nasza podświadomość. Dodatkowo, gdy mamy przekonać się co do czegoś, czego jeszcze nie znamy, a brakuje nam danych, uruchamiamy również naszą wyobraźnię.

Dlatego informacja na stronie internetowej powinna być zaprezentowana w sposób, który pozwoli nam zbudować u odwiedzającego pozytywne wyobrażenie o prezentowanej ofercie. Celem szkoleń jest m.in. uporządkowanie wiedzy na jakiś temat. Zatem i informacje o szkoleniach powinnz być podane w sposób przejrzysty i uporządkowany.

Kierując się tym wszystkich, zdecydowałam, że do prezentacji oferty szkoleniowej nie możemy wykorzystać pojedynczej strony w WordPressie, co miało miejsce dotychczas. Upychanie wielu informacji na jednej stronie wprowadzi chaos i może przytłoczyć czytelnika nadmiarem.

Idealnie byłoby móc prezentować informacje o szkoleniach w podobnym układzie jak wpisy blogowe, czyli:

  • mieć stronę ze spisem wszystkich szkoleń, w formie zajawek (podobnie jak funkcjonuje strona główna na blogach)
  • po kliknięciu w dane szkolenie przenoszeni jesteśmy na podstronę pojedynczego szkolenia, gdzie możemy doczytać już wszystkie szczegóły

Rozwiązanie: własny typ wpisów pt. Szkolenie

Zarządzanie szkoleniami z panelu admina w WordPressie
Zarządzanie szkoleniami z panelu admina w WordPressie
Dodanie własnego typu wpisu course (szkolenie)
Dodanie własnego typu wpisu course (szkolenie)

Zdecydowałam się zatem na wprowadzenie własnego typu wpisów: Szkolenie.

Na takim podejściu skorzysta również właściciel witryny. Będzie mógł w wygodny sposób zarządzać szkoleniami, dodawać nowe, usuwać stare. Analogicznie jak ma to miejsce w przypadku tradycyjnych wpisów w WordPressie (zobaczy obrazek pierwszy z prawej).

Własny typ wpisu pt. Szkolenie (ang. Course) zarejestrowałam, dodając do pliku functions.php motywu Attitude kod, którego fragment pokazuję na obrazku drugim z prawej. Jeśli dla Ciebie pojecie własnego typu jest nowe, zapraszam do przeczytania tego artykułu.

Osobom, które obawiają się, że zrobią błąd w rejestracji własnego typu wpisu polecam wygenerować odpowiedni kod za pomocą tego generatora.

Strona z publikacjami do prasy i portali

Media room w nowej wersji witryny
Media room w nowej wersji witryny
Media room w poprzedniej wersji strony
Media room w poprzedniej wersji strony

Ważną część dotychczasowej witryny klienta stanowiła podstrona z publikacjami tematycznymi do innych portali oraz do prasy. Zobacz obrazek obok. Na okładkę można było kliknąć i pobrać skan publikacji w formie pdf.

Zaproponowane zmiany

Dla każdej publikacji podajemy:

  • tytuł
  • krótko o czym była publikacja
  • dla jakiego magazynu/portalu
  • cytujemy fragment artykułu
  • ustawiamy datę publikacji (data wpisu w WordPressie, którą możemy zmieniać wstecz)

Co zyskujemy w takim podejściu:

  • czytelnik będzie mieć informację o czym był artykuł
  • zachęcimy czytelnika do przejrzenia całości artykułu
  • zyskamy sporo słów kluczowych pod kątem SEO (tytuł wpisu jest inny niż tytuł publikacji cytowany w dalszej części)

Z technicznego punktu widzenia Media rom został zaimplementowany analogicznie jak Szkolenia, po wprowadzeniu nowego typu wpisów, tym razem o nazwie „article”.

Blog i pasek boczny

Pasek boczny bloga w nowej wersji strony
Pasek boczny bloga w nowej wersji strony

W przypadku bloga wprowadzono właściwie jedną większą zmianę: konieczność dodawania ikony wpisu do każdego artykułu. O znaczeniu Ikon wpisów pisałam w tym artykule.

Zaproponowałam też stworzenie kategorii Polecane, do której przypisywane będą najatrakcyjniejsze artykuły. Dzięki widgetowi „Recent Post Extended” będzie można wyciągnąć tak oznaczone artykuły na pasek boczny, ograniczając widok do wybranej kategorii (u nas o nazwie Polecane).

Gorąco polecam ten widget. Jak widać, wykorzystano go również do prezentacji szkoleń na pasku bocznym, gdyż potrafi on obsłużyć własne typy wpisów.

Stopka – dobre domknięcie

Dawniej, w stronach www nie przywiązywano zbytniej uwagi do stopki. Kończyło się na wąskim pasku z informacją o prawach autorskich. Wiele się zmieniło, gdy weszła moda na tzw. szerokie stopki (taką stopkę mam też na tym blogu).

Idea jest prosta: szeroka stopka w WordPressie to nic innego jak kolejny obszar widegtów. Dedykowany tylko do tego celu.

Szeroka stopka w WordPressie
Szeroka stopka w WordPressie

Zalety szerokiej stopki:

  • Zmieścimy na niej więcej informacji, które widoczne są na każdej podstronie witryny.
  • Szeroki pasek ładnie się prezentuje.
  • Stopka budowana z widgetów jest bardzo łatwa w modyfikacji.
  • Mamy całą gamę możliwości w jej zagospodarowaniu. Istnieje wiele ciekawych widgetów instalowanych jako wtyczki do WordPressa.

Motyw Attitude posiadał już osobny obaszar widgetów przeznaczony na stopkę. Wystarczyło go wypełnić. Wszystkie infromacje, które się widzimy w stopce, zostały wprowadzone jako zwykłe widgety tekstowe, urozmaicone obrazkami (ikonka Skype) i osadzonymi mapkami Google.

Na koniec – zmiana w czcionkach

Uwaga na polskie znaki w ładnych czcionkach!

Na zakończenie jeszcze jedna zmiana, którą musiałam wprowadzić do motywu Attitude. W motywie zostały wykorzystane eleganckie fonty od Google. I słusznie. Dobra typografia ma ogromne znaczenie w prezentacji witryny. Uwielbiam ładne czcionki od Google’a. Do tego są darmowe. Niestety, gotowe motywy mają to do siebie, że prezentują wszystkie teksty po angielsku.

Schody zaczynają się w naszych polskich realiach. Tytuły eksponowane z wielkim rozmachem przy użyciu dużej, eleganckiej czcionki, nagle, zamiast podnosić wartość naszej witryny, zaczynają straszyć. Wystającym „ę”, wykrzywionym „ą”, za dużym „ż”.

Znam ludzi, którzy próbują z tego wybrnąć tak układając tytuły, żeby polskich znaków diakrytyczny nie używać w ogóle. Jednak najlepiej od razu poszukać zamiennika czcionki na taki, który posiada polski odpowiednik. Tak też zrobiłam w przypadku motywu Attitude.

Gdzie znaleźć polskie czcionki Google
Gdzie znaleźć polskie czcionki Google

Gdzie znaleźć ładne czcionki z polskimi znakami?

Ja w poszukiwaniu ładnych polskich czcionek Google korzystam ze strony podlinkowanej obok. Przy każdej czcionce możemy od razu zobaczyć, jak prezentuje się tekst z polskimi ogonkami oraz pobrać gotowy kod, który taką czcionkę pozwoli nam wykorzystać na stronie.

Jak wstawić link do czcionki Google do motywu WordPressa?

Należy jedynie pamiętać, że wstawianie tak podanego linku bezpośrednio do pliku header.php w motywie WordPressa nie należy do dobrych praktyk programowania.

Najlepiej zrobić to poprzez wykorzystanie funkcji wp_enqueue_style. Do pliku functions.php motywu dodaję fragment kodu pokazany niżej:

function polish_fonts() {

		$subsets = 'latin,latin-ext';

		$protocol = is_ssl() ? 'https' : 'http';

		$query_args = array(
			'family' => 'Anaheim',
			'subset' => $subsets,
		);
		wp_enqueue_style( 'anaheim-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );

}
add_action( 'wp_enqueue_scripts', 'polish_fonts' );

A następnie już mogę w pliku CSS odwołać się do nazwy ładnej czcionki. W naszym przypadku wykorzystaliśmy czcionkę Anaheim:

h1, h2, h3, h4, h5, h6 {
	font-family: 'Anaheim', Arial, sans-serif;
}

Podsumowanie

Nawiązując do głównego tematu artykułu. Przeniesienie strony z innego systemu na WordPress sprowadziło się w naszym przypadku do stworzenia witryny niejako od nowa, z wykorzystaniem dotychczasowych treści.

Co zyskaliśmy, stawiając na takie podejście:

  • nowy, lekki, bardziej nowoczesny wygląd,
  • dostosowanie strony do wygodnego przeglądania na dowolnym urządzeniu (motyw responsywny),
  • wprowadzenie rotatora, którego treść łatwo modyfikować i który można w każdej chwili wyłączyć,
  • rozbicie treści szkoleń i media roomu na osobne wpisy pozwala na wygodniejsze nimi zarządzanie i wzmacnia wartość witryny pod kątem SEO (dla każdego wpisu dostępny widok pojedynczego wpisu).

43 thoughts on “Modernizacja i przeniesienie strony na WordPressa – studium przypadku”

  1. Aga – świetny materiał! Bardzo dobre studium, nie tylko pod względem kwestii technicznych, ale także „myślowych” – koncepcji i kolejności prac nad projektowaniem strony www. Do przeczytania jeszcze kilka razy i pewnie przerobienia na jakimś przykładzie. Dzięki za linki do przydatnych narzędzi – generator własnych typów wpisów się przyda.

    1. Artur, dzięki za krzepiący komentarz. Dla mnie konstruktywny komentarz jest większą motywacją do pracy nad artykułami do bloga niż szybujący w górę licznik odwiedzin.

      Tak, generator własnych typów wpisów to przydatna rzecz. W ogóle ja lubię własne typy wpisów, są bardzo praktyczne.

    1. No wiem, jestem jak ten szewc co bez butów chodzi. Mój blog nie jest (jeszcze) responsywny 🙂

      Dzięki za link do pluginu. Nie znałam. Przyjrzę mu się, bo może to jest właśnie remedium na przedstawioną HTML-ową bolączkę.

      1. Nie wiem czy RWD tutaj coś by pomogło. Czasami są takie artykuły, które tak czy tak lepiej się czyta na większym ekranie. Mamy tutaj sporo obrazków i z poziomu telefonu ciężko by się to oglądało.
        Masz swoją stronę, ja nawet tego jeszcze się nie dorobiłem 😛

    2. Wtyczka nie wyświetla edytora dla page’ów (jedynie dla wpisów). Sprawdziłam na motywie Attitude i na motywie domyślnym WP.

      Dodatkowo w dokumentacji wtyczki w repo (w opisie) jest błąd w kodzie dodającym wsparcie dla wypisów dla stron.

      Czy Tobie ta wtyczka działa dla stron? Na jakim motywie sprawdzasz?

  2. Zajrzałem jeszcze na stronę Twojego klienta. Nie wydaje Ci się, że te odstępy w lista wypunktowanych nie są za duże ?. Wiem, że nie taki lekki offtopic, ale rzuciło mi się to w oczy.

          1. źle się zrozumieliśmy, nie chodzi mi o line-height a o #content ul, #content ol
            margin-left jest za duzo jak dla mnie i padding zawsze daje na 0 bo np chrome sobie takie cudo sam robi -webkit-padding-start: 40px;

  3. Hej, wiesz jak podzielić listę wpisów na dni, tak jak tutaj na ppe.pl. Jest tam taki separator który rozdziela dane posty na dni, dzięki czemu czytelnik wie, że następny post jest z zeszłego dnia. Wiesz jak to zrobić?

    1. Musiałbyś dodać kawałek kodu do pętli głównej, w którym sprawdzasz, czy dzień bieżącego wpisu zmienił się w stosunku do poprzedniego i jeśli tak, to wyświetlasz separator. Potem jakoś ładnie go wystylizować za pomocą CSS. Niestety, nie podam Ci gotowca.

      1. No proszę, jakaś dobra duszyczka czuwa. Ale nie napiszę, że jestem zaskoczona, bo nawet, gdy pisałam swoją odpowiedź i ostatnie zdanie, to mi przez głowę przemknęło, że nie zdziwię się, jak Paweł się podejmie 🙂

  4. Hej Agnieszko!
    Mam dwa pytania:
    1. Gdy korzystasz z darmowego szablonu, to jak rozwiązujesz „problem” linka w stopce do autora? Czy może korzystasz tylko z tych szablonów, których licencja pozwala na usunięcie linka?
    2. Czy przy dodawaniu źródła do czcionki z Google fonts wstawienie w style.css linii (na przykład) @import url(http://fonts.googleapis.com/css?family=PT+Serif&subset=latin,latin-ext); też nie należy do dobrych praktyk programistycznych? Bo przyznam, że zawsze tak robię i nigdy nie pomyślałam, aby użyć do tego pliku functions.php

    Poza tym naprawdę kawał świetnego case study!
    Pozdrawiam!

    1. Hej,
      ad 1. Gdy szablon jest w repo WordPressa, to znaczy, że jest on na licencji GPL. A to z kolei oznacza, że możesz robić w nim dowolne zmiany, w tym wyrzucić nawet link zwrotny do strony autora, a co więcej, zrobić to nawet, jeśli autor motywu mówi, że tego Ci nie wolno.

      ad 2. Tak, jak robisz, zadziała, ale codex zaleca wszystkie style dodawać przez wp_enqueue_style.

      Nie jest dobrze załączać pliki CSS przez @import, choćby z powodów wydajnościowych. Gdy przeglądarka napotyka import, to czeka z ładowaniem reszty, aż ten import się zakończy.

      Więcej o tym możesz przeczytać tu:
      http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

      1. Ad. 1. O proszę, to nie wiedziałam, że można ten link usuwać. Dzięki!
        I co do ad 2. – również dzięki – czyli przerzucę się na ten sposób.

  5. Haa, wypisz, wymaluj żywy przykład ze studium przypadku 1 z przed dwóch miesięcy. Dokładnie tak było, klient myślał, że jak wszystko już ma, to tylko Ctrl+C i Ctrl+V. Cóż, za przykra niespodzianka się okazała, ale pewnie znajdzie się student, który faktycznie zrobi za pół darmo poprzez kontrol ce i kontrol fau, ehh!

    1. No tak bywa, ale z tymi studentami to też się do końca nie zgodzę. Gdy ja odmawiam wykonania zlecenia jakiemuś klientowi, bo nie mam już czasu i mówię, że na pewno kogoś znajdzie, to nie raz słyszę odpowiedź, że jemu nie zależy na kimkolwiek, tylko kimś, kto zrobi to dobrze. Studencie bywają często w gorszej sytuacji, bo często z góry nie są traktowani poważnie, nawet gdy dużo potrafią, właśnie z powodu tego, że są studentami.

  6. Bardzo fajne i szczegółowo opisane case study – gratulacja zarówno opisu na blogu oraz chęci grzebania w Wordpresie. Ja mimo że robię strony dla klientów nigdy nie odważyłem się przenieść istniejącej strony do WP, dla mnie grzebanie w szablonie WP to najgorsza robota. Jeszcze raz gratulację.

    1. MariuszW, nie tylko dla Ciebie. Dużo webmasterów tego nie lubi, dlatego powstają narzędzia, które pozwalają tworzyć nawet bardzo zaawansowane strony pod WordPressem bez znajomości php.

  7. Witaj! Pisze tu pierwszy raz i już Ci na wstępie podziękuje, bo wiele informacji tu zawartych pomogło mi przy pracy z wordpress-em. Broniłem się przed nim długo, bo używam na co dzień innych CMS-ów, a głównie CMSMS (znam go od podszewki). Jednak klient nasz pan i musiałem się przekonać do WP.

    Wcześniejszą styczność z wordpress-em miałem ze 2 lata temu i nie przypadł mi do gustu, teraz jest już zaczyna mi się podobać. Przenoszę właśnie stronę z CMSMS na WordPress i mam jeden problem, który mi doskwiera. Odnoszę wrażenie, że wordpresowcom on nie przeszkadza, bo szukam i nie znalazłem prostego rozwiązania. Może Ty mi coś doradzisz. Chodzi o zarządzanie multimediami. Nawet prosta strona ma często sporo grafik, a w WP one są wszystkie w jednym „kotle”. Co z tego, że posortowane na foldery datami, skoro przy wstawianiu muszę oglądać wszystko razem i jak wgrałem 300 zdjęć do galerii i 5 w innym celu, to żeby je wstawić muszę przeglądać wszystko. W innych CMS-ach mam możliwość tworzenia folderów i uporządkowania wszystkiego.

    Na tapecie mam producenta maszyn rolniczych, w CMSMS miałem zdjęcia konkretnych maszyn pogrupowane w folderach tematycznych oraz w podfolderach dla urządzeń. Teraz mam wszystko razem. Wybrane zdjęcia są użyte w kilku miejscach na stronie, strona jest w 3 językach (multisite) i zaczynam powoli wychodzić z siebie. Może znasz jakąś wtyczkę, która pozwoliłaby chociaż otagować pliki i filtrować w oknie wyboru pliku. Byłoby to idealne rozwiązanie. Sortowanie datami się tu nie sprawdza, bo klient czasem dodaje po jakimś czasie dodatkowe zdjęcia już istniejącej maszyny. Robi się totalny bałagan

    Na horyzoncie jest strona, na której galeria ma kilka tys. zdjęć (aktualnie jest wszystko w folderach). Na stronie pojedyńcze galerie wyświetlają się w aktualnościach (są to fotorelacje z zawodów). Dodatkowo wszystko razem jest widoczne na podstronie galeria. Tu będę miał jeszcze większy problem.

    1. Ezbig,
      ja bym podeszła do tego tak:
      1. Zdjęciom należącym do tej samej grupy nadała jeszcze przed załadowaniem do WP nazwy z tym samym prefiksem, np. wakacje-hiszpania-##.jpg (w programie IrfanView można to zrobić w kilka sekund, w innych pewnie też)
      2. Wówczas WP nada odpowiadającym im mediom w bibliotece nazwy na podstawie nazw tych plików.
      3. I teraz już szybko wyszukamy tych zdjęć używając wewnętrznej wyszukiwarki dostępnej przy wybieraniu zdjęć.

      Generalnie to masz rację, że WP nie jest do tego przygotowany. Ja nie miałam okazji pracować ze stronami, gdzie takie hurtowe zarządzania fotkami ma znaczenie, więc poza wtyczką Next Gen Gallery nie mam co polecić. Next Gen Gallery? Ona pozwala grupować zdjęcia w albumy.

      Jeśli chodzi o strony wielojęzyczne, to WPML pozwala działać na tej samej fizycznej kopii zdjęcia a zmieniać alt’y i tytuły, etykiety niezależnie dla wersji językowej.

      1. Kombinowałem z tym na różne sposoby, ale to musi być łatwe dla klienta, bo ja sobie poradzę zawsze, ale klient już niekoniecznie. Wrzuciłem Next Gen Gallery zanim przeczytałem Twoją odpowiedź. Wygląda obiecująco, tylko muszę to przetłumaczyć, bo po polsku nic tam niema, a klient się pogubi.

        Faktycznie jak się pisze bloga to zdjęcia nie mają takiego znaczenia, wrzuca się je na bieżąco, ale na typowych stronach www trochę zdjęć występuje. Ja mam 90% stron gdzie zdjęć jest sporo. Te kilka tys. jest na stronie klubu sportowego i tam galeria w CMSMS choć się sprawdza, to nie jest zbyt wygodna w użyciu (mimo folderów). W WP klient radzi sobie lepiej bo mu to przypomina obsługę facebook-a, ale brakuje folderów i te tys. zdjęć wgrane w jednym momencie mogą zrobić spore zmieszanie.

        Co do wersji językowych to w CMSMS też nie jest różowo. Zrobiłem sobie m.in. plugin, który kopiuje strony z dowolnej wersji językowej na inną. Łatwiej jest tam z mediami, bo są wspólne. Przeglądając API WP widzę, że da się też coś podobnego zrobić. Automatyczne wstawianie wpisów już wykorzystałem przy kopiowaniu treści z CMSMS do WP i się sprawdziło. Podobnie myślę zrobić w obrębie samego WP. Muszę zbadać to WPML bo może wyważam otwarte drzwi. W sumie właśnie mnogość dopracowanych wtyczek skłania mnie w kierunku WP, ale najbardziej to profesjonalne szablony, bo choć jestem z zamiłowania grafikiem, wolę jednak bardziej programowanie. Nie sposób przecież wszystkiego robić samemu.

        Dzięki z szybką odpowiedź.

    2. Może któraś z tych wtyczek się przyda: WordPress Media Tags, Media Categories, Media Library Categories, Enhanced Media Library

      1. Dzięki. Sprawdzę te plugin-y. Zainstalowałem Next Gen Gallery i NextGEN Gallery Media Library Addon. Znalazłem też polską lokalizację – niekompletną, ale to co istotne dla użytkownika jest przetłumaczone, więc nie będę musiał robić tego sam. Wygląda na to, że mam czego szukałem. Pliki będą co prawda dalej w jednym kotle, ale z galeriami będzie porządek. Można też nadawać tagi plikom. Jeszcze tego nie przetestowałem, ale prawdopodobnie jest to to czego szukałem.

  8. Przypadek nr 1 faktycznie można nazwać ciężkim, szczególnie, jeżeli klient jest totalnym ignorantem w dziedzinach „okołointernetowych”. Dodałbym jeszcze trzeci przypadek, z którym czasem się spotykam, czyli klient, który koniecznie uparł się, by mieć stronę na wordpressie, chociaż aktualizacji dokonuje raz na rok lub rzadziej, albo jego strona w ogóle nie wymaga aktualizowania. Nie przetłumaczysz, że to nie potrzebne, chce i koniec. A najgorsze, jak przeczyta gdzieś o zaletach wordpressa, o tych wszystkich wtyczkach, które są do niego dostępne i każe sobie instalować na stronie np. producenta śrub, dziesiątki bezsensownych wtyczek.

  9. Niestety są i tacy klienci, dl których obsługa WordPressa to czarna magia i gubią się w najprostszych czynnościach. Ideałem byłaby wtyczka, która wyłączy dużą część ustawień, opcji, tak by klient nie mógł sobie zaszkodzić. A może jest już taka?
    Szczerze mówiąc nie słyszałem o czymś takim, ale z drugiej strony jakoś mocno nie szukałem.

  10. Witam, dołączam się do podziękowań za artykuł, od kliku miesięcy korzystam z tej stronki;-)
    ostatnio wpakowałam się w pewien kłopot, zgodziłam się zrobić stronkę w WP znajomemu (a nie mam zbyt wielkiego doświadczenia:-(, zgodziłam się też po to aby się uczyć i wpadłam…Znajomemu stronka wizualnie się podoba, ale pokazał go jakiemuś gościowi i ten stwierdził, że nie da się jej wypozycjonować w ogóle – źle zrobiona od strony technicznej, kody etc, no i stronę w formie bloga ciężko się pozycjonuje.
    moje pytanie to, właśnie o pozycjonowanie tego bloga oraz jaka jest różnica między opcjami: services, portfolio a wpisami – do czego służą te dwie pierwsze.

    1. Hej Justyna,
      dzięki za miłe słówko.

      Nie wypowiem się w szczegółach nie znając tematu od podszewki, ale częściowo ta osoba może mieć rację. Jeśli piszemy motyw od zera, to faktycznie możemy popełnić kilka błędów, które utrudnią późniejszą optymalizację bloga. Musiałbym zobaczyć stronę w praktyce, żeby coś więcej powiedzieć.

      moje pytanie to, właśnie o pozycjonowanie tego bloga oraz jaka jest różnica między opcjami: services, portfolio a wpisami – do czego służą te dwie pierwsze.

      services i portfolio to są tzw. custom post types, czyli coś jak wpisy ale wydzielone do osobnego miejsca. Gdybyśmy tego nie mieli, to moglibyśmy wszystko zakładać jako wpisy i przypisywać je do osobnych kategorii.

      1. Dziękuję za odpowiedź, temat pozycjonowania nieaktualny, bo się wyłożyłam na optymalizacji, więc biorę się do roboty i się uczę, najpierw na mojej stronce:-)

        pozdrawiam/justyna

  11. Czy istnieje szybki sposób na przeniesienie pojedynczego artykułu (razem z komentarzami) na innego wordpressa? Z góry dziękuję za odpowiedź.

  12. Witam,

    widze, ze wszyscy w tym blogu znaja ta ukryta funcje multisite WordPressa. Chcialbym wrzucic 30 prawie identycznych moich (domen) witryn (landing pages) na jedna glowna domene przy zachowaniu tych 30 domen. Na to jest wlasnie ta funkcja. Ta glowna domena jest juz w szablonie wordpressa. Czy ktos z Was, by sie tego podjął.

    Pawel

  13. Witam,
    Chciałabym znaleźć kogoś kto stworzyłby moją swoją na wordpressie ale nie mam pojęcia do kogo się zwrócić. Czy mółby ktoś kogoś polecić?
    Pozdrawiam

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl w zgodzie i według zasad określonych w Polityce prywatności.