Шорткоды WordPress. Базовые понятия и принципы работы +

Первоначально, что необходимо сделать это подключить реализацию шорткодов к вордпрессу. Для этого потребуется файл functions.php, который лежит в папках шаблона вашего блога. Откройте его и пропишите в нем вот эти строки:

add_shortcode(‘name’, ‘function’);
Параметр «name» указывает на имя самого шорткода, которое будет отображаться в статье в тех самых квадратных скобках. А «function» на имя самой функции. Давайте зададим какие-нибудь параметры, например:

add_shortcode(‘shortcode’, ‘shortcode’);
И чуть выше этого кода пишем саму функцию «spoiler».

function shortcode($atts, $content=null) extract(shortcode_atts(array(
«title» ‘Здесь будет шорткод’ $atts));
return $title; Этой функцией мы описываем правила вывода и как будет называться сам код. Теперь в самой статье в режиме ввода HTML мы можем указать в квадратных скобках [shortcode] и увидим то, что мы прописывали в функции ‘shortcode’ в тайтле.

На экран выведется значение по-умолчанию, но если вы хотите изменить его, то добавьте атрибуты, например, [shortcode title=’Другой вариант шорт кода’].

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

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

function shortcoder($atts, $content=null) extract(shortcode_atts(array(
«title» ‘Здесь будет шорткод’ $atts));
return $title.» «.$content; Но при обновлении мы увидим, что ничего не произошло. Это вследствие того, что к шорткоду нужно дописать закрывающий тег, а между ними информацию, например:

[shortcode title=’Другой вариант шорт кода’]
Здесь будет контент шорткода для WordPress
[shortcode]
С контентом аналогично тайтлу. Сюда можно писать текст, вставлять баннеры, рекламу и т.д. Шорткоды WordPress.

Создание спойлера на HTML и CSS

Итак, вы познакомились с основами создания шорткодов, а теперь можно приступить к основной задаче это написание функции спойлера для вордпресса. Цель урока сделать выезжающую панель, как вы могли видеть на многих сайтах и блогах. С помощью jquery мы реализуем эффект анимации, а на css пропишем стилевое оформление и внешний вид. Давайте для начала создадим структуру и напишем код в functions.php:

function spoiler($atts, $content=null) extract(shortcode_atts(array(
«title» ‘Скрытый текст. Кликните для отображения.’ $atts));
$return ‘.$title.’ ‘.$content.’
return $return; add_shortcode(‘spoiler’, ‘spoiler’);
А встилях css для примера можем указать атрибуты:

#spoiler width: 100%;
margin: 10px;
background: #bdbdbd;
border: 1px solid #ccc;
padding: 5px; #spoiler width: auto;
margin: 10px;
background: #bdbdbd;
border: 1px solid #ccc;
padding: 5px; .spoiler_preview padding: 3px 0 0 35px;
height: 22px;
background-color: #bdbdbd;
background: url(images/plus_minus.png) no-repeat;
border: 1px solid #ccc;
cursor: pointer; .spoiler_preview span font-family: Arial;
font-size: 14px;
color: #333; .spoiler_content display: none;
background: #bdbdbd;
border: 1px solid #ccc; .spoiler_content p margin: 10px;
font-family: Arial;
font-size: 14px;
color: #333; Вызвав в статье данную конструкцию [spoiler][/spoiler] вы увидите нечто похожее.

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

Спойлер для Вордпресс. Подключаем библиотеку jQuery

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

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

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

$adds add_action(‘wp_head’, wp_enqueue_script(‘jquery’, get_bloginfo(‘template_directory’).’/js/jquery-1.11.1.min.js’, false, false));
При разборе кода видно, что мы обозначаем функцию add_action, в которой задаем название скрипта, а затем указываем путь до его расположения через хук get_bloginfo (‘template_directory’), который выводит путь до шаблона. По аналогии нужно создать второй файл со скриптами, например worcscripts.js, и прописать аналогичную функцию. В итоге у вас получится два файла подключения:

$adds add_action(‘wp_head’, wp_enqueue_script(‘jquery’, get_bloginfo(‘template_directory’).’/js/jquery-1.11.1.min.js’, false, false));
$adds add_action(‘wp_head’, wp_enqueue_script(‘worcscripts’, get_bloginfo(‘template_directory’).’/js/worcscripts.js’, false, false));
Сигналом для успешного подключения будет служить то, что в исходном коде у вас должны быть прописаны пути скриптов, а при нажатии на ссылку открытие файла с кодом. Шорткод (Спойлер для WordPress). Пишем скрипт на JavaScript с использованием jQuery

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

$(document).ready(function(){
$(‘.spoiler_preview’).toggle(function(){
$(this).css({‘background-position’:’0 0′});
var par $(this).parent(‘#spoiler’);
par.children(‘.spoiler_content’).stop().show(100); function(){
$(this).css({‘background-position’:’0 -30px’});
var par $(this).parent(‘#spoiler’);
par.children(‘.spoiler_content’).stop().hide(100);

Наш шорткод написан и спойлер для WordPress теперь открывается и закрывается.
По желанию, уже в вордпрессе вы можете вставить любой текст между [shortcode][/shortcode] и тогда по-умолчанию он будет скрыт, а появляться лишь после нажатия на Надеюсь статья была полезна и вы подчерпнули еще больше знаний в вордпресс. Удачи вам и пишите комментарии, если возникнут вопросы, а также не забывайте рассказывать о статье в соцсетях.

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Нет комментариев

(Обязательно)
(Обязательно, не публикуется)

Админ не грустный, он завис.
Яндекс.Метрика beget