Как создать шорткод кнопки «Скачать»

Как создать шорткод кнопки «Скачать» | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

В своих блогах я активно пользуюсь всякими кнопками в содержимом постов. Кнопки – это обычно сочетания картинок и ссылок, позволяющие красиво и наглядно представить информацию. Самая популярная кнопка, которая изначально задумаа для того, чтобы на нее обращали внимание посетители – «Скачать». Наверняка вы выдели красиво оформленные подобные кнопки, по которым так и хотелось кликнуть.

Как создать шорткод кнопки «Скачать» Как создать шорткод кнопки «Скачать»

Поначалу я вставлял код кнопки целиком, со всеми параметрами оформлением. Потом я задумался – а действительно ли нужно каждый раз вставлять код целиком? Не проще ли оформить шаблон кнопки, заготовку, и сделать для нее простой шорткод для удобной вставки в содержимое поста? Такми образом я перешел на шорткоды, которые существенно упростили оформление содержимого. Давайте создадим шорткод кнопки «Скачать», который вы сможете потом переделать и подстроить под свои блоги.

Откройте файл 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.

Использовать шорткод нужно так: Скачать название

Пример шорткода:

Скачать "Elegant"

Для оформления шорткода нужно использовать CSS. Вставьте в файл style.css следующий код:

.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
}

dl.png - это картинка 24 на 24 px, которая отображается перед словом "Скачать", вставленная для привлечения внимания. Можете поэкспериментировать с оформлением кнопки, подогнав его под дизайн своего блога.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Ready

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

    Ответить
    1. AlexGr

      Вставляешь вот этот код в место где у тебя должна выводиться данная картинка:

      <?php if ($images = get_post_meta($post->ID, 'deposit', true)) { echo ""; }; ?>

      произвольное поле deposit туда вставляешь ссылку.

      Ответить
  2. himin

    А как сделать чтоб было 2 ссылки в одном шордкоде?

    Ответить
  3. himin

    так как на вопрос никто не ответил, отвечаю сам, чтобы в одной кнопке было две ссылки (возможно не только мне так понадобится )

    function mydl($atts) {
        extract(shortcode_atts(array(
            "url"     => '',
            "title"   => '',  
            "url2"     => '',
            "title2"   => '',  
        ), $atts));
        return '<div class="dl">Скачать '.$title.' Скачать '.$title2.'</div>';
    }
    
    add_shortcode("dl", "mydl");

    если ссылки ведут на файлообменники то советую ставить

    rel="nofollow"

    он в коде уже есть

    ну и шордкод выглядит так:

    [dl url="http://depositfiles.com/files/ro4q1x0i4" title="Nicki Minaj – Super Bass" url2="http://depositfiles.com/files/ro4q1x0i4" title2="Nicki Minaj – Super Bass HD"]
    Ответить
    1. Спасибо!

      Ответить
  4. ADv

    можно, пожалуйста, выложить пример dl.png?

    Ответить
    1. Выбирайте: https://n-wp.ru/tag/icon

      Ответить
      1. ADv

        еще проблема, изображение 24х24 почему то подрезается и сверху и снизу, на высоту текста. как можно поправить? Все делал по инструкции выше.

        Ответить
  5. aklimatizirovanie_raki_v_atake

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

    Ответить