Как создать собственные Shortcode полезные для сайта

Как я уже говорил в своей статье, «Изучаем визуальный редактор WordPress» – Shortcode (шорткоды) очень полезны и в написании статей.

 

А вообще, применение Shortcode мало ограничено: виджеты, виджеты-виджетов)) файлы шаблонов и т.п. да практически любые функции к их услугам, и даже контекстная реклама.

 

 

 

 

 

 

 

 

 

теги шорткода

 

 

 

Shortcode WordPress достаточно просты в применении, доступны любому админу и – сокращают массу бесполезно убитого времени.

 

 

Многие web-мастера и особенно новички в начале славных дел, избегают изучать полезные для себя вещи и, не имея понятия о выгодных тонкостях, принимаются к призрачному и модному заработку миллиона. В итоге: тратят уйму своего полезнейшего времени – так показывает практика!

 

 

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

 

 

 

Итак.

 

 

По порядку… а в дальнейшем мы научимся уже на своё усмотрение создавать и применять эти самые Shortкоды…

 

 

 

Shortcode WordPress и их применение

 

 

 

 

 

 

 

 

как вывести в статье примером PHP приветствие автора

 

 

 

 

1-е. И это логично – разберём «приветствие автора» своих читателей. Каждый нормальный человек, автор, в начале своей статьи здоровается. Казалось бы ничего сложного, но попробуйте подсчитать сколько утечёт времени, выписывая этот «Привет…» раз за разом… Уйма))

 

 

Мы тупо прописывать не станем, а поступим проще: используем один из шорткодов. Этот пример достаточно прописать в файл functions.php и готово дело. Значит, знаете как прописывать, если читали мою предыдущую статью ?? Открываете файл functions.php, и в самом его конце, просто дописываете эту функцию к тем, которые мы уже в него помещали.

 

 

важно: перед закрывающим значком ?>. НЕ РАЗРЫВАЯ ДРУГИХ ЦИКЛОВ ФУНКЦИЙ.

 

 

function mihalica_easy() {
return 'Здравствуйте друзья!!! MIHALICA к вашим услугам.';
}
add_shortcode('hi', 'mihalica_easy');

 

 

 

Теперь взгляните на пример: в четвёртой строке есть закавыченный тег — hi.

 

Так вот, он и указывает на выполнение программной ФУНКЦИИ ШОРТКОДА. Этот тег и нужно прописывать прямо в визуальном редакторе, перед началом статьи (ну или где хотите).

 

 

Вот этот тег:

 

[hi]

 

…и у вас без всяких заморочек и перепечатаний) выплывет «…И снова здрасти…».

 

 

И ещё !! …помните мы в предыдущей статье учились добавлять кнопки в редактор?? Если позабыли, вновь пробежитесь по тексту статьи.

 

 

Затем придумайте значок кнопочки (создайте в фотошопе) и встройте её в WordPress редактор. И отныне у вас будет помощница-кнопочка. Так что и этот тег вручную прописывать не придётся, а нужно будет только кликнуть по иконке))

 

Вот и всё!

 

Здравствуйте читатели занимательной mihalica.ru

 

Да, упреждаю, в редакторе WordPress, это «Здрасти» будет только тегом, но как только вы станете читать статью на сайте — там этот «Привет» и увидите.

 

 

Всё достаточно просто!

 

 

Далее будем усложнять…   Что у нас следующее..? Приветствие – есть! Статья, тоже. И теперь самое время эту статью продвигать…

 

 

 

как добавить в статью или пост подписку тегом шорткода

 

 

 

 

…продвигать..? А как это делается? А вот как, но об этом мы подробно станем говорить в следующих статьях…

 

 

А пока мы поступим следующим макаркой: заставим наш пост, конечно же, с помощью Shortcode предлагать читателям подписаться по RSS, например. Здорово!

 

 

Тогда вперёд…

 

 

Копируете эту функцию и помещайте в документ, равно точно таким же способом как и пример выше:

 

 

//обновления
    function mihalica_rss() {
        return '<a title="Подпишись по RSS" href="https://feedburner.google.com/fb/a/mailverify?uri=MihalicaruSeoHtml&amp;loc=ru_RU" rel="nofollow" target="_blank"><img class="alignright" title="Подпишись по RSS" src="https://mihalica.ru/wp-content/themes/RealMik/images/top5.png" alt="Подпишись по RSS" />Подпишитесь по RSS.</a>Только ваша ЭЛ/П!';
    }
        add_shortcode('rs', 'mihalica_rss');

 

 

…не забывайте все ваши редакции документаций сохранять..!

 

 

…пробуйте работу в статье…

 

[rs]

 

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

 

Вот.

rel="nofollow" – можете и не использовать) также как и див-классы; а равно обратите внимание и на ссылку картинки top5.png, которую (если будете отрабатывать) стоит загрузить на сервер.

 

 

Да, не забудьте заменить УРЛЫ (адреса) моих подписок на свои.

 

 

 

 

как с помощью шорткода красиво оформить статью блога

 

 

 

 

 

Предположим такую блажь: вам захотелось украсить свой пост расцветкой. А как? …как это делают другие блогеры? Разными способами, говорю я) Но мы с вами вновь обратимся к помощи шорткода, и не станем загружать свой блог тяжёлыми плагинами, чтобы подсветить нужный кусочек текста как делает это большинство web-мастеров, например, синим колором (в прошлой статье был – жёлтый).

 

 

Значит, нам нужно прописать аналогично-о-о )) верхним способам новый кусочек кода в файл функций:

 

 

//подсветка текста blss например
 function mihalica_background3($attr,$content= null){ 
 return'
 <div class="blue_background">'.$content.'</div><p>
 ';
 }
 add_shortcode('blss', 'mihalica_background3');

 

 

Теперь, как только сохранили эту функцию в файле funкций — работа подсветки задана. А вам лишь останется заключить нужный участок текста в теги:

 

 

[blss]НЕОБХОДИМЫЙ ТЕКСТ[/blss]

 

 

…и он у вас засверкает по-иному. Синей подсветкой.

 

 

Ну и теперь же вновь делаем соответствующую иконку-кнопку и впихиваем в нужную папку… Читайте прошлую статью, ссылка выше. Там всё подробным образом описано и показано. Настоятельно рекомендую, ибо негоже на полпути тормозить.!?

 

 

Теперь же, как и положено, откроем фал стилей style.css и пропишем в самый его конец необходимый селектор (стили).

 

 

.blue_background{
background-color:#5EDFFF;
border-radius:7px 40px;
font-style:italic;
padding:10px;
margin:5px 10px;
}

 

 

В скобках скажу: при желании подсветить текст иным колором, – просто меняем значение в строке — 2 — background-color: #5EDFFF; — на свой код цвета.

 

 

 

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

 

 

 

3 строка – бордюр (окантовка, кому нужно)  и т. д. Экспериментируйте…

 

4 строка – скругления фона…

 

5 – наклон текста

 

другие: отступы…

 

 

А вообще, подсветка иногда полезна, поисковики частенько рассматривают её как сниппет «ВНИМАНИЕ» (англ. snippet — фрагмент, отрывок) — если его предварительно нашпиговать ключевыми выражениями. И выходит, этот шорткод ни только удобен, но и полезен.

 

 

Главное не переусердствовать КЛЮЧАМИ.

 

 

И как только придёт в голову блажь подсветить. Так вы тут же выделяете участок статьи, клик-с.. и готово дело – нужный кусочек текста фонит.

 

 

Хорошо) …немного полюбуемся на пестроту… и продолжаем.

 

 

 

как в статье с помощью шорткода вывести категории записей

 

 

 

 

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

 

 

Итак за вывод категорий у нас будет отвечать простенький тег:

 

 

[cat ]

 

 

Но для того, чтобы он работал на нас, нам нужно снова зайти в файл functions.php и прописать ОПЯТЬ ЖЕ в самый его конец (перед тегом ?>) функцию:

 

 

function mihalica_category($atts, $content = null) {
extract(shortcode_atts(array( 'name' => null, ),$atts));
return wp_nav_menu(array('menu' => $name,'echo' => false));
}
add_shortcode('cat', 'mihalica_category');

 

 

Прописали? Сохраняем…

 

 

Теперь добавляем кнопочку в редактор WordPress… и… …проверяем свою работу.

 

 

Ну и напоследок:

 

 

 

активируем скрытые кнопки в редакторе TinyMCE WordPress

 

 

 

 

Что ж… Думаю, стоит активировать и скрытые кнопки в редакторе.

 

 

Это очень просто: копируем показанный мною ниже пример и впихиваем как и обычно в файл functions.php в самый конец.

 

 

function add_more_buttons($buttons) {
$buttons[] = 'fontselect'; // разные шрифты
$buttons[] = 'fontsizeselect'; // размеры шрифтов
$buttons[] = 'styleselect'; // стили
$buttons[] = 'backcolor'; // цвет фона
$buttons[] = 'sup'; // верхний индекс
$buttons[] = 'sub'; // нижний индекс
$buttons[] = 'anchor'; // якорь
$buttons[] = 'hr'; // разделительная черта
return $buttons; }
add_filter("mce_buttons_4", "add_more_buttons");

 

 

 

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

 

 

 

 

 

Всё! …хотя работка была большущей.

 

Но самое главное у вас теперь есть знания, которые вам пригодятся.

 

 

 

 

 

Также может быть интересно:

 

Обогащаем своими кнопками текстовый HTML редактор WordPress.

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

 

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

 

TinyMCE Advanced