WordPress работа в редакторе на сайте, статья

Описание некоторых особенностей работы с кодом веб-страниц, используя NVDA.

Оглавление

В общем и целом

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

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

Подготовка кода в Word

В статье об изготовлении этого сайта указал на страницу, где можно очистить подготовленный в программе Word документ. Сохранив размеченный документ в формате веб-страницы с фильтром, а затем открыв этот файл Блокнотом мы получаем практически готовый текст для вставки в редактор WordPress. Если бы мы работали в визуальном редакторе, то можно было бы вставить текст просто из документа Word в формате docx, но для чтеца экрана этот режим недоступен.

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

Поехали дальше.

Подготовка текста в Блокноте

Можно использовать Блокнот, а можно любой другой простой текстовый редактор. Я пока набираю документ в Word, проверяю и исправляю ошибки, а потом сохраняю в формате «Обычный текст». Теперь можно и в Блокноте с ним проработать.

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

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

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

Создание оглавления

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

<a name="link"></a>

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

Итак, есть текст оглавления:

***

Оглавление

Первый

Второй

***

Чтобы каждая строка оглавления стала ссылкой, а также определялась как отдельный элемент списка, нужно добавить в начале каждой строки выражение

<li><a href="#link">

А в конце каждой строки списка ссылок оглавления вот такое выражение:

</a></li>

над первой строкой списка ссылок оглавления и в конце последней строки, или под ней нужно вставить тег, который будет определять, какого вида будет ваш список, маркированный или нумерованный. Это тег ul или тег ol.

И ещё. Раз ссылок у нас в оглавлении будет несколько, то якоря нужно пронумеровать. На разных страницах можно применять якоря с одинаковым названием, но лучше всё же на каждой странице давать своё имя якорям, заменяя выражение link на какое-то другое.

Вот, вкратце, и всё о подготовке текста для публикации. Вы скажете, что я какие-то теги забыл? Нет проблем, их вставим с помощью редактора WordPress. А пока мы можем проверить работоспособность нашего кода прямо тут, на компьютере. Скопируйте ниже приведённый код, вставьте в текстовый документ, поменяйте расширение файла с txt на htm и откройте его в браузере (строки со звёздочками копировать не нужно):

***

<p>Оглавление</p>

<ul>

<li><a href="#link1"> Первый </a></li>

<li><a href="#link2"> Второй </a></li>

</ul>

<h2><a name="link1"></a> Первый </h2>

<p>Содержание под первым заголовком.</p>

<h2><a name="link2"></a> Второй </h2>

<p>Содержание под вторым заголовком.</p>

***

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

Работаем в редакторе WordPress

Подготовленный в Блокноте и проверенный на работоспособность ссылок текст кода переносим на сайт.

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

<!—more—>

Другие кнопки редактора

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

Кнопки «Жирный», «Курсив», «Цитата«, «Удаленный (перечёркнутый) текст» И «Вставленный текст» Оформляют текст визуальными эффектами.

Кнопки «Маркированный список» и «Нумерованный список» вставляют соответствующие теги. Можете ими воспользоваться, если поленились это сделать вручную. Но сначала примените к каждой строке вашего списка Кнопка «Элемент списка», иначе получится каша, а не список.

Кнопка «Код» позволяет публиковать любой кусок кода.

Кнопка «Вставить ссылку» позволяет быстро вставить ссылку в текст. Заранее её скопируйте, выделите нужное слово или выражение, затем жмите эту кнопку и вставляйте ссылку. Потом выберите как её открывать и сохраните. В тексте появятся нужные теги.

Всё на этом, остальное сами изучайте!

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.