Блог о WordPress от Тараса

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

Теперь поделюсь с вами подборкой небольших фишек, найденных в интернете на буржу-сайте, которые можно сделать с чистой (или обновлённой) установкой WP 2.6, дабы жить было проще и веселее.

Полезность 1. Измените папку по умолчанию для загрузки изображений

По умолчанию, как и прежде, WordPress будет помещать все изображения в папку wp-content/uploads. Но вы можете указать любое другое место, в том числе и поддомен для хранения картинок. Это сократит урл к ним, а так же обезопасит вас от потери файлов при обновлении блога. И при бэкапе вам не надо будет копировать весь архив картинок, а лишь рабочие файлы блога и плагинов.

Так же стоило бы убрать галочку перед “Сортировать загруженные файлы в папках по месяцу и году”.

Полезность 2. Удалите лишний код из шапки темы

Про это писано и переписано и даже есть отдельные плагины. Речь естественно об указании WordPress’ом в шапке (header) сайта своей версии, что является буквально вызовом хакерам - вот я такой весь не обновлённый и дырявый, ломайте меня сколько влезет.
Чтобы удалить строку
<meta name="generator" content="WordPress 2.х" />, добавьте в файл functions.php, своей темы, следующее:
<?php remove_action('wp_head', 'wp_generator'); ?>

Полезность 3. Запретите людям просматривать содержимое ваших папок

Наверное, вам попадались сайты, зайдя на которые вместо стандартной html-страницы, вы видели некое подобие проводника со списком файлов и папок. Эти странички генерятся самим сервером, если он не находит индексный файл (index.php/index.html и т.п.). Чтобы такого не было (а ведь это тоже подсказка хакерам, если узнать, например, набор ваших плагинов, то можно спокойно попытаться провести XSS или SQL-инъекцию), достаточно в корне блога, в файле .htaccess добавить строку
Options All -Indexes

Полезность 4. Убираем шаблоны для Windows Live Writer

Для тех, кто не пользуется WLW или не использует встроенный превью (live preview), стоит добавить в functions.php следующую строку, чтобы не выводить в шапке ссылку на манифест:
<?php remove_action('wp_head', 'wlwmanifest_link'); ?>

Полезность 5. Отключаем контроль версий в WordPress 2.6

Если вы не в курсе, то в новой версии WordPress появился wiki-style контроль версий, позволяющий отслеживать все изменения поста/страницы на всём времени его существования. Так вот, полезность подобной фичи для блогов с одним автором довольно сомнительна, зато появляются дополнительные строки в таблице wp_posts при каждой попытке изменить/добавить текст.
Лечится это либо плагином No Revisions, либо одной строкой в wp-config.php:
define('WP_POST_REVISIONS', false);

Полезность 6. Перенос папки плагинов и шаблонов

В WordPress 2.6 у нас появилась возможность перенести папку wp-content куда угодно. Чем это полезно?
Да тем, что при обновлении и “перезаливке поверх” самого дистрибутива WP вы не потеряете свою тему, если она, например как у меня, называется default.
Тут, правда, стоит понимать, что большинство плагинов, не адаптированных под 2.6, могут “тупо” перестать работать, но если вы всё же решите перенести wp-content, то добавьте в wp-config.php следующий код:
define(’WP_CONTENT_DIR’, ‘http://www.ваш_сайт.ру/hidden-folder/wp-content’);

Полезность 7. Google XML Sitemap - изменение настроек

Если вы пользуетесь плагином для создания Google Sitemep, стоит подумать о переключении настроек генерации в “ручной” режим.

В автоматическом режиме сайтмап пересоздаётся каждый раз, когда вы изменяете или удаляете пост, а полное пересоздание xml-sitemap для блога с нормальным количеством записей - довольно ресурсоёмкая операция, которая будет “тормозить” публикацию поста, пока не будет обновлён сайтмап.
Например, у меня на блоге, на создания файла уходит 13 сек и 10 Мб памяти, что не так уж мало, учитывая, что блог содержит около 80 записей. Представляю, сколько времени и памяти требуется, блогам с 500+ постов.
В ручном режиме вам потребуется запускать выданную вам в настройках ссылку, которую можно повесить на выполнение в cron на раз в сутки. Или, если не умеете/не хотите возиться с Cron, воспользуйтесь услугами сервиса аля CronJob.

Вот такие вот полезные мелочи, надеюсь что-то было полезно не только мне.

Update: Аха-ха, вот что значит не читать долго рсс-ленту. После публикации наткнулся на перевод той же самой статьи в блоге у Дмитрия Донченко, а из комментариев и ещё один перевод обнаружился, так что прошу прощения за “баян”, но больше - не меньше)

Думаю многим авторам тем будет интересна следующая новость.

Давным давно существовал каталог тем по адресу http://themes.wordpress.net/, где можно было всегда найти тему практически на любой вкус, но по неизвестным причинам уже продолжительное время на сервисе закрыта возможность выкадывать новые темы.

Теперь стало ясно с чем это связано - разработчики WordPress, воодушевленные удобством поиска плагинов в http://wordpress.org/extend/plugins/, решили запустить аналогичный по функционалу сервис и для тем/шаблонов.

Как не сложно догадаться, новый каталог тем располагается по адресу http://wordpress.org/extend/themes/.

Что же получают веб-дизайнеры? Судя по заявленой информации - авторам тем совершенно не требуется разбираться в таких вещах как Subversion, достаточно залогиниться на сайте wordpress.org и перейти на страницу загрузки (upload page), скопировать туда zip-архив со своей темой, а сервис позаботится об остальном.

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

Для желающих добавить тему в каталог необходимо выполнить следующие требования:

1. Все файлы темы должны находиться в одном единственном zip-архиве.
2. В архиве должен быть файл style.css, содержащий:
   • Название темы. Должно быть уникально для каталога.
   • Тэги. Например, цветовая схема, виджет-совместимая, количество колонок. Посмотрите существующие тут.
   • Версию темы. В формате x.x или x.x.x, уникальную для данной темы.
   • Описание css-классов для положений картинок: mg.centered, img.alignright, img.alignleft, .alignright, .alignleft
3. Скриншот темы должен называться screenshot.png и действительно должен быть скриншотом темы, а не заставкой или ещё чем.
4. Лицензия должны быть GPL (на русском).
5. Запрещены скрытые, рекламные и спонсорские ссылки. Ссылка на сайт автора темы допускается.
6. Тема должна быть вашей собственной разработкой.

Если что-то будет указано не верно, то вам об этом сообщат в виде ошибки. После успешной загрузки на сервер, тема встанет на очередь к модератерам, которые убедятся, что нет никаких косяков. Как только тема попадёт в каталог - вас уведомят письмом.

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

А теперь немного корыстной информации, которая возможно подстягнёт авторов тем к загрузке своих работ на сервис - на данный момент в каталоге всего 3 темы. 2 которых скачали 750+ раз за прошедший день!

Не забывайте, что рядом с каждой темой болтаются ссылки с названием "Author HomePage" и "Theme HomePage", а это 2 ссылки с самого WordPress.org.

К примеру сама корневая страница каталога имеет ПР8, т.ч. можно, если повезёт вылезти в какие-нибудь топы, словить не плохие бэклинки.

Удачного размещения на новом сервисе.

Update: Пока я писал пост, тем стало 5, а общее количество скачиваний перевалило за 1800. Так что торопитесь!

В комментариях к последней статье “Виджеты - это очень просто!” попросили рассказать, как же сделать тему виджет совместимой. Честно говоря, я думал, что на офф.сайте это описано, а как выяснилось написано то оно написано, да не совсем там.

В общем, отрыл я пошаговое описание того, как нужно “грамотно” виджетизировать свою тему, которое ниже предлагаю вам в своём переводе с небольшими корректировками и дополнениями.

---

Шаг 1. Редактируем functions.php

Сперва необходимо удостоверится в том, что в папке с вашей темой находится файл function.php, а если таковой отсутствует, то создайте его сами.
Следующим шагом нам необходимо определиться - как у нас формируется сайдбар. Откройте свой sidebar.php и попытайтесь вникнуть в код и понять, что используется для формирования сайдбара - списки (<ul>) или дивы (<div>).
Например, у Артема сайдбар стандартный, из списков и заголовков второго уровня, что видно по коду:

О себе

      ....
      


Рубрики

    ....
 

А вот у Максима напротив, сайдбар состоит из последовательных блоков div, обрамленных изображениями “скругленных углов”, а уже внутри дива находится контент виджета. Кусок кода, чтобы было (возможно) проще понять, о чём я говорю:

Самое комментируемое

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

Достаточно в functions.php добавить блок кода, чтобы в итоге получить сайдбар на основе списков с заголовками 2 уровня:

Если файл functions.php вы не создавали с нуля, то советую сперва просмотреть его на наличие указанного выше кода, чтобы не получилось дублирования.

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

 '
',
     'after_widget' => ''

,
     'before_title' => '
',
     'after_title' => '

',
    ));
?>

Дам небольшие пояснения, строка, передаваемая в параметр ‘before_widget’ будет выводится как начало любого виджета, а ‘after_widget’ - конец. Т.е. тут мы задаём тэги обрамления виджета. ‘before_title’ и ‘after_title’ соответственно определяют обрамление заголовка виджета (это все те “Рубрики” и “Самое читаемое”). В итоге мы получим дивный сайдбар с заголовками 4 уровня.

Для особо замороченных существует возможность получить при выводе виджета его id (генерится из имени виджета) и класс (получается в процессе обработки виджета). Т.к. ‘before_widget’ пропускается через sprintf, то в любое место строки можно передать %1$s и %2$s, чтобы при выводе получить соответствующие параметры. Надеюсь “замороченные” поняли, о чём я.

Шаг 2. Проверяем сайдбар и добавляем на него виджеты

Чтобы понять работает наш сайдбар или нет, нужно добавить на него несколько виджетов.
Идём в админ панель, далее “Внешний вид > Виджеты” и лицезреем (или нет, если забыли сохранить и/или загрузить functions.php в свою тему) панель сайдбара, куда можно (и даже нужно) натаскать пару-тройку виджетов. И главное нажать “Сохранить”, после чего перейти к третьему шагу.

Шаг 3. Добавление сайдбара в шаблон

Ну и наконец-то то, ради чего всё делалось - подключение сайдбара в шаблон.
Тут есть простой и очень простой способ. Оба заключаются в редактировании файла sidebar.php вашей темы.
Простой способ:
Вставить сразу после строки <div id=”sidebar”> следущий код

а перед последним </div> код - <?php endif; ?>
Очень простой способ заключается в том, чтобы понять для себя раз и навсегда, что никто уже не использует шаблоны без виджетов и, стерев предварительно ВЕСЬ код из sidebar.php, скопипастить туда:

Чем меньше кода в подключаемом файле, тем быстрее у нас всё работает (хотя на таком уровне это конечно “мёртвому припарки”, но всё же).

Теперь заходим в свой блог и наблюдаем работающие виджеты.

---

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

И ещё, я думаю - писать пост про создание темы с несколькими виджетами или нет? Пригодится тебе такая статья, читатель, или нет?

“Не знание технологий не освобождает от…”, не, не то. “А я вот сделал, а оно не работает…”.

К чему это я? Ах да, в последнее время ко мне несколько разных человек обратились примерно с одним и тем же вопросом:
“Почему, после того как я добавил в sidebar.php код кнопки/баннера/ссылки, ничего не изменилось и я их не вижу?!”
На что я сразу выдаю контр-вопрос (нет-нет, я не еврей):
“А вы используете в своей теме виджеты?!”

Просто не все осознают, что всё что находится ниже строки:
if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() )
в sidebar.php будет показано ТОЛЬКО в том случае, если вы не включили ни одного виджета. В противном случае будут отображаться ваши настройки из “Внешний вид > Виджеты”.

Обычно после того, как я это объясняю, следует вопрос - “Ну и как мне поместить свой код в сайдбар/виджет?!”, да очень просто - если это обычный хтмл-код (а это в 90% случаев баннеры и стандартные ссылки/кнопки), то достаточно добавить стандартный текстовый виджет и поместить в него готовый код.

Но что делать, если виджет должен выводить результат выполнения какой-то функции? И ведь действительно, почти все “мощные” плагины, такие как ‘Popularity Contest‘ (русская версия), позволяют получать обработанную информацию из своих функций. Например, akpc_most_popular - самые популярные, akpc_most_popular_in_cat - самые популярные в какой-то категории и т.д.

Да, я знаю КАК можно сделать свой виджет, путём редактирования functions.php, но даже мне порой бывает лень это делать, а что говорить о людях, для которых внести изменения в файл темы (причём не просто копи-паст, а ещё и осмысленное редактирование) - это нечто равносильное тасканию пятидесяти килограммовых мешков?

Для таких страдальцев нашёлся чудо плагин Custom Function Widgets (скачать), авторства Kaspars Dambis из Латвии.

Как это работает.

1. Скачиваете и устанавливаете как и любой другой плагин.
2. После активации в меню “Внешний вид > Виджеты” появится новый раздел “Custom Function Widgets”, где вы можете указать необходимое количество настраиваемых виджетов.



3. Теперь перетащите один из “Custom Function” плагинов в свой сайдбар и нажмите кнопку настройки.
4. Введите в поле Function name имя нужной функции (например, st_related_posts, чтобы вывести связанные посты, при помощи плагина Simple Tags) и жмём “сохранить”.
5. Вуаля, если всё сделали правильно, то можем полюбоваться на результат в сайдбаре блога.

Теперь объясню какие поля в настройках за что отвечают:
Widget title - заголовок виджета. Он будет показан при выводе (если вы специально не отключите, о чём ниже), а так же это название будет видно в панели управления виджетами.
Function name - имя функции. Указывается без кавычек и скобок.
Function variables - переменные, передаваемые в функцию. Если функция для работы требует параметры, то указывайте их тут. Важно сохранять последовательность переменных, а так же перечислять переменные через запятую, если их несколько.
HTML before и HTML after - хтмл код, который будет выводиться перед и после вашей функции. Обычно это обрамление тэгами списков, ну или возможно подключение какого-нибудь java-script.
Галочка Remove Widget title from output отключает вывод заголовка виджета в сайдбар, а Remove the default widget wrapper - отключит разрывы между виджетами.

В общем - пробуйте и пишите отзывы тут или сразу автору плагина, который очень оперативно ответил и исправил найденный мною баг. Ещё раз ссылка на скачку плагина.

За последнее время сразу несколько человек поинтересовались у меня, а не в курсе ли я, как делать выпадающие меню в WordPress? Я честно отвечал “Нет”, потому что с содроганием вспоминал, как когда-то, на заре изучения web-кодинга, пытался сделать более-менее нормальное выпадающее меню. Триста раз проклял я тогда и java-script, и html, и, конечно же, все браузеры.

Но раз люди спрашивают, то появляется жгучее желание им помочь, вот и полез раскапывать, как дела обстоят сейчас и что новенького умные дядьки намутили, и даже, знаете ли, нашёл. Причём нашёл и очень сильно удивился тому, как это было сделано - вот что значит мало практиковать вёрстку и работать с CSS, потому что, по сути, для того, чтобы намудрить ОТЛИЧНОЕ выпадающее меню, достаточно знать:
а) как делать ненумерованные списки в html (<ul></ul>)
б) уметь копипастить файл-стилей

Ну что же, если эти два пункта и то вызывают у вас сомнения, то буду предельно доступно излагать по шагам, а нетерпеливые могут сразу перейти сюда и посмотреть/пощупать своими руками, итак

Шаг 1. Готовим список пунктов меню руками

Сейчас объясню суть создания выпадающего меню из списков и после этого мы сделаем простейший список, который и будем мучить.

Как известно, выпадающее меню состоит из элементов/ссылок, при наведении на которые, мы получаем доступ к дополнительному списку с под-элементами. В обычной ситуации главные пункты меню располагаются в строку, а каждая группа под-элементов представляет собой столбец ссылок, появляющийся после наведения на элемент главного меню.
Вот мы и будем делать именно списки - внешний для главного меню и внутренние - для каждого набора под-разделов.

//Внешний список
<ul class="nav" id="nav-one">
<li>
//Текст ссылки первого элемента
<a href="#item1">item 1</a>
//Внутренний список для первого элемента
<ul>
//Первый под-элемент
  <li><a href="#item1.1">item 1.1</a></li>
//Второй под-элемент
    <li><a href="#item1.2">item 1.2</a></li>
    <li><a href="#item1.3">item 1.3</a></li>
    <li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li>
//Текст ссылки второго элемента
<a href="#item2">item 2</a>
//Внутренний список для второго элемента
    <ul>....</ul>
</li>
//Ну и так далее
</ul>

Всё просто и, я думаю, дополнительные разъяснения не требуются, главное не забыть указать у внешнего меню class=”nav” и id=”nav-one”.

Шаг 2. Стилизуем списки

Сам файл стилей не слишком большой, но между тем целиком код в блоге я приводить не хочу, поэтому советую для дальнейшей беседы скачать файл стилей, а я буду просто рассказывать про принцип работы, ссылаясь на него.
Берём файл sfstyle.css и открываем блокнотом или любым другим редактором (если кому интересно, то я использую Zend Development Environment или, проще говоря, ZDE).
Ну что же, приступим.

Первым делом уберём у всевозможных списков все отступы и прочие списочные атрибуты, это делается в .nav, .nav ul. После чего выводим их в строчку, а не как обычно, за это у нас отвечает float:left; в .nav li. Сразу обращу внимание на то, что мы везде применяем относительное (relative) позиционирование (position), чтобы элементы появлялись в строго заданных им местах, относительно родительских элементов.

Теперь нам необходимо спрятать внутренние списки с глаз долой и отображать их только при наведении. Тут мне попалось два способа:
1) Найденый на A List Apart - для вложенных ul элементов устанавливаем атрибут display:none;, а при наведении (li :hover ul) возвращаем в нормальное значение block.
2) Попавшийся на одном Ajax-ориентированном сайте - прятать список за экран (top:-999em;), а потом устанавливать позицию при наведении.

Так как я взял CSS из второго варианта (почему станет ясно позже), то с первым предлагаю поэкспериментировать самостоятельно.

В принципе на этом можно было бы и закончить, если бы не всеми любимый Internet Explorer (будь он неладен), который плохо обрабатывает псевдо-класс :hover, поэтому переходим к следующему шагу.

Шаг 3. Немного java-script и jQuery

Как это не прискорбно, но java-script придётся применять в любом случае, но я имею вам предложить целых два варианта (ну на самом деле их, наверное, больше), а вы уж сами решайте каким воспользоваться. Объяснять как именно ЭТО работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.
Способ 1 - Чистый java-script

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav-one");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() { this.className+=" sfHover";}
node.onmouseout=function() {
            this.className=this.className.replace(" sfHover", "");
  }
}}}}
window.onload=startList;

Способ 2 - C применением jQuery

$(document).ready(function(){
 if (document.all) {$("#nav-two li").hoverClass("sfHover");});
$.fn.hoverClass = function(c) {
  return this.each(function(){
    $(this).hover(
      function() { $(this).addClass(c);  },
      function() { $(this).removeClass(c); }
    );
  });
};

Кому как, а мне визуально больше нравится второй вариант, к сожалению, тут есть одно “НО” - необходимость подключения библиотеки jQuery. Не скажу, что это огромный минус, потому что: а) она идёт в комплекте с WordPress, так что ничего дополнительно скачивать не придётся; б) возможно какой-то из установленных у вас плагинов уже ею пользуется. Сама библиотека весит 20-30кб, поэтому особо не обременит пользователя, к тому же грузится она только первый раз, а потом подгружается из кэша. И не стоит забывать, что она позволяет делать многие интересные вещи, о чём ниже, в пункте 4.

Сейчас я объясню как её подключить:
1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово “jQuery”.
2. Если его нет, то лезем в файл темы header.php и где-нибудь перед </head> вставьте
<script type=”text/javascript” src=”http://ваш_домен/wp-includes/js/jquery/jquery.js”></script>

Кстати, если кто не знает, то приведенные выше java-script листинги нужно тоже вставить в хэдер до </head>, обрамив с обоих сторон <script type=”text/javascript”>…</script>

Шаг 4. jQuery-бонус - плавное меню

Раз уж мы вынудили пользователя скачать лишних целых 25кб, то надо его за это как-то наградить:)
Как вы смотрите на то, чтобы сделать появление меню плавным? Думаете сложно? А как вам вот такой код?

$(document).ready(function(){
$("#nav-two li ul").fadeOut("fast");
$("#nav-two li").hover(
  function(){ $("ul", this).fadeIn("fast"); },
  function(){ $("ul", this).fadeOut("fast"); }
);});

Помоему просто отлично, а главное понятно) Добавлю лишь, что вместо “fast” можно добавить “slow” или любое число в миллисекундах.

Тем, кто всё это прочёл думаю стоит посетить эту страничку с примером, где теперь должно быть всё понятно, а если остались какие-то вопросы или я что-то не точно написал - прошу в комменты.

Теперь думаю при помощи этой методики не составит труда делать различные меню - при помощи всяких там wp_list_categories и иже с ним.

ПыЦ: Только не спрашивайте меня, почему SuckerFish. Как я понимаю - это означает рыбу прилипалу или я ошибаюсь? Есть среди читателей знатоки ангельского языка?