Блог Анатолия Савенкова

Первый год новичка в блогинге. Теория. Практика. Результат.

Рубрики

Как добавить кнопку в WordPress?

Фото: Как добавить кнопку в WordPress
Здравствуйте, друзья!
Сейчас я научу вас вставлять кнопки на панели добавления записи WordPress. Давайте для начала зайдем в визуальный редактор WordPress TinyMCE. Встроенный редактор по умолчанию имеет скудноватый функционал. Я предлагаю Вам расширить его возможности, дополнить и разнообразить.

Как и для чего можно добавить кнопку в редактор WordPress? Краткое описание

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

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

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

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

Расширяем возможности встроенного редактора с помощью плагина Ultimate TinyMCE

Фото: Логотип редактора WordPress - TinyMCE

Для расширения возможности TinyMCE можно устанавливать различные плагины, которых на сегодняшний день огромный выбор. Например плагин Post Editor Buttons или Ultimate TinyMCE.

Сейчас мы с вами рассмотрим, как работать с одним из таких плагинов. Желательно установить последнюю версию плагина с официального сайта WordPress.

Распакуйте из архива и сохраните в папку файлы плагина и скопируйте на сервер в директорию wp-content/plugins. Активируйте и зайдите в настройки в раздел «Параметры» — «Ultimate TinyMCE».
Фото: Дополнительные кнопки которые создает плагин

К уже существующему ряду кнопок, Ultimate TinyMCE установит Вам еще два ряда. Это примерно 40 новых настроек.

Фото: Настройка Ultimate TinyMCE

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

Итак, мы с Вами освоили базовые шаги для добавления новых кнопок в визуальном редакторе с плагином Ultimate TinyMCE.

Однако использование таких плагинов, способных менять редактор TinyMCE по своему усмотрению, добавляет к редактору функции, которыми Вы никогда не воспользуетесь. Ко всему прочему, каким бы ни был Ваш плагин, он нагружает вашу страничку, что очень влияет на скорость ее загрузки.

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

Если же хотите действовать как профессиональный веб-мастер, то теперь мы рассмотрим добавление кнопок вручную в виде кода.

Добавление кнопки < h2 > в текстовый HTML — редактор WordPress без дополнительных плагинов

Если в вашем текстовом и визуальном редакторе не хватает кнопок тегов
< h2 >,< p >, то откроем functions.php. В вашей теме это базисный файл. В нём находятся настройки вашей темы.

Его Вы обнаружите в разделе /wp-content/themes/{тут название вашей темы}/functions.php

Сюда мы прописываем:

Фото: Добавление кода в файл functions.php

Этот javascript создаст в админке следующий код:

Фото: Такой код мы должны увидеть в админке

Теперь авторизуемся в административной панели и, зайдя в редактор, видим наш с Вами результат:

Фото: Полученная кнопка

HTML или плагин, на чем остановить свой выбор?

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

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

Нет ничего плохого в использовании визуальной версии, но если ваша работа не сложна, то рекомендую пользоваться текстовой HTML — версией редактора Wordрress. В нём проще прописать правильный код, что конечно не отменяет вероятность допущенной ошибки именно в коде.

Добавляем кнопку «Мне нравится»

Фото: Кнопка "Лайк"

Актуальность и влияние кнопок «Мне нравится» или «like button» от социальных сетей vk.com, Facebook.com на СЕО для качественного и эффективного продвижения в поисковых системах указывают многие исследования, в частности, ресурс Seomoz.

Добавить эти кнопки можно либо при помощи соответствующих плагинов, либо при помощи базовых знаний HTML.

Давайте на конкретном примере попробуем добавить кнопку «мне нравится» от ВКонтакте.

Добавляем кнопку от ВКонтакте “Мне нравится” без плагина

    • Перейдите по адресу http://vk.com/dev/Like — это виджет, при помощи которого посетитель может выразить свое отношение к вашей статье.
      (если Вы еще не зарегистрировались, то сделайте это обязательно). Затем заполняете поля:Сайт/приложение: Подключить новый сайт.
      Название сайта: впечатываете название своего сайта или блога.
      Адрес сайта: Вводите адрес своего сайта или блога.Основной домен сайта зафиксируется автоматически.
    • Кликнете “Сохранить”.

Фото: Настройка виджета LIKE на сайте Vk.com - шаг 1

  • Ниже вы можете определить тип вашей кнопки:

Фото: Настройка виджета LIKE на сайте Vk.com - шаг 2
Далее мы должны вставить код в блог/сайт. Принято располагать кнопку “Мне нравится” от ВКонтакте в конце публикации, я же советую сместить ее чуть ниже комментариев, чтобы посетитель, прочитав статью, мог оценить, высказаться и только потом лайкнуть.

Чтобы кнопку ваши читатели увидели лишь в конце статьи нам необходимо:

  1. Скопировать ту часть кода, которую Вам выдаст Вконтакте от начала до:
Фото: Код виджета для вставки на свой сайт

Фото: Копируем код Like для вставки

  1. Вставить этот код в файл header.php перед закрывающимся тегом < /head >:

Фото: Место для вставки кода в файл header.php

  1. Затем весь оставшийся код копируем:

Фото: Скопировать необходимо только этот код

  1. В конце Вашей публикации вставляем скопированный код в файл single.php. При добавлении социальных кнопок все должно выглядеть как на этой картинке:

Фото: Вставка кода виджета Like в файл single.php

Теперь обновите страницу, и на вашем блоге или сайте должна появиться заветная кнопочка «мне нравиться» от ВКонтакте.

Самостоятельное добавление кнопки «Лайк» от Facebook на WordPress, без плагина

Для начала, откройте файл single.php, расположенный в каталоге шаблона. Затем в цикл вашего поста вставьте следующий код:

Фото: Вствляем вот такой код

Также существует еще один замечательный метод, позволяющий анализировать количество получаемых «лайков»:

Фото: Анализ получаемых лайков в посте

Вы вставили код? Теперь можно считать, что все получилось! Кликните на кнопку, чтобы проверить ее работоспособность.

Нужно ли себя утомлять добавлением таких кнопок?

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

С уважением, Анатолий Савенков

Видео по теме:

Также читают

Понравилась статья? Поделись с другом!!!

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

 ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???: