Często zdarza się, że dodanie JavaScript do śledzenia analityki jest pierwszym rodzajem niestandardowego kodu, który użytkownik WordPress musi wdrożyć.
Zazwyczaj dokumentacja, którą otrzymujesz wraz z tymi kodami jest napisana tak, jakby Twoja strona była tylko zbiorem plików HTML.
Ale WordPress tak nie działa. HTML twojej strony jest generowany dynamicznie.
Sposoby na dodanie niestandardowego kodu JavaScript do Twojej witryny
Oto szybka lista opcji dodawania JavaScript do Twojej witryny WordPress. Wszystkie one będą działać, ale niektóre są lepsze od innych. Przejdę nad każdym z nich szczegółowo w tym artykule:
- Załaduj oddzielny plik JavaScript za pomocą programu ładującego skrypty WordPressa
- Użyj haków wp_footer lub wp_head, aby dodać skrypt inline
- Użyj wtyczki, aby dodać skrypty nagłówka lub stopki
- Zmodyfikuj swój motyw, aby uwzględnić skrypt (zły pomysł)
- Użyj edytora postów WordPress (naprawdę zły pomysł, który nie jest wart omawiania)
Pierwsze dwie opcje wiążą się z użyciem haków WordPressa.
Hook ładujący skrypty wordpress:
add_action( 'wp_enqueue_scripts', 'my_custom_script_load' ); // wywołanie akcji
function my_custom_script_load(){
wp_enqueue_script( 'my-custom-script', plugin_dir_url( __FILE__ ) . '/custom-scripts', array( 'jquery' ) );
}
Dodanie kodu w footer / header wordpress (nie zalecane)
add_action( 'wp_head', 'my_header_scripts' );
function my_header_scripts(){
?>
<script>alert( 'Cześć!' ) </script>
<?php
}
Dodawanie skryptów nagłówka i stopki za pomocą wtyczki
Zazwyczaj, kiedy trzeba dodać niestandardowy JavaScript to tylko dlatego, że trzeba dodać coś jak Google Analytics do WordPress
Są to bardzo proste operacje typu wytnij i wklej.
Dla czegoś prostego jak to wtyczka jest dobrym wyborem.
Facebook, Google, Twitter lub ktokolwiek daje ci kod i mówi, aby wkleić go do nagłówka lub stopki witryny.
Dla tradycyjnej statycznej witryny HTML, można dosłownie wkleić ten kod do nagłówka HTML lub stopki na każdej stronie. W wordpress musimy wstrzyknąć ten kod programowo w stopce lub nagłówku. Istnieje wiele wtyczek dla skryptów nagłówka i stopki.
Polecam wtyczkę Insert Headers And Footer. Jest łatwa w użyciu i działa.
Nie edytuj plików nagłówka lub stopki swojego motywu.
Każdy motyw WordPress ma plik szablonu header.php i footer.php. Te pliki powinny generować nagłówek i stopkę Twojego motywu. Technicznie mógłbyś po prostu wkleić tam kod śledzenia lub inny JavaScript. To by zadziałało, ale proszę nie rób tego.
Modyfikacja pliku motywu zostanie utracona, gdy zaktualizujesz swój szablon. Ponadto, jeśli kiedykolwiek zmienisz swój motyw, stracisz ten skrypt śledzący, co również nie jest dobrą informacją.
Oddzielenie wszystkiego, co nie ma związku z tym, jak wygląda Twoja witryna, od motywu oznacza, że gdy zmienisz swój szablon, zmienią się tylko elementy wizualne i nie stracisz ważnej funkcjonalności.
Dodawanie JavaScript z hakami WordPressa
Jeśli potrafisz pisać niestandardowy kod, polecam stworzenie wtyczki WordPress.
Twoja strona internetowa się zmienia, dochodzą co jakiś czas nowe funkcjonalności, nie warto mieszać kodu php z js, to tylko zaśmieca witrynę.
/**
* Plugin Name: Scripts
*/
class ScriptsInit
{
protected $script_ver = '1.1';
public function __construct()
{
add_action('wp_head', array($this, 'header_scripts'));
add_action('wp_footer', array($this, 'footer_scripts'));
add_action('wp_enqueue_scripts', array($this, 'hook_script'));
}
public function header_scripts()
{
wp_enqueue_script('my-custom-script', plugin_dir_url(__FILE__) . '/custom-scripts', array('jquery'), $this->script_ver, false );
}
public function footer_scripts()
{
wp_enqueue_script('my-custom-script', plugin_dir_url(__FILE__) . '/custom-scripts2', array('jquery'), $this->script_ver, true);
}
public function hook_script()
{
wp_enqueue_script('my-custom-script', plugin_dir_url(__FILE__) . '/custom-scripts3', array('jquery'), $this->script_ver);
}
}
new ScriptsInit();
Co zrobić jeżeli chcemy przekazać wartości z php do javascript?
wp_enqueue_script( 'my-custom-script', plugin_dir_url( __FILE__ ) . '/js/script.js', array( 'jquery' ), '1.0', true );
wp_localize_script(
'my-custom-script', // nazwa skryptu
'custom_object', // nazwa obiektu w js
array(
'ajax_url' => admin_url('admin-ajax.php'), // przekazanie url admin-ajax.php
)
);
W ten sposób w pliku javascript otrzymamy dostęp do adresu url pliku admin-ajax.php
W ten sposób możemy odczytać obiekt w pliku js:
let ajax_url = custom_object.ajax_url
console.log(ajax_url);
Adres ajax_url pojawi nam się w konsoli.
W ten sposób dodaliśmy niestandardowy kod javascript do Twojej witryny wordpress.
Add a Comment
You must be logged in to post a comment