Czy kiedykolwiek zostałeś poproszony o dodanie fragmentów kodu do sekcji <header> lub <footer> twojej witryny internetowej WordPress?
Często jesteś proszony o dodanie kodu nagłówka i stopki w WordPress, gdy próbujesz zintegrować się z usługami internetowymi, takimi jak Google Analytics, Google Search Console, Facebook Pixel i innymi.
Możesz również natknąć się na poradniki WordPress, które mogą poprosić cię o dodanie własnego kodu CSS lub JavaScript do twojego nagłówka lub stopki WordPress.
Domyślnie WordPress nie udostępnia opcji wstawienia kodu do nagłówka i stopki twojej witryny internetowej. Na szczęście istnieje proste rozwiązanie dla początkujących.
W tym artykule pokażemy, jak łatwo dodać kod nagłówka i stopki w WordPress. Celem jest bezpieczne dodanie kodu bez bezpośredniej edycji plików twojego motywu WordPress.
Najlepszy sposób na dodanie kodu nagłówka i stopki WordPressa
Jeśli chcesz dodać kod nagłówka i stopki WordPress, istnieją trzy możliwe rozwiązania:
- Ręcznie, edytując pliki header.php i footer.php twojego motywu
- Dzięki wbudowanej funkcji kodu nagłówka i stopki twojego motywu
- Korzystanie z wtyczki WordPress
Pierwsza opcja nie jest przyjazna dla początkujących, ponieważ wymaga dodania kodu nagłówka i stopki poprzez bezpośrednią ręczną edycję plików header.php i footer.php.
Inną wadą korzystania z tej metody jest to, że twój kod będzie usuwany, jeśli zainstalujesz aktualizację motywu.
Drugą opcją jest skorzystanie z wbudowanej funkcji twojego motywu. Niektóre motywy WordPress, takie jak Elegant Themes i Genesis Framework by StudioPress, oferują wbudowaną opcję szybkiego dodawania kodu i skryptów do nagłówka i stopki twojego WordPressa.
Jeśli używasz motywu z wbudowaną funkcją, wydaje się to bezpiecznym i prostym rozwiązaniem. Jeśli jednak zmienisz swój motyw, wszystkie fragmenty kodu dodane do twojej witryny internetowej znikną. Obejmuje to weryfikację witryny w Google Search Console, analitykę witryny za pośrednictwem Google Analytics i tak dalej.
Dlatego zawsze zalecamy użytkownikom korzystanie z trzeciej opcji, czyli wtyczki nagłówków i stopek. Ta opcja jest zdecydowanie najłatwiejszą i najbezpieczniejszą metodą dodawania kodu nagłówka i stopki w WordPress.
Po wielu prośbach od czytelników, nasz zespół zbudował wtyczkę WPCode.
WPCode (dawniej Insert Headers and Footers) to w 100% darmowa wtyczka do fragmentów kodu. Za jej pomocą można łatwo dodać kod do nagłówka i stopki w WordPress.
Oto kilka korzyści płynących z używania wtyczki WPCode:
1. Łatwy, szybki i zorganizowany: Umożliwia łatwe i szybkie dodawanie kodów do nagłówka i stopki twojej witryny. Ponadto zapewnia porządek, umożliwiając przechowywanie wszystkich twoich kodów stopki i nagłówka w jednym miejscu.
2. Zapobiega błędom: Inteligentna walidacja fragmentów kodu pomaga zapobiegać błędom, które mogą wystąpić podczas ręcznej edycji plików twojego motywu.
3. Aktualizacja lub zmiana motywu bez obaw: Wtyczka zapisze kod nagłówka i stopki w osobnym miejscu, dzięki czemu będziesz mógł zaktualizować lub zmienić swój motyw bez obawy, że kod zostanie usunięty.
Oprócz skryptów nagłówka i stopki, możesz także użyć WPCode, aby łatwo wstawić własne fragmenty kodu PHP, JavaScript, CSS, HTML i tekstowego bez edytowania plików twojego motywu.
Ponadto WPCode ma wbudowaną bibliotekę fragmentów kodu, w której można znaleźć wszystkie najbardziej przydatne fragmenty kodu WordPress. Pozwala to szybko usuwać funkcje WordPressa, których nie chcesz, takie jak automatyczne aktualizacje, REST API, XML-RPC, komentarze i inne.
Uwaga: Jeśli potrzebujesz zaawansowanych funkcji, takich jak prywatna biblioteka fragmentów kodu w chmurze, piksele konwersji, zaplanowane fragmenty kodu, wersje kodu i inne, możesz uaktualnić do wersji WPCode Pro.
Aby uzyskać więcej szczegółów, przeczytaj nasz przewodnik na temat łatwego dodawania własnego kodu w WordPress.
Mając to na uwadze, zobaczmy, jak łatwo dodać kod nagłówka i stopki w WordPressie za pomocą wtyczki WPCode.
Film instruktażowy
Jeśli nie chcesz oglądać poradnika w formie filmu, możesz kontynuować czytanie poniższej wersji tekstowej:
Dodawanie kodu do nagłówka i stopki w WordPress
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączeniu wtyczki, przejdź do Code Snippets ” Header & Footer w twoim panelu administracyjnym WordPress. Następnie zobaczysz pole „Nagłówek”, w którym możesz dodać swój kod.
Jeśli przewiniesz w dół, zobaczysz także pole „Body” i „Footer”.
Wystarczy wkleić kod do jednego z trzech pól. Gdy skończysz, nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.
Wtyczka będzie teraz automatycznie wczytywać kod w odpowiednich lokalizacjach na twojej witrynie WordPress.
Zawsze możesz edytować i usuwać kod, którego nie chcesz zachować.
Wtyczka musi być zainstalowana i włączana przez cały czas. Wyłączanie wtyczki zatrzyma dodawanie całego własnego kodu do twojej witryny.
Jeśli przypadkowo wyłączysz wtyczkę, kod będzie nadal bezpiecznie przechowywany w twojej bazie danych WordPress. Możesz po prostu ponownie zainstalować lub reaktywować wtyczkę, a kod zacznie pojawiać się ponownie.
Uwaga: Po zapisaniu zmian może być konieczne wyczyszczenie pamięci podręcznej WordPress, aby kod poprawnie pojawił się na front-endzie twojej witryny internetowej.
Odkryliśmy, że największym powodem, dla którego wielu początkujących korzysta z wtyczki WPCode, jest dodanie Google Analytics do swojej witryny internetowej. W tym celu zalecamy użycie darmowej wtyczki MonsterInsights.
MonsterInsights to najlepsza wtyczka Google Analytics dla WordPress. Pomaga poprawnie skonfigurować śledzenie Google Analytics za pomocą zaledwie kilku kliknięć i pokazuje przydatne statystyki bezpośrednio w twoim kokpicie WordPress.
Aby uzyskać instrukcje krok po kroku, zobacz ten poradnik, jak zainstalować Google Analytics w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodać kod nagłówka i stopki w WordPress. Warto również zapoznać się z naszym porównaniem najlepszych usług e-mail marketingu i najlepszych usług telefonii biznesowej.
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.
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!
Moinuddin Waheed says
Ever since I have used wpcode on my website, it has reduced many troubles of messing with the functions.php file.
I remember messing with the code back in 2017 and it was horrible.
wpcode makes it easy not only to insert the code snippets but also it helps in easy maintenance.
Moreover, it gives power to avoid lots of plugins to get small functionalities.
Mrteesurez says
Thanks for this guide.
Although adding code to the header and footer was once a big problem for me as I am afraid to loose the custom code when updating my theme, I then created a child theme for this but it was somehow technical.
Now, I am using WPcode to add the code and implement other custom codes with ease, it’s even faster as there are some ready made custom code in WPcode itself. The plugin is very useful, thanks.
WPBeginner Support says
Glad to hear you found the plugin helpful!
Administrator
Jiří Vaněk says
I’ve been using the WpCode plugin for several years and it’s really great. Especially for newbies who are afraid to insert codes into the website. This plugin is almost a must on every website. It can really save a lot of work and here on wpbeginner there are a lot of ready-made solutions.
Pierre-Yves says
Hello
I’ve installed the WPCode plugin and I’ve inserted code in the header field in the „Global Header and Footer” tab. This code shows a popup.
The website is multisite and WPCode is activated on all the network.
The popup shows well in the home page of my website, but not on other pages where people can land after searching in Google.
What I’ve to do to get the popup showing on any page ?
Thanks
WPBeginner Support says
Just to be certain, does your theme have a style for your other pages that uses a different header or removes the header?
Administrator
Viney Bhatia says
Is there any way to hide the header or footer code for some posts/pages?
WPBeginner Support says
Not at the moment with the plugin.
Administrator
Aamir Nadeem says
How many codes we can add in single header or footer section, I mean can i use two or three codes in single header section like facebook code google code etc.
WPBeginner Support says
As long as the code is added properly and you’re not placing code within other blocks of code you can add as many as you would like.
Administrator
FRANK Pirrone says
Hello, I added the code and clicked save. Nothing happened. Is there a publish button I need to press?
WPBeginner Support says
It would depend on the code you added as not all code has a visible component, you may also want to try clearing any caching on your site for another common reason for not seeing any change on a site.
Administrator
Jamie Turner says
Hi — Quick question. I’ve installed the plugin. Is there a way to select which pages the header and footer show up on? All I see is a global install without the ability to select pages. Thanks!
WPBeginner Support says
At the moment the plugin is for adding code to your site’s header and not showing/hiding your header. Your theme’s templates would decide where your header and footer show on your site.
Administrator
Pierre Patenaude says
I have installed the plugin (and it shows as being activated in the plugin list) but it doesn’t show up in the „Settings” menu. Did I miss a step? Could you provide a solution?
Thanks
WPBeginner Support says
No, the option should be available once the plugin is active as long as you have access to edit the site’s settings, you would want to ensure you are an admin on the site and if it is still not visible you would want to try disabling your other plugins to see if it is possibly a conflict with one of those plugins.
Administrator
Ashleigh White says
Hi! I have a question! I am trying to add the global site tag and phone snippet to my code on each page so I can track my google ad calls. I have the „Headers and Footers” plugin, can I just paste it here and I am good? Or does it matter where I post it (Header vs. Body. Footer)? Thanks so much!
WPBeginner Support says
For ad code, it is recommended to place the code in the header, you can see more about that in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-add-google-adsense-to-your-wordpress-site/
Administrator
Deborah Dakota says
So close to being what’s needed! But Google strongly recommends using different metadata for every page. „Identical or similar descriptions on every page of a site aren’t helpful when individual pages appear in the web results. In these cases we’re less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. ” Please consider updating your plugin accordingly.
WPBeginner Support says
Our plugin is not for metadata, it is mainly for code to add things like Google Analytics tracking or for verification codes. If you want a plugin for adding metadata to individual posts, we would recommend taking a look at All in One SEO as that will give you far better control over your metadata
Administrator
Robert Zou says
I have a question. How do you remove code that you added using the insert headers and footers plugin? When I open up the theme editor I can’t find the code I added using this plugin.
WPBeginner Support says
Code added using the plugin would be removed when removed from the plugin’s settings or the plugin is uninstalled.
Administrator
James says
Hello, hey I added the plugin above to my site and added the code to the header section. Then I tested with your site and it said it was saved successfully.
But I don’t see the bot when I go to the live site. Could u tell me what I’m doing worng? Tnx.
WPBeginner Support says
It would depend on the specific code you are adding, we would recommend checking with the support for the code for if you added it correctly as not all code is made to have something visible.
Administrator
Emmanuel says
I wanted to change the color of my address bar using this plugin but each time I paste it gives me an error message
Is my code okay?
WPBeginner Support says
It would depend on the specific code and where the code is intended to be added. You would want to reach out to who you received the code from for where it should be placed.
Administrator
Elizabeth says
I bought a theme but it does not let me add any button action in the header nor in the menu, do you think this plugin could help me???
WPBeginner Support says
This plugin is for adding code such as scripts into the header, not for adding buttons. For an easy way to customize your design, you would want to take a look at page builders like the ones in our article below:
https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Administrator
Ahmed says
How can add the code in the header as high as possible? I need to put Code first of few lines in the header. How can I control the position of the code?
Thanks
WPBeginner Support says
If you need a very specific location for the code, you would want to manually add the code to your files.
Administrator
William says
USELESS for a theme that does not have headers in the first place, like wordpress 2021. Useless.
It was implied that this plugin would do that. It. Does. Not. ALL it does in insert a GIANT version of the picture you choose ABOVE your menu and site name.
WPBeginner Support says
The 2021 theme does have a header but, the Insert Headers and Footers plugin is for inserting code such as Google Analytics, not for adding photos to the header of your website. We would not recommend using this plugin for adding a header image as that would cause the errors you are running into.
Administrator
Muhammad Shoaib says
Hey There,
I have already installed „Insert Footer and Header plugin”, if I wanna to remove from site then the inserted code would also be removed from header section or still saved without plugin?
Kindly light me.
WPBeginner Support says
If you remove the plugin, the added code should be removed as well.
Administrator
Kirsten says
I’m being told by Google Analytics to add a Global Site Tag code immediately after the tag. Does this plugin do that? Otherwise, I have no idea how to add this code to *every* page on my site!
WPBeginner Support says
Yes, the plugin will add it to all of your pages with a header.
Administrator
Lisa Masquelier says
Thank you SO much for these simple instructions and the plug-in. I could not figure out why my website kept deleting from Pinterest!
WPBeginner Support says
Glad our guide was helpful!
Administrator
Kamlesh says
The Header and Footer in each blog post will be different? Is the Plugin for each Post?
WPBeginner Support says
Code added using the plugin will be on every post and page and not individual codes for individual posts and pages.
Administrator
Denise says
If I need to add code before the closing tag, which box do I put the code into?
WPBeginner Support says
You would place that code into the footer section
Administrator
Redentor mariano says
Thank you for some plug in that you shared.
I gonna try it into my site.
WPBeginner Support says
We hope our plugin helps you add code to your header
Administrator
Ana says
Thank you! Very helpful!
WPBeginner Support says
You’re welcome
Administrator
Trang says
Hey,
I can’t find the „Insert Headers” section below my post’s editor? So how can I enable that function allowing me insert different code for specific post?
WPBeginner Support says
Our plugin is for the entire site at this time and not individual posts or pages.
Administrator
Emory says
How do I install different code for each page type instead of putting all the code in every page?
WPBeginner Support says
You would need to manually add that if we’re understanding what you’re wanting.
Administrator
Ali says
Is „Insert Headers and Footers” plugin compatible with WordPress version 5.5.1?
WPBeginner Support says
Yes, we will look into updating the tested with version as soon as we are able
Administrator
Brian Small says
I am getting the following error when hitting SAVE from this plug-in:
A potentially unsafe operation has been detected in your request to this site
WPBeginner Support says
You would want to check if you have any security plugins active on your site or if your host has one set up. You may also want to ensure you copied the code you are attempting to add correctly.
Administrator
DAVE says
On your demonstration you didn’t have anything come up on the top.
This is the instructions from the code generator I am using;
Paste the copied code into bottom of your HTML page just before the closing tag
I tested the code and it does not work, „Am I doing something different? „
WPBeginner Support says
We would first recommend reaching out to the support of what has generated the code to ensure there isn’t anything specific about the code that needs to be set on your page for it to work correctly.
Administrator
DAVE says
Yes thank you, good idea.
James says
Hello. I need to edit the header code on a specific set of pages only. I have currently added the script I need to the header.php file, however this applies the code to all pages globally.
Is there any way I can add the script to a specific set of pages only?
WPBeginner Support says
Unless I hear otherwise, we do not have a recommended method for page specific code at this time.
Administrator
Susan says
Thank you so much!!!
This stuff scares me as I think I am going to doom my website forever!!
So easily explained will definitely be subscribing.
I need to work on this every day.
WPBeginner Support says
Glad our guides have been helpful
Administrator
Marc says
If my theme does not allow custom header images, will this plugin allow me to make custom header images. Lost on how to do this. We have an old theme with custom header function
WPBeginner Support says
This plugin is not for that at the moment. For customizing the design of your theme you may want to look into page builder plugins like the ones in our article below:
https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Administrator
Mark says
Would i be able to use a relative path? so I can move the site to a different host without changing header? if so where is the origin?
i tried to include some some examples but sucuri blocked the post as malicious. i guess it doesn’t like seeing paths.
WPBeginner Support says
It would depend on the code but you should be able to user relative paths if you wanted.
Administrator
Alexandra says
Yaaaaaaay! I am so excited. I was having so much trouble getting my Mailchimp pop-up to work, but this plugin did the job easy-peasy!
WPBeginner Support says
Glad our recommendation could help
Administrator
Steve says
Hi, I have installed the Headers and Footers plugin and added code for the footer. The text that I want displayed is at the very bottom, below the Bento copyright line. Is there a way to have my footer appear at the top of the footer display? Thanks
WPBeginner Support says
For footer customizations, you would want to reach out to your theme’s support to see if they have any recommended options you can use.
Administrator
Subrat says
I have already put Google analytics code in the header section using insert header and footer plugin how can I add adsense code there again?
WPBeginner Support says
You would add the new code below the analytics code
Administrator
rooch says
How about using the functions.php file in child theme to add header and footer snippets
WPBeginner Support says
That would be something you can do but not all beginners want to or understand how to create a child theme, that is why we recommend this method.
Administrator
Ruhul says
This plugin’s activation active auto bulk mail sending from my hosting server. This is working like a spam. So I have to delete this from my website.
WPBeginner Support says
This plugin does not have anything like that, we would recommend scanning your site to ensure you do not have any malicious code on your site
Administrator
Tom says
I added this plugin to my site but nothing showed when I clicked on the plugin? I’m using an old version of WP but not sure if this is the reason why.
WPBeginner Support says
You should find the plugin’s section under Settings>Insert Headers and Footers
Administrator
Fazil Ibrahim Moihammed says
Hi team,
Does the FB Pixel Base Code was copied and paste on the header tag in that plugin.
will it automatically apply to every page of the website? Please reply!
WPBeginner Support says
Yes, the plugin will add the code to every page
Administrator
Anchal says
How can I add a code in body section (not in the header/footer section ) with this plugin?
I want to add certain code in the body section to avoid render blocking.
WPBeginner Support says
The plugin should currently have a third input box where you can include code that should be in the body of your site.
Administrator
firatba says
Thanks a lot! It helps me while adding our on-site messagin system code.
WPBeginner Support says
You’re welcome, glad it was helpful
Administrator
ANA LUIZA says
Very helpful! <3 Thank you!
WPBeginner Support says
You’re welcome
Administrator
Noya says
Hi,
My site was built by a web developer who already included all sorts of code snippets in the section of my site.
If I add new snippets of code using this plugin, will it overwrite the code that’s already there or just add the new code to the existing code?
I don’t want to make a mess of my site…
Thanks!
WPBeginner Support says
If you add code using this plugin it would be added to your site, it would not replace code
Administrator
Arsalaan says
Nice explanation!
WPBeginner Support says
Thank you
Administrator
Wendy says
Hi! I tried to add the plugin to my site but you need to have a business page to add any plugins? Can I add the code without a plugin?
WPBeginner Support says
It sounds like your site is on WordPress.com, in which case you are limited to what WordPress.com allows. Our guides are for WordPress.org sites, you can see a comparison between the two here:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrator
anudeep says
hi
First i have install header and footer plugin than after past my google analytics code . but my problem is once past the code and see my website, the code showing disable? How to solve it?
WPBeginner Support says
If the code is not being added to your header, you would want to clear any caching on your site as that is the most common root of that issue.
Administrator
Shahad says
my header and footer in not showing in particular page..how can i solve it
WPBeginner Support says
You would want to check with your specific theme’s support for the header not appearing on a specific page as it could be a page specific template causing you issues.
Administrator
Lio says
Thanks guys for your plugin! I used it to add FB Pixel to my site, but now I have a landing page and I need a different Pixel event (Lead) on the Thank You page after visitors confirm their details. Can I use the plugin to add the script to a specific page?
WPBeginner Support says
Not at the moment, for the time being, the plugin adds the code to all pages by default
Administrator
Keith says
Hi, is there a way to change the font size of the footer?
I tried keying in a chunk of disclaimer text but it is too large.
Thanks in advance!
WPBeginner Support says
For the font size, you would want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/how-to-change-the-font-size-in-wordpress/
Administrator