• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Seria o tworzeniu własnego motywu - Wordpress - zapraszam

VPS Starter Arubacloud
+6 głosów
466 wizyt
pytanie zadane 1 października 2018 w Nasze poradniki przez Crocoderka Początkujący (270 p.)

Cześć :)

Od jakiegoś czasu publikuję na swoim blogu artykuły z serii o tworzeniu od podstaw własnego motywu blogowego do WordPressa.

Mam już trochę doświadczenia w WordPressie i chciałam podsumować swoją małą wiedzę w postaci tej serii - może kogoś przy okazji zainteresuje ten temat :)
Serię traktuję też jako wspólną naukę - chętnie przyjmę jakiekolwiek uwagi, jeśli coś jest źle - poprawię, jeśli jest za mało - dołożę więcej. Na razie mam 3 pierwsze artykuły.

Dzielę się linkiem do pierwszego odcinka, w panelu bocznym jest widget z linkami do kolejnych dwóch odcinków:

https://crocoder.pl/blog/wordpress/wprowadzenie-do-serii-wordpress-wlasny-motyw-od-podstaw/
 

2 odpowiedzi

+3 głosów
odpowiedź 2 października 2018 przez imklau Nałogowiec (42,090 p.)

Jestem na tak!

I mam kilka uwag odnośnie zwykłego frontu.

  1. https://validator.w3.org/nu/?doc=https%3A%2F%2Fdemo.crocoder.pl%2Fcloudy-blog-demo%2F&showoutline=yes - kilka rzeczy do poprawy :)
  2.  
    <ul class="menu" id="main-menu">
                <li class="menu-item current-menu-item menu-item-has-children">
                  <a href="/">Home</a>
                  <ul class="sub-menu">
                    <li class="menu-item"><a href="">Example Item</a></li>
                    <li class="menu-item"><a href="">Example Item</a></li>
                  </ul>
                </li>
                <li class="menu-item"><a href="/">About Me</a></li>
                <li class="menu-item"><a href="/">Contact</a></li>        
              </ul>
            </nav>
    
          </header><!-- .site-header -->
    
          <div class="site-content container">
    
            <div class="content-area">
    
              <main>
    
                <article class="std-post std-post--tile">
                  <div class="std-post__thumbnail-wrap">
                    <a href="/" class="post-thumbnail-link" aria-hidden="true" tabindex="-1"><img src="assets/cloudy-blog-post-5.jpg" width="840px" height="420px" alt=""></a>
    
                    <div class="std-post__author">
                      <a href="/" class="post-author-link"><img src="assets/cloudy-blog-author.jpg" width="40px" height="40px" alt="" title="Johanna Doe"></a>
                    </div>
    </div>

    Jakieś te odstępy takie średnie w tym kodzie.

  3. Odnośnie nazewnictwa klas:
    menu-item-has-children
    std-post

    std-post--tile
    std-post__thumbnail-wrap


    Tak lekko zalatuje BEMem, ale jednak i to BEM nie jest. Fajnie by było, jakbyś zdecydował się na jakąś metodologię - ułatwia to pracę.

  4. Zmienne w Sass:
     

    $color__background-body: #fcfcfc;
    $color__background-hr: #ccc;
    $color__background-hr-dark: #333;
    $color__background-main-content: #fff;
    $color__background-secondary-content: #f5f5f5;
    $color__background-item-active: #fd2749;
    $color__background: #0c0e14;

    Wydaje mi się, że skorzystanie z map (?) byłoby tutaj odpowiedniejsze. Spójrz co można dzięki nim zrobić:
     

    $colors: (
      primary: #ed5144,
      secondary: #ff8f00,
      success: #00c8b4,
      warning: #cba775,
      error: #ed5144,
      info: #539fff,
      facebook: #3a56a1,
      google: #dd4b39,
      twitter: #1dadeb,
      pinterest: #c92631,
      linkedin: #0077b5,
      white: #fff,
      black: #333,
    )
    .button {
      @each $color, $value in $colors {
        &--#{$color} {
          background-color: $value;
        }
      }
    }

    Tylko tyle kodu, a masz przy okazji button z tłem w każdym kolorze, który sobie przechowujesz w zmiennych.
    A żeby sobie po prostu wykorzystać jakiś kolor możesz stworzyć funkcję, np:

    @function get-color($name) {
      @return map-get($colors, $name);
    }

    Albo używać po prostu map-get.

  5. Zamiast tworzyć osobny plik na @media ja jednak wrzucałabym je od razu pod dany selektor. Zdecydowanie łatwiej się wtedy w kodzie odnaleźć - masz wszystko w jednym miejscu. Zerknij na jakiś tam przykładowy mój kod:

    .header {
      &__bg {
        position: relative;
      }
    
      &__image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    
        @media (min-width: 768px) {
          position: relative;
        }
    
        @media (min-width: 1024px) {
          width: 115%;
        }
      }
    
      &__aside {
        display: none;
    
        @media (min-width: 768px) {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    }
  6. Jeśli chodzi o połączenie BEM i Sass to przy ich wykorzystaniu kod taki:
    .site-branding {
      position: relative;
      z-index: 1;
      display: table-cell;
      vertical-align: middle;
      color: #fff;
    
      & > .site-title{
        display: inline-block;
        margin: 0;
        @include font-size(3.125);
        font-weight: 700;
      }
    
      & > .site-description{
        margin: 10px 0 0 0;
        padding: 0;
        text-transform: uppercase;
        @include font-size(0.875);
      }
    }

    Można by było elegancko przerobić na:
     

    .site-branding {
      position: relative;
      z-index: 1;
      display: table-cell;
      vertical-align: middle;
      color: #fff;
    
      &__title {
        display: inline-block;
        margin: 0;
        @include font-size(3.125);
        font-weight: 700;
      }
    
      &__description {
        margin: 10px 0 0 0;
        padding: 0;
        text-transform: uppercase;
        @include font-size(0.875);
      }
    }

    Przy założeniu oczywiście, że i site-brandig__title i site-branding__description są elementami bloku site-branding.

  7. Polecałabym też ogarnąć strukturę plików Sass, wydzieliłabym je nawet na mniejsze komponenty, bo co jak jakiś element z header pojawia się też w stopce? Ciężko jest innej osobie (w sensie przyszłemu programiście, który miałby coś w kodzie poprawić) znaleźć style pod dany element. Może ITCSS?

  8. Zdarza Ci się stylować w niektórych miejsca po tagach (jak wiemy nie jest to uważane za coś dobrego), aaale robisz to ze względu na WP, racja? Więc może warto by było o tym wspomnieć? I chyba w takim razie masz niepotrzebne klasy dla elementów listy w nawigacji, czy tam menu.

 

Ale generalnie pomysł na serię fajny, liczę, że się czegoś nauczę. W końcu WordPressa raczej nie znam laugh
Powodzenia!

 

Nie "tą serię" tylko "tę serię" - taki mały, denerwujący błąd :D

komentarz 3 listopada 2018 przez Crocoderka Początkujący (270 p.)
Dzięki za tak długą odpowiedź! :) Wiem, że bardzo wcześnie na nią odpowiadam, byłam zarzucona pracą i dopiero teraz znalazłam czas na serię, kolejny odcinek jest w drodze.

Ad 1
o dzięki, faktycznie - poprawione, za chwilę zaktualizuję kod.

Ad 2
nie wiem o co chodzi, u mnie odstępy są wyrównane i w edytorze i w przeglądarce

Ad 3
menu-item-has-children to klasa z WP, WP niestety nie jest napisany w BEM

Ad 4
ciekawe, ale jak dla mnie nieczytelne i niezupełnie aż tak proste dla osób niewtajemniczonych w sass. Rozwiązanie, którego używam w tym kodzie jest wzięte z _s.

Ad 5
Jest to jakieś rozwiązanie, ale wolę jak media są na końcu, oddzielone. Jest to moim zdaniem dobra praktyka, bo CSS jest czytany z góry na dół, reguły na większe rozdzielczości są na dole będą wywoływane jako ostatnie i o chodzi.
Wiem też że można taskiem w gulpie przenieść wszystkie reguły dla media queries na sam dół i też czasem z tego korzystam.

Ad 6
Tutaj znowu - .site-branding, .site-title i .site-description to klasy z WP, ten blog pewnie przerobię na BEM, ale tak czy inaczej sam WP jest mało BEM-owy, więc nieścisłości będą.

Ad 7
Biorąc pod uwagę motyw, którym się zajmuję header i footer nie mają nic wspólnego, oprócz menu, które akurat jest widgetem z WP dopasowywanym przez panel admina.
Struktura Sass będzie tak czy inaczej nieco bardziej rozbudowana, bo WP wprowadza więcej elementów.

Ad 8
Styluję po tagach po WP, szczególnie ze względu na menu, będę o tym wspominać w odpowiednim momencie. Klasy w menu są obecnie dopasowane pod WP i potrzebne czy nie i tak tam będą, bo wrzuci je WordPress.

Dziękuję. :)
0 głosów
odpowiedź 2 października 2018 przez Greeenone Pasjonat (16,100 p.)
Będzie cos o tworzeniu landing page? Cbodzi mi dokladnie o strony gdzie np. masz tytlu, tekst ponizej a po prawej obrazek lub np. 6 zalet w takich boxach z obrazkami itd. Ogolnie potrafie to wykonac tylko nie wiem jak stworzyc zarzadzanie a trescia , pozioku panelu :p
komentarz 2 października 2018 przez imklau Nałogowiec (42,090 p.)
nie ma jakiegoś rozsądniejszego sposobu zamiast wrzucania caaaałego WP tylko pod landing page? :D

może jakiś mniejszy CMS? generator stron statycznych?
komentarz 2 października 2018 przez Greeenone Pasjonat (16,100 p.)
Może i są ale większość chce wordpress'a. Firma, gdzie pracuje mój znajomy zajmuje się robieniem tylko i wyłączeniem takich stron ew. jeszcze jakiś zakładka z news'ami :P
komentarz 3 listopada 2018 przez Crocoderka Początkujący (270 p.)

@Greeenone, wybacz, że tak późno - jeśli cokolwiek będzie, to raczej po tym jak skończę z blogiem, tak czy inaczej bardzo prostą odpowiedzią na to jak stworzyć zarządzanie treścią z poziomu panelu jest plugin ACF :) 

Podobne pytania

0 głosów
1 odpowiedź 161 wizyt
pytanie zadane 19 kwietnia 2018 w Systemy CMS przez RogerB Gaduła (3,370 p.)
0 głosów
1 odpowiedź 237 wizyt
0 głosów
2 odpowiedzi 1,180 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...