 Cześć, dzięki. Tak jak powiedział Mariusz, jestem Michał Strześniewski z firmy Careers Group. Jesteśmy agencją interaktywną w Warszawie. Robimy różne rzeczy, od małej projektów przez większe. To jest jeden z naszych największych projektów na WordPressie, dlatego chciałem go wam dzisiaj przybliżyć. Co dzisiaj będziemy robić? Po pierwsze, jakie mieliśmy wyzwanie, następnie nasz plan, który zrobiliśmy, nasze rozwiązanie i na koniec trochę danych i statystyk, co z tego wyniku. No dobra, to jakie mieliśmy wyzwanie? Najpierw może czym jest grupa uczelni Wistula? Jest to prywatna uczelnia wyższa w Warszawie. Składa się z dwóch bytów, akademii finansów i biznesów Wistula oraz szkoły głównej turystyki i rekreacji. Strona miała na celu zachęcenie, zwłaszcza osób z zagranicy do aplikowania na nią. Dlatego też musiała być dobrze zrobiona, nie tylko w językach, ale i na RWD. Jakie mieliśmy zadania? Po pierwsze, uspłynienie identyfikacji i zrobienie wszystkiego pod jednym szyldem głów, czyli grupa uczelni Wistula. Zamiast dwóch bytów, żeby był jeden grupa uczelni Wistula. Zwiększenie popytu na stronę poprzez współpracę z agencją SEO, która na tą stronę działała. Dodatkowo właśnie poprawienie odbioru strony na urządzeniach mobilnych. Co zostaliśmy? Mieliśmy dwie oddzielne strony, które wyglądały tak samo, ale to były dwa oddzielne dedykowane serwisy. Pierwszy slajd to jest jeszcze jak działało. Drugi to zrobiłem z archiw web, już niestety bez zdjęć. Tak wyglądały te strony wcześniej. Były też strony kół naukowych, ponad 20 różnych kół. Każdy miał swój własny layout, każdy był na własnym systemie. Niektóre na WordPressie, niektóre na Jumli, niektóre w ogóle bez systemów. Ta wyglądałka stona AZS-u, która była po prostu HTML-em. Stona biblioteki opartą o WordPress z dużą ilością własnego contentu, która wyglądała tak. Oraz 10 jakichś innych subdomen, między innymi intranet, który wyglądał w ten sposób. To wszystko było na oddzielnych subdomenach, oddzielne systemach. Wszystko musieliśmy migrować. Jaki mieliśmy na to plan? Po pierwsze, chcemy połączyć wszystko pod szyldem Vistula.edu.pl pod jedną domeną. Vistula.edu.pl to był wcześniej adres Akademii Finansów i Biznesu. Czyli SGT firm miał swój oddzielny adres, a Vistula.edu.pl to był adres Akademii Finansów i Biznesu. Chcieliśmy zbudować jeden duży system multisite, tak aby administratorzy różnych podstron, czy to właśnie stron uczelni, kół naukowych biblioteki, żeby mieli swój własny dostęp do tej strony, ale żeby to dalej była stona pod jednym adresem. Chcieliśmy zbudować system identyfikacji pozwalający na łatwe rozbudowywanie tej strony, czyli tak żeby dodatkowe tworzenie nowych stron dla kół naukowych, czy dodatkowe tworzenie nowych podstron było jak najbardziej przyjazne dla użytkowników. Stworzyliśmy na początek mapę strony, nowej strony, którą chcieliśmy stworzyć. Wyglądała tak. To wszystko, to właśnie jest ta nowa strona Akademii Finansów i Biznesu. I jak zobaczycie, to też nie jest wszystko, ponieważ mamy tutaj nazwy stron, które tak naprawdę są tylko zaczątkiem. Powiedzmy, że to jest jedna ze stron aktualności, jedna ze stron podstron. Tu ta mapa strony łącznie jest około 3460 podstron na tej stronie. Następnie zaprojektowaliśmy KiVisual, który miał na celu uspłynienia identyfikacji na początek social media, a potem rozszerzyliśmy to na stronę internetową. System kolorystyczny, typografia, stopka, typografia już po łączeniu z innymi elementami na stronie, jakiś zbiór ikon, układy na postów, układy ogólne. Jak to miało wyglądać? I do jakiejś przykłady właśnie gotowych już elementów, które zostały stworzone. Następnie wybraliśmy technologie. Postanowiliśmy zrobić to style guide driven development, kto już był na którejś mojej prezentacji pewnie o tym słyszał. Jak nie to odsyłam na WordPress TV. Postanowiliśmy zrobić to tam na multisite i wykorzystać do tego ACF w wersji pro oraz WPMLA do translacji. Stworzyliśmy style id. Przenieśliśmy właśnie tą identyfikację zaprojektowaną do kodu, wykorzystując metodologię BEM. Stworzyliśmy podstawowe elementy, które potem zbudowaliśmy na kolejne bloki, komponenty, z których potem mogliśmy stworzyć pod strony. Jak wyglądała taka nasza, ten nasz style guide? Wygląda tak. Staczyliśmy od podstawowych kolorów przez typografię, typografię, typografię w różnych modułach przyciski, inputy. One się łączą w większe bloki. Te bloki, kolejne. Potem tworzyliśmy slajdery, kolejne slajdery. To był sam style guide. To sama podstawa tego, w jaki sposób tworzymy kolejne pod strony. Zależało nam też na pełnej spójności tych motywów, tak żeby nie tworzyć ich jak najwięcej, żeby nie tworzyć jak najwięcej bloków. Stworzyliśmy, żeby jeżeli już coś wykorzystaliśmy, to zbudować drugi, bardzo podobny blok, jeżeli potrzebujemy jakieś zmiany, to bardzo podobny do poprzedniego. Jak to działa? Jeżeli mieliśmy slider, mieliśmy nagłówek na stronach kierunków. Jak widzicie, można znaleźć dużo podobieństw między tymi modułami. Tak, żeby jak najmniej stylu było wykorzystywane. Jak mieliśmy już elementy z kierunkami i potrzebowaliśmy galerii zdjęć, wykorzystaliśmy ten sam slider, ten sam moduł, tylko bez nagłówka. Jak potrzebowaliśmy, mieliśmy sekcję tekstową ze zdjęciem, potrzebowaliśmy sekcję z wideo, wystarczyło dołożyć aple z wideo i pojawiał się pop-up. Mieliśmy taki sam moduł, tylko z odpowiednim modyfikatorem. Takie same artykuły, jedne ze zdjęciami, jedne bez, jeżeli były potrzebne, to wykorzystywaliśmy po prostu częściowo w inne modyfikatory. Tak samo jakieś slidery z testimonialami, czy slidery z informacjami jak korzystać ze starych stron i stuli w ten sposób. Ułącznie stworzyliśmy 43 unikalne sekcje, z których administratorze mogli tworzyć kolejne pod strony. To są tylko niektóre z nich. Ok, to teraz jak to połączyliśmy z WordPressem? Pierwszym naszym wyzwaniem było postawienia tego na multisite. Dlaczego w ogóle się zajęliśmy multisitem? Strony musiały mieć własne panely administracyjne. Każde koło naukowe musiało mieć swój dostęp administracyjny, ale też chcieliśmy, żeby nie mogli zmieniać nic na stronach, które do nich nie należą, a też żeby główny administrator w łatwy sposób mógł edytować treści po strom. Czyli jeżeli na przykład koło naukowe wstawiłoby jakieś obraźliwe obrazki na swoją stronę, które nie chcielibyśmy mieć pod szyldem wistuli, żeby główny administrator mógł łatwo to usunąć, nie musiał szukać loginów i haseł do panelu CMSa, który był wszystko miał pod jednym panelem WordPressa. Musiało być pod jedną domeną, pod folderach. Czyli nie mówiliśmy tego zrobić na subnomenach, tylko po prostu wszystko miało być pod folderach, więc to wymagałoby bez multisiters, robienia n instancji WordPressa instalowanych na serwerze i ciężko byłoby to rozszerzalne do zrobienia. Główny administrator właśnie takich mówiłem musiał mieć łatwy dostęp w treści i dodatkowo jeszcze strony miałoby współdzielić części rzeczy. Na przykład aktualności wydarzenia, koła naukowe, biblioteka mogła mieć wydarzenie aktualności, które chcielibyśmy wyświetlać w jednej pętli. Jakie mieliśmy wyzwania w takim wypadku? Na początek tworzenie pod stron na każdym poziomie zagłębienia domeny. Czyli jak zobaczycie, czy to jest vistula edu.pl, czy nauka i badania, czy mamy jeden poziom, drugi poziom, trzeci poziom, czwarty poziom. To jest każda taka podstrona musiałam być możliwa do stworzenia. Także to jest wyzwanie dlatego, że jak spróbujecie sobie złożyć taką stronę vistula edu.word.com.poznę 2018, to Word to pokaże Wam błąd. Nieprawidłowy adres witryny. Dlaczego tak się dzieje? Dlatego, że w korze WordPressa mamy pre-match, który pozwala tylko bez specjalnych znaków. Oczywiście, koru WordPressa nie zmieniamy. Więc to było wyzwanie. Co możemy z tym zrobić? Sprawdziliśmy jak to jest przy edycji strony. Przy edycji takiego sprawdzenia nie ma. Czyli jeżeli stworzymy stronę, a nie możemy mieć tych znaków, jeżeli edytujemy tę stronę, te znaki możemy dodać. Ok, to jest upierdliwe. Ale zrobiliśmy w instrukcji obsługi po prostu jak to napisać. Tworzymy stronę, która ma pełną ścieżkę, bez tych symboli. Następnie przy edycji dodajemy slesze. To nadziała. Potrzebowaliśmy też to zrobić do tego specjalną funkcję, która robi rewrite. I się wpina w pętlę WordPressową, zostanie wyświetlana strona, to pobieraliśmy po prostu, tworzyliśmy własne rewrite. I teraz, jak zobaczycie, przy edycji takie coś przechodzi. Nie ma problemu. Następnie wyświetlanie aktualności wydarzeń ze wszystkich postą w jednej pętli. Mamy na przykład taki moduł aktualności, który tak naprawdę tutaj ma wyszuk i ma filtr, który odnosi do konkretnych postron aktualności wydarzeń. Więc musieliśmy wyciągać aktualne linki do stron aktualności wydarzeń na tych innych postronach. To jest jedna rzecz. Do tego tutaj te wydarzenia i te aktualności to są najnowsze, ale ze wszystkich postron. Czyli musieliśmy stworzyć jedną pętlę, która ma w jednym kłory poście filtry podacie które wyciągają najnowsze ze wszystkich. Czyli tak naprawdę nie wystarczył sam merch, tylko trzeba było jeszcze tutaj dołożyć specjalnie sortowanie tych wszystkich postów. Widzicie ten otwarty pozwala nam wyszukać z każdej strony, na której jesteśmy. Do tego wykorzystaliśmy klasę WP Query Multisite, którą ktoś napisał. Nie wiem niestety kto. Częściowo edytowaliśmy ją sami też. Zmieraliśmy ją trochę zmienić pod nasze rzeczy, ale ona dodaje 3 wartości. Multisite, Sites.in i Sites.in. Dzięki czemu po pierwsze, ona działa tak samo jak WP Query po prostu, jeżeli wyłączymy jeżeli zrobimy Multisite na false. Jeżeli zrobimy Multisite na false, to ona działa jak WP Query. Natomiast jeżeli zrobimy Multisite na true i podajemy na przykład Sites.in tam podajemy tablicę idików stron i w tym przypadku możemy wyciągać ze wszystkich stron z naszym Multisite. Teraz tłumaczenie linków podstawowych z pomocą WP ML. Nie wiem czy kiedyś próbowaliście, jak czekokolwiek próbował WP MLu postawić stronę właśnie na Multisite, na podstronie. Ktoś próbował? Nie, ok. Jeżeli macie pod stronę, to WP MLu adres strony jest tak by domeną. Czyli jeżeli mamy, powiedzmy, Wistula.edu.pl z klasz biblioteka, to to już jest adres strony. I potrzebowałem czegoś takiego, żeby WP ML działał na całej domenie, a nie na tylko na podstronach, bo tak WP ML jest zbudowany w taki sposób, że instaluje się go na każdej podstronie Multisite'a i na każdej z tych podstron, on robi zapytałem się na forum, dostałem odpowiedź, że niestety to jest niemożliwe i do tego potrzeba zrobić dodatkowy kod i dostałem listę firm zaufanych, które mogą mi to zrobić. Postanowiłem zrobić to tam. I o co tutaj chodzi? Mamy stronę Wistula.edu.pl student biblioteka jakaś tam dział biblioteczny. I ten student biblioteka to jest nazwa strony WP ML. Jeżeli bym przetłumaczył to normalnie z WP ML'em, miałbym stronę taką, student biblioteka potem wszystko po angielsku i na końcu lang N. Co dla SEO jest niedopuszczalne. Potrzebowałem zrobić coś takiego i tak to teraz działa N students library activity services. Jak to zrobiłem wykorzystałem ACF stworzyliśmy dodatkowe dwie kontrolki które po pierwsze pozwoliły mi na wyciągnięcie wszystkich stron pod stron i wszystkich języków aktualnych WP ML'u włączonych. W tym stworzyłem po prostu mapę strona polska jest slash, pola angielska strona taka jest taka tutaj angielska ma takie tłumaczenie ponieważ ACF wykonuje się później niż query Potrzebowałem sobie to zapisać do JSONa oczywiście zminifikowanego ale tutaj żeby było coś widać zwolałem to otworzyć a następnie wykorzystaliśmy funkcję która po pierwsze pobiera adresy po kluczach z tego JSONa i stworzyliśmy funkcję która która daje ad multisitely rights i na końcu wykorzystuje ad frontend root i to jest jedna z funkcji którą używaliśmy wiele razy z różnych przyczyn jest to dodawanie danych do ruta czyli jeżeli mamy ścieżki w jaki sposób działa WordPress czyli jeżeli trafi na adres czy zmeczuje się adres to on nam podaje konkretną stronę i tutaj wystarczyło się nam włączyć do akcji do parse request i jeżeli mamy całą funkcję która sprawdza wszystkie nasze warunki jeżeli trafi na któryś z naszych warunków to wykonuje naszą stronę jeżeli nie trafi na żadne z naszych warunków to po prostu zwraca do parse czyli tak lub nie więc na prawdę wczepiliśmy się w to i nasz rooting podstawowy WordPress działa dalej a my tylko robimy to co potrzebujemy z naszej strony i to było jedno właśnie z użycia tego dzięki temu mogliśmy po prostu nakierować WordPressa jeżeli przed któryś z naszych linków to my podstawialiśmy mu multisitely ale jeszcze z WPNM mieliśmy taki problem tak jak mówiłem jest on ustawiany per instancja czyli nie działa na całym multisitely per instancja więc jeżeli korzystaliście kiedyś z wtyczki string translations to każda z tych stron jeżeli ma jakiś string translation ukryte w motywie musi być ona przetłumaczona per każda instancja chyba że istnieje plik tłumaczący motyw i wtedy ten plik, tłumaczący motyw napisuje te właściwości bo możemy je napisać w WPNM ale sam utłumaczenie z pliku mo czy pliku po jest ono wykonywany najpierw więc jak sobie z tym poraziliśmy pewnie każdy z was zna ten ekran jeżeli mamy tutaj na przykład Vistula D takie słowo i zobaczcie że jest ono przetłumaczone w głównej domenie grupa uczelni Vistula natomiast na stronie koła ten sam string jest nie przetłumaczony zrobiliśmy to w taki sposób że taką 8-linikową mniej więcej funkcją która na każdy zapis string translation w głównej domenie generuje plik mo z którego plik generuje albo nadwrót po z którego generuje potem plik mo w głównej domenie jako że motyw jest współdzielony bo każdy z tych site'ów ma ten sam motyw plik mo nadpisuje wszystkie te ustawienia z tamtych stron oczywiście tamte strony mogą sobie nadpisać na własny sposób konkretne tłumaczenia jeżeli potrzebują ale te główne tłumaczenia które robi główny administrator przechodzą dalej to tyle jeżeli chodzi o technikalia to ten plik mo linikowy jest tutaj siedzący Paweł bez niego by to nie dało rady przyszedł do niego po prostu o pomoc i zrobił mi to chyba w 20 minut a ja szukałem tego w necie przez 6 godzin i jak to zrobiliśmy teraz żeby mieć wyzwania zaimplementowania style guide'u wykorzystaliśmy flexible layout zasobów ACF pro tak jak mówiłem 43 moduły do używania na stronach połączyliśmy też z tyle pliku CSS dodytora wysizyk czyli wszystko to co było wpisane tutaj powiedzmy, że jak w Gutenbergu się pojawia tutaj używane jest na po prostu formatach dodatkowo tak jak mówimy 3 tysiące ponad po stron więc niektóre z nich są identyczne albo różnią się bardzo małą częścią bardzo małą częścią a dużo z tych modułów musiałoby być wyklikiwane przez użytkownika przy flexible modus dlatego stworzyliśmy dodatkowy post type układy domyślne który dla niektórych postu co tu stworzyliśmy i wpierliśmy w odpowiednie miejsce w kodzie ustawia jakie sekcje dana strona ma zawierać w sobie czyli na przykład mamy sobie stronę z stroną tekstową i ona zawiera na główek strony domyśląc też tekstową separator i dane kontaktowe i tak naprawdę jeżeli jesteśmy na stronie aktualności na przykład, czy wydarzeń on domyślnie używa modułu strona tekstowa więc wszystkie te 4 rzeczy się pojawią i tylko i wyłącznie domyślna treść tekstowa podmieni się na treść jeżeli ktoś by chciał na stronie aktualności zrobić specjalnie jakąś inaczej moduły ustawić to te moduły się nadpiszą czyli ten układ 4 elementów będzie na każdej stronie aktualności jeżeli ktoś by chciał dać slider na aktualności też może i jak to wygląda mamy to jest na główek strony potem jest domyślna treść tekstowa potem jest separator szerokości czyli taki niewidzialny moduł który pozwala nam wyjść z sidebaru i na końcu dane kontaktowe następnie jeszcze potrzebowaliśmy zrobić strukturę linków zgodną z wymaganiami Agents i SEO i tutaj też wszystko opiera się o tą funkcję z akcją Dupart i Quest dlaczego to było wyzwanie? bo ścieżka dojścia do każdego kierunku studiów na tej uczelni jest nieco inna są strony na studiach pierwszego stopnia mamy studia licencjackie dopiero po tym nie dotyka czyli kierunek studiów jest na drugim poziomie zagłębienia zobaczcie też na breadcams następnie mamy drugiego stopnia i od razu jest z kierunek studiów następnie mamy to są rzeczy które są podyplomówka ona ma jeszcze stronę procesu studia podyplomowe potem jest coaching potem jest kierunek studiów i jeszcze mamy studia online które też mają drugi poziom zagłębienia jak wiecie mamy kustą post type który się nazywa kierunki studiów on ma swoje kategorie SEO chciało żeby wszystkie te kategorie po kolei były w linku czyli jeżeli mamy studia pierwszego stopnia to działa to w taki sposób że mamy po prostu kierunki studiów i to jest archiwum tu mamy kierunki studiów potem mamy studia drugiego stopnia to też by było archiwum potem mamy coaching stylu życia potem kierunki studiów studia pierwszego stopnia archiwum studia licencjackie tutaj mamy kolejny zagłębienie i to wszystko kieruje do kierunku studiów czyli do singla kierunku studiów a wszystkie pod poziomy mają być archiwami jeżeli mamy linki które mają powiedzmy dwa poziomy zagłębienia no to ten drugi poziom dla nas jest pierwszy jest kategorią i archiwum a drugi jest linkiem ale w przypadku innego kierunku studiów tam mamy ten czwartym poziom do pyro singla a na trzecim poziomie mamy mieć archiwum my tutaj potrzebowałem właśnie w piąście w tą funkcję dupartis quest sprawdzałem czy istnieją dane kategorie wszystkie kategorie są do linków jedno na czym mi zależało na tym żeby to, że ja coś robię sobie w ustawieniach WordPressa żeby to nie wpływało na to co widzi użytkownik dlatego jeszcze wykorzystaliśmy funkcję która ustawia automatycznie link bezpośredni odnośnik na taki jaki powinien być w zależności od ustawionych kategorii czyli tutaj mamy drugi poziom natomiast na trzecim poziomie tak samo ten link się zgadza z tym oryginalnym czyli to nie jest to jest zrobione wszystko na natywnych funkcjach WordPressa tak żeby żeby użytkownik który zna WordPressa nie musiał szukać gdzie ma ten bezpośredni odnośnik tylko żeby on był tam w tym miejscu i on działa dlatego też jeżeli się zmieniło w tył filtrze to wszystkie funkcje typu the permaling działają bo one pobierają właśnie z tego filtra z tego filtra pobierają adres w stronę stona musiała mieć łatwo nadryzowane na główki z poziomu panelu 3h1, 3h2, 3h3 to wszystko jest ważne też chodziło o to żeby żebyśmy nie musieli tego zmieniać i żeby też na każdej stronie mogli to ustawiać jak chcą dlatego każdy moduł ma typ nagłówka wybieralny więc jeżeli jakikolwiek tekst jest na główku no to on sobie może ustawić czy to ma być h1 czy p i jeszcze dużo, dużo innych małych i większych rzeczy których już nie starczymy czasu żeby opowiedzieć bo było tego naprawdę dużo no i dobra, jakie mamy efekty tego jak to wyszło w praktyce tak wyglądała strona, tak wygląda aktualnie jak widzicie strona nasza nowa też jest dużo dłuższa dużo więcej aktualności dużo więcej rzeczy jest od razu na stronie głównej żeby zachęcić użytko nikogo przeczytania tej strony tak wyglądała strona studiówkę szego stopnia tak wyglądała strona ogólnie oferty traktycznie, widzicie tutaj w ogóle nic nie widać po lewej stronie po prawej jednak już coś zachęca do kliknięcia w to strona konkretnego kierunku też zauważcie że od razu nastawiliśmy tutaj podobne kierunki żeby można było przeklikiwać dalej po stronie więc też użytkownik jak już raz wszedł na stronę to mógł czytać ją dłużej strona biblioteki to uwielbiam zwłaszcza to to jest piękne teraz to wygląda tak strona azsu jak widzicie wszystko jest w jednej domenie bardzo podobne do siebie strona dropspota to tak wyglądało w pełni tam był tylko w mały fragment intranet też jest podłączony już pod naszą domenę jeszcze dodatkowo stworzyliśmy taki specjalny moduł który pozwala wychiewać wszystkie kierunki studiów po filtra, tak jak w sklepie byście poszli sobie do naukomers macie filtry, jakie mają dane rzeczy parametry i to wszystko jest wyszukiwane tutaj właśnie przez sorry tutaj właśnie przez te filtry wszystko tutaj jest robione na taxonomiach i potem było skrzytywane to i wyszukiwane po prawej stronie żeby użytkownik mógł zobaczyć co chce i po prostu wziąć swój specjalny kierunek czyli w sumie specjalnie pod SEO żeby właśnie do tej strony bardzo dużo reklam szło, żeby oni mogli sobie wyszukiwać i dopiero potem przechodzić na kolejną stronę no i dobra dane i statystyki co nam z tego wyszło projekt w 5 miesięcy 2 miesiące planowania 3 miesiące programowania 8 osób do pracy projekt manager, dwóch designerów WordPress developer to akurat ja front-end developer tutaj Kuba Paweł DeWops i jeszcze dwóch content managerów powstało 43 unikalne moduły 103 unikalne projekty pod stron 3430 pod stron 23 strony w sieci vitry czyli 23 projekty multisite cztery języki aktualnie są tylko dwa widoczne bo pomyśleli, że chińskiego i ruskiego na razie nie będziemy wprowadzać ale już jest to przygotowane i zrobione w CMS i 84 ds. instrukcji usługi 40 godzin zwiększyliśmy czas przebywania użytkownika na stronie głównej prawie ponad dwukrotnie poprawiliśmy urządzenie mobilne do tej pory to było tylko 11% użytkowników, teraz ponad połowa użytkowników korzysta ze strony na urządzeniach mobilnych liczba użytkania użytkowników wzrosła do pięśnicu 3 tysięcy z 34 tysięcy po roku, rok różnicy jest od skąd weszła dane są na czerwiec z zeszłego roku i czerwiec z tego roku i zwiększyliśmy od 10% ludzi, którzy aplikowali na strony wistuli tego jeszcze nie ma ale też ta strona na początku się tu ładowała trochę dłużej około 6 sekund teraz zeszliśmy do półtorej sekundy ładowania strony więc jak na taką dużą stronę myślę, że może jeszcze coś byśmy widzisnęli ale też nie chcieliśmy aż bardzo iść w tą optymalizację jeszcze bardziej