«

»

Мар 15

Скрытый помощник для вашего блога на WordPress

Скрытый ПомощникЗдравствуйте уважаемые читатели! С вами Сергей Бурдин.

Сегодня моя статья сделана по материалам Евгения Попова.

У него есть видео «Скрытый помощник для вашего сайта».

 

 

И вот я решил написать статью применительно непосредственно к WordPress.

помощникЯ покажу по шагам, как я делал вот такого «помощника» у себя на блоге.

Можете посмотреть У МЕНЯ НА БЛОГЕ, что получилось.

 

 

 

Но сначала посмотрите видео от Евгения Попова

Применение этому скрипту, я думаю вы найдете.

Сначала скачайте и распакуйте АРХИВ

В архиве вы найдете вот такие файлы

Помощник

  1. папка с картинками
  2. картинка кнопки (помощника)
  3. текстовой файл с кодом
  4. сам скрипт

Давайте я покажу как делал я, а вы решите сами, подходит ли вам мой вариант.

Я буду исходить из того, что вы имеете представление, где и какие файлы WordPress, лежат у вас на сервере и что вы имеете представление о файловом менеджере и редакторе Notepad++.

О программах можете почитать у меня на блоге «Установка WP на сервер»

Запустите файловый менеджер (я пользуюсь Total Commander)

Помощник

И так, зайдите на сервер, где у вас хранятся файлы WordPress.

Найдите тему вашего блога. Примерно у вас должно быть, что-то подобное (путь к теме вашего блога):

www/ваш блог/wp-content/themes/ваша тема/

themes – папка с темами

ваша тема – папка вашей темой – зайдите в нее

ПомощникВ этой папке нам нужны две папки, это папка с картинками и папка куда будем копировать скрипт.

Папка с картинками у меня называется images (у вас может называться иначе, например, imag или img)

 

 

 

 

 

 

 

 

Папка для скриптов, у меня называется js, если такой папки нет, создайте ее. Нажмите F7 и напишите js, потом нажмите ОК

Помощник

Теперь откройте папку plugins- helperimages и все картинки из этой папки скопируйте к себе в папку images у себя на сервере.

Для этого в файловом менеджере, Помощникв правом окне открываем папку images (правое окно, это ваш сервер).

В левом окне (это ваш компьютер) ищем папку с картинками (plugins- helperimages), выделяем все картинки и нажимаем F5 (картинки скопируются в папку на сервере).

 

Теперь надеюсь поняли, как копировать файлы к себе на сервер. Больше так подробно писать не буду (буду писать скопировать файлы оттуда-то, туда-то и все).

Теперь точно также, файл jquery.min.v1.4.2.js, копируем в папку js, на сервере.

ПомощникДальше нужна картинка помощника. У вас есть исходник, файл button.psd

Сделайте свою кнопку или картинку как у меня (можно в Фотошопе).

Размер должен быть близким к «исходнику» и сохраните в формате .png, скопируйте файл на сервер, в папку images.

Осталось совсем немного, прописать код. Будьте внимательны и все получится.

В папке со своей темой есть файл header.php, откройте его в редакторе Notepad++. Выберите файл и нажмите F4 – файл откроется в Notepad++.

Чтобы файл открывался по F4, нужны небольшие настройка Total Commander. Об этом читайте у меня на блоге в статье «Установка WP на сервер»

  Помощник

И так, открываем файл code.txt (на компьютере) и копируем вот эту строчку: <script src="js/jquery.min.v1.4.2.js"></script> — ее надо вставить в файл header.php — открываем файл.

Найдите закрывающий тэг </head> и перед ним вставьте строку кода.

Но сначала нужно прописать путь к папке js

Для примера покажу как прописано у меня:

<script src="http://myobzors.ru/wpcontent/themes/graphene/js/jquery.min.v1.4.2.js">
</script>

Следующий шаг.

Опуститесь в самый низ и вставьте код (код скопируйте из того же файла code.txt), перед закрывающим тэгом </body>.

Если закрывающего тэга нет (как у меня), вставьте в самый низ.

Помощник

Начинается код строкой <div id="help"> и

Заканчивается строкой </script>

ПомощникТеперь нужно прописать пункты, которые будут у «помощника» и ссылки на эти пункты.

 

 

 

 

 

Смотрите мой код и помощника на блоге и на этом примере, пишите свои названия и свои ссылки.

Если, что-то не понятно еще раз посмотрите ВИДЕО

<!— Блок перехода к форме заказа —>

    <div class="main"><a class="title" title="Перейти к форме заказа" href="#zakaz">Пока не готов помочь!</a></div>

    <!— Блок перехода к частым вопросам —>  

    <div class="main"><a class="title" title="Пиши, если есть вопросы" href="http://myobzors.ru/obratnaya-svyaz">Напиши мне!</a></div>

    <!— Блок телефонов —>

    <div class="main"><a class="title" href="javascript:void(0);">………….</a></div>   

        <div class="collapse">

            <strong>…………</strong><br />

            ………..,<br />

            ………..,<br />

            ………..,<br />

            …………

        </div>

    <!— Блок службы поддержки —>

    <div class="main"><a class="title" href="javascript:void(0);">………….</a></div>

  

Теперь сохраняем и закрываем файл.

Еще один шаг.

Осталось прописать стили. Для этого открываем файл style.css (в папке темы) и в самом конце прописываем код из файла code.txt

Помощник

Начинается строкой <style type="text/css"> и

Заканчивается строкой </style>

Сохраняем и закрываем файл

Все, помощник готов. Перезагрузите блог и помощник появится с правой стороны.

С уважением, Сергей Бурдин

RSS

2 комментария

  1. Дмитрий

    Здравствуйте ! Оочень занимательная статейка! Спасибо Вам за нее. Кстати, что касается "магнита 2.0" ,я знаю еще вот такой способ Дозвольте показать. Может кому и пригодится. Кликайте.

    1. Сергей
      Сергей

      Привет Дмитрий! Спасибо за предложение

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *