Jeśli zauważyłeś, jedną z głównych zasad WordPressa jest to, aby zawsze, ale to zawsze ułatwiać życie każdemu – zarówno nowicjuszom, jak i doświadczonym programistom. Jednym ze sposobów na osiągnięcie tego celu jest użycie shortcode’ów.
Brzmi całkiem prosto. Jeśli przed przeczytaniem tego artykułu nie słyszałeś o shortcode’ach i nie wiesz, jak wyglądają – to te archaicznie wyglądające fragmenty tekstu przypominające kod, ujęte w nawiasy kwadratowe.
W porównaniu ze zwykłym kodem, który zazwyczaj wygląda tak:
(Yyy. Co?)
Shortcode’y na ogół wyglądają mniej więcej tak:
(Bułka z masłem.)
…a jeśli jesteś programistą (lub chociażby kimś, kto korzystał z komputera przynajmniej dwa razy), prawdopodobnie zgodzisz się, że sam proces pisania i klikania, by wykonać jedno proste zadanie, potrafi pochłonąć mnóstwo czasu. Z tego samego powodu, dla którego używamy skrótów klawiszowych, shortcode’y istnieją po to, aby ułatwić nam wszystkim życie i zaoszczędzić czas na robienie oraz tworzenie lepszych rzeczy; bardzo przypominają skróty klawiszowe, ponieważ służą dokładnie temu samemu celowi.
Powróćmy teraz do tego konkretnego shortcode’u, takiego samego jak powyżej:
Ten konkretny nazywa się embed shortcode i jest domyślnie wbudowany w WordPressa. Osadza on wideo z adresu URL w Twojej treści. Jeśli korzystasz teraz z WordPressa, możesz skopiować i wkleić powyższy shortcode na swojej stronie, aby go wypróbować.
Shortcode’y nie są jednak rozwiązaniem idealnym, jeśli chodzi o oszczędzanie czasu. W naszym poprzednim artykule zagłębiamy się w to, dlaczego shortcode’y mają też swoje wady i co zespół Sandwich przygotowuje, aby je naprawić.
Na razie jednak zachęcamy do eksperymentowania z shortcode’ami i sprawdzenia, co mogą dla Ciebie zrobić.
Shortcode’y są jednym ze szczytowych osiągnięć WordPressa. Shortcode’y stanowią pomost między programistami a twórcami stron, umożliwiając umieszczanie złożonych elementów treści niemal w dowolnym miejscu. Twórcy wtyczek uwielbiają shortcode’y, ponieważ zapewniają one większą elastyczność w kwestii tego, jak i gdzie użytkownicy wyświetlają swoje treści.
Jeśli nie wiesz, czym są shortcode’y i jak wyglądają, to te archaiczne, przypominające kod teksty ujęte w nawiasy kwadratowe. Wyglądają mniej więcej tak:
Ten konkretny nazywa się shortcode embed i jest domyślnie wbudowany w WordPressa. Osadza on wideo z podanego adresu URL w Twojej treści. Po prostu skopiuj i wklej powyższy shortcode na swojej stronie, jeśli chcesz go wypróbować.
Za kulisami dzieje się tak, że gdy WordPress napotka shortcode w Twojej treści, zostaje on przetworzony i przekształcony w coś innego. W naszym powyższym przypadku, za każdym razem, gdy shortcode
zostanie wykryty, WordPress pobiera adres URL z shortcode’a i sprawdza go na liście obsługiwanych dostawców treści. Gdy takiego znajdzie, pobiera odpowiedni kod osadzania iframe i wyświetla go w zamian.
W czym więc tkwi problem? Brzmi to wystarczająco prosto: wpisujesz krótki tekst w nawiasach i gotowe.
I tu wkracza Shortcode API..
Mnóstwo shortcode’ów
Shortcode API otwiera przed programistami możliwość tworzenia shortcode’ów. Dzięki temu programiści mogą dodawać własne shortcode’y w swoich wtyczkach.
To świetnie, bo teraz za pomocą zaledwie krótkiego fragmentu przypominającego kod (stąd nazwa „shortcode”), zarówno początkujący, jak i zaawansowani użytkownicy mogą umieścić praktycznie dowolny rodzaj treści w dowolnym miejscu.
Domyślnie WordPress ma tylko garść shortcode’ów. Łatwo wpisać je z pamięci, bo jest ich zaledwie kilka. Jednak po zainstalowaniu kilku wtyczek liczba shortcode’ów szybko wzrasta do kilkunastu lub więcej, a w niektórych przypadkach nawet do ponad stu. Każdy shortcode ma swój własny zestaw atrybutów i instrukcję obsługi. Każda wtyczka najprawdopodobniej posiada jakąś dokumentację wyjaśniającą działanie wszystkich jej shortcode’ów oraz listę dostępnych parametrów. Trzeba by jednak oszaleć, by próbować zapamiętać wszystkie shortcode’y i ich atrybuty.
Problem polega na tym, że nie ma scentralizowanego miejsca, w którym można znaleźć wszystkie shortcode’y dostępne na Twojej stronie oraz dowiedzieć się, jak z nich korzystać.
Niektórzy próbują rozwiązać ten problem
Niektóre wtyczki próbują rozwiązać ten problem, prezentując wszystkie swoje shortcode’y w łatwo dostępnej liście rozwijanej. Kliknięcie jednego z nich wstawia shortcode wraz ze wszystkimi możliwymi atrybutami. Nie trzeba już niczego zapamiętywać, co jest dużą zaletą.
Niektórzy idą dalej i dodają wyskakujące okienko ustawień z polami wyboru i próbnikami kolorów, aby uzupełnić atrybuty shortcode’a.
To rozwiązanie poniekąd działa. Jednak każda wtyczka wymienia tylko własne shortcode’y. Więc jeśli każda wtyczka tworzy własną formę selektora shortcode’ów, nieuchronnie nadejdzie moment, w którym na ekranie pojawi się wiele różnych selektorów (zdarzyło mi się to w przeszłości).
Innymi słowy, każda wtyczka robi swoje i wdraża własne rozwiązanie dla swoich shortcode’ów. Niektóre wtyczki dodają nowy przycisk obok przycisku „Dodaj media” lub nowy wewnątrz edytora TinyMCE.
Więc teraz możesz pomyśleć: „Dlaczego by po prostu nie zebrać shortcode’ów z innych wtyczek i nie dołączyć ich również do swojej listy rozwijanej / selektora shortcode’ów?”. Cóż, dokładnie tak pomyślałem. Ale łatwiej to powiedzieć niż zrobić. Za chwilę wyjaśnię dlaczego, ale najpierw zobaczmy, jak wyglądałoby idealne rozwiązanie.
Idealne rozwiązanie
Idealnym planem byłoby stworzenie wtyczki, która gromadzi wszystkie dostępne shortcode’y na Twojej stronie, a następnie przedstawia Ci listę i pomaga uzupełnić wszystkie atrybuty. A za każdym razem, gdy zainstalujesz nową wtyczkę, wszystkie nowo wprowadzone shortcode’y również zostaną Ci zaprezentowane.
Wyobraź sobie centralne miejsce, w którym umieszczone byłyby wszystkie Twoje shortcode’y z łatwym dostępem. Każdy shortcode opisywałby, co robi i do jakiej wtyczki należy. Z kolei dla każdego dostępnego atrybutu wyobraź sobie etykietę, właściwy sposób wyboru wartości oraz opis. Widziałbyś listy rozwijane, próbniki kolorów, przyciski radiowe, przełączniki i tym podobne.
Coś takiego ułatwiłoby nam życie jako twórcom stron internetowych i treści. Koniec ze sprawdzaniem różnych dokumentacji czy przeszukiwaniem różnych części panelu administracyjnego tylko po to, by skopiować wygenerowany shortcode dla slidera, którego chcesz użyć.
Haczyk
Niestety, w tej chwili zrobienie czegoś takiego jest dość trudne. Nie ma niezawodnego sposobu, aby poznać wszystkie szczegóły danego shortcode’a. Możesz uzyskać listę wszystkich shortcode’ów, ale tylko ich właściwe tagi/nazwy; nie uzyskasz żadnych dodatkowych informacji na ich temat, takich jak lista atrybutów, to, co robią, oraz ich typy – np. ciąg znaków, kolor czy liczba. Nie uzyskasz też nawet namiastki opisu dla poszczególnych atrybutów.
Uwaga dla programistów: tak, istnieje nowo dodany trzeci argument dla funkcji shortcode_atts, ale nie jest on argumentem wymaganym. Dopóki więc każdy programista wtyczek na świecie go nie zaimplementuje, wciąż nie będziemy mieli pewnego sposobu na ustalenie wszystkich atrybutów shortcode’a.
Shortcode API nie zapewnia żadnego mechanizmu dodawania opisów shortcode’ów, rzutowania typów atrybutów ani opisów atrybutów. I dopóki sam WordPress nie doda centralnego miejsca dostępu do shortcode’ów, wątpię, aby taki mechanizm kiedykolwiek powstał.
Podsumowanie
W tej chwili zadanie porządkowania shortcode’ów pozostawiono każdemu programiście z osobna. Dopóki w WordPressie nie zostanie opracowana scentralizowana metoda, możesz spodziewać się, że w panelu administracyjnym nadal będziesz widzieć wiele przycisków „Dodaj shortcode”. To, czy coś takiego powinno zostać dodane do rdzenia WordPressa, czy nie, jest już zupełnie osobną, obszerną dyskusją.
Alternatywa
Istnieją wtyczki do tworzenia stron (page buildery), które podchodzą do tego inaczej. Zamiast programowego wykrywania shortcode’ów oferują narzędzia do mapowania shortcode’ów, w których użytkownicy mogą ręcznie wprowadzić każdy szczegół shortcode’a. Po wykonaniu tej czynności staje się on dostępny w ramach page buildera. Choć to działa, są one dostępne tylko na Twojej własnej stronie.
My w Page Builder Sandwich tworzymy coś, co – miejmy nadzieję – rozwiąże tę zagwozdkę z shortcode’ami. Zapisz się do naszego newslettera poniżej, aby otrzymywać powiadomienia o naszych postępach.
Możesz teraz umieszczać mapy w projektach swoich stron za pomocą Page Builder Sandwich!
Ekscytowanie się mapami może wydawać się dziwne. Kopiujesz adres URL z Google Maps i go osadzasz. Albo pobierasz wtyczkę do map z sieci i wklejasz shortcode. A może Twój inny kreator stron ma już taką funkcję i możesz dodać mapę w dowolnym momencie. Ale powodem, dla którego jesteśmy podekscytowani, jest to, że przenieśliśmy dodawanie map na zupełnie nowy poziom.
Oto podgląd:
Stary, nudny sposób dodawania mapy
Oto jak dodaje się mapę w typowym kreatorze stron:
Przeciągasz nowy element mapy,
Wpisujesz szerokość i długość geograficzną w polach,
Wpisujesz inne wartości w polach, takie jak wysokość mapy, szerokość mapy, zaznaczasz pole wyboru stylu dróg itp.,
Klikasz podgląd, sprawdzasz, jak to wygląda i decydujesz, że musisz coś zmienić, aby wyglądało lepiej,
Wracasz do kreatora stron, zmieniasz wartości, a następnie powtarzasz powyższy krok 4.
Dodawanie mapy w stylu Page Builder Sandwich
Mapy na stronach internetowych są interaktywne – możesz je przesuwać, przybliżać i oddalać. Pomyśleliśmy więc: dlaczego by nie wyeliminować zgadywania i po prostu nie pozwolić użytkownikom na bezpośrednią interakcję z mapą podczas tworzenia strony?
Oto jak dodaje się mapę za pomocą Page Builder Sandwich:
Dodajesz element mapy,
Wpisujesz szerokość i długość geograficzną lub adres, na którym ma być wyśrodkowana mapa,
Przesuwasz mapę oraz przybliżasz lub oddalasz ją, aby uzyskać pożądany wygląd,
Dodajesz ciekawe kolory do map, aby dopasować je do swojego stylu,
Klikasz zapisz.
Nasz sposób jest o wiele przyjemniejszy i bardziej intuicyjny. W zasadzie wchodzisz w interakcję z mapą dokładnie tak, jak ze zwykłą mapą Google.
Kolorowe mapy lub stylizowanie ich za pomocą SnazzyMaps
Świetną funkcją, którą dodaliśmy, jest możliwość barwienia i kolorowania map, a zrobienie tego jest niezwykle proste. (Dotyczy to tylko wersji premium). Jeśli chcesz pokolorować mapę, po prostu kliknij nasz próbnik kolorów i wybierz barwę, a Twoja mapa natychmiast się zmieni.
Oto przykład mapy z różowym zabarwieniem:
Page Builder Sandwich obsługuje również bardziej wyszukane schematy kolorystyczne za pośrednictwem SnazzyMaps. Mają oni ogromną listę schematów kolorów nadesłanych przez użytkowników oraz umożliwiają tworzenie własnych, jeśli chcesz mieć większą kontrolę nad kolorami.
Po prostu znajdź schemat kolorów, który Ci się podoba, skopiuj kod i wklej go do Page Builder Sandwich. Schemat kolorów zostanie natychmiast zastosowany do Twojej mapy.
Jest o wiele więcej świetnych rzeczy, które możesz zrobić z mapami – na przykład dodać je w wierszach o pełnej szerokości, aby uzyskać bardziej spektakularny efekt. Możesz je również umieścić w karuzeli, jeśli chcesz, lub wewnątrz zakładek (funkcja wkrótce).
Jeśli nie masz jeszcze Page Builder Sandwich, możesz wypróbować wersję premium, klikając link „Live Demo” powyżej.
Jeśli jesteś stosunkowo nowy w tworzeniu stron internetowych, jest duża szansa, że nie znasz wielkiej debaty WordPress.com kontra WordPress.org. Być może nawet nie wiedziałeś, że istnieje ta druga opcja, ani jakie są ich wady i zalety. Czym więc, powiedzcie sami, jest ta wielka debata między używaniem WordPress.com a WordPress.org? Czy jedna z nich to po prostu tania podróbka czekająca na pozew?
Cóż, nie.
Debata w skrócie sprowadza się do tego, która z tych dwóch usług WordPress lepiej pasuje do strony, którą próbujesz stworzyć. Żadna z nich nie jest podróbką drugiej, a obie witryny należą do WordPressa; po prostu jedna z nich (.com) jest wersją bardziej przyjazną dla osób niebędących programistami, podczas gdy .org ma znacznie mniej ograniczeń pod względem budowania stron w porównaniu z .com.
„Skąd mam jednak wiedzieć, której potrzebuję?”
Odpowiedź na to pytanie zależy wyłącznie od potrzeb Twojej przyszłej strony. Nie ma jednej platformy WordPress, która byłaby obiektywnie „lepszą” lub nawet „najlepszą” wersją do użycia. Obie mają swoje unikalne cechy oraz równą liczbę zalet i wad.
WordPress.com: Dlaczego i kiedy warto?
WordPress.com dba o podstawowe kwestie za Ciebie, co pozwala Ci bardziej skupić się na zawartości strony. To kreator stron w pełni zarządzany i hostowany przez firmę o nazwie Automattic. Otrzymujesz hosting premium, kopie zapasowe, bezpieczeństwo i tym podobne. Oznacza to, że możesz o wiele łatwiej skupić się na treści swojej witryny w porównaniu z koniecznością spędzania całych godzin na budowaniu jej od zera.
Pamiętaj jednak, że WordPress.com wiąże się również z pewnymi ograniczeniami. Chociaż możesz nie martwić się tak bardzo o kwestie techniczne działania swojej witryny, musisz pamiętać, że prawdopodobnie nie będziesz mieć nad nią aż takiej swobody, jakiej byś oczekiwał. O ile dostosowywanie interfejsu strony może nie stanowić problemu (WordPress.com oferuje na przykład mnóstwo motywów), o tyle dodawanie pewnych funkcji i elementów w postaci wtyczek może okazać się kłopotliwe, zwłaszcza jeśli Twoja witryna potrzebuje określonych funkcji, które nie są dostępne na WordPress.com.
Utrzymanie strony internetowej to zupełnie inna historia. W dużej mierze zależy to od tego, czy: 1.) nie jesteś programistą WordPressa, 2.) nie masz zamiaru uczyć się kodowania lub 3.) masz na to mało czasu bądź nie masz go wcale.
WordPress.org: Kiedy warto go rozważyć?
Zasadą, którą warto się kierować przy rozważaniu WordPress.org, jest to, czy znasz przynajmniej trochę podstawy programowania lub czy chcesz poświęcić trochę czasu na naukę. Ponieważ WordPress.org to samodzielnie hostowana wersja WordPressa, możesz ubrudzić sobie ręce tak bardzo, jak tylko chcesz. Ponadto masz swobodę majsterkowania przy niej w dowolnym stopniu. Odpowiadasz za znalezienie własnego hostingu, tworzenie własnych kopii bezpieczeństwa i ogólne samodzielne utrzymanie witryny – a co ważniejsze, na własnych warunkach.
„Ale zaraz, dlaczego miałbym tego chcieć? Czy celem WordPressa nie jest ułatwienie tworzenia stron?”
…Nie do końca. Pomyśl o tym w ten sposób: The Daily Post przedstawia znakomitą analogię między WordPress.org a WordPress.com, dzięki której nawet najwięksi nowicjusze (tacy jak ja) od razu rozumieją sedno sprawy.
Według nich musisz myśleć o WordPress.com jako o czymś, do czego nie masz pełnych praw własności. Weźmy na przykład siebie w wieku 15 lat, wciąż mieszkającego z rodzicami. Gdybyś chciał pomalować swoją sypialnię, musiałbyś najpierw zapytać rodziców o zgodę (którzy oczywiście są pełnymi właścicielami domu, w tym Twojego pokoju). Z technicznego punktu widzenia pokój jest Twój, ale koniec końców, cóż… nie do końca.
Jeśli więc potrzebujesz lub chcesz dokonać drastycznych zmian (takich jak pomalowanie ścian czy powiększenie pokoju), i tak musisz to przedyskutować i/lub pójść na kompromis z faktycznymi właścicielami domu, czyli mamą i tatą. Zaletą tego jest jednak to, że gdy w piwnicy wysiądzie bezpiecznik lub klimatyzacja przestanie działać, zajmą się tym Twoi rodzice, a Ty nie musisz się o nic martwić.
Z kolei WordPress.org to coś, co możesz swobodnie dostosowywać i przy czym możesz majsterkować według własnego uznania. Można to porównać do sytuacji, kiedy w wieku 18 lat w końcu się wyprowadzasz i zyskujesz własne mieszkanie. Ponieważ masz pełne prawo własności do swojego lokum, nie musisz iść na kompromis z nikim, aby pomalować ściany na kolor, którego Twoja mama zawsze się bała; masz swobodę podjęcia decyzji i/lub zatrudnienia kogoś, kto spełnia Twoje standardy, aby zrobił to za Ciebie. Ponadto masz także pełną swobodę wyboru dokładnie takiego klimatyzatora do salonu, jakiego chcesz. Tyle tylko, że jeśli ulegnie awarii, będziesz musiał zatrudnić fachowca do naprawy lub samemu dowiedzieć się, co jest nie tak i jak to naprawić (co nie jest takie złe, bo cóż – cenna nauczka, a nauka to dobra rzecz).
Mamy nadzieję, że teraz masz już jaśniejszy obraz tego, jakie są wyraźne różnice między WordPress.com a WordPress.org. Ale w skrócie:
instaluj tyle lub tak mało, ile chcesz, motywy są ograniczone wyłącznie do motywów WordPressa, musisz uiścić określoną opłatę, aby pozbyć się reklam.Masz niemal pełną kontrolę nad swoją stroną; możesz dodawać, dostosowywać, a nawet tworzyć własne motywy.
Kontrola nad treścią jest ograniczona;
WordPress.com
WordPress.org
W pełni hostowany przez WordPress; wszystkie podstawowe elementy są zapewnione.
Self-hosted; wybierasz własne podstawowe elementy lub wybierasz lepsze.
Funkcje są ograniczone do tego, co oferuje WordPress.com
Tysiące funkcji w postaci wtyczek;
Oto kilka porównań, które wynikają z zestawienia różnic między tymi dwoma rozwiązaniami. Wybór między nimi ostatecznie sprowadza się do ilości swobody, jakiej oczekujesz przy tworzeniu swojej witryny, oraz tego, ile zasobów (czasu, wysiłku, pieniędzy itp.) jesteś gotów na to poświęcić. Pamiętaj, że są to bardzo istotne kwestie do rozważenia, zanim zdecydujesz, która platforma WordPress najbardziej Ci odpowiada. Nie spiesz się więc z podejmowaniem decyzji!
Zasadniczo, w swojej najbardziej podstawowej definicji, światło (whitespace) to przestrzeń wokół i pomiędzy wszystkimi elementami kompozycji, która pozostaje niezagospodarowana. To nie jest po prostu marnowanie miejsca na ekranie, jak uważa większość właścicieli stron internetowych. Prawidłowo użyte światło może w rzeczywistości przynieść korzyści i pomóc lepiej promować produkt. Jest kluczowym elementem dobrego designu i sprawia, że strona staje się lepsza pod każdym względem.
Choć angielska nazwa whitespace sugeruje, że ta przestrzeń jest biała, nie zawsze musi być dosłownie biała. Światło może mieć dowolny kolor – może nawet zawierać subtelny wzór lub teksturę. Jest to obszar, na którym nie chcesz skupiać wzroku odbiorcy. Zamiennie nazywa się go przestrzenią negatywną (negative space).
Odstępy między liniami bazowymi i akapitami realnie ułatwiają ludziom komfortowe czytanie całej treści na stronie. Dopracowanie drobnych detali witryny (takich jak interlinia czy światło międzyliterowe) może diametralnie wpłynąć na wygodę lektury.
Celem jest zachęcenie użytkowników do dalszego czytania poprzez projektowanie układów, które nie męczą wzroku.
Źródło obrazu: HP Magic Words
Powód nr 2: Przyspiesza interakcję
Bądźmy szczerzy: większość Twoich odwiedzających nie ma wystarczająco dużo cierpliwości, by wnikliwie badać strony internetowe podczas przeglądania. Gdy witryna wygląda na przeładowaną, dekoncentruje użytkowników i utrudnia im znalezienie tego, czego szukają.
Światło powinno pomagać w prowadzeniu wzroku po stronie. Mniejsza liczba elementów konkurujących o uwagę oraz właściwe użycie wolnej przestrzeni zapobiegają rozpraszaczom, które spowalniają użytkowników.
Powód nr 3: Przyciąga uwagę do właściwych elementów
Światło może dawać użytkownikom wizualne wskazówki, gdzie powinni patrzeć. Przy prawidłowym zastosowaniu pusta przestrzeń pomaga wyeksponować informacje i skierować wzrok na konkretny obszar strony.
Pamiętaj: jeśli wszystko się wyróżnia, to nic się nie wyróżnia.
Źródło obrazu: Pocket Penguins
Powód nr 4: Pierwsze wrażenie ma znaczenie
Wygląd i charakter strony to kluczowy czynnik decydujący o dobrym pierwszym wrażeniu. Dobre pierwsze wrażenie często przekłada się na dłuższy czas wizyty. Zbyt mała ilość wolnej przestrzeni może sprawić, że strona będzie wyglądać tanio i niewiarygodnie. Odwiedzający nie uznają witryny ani marki za godną zaufania, jeśli nie prezentuje się ona atrakcyjnie. Odpowiednia ilość światła pomaga nadać stronie właściwy ton. Może być sposobem na zakomunikowanie pomysłowości, świeżości, a czasem także elegancji.
Wskazówka: Oto pomysł, jak sprawić, by Twój projekt strony był prosty i intuicyjny.
Źródło obrazu: Flock Knitwear
Powód nr 5: Pomaga stworzyć oddech i równowagę
Zrównoważony projekt nie oznacza symetrii. Duży element graficzny można zrównoważyć kilkoma mniejszymi. Dodanie światła to świetny sposób na zbalansowanie elementów o różnych rozmiarach na stronie. Stwórz płynność, aby wzrok użytkowników nie błądził chaotycznie po ekranie. Dobry projekt powinien prowadzić użytkownika od jednego punktu do drugiego bez wprowadzania go w błąd.
Podsumowanie
Następnym razem, gdy odwiedzisz jakąś stronę internetową i zauważysz, że spędzasz na niej dłuższą chwilę, zastanów się, co sprawiło, że zostałeś i czytasz dalej. Czy to interlinia sprawia, że artykuł czyta się łatwiej? Czy to doświadczenie sprawia, że chcesz wracać po więcej? Czy miałeś trudności ze znalezieniem nawigacji?
Zwróć uwagę na udane wykorzystanie światła w tej witrynie. Jeśli uważasz, że sprawdzi się to również na Twojej stronie, naucz się stosować i kontrolować ilość wolnej przestrzeni przydzielanej poszczególnym elementom, aż osiągniesz pożądany ton i czytelność, nie rezygnując z płynności, jakiej oczekujesz od swojej witryny.
Nadrzędnym celem każdej strony jest komunikacja. Atrakcyjność wizualna idzie w parze z jej sukcesem.
Jedną z ważnych rzeczy, które warto wziąć pod uwagę podczas tworzenia swojej pierwszej witryny – niezależnie od tego, czy prowadzisz firmę, jesteś freelancerem, czy kimkolwiek innym – jest fakt, że nie każdy biegle włada językiem kodu i programowania. Możesz być na przykład szefem kuchni, który chce publikować swoje przepisy w internecie. Możesz być również studentem sztuk pięknych potrzebującym profesjonalnie wyglądającego portfolio albo startupem potrzebującym własnej witryny. Niezależnie od sytuacji prawdą pozostaje, że choć niektórzy z nas znają podstawy kodowania, to nie wszyscy jesteśmy pełnoetatowymi programistami, i nie każdy, kto potrzebuje lub chce witryny, wie, jak stworzyć ją od podstaw. Tutaj z pomocą może przyjść WordPress. Pojawia się pytanie: „Dlaczego WordPress?”
POWÓD 1
WordPress to system zarządzania treścią, dzięki czemu jest całkowicie przyjazny dla użytkownika.
Pierwszą rzeczą, którą musisz wiedzieć, jest to, że WordPress to system zarządzania treścią (CMS). Mówiąc prościej, oznacza to, że WordPress pozwala swoim użytkownikom tworzyć witryny bez konieczności pisania kodu od podstaw. Posiada systematyczny, uporządkowany interfejs, który pozwala ci stale mieć wszystko pod kontrolą, bez konieczności ciągłego majstrowania w kodzie.
W porównaniu do budowania witryny od podstaw, co zazwyczaj zaczyna się tak:
Dzięki systemowi zarządzania treścią zaczynasz od czegoś takiego:
Interfejs zaplecza WordPressa. Zarządzanie witrynami i ich tworzenie staje się łatwiejsze dzięki CMS.
Możesz jednak zadać sobie pytanie: „WordPress wygląda świetnie, ale co jeśli nie ma funkcji, których chcę dla mojej witryny?”, albo „co jeśli chcę mapę, odtwarzacz muzyki, mechanizm pamięci podręcznej lub bardziej niezawodny system bezpieczeństwa?”
…Technicznie rzecz biorąc, WordPress najprawdopodobniej posiada tę funkcję, której potrzebujesz, i pojawi się ona w postaci wtyczki WordPressa.
POWÓD 2
Wtyczki: wisienka na torcie WordPressa
Jeśli martwisz się, że WordPress nie zawiera tej konkretnej funkcji, którą chcesz mieć w swojej witrynie, nie martw się: najpewniej ją ma.
Wtyczki to „funkcje rozszerzające”, które istnieją po to, aby zwiększyć funkcjonalność twojej witryny opartej na WordPressie. Jeśli jesteś przedsiębiorcą potrzebującym formularza kontaktowego dla swojej witryny, musisz wiedzieć, że WordPress sam w sobie nie ma takiej funkcji, ale istnieje mnóstwo wtyczek, które ją zapewniają. A ponieważ WordPress jest oprogramowaniem open source – co oznacza, że niemal każdy może przyczynić się do jego rozwoju – nowe wtyczki są tworzone regularnie. Możesz uzyskać pożądany formularz kontaktowy i wiele więcej. Masz swobodę dodawania innych wtyczek: od przycisków udostępniania w mediach społecznościowych, przez mapy, aż po dodatkowe środki bezpieczeństwa dla twojej witryny, pośród wielu, wielu innych funkcji i rozszerzeń. Przyznaj, że brzmi to świetnie.
Obecnie WordPress posiada tysiące takich wtyczek – a niektóre z nich są nawet dostępne bezpłatnie i/lub mają darmowe wersje, w tym PBS.
POWÓD 3
Otwarte oprogramowanie: społeczność WordPressa
WordPress jest projektem Open Source. Oznacza to, że każdy może swobodnie przyczyniać się do jego rozwoju i każdy może badać jego kod źródłowy, aby dowiedzieć się więcej o programowaniu, a nawet o samym WordPressie. Istnieją nawet firmy, które są wyłącznie dedykowane tworzeniu i rozwijaniu produktów związanych z WordPressem, takich jak wtyczki i motywy (tak jak my!)
Ponieważ WordPress jest oprogramowaniem open source, istnieje mnóstwo użytkowników, programistów, a nawet projektantów, którzy stale współpracują, a nawet pomagają sobie nawzajem w problemach związanych z WordPressem. W ten sposób otrzymujesz prawdziwą pomoc od prawdziwych ludzi, a jednocześnie uczycie się od siebie nawzajem. Jest to coś, czego typowy dział obsługi klienta niemal nigdy nie jest w stanie zapewnić.
POWÓD 4
WordPress to pewny wybór.
CNN, oficjalny blog Star Wars, magazyn Time, a nawet (SZOK!) Beyoncé – wszyscy oni posiadają witryny oparte na WordPressie, pośród wielu innych. Te wielkie nazwiska to nie jedyna rzecz, która potwierdza renomę WordPressa – według Treehouse.com około 25% wszystkich witryn w sieci działa na WordPressie. Biorąc pod uwagę, ile milionów i tysięcy witryn istnieje… cóż, 25% to całkiem spora liczba.
POWÓD 5
Mnóstwo możliwości dostosowywania!
WordPress ma mnóstwo motywów dostępnych dla ciebie i twojej witryny. Masz swobodę wyboru spośród darmowych wersji, wersji premium, a nawet stworzenia własnego motywu (lub zatrudnienia kogoś, kto go dla ciebie stworzy!).
POWÓD 6:
Jest darmowy.
Tak, dobrze czytasz. Dzięki środowisku lokalnemu WordPress jest całkowicie bezpłatny i możesz zainstalować go na swoim komputerze jednym kliknięciem. Podobnie, zamiast zatrudniać programistę, możesz wykorzystać swoją dotychczasową wiedzę o kodowaniu, aby dowiedzieć się więcej o tym, jak działa WordPress (a nauka przecież zawsze popłaca).
…nie wspominając o tym, że jeśli nie masz czasu zbytnio zagłębiać się w WordPressa i tworzenie witryn, zawsze możesz sięgnąć po sprytną wtyczkę do budowania stron i wypróbować naszą.
Pamiętaj, że WordPress oferuje nieskończone możliwości, a zrozumienie jego działania wcale nie wymaga bycia geniuszem!
Korzystanie z WordPressa może zaoszczędzić ci mnóstwo czasu, pieniędzy i wysiłku. A w czasach, gdy tych zasobów jest jak na lekarstwo, pamiętaj, że witryny WordPressa, ich wtyczki (takie jak PBS!), motywy, a w szczególności społeczność, mogą w pełni ci pomóc i uczynić wszystko o wiele, wiele prostszym.
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy,convenient.
Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.
I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.
I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.
I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.
W ciągu ostatnich kilku tygodni zespół PBS dodał element mapy, a także element zakładek.
Mogłoby się wydawać, że dodawanie nowego elementu co kilka dni byłoby dla nas całkiem łatwą i prostą rutyną.
But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.
And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”
I know what you’re thinking: “How the heck can you supportthat much shortcodes? Is thatevenpossible?”
Well, the simple answer is yes.Yes it is.
And we’ve managed to achieve this feat through shortcode mapping.
What is Shortcode Mapping?
Shortcode mapping makes building shortcodes more friendly.
Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.
Zalety takiego systemu są całkiem spore:
1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.
2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!
3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.
4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.
5.) Overall faster page building time!
Mapowanie shortcode’ów nie jest jednak nowością i wiele kreatorów stron już je posiada. Co jednak wyróżnia nasze rozwiązanie?
Jak działa mapowanie shortcode’ów w innych kreatorach stron
Each person/site does their own shortcode mapping.
Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.
W tym scenariuszu ciężar mapowania shortcode’ów spoczywa na Tobie, użytkowniku. Jeśli chcesz, aby wszystkie Twoje shortcode’y były w pełni zmapowane ze wszystkimi atrybutami (oraz z ładnymi próbnikami kolorów i innymi elementami), musisz upewnić się, że wprowadzisz każdy pojedynczy szczegół każdego shortcode’a.
What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.
Jak działa mapowanie shortcode’ów w Page Builder Sandwich
Shortcode mappings are shared across all users.
Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.
Daje nam to mnóstwo wspaniałych korzyści:
Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!
In case you’re interested in reading into how we made all of this possible, we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).
Zapisz się do naszego newslettera!
You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.
So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!
Istnieje spora szansa, że jesteś tutaj, ponieważ słyszałeś, że PBS to prawdopodobnie jeden z najszybszych sposobów na tworzenie stron. Chociaż kreatory stron zasadniczo istnieją po to, aby ułatwić życie, jest kilka rzeczy, które warto wziąć pod uwagę przed zagłębieniem się w ten konkretny obszar tworzenia stron na WordPressie.
Nauka WordPressa: kluczowy warunek wstępny korzystania z page builderów
Jeśli jednak nieco przeraża Cię nagromadzenie technicznych terminów w tym artykule, nie martw się. Istnieje kilka pomocnych witryn, które możesz odwiedzić na początek. Należą do nich WordPress Codex oraz Treehouse. Znajdziesz tam wskazówki dotyczące WordPressa oraz tworzenia stron, w zależności od Twoich potrzeb i poziomu wiedzy.
Warto najpierw wybadać grunt, żeby mieć pewność
Zawsze warto wypróbować darmowe wersje i/lub wersje próbne przed dokonaniem jakichkolwiek większych zakupów, których mógłbyś w przyszłości pożałować . Na szczęście większość page builderów oferuje wersje darmowe lub demo. Oczywiście możemy również przejrzeć mnóstwo rzetelnych recenzji na temat page builderów, podczas gdy inne serwisy porównują i zestawiają ze sobą page buildery. Pamiętaj, aby dokładnie rozważyć swoje opcje!
Poza czytaniem artykułów i recenzji, jedną z rzeczy, które uwielbiamy w WordPressie, jest stojąca za nim ogromna społeczność. Tworzą ją osoby prywatne, zespoły, a nawet firmy, chętne wyciągnąć pomocną dłoń do innych użytkowników WordPressa, zwłaszcza tych początkujących, takich jak Ty! Ta społeczność opiera się w zasadzie na idei bezinteresownej pomocy („podaj dalej”) bardziej niż na zasadzie wzajemności „coś za coś”.
Projekt robi ogromną różnicę
Entuzjastka WordPressa Donna Fontenot Cavalier zwraca bardzo trafną uwagę na kwestię page builderów typu „przeciągnij i upuść” oraz znaczenie podstaw projektowania. Chociaż kreatory drag-and-drop, takie jak PBS, mogą zaoszczędzić mnóstwo czasu, podstawowa wiedza i przynajmniej pewne wyczucie estetyki to kolejna kluczowa kwestia, którą należy wziąć pod uwagę podczas tworzenia stron internetowych. Wyobraź sobie taką sytuację – załóżmy, że zdobywasz świetny page builder wedle własnego wyboru: super! Ale załóżmy też, że niekoniecznie masz najlepsze oko do sztuki, designu i funkcjonalności: ojoj.
Nie martw się jednak. Page Builder Sandwich to nie tylko page builder – nasz zespół z zaangażowaniem pomaga także innym użytkownikom WordPressa. Jeśli więc masz pewne trudności z projektowaniem, głowa do góry – na blogu PBS mamy mnóstwo artykułów z wieloma przydatnymi wskazówkami, które pomogą Ci zacząć. Dzięki temu zrobisz więcej, nauczysz się więcej i będziesz się mniej martwić.
Pamiętaj, jeśli masz jakiekolwiek pytania lub wątpliwości dotyczące page builderów bądź czegokolwiek związanego z powyższymi kwestiami, śmiało napisz do nas w sekcji komentarzy poniżej. Zawsze chętnie służymy pomocą naszym klientom.
In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.
Oto kilka podstawowych wskazówek dotyczących tego, co możesz zrobić, aby ulepszyć wygląd swojej strony internetowej.
You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.
Juicebox used this zesty combination for people to get that organic and fresh that the brand represents
Kolorystyka strony internetowej odgrywa dużą rolę w kreowaniu odpowiedniego tonu i nastroju dla Twojej marki. Wybór ładnego koloru nie oznacza wcale, że jest on tym właściwym. Każdy kolor wysyła inny komunikat i wywołuje inną reakcję. Kolory to jedna z pierwszych rzeczy, które zauważają odwiedzający stronę, i mogą one mieć realny wpływ na sukces Twojej witryny internetowej.
Wybierz najwyżej dwa do trzech kolorów bazowych dla swojego projektu. Jeśli czujesz potrzebę dodania większej liczby kolorów, możesz wykorzystać rozjaśnienia (tints) i przyciemnienia (shades) swoich kolorów bazowych. W teorii barw rozjaśnienie (tint) to mieszanka koloru z bielą, która zwiększa jasność, podczas gdy przyciemnienie (shade) to mieszanka koloru z czernią, która zmniejsza jasność.
Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.
Używaj kontrastujących krojów pisma
There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.
Dobranie dwóch krojów pisma w parę może być trudne nawet dla projektantów. Możesz ułatwić sobie zadanie, eksperymentując z dwoma różnymi fontami z jednego kroju pisma. Jeśli drugi krój pisma jest konieczny, wybierz taki, który dobrze kontrastuje z pierwszym. Zazwyczaj połączenie fontu szeryfowego i bezszeryfowego sprawdza się znakomicie. Inną ważną wskazówką jest wybór krojów pisma pasujących do stylu Twojej firmy. Możesz mieć najładniejszy font na świecie, ale użyty w niewłaściwym kontekście nadal może wyglądać fatalnie.
Zadbaj o przejrzystość dzięki pustej przestrzeni
Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.
Dostosuj stronę do urządzeń mobilnych
People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.
Dodatkowa wskazówka: Korzystanie z Page Builder Sandwich na Twojej stronie internetowej automatycznie włączy widok mobilny i dostosuje go do rozmiaru ekranu telefonu.
Podsumowanie
Pamiętaj: Niedocenianie siły designu to jeden z najgorszych błędów, jakie możesz popełnić podczas tworzenia swojej strony internetowej. Oczywiście nie musisz wkładać w projektowanie witryny nadmiernego wysiłku, ale samo stosowanie się do tych wskazówek może sprawić, że Twoja witryna nie wywoła u odbiorców poczucia dezaprobaty.
When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.
Czym są nagłówki Hero?
The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”
Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.
Aby zacząć tworzyć swój pierwszy nagłówek Hero w PBS, wykonaj poniższe szybkie kroki:
Krok 1: Wstaw kolumnę i dostosuj szerokość wiersza
Click 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.
Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.
What’s the difference betweenNormal, Full-WidthandFull-Width: Retained Content Width?
Normal – Background, text and other elements are contained within the bounds of your current theme’s row width
Full-Width – Background, text and other elements fill the entire width of your browser window
Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width
In this layout,Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.
Krok 2: Dostosuj margines, aby utworzyć pustą przestrzeń
Increase the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.
Krok 3: Dodaj tło z nakładkami tekstu i elementów
To add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.
Tip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.
Type in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.
Wskazówka nr 2: W przypadku elementów brandingowych rozważ użycie białego lub czarnego logo, aby nie gryzło się z kolorowym obrazem tła.
You can also add buttons by clicking on Button below the Insert Content tab.
Nie zapomnij zapisać swojej pracy i gotowe!
Gratulacje z okazji stworzenia pierwszego nagłówka Hero z PBS! Jeśli jednak Ci się to nie udało, nie martw się; zaczynanie od zera jest w PBS prawdopodobnie łatwiejsze, więc nie powinno to sprawić większego problemu.