Как скопировать опрос вконтакте. Вставка ссылки на страницу с готовой анкетой

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

Вот такую анкету вы предложите заполнить вашим посетителям:

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

Что мы уже знаем? Мы знаем, как форма вводится в документ:

Name - обязательный элемент, имя формы. Method - как будет обрабатываться наша форма. Action - путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса.

Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):

Ф.И.О.


Ваш е-майл:

Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).

Как видите, нам еще далеко до конечного результата.

Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:

Ф.И.О.


Ваш е-майл:

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

Начнем мы с "переключателей":

Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ - ИЛИ. Или он - мужчина, или она - женщина, и то и другое выбрать не получится.

А теперь разберем код, который мы должны ввести в нашу форму:

Вы: Мужчина Женщина

Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега , type для которого мы указываем radio (type=radio). Name - обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) - должно быть обязательно разным.

Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках":

Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ).

Но давайте посмотрим код для этого элемента формы и разберемся в нем:

фантастику
боевики
приключенческие
мелодрамы
документальные

Итак, как мы видим, во всем виноват знакомый нам тег , только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое.

Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:

Какие фильмы вы любите смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные

Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":

Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое.

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

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

Франция США Англия Италия Австралия

Итак, выпадающий список вводится при помощи тега . Каждый пункт выпадающего списка вводится при помощи тега . Name - мы задаем только для тега , и оно относится ко всему списку. Value - мы задаем для каждого тега (пункта списка).

По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега

выбрать другой пункт по умолчанию:

В какую страну вы хотели бы поехать?

Франция США Англия Италия Австралия

Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега :

В какую страну вы хотели бы поехать?
Италия Франция США Англия Австралия

Вот и все премудрости с выпадающем списком.

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

Гордый Горец Недоделанный Рембо Ковбой В Шляпе Слезливый Бобби Историческая личность

Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега , то выпадающий список превратится в прокручивающийся:

Из этих актеров вам больше нравится:

Гордый Горец Недоделанный Рембо Ковбой В Шляпе Слезливый Бобби Историческая личность

Волшебство, да и только

Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки.

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

У этого сервиса опросов для сайта есть бесплатный тариф и два платных. Также есть специальные тарифы, в которые входит разработка опросов специалистами компании.

Функционал: Пользователям бесплатного тарифа дадут создать три опроса. В каждом опросе может быть до 10 вопросов. Заполнить опрос смогут всего 50 раз.

Опрос можно создать с нуля или выбрать шаблон с готовыми вопросами. Если создаёте с нуля, в вашем распоряжении 13 типов вопросов: от простого текстового поля до сетки с оцениванием по 100-балльной шкале. Дополнительно можно создать страницу приветствия и завершения.

К вопросам можно добавлять комментарии или фотографии, но лимит памяти на хранение файлов в бесплатном тарифе – всего 2 МБ. Ещё у Анкетолога есть защита от накрутки результатов.

Внешний вид: В бесплатном тарифе нет возможности менять внешний вид опроса. Опрос будет выглядеть так:

Статистика: Результаты опроса хранятся в личном кабинете. По каждому опросу отображается таблица с количеством переходов, процентом успешных заполнений и средним временем заполнения. При желании можно получать отчёты по электронной почте или скачать отчёт в формате DOC, PDF, SPSS или XLS.

Размещение опроса: Когда опрос готов, вы сможете скопировать прямую ссылку на него, встроить опрос в сайт или добавить туда виджет. Виджет – это небольшая закладка сбоку на странице со ссылкой на опрос. В обоих случаях придётся скопировать HTML-код и добавить его в исходный код страницы. Если не знаете, как это сделать, обратитесь за помощью в службу поддержки Анкетолога.

Стоимость: Бесплатно + платные тарифы от $12 в месяц. Полный список тарифов доступен на сайте компании.

Это полностью бесплатный сервис онлайн-опросов. Чтобы начать им пользоваться, нужен только Google-аккаунт.

Функционал: В Google Формах можно создавать неограниченное количество опросов любой длины. При создании опроса в вашем распоряжении 11 типов вопросов. Среди них: текстовые поля, переключатели и раскрывающиеся списки. Есть возможность добавлять к вопросам фотографии или видео с YouTube.

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

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

А ещё у Форм адаптивный дизайн: опросы удобно редактировать и заполнять с мобильных телефонов.

Статистика: Результаты обновляются в реальном времени. У каждого вопроса будет свой график или таблица.

Размещение опроса: Есть возможность отправить готовый опрос на почту, скопировать прямую ссылку на него или встроить опрос на сайт. В последнем случае Google покажет HTML-код для вставки опроса. Скопируйте его и разместите в нужном месте на странице. Если не знаете, как это сделать, обратитесь за помощью к разработчику или хостеру.

Стоимость: Бесплатно

Функционал: В бесплатный тариф входят три опроса, до 10 вопросов в каждом. Всего в опросе смогут поучаствовать 100 человек.

В конструкторе опросов – 11 типов вопросов. Кроме текстовых полей есть шкала оценки, выпадающий список, отдельные поля для адреса, электронной почты и имени. К вопросам можно добавлять комментарии, фотографии и файлы размером до 10 МБ. При желании можно создать вступительный и финальный текст.

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

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

Сбор статистики: Результаты хранятся в личном кабинете и обновляются в реальном времени. При желании можно также настроить уведомления по электронной почте или скачать отчёт в формате XLS.

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

Размещение опроса: Simpoll предлагает прямую ссылку и три типа HTML-кода для распространения опроса: кнопка со ссылкой, всплывающее окно или полное встраивание в сайт.

Стоимость: Бесплатно + платные тарифы от $2,5 в месяц.

У сервиса есть бесплатный тариф и три платных. Таблица с характеристиками тарифов доступна на сайте сервиса.

Функционал: В бесплатный тариф входит неограниченное количество опросов. В каждом опросе может быть до 10 вопросов. Всего в опросе могут поучаствовать 100 человек.

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

Опрос автоматически защищён от накруток. Это значит, что с одного IP-адреса его можно пройти один раз. На случай вопросов у Survey Monkey есть служба поддержки по электронной почте.

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

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

Статистику можно экспортировать в форматах CSV, PNG, PDF, PPT, SPSS и XLS.

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

Стоимость: Бесплатно + Платные тарифы от $45 в месяц

У этого сервиса для опросов есть бесплатный тариф и три платных. Сравнить тарифы можно на официальном сайте компании.

Функционал: В бесплатный план входит неограниченное количество опросов любой длины. При создании опроса предложат выбрать один из 100 шаблонов готовых опросов. Для тех, кто решит создать опрос с нуля, доступно 11 типов вопросов. Среди них: текстовое поле, переключатели с выбором одного или нескольких вариантов, рейтинг в звёздах или оценка по шкале.

Внешний вид: Сервис предлагает выбрать готовую тему или сменить цвет фона. Чтобы создать собственную тему или загрузить логотип, придётся оформить платный план.

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

Результаты можно получать по электронной почте или скачать в формате PDF, .XLS, .CSV, .XML или.HTML

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

Стоимость: Бесплатно + платные тарифы от $14 в месяц.

У сервиса есть бесплатный и платный тариф. Сравнительные характеристики тарифов описаны на сайте.

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

У Testograf также есть поддержка по электронной почте.

Внешний вид: Пользователям бесплатного тарифа нельзя редактировать оформление опроса. Опрос будет выглядеть так:

Статистика: Результаты опросов хранятся в личном кабинете. По каждому вопросу создаётся отдельная диаграмма. Кроме того, есть возможность настроить уведомления по электронной почте или скачать результаты в формате CSV, PDF, XLS.

Стоимость: Бесплатно + платный тариф для одного опроса за $30 и годовая лицензия за $300. За дополнительную плату можно привлечь респондентов из базы сервиса.

У сервиса есть бесплатный тариф и два платных. Сравнить характеристики тарифов можно на официальном сайте.

Функционал: Для пользователей бесплатного тарифа доступно неограниченное количество опросов, до 10 вопросов в каждом. В месяц в опросе могут поучаствовать 100 человек.

В конструкторе опросов есть 15 типов вопросов: от текстовых полей и форм ответа «да/нет» до полей с выбором картинки и шкал оценки качества. Дополнительно можно отредактировать текст на кнопках интерфейса.

Опросы Typeform можно интегрировать с другими сервисами. Среди них: Mailchimp, Trello, Google Sheets, Google Почта и т.д.

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

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

Есть возможность интегрировать опрос с Google Аналитикой. В этом случае вы сможете смотреть статистику по опросу в панели управления Google Аналитикой.

Размещение опроса: Встроить опрос на сайт можно целиком или в виде всплывающего приглашения. Также есть возможность встроить опрос в письмо и отослать по почте.

Стоимость: Бесплатно + платные тарифы от $30 в месяц.

Плагины для сайта на Вордпресс

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

Функционал: В одном опросе может быть только один вопрос и неограниченное количество вариантов ответа. Дополнительно можно выставить ограничения по IP-адресу, имени пользователя или файлам cookies.

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

Статистика: Результаты отображаются в конце опроса и панели управления WordPress. Есть возможность выбрать один из семи типов графиков для отображения результатов. А ещё опросы удобно просматривать на мобильных устройствах.

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

Дополнительно есть опция «Не записывать в журнал». Она позволяет каждому пользователю голосовать неограниченное количество раз.

Внешний вид: Плагин позволяет редактировать цвет и размер полоски подсчёта голосов.

Статистика:

Размещение опроса:

Стоимость: Бесплатно

Функционал: В одном опросе может быть только один вопрос и неограниченное количество вариантов ответа. В настройках можно выбрать показывать или скрывать результаты опроса. Ещё можно установить дату начала и конца опроса.

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

Внешний вид: Пользователям YOP Polls доступно 15 цветовых шаблонов. Шаблон можно скопировать и отредактировать, если ни один не пришелся по душе. Дополнительно можно редактировать название кнопки голосования и ссылки, ведущей на результаты.

Статистика: Результаты отображаются в панели управления WordPress и в самом опросе.

Размещение опроса: В панели управления WordPress появится кнопка, которая добавляет на сайт виджет с опросом.

Стоимость: Бесплатно

Какой сервис выбрать

Выбор сервиса опросов для сайта – это дело вкуса. У каждого сервиса примерно одинаковый набор инструментов, но они по-разному представлены в бесплатных тарифах. Поэкспериментируйте и создайте опрос в нескольких сервисах. Так будет проще определить какой из них подходит больше.

Лично мне по количеству функций больше понравились Survey Monkey и Typeform, а по дизайну и простоте использования – Google Формы.

И ещё: недостаточно просто собирать мнения, нужно вести диалог с клиентами.
Делитесь результатами опросов и старайтесь учитывать пожелания, чтобы сделать свой сайт максимально эффективным.

Тестируйте надежный украинский хостинг и

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

Однако, когда дело касается технической части, нередко возникают вопросы типа: "Как создать опрос на сайте?" или "Как сделать опрос с такими-то параметрами и детальной статистикой?". Конечно, для создания хорошо проработанного опроса на сайте нужно обладать определенными навыками.

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

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

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

После перехода по ссылке первым делом нужно зарегистрироваться. Это можно сделать указав свои личные данные либо войти в сервис через аккаунты facebook/google. При выборе второго варианта достаточно подтвердить разрешение сервису на доступ к вашим личным данным.

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

Создание опроса в сервисе SurveyMonkey

Далее, необходимо придумать заголовок для опроса. Я напишу "Оценка удобства работы с сайтом". Так как у меня будет простой опрос, я с левого радела перетаскиваю на правый блок "С множественными вариантами ответа".

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

Cохранение созданного опроса

Дальше мы можем выбрать вариант с размещением опроса на странице сайта либо во всплывающем окне. После выбора варианта встраивания на странице нам нужно указать размеры окна. Я задаю 500х430 пикселей и нажимаю далее.

Настройка размеров окна опроса

На следующем этапе можно настроить еще некоторые параметры опроса, мы нажимаем "Далее".

И наконец, сервис генерирует для нас код встраивания, который нужно вставить в том месте сайта, где должен быть опросник. Мы его копируем и вставляем в html страницу.

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

Отображение опроса на сайте

2. Poll Service - следующий очень простой и бесплатный сервис для создания опросов. Здесь регистрация необязательна, но желательна. На главной странице мы нажимаем на кнопку "Создать опрос" и указываем вопрос с вариантами ответа.

Также есть возможность добавить свободный вариант ответа, а в пунктах "Настройки" и "Защита от накруток" мы можем задать дополнительные параметры.

Создание опроса в сервисе pollservice

Следующим шагом нажимаем "Готово" и получаем код для встраивания. Мы его копируем и размещаем в необходимом месте веб-страницы.

Для проверки обновляем веб-страницу и видим появление опроса созданного с помощью этого сервиса. Если мы ответим на вопрос нам отобразят статистику по опросу.

Отображение опроса на сайте

3. Survio - последний по очереди сервис по созданию опросов в нашем списке. После перехода по ссылке следует зарегистрироваться указав личные данные в соответствующей форме. Далее нажимаем на кнопку "Создайте анкету" и выбираем вариант "Новый опрос".

Опционально можно было бы выбрать один из готовых шаблонных опросов однако, найти с нужными именно вам вопросами будет сложновато. В поле для ввода мы указываем название опроса и нажимаем "Продолжать".

Создание опроса в сервисе survio

Следующим шагом при выборе варианта размещения мы нажимаем на ссылку "Опрос на сайте" в блоке "Сайт". Наконец, копируем код и вставляем в нужном месте html страницы.

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

Отображение опроса на сайте

Итак, с помощью этих 3 онлайн-сервисов вы можете без проблем создавать опросы на вашем сайте. Остается лишь выбрать более удобный и тот, который вам больше нравится.

А на этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Здравствуйте, ребята!

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

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

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

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

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

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

Теперь объясню все подробно в текстовом формате.

Файлы, отвечающие за вывод каждого типа страниц

Если вы читали много статей на других блогах о реализации каких-то функций с помощью кодов (скриптов), то уверен на все 100%, что видели фразы наподобие:

• Вставляете этот код в файл, отвечающий за вывод главной страницы;
• Вставляете этот код в файл, отвечающий за вывод записей и другие.

Файлов, в которые может потребоваться вставлять коды, много. Но, что это за файлы? Все очень просто.

1. Вывод главной страницы - index.php;
2. Вывод записей - файл single.php;
3. Вывод страниц - файл page.php;
4. Вывод архивов и рубрик - archive.php;
5. Вывод подвала - footer.php;
6. Вывод страницы поиска - search.php;
7. Вывод сайдбара - sidebar.php;
8. Файл стилей - style.css;
9. Файл вывода страницы 404 - 404.php.

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

Осталось лишь ответить на вопрос, как же определить нужное место в каждом из файлов?

Определяем место вставки кода

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

Первое место, идентичное для всех шаблонов - область в файле Header.php. Это открывающий и закрывающий теги .

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

Данные теги размещены в самом верху файла Header.php.

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

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

Второе место, которое также идентично для всех шаблонов, находится в файле, отвечающем за вывод подвала - footer.php.

Скрипты можно подключать не только, вставив их между тегами в файле Header.php. Можно также их подгрузить через файл footer.php, тем самым ускорив загрузку страницы сайта.

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

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

Чтобы реализовать такой вариант, необходимо открыть файл footer.php и вставить скрипт перед закрывающимся тегом body. Находится он в конце содержимого файла, так как отвечает за окончание области страницы.

Как видим, все скрипты я вывел именно в данной области, перед закрывающим тегом (выделил синей рамкой). Кстати, вывел их я через загрузку из файлов, а не размещением самих скриптов в данной области. После этого я значительно ускорил работу блога. Как это сделать, будет отдельная статья. Ждите!

Надеюсь, что когда вам будут говорить вставить код в эти области, вы без проблем все сделаете.

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

• Вывод похожих записей;
• Вывод формы подписки;
• Вывод социальных кнопок и так далее.

Все эти вещи вставляются после основной части контента, то есть после окончания статьи. У каждого разный код шаблона и, поэтому, универсального ответа на вопрос "Где у меня заканчивается код вывода статьи?" просто нет.

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

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

Покажу на примере браузера Google Chrome. В других браузерах данная функция также имеется, то может немного по другому называться.

• Google Chrome - просмотр кода элемента;
• Firefox - исследовать элемент;
• Opera - проинспектировать элемент.

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

Переходим в просмотр кода элемента (Google Chrome). Жмем правой кнопкой мыши по пустой области страницы.

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

Вот, как выглядит эта панель.

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

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

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

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