Modyfikacje w WordPressie

Podczas prac nad nową szatą graficzną mojego bloga dokonałem kilku poprawek w działaniu systemu WordPress. Zdarzyło mi się już pisać o drobnych modyfikacjach przed laty, dlatego ten wpis będzie swego rodzaju uzupełnieniem i kontynuacją treści tam zawartych.

Nie zaśmiecaj kodu motywu

Nauczyłem się podczas prac nad nowym motywem dla bloga, by oddzielać motyw od rzeczy z nim niezwiązanych. W wielu internetowych poradnikach na temat WordPressa dostarczających drobne „kodziki” na zasadzie copy&paste znaleźć można wskazówkę, że warto je wrzucić do pliku functions.php motywu. Nie jest to dobre rozwiązanie — nie zaśmiecajmy kodu motywu!

Wszelkie drobnostki, drobne „fixy”, „tweaki” i ulepszenia, których dokonujemy na WordPressie, nie powinny znajdować się w plikach motywu, gdyż nie są z nim związane. Takie oddzielenie znacząco poprawia czytelność kodu, zwłaszcza jeśli tych modyfikacji jest więcej. Jak tego dokonać?

Wystarczy stworzyć własną wtyczkę. Jest to bardzo proste. W folderze wp-content/plugins tworzymy podfolder, na przykład o nazwie system-plugin. W środku umieszczamy plik o tej samej nazwie, ale z końcówką .php, na przykład system-plugin.php. Wymagane jest, by wrzucić do niego następujący kod:

<?php
/*
Plugin Name: Moja wtyczka systemowa
*/

Następnie włączamy wtyczkę i gotowe. Do pliku system-plugin.php możemy dopisać następnie dowolny kod. Jeśli modyfikacji jest dużo, warto je podzielić na kilka oddzielnych plików. Ja przygotowałem sobie trzy: wordpress.php — na kod zmieniający działanie WordPressa, wordpress-admin.php — na kod zmieniający zachowanie panelu administracyjnego systemu, features.php — na kod dodający nowe funkcje do witryny. Każdy z plików umieściłem w folderze system-plugin, a w głównym pliku wtyczki, system-plugin.php, każdy z oddzielnych skryptów PHP wczytuję tak:

<?php
/*
Plugin Name: Moja wtyczka systemowa
*/

include __DIR__ . '/features.php';
include __DIR__ . '/wordpress.php';
include __DIR__ . '/wordpress-admin.php';

Oczywiście nie chcę powiedzieć, że plik functions.php w motywie nie może istnieć. Jego rola jest jednak ściśle określona — powinien zawierać kod PHP, który jest związany z motywem. Rozpoznać, czy kod powinien znaleźć się w functions.php motywu czy nie, jest bardzo prosto. Wystarczy odpowiedzieć sobie na pytanie „czy gdy zmienię motyw na inny, nadal będę potrzebować tego kodu?”. Jeśli odpowiedź brzmi tak, nie powinien być on częścią motywu.

Moje modyfikacje systemu WordPress

Prawidłowe zajawki wpisów w kanale RSS

WordPress posiada funkcję znacznika „Czytaj więcej”. Umieszczony w treści wpisu sprawia, że na stronie głównej, na stronach kategorii i w archiwach miesięcznych zamiast całej treści wpisu, widzimy tylko jej fragment zakończony linkiem „Czytaj więcej”. Niestety owy znacznik nie jest respektowany w zajawkach kanału RSS. Poniższy kod zmienia to zachowanie w ten sposób, że jeśli wpis nie posiada własnej ręcznie określonej zajawki, jest ucinany w miejscu znacznika „Czytaj więcej”.

add_filter('get_the_excerpt', function($excerpt, $post){
	if (!$post->post_excerpt) {
		if (($position = mb_strpos($post->post_content, '<!--more-->')) !== false) {
			$excerpt = strip_tags(mb_substr($post->post_content, 0, $position));
		}
	}
	return $excerpt;
}, 11, 2);

Wykluczenie stron z wyników wyszukiwania

Domyślnie wbudowana w stronę opartą na WordPressie wyszukiwarka obejmuje swym zasięgiem nie tylko wpisy na blogu, lecz także strony statyczne. W kontekście mojej witryny nie ma to sensu, dlatego strony statyczne z wyszukiwarki wykluczam poniższym kodem.

add_filter('pre_get_posts', function($query){
	if ($query->is_search) {
		$query->set('post_type', 'post');
	}
	return $query;
});

Link „Czytaj więcej” bez przewijania treści strony

Domyślnie wspomniany link „Czytaj więcej” przewija treść strony do miejsca, gdzie się ona urywa w zajawce. Ja osobiście tego nie lubię, dlatego usuwam tę funkcję.

add_filter('the_content_more_link', function($link){
	return preg_replace('|#more-[0-9]+|', '', $link);
});

Kod pochodzi z oficjalnej dokumentacji WordPressa: Customizing the Read More.

Automatyczny metaznacznik <meta name="description">

Istnieje wiele wtyczek dla WordPressa poprawiających kod strony dla lepszego pozycjonowania. Dla mojej witryny wystarczający jest generowany automatycznie opis strony. Poniższy kod generuje opis na bazie pierwszych 300 znaków treści stron statycznych i wpisów. Dla pozostałych części serwisu — archiwów, kategorii i listy wpisów, używany jest opis strony określony w ustawieniach systemu WordPress. Kod metaznacznika jest automatycznie dodawany do strony.

add_action('wp_head', function(){
	if (is_single() or is_page()) {
		global $post;

		$description = apply_filters('get_the_content', get_post($post->ID)->post_content);
		$description = str_replace(["\r\n", '"', "\t"], [' ', null], strip_tags(mb_substr($description, 0, 300))) . '…';
		$description = do_shortcode($description);
	}
	else {
		$description = get_bloginfo('description');
	}

	echo '<meta name="description" content="', $description, '">', "\n";
}, 5);

Kod HTML systemu statystyk odwiedzin

Jeśli korzystasz z systemu śledzącego statystyki odwiedzin takiego jak Google Analytics bądź Matomo (dawniej Piwik), musisz umieścić na swojej stronie kod śledzący. Zamiast brudzić motyw, możesz umieścić go w swojej wtyczce systemowej. W głównym jej katalogu umieść plik HTML, na przykład o nazwie tracker.html z kodem śledzącym statystyk. Do kodu PHP wrzuć za to:

add_action('wp_footer', function(){
	if (!is_user_logged_in()) {
		include __DIR__ . '/tracker.html';
	}
});

Kod HTML systemu śledzącego zostanie umieszczony na końcu kodu strony (w stopce) tylko, jeśli autor witryny nie jest zalogowany w panelu administracyjnym.

Moje modyfikacje motywu

Style CSS dla edytora WYSIWYG, własna klasa dla <body>

Od 2010 roku WordPress umożliwia motywom określenie dodatkowych styli CSS dla edytora WYSIWYG. Dla własnej wygody dodałem sobie dodatkowe klasy CSS do znacznika <body>, by lepiej kontrolować wygląd podglądu treści.

add_filter('tiny_mce_before_init', function($settings){
	$settings['body_class'] .= ' contentsBox contentStyles';
	return $settings;
});
add_editor_style('style.min.css');

Powyższy hak tiny_mce_before_init umożliwia zmianę opcji konfiguracyjnych edytora TinyMCE. Warto zapoznać się z jego dokumentacją.

Automatyczny tytuł <title> i jego dopasowywanie

WordPress potrafi sam generować znacznik <title>, jednakże domyślnie tego nie robi dla zachowania kompatybilności wstecznej. Jeśli się go ładnie poprosi, nie tylko doda on tytuł strony, ale również umożliwi jego dopasowanie do własnych potrzeb, na przykład tak:

add_filter('document_title_separator', function(){
	return '—';
});
add_filter('document_title_parts', function($title_parts){
	if (is_search()) {
		$title_parts['title'] = sprintf('Wyszukiwanie: „%s”', get_search_query());
	}
	elseif (is_404()) {
		$title_parts['title'] = 'Błąd 404';
	}
	elseif (is_tag()) {
		$title_parts['title'] = 'Tag: ' . $title_parts['title'];
	}
	elseif (is_front_page()) {
		unset($title_parts['tagline']);
	}

	return $title_parts;
});

Powyższy kod zmienia separator poszczególnych elementów tytułu na długą pauzę (domyślnie jest to znak krótkiej pauzy) oraz skraca niektóre rozwlekłe określenia używane domyślnie.

Dopasowanie odnośnika „Czytaj więcej”

Używanie argumentu fukcji the_content() do określenia kształtu odnośnika „Czytaj więcej” jest nieefektywne, należy bowiem jego wartość zmienić w kilku miejscach motywu. Lepiej jest użyć do tego celu odpowiedniego haka.

add_filter('the_content_more_link', function(){
	return ' <a href="' . get_permalink() . '" class="more-link">Przeczytaj całość <span class="sr-only">wpisu „' . get_the_title() . '”</span></a>';
});

Przy okazji warto zadbać o dostępność dla osób używających czytników ekranowych, definiując treść linka w taki sposób, by była zrozumiała wyrwana z kontekstu. Zawartość dodatkowego znacznika <span> powinniśmy ukryć w sposób widoczny dla czytników ekranowych.

Dopasowanie kodu HTML stronicowania

Od 2014 roku WordPress posiada funkcję the_posts_pagination() generującą kod nawigacyjny stronicowania, przeznaczony do archiwów, stron kategorii i listy wpisów. Za pomocą poniższej konstrukcji dopasować można kod HTML generowany przez tę funkcję.

add_filter('navigation_markup_template', function($template, $class){
	if ($class == 'pagination') {
		return '<nav class="pagination"><h2 class="sr-only">Menu stron listy wpisów</h2>%3$s</nav>';
	}
	return $template;
}, 10, 2);

Ponownie dodajemy dodatkową informację, nagłówek, dla czytników ekranowych.