Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak zmienić rozmiar twojego logo WordPress (działa z każdym motywem)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Chcesz dowiedzieć się, jak zmienić rozmiar twojego logo WordPress?

Logo twojej witryny internetowej jest ważną częścią twojej marki, więc będziesz chciał się upewnić, że wygląda dobrze. Czasami jednak nie jest jasne, jak powiększyć lub zmniejszyć logo.

W tym artykule pokażemy, jak łatwo zmienić rozmiar logo WordPress w dowolnym motywie.

How to change your WordPress logo size (works with any theme)

Dlaczego warto zmienić rozmiar logo w WordPress?

Niezależnie od tego, czy zatrudnisz kogoś do zaprojektowania własnego logo dla twojej witryny internetowej WordPress, czy też zaprojektujesz je samodzielnie za pomocą darmowego kreatora logo, logo jest ważną częścią każdej witryny internetowej.

Jednak domyślne rozmiary obrazków WordPress mogą nie działać dla twojego logo.

Zbyt małe logo nie będzie się wyróżniać, podczas gdy zbyt duże logo może odwracać uwagę odwiedzających od reszty twojej treści.

Chociaż w WordPressie można dokonać podstawowej edycji obrazków, logo twojej witryny jest ważną częścią brandingu, więc będziesz chciał się upewnić, że wygląda świetnie. W związku z tym zobaczmy, jak prawidłowo zmienić rozmiar logo w WordPress. Skorzystaj z poniższych odnośników, aby przejść do wybranej metody:

Metoda 1: Zmiana rozmiaru logo za pomocą konfiguratora WordPress (zalecane)

Najprostszym i najłatwiejszym sposobem zmiany rozmiaru logo w WordPress jest użycie konfiguratora motywu. Jednak ta metoda działa tylko wtedy, gdy twój motyw obsługuje dodatkowe rozmiary obrazków w WordPress.

Dobrą wiadomością jest to, że wiele popularnych motywów ma wbudowane narzędzia do zmiany rozmiaru logo, w tym Divi, Astra i Ultra.

Uwaga: Twoje logo będzie tylko tak duże, jak obrazek, który załadujesz, więc upewnij się, że załadowałeś większy obrazek, jeśli chcesz powiększyć logo.

W tym przewodniku pokażemy, jak zmienić twoje logo w motywach Divi, Astra i Ultra, ale metoda jest podobna dla większości popularnych motywów WordPress.

Nawet jeśli nie zajmujemy się twoim konkretnym motywem, nadal warto sprawdzić, czy możesz zmienić rozmiar logo za pomocą konfiguratora WordPress.

Po prostu przejdź do Wygląd ” Dostosuj i poszukaj ustawień oznaczonych jako Nagłówek, Tożsamość witryny, Logo lub podobnych.

Jeśli nie widzisz tych ustawień, zawsze możesz sprawdzić dokumentację twojego motywu lub skontaktować się z deweloperem w celu uzyskania pomocy. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem na temat tego, jak prawidłowo poprosić o pomoc techniczną WordPress i ją uzyskać.

Jeśli twój motyw nie ma wbudowanego edytora logo, będziesz musiał skorzystać z metody 2 lub 3.

Zmiana rozmiaru logo WordPress w motywie Divi WordPress

Najpierw przejdź do Divi ” Konfigurator motywu i kliknij „Nagłówek i nawigacja”.

Select Divi theme customizer

Następnie wybierz opcję „Główny pasek menu”.

Tutaj możesz zmienić rozmiar twojego logo. Możesz na przykład wyświetlić je jako obrazek w pełnym rozmiarze.

Select Divi primary menu bar

Najpierw należy dostosować ustawienie „Wysokość menu”. To ustawienie kontroluje wysokość całego menu nawigacyjnego, które określi, jak duże może być twoje logo.

Następnie można zmienić ustawienie „Maksymalna wysokość logo”, które stanowi procent całkowitej wysokości menu.

Adjust logo height

Możesz przeciągać suwak „Maksymalna wysokość logo” w górę i w dół, aż znajdziesz idealny rozmiar dla twojego bloga WordPress.

Gdy będziesz zadowolony z wyglądu logo, kliknij „Opublikuj” przed zamknięciem konfiguratora WordPress.

Zmiana rozmiaru logo WordPress w motywie Astra WordPress

Jeśli korzystasz z motywu Astra, przejdź do sekcji Wygląd ” Kon figurator i kliknij opcję menu „Nagłówek”.

How to change the size of WordPress logo in the Astra theme

Następnie kliknij opcję menu „Tytuł i logo witryny”.

Tutaj możesz łatwo zmienić rozmiar twojego logo.

Astra's site title settings in the WordPress Customizer

Wystarczy przeciągnąć suwak „Szerokość logo” w lewo lub w prawo, aby powiększyć lub zmniejszyć logo.

Konfigurator WordPress pokaże te zmiany w swoim podglądzie na żywo, dzięki czemu możesz wypróbować różne rozmiary, aby zobaczyć, co wygląda najlepiej dla twojej witryny internetowej WordPress.

Astra logo width slider

Kiedy będziesz zadowolony z wyglądu logo, kliknij „Opublikuj”, aby umieścić je na swojej witrynie internetowej.

Zmiana rozmiaru logo WordPress w motywie Ultra WordPress

Aby dostosować rozmiar logo w motywie Ultra, przejdź do Wygląd ” Dostosuj i kliknij „Logo witryny i slogan” w menu po lewej stronie.

Ultra click site logo and tagline

Następnie kliknij menu rozwijane „Logo witryny”.

Gdy się pojawi, wybierz przycisk opcji „Logo Image”.

Ultra click site logo button

Teraz możesz powiększyć lub zmniejszyć logo, wpisując nowe rozmiary w polach.

Szerokość można zmienić za pomocą pola po lewej stronie, a wysokość za pomocą pola po prawej stronie.

Change logo height and width

Jeśli chcesz przeskalować logo w oparciu o oryginalny rozmiar, zmień wymiary tylko w jednym polu.

Podczas wpisywania nowych wymiarów, rozmiar logo będzie się zmieniał w czasie rzeczywistym.

Kiedy będziesz zadowolony z wyglądu logo, kliknij „Opublikuj”, aby wprowadzić twoje zmiany.

Metoda 2: Zmiana rozmiaru logo WordPress za pomocą pełnego edytora witryny (tylko motywy blokowe)

Jeśli korzystasz z motywu opartego na blokach, takiego jak Hestia Pro, możesz zmienić rozmiar obrazków bez utraty jakości, korzystając z pełnego edytora witryny.

zmienić rozmiar logo za pomocą pełnego edytora witryny.

Aby rozpocząć, wystarczy przejść do zakładki Motywy „ Edytor w kokpicie WordPress.

Opening the WordPress full-site editor

Domyślnie w pełnym edytorze witryny wyświetlany jest szablon główny twojego motywu.

Aby zmienić rozmiar logo twojej witryny, zazwyczaj wybierasz opcję „Wzorce”.

Selecting a pattern in a block-enabled theme

Edytor wyświetli teraz listę wszystkich wzorców i fragmentów szablonu, które składają się na twój motyw.

Wystarczy kliknąć opcję Nagłówek, która kontroluje układ nagłówka twojego bloga.

Customizing a header on your WordPress website

WordPress pokaże teraz wszystkie fragmenty szablonu Header, które składają się na obecny, aktualny motyw. Po prostu znajdź nagłówek, który chcesz edytować i kliknij go.

Zobaczysz podgląd szablonu nagłówka. Aby przejść dalej i edytować szablon, kliknij małą ikonkę ołówka.

How to edit the site logo using the full-site editor (FSE)

Po wykonaniu tej czynności kliknij, aby wybrać logo twojej witryny.

W menu po prawej stronie wybierz kartę „Blokuj”.

Customizing the site logo block using the full-site editor (FSE)

Następnie wybierz kartę „Ustawienia”.

Możesz teraz powiększyć lub pomniejszyć logo, przeciągając suwak „Szerokość obrazka”.

How to change the WordPress logo size using the full-site editor (FSE)

Gdy będziesz zadowolony z wyglądu logo, kliknij przycisk „Zapisz”.

Teraz, jeśli użytkownik przejdzie na twoją witrynę internetową, zobaczy nowe logo w działaniu.

Metoda 3: Zmiana rozmiaru logo WordPress poprzez edycję CSS (działa z większością motywów)

Jeśli twój motyw WordPress nie ma wbudowanej obsługi zmiany rozmiaru logo, inną opcją jest dodanie własnego CSS. Umożliwi to zmianę rozmiaru twojego logo bez korzystania z oddzielnej wtyczki do optymalizacji obrazków.

Aby rozpocząć, musisz znać klasę CSS logo twojej witryny internetowej. Aby uzyskać te informacje, przejdź do dowolnej strony zawierającej logo, takiej jak strona główna twojej witryny.

W tym celu należy kliknąć prawym przyciskiem myszy w dowolnym miejscu na tej stronie i wybrać opcję „Sprawdź”.

Right click inspect

Spowoduje to otwarcie menu Inspect, które pokazuje cały kod strony głównej.

Następnie kliknij ikonkę „Wybierz element”, która wygląda jak wskaźnik myszy.

Click select an element icon

Następnie najedź kursorem myszy na logo twojej witryny internetowej, aż pojawi się klasa CSS.

Będzie on wyglądał podobnie do poniższego obrazka.

Logo CSS class

Użyjesz tej klasy CSS, aby dostosować rozmiar własnego logo WordPress, więc zanotuj klasę w edytorze tekstu, takim jak Notatnik.

W kokpicie WordPress przejdź do Wygląd ” Konfigurator. Następnie kliknij opcję „Dodatkowy CSS”.

The Additional CSS settings in the WordPress Customizer

Można teraz dodawać własny kod CSS w małym edytorze kodu.

Po prostu dodaj klasę CSS, którą znalazłeś wcześniej, a następnie określ nowe wymiary logo, których chcesz użyć.

Oto przykład tego, jak będzie wyglądał kod:

 img.custom-logo {
     max-height: 100px !important;
}

Upewnij się, że zmieniłeś klasę CSS img.custom-logo i wartość max-height.

Changing the logo size with custom CSS

Po wprowadzeniu twoich zmian, po prostu kliknij przycisk „Opublikuj”, aby je aktywować.

Metoda 4: Zmiana rozmiaru logo WordPress bez edytowania CSS (bez kodu)

Jeśli nie czujesz się komfortowo edytując pliki motywu lub dodając własny CSS, możesz zamiast tego użyć wtyczki WordPress CSS. Wtyczki te umożliwiają wprowadzanie zmian wizualnych w twojej witrynie, podobnie jak w przypadku korzystania z kreatora stron typu „przeciągnij i upuść„.

Zalecamy korzystanie z CSS Hero, ponieważ pozwala on na optymalizację obraz ków i dostosowanie prawie każdego stylu CSS bez pisania ani jednej linijki kodu CSS.

Oferta: Czytelnicy WPBeginner mogą uzyskać 40% zniżki dzięki naszemu kodowi kuponu CSS Hero.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu kliknij przycisk „Przejdź do aktywacji produktu”, aby włączyć wtyczkę. Znajdziesz go tuż nad twoją listą zainstalowanych wtyczek.

Activate CSS Hero plugin

Spowoduje to wyświetlenie ekranu, na którym możesz wpisz swoją nazwę użytkownika i hasło. Wystarczy postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby zweryfikować twoje konto, a po zakończeniu zostaniesz odesłany z powrotem do kokpitu WordPress.

Następnie kliknij przycisk „Dostosuj za pomocą CSS Hero” na pasku narzędzi administratora WordPress.

Customize with CSS Hero

Zobaczysz teraz swoją witrynę internetową z uruchomionym CSS Hero.

CSS Hero wykorzystuje edytor WYSIWYG (What You See Is What You Get), więc wystarczy kliknąć dowolny element na stronie, a pojawi się pasek narzędzi ze wszystkimi konfiguratorami, które można wprowadzić.

CSS Hero preview

Wystarczy kliknąć na twoje logo WordPress u góry strony.

Następnie wybierz odnośnik „Pokaż zaawansowane rekwizyty”, aby zobaczyć wszystkie zmiany, jakie możesz wprowadzić w swoim logo WordPress.

Click show advanced props

W polu „Miary” znajdują się opcje „Maksymalna szerokość” i „Maksymalna wysokość”.

Aby zmienić rozmiar logo, po prostu wpisz nowe liczby w te pola. Jeśli chcesz zachować oryginalne wymiary obrazka, zmień tylko wysokość lub szerokość.

Define logo width and height

Podgląd na żywo automatycznie wyświetli twoje zmiany. Oznacza to, że możesz wypróbować różne rozmiary, aby zobaczyć, który wygląda najlepiej.

Kiedy będziesz zadowolony z wyglądu twojego logo, kliknij „Zapisz i opublikuj”, aby zmienić rozmiar logo.

Mamy nadzieję, że ten artykuł pomógł ci zmienić rozmiar twojego logo. Możesz również zapoznać się z naszą ekspercką listą najlepszych wtyczek WordPress do zarządzania obrazkami lub z naszym przewodnikiem na temat wyboru najlepszego formatu obrazka dla WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

4 komentarzeZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ossama Alnuwaiser says

    I have an issue in Google speedinsight, Properly size images that suggests the it slow down the website because it has to resize the image when loading, which affects loading time. I found your article very helpful. However, I have one question. How to know the actually size of my logo based on my theme. Thanks to you, I know now how to resize it, but I am struggling to find the actual size logo because according to another article the actual size of the logo differ depends on the theme.

    • WPBeginner Support says

      You would need to check with the specific support of your theme as they would be the main ones who would know the image size if it is not in your theme’s documentation.

      Administrator

  3. Mohammed Ghaleb says

    If I’ll change the Logo size by editing the CSS, will it stay as I edited it if there is any theme updates?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.