Jak dodać w WordPress dowolny kod html w nagłówku head strony z użyciem motywu potomnego?

Wiele kodów z popularnych usług np. analitycznych wymaga, aby dodać do nagłówka witryny (sekcji HEAD) jakiegoś kodu. Dzisiaj pokażę CI jak to zrobić w WordPress, gdy motyw nie ma funkcji na zrobienie tego z poziomu opcji WordPressa.

WordPress Head czyli jak dodać kod do nagłówka head witryny.

Ogólnie rzecz biorąc większość motywów (płatnych premium) posiada opcje pozwalające na dodanie dowolnego kodu do nagłówka lub stopki takie jak kody weryfikacyjne, statystyki Google Analytics i inne podobne, ale co w przypadku kiedy nasz motyw tej opcji nie obsługuje ?

Wtedy wystarczy prosta modyfikacja motywu potomnego.

Jak dodać kody html/css/java w nagłówki head strony?

W motywie potomnym znajduje się m.in. pliku functions.php , otwórz go w edytorze i wklej poniższy kod:

add_action('wp_head', 'jcz_kod_w_head'); 
function jcz_kod_w_head(){ ?> 
   //Twój kod html css lub inny 
<?php }

Następnie podmień linijkę „//Twój kod html css lub inny” na kod, który chcesz wkleić do nagłówka strony.

Jeżeli chcesz np. dodać skrypt Google Analytics będzie to wyglądać następująco

add_action('wp_head', 'jcz_kod_w_head');
function jcz_kod_w_head(){
     
    ?>
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
<?php 
}

I to wszystko :) Prosto i przyjemnie. Po więcej wskazówek zapraszam do artykułu: Jak dodawać niestandardowy kod i funkcje w WordPress?.

Oczywiście kod ten możesz wkleić też do wtyczki funkcyjnej lub (niezalecana metoda) do pliku functions motywu głównego, jednak pamiętaj, ze w takim przypadku po aktualizacji zmiany, które w nim wprowadzisz znikną – aby zostały należy używać wspomnianego motywu potomnego lub dodatkowej pustej wtyczki na funkcje.

Jeżeli nie chcesz tego robić samodzielnie lub nie masz na to czasu → użyj formularza kontaktowego.

3.7/5 - (3 votes)
dHosting najlepszy serwer dla wordpress i nie tylko
Powiązane tematy: WordPress

Na stronie mogą znajdować się linki polecające (affiliacyjne), które pozwalają utrzymać bloga. Zakup z mojego polecenia nie generuje dla Ciebie dodatkowych kosztów, a ja otrzymam prowizje od kwoty zapłaconej.

6 komentarzy “Jak dodać w WordPress dowolny kod html w nagłówku head strony z użyciem motywu potomnego?”

  1. Avatar autora komentarza infomiasto.eu
    infomiasto.eu

    Dobrze wykorzystać do tego wtyczkę bo w kodach dodawanych ręcznie to często można z czasem się pogubić i sam tak miałem. Że zapominałem co gdzie dopisałem a po aktualizacjach potem były problemy.

    1. Avatar autora komentarza Jakub Jaworowicz
      Jakub Jaworowicz[ Autor Artykułu ]

      Dokładnie. Dlatego piszę o wtyczce funkcyjnej :) niedługo będę o niej więcej pisać – Jak ja napisać i poprawnie z niej korzystać.

  2. Avatar autora komentarza Waldek
    Waldek

    Kod wklejam do pliku functions.php ale nie wiem w którym miejscu?

    1. Avatar autora komentarza Jakub Jaworowicz
      Jakub Jaworowicz[ Autor Artykułu ]

      Na końcu przed zamknięciem ?> (jeżeli istnieje).

  3. Avatar autora komentarza Bartosz
    Bartosz

    Dlaczego nie w header.php?

    1. Avatar autora komentarza Jakub Jaworowicz
      Jakub Jaworowicz[ Autor Artykułu ]

      Dużo łatwiej wtedy zarządzać tymi kodami np. tworzyć logiki warunkowe, że mają się uruchamiać lub nie pod pewnymi warunkami.

Przyłącz się do dyskusji