Cut в стиле livejournal в блоге Wordpress
В Wordpress откровенно не хватает ката в стиле ЖЖ, собственно кат-то там есть, но он монументален, как египетская пирамида и неумолим, как топор палача.
Тег <!--more-->
можно использовать лишь один раз в посту, и все что после него уходит в подкат.
Кат как в ЖЖ, напротив, может позволить скрыть несколько частей записи (длинные участки кода, крупные картинки) оставив остальное видимыми читателю с основной страницы блога.
Удивительно, что никто эту ситуацию до сей поры не исправил, ни разработчики, ни авторы многочисленных плагинов. Конечно, попадались всякие статьи и исходники на тему "как сделать спойлер", но это были не устраивающие меня решения на javascript или ухищрения с CSS. И одно и другое плохо, во-первых, зависимостью от конкретного браузера, а во-вторых, тем, что зря занимает канал клиента, т.к. крупная картинка под спойлером или куча текста все равно будет загружена в клиентский браузер.
Итак, необходим следующий функционал:
1. Кат в стиле живого журнала, поддерживающий изменение текста ссылки на содержимое под катом, с возможностью использоваться несколько раз в одном посту для скрытия определенных его фрагментов.
2. Сделано это должно быть без javascript и CSS.
На главной странице блога область текста, находящаяся между тегами
<lj-cut>
и </lj-cut>
заменяется на ссылку вида blog.livejournal.com/1234567.html#cutid1
со стандартным текстом Read more... или текстом, заданным пользователем. Где 1234567.html
- страница, содержащая полный текст постаcutid1
- якорь [4], указывающий на начало скрываемого текста на странице поста.Правда, в такой реализации тоже есть один минус - имена якорей генерируются автоматически, в зависимости от количества участков, скрытых под катом в посту (
cutid1, cutid2... cutidN
). Ну ладно, писать, так писать, подумал я и решил добавить возможность задавать осмысленные имена якорей, например,
#code, #function, #ioann_grozny_killing_son_2666_x_6666
и т.д.Тут на помощь придут шорткоды [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["REQ UEST_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] и вывести контент, скрытый под катом. Если пользователь на одной из страниц блога со списком постов, то выводится ссылка на пост, дополняемая указателем на якорь (
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)
Это репост заметки из моего блога на сайте http://tolik-punkoff.com
Оригинал заметки находится здесь: http://tolik-punkoff.com/2016/11/08/cut-v-s