Как сделать кнопку на сайте ссылкой

Как сделать кнопку ссылкой

Родительские страницы:

  1. Главная
  2. Блог
  3. Как сделать кнопку ссылкой

Опубликовано:2013-03-05

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=»submit»:

    Кнопка-ссылка

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Демо

«Живая» демонстрация такой кнопки-ссылки:

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

    
         Кнопка-ссылка

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

    Кнопка-ссылка

приведёт на адрес /example/? вместо правильного /example/.

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

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Нередко элемент BUTTON просто помещают внутрь ссылки:

Кнопка-ссылка

Но согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Кнопка-ссылка

Но такая кнопка не работает при выключенном JavaScript, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Нестандартные расширения CSS

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

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) поддерживают нестандартные префиксированные варианты свойства appearance, значение button которых позволяет оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {
       -moz-appearance: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Демо

«Живая» демонстрация такой кнопки-ссылки:

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

  • Internet Explorer 10 (IE10)
  • О компетентности и специализации

Метки этой заметкиRSS-лента блогаНедавние заметки блогаПопулярные заметки блогаМетки блога

Источник: http://Tanalin.com/blog/2013/03/link-button

Сделать ссылку HTML с оформлением кнопки CSS

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

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

И также она выполняет работу по скачиванию материалов, то есть архива с ним.

Как правильно вставить ссылку в HTML

И начнем с простой ссылки перехода, что работает на атрибуте < а > и безусловно с указанием в ссылке адреса, куда будет осуществляться сам переход, где только срабатывает при нажатие клика.

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

1. download — что отвечает за указание на файл под скачивание файла, архива и другое.

2. name – тот самый якорь.

3. title — это когда наводит клик и появляется подсказка, что за ранее была прописана при установке.

4. accesskey — здесь происходит активация ссылки, что срабатывает при комбинации заданных клавиш.

5. coords – выставляет координаты, что прописаны в активной области.

6. hreflang – распознает язык текста по установленной ссылки.

7. rel — здесь идет соотношение между теми ссылками, что прописаны текущим документами.

8. rev — производится соотношение между текущим и куда будет ссылаться документ.

9 shape — отвечает за указание формы области ссылки на картину или изображение.

10. tabindex — Будет происходить указанная последовательность переключения между поставленными ссылками при клике на клавишу Tab.

11. target — показание окна, где будет сохранен скаченный файл при выборе.

12. type — тип или название документа, куда происходит переход.

Как сделать открытие ссылки в новой вкладке

Для того, что открылась при переходе новая страница и не терять страницу с которой перешли, то здесь ставим target и также с атрибутом _blank срабатывает. Пример HTML-кода ссылки на открытие новой страницы.

Здесь делаем клик на переходЕсть такая тема перелинковка, что вы замечали в разных статьях, где под ссылку ставят ключевые слова, здесь устанавливаем.Ключевое словоОна же трастовая ссылка:Перейти на интернет ресурс ZorNet.

RuНекоторые ставят на демонстрацию материала, здесь можно вписать такой тип, с кнопкой, где возможно написано DEMO или ставится изображение, и по клику на его происходит переход.

Как сделать ссылку на скачивание файла, архива

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

Скачать Когда вы сделаете клик, то автоматически появится окно, где можете нажать обзор и выбрать папку, куда скачать и припарковать архив.

Или просто выставить на «Сохранить файл» что автоматически на рабочий стол, начнет вкачиваться.

Как сделать из ссылки кнопку с эффектом

Безусловно самым лучшим оформлением под ссылку идет оформление кнопки, это задействуем CSS при создание. Так будет идти HTML-код под ссылку: ОткрытьCSS.

zornet_ru a {   display:block;   width:100px;   margin:auto;   padding: 9px 17px;   background:#3d9c3e;   color:#fff!important;   text-decoration:none;   font-size:17px;   text-align: center;   border: 2px solid #c5baba;   border-radius: 34px; } .

zornet_ru a:hover {   color:#fff!important;   text-decoration:none!important;   background:#38cc3a;

}

Такая кнопка получится. Это по умолчанию:

Здесь уже задаем палитру цвета в hover — где только срабатывает при наведение.

PS — здесь описаны различные ссылки с разноплановым функционалом, но с одним значением, которые из себя представляют простую вариацию на вариаций тега < а >, что несут различные варианты, которые задаются под разноплановые задачи.

Читайте также:  Типы данных в php

Источник: http://zornet.ru/load/sdelat_ssylku_html_s_oformleniem_knopki_css/145-1-0-8263

Как сделать кнопку на сайте ссылкой

Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop и разместить её на сайте.

Кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.

1. Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.

Второй важный момент — это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта http://www.seoklub.ru/

2. http://www.seoklub.ru/Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg).

3.<\p>Теперь сделаем относительную ссылку (относительная ссылка — это ссылка работающая в пределах одного сайта).

4.<\p>Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!

На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

Есть вот такой интересный сервис — dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.

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

Обратите внимание

Первое поле TEXT — вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.

Выбираем шрифт Font. Выбираем Sans — serif, Bold — Жирный, Italic — курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.

Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.

Color — цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.

Text Shadow — тень у текста. Distance — расстояние от текста до тени, Color — цвет тени. Пробуйте. Вы будете видеть результат.

Output type — Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.

Переходим к правой части экрана. Button Type — возможные варианты — круглая, квадратная и с закругленными углами. Я оставила круглую.

Background — фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент — перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.

Важно

Border — граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.

Shadow — тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.

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

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

Источник: http://SeoKlub.ru/kak_sdelat_knopku_na_saite.html

Как сделать кнопку

Часто в практике web-мастера возникает необходимость в установке на сайт различных кнопок.  Причем таких кнопок, нажав на которую, посетитель попадет в другой раздел сайта, или на другую страницу или даже на другой сайт, так как  эта кнопка будет работать как ссылка.

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop, а потом  разместить её на сайте.

Кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.

1.<\p>

Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.

Второй важный момент — это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта http://www.sitedelkin.ru

2. http://www.sitedelkin.ru/

Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст, а картинку (графический файл), в данном случае это будет наша с Вами кнопка (графический файл img.jpg).

3.<\p>

Теперь сделаем относительную ссылку (относительная ссылка — это ссылка, работающая в пределах одного сайта).

4.<\p>

Читайте также:  Интернет-бизнес на спорте: текстовые онлайн-трансляции

Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!

Совет

На что еще хочу обратить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0, иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

Вот вариант кнопки с изменением цвета.

 Вставьте вот такой вот код в то место, куда Вам нужно:<\p>

Только ссылки поставьте вместо слов свои. Должно работать. Проверял.

Программа Agama Web Buttons

 Скачать программу Agama Web Buttons.     

C этой программой вы сможете легко создать на профессиональном уровне кнопки для сайта за считанные минуты для своего Интернет проекта. Качество кнопок по словам разработчиков будет достаточно высокого уровня, а значит не стыдно будет их потом размещать в сети. Проверить можете сами, для этого надо просто скачать и установить на компьютер программу Agama Web Buttons.  

В архиве имеется русификатор и инструкция по его установке.

Приложение позволит вам создавать огромное количество разных как 2D так и 3D кнопок разного стиля, например стеклянного или металлического. Можно выбрать шаблон пластик или сделать кнопку в стиле XP.

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

Для этого в Agama Web Buttons встроен удобный редактор, он позволит даже новичку отредактировать уже существующую кнопку под свои потребности. 

Источник: https://sitedelkin.ru/kak-sdelat-knopku.html

Как сверстать кнопку в письме — eSputnik

Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить порморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.

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

Краткое содержание статьи, как сверстать кнопку:

  • Кнопки в виде картинок
  • Campaign Monitor
  • MailChimp
  • eSputnik

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец.

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

Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.

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

Пример кода для тестирования:

      Купить  <\p>

 

Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

Оцените eSputnik в действии!

3. MailChimp

Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons. 

Также компания рекомендует использовать адаптивные кнопки, в таком случае ширина призыва к действию будет зависеть от объема текста внутри ячейки таблицы.

Пример кода для тестирования:

 

   

 

      Read More Stories On Our Blog    

Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.

4. eSputnik

Мы верстаем наши кнопки используя в качестве основного элемента — ссылку , которая обернута в элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки . Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.

Вот так выглядят CSS-классы со стилями наших кнопок. Вы можете экспериментировать с этими стилями, чтобы добиться желаемого результата.

А это HTML верстка самой кнопки:

Пример кода для тестирования:

ПОКУПКИ ONLINE

 

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

При создании письма выбираете блок кнопку и добавляете её в письмо.

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

Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:

  • отступы,
  • обводку,
  • выравнивание,
  • адрес ссылки,
  • расположение в письме,
  • адаптивность,
  • цветовую гамму.

Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.

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

До новой встречи!:)

P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)

Источник: https://esputnik.com/blog/kak-sverstat-knopku-v-pisme

Как создать кнопку для сайта с помощью онлайн генераторов

Кнопки, как и любой элемент на странице сайта, создаётся с помощью HTML кодов и CSS стилей. Несмотря на то, что это одни из самых простых элементов дизайна сайта, возиться с кодами не особенно хочется. Поэтому были созданы специальные онлайн генераторы, которые позволяют создать кнопку для сайта с помощью простых и понятных визуальных интерфейсов.

В этой статье я рассмотрю три генератора кнопок для сайта, и покажу, как их можно использовать в условиях WordPress. Суть работы этих инструментов проста – с помощью разных инструментов настраивается дизайн и параметры кнопки, а затем просто генерируется код, который можно использовать на сайте.

Daruse.ru

Если вы хотите создать кнопку для сайта быстро, то этот генератор подойдёт вам, так как в нём минимум настроек. Он находится тут.

Из доступных опций есть текст кнопки, цвет текста, кнопки и границы, толщина границ, настройка отступов, закругление углов. А также есть возможность установки ссылки, которая будет открываться при клике на вашу кнопку. Не достаёт только опций, связанных с эффектом, который включается при наведении мышки. Поэтому кнопки из этого сервиса выглядят статично.

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

Maxzon.ru

Это более сложный инструмент, и создание кнопки для сайта на нём потребует некоторого времени, так как настроек здесь уйма, можно подкрутить всё, что угодно. Находится он тут.

Есть возможность настроить вид кнопки в обычном состоянии, при наведении мышки и при нажатии. Можно настраивать размеры самой кнопки, шрифта, а также все цвета. Можно создать множество разнообразных эффектов.

Когда с настройками вы наиграетесь, нажмите кнопку «Получить код и стиль кнопки». В результате вы получите HTML и CSS код кнопки. HTML код нужно установить на сайте в том месте, где должна быть кнопка.

Обратите внимание

Вместо символа # в этом коде следует записать ссылку, которая будет открываться при клике на неё. CSS код нужно установить в файл стилей. В WordPress это файл темы style.

css, либо тема может поддерживать внедрение стороннего кода в своих настройках.

После установки обоих кодов кнопка будет работать.

Dbmast.ru

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

Традиционно есть настройки для размера кнопок и шрифта, цветов и формы. Можно задать эффект при наведении и нажатии на кнопку. Всё интуитивно понятно.

Чтобы получить код кнопки, нажмите на саму кнопку на предпросмотре. Вы получите CSS стиль. Его поместите в файл темы style.css или в настройки темы, если такие у вас есть. А чтобы вывести саму кнопку в нужном месте, используйте такой код:

Текст на кнопке

Замените символ # на нужную вам ссылку, и укажите необходимую вам надпись на кнопке.

Источник: https://wp-system.ru/sozdanie-sayta/temyi-dlya-wordpress-dizayn-sayta/sozdat-knopku-dlya-sayta/

Как сделать на сайте кнопку ′добавить в избранное′ — в закладки браузера.?

Что ж, пришло время написать несколько коротеньких постов на в общем-то полезные темы!

Одна барышня, попросившая организовать на её сайте кнопку «добавить страницу в избранное браузера», заодно поинтересовалась, как у меня устроен фиксированный сайдбар и меню.?. и коли эти функции кого-то интересуют, — значит, возможно, потребуются и посты.

Сегодня прикрутим и настроим на сайте кнопку «страницу в избранное».

Я, признаться, у себя на блоге такое чудо не использую: не знаю, как-то не раскушал прок… Но если у вас появилось желание реализовать такую кнопочку «у себя…», давайте приступим. Дело очень простое — займёт минут десять труда и, к тому же, как бы то ни было — очень полезное принципиальное js-познание…

В следующих статьях реализуем «прилепленное» меню и сайдбар (ссылки на эти статьи в комментариях)…

создаём кнопку «добавить в избранное»…

Что нам для этого потребуется?..

Во-первых: определиться с географией расположения сего элемента) От этого будет зависеть «устройство» селекторов css.

В-вторых, конечно же, не забыть сделать бэкап сайта.

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

Итак: в созданной, или уже существующей папке под именем js, теперь необходимо создать js-файл… в который поместим необходимую на сегодня функцию.

К слову:

Важно

нам требуется к так называемому событию onClick какого-то элемента сайта прикрутить определённую JavaScript-функцию: сегодня — это строки данные чуть ниже.

Добавить в закладки

Продолжим… дадим новому файлу понятное имя, такое, чтобы в дальнейшем было легко определить его назначение…

Назовём, скажем, function-isbranoe.js (имя можете выбрать своё собственное).

Теперь в созданный файл пропишем такие чудо-строки: т.е саму JavaScript-функцию.

function addFavorite(a) { var title = document.title; var url = document.location; try { // браузер Internet Explorer window.external.AddFavorite(url, title); } catch (e) { try { // браузер Mozilla window.sidebar.addPanel(title, url, «»); } catch (e) { // браузер Opera if (typeof(opera)==»object» || window.sidebar) { a.rel=»sidebar»; a.title=title; a.url=url; a.href=url; return true; } else { // Unknown alert('Кликните Ctrl-D чтобы добавить страницу в закладки'); } } } return false; }

Практически всё готово! остаётся только расположить «физически» саму кнопку во фронтенде сайта: где-то в сайдбаре, ну или ещё как-то…

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

…я рекомендую кнопь «добавить в закладки браузера» как-то обработать стилистикой css: завернуть в какой-то div класс…

к оглавлению $

стили css для кнопки «добавить страничку в избранное»…

Например, так: у меня этот класс miha-isbraly.

Получится как-то так…

Страницу в избранное!

А вот примерные стили:

.miha-isbraly a { background: #fff; color: rgb(0, 132, 143); border-radius: 4px 4px; box-shadow: 1px 0 1px 0 #b7b7b7; border: 1px solid #ccc; text-decoration: none; }

Завершение:

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

Открываем файл footer.php и перед закрывающем тегом прописываем строку-привязку нашего созданного js файла: т.е подключим его, указав путь для системы WP…

И вновь я рекомендую поступить несколько иначе, подключая подобные плюшки js.

А именно: поместите такой код (который, кстати сказать, можно дополнять и иными js строками, но — я бегу — обо всём по порядку…)

/** добавим в футер wp_footer скрипты js **/ function functionss_add_js_my_scr (){ echo

Источник: https://mihalica.ru/kak-sdelat-na-sayte-knopku-dobavit-v-izbrannoe/

Ссылка на основную публикацию