We wpisie „Nowy wygląd strony LiKoToN„, który opublikowałem kilka dni temu, opisałem zmiany, które naniosłem na swoim blogu. W szczególności opisałem, co zmodyfikowałem w motywie potomnym dla motywu Twenty Twenty. Dzisiaj chciałbym podzielić się wprowadzonymi zmianami, to znaczy co i w jakim pliku zmieniłem.

Spis treści
- Usunięcie opisu strony
- Zmiany w stopce
- Data aktualizacji wpisu
- Okruszki Yoast
- Obrazki wpisu jako link
- Formatowanie tekstu, przycisków i ikon
- Zmiana rozmiaru tekstu w stopce
- Usunięcie podkreślników w odnośnikach (linkach)
- Zmiana rozmiaru tekstu dla przycisku „Na górę/W górę”
- Sformatowanie w stopce tekstu odpowiedzialnego za wyświetlanie informacji o ciasteczkach
- Modyfikacja wyświetlania akapitów
- Zmiana rozmiaru tekstu dla przycisków
- Usunięcie obramowania przycisków
- Korekta wyświetlania kategorii dla wpisów
- Zmiana sposobu wyświetlania nagłówka h2
- Obrazki w tekście
- Zmiana odstępów pomiędzy tytułem a treścią
- Formatowanie tekstów, marginesów itd.
- Zmiany w edytorze WordPress-a
Usunięcie opisu strony
Kod związany z wyświetlaniem opisu strony w motywie Twenty Twenty znajduje się w pliku „header.php„. Aby się go pozbyć, wystarczy skasować linijkę:
twentytwenty_site_description();
Dodatkowo można usunąć linijkę wyżej, która zawiera komentarz:
// Site descriptions.
Ten komentarz jest zbędny.
Opcję tę można również tylko wyłączyć. Wystarczy tę linijkę zamienić na komentarz, poprzedzając ją dwoma prawymi ukośnikami (//):
// twentytwenty_site_description();
Zmiany w stopce
W celu zmodyfikowania stopki należy edytować plik „footer.php„. Ja w tym pliku wprowadziłem poniższe zmiany.
Rok rozpoczęcia prowadzenia bloga
Dopisałem rok rozpoczęcia prowadzenia bloga. Domyślnie podawana jest aktualna data, co można zobaczyć w linii
<p class="footer-copyright">©
Do powyższej linii dopisałem tylko „2013 – „, czyli mój wpis wygląda tak:
<p class="footer-copyright">© 2013 -
Zmiana tekstu w stopce
Drugą modyfikacją była zmiana treści podpisu w stopce na „Wszystkie prawa zastrzeżone.„, więc fragment:
<p class="powered-by-wordpress"> <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>"> <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> </a> </p><!-- .powered-by-wordpress →
zmieniłem na:
<p class="powered-by-likoton"> Wszystkie prawa zastrzeżone. </p>
Oczywiście w pliku „style.css” odpowiednio sformatowałem tekst, korzystając z klasy „powered-by-likoton„:
.powered-by-likoton a { color: inherit;; } .powered-by-likoton { color: #6d6d6d; margin: 0 0 0 2.4rem; display: block; }
Informacja o ciasteczkach
Trzecią zmianą w stopce było dopisanie informacji o ciasteczkach. Zrobiłem to, dopisując nowy blok pomiędzy linijkami:
</div><!-- .section-inner --> </footer><!-- #site-footer →
Ten blok napisałem tak:
<div class="section-inner"> <p class="cookies-info"> Ta strona używa plików <a href="https://www.likoton.pl/polityka-prywatnosci/"><b>Cookies</b></a>. Przeglądając ją, zgadzasz się na ich używanie.</br> </p> </div>
Natomiast w pliku „style.css” klasę „cookies-info” sformatowałem w poniższy sposób:
@media (max-width: 700px) { .cookies-info { margin: 0 0 0 2.4rem; max-width:200px; } .updated-info { margin: 0 0 0 2.4rem; } }
Data aktualizacji wpisu
Informację o ostatniej aktualizacji wpisu dodałem do pliku „content.php„, który znajduje się w katalogu „template-parts„. Tutaj pomiędzy linijkami:
if ( is_single() ) { get_template_part( 'template-parts/navigation' );
dopisałem:
?> <div class="section-update"> <time class="updated-info">Ostatnia aktualizacja: <?php the_modified_date(); ?></time> </div> <?php
Sposób wyświetlania informacji o aktualizacji wpisu zakodowałem w pliku „style.css„, dopisując:
.section-update { margin-top: 2rem; margin-right: auto; margin-left: auto; max-width: 68rem; width: 100%; } .updated-info { font-size: 1.2rem; color: #6d6d6d; }
Okruszki Yoast
Ze względu na to, że na swoim blogu korzystam ze wtyczki Yoast, to na stronie ze wpisami wykorzystuję jeden z mechanizmów tej wtyczki, którym są okruszki (breadcrumbs). Informują one o miejscu wpisu w drzewie kategorii.
Kod odpowiedzialny za wyświetlanie okruszków, dopisałem do pliku „entry-header.php„, który znajduje się w katalogu „template-parts„.
Aby wyświetlić okruszki tylko na stronach ze wpisami w pliku „entry-header.php” przed linijką:
$show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true );
dopisałem:
if ( is_single() ) { ?> <div class="entry-breadcrumbs"> <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<span class="breadcrumbs">','</span>'); } ?> </div> <?php }
W pliku „style.css” wyświetlanie okruszków sformatowałem w poniższy sposób:
.entry-breadcrumbs { margin-top: 0rem; margin-right: auto; margin-left: auto; margin-bottom: 1rem; max-width: 68rem; width: 100%; text-align:left; } .breadcrumbs { font-size: 1.2rem; margin-left: 0.5rem; color: #6d6d6d; } .breadcrumbs a { text-decoration: none; }
Obrazki wpisu jako link
Kolejna zmiana w motywie Twenty Twenty dotyczy możliwości wejścia do wpisu przez kliknięcie obrazka oraz usunięcie podpisu obrazka na stronie głównej. Tej zmiany dokonałem, modyfikując plik „featured-image.php„, znajdujący się w katalogu „template-parts„.
W tym pliku zmodyfikowałem warunek:
if ( ! is_singular() )
z:
if ( ! is_singular() ) { $featured_media_inner_classes .= ' medium'; }
na pożniższy, w którym dopisałem kod odpowiedzialny za wyświetlanie obrazka bez podpisu i możliwość wejścia do wpisu przez jego kliknięcie:
if ( ! is_singular() ) { $featured_media_inner_classes .= ' medium'; ?> <figure class="featured-media"> <div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"> <a href="<?php echo esc_url( get_permalink() ) ?>"> <?php echo the_post_thumbnail() ?></a> </div><!-- .featured-media-inner --> </figure><!-- .featured-media --> <?php }
Jednocześnie usunąłem cały kod odpowiedzialny za wyświetlanie tego obrazka w oryginalny sposób:
<figure class="featured-media"> <div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"> <?php the_post_thumbnail(); $caption = get_the_post_thumbnail_caption(); if ( $caption ) { ?> <figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption> <?php } ?> </div><!-- .featured-media-inner --> </figure><!-- .featured-media -->
Poza powyższą zmianą, w pliku „style.css” dodałem kod odpowiedzialny za półprzezroczystość po najechaniu kursorem na obrazek wpisu na stronie głównej:
.featured-media img:hover { opacity: 0.85; }
Formatowanie tekstu, przycisków i ikon
Pozostałych zmian, związanych już z formatowaniem tekstów, przycisków, czy ikon, dokonałem w samym arkuszu stylów (style.css).
Zmiana rozmiaru tekstu w stopce
#site-footer { font-size: 1.2rem; padding: 4.3rem 0; }
Usunięcie podkreślników w odnośnikach (linkach)
a { text-decoration:none; }
Zmiana rozmiaru tekstu dla przycisku „Na górę/W górę”
.to-the-top { font-size: 1.8rem; transform: translateY(25%); }
Sformatowanie w stopce tekstu odpowiedzialnego za wyświetlanie informacji o ciasteczkach
.cookies-info { color: #6d6d6d; display: block; } .cookies-info a { color: #6d6d6d; }
Modyfikacja wyświetlania akapitów
p { line-height: 1.5; margin: 0 0 1em 0; }
Zmiana rozmiaru tekstu dla przycisków
button, .button, .faux-button, .wp-block-button__link, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 1rem; }
Usunięcie obramowania przycisków
button.toggle { outline: 0; }
Korekta wyświetlania kategorii dla wpisów
.entry-categories a { text-decoration: none; border-bottom: none; }
Zmiana sposobu wyświetlania nagłówka h2
h2, .heading-size-2 { font-size: 2.1rem; font-weight: normal; font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; letter-spacing: normal; line-height: 1.4; } .entry-content h2 { font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; }
Obrazki w tekście
Sformatowanie obrazków bez wyrównania tak, aby mogły wyświetlać się w tekście, gdy nie mają podpisu:
.alignnone { margin: 0rem; display: inline; }
Zmiana odstępów pomiędzy tytułem a treścią
.post-inner { padding-top: 4rem; } .single .entry-header { padding-bottom: 2rem; } .single .post-inner { padding-top: 2rem; }
Formatowanie tekstów, marginesów itd.
Zmiany wyświetlania rozmiarów i grubości tekstów, marginesów, odstępów między liniami i rozmiarów ikon dla ekranów z szerokością większą niż 700px.
@media (min-width: 700px) { /* POST HEADER */ h2.entry-title { font-size: 2.6rem; font-weight: 900; font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; } .entry-categories a { font-size: 1.0rem; } .post-meta { font-size: 1.2rem; } /* POST META */ .post-meta .post-author .meta-icon svg { width: 1.4rem; height: 1.4rem; } .post-meta .post-categories .meta-icon svg { width: 1.5rem; height: 1.5rem; } .post-meta .post-comment-link .meta-icon svg { width: 1.5rem; height: 1.5rem; } .post-meta .post-date .meta-icon svg { width: 1.5rem; height: 1.5rem; } .post-meta .post-edit .meta-icon svg { width: 1.5rem; height: 1.5rem; } .post-meta .post-sticky .meta-icon svg { width: 1.4rem; height: 1.4rem; } .post-meta .post-tags .meta-icon svg { width: 1.5rem; height: 1.5rem; } /* TITLES */ h1, .heading-size-1 { font-size: 2.6rem; font-weight: 900; font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; } h2, .heading-size-2 { font-size: 2.1rem; font-weight: normal; font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; letter-spacing: normal; } h3, .heading-size-3 { font-size: 2.3rem; } h4, .heading-size-4 { font-size: 2.0rem; } h5, .heading-size-5 { font-size: 1.8rem; } h6, .heading-size-6 { font-size: 1.4rem; } .comment-reply-title { font-size: 2.2rem; } .comment-respond p.comment-notes, .comment-respond p.logged-in-as { font-size: 1.4rem; } /* ENTRY CONTENT */ .entry-content { font-size: 2.1rem; } .entry-content p, .entry-content li { line-height: 1.4; } .entry-content > * { margin-bottom: 0.8em; } .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { max-width: 68rem; } /* SINGLE PAGINATION */ .pagination-single { font-size: 1.6rem; } .pagination .nav-links { font-size: 1.6rem; } /* MENU MODAL */ .modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a { font-size: 1.8rem; padding: 2.5rem 0; } .search-modal .search-field { border: none; font-size: 2.2rem; height: 6rem; } }

Zmiany w edytorze WordPress-a
Żeby sposób wyświetlania wpisu w edytorze WordPress-a był zbliżony do tego, który widać po opublikowaniu lub na podglądzie, zmodyfikowałem również plik „editor-style-classic.css„. Ten plik znajduje się w katalogu „/assets/css„.
Do tego pliku skopiowałem większość zmian, które naniosłem w pliku „style.css„.
2 odpowiedzi na “Moje modyfikacje motywu Twenty Twenty”
Hej, widzę, ze dodałeś też przyciski „kontynuuj czytanie”. Jak mogę to zrobić? Chciałbyś przenieść mojego bloga na ten szablon, bo jest niesamowicie szybki (z 40ptk do 98 w google speed), ale brakuje mi właśnie jeszcze tego 🙂
Hej, ten przycisk od wielu lat domyślnie dodawany jest przez wstawianie we wpisie znacznika „Czytaj więcej”. Można to zrobić w edytorze przyciskiem „Czytaj więcej” lub przy pomocy kombinacji Shift+Alt+T.