Strona główna > Internet > WordPress > Moje modyfikacje motywu Twenty Twenty
Kategorie
WordPress

Moje modyfikacje motywu Twenty Twenty

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.

LiKoToN na oryginalnym motywie Twenty Twenty
Oryginalny motyw Twenty Twenty

Spis treści



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">&copy;

Do powyższej linii dopisałem tylko „2013 – „, czyli mój wpis wygląda tak:

<p class="footer-copyright">&copy; 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;
  }
}
LiKoToN na zmodyfikowanym motywie Twenty Twenty
LiKoToN na zmodyfikowanym motywie Twenty Twenty

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„.

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

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.

Dodaj komentarz

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.