Jak dostosować motyw bloga dla swoich potrzeb

Jak dostosować motyw do twojego bloga

Jeśli zainstalujesz darmową skrókę jest duże niebezpieczeństwo, że sporo innych blogerów wybierze tę samą skórkę i twój blog będzie wyglądał jak kopia innego bloga. Nie jest to zbyt profesjonalne dlatego taki motyw najlepiej jakoś zmienić – zmienić logo, główne zdjęcie. Kolory, czcionki itp. można dowolnie pozmieniać manipulując arkuszem stylów – wymaga to znajomości arkuszy stylów css.

Niektóre motywy mają bardzo zaawansowane ustawienia i wystarczy wejść do ustaiwień i tam dodać własną grafikę. Ale w prostych motywach trzeba to zrobić ręcznie.

Jak zmienić zdjęcie w nagłówku

Najprościej jest zmienić zdjęcie nagłowkowe bloga. Sprawdż gdzie jest ten obrazek. Motywy bloga zapisywane są w katalogu wp-content/themes/. W katalogu o nazwie twojej skórki najczęściej jest podkatalog images i tam są pliki grafik.

Najprościej kliknij prawym przyciskiem myszy na obrazek  i kliknij Pokaż obrazek tła (w FireFox). W okienku adresu przeglądarki (lub najedz prawym przyciskiem myszy i kliknij Informacje o obrazku) pojawi się adres tego obrazka w sieci.

Zapisz ten obrazek na dysk. Otwórz go w jakimś programie graficznym, sprawdź jego wielkość i zrób obrazek dokładnie takiej samej wielkości. Następnie prześlij go na serwer przy pomocy ftp.

Obrazek musi mieć tę samą nazwę co oryginalny, taką samą wielkość i musi być przesłany do tego samego katalogu.  Odśwież stronę i zobacz czy zmiana ci się podoba.

Możesz w ten sposób zmienić wszystkie grafiki użyte w wybranym przez ciebie motywie.

Jak zmienić kolory i czcionki

Zmiana ta wymaga znajomości stylów css. Rozwiń zakładkę Wygląd i kliknij Edytor. Pojawi ci się strona, na której możesz edytować źródło swojego motywu. Po prawej stronie jest lista plików motywu, m.in. arkusz stylu style.css. W tym pliku można zmienić kolory tła, wielkość i kolory czcionek itp. Trzeba robić to ostrożnie. Najpierw zgraj na dysk, przy pomocy FileZilla, kopię plików skórki, żeby podmienić jeśli coś popsujesz.

Albo kliknij prawym przyciskiem Zaznacz wszystko, skopiuj całość i wklej do notatnika i zapisz sobie na dysku.

Grafika na blogu:

responsive_wp_728x90


Profesjonalny Hosting


5 Comments
  1. Dziękuję za bardzo pomocną mi wskazówkę. Udało mi się zmienić zdjęcie w nagłówku uwzględniając wymagany jego rozmiar, mam tylko problem za duży jest odstęp pomiędzy zdjęciem , ramką strony na której jest pisany tekst. Nie ma też górnego marginesu i zdjęcie jest na samej górze strony. Autor motywu nie uwzględnij tego również przy swoich zdjęciach. Czy ja mogę dokonać jakiejś edycji, a jeżeli tak to gzie w edytorze mam to zrobić. Bardzo proszę o wsparcie. Jestem osobą bardzo początkująca i prosiłabym o szczegółowe wskazówki. Podaję stronę bloga www.http://wiersze-bogusi.com.pl aby było wiadomo o co mi chodzi, a motyw WP nosi nazwę satin-rose.
    Bozena

    1. Wejdz do Wygląd, Edytor a następnie po prawej stronie znajdź plik header.php. Tam znajdź takie fragment:
      class=”headerimg” style=”padding-top:253px”
      i zmień te 253 na 0
      i zapisz.
      Zobacz czy to dało efekt. Powinno to skasować ten odstęp. Jesli nie wróć do poprzedniej wersji.
      Nie mogę niestety znaleźć tego szablonu i nie mam czasu przekopywać się przez tony szablonów. Jeśli to co napsialam nie pomoze to musisz mi dać link skąd pobrać ten szablon. Pobiorę go i przeanalizuję.

  2. Chyba znalazłam tą część kodu, ale nic takiego tam nie pisze:
    class=”headerimg” />

    <div class="headerimg" style="padding-top:px”>

    <h1 ><a href="/”>

    <h3 ><a href="/”>

    </div

    A skórka jest na http://perfecta.pro/wp-pl/aesthete.html
    Dziekuję

  3. Chyba w poprzedniej wiadomości cały kod się nie zmieścił

    class=”headerimg” />

    <div class="headerimg" style="padding-top:px”>

    <h1 ><a href="/”>

    <h3 ><a href="/”>

    </div

    1. Widzę, że już pani sobie poradziła bo blog wygląda jak trzeba i nie ma tej przerwy.

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *