publikacja: 25 lipca 2012, autor: , komentarze 34 https://wpninja.pl/artykuly/dodawanie-css-js-do-wordpressa-wprowadzenie/

Dodawanie CSS / JS do WordPressa – wprowadzenie

Dodawanie CSS / JS do WordPressa – wprowadzenie

Dodawanie zewnętrznych arkuszy stylów CSS i skryptów JavaScript może wydawać się banalną sprawą, ale jeśli nie wykorzystujesz do tego funkcji wp_enqueue_style i wp_enqueue_script to strzelasz sobie w stopę.

Edycja plików header.php i footer.php

Jednym z najczęściej spotykanych błędów popełnianych przez młodych adeptów jest dodawanie odwołań do zewnętrznych stylów / skryptów bezpośrednio w plikach motywu – header.php i footer.php.

Wiem, bo sam tak robiłem a moja stopa oberwała z tego powodu dziesiątki razy.

Mój kod wyglądał następująco:

  • header.php:
    <!DOCTYPE HTML>
    <html <?php language_attributes(); ?>>
    <head>
       <meta charset="<?php bloginfo( 'charset' ) ?>" />
       <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
       <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
       <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/scripts.js"></script>
       <?php wp_head(); ?>
    </head>
    <body>
  • footer.php:
    <?php wp_footer(); ?>
    </body>
    </html>
  • kod HTML:
    <!DOCTYPE HTML>
    "ltr""pl-PL"
     
       "UTF-8"
       Moja strona
       "stylesheet""http://moja-strona.pl/wp-content/themes/moj-motyw/style.css""text/css"
       "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
       "http://moja-strona.pl/wp-content/themes/moj-motyw/js/scripts.js"
     
     
       <!-- (...) -->
     
     

Początkowo sądziłem, że wszystko jest w porządku – skoro działa to po co drążyć temat i przeczesywać czeluści dokumentacji?

Wystarczy jednak aktywacja prostej wtyczki do zarządzania ankietami (WP Polls) żeby przekonać się jak bardzo byłem w błędzie (pominąłem część nieistotnego kodu, aby zwiększyć czytelność):

  • kod HTML:
    <!DOCTYPE HTML>
    "ltr""pl-PL"
     
       "UTF-8"
       Moja strona
       "stylesheet""http://moja-strona.pl/wp-content/themes/moj-motyw/style.css""text/css"
       "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
       "http://moja-strona.pl/wp-content/themes/moj-motyw/js/scripts.js"
       'stylesheet''wp-polls-css''http://moja-strona.pl/wp-content/plugins/wp-polls/polls-css.css?ver=2.63''text/css''all'
       'text/javascript''http://moja-strona.pl/wp-includes/js/jquery/jquery.js?ver=1.7.2'
     
     
       <!-- (...) -->
       'text/javascript''http://moja-strona.pl/wp-content/plugins/wp-polls/polls-js.js?ver=2.63'
     
     

Ałć! – dwa wywołania jQuery. Ponadto, to drugie jest w trybie bezkonfliktowym co oznacza, że moje skrypty właśnie poleciały na orbitę.

W pewnym momencie zacząłem sobie z tym „radzić” poprzez całkowite usuwanie funkcji wp_head i wp_footer, które dają wtyczkom możliwość dołączania własnych stylów i skryptów. Oczywiście w efekcie prowadziło to do jeszcze większych problemów…

Powstaje więc pytanie – czy można to zrobić lepiej? Jasne i wcale nie jest to takie trudne.

Wykorzystanie wp_enqueue_style / wp_enqueue_script

Niezależnie od tego czy tworzysz motyw czy wtyczkę, czy jest to indywidualny projekt czy też publiczny – zawsze powinieneś wykorzystywać odpowiednie funkcje w celu dodania zewnętrznych plików CSS (wp_enqueue_style) / JS (wp_enqueue_script).

Największe korzyści z ich stosowania to:

  • zabezpieczenie przed duplikowaniem:
    wykluczanie sytuacji, w której jednakowe pliki są ładowane po kilka razy
  • ustawianie zależności:
    kontrolowanie kolejności wczytywania poszczególnych plików
  • jQuery w trybie bezkonfliktowym:
    możliwe jednoczesne działanie wielu bibliotek (jQuery, prototype, mootools itp.)
  • wersjonowanie plików:
    większa kontrola nad wyglądem strony w przeglądarce
  • odporność na aktualizacje:
    korzystanie ze skryptów dostarczanych razem z WordPressem
  • trzymanie wszystkich odwołań w jednym miejscu:
    większa czytelność kodu
  • automatyczne wykrywanie https:
    adresy odnośników dostosowują się do ustawionego protokołu HTTP

Tyle jeśli chodzi o teorię. W kolejnym artykule pokaże jak używać wspomnianych funkcji.

Dodaj własny komentarz