28.10.2017      233      0
 

Как вставить код в статью без плагина


Иногда бывает нужно вставить код в статью. Казалось бы, чего проще – скопировал, вставил, сохранил. Угу, как бы не так – при сохранении Вордпресс отформатирует его на свое усмотрение. В частности, заменит английские кавычки на «елочки», да еще выгнутые коленками назад: »». Лепота…

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

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

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

А таким бы он стал после публикации статьи на WordPress:

Это совсем не то, что нужно, поэтому идем во вкладку «Текст» и на месте для вставки прописываем примерно следующее:

Собственно, единственная непременная составляющая здесь – это теги <textarea></textarea>. Все остальное опционально. Тег <center></center> размещает код по центру, cols=”80” задает длину строки в символах (регулируется в зависимости от ширины вашего текстового поля), rows=”1” определяет количество строк. Если сейчас я вставлю сюда код из вышеупомянутого примера, то получу вот такую рамку:

Рамка получилась с прокруткой, что в случае с парой строчек ни к чему, поэтому исправляю значение rows=”1” на rows=”2” и получаю следующее:

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

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

ВНИМАНИЕ! После вставки кода нельзя до сохранения возвращаться во вкладку «Визуально», иначе код в рамке запляшет «елочкой», как обычный текст:

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

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


Ваш комментарий

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

Политика конфиденциальности
Пользовательское соглашение