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

Как создать шорткод кнопки «Скачать» | n-wp.ru

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

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

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

Откройте файл functions.php, и добавьте в него такой код:

function mydl($atts) {
	extract(shortcode_atts(array(
		"url"     => '',
		"title"   => '',			
	), $atts));
	return '';
}
add_shortcode("dl", "mydl");

Этот код создает простой, короткий шорткод [dl] с двумя обязательными параметрами - url и title.

  • url - это ссылка
  • title - это название

Шорткод автоматически вставляет перед названием слово "Скачать" и автоматически вставляет в ссылку title.

Использовать шорткод нужно так: [dl url="ссылка" title="название"]

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

[dl url="http://www.moonthemes.com/download-2/elegant/" 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, которая отображается перед словом "Скачать", вставленная для привлечения внимания. Можете поэкспериментировать с оформлением кнопки, подогнав его под дизайн своего блога.

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

9 Комментарии

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

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

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

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

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

    function mydl($atts) {
        extract(shortcode_atts(array(
            "url"     => '',
            "title"   => '',  
            "url2"     => '',
            "title2"   => '',  
        ), $atts));
        return '';
    }
    
    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"]
  3. подскажите, как мне реализовать следующее: автоматическая вставка шордкода в новость, где будет автоматическая ссылка загружаемого медиафайла, плюс, если это картинка, то будет отображаться размеры, вес и прочая информация…

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*