Strona główna > Internet > WordPress > Kolejne zmiany na blogu LiKoToN
Kategorie
WordPress

Kolejne zmiany na blogu LiKoToN

Zmiany, które wprowadziłem, tworząc motyw potomny dla motywu Twenty Tweny, o czym pisałem w artykule „Nowy wygląd strony LiKoToN„, były niewystarczające. Przeglądając stare wpisy, okazało się, że sporo tekstów, filmów i wodotrysków, jak rozwijane listy się rozjeżdża na stronie. Do tego na początku prowadzenia bloga nie dbałem o prawidłowe używanie nagłówków. Dlatego postanowiłem wprowadzić kolejne zmiany.

Zmiany na LiKoToN.pl - Pływający przycisk na górę
„Pływający” przycisk na górę

Spis treści:

Poprawa nagłówków, obrazków, filmów

Pierwszą zmianą było przejrzenie wszystkich wpisów, aby zobaczyć, jak wyglądają. Trochę to mi zajęło, ale poprawiłem w nich nagłówki, obrazki i wyświetlanie filmów. Poprawnie używane nagłówki poprawiają pozycjonowanie strony, o czym się przekonałem, gdy zobaczyłem, jak rośnie liczba osób wchodzących na mojego bloga. Chyba że jednak coś innego na to wpłynęło 🙂

Wiele starych wpisów miało źle osadzone filmy. Kiedyś inaczej się to robiło, więc pewnie stary sposób przestał być obsługiwany w motywie „Twenty Twenty”. Poprawiłem to, więc filmy wyglądają teraz tak, jak powinny.

Podobny problem, który miałem z filmami, przydarzył się również w przypadku obrazków. Ten problem dotyczył starych wpisów, a dokładnie wszystkich mniej więcej do połowy 2019 r. Nowe obrazki były osadzone poprawnie, więc wydaje mi się, że aktualizacja WordPress-a musiała to popsuć. Wyświetlanie obrazków oczywiście poprawiłem.

Innym problemem było zgubienie wyrównania tekstu. W kilkunastu wpisać niektóre akapity nie miały ustawionego wyrównania, przez co były przyklejone do lewej strony ekranu. Być może jest jakiś błąd w motywie „Twenty Twenty”, ale poprawiłem to, ustawiając wyrównanie.

Pożegnanie się ze wtyczką „Shortcodes Ultimate

Prawie od początku prowadzenia bloga LiKoToN.pl korzystałem ze wtyczki „Shortcodes Ultimate”. Używałem jej na przykład do wstawiania rozwijanych list. Jeżeli czytelnika nie interesowały informacje w danej części artykułu, to nie musiał ich wyświetlać. Niektóre listy były dosyć rozbudowane, aby szybko można było znaleźć interesujące informacje.

Innym wykorzystaniem wtyczki „Shortcodes Ultimate” było oznaczanie cytatów. Kiedyś w WordPress-ie nie było to takie szybkie jak teraz. Poza tym cytaty sformatowane przez tę wtyczkę wyglądały jak cytaty.

Inną opcją, z której korzystałem, było osadzanie dokumentów na stronie. „Shortcodes Ultimate” posiada fajny czytnik dokumentów, na przykład zapisanych jako PDF. Z tej opcji skorzystałem tylko w kilku artykułach, ale brakuje mi tej funkcjonalności.

Niestety musiałem zrezygnować ze wtyczki „Shortcodes Ultimate”. Okazało się, że wszystkie elementy przez nią osadzone nie wyświetlają się poprawnie w motywie „Twenty Twenty”. Co prawda poprawiłem to, wprowadzając odpowiednie zmiany w edytorze css, który dostępny jest w ustawieniach wtyczki, ale te zmiany nie były wystarczalne.

Z Google SearchConsole zacząłem dostawać powiadomienia o błędach związanych ze zbyt blisko położonymi elementami, które można klikać. To znaczy przyciski, odnośniki, rozwijane listy. Wprowadziłem jedną, drugą, kolejną poprawkę, czyli w ustawieniach css wtyczki zwiększałem odstępy od tych elementów. Niestety problem nadal występował.

W końcu obniżyłem przepustowość łącza, aby sprawdzić, jak ten problem wygląda, gdy strona ładuje się wolniej. Bingo! Okazało się, że najpierw wczytywane są oryginalne właściwości, a dopiero później zmodyfikowane przeze mnie. Wygląda na to, że automat weryfikujący Google jest za szybki i rozpoznawał styl oryginalny wtyczki, a nie zmieniony.

Niestety nie miałem pomysłu na rozwiązanie tego problemu poza poprawieniem oryginalnej wtyczki, ale po jej aktualizacji, moje zmiany zostałyby skasowane, więc ta idea odpadła. Poprawiłem wszystkie wpisy oraz strony, w których używałem wtyczki „Shortcodes Ultimate” i usunąłem wtyczkę. Może kiedyś przyjdzie mi do głowy jakiś pomysł, jak z niej ponownie skorzystać, ale obecnie wygląda, że nie jest niezbędna i można bez niej żyć.

Zmniejszenie odstępów pomiędzy listowanymi elementami

Nagłówki w motywie „Twenty Twenty” mają dosyć spore odstępy z góry i z dołu, co niestety odbija się na listowanych elementach. Duże przerwy pomiędzy wypunktowanymi elementami nie wyglądały dobrze, więc postanowiłem to poprawić.

W folderze z motywem, a właściwie motywem potomnym, edytowałem plik style.css i dopisałem do niego poniższą właściwość:

li > h2 .faux-heading, .entry-content h2 {
  margin: 0.5rem auto 2rem
}

Dodanie przycisku „Edycja” nad treścią wpisu

Kolejna zmiana przydatna jest dla osób publikujący artykuły, a właściwie poprawiające je. Domyślnie motyw „Twenty Twenty” wyświetla przycisk „Edycja” poniżej stron i wpisów, co często nie jest wygodne. Bardzo mi to przeszkadzało, gdy poprawiałem swoje wpisy, więc postanowiłem dodać drugi przycisk „Edycja” powyżej strony i wpisu.

Edytowałem plik „content.php„, znajdujący się w katalogu „template-parts” i poniżej linijki:

get_template_part( 'template-parts/entry-header' );

dopisałem:

edit_post_link();

Modyfikacja odnośników

Wprowadziłem kilka zmian związanych z obsługą linków (odnośników). Teraz po najechaniu na link nie wyświetla się podkreślenie, a tekst lub grafika zmienia odcień. Właściwie to taki element otrzymał półprzezroczystość po najechaniu na niego. Dzięki temu widać, że jest klikalny, choć sama łapka też na to wskazuje.

a, .entry-title a:focus, .entry-title a:hover, .primary-menu a:hover, .primary-menu a:focus, .primary-menu, .current_page_ancestor, .primary-menu li.current-menu-item > a, .primary-menu li.current-menu-item > .link-icon-wrapper > a, .post-meta a:hover, .faux-button:hover {
  text-decoration: none;
}
.header-inner .toggle:focus .toggle-text, .header-inner .toggle:hover .toggle-text, .pagination a:hover, .widget_archive a:hover, .widget_categories a:hover, .widget_pages a:hover, .widget_meta a:hover, .widget_nav_menu a:hover, .comment-respond #submit:hover {
  text-decoration: none;
}
a:hover, .entry-title a:hover, .primary-menu a:hover, .post-meta a:hover, .entry-categories a:hover, .toggle-text:hover, .faux-button:hover, .comment-respond #submit:hover {
  opacity: 0.85;
}

„Pływający” przycisk „Na górę”

Domyślnie w motywie „Twenty Twenty” dostępny jest przycisk „Na górę„/”W górę„, który widoczny jest w stopce strony. Takie rozwiązanie nie jest wygodne, w przypadku długich artykułów.

Postanowiłem zamienić przycisk „Na górę” na taki, który będzie się wyświetlał na dole strony i przesuwał wraz z przewijaniem strony. Tę modyfikację szczegółowo opisałem w artykule „„Pływający” przycisk „Na górę” w motywie Twenty Twenty„.

Oceń wpis
[Maks.: 0 Średnia: 0]

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.