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.

Spis treści

• Usunięcie opisu strony
• Zmiany w stopce
  • Rok rozpoczęcia prowadzenia bloga
  • Zmiana tekstu w stopce
  • Informacja o ciasteczkach
• 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">&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://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„.