Автоинструктор

Инструктор
Интернет Решения
Заказ рекламы! На сайте сутки, неделя, месяц! Возможность заказов кликов от 150 так же вариант как показы от 5000 за более подробной информацией и размерами баннеров, текстовых ссылок обращайтесь через форму обратной связи!
  • инструктор акпп спб
  • Каталог статей
  • Каталог сайтов
  • Каталог файлов
  • Видео бесплатно онлайн
  • Обратные ссылки
  • Карта сайта
  • строительство домов
  • ЭКЗАМЕН ГИБДД

    Вариант или так же можно заманчиво но стоит ли

  • Категории раздела
    Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

    Каталог статей

    Главная » Статьи » Мои статьи

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

    1. Что такое якорь (html якорь)?

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

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

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

    2. Установка якоря внутри статьи

    Итак, прежде всего нам необходимо как-то отметить то место, КУДА будут переходить читатели. В этом месте нам сделать метку, т.е. установить якорь. Открываем вкладку HTML в визуальном редакторе и в нужном месте пишем такой код:

    <a name=«ЯКОРЬ»>текст</a>

    Вместо слова ЯКОРЬ вы указываете какое-то имя. Оно может быть связано с темой статьи (или фрагмента статьи) или быть произвольным, например, а1. Лучше писать тематический якорь – при возможном будущем редактировании статьи вам самим потом будет намного легче разбираться с ее структурой.

    Вместо слова «текст» можете что-то указать, а можете не указывать, тогда ваш якорь будет писаться таким образом:

    <a name=”ЯКОРЬ”></a>

    Понятно, что этот якорь для посетителей будет не виден, в отличие от первого варианта написания.

    Собственно, вот этим и ограничивается функционал кнопок для добавления якоря: появляется окно, куда надо вписать текст якоря. Вторую часть работы вам все равно придется делать вручную.

    Кстати, и это важно: когда пишите кавычки в коде указывайте их в латинской раскладке клавиатуры, а не русской, т.е. надо так – “ ”, а не так –«». Иначе WordPress сам добавит еще дополнительные кавычки.

    Посмотрим, как сделать в статье ссылку на анкор. Например, в плане статьи надо сделать ссылку на якорь соответствующего раздела. Конечно, статья должна быть уже написана – так удобнее.

    Делаем весь пункт плана ссылкой: выделяем его мышью и жмем на кнопку визуального редактора «Вставить/редактировать ссылку». Появляется окно, где надо заполнить графы.

     установка якоря в статьеРис.1 (Все скриншоты кликабельны)

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

    Итак, нам надо указать адрес ссылки (графа URL). Сначала пишется знак решетки — #, а потом пишется якорь. Я написал #1razdel. Потом, по желанию, пишите заголовок ссылки и нажимаете кнопку «Добавить ссылку».

    Потом устанавливаете якорь на второй раздел – делаете ссылку, на третий раздел и т.д.

    3. Установка якоря в другой статье

    Сразу же – предупреждение: сейчас я буду говорить об установке якоря в другой статье в пределах одного сайта.

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

    Потом открываете ту статью, с которой будет идти ссылка, и оформляете ссылку обычным порядком. Единственное отличие – в адресе (URL) ссылки:

     установка якоря в статьеРис.2

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

    Чуть выше визуального редактора расположена строчка «Постоянная ссылка». Чтобы увидеть ее полностью, кликнем по кнопке «Редактировать»:

     как вставить якорь в статьюРис.3

    Все, что написано в окошке и есть относительный адрес нашей страницы. Копируем текст из окошка и вставляем в графу всплывающего окна «Добавить/ редактировать ссылку»:

     как вставить якорь в статьюРис.4

    Нам надо кое-что дописать:

    • Поставить слэш (косую черту) перед названием статьи, этим мы укажем, что это относительный путь, т.е. в пределах сайта;
    • Завершить написание адреса, указав расширение — .html ;
    • Написать наш якорь — #ИмяЯкоря (у меня а1).

    Должно получиться так:

    /tak-byl-li-dzh-vashington-polkovodcem.html#a1

    Нажимаем кнопку «Добавить ссылку». Переходим на сайт, проверяем.

    4. Установка якоря в статье на другом сайте

    Для установки якоря на другом сайте в любой статье делаем все точно так же, как написано выше, только в URL ссылки указываем абсолютный адрес, начиная с http://.

    В окне для добавления ссылки в графе URL у вас должно быть написано так:

    http://www.novichkoff.ru/tak-byl-li-dzh-vashington-polkovodcem.html#a1

    5. Упрощаем работу по установке якорей с помощью шорткодов

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

    Заходим на страницу настроек плагина:

     как вставить якорь в статьюРис.5

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

    Строка «Якорь»: начало тега — <a name=””> , конец тега — </a>.

    Строка «Якорь-ссылка»: начало тега — <a href="/.html#">, конец тега — </a>.

    Немного поясню. Строка «Якорь-ссылка»: написано все, что раньше вам надо было писать руками. Осталось только вставить URL страницы (после слеша) и якорь (после решетки).

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

     как вставить якорь в статьюРис.6

    Устанавливаем курсор в нужном месте (у меня – после слова «победы») и кликаем по кнопке «Якорь». У нас сразу станет такая же картина , как на рис 6: кнопка «Якорь» обзавелась слешем, а в тексте появилась первая часть нашего кода. Вписываем между кавычками сам якорь. Потом нажимаем на кнопку «/Якорь» — тег закроется.

    Теперь устанавливаем ссылку на наш якорь. Открывает статью в нужном месте, выделяем — как при копировании — любое слово или фразу и нажимаем кнопку «Якорь-ссылка»:

     как вставить якорь в статьюРис.7

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

    Мне кажется, что с шоркодами работать гораздо удобнее. А Вам?
    И еще 2 важных совета:

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

    P.S. Доставка цветов – это невероятно удобно. Представьте, завтра 8 Марта, или день рождения, или годовщина свадьбы, а вы в командировке. Как поздравить любимую женщину? Звонок – это само собой. А если утром — цветы?

    Категория: Мои статьи | Добавил: www.instructorakpp.ru (31.07.2014)
    Просмотров: 579 | Теги: Как сделать, навигацию, удобную | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]