CMSWordPress

#3 Tworzenie wtyczki WordPress. Haki filtrów

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

Poprzednim wpisem na temat haków akcji pokazałem Ci, w jaki sposób stworzyć prostą wtyczkę, umieszczającą kod Google Analitics na witrynie WordPress. Dzisiaj chciałbym Ci pokazać, jak skorzystać z filtrów, na przykładzie kolejnego modułu, umieszczającego reklamy Google Ansense w treści każdego pojedynczego artykułu.

Projekt na GitHub Zapytaj na forum

Zapraszam Cię do lektury trzeciej części cyklu Tworzenie wtyczki WordPress.

Kursy wideo WordPress

Podstawowy szkielet wtyczki

Jak już dobrze wiesz, należy zacząć od stworzenia katalogu i pierwszego pliku PHP. W moim przypadku wtyczka otrzyma nazwę wbrd_ads.

<?php 
	/*
	Plugin Name: WEBroad ADS
	Plugin URI: http://webroad.pl/cms/6007-tworzenie-wtyczki-wordpress-3 
	Description: Prosta wtyczka umieszczająca reklamę Google AdSense w treści wpisu
	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
	*/
?>
<?php 
	class wbrd_ads { //... 
	}	
?>

Kod reklamy AdSense

Żeby nie rozwlekać kodu, zakładam, że będzie to reklama automatycznie dostosowująca rozmiary, ładowana asynchronicznie, a w jej kodzie dwiema zmiennymi pobietanymi z ustawień wtyczki będą identyfikatory klienta (ad-client) i reklamy (ad-slot).

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
	 style="display:block"
	 data-ad-client="ca-pub-111111111111111"
	 data-ad-slot="0000000000"
	 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Metoda wyświetlająca kod reklamy

Analogicznie do ostatniej wtyczki, stwórz teraz metodę, która zwracać będzie kod reklamy.

public function ad_code() {
	return
	'<p>
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<ins class="adsbygoogle"
			 style="display:block"
			 data-ad-client="ca-pub-111111111111111"
			 data-ad-slot="0000000000"
			 data-ad-format="auto"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</p>';
}

Metoda edytująca treść wpisu

Masz już kod reklamy, za pomocą któregoś z haków akcji mógłbyś go teraz przypiąć w różnych miejscach witryny. Dzisiaj zajmiesz się filtrowaniem treści, dlatego dopisz metodę, której argumentem będzie cała treść wpisu, a jej ciałem kod edytujący kontent.

public function edit_content($content) {
	$my_ad = $this->ad_code();
	return $content.$my_ad; 
}

Dopinanie się do haka

Tym razem skorzystasz z funkcji add_filter, oraz haka o nazwie the_content. Spójrz, jakie to proste.

public function __construct() {
	add_filter( 'the_content', array( $this, 'edit_content' )); 
}

Pierwszy efekt

Reklama pojawia się pod wpisem.

Responsywna reklama Google AdSense

Tworzenie panelu ustawień

Zadowolony z dotychczasowej pracy? I bardzo dobrze!

Korzystając z wiedzy zdobytej w drugiej części cyklu, stworzysz teraz prosty panel ustawień wtyczki.

Dodawanie odnośnika w menu

Ten kod powinien być Ci już znajomy.

public function add_page() {
	add_options_page(
		'Settings Plugin', 
		'WEBroad ADS', 
		'manage_options', 
		'ads_settings_page', 
		array( $this, 'create_page' )
	);
}

Inicjacja formularza ustawień

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

Rejestracja sekcji i pól formularza

Zauważ, że ta wtyczka posiada dwa pola tekstowe.

public function page_init() {        
	register_setting(
		'ads_options',
		'ads',
		array($this, 'sanitize')
	);

	add_settings_section(
		'ads_section', 
		'Zarządzanie reklamą AdSense',
		array( $this, 'section_callback' ),
		'ads_settings_page'
	);  

	add_settings_field(
		'ads_client',
		'ID klienta (ad-client)',
		array( $this, 'ads_client_callback' ),
		'ads_settings_page',
		'ads_section'      
	);

	add_settings_field(
		'ads_slot',
		'ID reklamy (ad-slot)',
		array( $this, 'ads_slot_callback' ),
		'ads_settings_page',
		'ads_section'      
	);	

}

Metoda czyszcząca

Nie pozwól wpisać niechcianego kodu!

public function sanitize( $input ) {
	$new_input = array();
	if( isset( $input['ads_slot'] ) )
		$new_input['ads_slot'] = sanitize_text_field( $input['ads_slot'] );
	if( isset( $input['ads_client'] ) )
		$new_input['ads_client'] = sanitize_text_field( $input['ads_client'] );
	
	return $new_input;
}

Callbacki

Dodaj krótki opis, zdjęcie poglądowe oraz strukturę pól formularza.

public function section_callback() {
	echo '<p>Skonfiguruj swoją reklamę. Potrzebne informacje znajdziej w kodzie reklamy, wygenerowanym w Google AdSense.</p>';
	echo '<img src="http://ss.webroad.pl/webroad_20160226201530.png" alt="Pomoc">';
}

public function ads_slot_callback() {
	if(isset( $this->options['ads_slot'] )) $ads_slot = esc_attr( $this->options['ads_slot']);
	echo '<input type="text" id="ads_slot" name="ads[ads_slot]" value="'.$ads_slot.'" placeholder="0000000000">';
}

public function ads_client_callback() {
	if(isset( $this->options['ads_client'] )) $ads_client = esc_attr( $this->options['ads_client']);
	echo '<input type="text" id="ads_client" name="ads[ads_client]" value="'.$ads_client.'" placeholder="ca-pub-111111111111111">';
}

Rozbudowa konstruktora

Pamiętałeś o podpięciu się pod odpowiednie haki?

public function __construct() {
	add_filter( 'the_content', array( $this, 'edit_content' )); 
	add_action('admin_menu', array( $this, 'add_page' ));
	add_action('admin_init', array( $this, 'page_init' ));
}

Aktualizacja metody zwracającej kod reklamy

W kodzie reklamy musisz jeszcze podpiąć parametry pobierane z bazy danych.

public function ad_code() {
	$this->options = get_option('ads');
	return
	'<p>
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<ins class="adsbygoogle"
			 style="display:block"
			 data-ad-client="'.$this->options['ads_client'].'"
			 data-ad-slot="'.$this->options['ads_slot'].'"
			 data-ad-format="auto"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</p>';
}

Nadążasz? Jeśli masz problemy ze zrozumieniem kodu dotyczącego ustawień, zapraszam Cię do prześledzenia poprzedniego wpisu.

Tworzenie obiektu

Pozostało Ci jeszcze stworzenie nowego obiektu klasy wbrd_ads.

$ads_settings_page = new wbrd_ads();

Wygląd panelu ustawień wtyczki

Zajrzyj teraz do panelu ustawień wtyczki. Podoba Ci się?

Panel ustawień wtyczki

Modyfikacje

No cóż. Udało się! A właściwie – Zrobiłeś to! Reklama wyświetla się bezpośrednio pod wpisem. Mam jednak dla Ciebie jeszcze kilka pomysłów do wdrożenia.

Co Ty na to, aby reklama była wstawiana zaraz po miejscu, gdzie wstawiłeś rozdzielnik Read More? Dodatkowo pokażę Ci, jak wyświetlić reklamę tylko wtedy, kiedy otwarty jest pojedynczy wpis, a nie za każdym razem – nawet w widoku strony zbiorczej.

Funkcja is_single

Druga kwestia jest dosyć prosta. API WordPressa dostarcza specjalną funkcję, która zwraca true, jeśli wyświetlany jest tylko jeden, konkretny wpis, w przeciwnym wypadku zwraca false.

Zmodyfikuj więc metodę edit_content.

public function edit_content($content) {
	$my_ad = $this->ad_code();
	if(is_single()) {
		return $content.$my_ad;
	}
	else return $content;
}

Super! Teraz reklama jest widoczna wyłącznie po otwarciu całego artykułu.

Miejsce „Read More”

Miejsce, otagowane przez Ciebie we wpisie jako Read More, w kodzie wygląda następująco.

<span id="more-1"></span>

Po raz kolejny zmodyfikuj metodę edit_content.

public function edit_content($content) {
	$my_ad = $this->ad_code();
	if(is_single()) {
		return str_replace('<span id="more-1"></span>', '<span id="more-1"></span>'.$my_ad, $content);
	}
	else return $content;
}

Sprawdź, jak teraz zachowuje się reklama.

Jest widoczna wewnątrz treści, jeśli wstawiłeś tag Read More.

Reklama po Read More

Natomiast jeśli tego tagu nie ma, nic się nie pojawia.

Brak reklamy we wpisie

Wygląda to naprawdę dobrze!

Podsumowanie

Kolejny duży krok za Tobą. Całość jak zwykle dostępna jest na GitHub. Gdybyś miał pytania, co do powyższego kodu, zapraszam Cię na forum WEBroad. W kolejnej części opiszę tworzenie wtyczki, która dodaje możliwość wstawiania własnych widżetów na stronie.

Projekt na GitHub Zapytaj na forum

Tagi:hakihookspluginWordPresswtyczka wordpress

komentarze 2

Zostaw odpowiedź