CMSPHPWordPress

#2 Tworzenie wtyczki WordPress. Haki akcji

To tylko jeden wpis z serii Tworzenie wtyczki WordPress. Obecne i przyszłe artykuły dostępne będą pod specjalnym tagiem Wtyczka WordPress.

Kontynuując mój poprzedni wpis na temat tworzenia wtyczek do WordPressa, postaram się zgrabnie przejść do omówienia haków akcji. Wzorcową wtyczką, którą dzisiaj stworzysz, będzie prosty moduł umieszczania kodu Google Analitics, z uwzględnieniem kodu użytkownika podawanego w ustawieniach wtyczki. Brzmi tajemniczo? Nie przejmuj się i czytaj dalej! ;-)

Kursy wideo WordPress

Pamiętaj! Haków akcji powinno używać się tylko i wyłącznie dla funkcjonalności, które nie modyfikują treści dostarczanej użytkownikowi. Jeżeli chodzi o modyfikację treści, służą do tego filtry. O tym porozmawiamy w kolejnej części cyklu.

Podstawowy szkielet wtyczki

Jak tworzyć podstawowy szkielet wtyczki i jak zainstalować ją w WordPressie opisałem w części pierwszej –  zakładam, że ją przeczytałeś – teraz więc przejdę od razu do samego kodu PHP.

Projekt na GitHub

Przyjąłem, że tworzona wtyczka otrzyma nazwę wbrd_ga.

<?php 
	/*
	Plugin Name: WEBroad GA
	Plugin URI: http://webroad.pl/cms/5954-2-tworzenie-wtyczki-wordpress
	Description: Prosta wtyczka umieszczająca kod śledzenia Google Analitics
	Version: 1.0
	Author: Michal Kortas
	Author URI: http://webroad.pl
	License: GPLv2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	*/
?>

Uff! Pierwsze koty za płoty, więc nie ma co dłużej zwlekać. Spójrz na kod śledzenia Google Analitics.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-00000000-2', 'auto');
  ga('send', 'pageview');
</script>

Podstawową zmienną tego kodu jest tzw. identyfikator śledzenia, dla przykładu UA-00000000-2. To właśnie jego będziesz mógł zmieniać za pomocą panelu ustawień wtyczki (o tym za chwilę).

Stwórz nową klasę wbrd_ga, a w niej pierwszą metodę show_ga_code, która będzie zwracać powyższy kod.

<?php
public function show_ga_code() {
	?>
		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		  ga('create', 'UA-00000000-2', 'auto');
		  ga('send', 'pageview');
		</script>
	<?php
}
?>

Dopinanie się do haka

Teraz, za pomocą haka akcji, dołącz wywołanie funkcji do stopki strony. Zrób to koniecznie w konstruktorze.

public function __construct() {
	add_action('wp_footer', array( $this, 'show_ga_code' ));
}
W WordPressie domyślnie istnieje mnóstwo haków, do którym możesz się bez problemu dopiąć, jeśli tylko szablon przygotowany jest według fundamentalnych zasad WordPressa.

Po utworzeniu nowego obiektu klasy wbrd_ga i odświeżeniu witryny, prawie na samym dole pojawia się kod śledzenia.

$ga_settings_page = new wbrd_ga();

Kod śledzenia Google Analitics

Tworzenie strony ustawień wtyczki

Często zdarza się, że wtyczka oprócz samego wywołania powinna dać się w prosty sposób skonfigurować. Pomimo tego, że poniższy przykład będzie trochę na wyrost, powinien pomóc zrozumieć Ci ideę tworzenia strony ustawień.

Mój przykład posiadał będzie wyłącznie jedno pole tekstowe, które pozwoli na wpisanie identyfikatora śledzenia GA.

Nowa pozycja w menu panelu administracyjnego

Na początek musisz stworzyć metodę, wykorzystującą z kolei funkcję o nazwie add_options_page().

<?php	
public function add_page() {
	add_options_page(
		'Settings Admin', 
		'WEBroad GA', 
		'manage_options', 
		'ga_settings_page', 
		array($this, 'create_page')
	);
}
?>
  • Pierwszy parametr: tytuł strony ustawień
  • Drugi parametr: tytuł widoczny w menu
  • Trzeci parametr: rola użytkownika, mającego dostęp do ustawień
  • Czwarty parametr: unikalny parametr strony
  • Piąty parametr: nazwa metody generującej treść strony ustawień

Za pomocą kolejnego haka przypnij powyższą funkcję do menu administracyjnego.

add_action('admin_menu', array($this, 'add_page'));

Generowanie treści strony ustawień

Dodaj kolejną metodę, inicjującą treść strony ustawień wtyczki.

public function create_page() {
	$this->options = get_option('ga');
	?>
	<div class="wrap">
		<h2>Ustawienia WEBroad GA</h2>           
		<form method="post" action="options.php">
		<?php
			settings_fields('ga_options');   
			do_settings_sections('ga_settings_page');
			submit_button(); 
		?>
		</form>
	</div>
	<?php
}

Zaczyna się robić ciekawie, prawda?

Jak już pewnie zauważyłeś, przypisałeś do zmiennej options tablicę z pobranymi wartościami. Pamiętaj, żeby zadeklarować tę zmienną w kodzie!

private $options;

Teraz należy utworzyć metodę inicjującą stronę ustawień.

<?php 
public function page_init() {
	/* Tutaj działamy */
}
?>

Pierwszą jej częścią jest rejestracja ustawień.

register_setting(
	'ga_options',
	'ga',
	array($this, 'sanitize')
);
  • Pierwszy parametr: grupa opcji
  • Drugi parametr: nazwa opcji
  • Trzeci parametr: nazwa metody walidującej

Drugim krokiem jest tworzenie nowej sekcji w panelu ustawień. W Twoim i moim przypadku będzie to tylko jedna sekcja.

add_settings_section(
	'ga_section',
	'Zarządzanie kodem śledzenia',
	array($this, 'section_callback'),
	'ga_settings_page'
);  
  • Pierwszy parametr: nazwa sekcji
  • Drugi parametr: tytuł sekcji
  • Trzeci parametr: nazwa metody zwrotnej
  • Czwarty parametr: parametr strony ustawień

Na koniec powinieneś dodać już konkretne pola ustawień.

add_settings_field(
	'ga_id',
	'Kod śledzenia',
	array($this, 'ga_id_callback'),
	'ga_settings_page',
	'ga_section'         
);      
  • Pierwszy parametr: nazwa pola
  • Drugi parametr: tytuł pola
  • Trzeci parametr: nazwa metody zwrotnej
  • Czwarty parametr: parametr strony ustawień
  • Piąty parametr: nazwa sekcji

Teraz możesz już zahaczyć stronę w panelu administracyjnym, korzystając z add_action.

add_action('admin_init', array($this, 'page_init'));

Skomplikowane? Może trochę. Jeśli jesteś początkujący, możesz łatwo się zgubić, jednak w praktyce siła!

Funkcje zwrotne

Pamiętasz, że powyżej dodałeś do sekcji i pola funkcje zwrotne (callbacki)? W takim razie pokażę Ci, jak ich użyć. Za pomocą funkcji zwrotnych dodam tekst, który się wyświetli na początku sekcji oraz pole tekstowe w formularzu.

public function section_callback() {
	echo 'Wprowadź swoje ustawienia poniżej:';
}

public function ga_id_callback(){
	if(isset($this->options['ga_id'])) $ga_id = esc_attr($this->options['ga_id']);
	echo '<input type="text" id="ga_id" name="ga[ga_id]" value="'.$ga_id.'">';
}

Walidacja

Pozostała Ci jeszcze jedna metoda do napisania. Oczyści ona tekst wpisywany w pole tekstowe.

public function sanitize($input){
	$new_input = array();

	if(isset($input['ga_id']))
	$new_input['ga_id'] = sanitize_text_field($input['ga_id']);
	
	return $new_input;
}

Obiekt z ustawieniami

Na sam koniec wystarczy, że stworzysz nowy obiekt klasy wbrd_ga.

$ga_settings_page = new wbrd_ga();

Pobieranie identyfikatora śledzenia

Żeby formularz ustawień miał sens, koniecznie trzeba pobrać identyfikator śledzenia z bazy i umieścić go w pierwszej metodzie, która wywołuje kod Google Analitics. Czas na niewielką modyfikację, korzystającą z funkcji get_option.

public function show_ga_code() {
	$this->options = get_option('ga');
	?>
		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		  ga('create', '<?php echo $this->options['ga_id'] ?>', 'auto');
		  ga('send', 'pageview');
		</script>
	<?php
	
}

Nadszedł czas na efekty! ;-)

Przegląd gotowej wtyczki

Poprawny wynik końcowy jest niezwykle motywujący dla dalszej nauki. Spójrz zatem, co wyszło Ci z dzisiejszej pracy.

Odnośnik w menu

Odnośnik w menu panelu

Strona ustawień

Strona ustawień wtyczki

Kod wstawiony do kodu witryny

Kod Google Analitics

Podsumowanie

Dotrwałeś do końca? Świetnie! Bardzo Ci gratuluję. Jeżeli masz pytania co do utworzonej powyżej wtyczki, zapraszam Cię do ich zadawania na forum, nawet bez jakiejkolwiek rejestracji. W kolejnej części omówię korzystanie z haków filtrów, oczywiście w praktyce.

Przygotowałem cały kod, który dostępny jest na GitHub.

Projekt na GitHub Zapytaj na forum

Tagi:hakihookspluginWordPresswtyczka wordpress

komentarzy 13

  • Awatar
    Xmartinez

    20 lutego 2016 13:47

    Michał, dzięki za artykuł, przyjemnie się czytało :) I od razu mam pytanie o to czy mieszanie php z js jest rozwiązaniem eleganckim. Czy podpięcie kodu śledzenia w osobnym pliku js i „przetłumaczenie” parametrów z ustawień na js za pomocą wp-localize-script nie byłoby lepsze?

    Odpowiedz
    • Awatar
      Michał Kortas

      20 lutego 2016 21:15

      Dziękuję :) nie jest to eleganckie, chodziło mi jednak o pokazanie podstawowych zasad tworzenia tego rodzaju wtyczki z ustawieniami własnymi. O wp-localize-script napiszę w jednej z kolejnych części. Pozdrawiam!

      Odpowiedz
  • Awatar
    DMati

    20 lutego 2016 16:08

    Ooo widzę, że WordPress to tu nie egzotyczny temat – podpinam pod planetę (http://planeta-wordpress.pl/).

    Odpowiedz
    • Awatar
      Michał Kortas

      20 lutego 2016 21:15

      Jasne, że nie. Trzeba trzymać szeroki front :) dziękuję za podcięcie. Pozdrawiam!

      Odpowiedz
  • Awatar
    Gogler

    22 lutego 2016 12:20

    Bardzo dobry i przejrzysty artykuł, a przede wszystkim przydatny. Pozdrawiam i czekam na part III. :)

    Odpowiedz
    • Awatar
      Michał Kortas

      22 lutego 2016 13:07

      Dziękuję za pochwałę :) Kolejny wpis zaplanowałem na środę lub najpóźniej na sobotę.

      Odpowiedz
  • Awatar
    Krzysztof Kwiatkowski

    25 lutego 2016 19:01

    Widzę że nikt nie zauważył chyba błędu – linijka kodu na widocznego na stronie:
    ga(‚create’, UA-74295262-1, ‚auto’);

    a powinno generować:
    ga(‚create’, ‚UA-74295262-1’, ‚auto’);

    w pliku php dokonałem prostej zmiany:
    ga(‚create’, ‚options[‚ga_id’] ?>’, ‚auto’);

    Odpowiedz
    • Awatar
      Michał Kortas

      25 lutego 2016 19:14

      Witam, dziękuję za uwagę. Już poprawiam :)

      Odpowiedz
      • Awatar
        Krzysztof Kwiatkowski

        25 lutego 2016 20:56

        Zdarza się :) ja już i tak przerobiłem kod by pojawiał mi się w Ustawieniach motywu. Wpis mi się bardzo podobał i czekam na inne.

        A może (bo nikt mi nie jest w stanie pomów) jak ostylować własny panel który można stworzyć jak „Opcje motywu” np. w sekcji Motyw. Mam na nim kilkanaście inputów i nagłówków. Teraz każdy element ma swoje style bo nie wiem jak je podpiąć globalnie (w osobnym pliku less/css) do takiego pliku custom_options.php.

        Odpowiedz
      • Awatar
        Michał Kortas

        26 lutego 2016 11:47

        Zapoznam się z tematem i spróbuję odpowiedzieć. Czy mógłbyś założyć odpowiedni wątek na http://webroad.pl/pytania ? Będzie prościej zmierzyć się z problemem na forum. Nie trzeba się rejestrować.

        Odpowiedz
  • Awatar
    Adam Foltyn

    20 kwietnia 2017 09:08

    Witam.
    Zauważyłem malutki błąd:

    public function ga_id_callback(){
    if(isset($this->options[‚ga_id’])) $ga_id = esc_attr($this->options[‚ga_id’]) <— Brak średnika
    echo '’;
    }

    Odpowiedz

Zostaw odpowiedź