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—>

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

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

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

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

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

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

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

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

Ваш адрес email не будет опубликован.

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