В своих блогах я активно пользуюсь всякими кнопками в содержимом постов. Кнопки – это обычно сочетания картинок и ссылок, позволяющие красиво и наглядно представить информацию. Самая популярная кнопка, которая изначально задумаа для того, чтобы на нее обращали внимание посетители – «Скачать». Наверняка вы выдели красиво оформленные подобные кнопки, по которым так и хотелось кликнуть.
Поначалу я вставлял код кнопки целиком, со всеми параметрами оформлением. Потом я задумался – а действительно ли нужно каждый раз вставлять код целиком? Не проще ли оформить шаблон кнопки, заготовку, и сделать для нее простой шорткод для удобной вставки в содержимое поста? Такми образом я перешел на шорткоды, которые существенно упростили оформление содержимого. Давайте создадим шорткод кнопки «Скачать», который вы сможете потом переделать и подстроить под свои блоги.
Откройте файл functions.php, и добавьте в него такой код:
function mydl($atts) { extract(shortcode_atts(array( "url" => '', "title" => '', ), $atts)); return '<div class="dl">Скачать '.$title.'</div>'; } add_shortcode("dl", "mydl");
Этот код создает простой, короткий шорткод Скачать с двумя обязательными параметрами - url и title.
- url - это ссылка
- title - это название
Шорткод автоматически вставляет перед названием слово "Скачать" и автоматически вставляет в ссылку title.
Использовать шорткод нужно так: Пример шорткода: Для оформления шорткода нужно использовать CSS. Вставьте в файл style.css следующий код: dl.png - это картинка 24 на 24 px, которая отображается перед словом "Скачать", вставленная для привлечения внимания. Можете поэкспериментировать с оформлением кнопки, подогнав его под дизайн своего блога.Скачать название
Скачать "Elegant"
.dl {
margin:10px;
padding:10px;
border:1px solid #codec;
background:#fcfcfc;
border-radius:3px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:inline-block;
}
.dl a {
background: url(/images/dl.png) no-repeat left center;
padding-left: 24px
}
А не подскажете, как вывести это дело в произвольные поля? Т.е задача такая: нужно сделать три произвольных поля с URL файлов. 1 поле — выводит одну кнопку, второе поле другую и, соответственно, третье поле выводит третью кнопку. Это нужно, чтобы можно было выводить залитые файлы на три разных файлообменика.
Вставляешь вот этот код в место где у тебя должна выводиться данная картинка:
произвольное поле deposit туда вставляешь ссылку.
А как сделать чтоб было 2 ссылки в одном шордкоде?
так как на вопрос никто не ответил, отвечаю сам, чтобы в одной кнопке было две ссылки (возможно не только мне так понадобится )
если ссылки ведут на файлообменники то советую ставить
он в коде уже есть
ну и шордкод выглядит так:
Спасибо!
можно, пожалуйста, выложить пример dl.png?
Выбирайте: https://n-wp.ru/tag/icon
еще проблема, изображение 24х24 почему то подрезается и сверху и снизу, на высоту текста. как можно поправить? Все делал по инструкции выше.
подскажите, как мне реализовать следующее: автоматическая вставка шордкода в новость, где будет автоматическая ссылка загружаемого медиафайла, плюс, если это картинка, то будет отображаться размеры, вес и прочая информация…