10 советов по оптимизации темы WordPress

Прелесть WordPress состоит в том, что его можно легко адаптировать для решения любых задач. Любому по силам расширить возможности системы, добавив пару строк кода. В данном уроке мы рассмотрим 10 способов, которые помогут улучшить тему WordPress. Все приведенные части кода нужно вставить в файл functions.php вашей темы.

1. Ограничиваем количество слов в цитате

Tему WordPress для онлайн журнала может легко испортить нерадивый (или чрезмерно активный) автор, который вставит слишком большой текст перед тегом more. Конечно, можно вручную исправлять цитаты в специальном поле. Но на сайте с сотнями записей и активным использованием тега more, ручное форматирование станет весьма трудоемким.  В данном случае поможет программное ограничение по количеству слов, которые будут выводиться в цитате:

add_filter('excerpt_length', 'ilc_excerpt_length');

function ilc_excerpt_length( $length ){
	return 10;
}

Здесь используется крючок WordPress, который вызывает функцию для разбора и (обычно) модификации данных перед сохранением их в базе данных или выводом на экран. В данном случае цитата будет ограничена 10 словами.

2. Добавляем фавиконку с помощью крючка WordPress

Крючки позволяют вставлять пользовательский код без изменения шаблона. Такой подход существенно улучшает гибкость проекта, потому что для изменения нужно только отредактировать функцию, привязанную к крючку. Например, можно добавить фавиконку на веб сайт без редактирования файла header.php, просто привязывая функцию к крючку wp_head:

add_action( 'wp_head', 'ilc_favicon');

function ilc_favicon(){
	echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />" . "\n";
}

Файл favicon.ico должен располагаться в корневом каталоге темы. В данном случае мы используем крючок действия, который является функцией, вызываемой в определенной точке в процессе выполнения кода ядра WordPress. Задействованный крючок  запускает привязанную функцию при загрузке страницы в браузере. Но другие крючки могут запускаться в момент сохранения записей, регистрации пользователей и так далее. Некоторый темы Wordpress имеют свои собственные крючки, наподобие крючков ядра, которые запускают функции  в определенные моменты.

3. Определяем Safari на iOS

В наши дни для мобильных версий  веб сайты используют другие техники. WordPress имеет безопасный способ для проверки мобильной версии браузера Safari, так что, можно распознать посетителя, который пользуется iPhone или iPad при посещении сайта.

WordPress устанавливает внутреннюю переменную $is_phone, и вы можете использовать ее для подключения альтернативной таблицы стилей, вывода определенного содержания, или показа другого видео формата. В примере используется переменная $is_iphone, и подключается другая таблица стилей  в зависимости от значения переменной.

add_action('wp_print_styles', 'ilc_enqueue_styles');

function ilc_enqueue_styles(){
	global $is_iphone;
	if( $is_iphone ){
		wp_enqueue_style('iphone-css', get_stylesheet_directory_uri() . '/iphone.css' );
	}
	else{
		wp_enqueue_style('common-css', get_stylesheet_directory_uri() . '/common.css' );
	}
}

Мы используем стандартную функцию WordPress wp_enqueue_style для добавления стилей к элементу страницы  head. Так как используется действие wp_print_styles, то WordPress будет использовать соответствующие стили при печати.

4. Удаляем элементы из раздела head страницы

WordPress выводит несколько дополнительных строк в раздел head. В частности, туда попадают мета тег generator, RSD ссылка и wlwmanifest,  которые не используются большинством пользователей.

<meta name="generator" content="WordPress 3.2.1">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml">

Некоторые блогеры рекомендуют удалить мета тег generator, чтобы никто не мог определить используемую версию WordPress.

Если вы не используете функционал XML-RPC, то можно удалять RSD ссылку (вторая строка в выше приведенном коде). Также, если вы не используете  Windows Live Writer, то можно удалить и третью ссылку.

Просто используйте следующий код:

add_filter('the_generator', create_function('', 'return "";'));

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

5. Перенаправляем фиды WordPress на FeedBurner

В WordPress имеется встроенный функционал фидов RSS. Но если вам нужна статистика о подписчиках, то лучше пользоваться сервисом, наподобие FeedBurner. Для перенаправления вашего фида на такой сервис используйте следующий код. Например, если вы попробуете перейти на http://www.smashingmagazine.com/feed, то будете перенаправлены на фид Smashing Magazine на FeedBurner.

add_action('template_redirect', 'ilc_rss_redirect');

function ilc_rss_redirect() {
	if ( is_feed() && !preg_match('/feedburner|feedvalidator/i', $_SERVER['HTTP_USER_AGENT'])){
		header('Location: http://feeds.feedburner.com/smashingmagazine');
		header('HTTP/1.1 302 Temporary Redirect');
	}
}

Замените http://feeds.feedburner.com/smashingmagazine на адрес URL вашего фида на сервисе.

6. Выводим миниатюру записи в фид

Чтобы побудить подписчика посетить ваш сайт, вместо пересылки содержания через фид RSS можно показать ему только цитату и миниатюру записи. Но WordPress не выводит миниатюры в фид RSS по умолчанию. Чтобы решить задачу, используйте следующий код. Также можно добавить код HTML.

add_filter('the_content_feed', 'rss_post_thumbnail');

function rss_post_thumbnail($content) {
	global $post;
	if( has_post_thumbnail($post->ID) )
		$content = '<p>' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</p>' . $content;
	return $content;
}

7. Показываем содержание только подписчикам RSS

Для увеличения количества подписчиков на фид RSS можно предлагать бонус, который будет доступен только им. Ниже приведенный набор создает новый короткий код, который генерирует контейнер для скрытия содержания от обычных посетителей сайта, но будет выводиться для подписчиков RSS.

add_shortcode( 'feedonly', 'ilc_feedonly' );

function ilc_feedonly( $atts, $content = null ) {
	if( is_feed() ) return '<p>' . $content . '</p>';
	else return;
}

8. Показываем содержание только зарегистрированным посетителям

Также можно создать содержание, доступное только зарегистрированным посетителям сайта. Ниже приведенный набор создает новый короткий код, который генерирует контейнер для скрытия содержания от обычных посетителей сайта, но будет выводиться для зарегистрированный пользователей.

add_shortcode( 'loggedin', 'ilc_loggedin' );

function ilc_loggedin( $atts, $content = null ) {
	if( is_user_logged_in() ) return '<p>' . $content . '</p>';
	else return;
}

9. Выводим ссылки для распространения записи по социальным сетям

Если по каким-либо причинам вы не хотите использовать стандартные кнопки социальных сетей для распространения записи, то вы можете добавить ваши собственные ссылки в код, приведенный ниже (например, чтобы использовать с другими иконками).

Здесь происходит фильтрация содержания с помощью функции the_content. Но, в отличие от задач ограничения длины цитаты или удаления мета тега generator, мы не изменяем его, а дополняем нашими ссылками. Данный фильтр возвращает оригинальное содержание записи, дополненное ссылками на социальные сети.

add_filter( 'the_content', 'ilc_share' );

function ilc_share( $content ) {
	global $post;
	$postlink  = get_permalink($post->ID);
	$posttitle = get_the_title($post->ID);
	$html = '<ul class="share-entry">';
	// Twitter
	$html .= '<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Share on Twitter</a></li>';
	// Facebook
	$html .= '<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Share on Facebook</a></li>';
	// LinkedIn
	$html .= '<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">Share on LinkedIn</a></li>';
	// Digg
	$html .= '<li><a class="share-digg" title="Share on Digg" rel="external" href="http://digg.com/submit?url=' . $postlink . '">Share on Digg</a></li>';
	// StumbleUpon
	$html .= '<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">Share on StumbleUpon</a></li>';
	// Google+
	$html .= '<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Share on Google+</a></li>';
	$html .= '</ul>';
	return $content . $html;
}

Данный код добавляет ссылки и в записи и на страницы архива (такие как, категории и страницы меток). Если вы хотите ограничить их появление только записями, то нужно добавить следующий код перед  global $post;:

if( !is_singular() ) return $content;

Ссылки будут появляться только при посещении пользователем записей.

10.  Добавляем логотип на страницу регистрации

Чтобы добавить логотип на страницу регистрации, нужно воспользоваться крючком login_head, который выполняет привязанные функции в элементе head страницы регистрации. Мы делаем здесь два действия: изменяем логотип и ссылку с него.

add_action( 'login_head', 'ilc_custom_login');

function ilc_custom_login() {
	echo '<style type="text/css">
	h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/login-logo.png' . ') !important; margin-bottom: 10px; }
	padding: 20px;}
	</style>
	<script type="text/javascript">window.onload = function(){document.getElementById("login").getElementsByTagName("a")[0].href = "'. home_url() . '";document.getElementById("login").getElementsByTagName("a")[0].title = "Go to site";}</script>';
}

Код CSS заменит логотип WordPress на ваш. Вы можете изменить путь к изображению в четвертой строке кода, чтобы он соответствовал структуре вашей темы.

В дополнение, JavaScript изменяет ссылку, которая будет вести не на сайт wordpress.org, а на вашу главную страницу.

Заключение

В данном уроке приводится много замечательных способов настройки вашей темы WordPress. Но гораздо важнее то, что вы теперь можете комбинировать их сами. Например, можно добавить ссылки на социальные сети в фид, или добавить туда ваш логотип, или полностью изменить внешний вид страницы регистрации с помощью CSS.

Крючки и фильтры являются очень эффективным инструментом для настройки темы, нужно ли записывать что-то в базу данных или выполнять код в браузере посетителя. Вы можете глубже ознакомиться с крючками и фильтрами в WordPress Codex.

• Комментарии