Как сделать favicon для сайта.

Преамбула

Favicon (от FAVorite ICON) называют иконку, отображающуюся на вкладке (или в окне, зависит от браузера) с открытым сайтом.

Вот на моем пока стандартная иконка WordPress:

Делаем свою.

Форматы файлов для favicon

Изначально для favicon был предусмотрен только один формат ICO, однако, современные браузеры поддерживают и другие форматы.

PNG: десктопные браузеры (Chrome, Safari, Firefox, Opera, Internet Explorer 11 и некоторые другие), а также браузеры для Android.

GIF: Chrome, Safari, Firefox, Opera

Анимированный GIF: Firefox, Opera. Однако, использовать анимированный GIF не рекомендуется — будет мельтешить и надоедать, да и это не самый легкий формат для картинок.

SVG (векторные изображения): Safari

Преимущество формата ICO в том, что иконка позволяет в одном файле хранить изображения разных размеров (с разным разрешением), также рекомендуется делать файл ICO для совместимости со старыми версиями браузеров. Еще формат ICO рекомендует Google и Яндекс, они выводят иконку в поисковой выдаче рядом с заголовком сайта.

Рекомендуемые разрешения для favicon

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

Десктопные браузеры:

16x16
32x32
48x48

Устройства на Android (в зависимости от разрешения экрана и количества точек на дюйм):

36x36
48x48
72x72
96x96
144x144
192x192

Устройства Apple:

— от 57x57 до 76x76

Устройства Apple с дисплеем Retina:

— от 114x114 до 180x180

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

Wordpress запрашивает у пользователя PNG с расширением 512x512, сохраняет его и дополнительно генерирует картинки со следующими разрешениями: 32x32, 150x150, 180x180, 192x192, 270x270, 300x300. Причем, в коде страницы прописываются сначала файлы с разрешением 32x32 и 192x192 (для десктопных и андроидных браузеров соответственно), потом 180x180 как иконка для девайсов от Apple и иконка 270x270 для использования в качестве закрепленной иконки в плиточном интерфейсе Windows 8.1

Как сделать favicon

Для начала понадобится какое-нибудь изображение, лучше всего квадратное, в смысле в квадрат вписывающееся. Я не долго думая, просто взял любимый векторный редактор и нарисовал простенький логотип для иконки, пока размером 512×512. Впрочем, пока готовишь изображение, размер не особо важен, наоборот, чем больше, тем лучше, особенно, если работаешь в растре. Векторному редактору-то фиолетово, он выходное изображение может в любом разрешении без проблем создать.

Установка favicon в WordPress

Для современных версий движка WordPress на моменте создания изображения все сложности практически и заканчиваются:
Favicon в WordPress
К сожалению, WordPress не умеет генерировать иконку в формате ICO, но это легко исправить. Таковую иконку легко собрать вручную, или же сгенерировать с помощью генератора favicon’ов (онлайн).

Генерация favicon онлайн

Есть, например, такой вот генератор favicon: https://realfavicongenerator.net/. Он генерирует иконки сразу на все случаи жизни: для десктопных браузеров и поисковиков, для кнопки сайта в iOS, иконку сайта для Android Chrome, иконку для плиточного интерфейса Windows 8.1 и 10, и даже векторную иконку для Safari (MacOS). В процессе генерации можно покрутить разные параметры для каждого случая в отдельности (размер, цвет фона и т.д.)

В конце вы получаете архив с иконками, вебманифест сайта для Android-устройств, browserconfig.xml для IE11 (Win 8.1) и Edge (Win 10), а такжe HTML-код, который необходимо вставить в секцию <head></head> на страницы сайта:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">

Создание favicon вручную

Постараюсь описать «на все случаи жизни». Пусть изображения (кроме ICO) будут находиться в /img/icons (измените путь на ваш).

Современные десктопные браузеры (с поддержкой PNG):

1. Экспортируем исходное изображение как PNG с разрешениями 16x16, 32x32, 48x48 и именами, пусть fi-16x16.png, fi-32x32.png, fi-48x48.png
2. В секции <head></head> прописываем теги:
<link rel="icon" type="image/png" sizes="48x48" href="/img/icons/fi-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/fi-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/fi-16x16.png">

3. Заливаем файлы на сайт. Далее не буду упоминать, что все теги прописываются в <head></head>, а файлы надо не забыть залить на сайт 🙂

Интересно, что автоматический генератор favicon и движок WordPress игнорируют разрешение 48x48. Почему так я не совсем понял, если у кого-то есть соображения на сей счет, высказывайтесь в комментариях.

Классический favicon.ico для поддержки устаревших браузеров и для поисковиков:

По идее, современные браузеры тоже должны поддерживать формат ICO, так что можно пропустить предыдущий пункт, хотя я перестраховался и оставил его.
1. Экспортируем исходное изображение как PNG с разрешениями 16x16, 32x32, 48x48
2. Далее потребуется инструмент для сборки иконки icon sushi Копия
3. Открываем все нужные изображения (File —> Open…)
4. Выделяем их в окне программы.
5. Сохраняем иконку (File —> Save as Multiple Icon) под именем favicon.ico
6. Заливаем ее в корень сайта.
7. Добавляем теги:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

Для WordPress добавляем в раздел между тегами <head></head> файла header.php текущей темы (Внешний вид —> Редактор тем, в Редакторе ищем файл header.php) следующий код:

<link rel=”shortcut icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />
<link rel=”icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />

Остальные устройства

Источники

1. Манифест? А? Что? Зачем?
2. Пишем правильный манифест для сайта
3. get_site_url()
4. Favicon сегодня: форматы, поддержка, автоматизация (копия)
5. Как сделать фавикон для сайта

Изменение имени страницы входа в админ-панель WordPress

Преамбула

Да, эта информация есть много где в сети, но в некоторых версиях почему-то кое что пропущено, так что эта заметка из серии «от склероза».
Известно, что страница входа в админ-панель по умолчанию носит имя wp-login.php (например tolik-punkoff.com/wp-login.php), и в нее ломятся всякие противные боты и школохацкеры, с целью поломать сайт. Далее простой способ, как защитить сайт от этого. Всегда так делаю, вместе с другими мерами безопасности, конечно же. Из которых самый главный — регулярный бэкап.

Плюсы:

+ Дополнительные плагины не нужны.
+ Делается просто

Минусы:

— Для многопользовательского блога не подходит, но если админов немного — вполне (просто надо раздать всем ссылку на новую страницу входа).
— После глобального обновления WordPress будет слетать, и все придется делать снова.

Меняем имя страницы входа в админ-панель

1. Разлогиниваемся на сайте.

2. Скачиваем по FTP с сайта файлы
wp-login.php
wp-includes/general-template.php

3. Делаем резервную копию этих файлов.

4. Копируем wp-login.php под каким-нибудь другим именем (ctulhu.dot.com.php, 47767deedbeaf6587.php, в общем сами придумайте что-нибудь уникальное).

5. Открываем получившийся файл в любимом текстовом редакторе (редакторе Far’а, mcedit’e, Notepad++) запускаем поиск и замену. Ищем wp-login.php, меняем на новое имя странички входа. Сохраняем изменения

6. Повторяем предыдущий пункт для файла general-template.php

7. В файл wp-login.php заменяем содержимое на следующий код:

<?php
		header('Location: http://natribu.org', true, 301);
?>

8. Убираем виджет авторизации с сайта.

9. Закачиваем измененные файлы обратно на FTP, заменяя старые версии.

Ограничение доступа к каталогу wp-admin

К сожалению, если вы введете адрес yoursite.com/wp-admin, то вас, и злоумышленника, перебросит на страницу авторизации. Самое простое решение — перекрыть доступ со всех IP, кроме доверенных, например, создав а каталоге wp-admin файл .htaccess со следующим содержимым:

order deny,allow
allow from 6.6.6.6
deny from all

где вместо 6.6.6.6 IP с которого будете заходить на сайт в админ-панель.

Повторюсь, заметка от склероза, на полноту и абсолютную правильность не претендует.

Изменение внешнего вида ссылки cut’а в WordPress

И внешнего вида cut’а нашего плагина LJ-cut style plugin for WordPress

Внешний вид ссылки на подкат, и в том и в другом случае управляется CSS-классом a.more-link

Если в CSS-файле вашей темы данный класс не прописан, то ссылка на подкат может выглядеть бледно:

Если так, то заходим в консоль WordPress, в боковом меню выбираем Внешний вид —> Редактор, в редакторе файл style.css, и вставляем на свободное место вне других конструкций CSS, CSS-код стиля more-link:

/*a.more-link*/
a.more-link{
	/*тут параметры стиля*/
}

Например:

/*a.more-link*/
a.more-link{
	font-weight: bold;
	border-bottom:double;
	text-decoration:none;
}

Понятно, что если в CSS темы стиль more-link уже прописан, то меняем его по своему усмотрению.

Теперь ссылка на подкат стала выглядеть симпатичней:

Статья про наш плагин, позволяющий делать в блоге WordPress кат, как в ЖЖ Копия

Отключение режима обслуживания в WordPress.

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

Чтобы отключить режим обслуживания, надо зайти по FTP на сервер и удалить из корневого каталога сайта (обычно public_html) и удалить файл .maintenance

Если FTP-плагин FAR не видит скрытых файлов (начинающихся с точки)

Надо отредактировать запись об FTP-соединении (по F4), активировать пункт Расширенный режим и проверить, чтобы в поле ниже было написано LIST -la

Способы для некоторых других FTP-клиентов:

Total Commander:
1. net — ftp show hidden files
2. в файле wcx_ftp.ini в разделе [General]
вписать FtpShowHidden=1 и перезагрузить Total Commander.

Far Navigator:
Custom List command
LIST -la

Скачать пост в PDF

Темы

Еще одна заметка от склероза:
Вот ссылка на архив с темами
В архиве и мобильная, и модифицированная основная, со всеми свистелками и перделками.

Кому для чего вдруг надо, просите ключик в комментах на LJR (ну я там чаще бываю, не забудьте регнуться — анонам почта не приходит)

Новости времен апокалипсиса… На своем сайте.

Когда-то, впрочем, не так давно, [info]r_l@ljr сделал офигенный проект — новостные постапокалиптчиеские заголовки. В виде простого скрипта PHP.

Идея крутая, и мне показалось, что неплохо бы ее использовать в дизайне своего сайта. В результате я пошел и спросил у [info]r_l@ljr исходники, а дизайнеры внедрили этот прикол в тему оформления.

Заметка, скорее от склероза, и чтоб не пролюбить… Но мало ли кому понадобится.

При заходе на любую страницу сайта http://tolik-punkoff.com, в его шапке вы можете увидеть сгенерированный «заголовок новости»:


см. ссылку.
см. ссылку

Как эта штука сделана в моей теме и версии WordPress:

Понадобится оригинальный архив (ссылка в конце заметки)

В нем 3 файла:
news_data — файл с массивами фраз для генерации заголовка
global.php — файл скрипта, отображающего заголовок. Новый заголовок генерируется автоматически, через заданное время.
globalf5.php — заголовок генерируется один раз, надо нажать F5, т.е. обновить страницу, чтобы получить новый.

Внимание: в файле news_data пропущена запятая, даже в нескольких местах, так что если сами будете делать, поправьте. На локальном web-сервере, должно быть видно где.

Внедряем скрипт в тему WordPress

1. Закачиваем в директорию темы, например, your-site.org/wp-content/themes/beach/, конкретика зависит от вашего хостера, исправленный файл news_data.
2. Создаем скрипт news.php следующего содержания:

<?php
	$where=array();
	$subject=array();
	$action=array();
	$object=array();
	$parts=array();

	include(__DIR__.'/news_data');

	foreach ($parts as $part) 
	{ 
		$news[$part]=${$part}[mt_rand(0, count(${$part})-1)]; 
	}
	$obs=implode(' ', $news)."&nbsp;";
?>

В конце заметки ссылка на PasteBin

3. Далее находим файл заголовка темы (в редакторе темы WordPress), скорее всего это будет header.php:

В самом начале подключаем скрипт news.php:

<?php
/**
* @package Beach
*/
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
include(__DIR__.'/news.php');

...

Команды ini_set используются для отладки, если что-то пошло не так, скорее всего, вам вывалится сообщение об ошибке. Не буду на этом останавливаться, т.к. подробное описание есть в любом учебнике по PHP, выкиньте эти команды, когда все заработает. include(__DIR__.'/news.php'); подключает ранее созданный скрипт.

4.Внедряем скрипт в header.php, в «шапку» страницы:

...

<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
<h3 id="apoknews"><?php echo $obs; ?></h3>
</hgroup>

...

В зависимости от используемой темы, вы сами должны найти место, куда внедрять данный код (выделенный жирным).

5. Подправляем CSS. Файл: style.css

В начале файла дописываем:

#apoknews {
	color: RGB(255, 215, 0);
	background-color: RGB(0, 0, 0);
	text-align:left;
	border: 3px solid #ffd700;
	padding-left: 7px;
}

Ссылки

Код скрипта данных
Код скрипта отображения (news.php)
Фрагмент кода скрипта формирования заголовка header.php.
CSS

Скачать

1. Оригинальный архив
2. Готовый архив.

Форма обратной связи для WordPress, возвращаясь к напечатанному.

Или как я избавился от слишком назойливой опеки антиспама на сервере.

Не так давно поднимал вопрос о форме обратной связи для сайта на WordPress [Копия].

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

Ситуация такая: антиспам финского сервера (вполне оправданно, кстати) отправляет в спам письма с доменов .ru (mail.ru и yandex.ru точно), .kz, .by и некоторых не связанных с ГОРФ, типа .tk

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

Находим в скрипте mail.php строчку:

$mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n";

И меняем ее на:

$mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n"."E-mail to answer: $email\n\n";

Ниже меняем в строке

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");

$email на $address. Должно получиться:

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$address");

Что этот код делает. Да все просто. Строка с сообщением ($mes) изменяется так, что адрес, который ввел пользователь в контактной форме, добавляется к тексту сообщения как простой текст. Параметры функции php mail изменяются так, что в заголовок письма вместо адреса пользователя, добавляется наш собственный адрес для приема сообщений из контактной формы. В результате мы получим сообщение, отправленное с нашего же адреса. Примерно как на скриншоте ниже:

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

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

Заметка в PDF

Форма обратной связи для WordPress, без плагина.

Пост из серии «кратенькая инструкция от склероза», описываю больше для себя, как форма сделана на моем сайте. Мопед не мой, но найти, откуда взята сия метода, не смог.

0. Создаем новую страницу, озаглавливаем ее согласно случаю, например Обратная связь, устанавливаем простое и понятное название постоянной ссылки, например contact-form, вставляем в редакторе в режиме Текст вот этот вот html-код. Не забудьте заменить beach на название директории с вашей темой. Пока ничего работать не будет, но «болванка» странички с формой обратной связи готова, осталось лишь научить сайт обрабатывать запрос, отправленный из формы.
1. Нам понадобится php-скрипт, отправляющий почту. Создаем файл mail.php, вставляем код, который откроется по ссылке, и копируем файл по FTP в директорию темы (wp-content/themes/ваша-тема).
В исходнике mail.php надо заменить admin-vnc@uaitc.fi на тот e-mail, на который вы хотите получать сообщения, отправленные из этой формы и указать в строке
header( 'Refresh: 3; url=http://tolik-punkoff.com/obratnaya-svyaz/' ); нужный адрес, куда пользователь будет перенаправлен после отправки сообщения. Число (в данном случае 3) — время перед перенаправлением. Фактически время, которое пользователю будет отображаться сообщение об успехе, либо об ошибке при отправке сообщения.
2. Сохраняем два изображения, valid.png:


и invalid.png:

в директорию images темы (wp-content/themes/ваша-тема/images).
3. Добавляем в файл style.css темы вот этот вот код css
4. Осталось проверить, все ли работает и добавить ссылку на страницу в соответствующее меню.

Вот что должно получиться

ФАНФАРЫ!

Все необходимое в одном архиве (на mega.nz)
Нашел оригинальный архив (скачать с mega.nz)

Полезные плагины для WordPress

Akismet (идет в комплекте) — офигенная защита от спама. Достаточно только регнуться на их сайте (через конрсоль wp), получить ключик (бесплатный) и пользоваться. Из 400 спамерских комментариев проворонил 2. Классный результат.
BackUpWordPress — лучший плагин для бэкапа.
Better Tag Cloud — добавляет годное красивое облако тегов


Categories to Tags Converter Importer (официальный плагин WordPress) — конвертирует теги в категории и обратно.
Cyr to Lat enhanced — транслителирует ссылки образуемые WordPress’ом из названий статей.
Google Sitemap by BestWebSoft — делает XML-sitemap для Google
Jeba Limit Login Attempts — вспоминал этот плагин в маленькой заметке по безопасности. Плагин ограничивает количество попыток входа, если кто-то неправильно вводил пароли.
LJ and LJR users shortcodes (самописный) — вставляет ссылки на блоги ЖЖ и LJR с «головастиками» и т.д.
LJ-cut style cut — добавляет возможность использовать кат в стиле ЖЖ в блоге WordPress
LJR-pollDisplay — отображает опросы из LJR
Maintenance Mode — плагин для закрытия сайта на техобслуживание. В бесплатной версии доступны не все опции, но хватает.
Mobile Smart — добавляет возможность переключать тему для мобильных устройств (детектит устройства по идентификатору браузера и переключает тему), есть возможность переключать тему вручную, тему надо устанавливать отдельно.
raw-formatter — добавляет возможность отключать форматирование, автоматически добавляемое WordPress’ом в пост.
Shortcodes personal library — библиотечка с моими шорткодами. Дам только по личной просьбе. Упомянута от склероза и для бэкапа.
SI Captcha Anti-Spam — Хорошая капча на все (форма входа, восстановления пароля, регистрации, добавления комментария и пр.)
TinyBR — меняет местами комбинации Enter и Shift+Enter в визуальном редакторе. По-умолчанию в WP почему-то сделано добавление по Enter абзаца (<p></p>) вместо православного <br>
WordPress Importer (официальный) — позволяет импортировать контент из файла экспорта WordPress
WP Security Audit Log — ведет логи подозрительной активности на сайте. Бесплатная версия довольно сильно урезана.
WP User Avatar — отключает (нахрен!) дурацкий Gravatar и позволяет загружать свои аватарки.

Код, добавляющий тег rel canonical

Чтоб не потерять.
Автора оригинала не ведаю, но помню, что в оригинале был какой-то глюк, исправили. Вроде работает, и даже правильно. 🙂

Вставлять в начало файла functions.php шаблона темы.

На Pastebin
На Mega.nz

HTTP-редирект в WordPress.

Чуть не забыл, ко вчерашнему разговору с товарищем, который про это спрашивал. Ну я тебя, товарищ, немного надул, ибо не погуглил. Не надо никаких костылей с header ('Location: http://natribu.org'), если по каким-то причинам надо делать редирект со страниц WordPress, то есть стандартная функция

wp_redirect( $location, $status );
где:
$location — адрес, куда посылаем.
$status — код HTTP, статус перенаправления.

Подробности, например, тут [Копия]

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

Страница со списком тегов (или рубрик) WordPress

Если перейти в блоге WordPress по ссылке на любой тег, то попадем на страничку, содержащую анонсы постов по данному тегу, адрес странички будет примерно такой:

http://tolik-punkoff.com/tag/manuals/

Где manuals — собственно, выбранный тег, а tag — префикс для URL-адреса меток, который можно настроить в консоли WordPress в разделе Настройки — Постоянные ссылки.

Идея такого формата адреса достаточно очевидна, убираешь из строки адреса выбранный тег и попадаешь в список всех тегов, как например это сделано в ЖЖ или LJR

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

Исправляем досадную неприятность.

Читать далее…

Скачать заметку в формате PDF

Cut в стиле livejournal в блоге WordPress

В WordPress откровенно не хватает ката в стиле ЖЖ, собственно кат-то там есть, но он монументален, как египетская пирамида и неумолим, как топор палача.
Тег <!--more--> можно использовать лишь один раз в посту, и все что после него уходит в подкат.


Кат как в ЖЖ, напротив, может позволить скрыть несколько частей записи (длинные участки кода, крупные картинки) оставив остальное видимыми читателю с основной страницы блога.

Удивительно, что никто эту ситуацию до сей поры не исправил, ни разработчики, ни авторы многочисленных плагинов. Конечно, попадались всякие статьи и исходники на тему «как сделать спойлер», но это были не устраивающие меня решения на javascript или ухищрения с CSS. И одно и другое плохо, во-первых, зависимостью от конкретного браузера, а во-вторых, тем, что зря занимает канал клиента, т.к. крупная картинка под спойлером или куча текста все равно будет загружена в клиентский браузер.

Итак, необходим следующий функционал:
1. Кат в стиле живого журнала, поддерживающий изменение текста ссылки на содержимое под катом, с возможностью использоваться несколько раз в одном посту для скрытия определенных его фрагментов.
2. Сделано это должно быть без javascript и CSS.

Как устроен кат в ЖЖ.

На главной странице блога область текста, находящаяся между тегами <lj-cut> и </lj-cut> заменяется на ссылку вида http://blog.livejournal.com/1234567.html#cutid1 со стандартным текстом Read more… или текстом, заданным пользователем. Где
1234567.html — страница, содержащая полный текст поста
cutid1 — якорь [4], указывающий на начало скрываемого текста на странице поста.
Правда, в такой реализации тоже есть один минус — имена якорей генерируются автоматически, в зависимости от количества участков, скрытых под катом в посту (cutid1, cutid2... cutidN).

Ну ладно, писать, так писать, подумал я и решил добавить возможность задавать осмысленные имена якорей, например, #code, #function, #ioann_grozny_killing_son_2666_x_6666 и т.д.

Как сделать в WordPress кат в стиле Живого Журнала?

Тут на помощь придут шорткоды [1]. Можно написать плагин, реализующий такой функционал и добавляющий шорткод [lj-cut]] [[/lj-cut]

Создаем «болванку» плагина

В директории wp-content создаем поддиректорию lj-cut, а в ней файл lj-cut.php со следующим содержимым:

<?php

/*
Plugin Name: LJ-cut style cut
Description: Add Livejournal-like Cut Shortcode 
*/


function ljcut_shortcode($atts, $content=null)
{			
	
}

add_shortcode ('lj-cut','ljcut_shortcode');

?>


Информация в комментариях после Plugin Name: и Description: будет отображена в админ-панели в разделе плагинов. Plugin Name: и информация далее должна быть указана обязательно.
Функция ljcut_shortcode($atts, $content=null) обрабатывает шорткод, ей передаются движком массив с параметрами $atts и содержимое между открывающим и закрывающим тегом $content
Функция add_shortcode добавляет шорткод с указанным именем (1 параметр) и устанавливает функцию его обрабатывающую (2 параметр).

Описание и алгоритм.

Функция обработки шорткода будет вызвана каждый раз, как будет встречена в посту. Ей будут переданы параметры из массива $atts, указанные в тексте как [shortcodename param1="value1", param2="value2"].

1. Заведем 2 статических переменных:
static $cutid=0; //номер текущего cutid в посту
static $oldplink=''; //предыдущий permalink
Первая будет хранить номер текущего cutid в посту, а вторая сохранять предыдущую постоянную ссылку на пост. Переменные обязательно должны быть объявлены при помощи ключевого слова static, иначе их значения будут сброшены при каждом вызове функции.

2. Вытащим из массива $atts параметры и запишем их в соответствующие переменные. Если параметр не будет определен, то ему будет присвоено значение, указанное в кавычках после =>

extract(shortcode_atts(array(
	      'text' => 'Read more...',
	      'unicancor' => '',
	), $atts));


4. Получим URL поста, откуда была вызвана функция обработки шорткода, используя внутреннюю функцию WordPress get_permalink() [2]:
5. $plink=get_permalink(); //получаем URL текущего поста
6. Получим URL текущей страницы:
$clink=get_bloginfo('url').$_SERVER["REQUEST_URI"]; //URL текущей страницы
Функция get_bloginfo('url') получит адрес блога [3], а в элементе REQUEST_URI массива $_SERVER будет находиться значение вида /blog/post.html если пользователь читает пост на странице поста и значения вида /page/2/ (/author/tolik-punkoff/, /tag/it/), если пост читают с какой-то из страниц сайта. В первом случае необходимо показывать весь текст, во втором — заменять скрытую под катом часть на соответствующую ссылку.
7. Далее необходимо проверить, какой раз функция обработки шорткода ката вызывается из поста. Делается это путем сравнения заранее сохраненной постоянной ссылки на пост и только что полученной.
Если ранее сохраненная ссылка не такая же, как и полученная во время вызова функции, значит, мы начали обрабатывать новый пост. В таком случае отсчет текущих фрагментов, скрытых под катом, необходимо начать заново, а постоянную ссылку на новый пост сохранить в соответствующей переменной. Иначе функция была очередной раз вызвана из текущего поста, соответственно, нужно просто увеличить счетчик фрагментов под катом:

	if ($oldplink!=$plink) //пост новый, надо начать отсчет cutid заново (с 1)
	{
		$cutid=1;
		$oldplink=$plink; //и сохранить текущий 
	}
	else //мы все еще обрабатываем старый пост
	{
		$cutid++; //прибавляем значение cutid
	} 


8. Далее необходимо сравнить постоянную ссылку на пост (premalink) со ссылкой на той странице, на которой находится пользователь и если пользователь на странице поста — установить якорь [4] и вывести контент, скрытый под катом. Если пользователь на одной из страниц блога со списком постов, то выводится ссылка на пост, дополняемая указателем на якорь (http://tolik-punkoff.com/tag/it/post#ancor).
Если имя якоря задано пользователем в соответствующем параметре шорткода, то оно и используется, иначе, якорь принимает вид cutidN, где N — заранее посчитанный в переменной $cutidномер.

if ($plink==$clink)
	{
		//мы в теле поста, cut надо раскрыть и вставить якорь
		if ($unicancor=='') //если якорь не задан, используем cutidn
		{
			$ret='<a name="cutid' . $cutid . '"></a> ' .$content;
		}
		else
		{
			$ret='<a name="' . $unicancor . '"></a> ' .$content;
		}
	}
	else
	{
		//мы на одной из страниц, но не в самом посту
		//надо установить ссылку на пост и на нужный якорь в посту
		if ($unicancor=='') //если якорь не задан, используем cutidn
		{
			$ret='<a class="more-link" ' . 'href="' . $plink . '#cutid' . $cutid .
			 '">' . $text . '</a>';
		}
		else
		{
			$ret='<a class="more-link" ' . 'href="' . $plink . '#' . $unicancor .
			 '">' . $text . '</a>';
		}
	}


Сохраняем сгенерированный HTML-код в переменной $ret
9. Возвращаем сгенерированный код и завершаем функцию обработки шорткода:
return $ret;

Скачать плагин

С Pastebin
С Mega.nz
Страничка плагина на сайте HexProject
Страничка плагина на GitHub
Скачать с tolik-punkoff.com

Используемые источники

1. Шорткоды в WordPress
2. get_permalink()
3. get_bloginfo()
4. Якорь (HTML)

Небольшая заметка про безопасность WordPress-блога

На полноценную инструкцию особо не претендующая, скорее так, некие примочки и припарки от кулхацкеров и всяких говноботов, да ссылки на найденные в сети материалы.

I. Плагины.

1.Защищаемся от спама. В комплекте с WordPress идет плагин Akismet, настраивается он довольно просто и от спама защищает хорошо. Вот краткая инструкция, например.
2.Ставим капчу на вход в админ-панель, а заодно и на добавление комментариев, форму восстановления пароля с помощью плагина Securimage-WP. Настраивается он тоже несложно, хотя я особо ничего и не настраивал. Поставил, активировал, зашел в Настройки — Securimage-WP и поставил четыре галочки. Ах да, еще матан-капчу включил.

3.Можно установить плагин WP Security Audit Log и отслеживать различные действия, которые производят как пользователи сайта, так и пытаются произвести вредители. Говорят, что плагин тяжелый, но я особо этого не заметил. А вот боты в форму логина wp-login.php реально ломились нехилыми пачками и это с учетом того, что у меня не сильно известный и популярный блог. Заодно плагин отслеживает и 404 ошибки, что позволяет вовремя заметить косяки в теме оформления, тегах, структуре сайта и т.д.
4.С помощью плагина Jeba Limit Login Attempts можно ограничить количество попыток ввода логина/пароля до трех штук, после чего вход в админку будет заблокирован на 30 минут. Правда, если количество вредителей, ломящихся в админку, превышает разумные пределы, может статься, что туда будет не попасть самому. Хотя есть способ и рыбку съесть, и ног не намочить. О нем далее.

II. Переименование страницы входа.

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

Шаг 1. Оригинальный wp-login.php переименуем в любое другое название, хоть в «s4gr3gerh6hb.php».

Шаг 2. Затем заменим все слова wp-login.php на новое имя, в нашем случае на s4gr3gerh6hb.php, в файле s4gr3gerh6hb.php (старый wp-login.php) и в файле wp-includes/general-template.php [Копия в PDF]

Можно еще в .htaccess доступ закрыть, либо устроить редирект куда-нибудь, например на http://www.cia.gov или на http://natribu.org

Способ с изменением .htaccess считается самым надежным и самым ненагружающим сервер, но если не хочется/нет возможности/лень менять что-то на сервере, то можно сделать редирект и вручную средствами php [Копия в PDF]

Например так:

<?php
		header('Location: http://natribu.org', true, 301);
?>

Или вообще поизвращаться, написать свой скрипт, который будет демонстрировать визитеру рептилоидов, играющих на баяне OST X-files и вести учет IP и количества обращений к скрипту. Но это все-таки дополнительная нагрузка на сервер.

Отображение шорткодов в блоге WordPress, а точнее их синтаксиса, и как вредно не читать мануалы

ДОЧИТАЙТЕ ДО КОНЦА, КАК НЕЗНАНИЕ ИЛИ ПРЕНЕБРЕЖЕНИЕ К МАНУАЛАМ, ЗАСТАВЛЯЕТ ИЗОБРЕТАТЬ ВЕЛОСИПЕДЫ
Столкнулся я с проблемой, а как отобразить в посте не результат работы шорткода, а его вид в редакторе, т.е. его синтаксис. Для шорткодов, в том же самом блоге не используемых — все нормально. Но для тех шорткодов, которые в блоге используешь — возникает понятная проблема. Вставляешь шорткод в блог, и движок на место шорткода вставляет результат функции, его обрабатывающий. А задача стоит отобразить написание шорткода.
Отобразить синтаксис html-тегов проще, достаточно заменить угловые скобки «<» и «>» на эскейп-последовательности html. Для символов «[» и «]», заменяющих «<» и «>» для шорткода, я не нашел эксейп-последовательностей.

Решение: шорткод, для отображения синтаксиса шорткода.

Звучит так же просто, как и делается.
Вставляем следующий php-код куда удобно, хоть в functions.php, хоть в отдельный плагин.
Я сделал отдельный плагин, но можно и в файл функций, код небольшой:

<?php
/**
 * Plugin Name: shortcodes display
 */

function display_shortcode($atts, $content=null)
{			
	$ret=$content;
	return $ret;
}

add_shortcode ('shortcode','display_shortcode');

?>

ВНИМАНИЕ! Переменную $atts нужно добавить обязательно, хотя она фактически не используется, т.к. у данного шорткода параметров нет, но так уж устроен движок WordPress, что без наличия первого параметра не обработается и параметр $content

Как использовать.

Вставляете шорткод, синтаксис которого нужно отобразить, между открывающим и закрывающим псевдотегом shortcode.
Единственный минус — не работает для самих тегов для отображения синтаксиса шорткодов, посему ниже картинка с примером:

Результат работы:

И как я оказался дураком, надо иногда читать мануалы

Все делается гораздо проще, код шорткода заключается в дублирующиеся квадратные скобки, например [ljr user="hex_laden"], т.е. сам шорткод надо заключить не в одни скобки «[» и «]», а в дублирующие «[[» и «]]»

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

Плагин, отображающий пользователей ЖЖ/LJR в блоге WordPress в стиле ЖЖ/ЛЖР

Т.е. в виде ссылки с «головастиком», как в тестовом посте

Плюс добавим возможность открывать страницу пользователя ЖЖ/LJR в отдельном окне (вкладке)

Как работает стандартная ссылка на блог в ЖЖ/ЛЖР

При добавлении псевдотега <ljr user="username"> или <lj user="username">, данный псевдотег заменяется на ссылку с дополнительной картинкой-головастиком перед ней, клик по картинке ведет к открытию страницы userinfo пользователя ЖЖ и LJR, а клик по имени пользователя — к открытию главной страницы пользователя блогосервиса. Если вставить в пост на LJR псевдотег <lj user="username">, то к имени пользователя будет добавлена дополнительная строка — username@lj, указывающая, что дневник пользователя находится в Живом Журнале.

Что делает плагин

— обрабатывает шорткоды вида [ljr user="username"] или [lj user="username"],
— вставляет на их место в посте «головастика», пользователя того или иного сервиса, дописывая в конце имени префикс @lj или @ljr, и проставляет все нужные ссылки.
— Если указан параметр blank=1, например [ljr user="hex_laden" blank=1], то ссылки на userinfo (при клике по «головастику») или ссылка на главную страницу блога, откроются в новом окне/вкладке.

Подготовка к созданию плагина.

1. В wp-content/plugins, создаем отдельный каталог lj-ljr-users, в нем подкаталог img, и загружаем туда графические файлы «головастиков» http://lj.rossia.org/img/userinfo.gif и http://lj.rossia.org/img/userinfo-lj.gif
2. Создаем файл lj-ljr-users.php в каталоге wp-content/plugins/lj-ljr-users и вставляем в него нижеследующий код.

Код плагина

Код плагина
Небольшие минусы

— Css встроено сразу в плагин и заточено под тему оформления, которую юзаю я, по-хорошему, надо стилевые настройки из плагина вымести, и чтоб они прописывались в styles.css
— не определяется, пользователь это или сообщество. Но с другой стороны, это чрезмерно бы усложнило код и стабильность, вызвав необходимость обращаться к серверам блогосервисов (и обрабатывать случаи, если сервера «лежат»).
— ну может еще какие мелкие недочеты, кому надо — берите и сами исправляйте.

Скачать.

PHP-код на pastebin
Готовый плагин с mega.nz

Отображение пользователей или сообществ livejournal/ljr в стиле ЖЖ/ЛЖР

Правда мы не стали заморачиваться, сообщество это или пользователь, поэтому иконка и для того, и для другого одинакова, например:
Пользователи:
[info]rutopist@lj
[info]tiphareth@ljr
Сообщества:
[info]potsreotizm@lj
[info]durdom@ljr

Наш шорткод имеет замечательную возможность — открывать нужного юзера/сообщество в новой вкладке, например:
[info]ketmar@ljr
[info]veniamin1@lj
[info]cat@ljr
[info]brigada_hella@lj

Отображение опросов из LJR (ЛЖР, «Тифаретник», LJ.ROSSIA.ORG) и, возможно, ЖЖ (livejournal) в блоге WordPress

1. Преамбула

Заметка посвящается тем, кто хочет перенести свой блог из ЖЖ, ЛЖР или другого блогосервиса, работающего на движке ЖЖ (LJ) в блог на WordPress

2. Суть

В ЖЖ и сайтах, работающих на движке ЖЖ существует определенный тип поста — опрос. И переносящие свой блог пользователи сталкиваются с невозможностью стандартными средствами перенести опрос из ЖЖ или (в моем примере LJR) в свой блог на WordPress.

3. Стратегия решения проблемы, плюсы и минусы.

А мы и не будем переносить результаты опроса из (в нашем случае) LJR, а будем отображать сам опрос, беря его с сайта.
+ Результаты опроса будут отображаться онлайн в нашем блоге, так же, как они будут и в блоге LJR
+ Пользователи сайта могут проголосовать в опросе, только зарегистрировавшись на старом сайте. Что плюс, если вы просто хотите сохранить результаты опроса на новом сайте/не хотите суммировать результаты из двух опросов.
— При отображении поста необходима связь с сайтом, если ее не будет или опрос будет удален, то это приведет к возникновению ошибки
— В конкретном примере я использовал довольно старую версию движка ЖЖ, которая применяется на сайте LJ.ROSSIA.ORG, посему вам потребуется подкорректировать код, если вы переносите блог с ЖЖ или другого сайта, работающего на том же движке.

4. Описание алгоритма.

1. Получить ID опроса (пользователь должен задать его вручную)
2. Выделить из страницы опроса его результаты и ссылки на участие в опросе.
3. Встроить эту информацию в пост WordPress и отобразить ее.

5. Тестовый опрос.

Создан здесь: http://lj.rossia.org/users/hex_laden/348192.html
ID: 1307
Страница опроса: http://lj.rossia.org/poll/?id=1307&mode=results

6. Что понадобится

Внешний html-парсер, я использовал этот готовый simple_html_dom.php
7. Готовый код.

Сначала создаем файл с функцией, непосредственно занимающейся парсингом страницы опроса:
Read more…
И создаем главный файл плагина с функцией обработки шорткода, который, будучи вставлен в пост отобразит наш опрос:

Read more…
Для того, чтобы вставить в свой блог на WordPress опрос с LJ.ROSSIA.ORG, останется добавить в пост следующий шорткод:
[ljrpoll id="<poll_id>"]
Где <poll_id> идентификатор опроса, например 1307

Тестовый пост с отображенным опросом здесь:
http://tolik-punkoff.com/2016/07/26/opros-s-lj-rossia-org-otobrazhaemyj-v-wordpress/

Код плагина доступен на PasteBin:
getpoll.php
Основной файл плагина
Или можно скачать архив с плагином с mega.nz
Папку из архива надо поместить в директорию wp-content/plugins вашего сайта, после чего зайти в консоль на страницу плагинов (или обновить ее) и активировать плагин LJR-pollDisplay

Опрос с LJ.ROSSIA.ORG, отображаемый в WordPress


Warning: file_get_contents(): stream does not support seeking in /home/punko102/domains/tolik-punkoff.com/public_html/wp-content/plugins/ljr-poll/simple_html_dom.php on line 75

Warning: file_get_contents(): Failed to seek to position -1 in the stream in /home/punko102/domains/tolik-punkoff.com/public_html/wp-content/plugins/ljr-poll/simple_html_dom.php on line 75

Позже напишу, как я такой финт ушами сделал (ну не совсем я, финны с китайцами, точнее с камбоджийцами даже, я только идею подал и над процессом руками водил, то бишь советовал):
ERROR: CONNECTION ERROR [http://lj.rossia.org/poll/?id=1307&mode=results]