Tag: css

Wtyczka WebinarPress (dawniej WP WebinarSystem), czyli platforma do webinarów na WordPressie

Ten tydzień rozpocząłem od pytania koleżanki, czy możemy szybko i relatywnie tanio wdrożyć platformę webinarową, najlepiej na jakimś gotowym rozwiązaniu, najlepiej na WordPressie, z którego oboje chętnie korzystamy. Tak, by nie tylko nie tracić czasu „na deweloperkę”. Chwilę porozmawialiśmy o tym, jakie funkcje są możliwe, jakie wymagane, oraz o tym, co znaczy „relatywnie tanio”. Na koniec ku jej radości miałem gotowe, i faktycznie niedrogie rozwiązanie. Oczywiście relatywnie… ;-)

Poznaj Divi 4.0 z Divi Theme Builder, i w prosty sposób zmień wygląd dosłownie każdej (pod)strony na swojej stronie WWW

I stało się, motyw Divi 4.0 do WordPresa oficjalnie został zaprezentowany, a wraz z nim Divi Theme Builder, czyli kreator motywów (konstruktor motywów), dzięki czemu w prosty sposób – z wykorzystaniem m.in. Divi Buildera – można nadać właściwie dowolny wygląd właściwie dowolnemu elementowi strony. I to globalnie.

Z wtyczki Shortcodes Ultimate (WordPress) zniknęło wsparcie dla „transparent” jako koloru (przynajmniej w przypadku tła notatki)

O ile nie mam nic do używania różnych page builderów na zwykłych (pod)stronach, to we wpisach (w artykułach) raczej staram się ich unikać, bo ewentualna zmiana wymagałaby przepisania archiwalnych artykułów, co gdy mowa o tysiącach już takie „fajne” się nie wydaje. Ale też czasem zachodzi potrzeba urozmaicenia zawartości jakiegoś artykułu o elementy, których w standardzie w WordPressie nie znajdziemy (nawet w Gutenbergu). W takiej sytuacji dość często sięgam po wtyczkę Shortcodes Ultimate, która choćby na tej stronie towarzyszy mi od lat… Ostatnia jednak aktualizacja trochę mi namieszała, bo zaszły jakieś zmiany, i element, z którego korzystam najczęściej , przestał się wyświetlać godnie z moimi oczekiwania, tym samym wpływając na czytelność przekazu.

Divi Builder (Elegant Themes) z bezpośrednim zarządzaniem zawartością modułów zależnie od urządzenia (+hover, +SRCSET)

Właśnie jestem po aktualizacji Divi Buildera (a więc i motywów Divi i Extra) na stronach, którymi zarządzam, a na których działają te motywy. Nie byłoby w tym nic nadzwyczajnego, gdyby nie to, że przy okazji aktualizacji motywów dokonałem kilku zmian w graficznej strukturze stron. I choć była to dodatkowa praca, to wykonałem ją z przyjemnością, bo wreszcie w edytorze graficznym Divi (Divi Builder) pojawiły się 2 moim zdaniem ważne opcje, dzięki czemu nie trzeba będzie się bawić w bajpasy, by dopasować zawartość poszczególnych modułów do typu urządzenia (telefon, tablet, komputer).

Force Dark Mode for Web contents w Google Chrome, czyli automatyczny tryb ciemny dla wszystkich stron internetowych

Nie da się ukryć, że moda na czarne interfejsy użytkownika (dark mode) rozkręca się coraz bardziej, i wchodzi w kolejne segmenty. O ile w telefonie zazwyczaj sam chętnie korzystam, to na komputerze raczej sporadycznie – ustawiłem w sumie tylko Windowsa, Firefoxa i jakieś pojedyncze aplikacje w tryb ciemny. Ale to może dlatego, że z komputera wieczorami i w nocy korzystam rzadko, co zresztą uważam za jeden z moich większych sukcesów, jeśli chodzi o prace i rozrywkę. Tymczasem Google prezentuje w najnowszej wersji swojej przeglądarki Chrome tryb ciemny dla… wszystkich stron.

Własne strony błędów (custom pages) w Cloudflare (tylko) dla użytkowników usługi w wersji płatnej

O usłudze Cloudflare wielokrotnie, zazwyczaj starając się w danym poradniku opierać na możliwościach usługi w wersji bezpłatnej. Tym razem będzie inaczej – by skorzystać przedstawianych tu informacji, należy dla danej domeny mieć aktywny przynajmniej plan „pro”, kosztujący 20 $ miesięcznie. I tego nie przeskoczymy.

Dodawanie ikon do strony internetowej (np. do menu) na przykładzie Font Awesome 5 (i Dashicons) i WordPressa

Będzie o ikonach (nie tylko) w menu, czyli temacie trochę pochodnym ostatnich zmian na Webinsider.pl – ikony w menu były chyba od zawsze, ale niedawno dorobiły się ich wszystkie pozycje (w menu głównym), i od razu w statystykach widzę, że jest dużo większe zainteresowanie poszczególnymi pozycjami. Dostałem też kilka pytań, jak takie ikony wdrożyć, stąd ten artykuł…

Modyfikacja wyglądu menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa

Troszkę zmieniałem dziś strukturę menu na stronie, i podczas rutynowych testów wyszło, że przy pewnej szerokości ekranu menu główne po zmianach nie mieści się w jednej linii, tylko łamie się na 2 wiersze. Niby drobiazg, ale ja wolę, jak menu trzyma się razem. Wymagało to malutkiej modyfikacji wyglądu strony (w pewnych warunkach) za pomocą kodu CSS, i pomyślałem, że od razu też opublikuje artykuł na ten temat… Zwłaszcza że niedawno było m.in. jak zmodyfikować zawartość menu zależnie do wielkości ekranu (schować lub pokazać tekst/etykietę), czy jak zmienić wygląd linków, zależnie od adresu, na który wskazują.

Modyfikacja wyglądu linków na podstawie docelowego adresu URL za pomocą kodu CSS (nie tylko w WordPressie)

Wczoraj opublikowałem artykuł o tym, jak za pomocą kodu CSS ustawić kolor zaznaczonego tekstu (wybrany przez nas, zamiast standardowego niebieskiego). Jest to wręcz banalna sprawa, i wszystko sprowadza się do wykorzystania jedno z tzw. pseudo-elementów dostępnych w CSSie. Z tego, co widzę, artykuł wygenerował nawet jakieś odsłony, dlatego uznałem, że będę częściej publikował tego typu małe porady. I to niezależnie od tego, czy akurat jakaś koleżanka będzie o to pytać, czy po prostu przyjdzie mi do głowy taki pomysł… ;-)

Modyfikacja koloru zaznaczonego tekstu za pomocą kodu CSS, na przykładzie strony na WordPressie

Jedna z moich koleżanek (to chyba nie pierwszy artykuł, jaki powstał w związku jaj „perypetiami” ;-)) postanowiła, że będzie hakować sukces, i w ramach wyzwania przygotuje stronę pod „pasywne zarabianie w internecie na kursach online” (taki trochę oksymoron, ale pełno teraz takich kursów, zwłaszcza w mediach społecznościowych). Strona na WordPressie, motyw Divi, a więc nawet coś tam jej wyszło. Ale zamarzyło jej się, by zaznaczony tekst podświetlał się w wybranym przez nią kolorze. Nie wiem, po co jej to, ale postanowiłem jej pomóc. Nie tylko dlatego, że sam tak na Webinsider.pl mam… ;-)

Modyfikacja zawartości menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa

Koleżanka właśnie kończy jedną ze stron na WordPressie (landing page), którą od strony technicznej dla niej przygotowywałem. Ja odpowiadam za sprawy techniczne i co bardziej skomplikowane elementy na stronie, a ona zajmie się warstwą graficzną. Działa to całkiem sprawnie – ja lubię elementy techniczne, a koleżanka z chęcią „bawi się” wyglądem (zwłaszcza z motywem Divi, który bardzo, ale to bardzo jej w tym kontekście pasuje). Zainspirowana ikonami w menu, które zazwyczaj dodaje na stronach (np. w menu głównym na Webinsider.pl), postanowiła takie same ikony dodać u siebie…

Modyfikacja atrybutów i zachowania wybranych elementów za pomocą jQuery na przykładzie WordPressa i motywu Divi

Znajomy pracuje w firmie, nie takiej małej, ale też nie takiej dużej, ale mają tam dział IT. I choć dział ten pełni głównie funkcję helpdesku, to szef wpadł na pomysł, że zaoszczędzi, a chłopaki zrobią mu stronę internetową. Nigdy tego żaden z nich nie robił, ale po konsultacji ze mną kolega postanowił działać. Jako motyw doradziłem mu w takim przypadku Divi od Elegant Themes, dałem kilka wskazówek, wskazałem kilka przydatnych wtyczek (nie, wtyczek Yoast SEO czy W3 Total Cache zdecydowanie nie było na tej liście) i kolega wziął się do pracy…

Usuwanie wersji skryptów i stylów (CSS) z adresów plików wczytywanych w nagłówku przez WordPressa

Kolega postanowił poszukać Świętego Graala, przynajmniej jeśli o chodzi o szybkość jego strony internetowej w teście Google PageSpeed Insights. Oczywiście życzę powodzenia, nawet jeśli to często sztuka dla sztuki. Przy tej okazji zapytał, jak w WordPressie najprościej i bez dodatkowych wtyczek (wydajność ;-)) wywalić z adresów ładowanych plików CSS i skryptów (JavaScript) dodawane automatycznie argumenty z wersją – czy to samego WordPressa czy wtyczki lub motywu. Ponoć ma lepiej cache dzięki temu działać, a tym samym w teście wpadnie dodatkowy punkt lub może nawet dwa…

Chmura tagów w WordPressie, ale tylko z tagami przypisanymi do artykułów (postów) z wybranej kategorii

W komentarzach pod artykułem o RODO (Praktyczne aspekty Rozporządzenia o Ochronie Danych Osobowych (RODO/GDPR) w działalności internetowej) dyskusja trochę zboczyła na boczne tory, i dotarła do wyświetlania chmurki tagów, ale tylko dla artykułów (postów) z wybranej kategorii. Zagadnienie (wyzwanie ;-)) w sumie ciekawe, więc postanowiłem mu się przyjrzeć…

RODO/GDPR i WordPress 4.9.6, czyli ustawienia prywatności, eksport i usuwanie danych osobowych

Chwilę temu skończyłem pisać o „Rozporządzeniu o Ochronie Danych Osobowych (RODO/GDPR) nie tylko w kontekście działalności internetowej”, i w oczekiwaniu na drugą część, w której skupię się bardziej na praktycznych aspektach RODO (blog, strona, sklep internetowy, newsletter) chciałem od tematu trochę odpocząć. Ale rano w kanale oficjalnym pojawiła się aktualizacja WordPressa, która poza „standardowymi poprawkami” wprowadziła również kilka elementów wymaganych właśnie na gruncie RODO/GDPR.

Programming Notes for Professionals, czyli solidna i bezpłatna dawka skondensowanej wiedzy (PDFy do pobrania)

Zapytał mnie kolega, czy nie mam jakichś „skondensowanych notatek” z Basha, bo akurat by się przydały, a ja w końcu „coś tam w nim dłubię”. Notatki oczywiście, że mam, ale są to moje notatki, i w większości sytuacji nikomu nic po nich, o ile ich nie „rozjaśnię”, np. w formie artykułu na Webinsider.pl (co regularnie czynię… ;-)). Ale by nie zostawiać kolegi w potrzebie, przesłałem mu link do strony, gdzie znajdzie sporo „notatek w PDFach”, również do Basha.

Alternatywne typy linków, czyli „mailto”, „callto”, „tel”, „skype”, „sms” i „fax” na stronach WWW (HTML)

Ostatnio zmieniałem stronę firmową kolegi, która zdecydowanie pamiętała jeszcze czasy, gdy w telefonach internetu nie było, a co za tym idzie, nie dość, że wygląda sam z siebie „trącił myszką”, to również korzystanie z niej na urządzeniach mobilnych do najwygodniejszych nie należało. Teraz jest już zdecydowanie lepiej, bo poza pełnym RWD mamy też np. dedykowane elementy dla urządzeń mobilnych i komputerów stacjonarnych (i laptopów ;-)). Ale chyba największą radość u znajomego wywołały linki, po kliknięciu, w które np. telefon automatycznie proponował wykonanie połączenia telefonicznego pod odpowiedni numer. Nie jest to nowość dla mnie, bo staram się stosować tego typu linki od dawna, ale w końcu uznałem, że temat warto przenieść na górę listy tematów do opisania (oczywiście w Trello).

Dodanie obsługi krótkich kodów (shortcode) we wtyczce Bloom do WordPressa od Elegant Themes

Od kilku dni testuje różne rozwiązania, których celem jest większe zróżnicowanie ruchu ma stronie (czytaj: większa niezależność od ruchu z Google i Facebooka). Jednym z takich działań jest większy nacisk na Newsletter, który niebawem powinien troszkę zmienić swój charakter, i docelowo chciałbym by zapewnił dodatkowy ruch na stronie. Przy tek okazji testuje różne wtyczki, zarówno do samego newslettera, jak i wspierające. Jedną z takich wtyczek jest Bloom od Elegant Themes, który odpowiada za wyświetlanie okna z formularzem zapisu. Wtyczka sprawuje się dobrze, poza dwoma drobiazgami…

Trello Desktop, czyli Paws for Trello w nowej, już oficjalnej i zarazem bezpłatnej odsłonie

Wprawdzie usługa Trello jakoś nie doczekała się jeszcze dedykowanego tylko jej wpisu (choć było blisko nie raz, choćby po niedawnym przejęciu przez Atlassian), to „gościnnie gościła” już nie raz, choć zazwyczaj były to role drugo-, czy nawet czwartoplanowe. Tym razem jakby się jednak udało, choć nie będzie o samej usłudze (polecam, jest to od dawna jedno z moich podstawowych narzędzi).

Prosty sposób na znikający formularz kontaktowy po wysłaniu wiadomości w motywie Divi (Elegant Themes)

Wprawdzie z motywu Divi od Elegant Themes korzystam już od dość dawna przy różnych projektach (choć na razie nie jest to dominujący u mnie motyw), to do tej pory zazwyczaj nie korzystałem z wbudowanego formularza kontaktowego, gdyż wolę korzystać z dedykowanych rozwiązań, które oferują zazwyczaj większe możliwości – zresztą nie dotyczy to tylko Divi, a ogólnie większości motywów ze zintegrowanym formularzem kontaktowym.
Aktualnie pomagam przy projekcie, gdzie strona internetowa to tzw. „one page”, czyli jedna strona, która przeprowadza użytkownika przez całą historię, którą chcemy mu opowiedzieć (sprzedać). Ja tym razem odpowiadam „tylko” za warstwę techniczną, a kontentem (zarówno treścią, jak i samą strukturą) zajmuje się koleżanka, która skorzystała z wbudowanego w Divi formularza kontaktowego, w którym – przynajmniej według nas – zabrakło jednej dość istotnej opcji…

Loading

InfoWidget

InfoWidget

InfoWidget

Pin It on Pinterest