{"id":14403,"date":"2024-11-18T09:36:54","date_gmt":"2024-11-18T08:36:54","guid":{"rendered":"https:\/\/dhosting.pl\/pomoc\/?post_type=manual_kb&#038;p=14403"},"modified":"2024-11-18T09:39:46","modified_gmt":"2024-11-18T08:39:46","slug":"jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress","status":"publish","type":"manual_kb","link":"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/","title":{"rendered":"Jak doda\u0107 w\u0142asny kod HTML do strony opartej na WordPress?"},"content":{"rendered":"<p>WordPress jest jednym z najpopularniejszych system\u00f3w zarz\u0105dzania tre\u015bci\u0105 (CMS), a jego elastyczno\u015b\u0107 sprawia, \u017ce mo\u017cna \u0142atwo dostosowa\u0107 stron\u0119 do w\u0142asnych potrzeb. Jednym z najcz\u0119stszych wymaga\u0144 jest dodanie w\u0142asnego kodu HTML. W tym artykule om\u00f3wimy r\u00f3\u017cne sposoby, jak to zrobi\u0107 w WordPressie.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 ez-toc-wrap-left counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Uzywanie_edytora_blokowego_Gutenberg\" >U\u017cywanie edytora blokowego (Gutenberg)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Dodawanie_kodu_HTML_za_pomoca_widzetow\" >Dodawanie kodu HTML za pomoc\u0105 wid\u017cet\u00f3w<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Dodawanie_kodu_HTML_w_edytorze_klasycznym\" >Dodawanie kodu HTML w edytorze klasycznym<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Dodawanie_kodu_HTML_bezposrednio_do_plikow_motywu\" >Dodawanie kodu HTML bezpo\u015brednio do plik\u00f3w motywu<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Uzywanie_wtyczek_do_dodawania_kodu_HTML\" >U\u017cywanie wtyczek do dodawania kodu HTML<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Dodawanie_kodu_HTML_za_pomoca_shortcode\" >Dodawanie kodu HTML za pomoc\u0105 shortcode<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-dodac-wlasny-kod-html-do-strony-opartej-na-wordpress\/#Podsumowanie\" >Podsumowanie<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Uzywanie_edytora_blokowego_Gutenberg\"><\/span>U\u017cywanie edytora blokowego (Gutenberg)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Od wersji 5.0 WordPress domy\u015blnie korzysta z edytora blokowego zwanego <strong>Gutenberg<\/strong>, kt\u00f3ry umo\u017cliwia dodawanie kodu HTML bezpo\u015brednio na stronach i wpisach.<\/p>\n<h3>Jak doda\u0107 blok HTML w edytorze Gutenberg?<\/h3>\n<ol>\n<li>Przejd\u017a do strony lub wpisu, kt\u00f3ry chcesz edytowa\u0107.<\/li>\n<li>Kliknij ikon\u0119 &#8220;+&#8221; (dodaj blok) i wyszukaj blok o nazwie <strong>&#8220;HTML&#8221;<\/strong>.<\/li>\n<li>Wybierz blok <strong>&#8220;Niestandardowy HTML&#8221;<\/strong>.<\/li>\n<li>Wpisz lub wklej sw\u00f3j kod HTML w polu edycji.<\/li>\n<\/ol>\n<p>To rozwi\u0105zanie jest idealne, je\u015bli chcesz doda\u0107 prosty kod HTML, taki jak przyciski, iframe, formularze lub inne elementy.<\/p>\n<h3>Podgl\u0105d kodu HTML<\/h3>\n<p>Po dodaniu kodu HTML mo\u017cesz sprawdzi\u0107, jak wygl\u0105da na stronie, klikaj\u0105c przycisk <strong>&#8220;Podgl\u0105d&#8221;<\/strong>. Dzi\u0119ki temu mo\u017cesz upewni\u0107 si\u0119, \u017ce wszystko dzia\u0142a zgodnie z oczekiwaniami.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dodawanie_kodu_HTML_za_pomoca_widzetow\"><\/span>Dodawanie kodu HTML za pomoc\u0105 wid\u017cet\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wid\u017cety to kolejny spos\u00f3b na dodanie w\u0142asnego kodu HTML do WordPressa. Wid\u017cety pozwalaj\u0105 na umieszczanie tre\u015bci w r\u00f3\u017cnych miejscach na stronie, takich jak sidebar czy stopka.<\/p>\n<h3>Jak doda\u0107 wid\u017cet HTML?<\/h3>\n<ol>\n<li>Przejd\u017a do <strong>Wygl\u0105d &gt; Wid\u017cety<\/strong> w panelu administracyjnym WordPress.<\/li>\n<li>Kliknij przycisk <strong>Dodaj wid\u017cet<\/strong> i wybierz <strong>&#8220;Niestandardowy HTML&#8221;<\/strong>.<\/li>\n<li>Wpisz lub wklej sw\u00f3j kod HTML w polu wid\u017cetu.<\/li>\n<li>Kliknij <strong>Zapisz<\/strong>, aby zastosowa\u0107 zmiany.<\/li>\n<\/ol>\n<p>Wid\u017cety HTML s\u0105 \u015bwietnym rozwi\u0105zaniem, je\u015bli chcesz doda\u0107 np. formularze kontaktowe, przyciski CTA lub inne niestandardowe elementy na pasku bocznym lub w stopce.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dodawanie_kodu_HTML_w_edytorze_klasycznym\"><\/span>Dodawanie kodu HTML w edytorze klasycznym<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je\u015bli u\u017cywasz starszej wersji WordPressa lub preferujesz <strong>edytor klasyczny<\/strong>, r\u00f3wnie\u017c mo\u017cesz doda\u0107 kod HTML bezpo\u015brednio w tre\u015bci strony lub wpisu.<\/p>\n<h3>Jak to zrobi\u0107?<\/h3>\n<ol>\n<li>Otw\u00f3rz stron\u0119 lub wpis w edytorze klasycznym.<\/li>\n<li>Prze\u0142\u0105cz si\u0119 na zak\u0142adk\u0119 <strong>&#8220;Tekst&#8221;<\/strong> (obok zak\u0142adki &#8220;Wizualny&#8221;).<\/li>\n<li>Wklej sw\u00f3j kod HTML w edytorze tekstowym.<\/li>\n<li>Zapisz lub opublikuj zmiany.<\/li>\n<\/ol>\n<p>Edytor klasyczny to proste narz\u0119dzie, kt\u00f3re pozwala na pe\u0142n\u0105 kontrol\u0119 nad kodem HTML, ale wymaga podstawowej znajomo\u015bci HTML.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dodawanie_kodu_HTML_bezposrednio_do_plikow_motywu\"><\/span>Dodawanie kodu HTML bezpo\u015brednio do plik\u00f3w motywu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je\u015bli potrzebujesz bardziej zaawansowanej kontroli nad dodawaniem kodu HTML, mo\u017cesz edytowa\u0107 bezpo\u015brednio pliki motywu WordPress. <strong>UWAGA<\/strong>: Edytowanie plik\u00f3w motywu mo\u017ce by\u0107 ryzykowne, zw\u0142aszcza je\u015bli nie masz do\u015bwiadczenia w programowaniu. Zaleca si\u0119 tworzenie kopii zapasowej przed wprowadzeniem jakichkolwiek zmian.<\/p>\n<h3>Jak edytowa\u0107 pliki motywu?<\/h3>\n<ol>\n<li>Przejd\u017a do <strong>Wygl\u0105d &gt; Edytor plik\u00f3w motywu<\/strong> w panelu administracyjnym WordPress.<\/li>\n<li>Wybierz plik, kt\u00f3ry chcesz edytowa\u0107, np. <code class=\"\" data-line=\"\">header.php<\/code>, <code class=\"\" data-line=\"\">footer.php<\/code> lub <code class=\"\" data-line=\"\">single.php<\/code>.<\/li>\n<li>Wstaw sw\u00f3j kod HTML w odpowiednim miejscu.<\/li>\n<li>Zapisz zmiany.<\/li>\n<\/ol>\n<h3>Alternatywa: motyw potomny<\/h3>\n<p>Aby unikn\u0105\u0107 nadpisania zmian przy aktualizacji motywu, warto korzysta\u0107 z <strong>motywu potomnego<\/strong>. Tworzenie motywu potomnego pozwala na modyfikacj\u0119 wygl\u0105du strony bez ryzyka utraty zmian przy aktualizacjach.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Uzywanie_wtyczek_do_dodawania_kodu_HTML\"><\/span>U\u017cywanie wtyczek do dodawania kodu HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je\u015bli chcesz regularnie dodawa\u0107 niestandardowy kod HTML, warto skorzysta\u0107 z dedykowanych wtyczek. Oto kilka popularnych opcji:<\/p>\n<h3>Najlepsze wtyczki do dodawania kodu HTML<\/h3>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\"><strong>Insert Headers and Footers<\/strong><\/a> \u2013 pozwala na dodawanie kodu HTML do sekcji <code class=\"\" data-line=\"\">&lt;head&gt;<\/code> lub przed zamkni\u0119ciem <code class=\"\" data-line=\"\">&lt;body&gt;<\/code>.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/custom-html-block-extension\/\" target=\"_blank\" rel=\"noopener\"><strong>Custom HTML Block<\/strong><\/a> \u2013 umo\u017cliwia dodanie bloku HTML w edytorze Gutenberg.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\"><strong>WPCode \u2013 Insert Headers and Footers + Custom Code Snippets<\/strong><\/a> \u2013 wszechstronna wtyczka pozwalaj\u0105ca na dodanie kod\u00f3w HTML, JavaScript, CSS, itp.<\/li>\n<\/ul>\n<h3>Jak u\u017cywa\u0107 wtyczki Insert Headers and Footers?<\/h3>\n<ol>\n<li>Zainstaluj i aktywuj wtyczk\u0119.<\/li>\n<li>Przejd\u017a do <strong>Ustawienia &gt; Insert Headers and Footers<\/strong>.<\/li>\n<li>Wklej kod HTML w odpowiednie pole (np. &#8220;Scripts in Header&#8221; lub &#8220;Scripts in Footer&#8221;).<\/li>\n<li>Zapisz zmiany.<\/li>\n<\/ol>\n<p>Wtyczki s\u0105 \u015bwietnym rozwi\u0105zaniem dla os\u00f3b, kt\u00f3re chc\u0105 dodawa\u0107 niestandardowy kod na ca\u0142ej stronie bez konieczno\u015bci modyfikowania plik\u00f3w motywu.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dodawanie_kodu_HTML_za_pomoca_shortcode\"><\/span>Dodawanie kodu HTML za pomoc\u0105 shortcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress umo\u017cliwia tak\u017ce tworzenie <strong>shortcode<\/strong>, kt\u00f3re mo\u017cna wykorzysta\u0107 do dodania kodu HTML w r\u00f3\u017cnych miejscach strony.<\/p>\n<h3>Jak utworzy\u0107 shortcode z w\u0142asnym kodem HTML?<\/h3>\n<ol>\n<li>Otw\u00f3rz plik <code class=\"\" data-line=\"\">functions.php<\/code> swojego motywu lub motywu potomnego.<\/li>\n<li>Dodaj poni\u017cszy kod:\n<pre class=\"line-numbers\"><code class=\"language-php\" data-line=\"\">function custom_html_shortcode() {\n    return &#039;<\/code><\/pre>\n<div class=\"custom-html\">Tw\u00f3j kod HTML tutaj<\/div>\n<pre class=\"line-numbers\"><code class=\"language-php\" data-line=\"\"><\/code><\/pre>\n<p>&#8216;; } add_shortcode(&#8216;custom_html&#8217;, &#8216;custom_html_shortcode&#8217;);<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\" data-line=\"\"><\/code><\/pre>\n<\/li>\n<li>Zapisz zmiany<\/li>\n<\/ol>\n<p>Teraz mo\u017cesz doda\u0107 shortcode <code class=\"\" data-line=\"\">[custom_html]<\/code> w dowolnym miejscu wpisu lub strony, aby wy\u015bwietli\u0107 kod HTML.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Podsumowanie\"><\/span>Podsumowanie<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dodanie w\u0142asnego kodu HTML do strony opartej na WordPress mo\u017ce by\u0107 realizowane na wiele sposob\u00f3w. Wyb\u00f3r metody zale\u017cy od Twoich potrzeb i poziomu zaawansowania:<\/p>\n<ul>\n<li><strong>Edytor blokowy<\/strong> i <strong>wid\u017cety<\/strong> s\u0105 idealne dla pocz\u0105tkuj\u0105cych u\u017cytkownik\u00f3w.<\/li>\n<li><strong>Edytor klasyczny<\/strong> i <strong>shortcode<\/strong> daj\u0105 wi\u0119cej kontroli nad kodem.<\/li>\n<li><strong>Edycja plik\u00f3w motywu<\/strong> i <strong>wtyczki<\/strong> to rozwi\u0105zania dla bardziej zaawansowanych u\u017cytkownik\u00f3w, kt\u00f3rzy chc\u0105 dodawa\u0107 kod na ca\u0142ej stronie.<\/li>\n<\/ul>\n<p>Dzi\u0119ki tym metodom mo\u017cesz \u0142atwo dostosowa\u0107 swoj\u0105 stron\u0119 WordPress i doda\u0107 unikalne elementy, kt\u00f3re przyci\u0105gn\u0105 odwiedzaj\u0105cych.<\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[96,95],"manual_kb_tag":[655,4741,4739,3517,3516,4740,76],"class_list":["post-14403","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-aplikacje-internetowe-cms","manualknowledgebasecat-hosting","manual_kb_tag-hosting","manual_kb_tag-jak-dodac-kod-html-w-wordpress","manual_kb_tag-kod-html-w-wordpress","manual_kb_tag-polski-hosting","manual_kb_tag-web-hosting","manual_kb_tag-wlasny-kod-html-w-wowrdpress","manual_kb_tag-wordpress"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":3,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14403\/revisions"}],"predecessor-version":[{"id":14407,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14403\/revisions\/14407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=14403"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=14403"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=14403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}