remove_action( 'wp_head', 'locale_stylesheet', 10 );
remove_action( 'embed_head', 'locale_stylesheet', 30 );
remove_action( 'wp_head', 'wp_print_head_scripts',  9 );
remove_action( 'wp_head', 'wp_print_styles', 8 );

add_action( 'wp_footer', 'locale_stylesheet', 10 );
add_action( 'wp_footer', 'locale_stylesheet', 30 );
add_action( 'wp_footer', 'wp_print_head_scripts', 9  );
add_action( 'wp_footer', 'wp_print_styles', 9 );

Правда от этого все становится только хуже. При загрузке страницы вы видите сначала голый HTML, а лишь спустя некоторое время подгрузку и рендеринг стилей.

<code>...</code>

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

Но по-умолчанию для WP Super Cache нет разницы, какие сookie установлены у пользователя. Он будет отдавать ту же, закешированную ранее страницу, поскольку ориентируется только на уникальный УРЛ этой страницы, а он никак не изменяется после установки нами куки. В результате мы получим такую же страницу, какой она была до установки куки. Оказалось, что сам будучи плагином, WP Super Cache поддерживает плагины внутри себя и мы можем написать свой, который бы учитывал нашу ситуацию.

<code>...</code>,Wordpress

При разработке адаптивных страниц очень удобно видеть текущую ширину окна браузера на странице. При этом нужно чтобы эта величина изменялась по мере изменения ширины окна. Вот небольшой javascript-код, который помогает решить проблему. Я его вставляю в подвал страницы и вижу текущую ширину окна. Также удобно при этом использовать плагин Firebug для Firefox в режиме отдельного окна, так как при уменьшении браузера до 320px по ширине увидеть HTML-код в Firebug’е нереально.


<code>...</code>

Наша цель

При отображении списка записей на странице намного информативнее выводить возле текста записи еще и картинку, которая используется в ней. Например так, как изображено на картинке

Пример вывода записей с миниатюрами в WordPress

Пример вывода записей с миниатюрами в WordPress

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

Алгоритм решения задачи

Все довольно просто — достать картинку из содержимого записи и отобразить ее возле выдержки из этой же записи. Реализовать «доставание» картинки можно разными способами: парсить контент записи на наличие изображения, доставать картинку из блока «Миниатюра записи» (но перед этим придется еще и добавлять ее к каждой записи), наконец доставать ее из «Дополнительных полей», но опять-таки ее туда еще нужно и добавлять, что не совсем удобно. Возьмемся за самый простой вариант — парсинг контента.

<code>...</code>,Wordpress

WordPress функция register_sidebar() очень часто используется на практике при создании шаблонов WordPress. В рубрике <code>…</code> я собираю именно такие функции, которые часто использую. Собственно для того, чтобы они всегда были под рукой я их туда и добавляю.

Пример регистрации сайдбара

  1. Пишем функцию вызывающую регистрацию сайдбара. В ней передаем параметры виджетов, которые будут в этом сайдбаре
  2. Добавляем вызов этой функции в момент инициализации (возникновения) виджетов Wordress
  3. Здесь приведен пример отображения содержимого созанного нами сайдбара. Вызов этой функции нужно поместить в место, где вы хотите отображать ваш сайдбар
// 1
function stepasyuk_widgets_init() {
    register_sidebar(array(
        'name' => 'Stepasyuk sidebar',
        'id' => 'stepasyuk-sidebar',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => "</div>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ));
}
// 2
add_action('widgets_init', 'stepasyuk_widgets_init');

// 3
if (function_exists('dynamic_sidebar'))
    dynamic_sidebar('stepasyuk-sidebar');

<code>...</code>,Wordpress

Данную функцию я использую очень часто для отладки. Особенно актуально, когда сайт работает и его посещают пользователи. Чтобы дампы данных не вываливались в браузер, удобнее отсылать их на свою почту.

function dump($var)
{
    mail( 'developer@example.com', 'Website dump', print_r( $var, true ) );
}

Еще одна маленькая, но очень полезная функция WordPress — regexp вырезающий картинку из контента.This function I use very often for debugging. Especially it is actual when the site is working and it is visited by users. To dump of the data is not spilling into the browser, it is more convenient to send them to your mail.

function dump($var)
{
    mail( 'developer@example.com', 'Website dump', print_r( $var, true ) );
}
<code>...</code>,Wordpress

Более короткий синоним функции qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage(); что используется в популярном плагине qTranslate

if( function_exists( 'qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage' ) ):

    function q_translate( $s )
    {
        return qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage( $s );
    }

endif;

// Пример использования
$phrase = '<!--:ru-->перевод<!--:--><!--:en-->translation<!--:-->';

echo q_translate( $prhase ); 

Shorter synonym of function qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage(); which is used in popular plugin qTranslate

if( function_exists( 'qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage' ) ):

    function q_translate( $s )
    {
        return qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage( $s );
    }

endif;

// Example of use
$phrase = '<!--:ru-->перевод<!--:--><!--:en-->translation<!--:-->';

echo q_translate( $prhase ); 
<code>...</code>

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

Задача решается в четыре этапа:

  1. Написать HTML-код формы и полей для загрузки изображений
  2. Подключить скрипт встроенного загрузчика изображений WordPress
  3. Настроить поведение загрузчика изображений
  4. Написать PHP-код сохраняющий  данные из полей формы
<code>...</code>,Wordpress

Сегодня потребовалось создать анимацию добавления товара в корзину. После нажатия на «Добавить в корзину» картинка товара должна была пролететь по странице и попасть в блок со списком добавленных товаров. Решение оказалось совсем несложным, достаточно было использовать метод .animate(); на jQuery. Если совсем коротко, то данный метод постепенно изменяет любые CSS-свойства указанного объекта (узла в контексте DOM или просто HTML-блока, выражаясь понятным языком), которые можно задать числом.

$("#target").animate( CSS-свойства, [Продолжительность,] [Облегчающая функция,] [Колбек] );

CSS-свойства — список CSS-свойств и их конечных значений, которые плавно получит объект. Можно задать так {‘свойство_1’ : ‘значение’, ‘свойство_2’ : ‘значение’} Это единственный обязательный параметр.
Продолжительность — время в миллисекундах за которое произойдут все изменения.
Облегчающая функция — строчный необязательный параметр. Определяет способ вычисления скорости изменения свойств объекта. Сам не погружался в дебри, лишь понял, что по-умолчанию доступно значение ‘swing’. Для того чтобы появилась возможность использовать другие значения, нужно использовать jQuery-плагины, в первую очередь из набора jQuery UI.
Колбек — Сallback он и в Африке Сallback.

Логично, что заставить объект лететь по странице может плавное изменение координат его размещения или отступов.


Код примера:



<code>...</code>

Плагин WordPress MU Domain Mapping позволяет использовать собственные доменные имена вместо стандартных субдоменов pupkin.example.com или путей example.com/pupkin на пользовательских блогах сетки WPMU. То-есть, допустим, пользователь хочет вместо своего pupkin.example.com использовать зарегистрированный им домен pupkin.ru С помощью этого плагина такое не сложно реализовать.

Установка
Здесь есть некоторые особенности, которые отличают данный плагин от большинства и установка требует не только скачать и активировать его.

  1. Скачайте и распакуйте плагин, файл domain_mapping.php разместите в папке /wp-content/mu-plugins. Если у вас еще нет такой, то создайте ее — это специальная директория для плагинов работающих в Multi User версии WordPress. Плагины размещенные в ней попадают в категорию Must-Use и работают всегда, не предоставляя возможности подключать/отключать их через админку.
  2. Файл sunrise.php разместите в корне папки /wp-content
  3. В файл wp-config.php добавьте такую строку
    define( 'SUNRISE', 'on' );

<code>...</code>,Wordpress