Добавляем атрибут title в редактор WordPress. Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)

) - вещь важная и удобная во многих смыслах.

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

Блок ссылок с уникальными пиктограммками

Подобная возможность есть во многих премиум темах, полагаю, есть и плагины создающие подобное меню. Мое решение подойдет для любой темы WP, оно не окажется избыточным или несущим какую-либо дополнительную нагрузку на сервер, как это иногда бывает с плагинами. Для его реализации необходимы минимальные знания css и html (можно почитать об этом тут – htmlbook.ru ) и какой-либо html-редактор, например, бесплатный notepad++ (офсайт – notepad-plus-plus.org ).

Итак, первое, что нужно сделать, это создать произвольное меню – Консоль > Внешний вид > Меню (тут и далее, путь в официально локализованной версии WP ). Затем, в случае использования виджета произвольного меню Консоль > Внешний вид > Виджеты перетащить виджет в блок сайдбара и выбрать созданное ранее произвольное меню. Думаю, что данные действия просты и не нуждаются в скриншотах. Для темы “Twenty Ten” (wordpress.org/extend/themes/twentyten ) результат будет выглядеть так:

Для стилизации пунктов требуется не многое, сами иконки, предварительно загруженные в папку изображений используемой темы и небольшие правки внесенные в файл стилей темы – style.css . Иконки-пиктограммки можно найти так – google.com/search?q=бесплатные+иконки . Файл стилей находится, обычно, в корне папки используемой темы.

Для персонализации ссылок необходимо как-то выделить каждую из них, т.е. сделать так, чтобы она была уникальной по какому-либо из доступных к селекции средствами css признаков. В консоли WordPress можно добавить атрибут title (htmlbook.ru/samhtml/ssylki/atributy-ssylok) к ссылкам произвольного меню. Именно этот атрибут я и предлагаю использовать. Для определения значения этого атрибута нужно заполнить поле “Атрибут title” при редактировании ссылки Консоль > Внешний вид > Меню > Ваше произвольное меню, см. скриншот:

При заполнении значения данного поля важно использовать только латинские символы!

Для пункта “Записи” я использую значение “posts”, т.е. так:

Осталось изменить свойства данного элемента, для этого прописываем в файл style.css следующее:

Widget_nav_menu a { list-style: none; background: url(images/posts.png) no-repeat left center; }

Поясню. .widget_nav_menu – класс произвольного меню; a – селектор ссылки с атрибутом title, значение которого – posts; list-style: none; – убираем маркер пункта меню; background: url(images/posts.png) no-repeat left center; – определяем фоновый рисунок – пиктограммку данного конкретно пункта, т.е. персонализируем его. С последним свойством и его значениями можно ознакомиться по ссылке – htmlbook.ru/css/background , я лишь поясню, что images/posts.png это относительная ссылка на файл иконки которую вы желаете увидеть для данной ссылки, а left center это правила расположения данной иконки.

WordPress — очень удобная платформа для оптимизации. Если руки растут из правильного места, и вы хоть что-то знаете о понятиях SEO, тогда вы сможете правильно оптимизировать сайт на WordPress. В итоге, после написания определенного объема контента и публикации постов, люди на сайт начнут приходить прямо из поиска, и вам ничего не нужно будет делать. Останется лишь усовершенствовать методы монетизации ожидать приток денег. Это лучший способ сделать пассивный доход в 21 веке, и вы обязаны им воспользоваться!

Огромную пользу для оптимизации WordPress играет атрибут the Title. Без него сложно добиться нормальных позиций в поиске.

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

Как добавить атрибут the Title к каждой странице и записи

Дело в том, что этот атрибут уже имеется на всех страницах вашего проекта. Сайт WordPress автоматически генерирует все необходимые мета теги, если этого не делает хозяин проекта. Но проблема в том, что делает это движок никудышно, в расчете на то, что вас не особо волнует SEO. Обычно, он вставляет какие-то ближайшие слова вместо того, чтобы качественно прописать the Title. Кроме того, возможно, шаблон не предусматривает этот атрибут для каждой страницы персонально. Вам необходимо это изменить.

Добавить мета теги, а точнее атрибут the Title на сайт WordPress вы сможете вручную — через код. Вам необходимо будет добавить специальные условия elseif, чтобы каждый пост (post), рубрика меню (category) и персональная страница (page) обзавелись собственными параметрами the Title. Но проблема в том, что хоть прописать нужно и не очень длинный код в 5-6 строчек, но новичок этого сделать не сумеет. Потому необходимо искать другие способы как изменить слова Тайтла и отредактировать этот атрибут. И такой способ есть — это установка специальных плагинов.

Плагины, которые активируют теги WordPress

SEO Title Tag

Это узконаправленный плагин, который как раз рассчитан на атрибут the Title. Вам необходимо будет прежде зайти, и через установить на сайт плагин SEO Title Tag. После этого еще нужно будет кое-что проделать с кодом. Только ничего придумывать не придется. Зайдите в редактор файла header.php. Заходите на него через хостинг, иначе ключевые изменения не активируются. Найдите в файле header.php замкнутые теги title. Теперь удалите все, что содержится между эти двумя тегами и добавьте следующий код:

else { bloginfo("name"); wp_title();} ?>

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

WordPress seo by yoast

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

Для начала скачайте плагин WordPress seo by yoast. Во время активации модуля вам предложат отслеживать работу инструмента, якобы для улучшения поддержки. Лучше запретите это, чтобы блог не прогружался. Если ранее вы уже пользовались плагинами для мета, тогда нажмите кнопку «Импортировать», чтобы сохранить все прописанные теги и ключевые слова сайта. Далее пройдет процедура передачи данных, все теги и ключевые слова закрепятся уже за новым плагином, ваше мета сохранится, и вы будете оповещены об успешном окончании импорта информации.

После установки и импорта данных в плагин, обязательно зайдите в меню, и настройте его. Чтобы страницы получили мета, необходимо отметить какие именно теги вы будете вводить самостоятельно, а какие доверите модулю. Обязательно отметьте галочку «Использовать в мета ключевые слова». А чтобы для каждой страницы можно было задавать отдельный тайтл, воспользуйтесь функцией Title separator — это разделитель, который отдельно воспринимает заголовок и тайтл страницы. Если вы его не активируете, тогда ключевые слова тайтла автоматически превратятся в заголовок, либо в начало текста страницы, что очень нежелательно для оптимизации.

Еще одно преимущество плагина WordPress seo by yoast — это возможность редактировать тайтлы сразу для всех разделов сайта. У модуля есть встроенный массовый редактор, который предоставит вам список всех доступных страниц. Вы сможете не заходя во все разделы, изменить тайтлы для страницы. Буквально за 5 минут так можно отредактировать до 10 страниц. В ином случае у вас бы на это ушел битый час. Ведь чтобы изменить title без редактора, вам необходим заходить в меню Ворпдерсс в раздел «Страницы», выбирать нужный раздел из списка, и уже там снизу, где мета, вводить свой тег.

All in One SEO Pack

Это ключевой конкурент предыдущего плагина. По мнению многих, этот модуль даже лучше. Ведь он ничем не уступает инструменту WordPress seo by yoast. Вам предстоит пройти аналогичную процедуру установки и активации плагина. Меню настроек у этого модуля немного отличается, но в целом все очень похоже. Вы сможете либо задать автоматическую генерацию тайтлов, основанную на копированни заголовков страниц, либо активировать теги в разделе «Мета», чтобы прописывать ключевые слова самостоятельно.

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

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

Атрибут title

Прекрасно. Теперь наш “Атрибут title” будет вставляться автоматически и нам не понадобиться, его вставлять в ручную. Что сэкономит наше драгоценное время при написании статей.

После того, как мы вставляем картинку.

Готовая картинка с “Атрибут title”

Видим, что “Атрибут title” вставляется автоматически (Рис.8). Это видно при наведении курсора мыши на изображение, после чего появляется описание “Наша картинка” (п.1).

В последней версии WordPress, когда был изменен текстовый редактор “Атрибута title” нет и он там не работает, что очень печально. Так как “Атрибут title” используется для оптимизации блога и появления текста при наведении мышью на картинку.

Хотя новый редактор довольно интересен и напоминает мне . Хотя конечно к нему нужно привыкнуть.

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

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

Прекрасно! Вот мы и познакомились с прекрасной возможностью автоматической вставки поля “Атрибут title”.

Пользуйтесь и экономьте свое время.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Большая часть веб-контента содержит изображения, однако немногие владельцы веб-сайтов оптимизируют картинки для лучшего ранжирования сайта в поиске. WordPress предоставляет возможность добавления альтернативного текста и заголовка изображения в соответствующие теги. Рассмотрим, в чем заключается разница между атрибутами alt и title и как их использовать для работы с изображениями на сайте.

Что такое тег alt у изображений - описание картинок

Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.

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

Виртуальный хостинг сайтов для популярных CMS:

Рекомендации по заполнению этого тега, что писать в ВордПресс

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

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

Задайте атрибут alt в соответствующем поле – он обычно состоит из 2–3 слов и должен описывать непосредственно то, что изображено на картинке. По желанию в этом же окне загрузки вы можете заполнить поля для подписи и описания изображения.

Что такое атрибут подписи заголовка title для изображений в WordPress

Title – это еще один атрибут, который можно добавить к тегу изображения в HTML-коде. Он используется для заголовка графического элемента и указывает его название. Заголовок показывается во всплывающей подсказке, когда пользователь наводит курсор мыши на картинку. Текст, введенный внутри title, не будет показан пользователю, если изображение не отображается на странице.

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

Атрибут title добавляется к изображению в WordPress уже после его вставки в текст. Если вы используете визуальный редактор для оформления страницы, щелкните мышью по картинке. На появившейся дополнительной панели инструментов следует нажать кнопку редактирования с изображением карандаша.

В результате откроется всплывающее окно для настройки параметров изображения, в котором нужно открыть раздел «Дополнительные настройки». Появится поле для добавления атрибута title, куда и требуется вписать название картинки. В этом же окне доступна настройка атрибута alt на тот случай, если вы забыли ввести его при загрузке изображения. Откорректируйте оба поля и нажмите кнопку «Обновить».

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

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

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

Получает тег картинки указанного вложения (прикрепленного к посту файла).

Если вложение не удалось найти, то будет возвращена пустая строка.

Если вложение является картинкой, то для нее будет возвращен код, соответствующий указанному размеру (см. параметр $size).

Для прикрепленных файлов типа отличного от картинок (.zip, .xls, .flv) будет возвращена соответствующая этому типу иконка (автоматически определяется WordPress). По умолчанию такая иконка не выводится, чтобы она выводилась нужно выставить 3-й параметр ($icon) в true.

Хуки из функции

Возвращает

Строку. HTML код картинки в тега.

Использование

Размер картинки. Можно указать в виде:

• Строки thumbnail , medium , large , full или название имеющегося размера
• В виде массива из 2-х элементов, определяющих размеры сторон выводимой картинки: array(32,32) .

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

Указание размеров не влияет на размеры выводимых иконок для файлов, они всегда выводятся в оригинальном размере (32х32).

Вместо использования массива, иногда логично зарегистрировать новый размер картинок (add_image_size()) и использовать его наряду с уже установленными (thumbnail , medium , large или full). Такой подход более эффективен, так как нет нужды постоянно проверять какой размер из имеющихся подходил лучше.

По умолчанию: "thumbnail"

$icon(логический) Использовать ли медиа иконки, для представления вложения. По умолчанию, для вложений типа файл (не картинок), иконка выводится не будет, если нужно выводить иконки для таких типов вложений выставите этот параметр в true.
По умолчанию: false $attr(массив)

Любые атрибуты для тега в массиве. Например:

Array("class" => "foo bar", "title" => "название картинки",)

Примеры

#1. Выведем готовую для HTML картинку

Выведем картинку среднего размера прикрепленного файла-картинки 651:

Выведет примерно такой HTML:

alt текст будет заполнен, только если он указан для вложения в специальном поле (alt text). В alt не попадает текст из заголовка (title), описания (description) или подписи (caption) картинки...

#2. Пример с указанием произвольного размера

Выведем картинку указанного размера 20х20 пикселей, для вложений типа "картинка" и соответствующую иконку для остальных типов вложений (3-й параметр):

ID, array(20,20), true); ?>

$post->ID - динамическая передача ID внутри цикла. Создать такой цикл можно, использовав функцию get_posts() (get_posts("post_type=attachment")).

Код wp get attachment image : wp-includes/media.php VER 5.1.1