Статьи

Как написать собственный код в сообщениях WordPress

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

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

  • Добавление кода, который выглядит как код, но не ведет себя как код (если вы хотите продемонстрировать строки кода или улучшить внешний вид своего веб-сайта)
  • Добавление кода, который должен вести себя как код, например, рекламные объявления со сценариями, такие как Google AdSense Ads.

В рамках этих двух категорий мы немного углубимся в программный код, такой как HTML, CSS, Javascript, а также коснемся рекламы и красоты контейнера

. Теперь, без лишних слов, приступим к делу и напишем код.

Добавление кода, который выглядит как код, но не ведет себя как код

Если вы хотите продемонстрировать код (возможно, вы веб-дизайнер или разработчик), который ваши пользователи могут копировать и вставлять, важно делать это правильно, потому что даже один разрыв строки может испортить код, а значит, и всю вашу работу. То, как ваш код будет интерпретироваться WordPress, зависит от того, используете ли вы редактор HTML или Visual Post. Ввод вашего кода непосредственно в визуальный редактор не будет иметь желаемого эффекта, поскольку визуальный редактор считает код обычным текстом, то есть веб-браузеры будут интерпретировать ваш код не как «код», а как обычный текст.

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

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

Упражнение HTML

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

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

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

<html>

Для достижения указанного выше эффекта мы используем тег кода, написанный как strong> … наш код находится здесь strong>. Замените стрелки (<>) квадратными скобками ([]) в зависимости от вашего сайта WordPress и редактора сообщений, который вы используете (визуальный или HTML). Код, который вы хотите отобразить, должен находиться между открывающим тегом и закрывающим тегом . Например, чтобы использовать код в абзаце`:`

Как написать собственный код в сообщениях WordPress

Тег кода делает текст, не являющийся HTML, похожим на код, но не сообщает веб-браузеру, что нужно интерпретировать разметку HTML или удалить ее из сообщения. Это означает, что браузер все еще может кодировать вашу разметку HTML, что затрудняет демонстрацию HTML-тегов в вашем коде. Однако вы можете решить эту проблему, используя расширенные символы или символьные сущности для представления символов <>, что обманет любой браузер. Например…

Как написать собственный код в сообщениях WordPress

… Создаст новый контейнер (благодаря

) и заголовок (
), что испортит вашу веб-страницу. Но если вы используете символьные сущности для замены стрелок <>, вы избежите такого поведения и выведите свой код по желанию. Таким образом, приведенный выше код будет выглядеть так:

Как написать собственный код в сообщениях WordPress

Создайте выделенный блок кода

Если бы я хотел выделить блок кода (или даже текст), чтобы получить что-то вроде:

Как написать собственный код в сообщениях WordPress

Я начинаю с помещения кода (или текста) в такой контейнер:

Как написать собственный код в сообщениях WordPress

Затем я добавляю стиль с помощью CSS либо напрямую (как на изображении выше), либо через файл style.css, находящийся в основной папке вашей темы.

Стиль тегов кода

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

code{font-size:1.2em; color:#000; font-weight:normal;}

… Или что-то похожее на ваш style.css. Существует неограниченное количество стилей, и все зависит от ваших личных предпочтений, так что не сдерживайтесь – создавайте стиль.

Добавление кода, который ведет себя как код

Этот раздел особенно полезен, если вы хотите отображать рекламу или другие скрипты, например, фрагменты Javascript в ваших сообщениях. Хотя существуют плагины, такие как Quick AdSense, которые помогут вам управлять рекламой в ваших сообщениях, вам может быть интересно установить автономные скрипты, над которыми вы полностью контролируете.

Если ваше объявление представляет собой простое изображение и ссылку, вы можете добавить объявление в свой пост с помощью утилиты загрузки. Просто загрузите изображение и введите свою ссылку (и, возможно, подпись), и ваша работа будет сделана. Однако этот метод ограничен, так как вы можете выровнять свое объявление только по левому, правому или по центру – как обычное изображение. Кроме того, вы можете создать контейнер в своем сообщении с помощью редактора HTML.

Пример:

<div id=»ad1″>

Создайте этот контейнер именно там, где вы хотите разместить свою рекламу, то есть вам нужно подготовить публикацию, прежде чем добавлять объявление. Когда контейнер будет готов, вы можете придать ему любой стиль. Вы можете перемещать его, используя свой style.css, используя свойство position. Если вы хотите размещать рекламу Google AdSense в своих сообщениях, вы все равно можете использовать Quick AdSense – плагин – или создать контейнер и разместить свой рекламный код следующим образом:

<div id=»ad1″>

Примечание 1. Google основана на Javascript и может интерпретироваться всеми основными веб-браузерами при условии, что пользователь включил Javascript на своих машинах.

Примечание 2: вы должны выбрать правильные размеры рекламы для своего веб-сайта, чтобы не испортить ваши сообщения, а также веб-сайт.

Если вы хотите добавить постоянное объявление, которое будет отображаться во всех ваших сообщениях (текущих и будущих) без каких-либо дополнительных действий, вам нужно будет отредактировать шаблон одного сообщения (single.php). Я разместил рекламу размером 468 на 60 пикселей в верхней части всех своих сообщений, добавив следующий код в single.php сразу после  <- – END post-entry-meta – ->.

<div id=»ad1″> <script type=»text/javascript»><!—
google_ad_client = «ca-pub-1289628145978703»;
/* vistamediainc1 */
google_ad_slot = «7102844977»;
google_ad_width = 468;
google_ad_height = 60;
//—>
</script>
<script type=»text/javascript»
src=»//pagead2.googlesyndication.com/pagead/show_ads.js»>
</script>

Конечно, вы должны использовать свою собственную рекламу Google 🙂 Вот как реклама Google AdSense появляется в моем блоге:

Как написать собственный код в сообщениях WordPress

Чтобы найти single.php, перейдите в вашу панель администрирования – >> Внешний вид – >> Редактор – >> single.php. После открытия single.php используйте панель поиска (Ctrl + F), чтобы найти <- – END post-entry-meta – ->.

Вы можете оставить контейнер как есть или стилизовать его, используя style.css, по своему усмотрению. И не забудьте сохранить все изменения. Контейнер

действительно полезен, и если вы соедините его с CSS и немного творчества, вы сможете многого добиться с помощью своего сайта WordPress. Он может помочь вам разместить любой код (или что угодно на самом деле) в любом месте вашего веб-сайта.

Панель инструментов

Если вы хотите узнать больше о написании собственного кода в своих записях WordPress, ознакомьтесь со следующими ресурсами:

  • Написание кода в ваших сообщениях
  • Забавные персонажи
  • Использование Javascript в сообщениях
  • Использование HTML в сообщениях WordPress
  • Написание безопасного кода WordPress (Slideshare)

Ну вот и все. Нам удалось охватить области, которые мы обозначили вначале. Но если вы не понимаете какой-либо концепции в этом посте или хотите добавить свои предложения или мнения, поделитесь своими мыслями в разделе комментариев ниже!

Кнопка «Наверх»