Выделение ключевых слов на своем сайте после авторизации на примере 1С-Битрикс

Выделение ключевых слов на своем сайте
  • 06.04.2015
  • 2974
  • 3.7
  • 0
  • Константин Винниченко

Что будем делать?

Нам необходимо реализовать подсветку ключевых слов на сайте, чтобы это было видно только авторизированным группам пользователей (пользователям с правами администратора). Для удобства просмотра, какие ключевые слова продвигаются на текущей странице и как они расположены, на сколько видны пользователю. Ключевые слова должны цепляться из мета поля keywords который находится в теге <head> и каждое слово разделено между собой пробелом, пример:

<meta  name="keywords" content="сеоап сео ап seoup seo up" />

Реализацию сделаем на системе управления данными (CMS) 1C-Битрикс.

Подсветку нужных нам слов будем выполнять посредством JavaScript с использованием плагина Higlighting и библиотеки jQuery (по ссылкам можно скачать последние версии файлов).

Быстрое подключение для всех CMS

Подготовка файлов

В корне сайта через FTP создаем папку js туда заливаем скаченный файл highlight.js, там же создаем файл main.js где будем подключать слова какие нам надо подсветить. Создаем папку css и туда файл main.css.

В css-файл (main.css)

Зададим стиль как будет показываться выделенное слово, например сделаем его фон желтым:

  .highlight  { background-color: yellow }

В js-файл (main. js)

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

jQuery(document).ready(function($) {
  $('body').highlight('заказать');
  $('body').highlight('услугу');
  $('body').highlight('продвижение');
  $('body').highlight('разработка');
  $('body').highlight('сайтов');
}

Дополнительно, если надо убрать выделение, то создаем элемент с id="highlight-plugin" и по клику он уберет текущую подсветку

  $('#highlight-plugin').removeHighlight();

В шаблон сайта

Где лежит шаблон Вашего сайта, вам придется найти самостоятельно. Туда надо добавить следующие строки внутри тега <head> и сохраняем:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"  src="/js/highlight.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<link type="text/css" rel="stylesheet"  href="/css/main.css">

Проверяем работу

Теперь на сайте указанный набор слов, если он найден на текущей странице, подсвечивается. Однако такая реализация будет видна всем пользователям сайта. Чтобы подсветка слов работала только для конкретных авторизированных пользователей, а ключевые слова подсвечивались только те, которые нужны на этой страничке – надо обратиться к помощи программистам, либо обратиться по телефону на сайте и мы реализуем эту функцию у Вас.
Далее рассмотрим пример такой реализации на популярной CMS 1С-Битрикс.

Подсветка ключевых слов в 1С-Битрикс

Подготовка файлов

Выше мы описали пример, как подготовить файлы, подробно на этом останавливаться не будем и подразумеваю, что у читателя есть базовые знания в области API Битрик. Файл highlight.js заливаем по указанному далее пути.

Правим шаблон сайта Битрикс

В тег head нужно вставить 2 строчки

<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script  type="text/javascript"  src="<?=SITE_TEMPLATE_PATH?>/js/highlight.js"></script>

В самом низу перед закрытием тега </body> вставляем:

<?
$US =array(1);
$USg =CUser::GetUserGroup(CUser::GetID());
if ( in_array($USg[0], $US) ) {
?>
<scripttype="text/javascript">
jQuery(document).ready(function($){
<?
// $s = "здесь список ключевых слов разделенных пробелом эти слова будут подсвечены";
$s =str_replace(","," ",$s."".$APPLICATION->GetPageProperty("keywords"));
$array =array_filter(explode(" ", $s));
$array = array_unique($array);
rsort($array);
foreach($array as $key => $value) {
if(strlen($value)>2){
echo"$('body').highlight('$value');\n";
}
}
?>
});
</script>
<?}?>

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

Правим css-файл template_styles.css

Добавляем строчку в файл template_styles.css, для того, чтобы выделялись наши слова, стиль можно изменить на свой

.highlight { background-color: yellow }

Проверяем работу подсветки слов в Битриксе

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


Полезно сделать

Рейтинг:
(3.66 из 5 - 4 голоса)
Сохранить страницу себе: