Ростелеком

Вставка кода на страницу. Куда вставлять этот код в WordPress? Общая структура файлов темы

03.07.2020

Здравствуйте, уважаемые друзья. Сегодня в продолжение темы ускорение скорости загрузки блога, поговорим, о возможности замены плагинов «лёгкими» скриптами. Скрипты в отличии от плагинов оказывают значительно меньшую нагрузку на сервер, а следовательно и скорость загрузки сайта будет выше. На сегодняшний день плагинов достаточно много и они способны решить многие задачи блоггеров. Но зачастую, эти плагины можно заменить работой более быстрых скриптов. А порой и вовсе отключить не нужные плагины. И чем меньше сторонних плагинов – тем выше скорость загрузки сайта или блога.

Если провести анализ скорости загрузки сайта, то можно увидеть какие из плагинов тормозят скорость загрузки Вашего сайта. Какие сервисы использовать для проверки я писал . В моём случае, наибольший тормоз — это плагин позволяющие выводить примеры исходного кода в статьях, с подсветкой синтаксиса этого самого кода. Называется этот плагин SyntaxHighlighter.

Результат теста, даже на страницу не поместился. Разумеется, подсветка кода очень красивая, но если разобраться, то не в подсветке дело. По большому счету важна работоспособность кода. А если код просто вставить, то велика вероятность его неработоспособности.

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

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

Известно, что в WordPress, для того чтобы вывести пример исходного кода в статье достаточно при наборе статьи из визуального редактора перейти в тестовый и заключить нужный код в теги

Ваш код

Но такой код будет слабо выделяться в основной массе текста вашей статьи. И поэтому можно внести несколько стилей, скажем, цвет фона, шрифта, рамку и так далее. Так Ваш код будет наиболее наглядно представлен в виде примера.

Как изменить вид отображаемого кода

Сделать это достаточно просто.

Вариант 1

Вы можете присвоить тегу 

Класс, к примеру, class=”cod”
 и задать нужные стили в файле style.css.
 .cod
 { width: auto
;
background-color: whitesmoke
;
border: 1px solid #C7C3C3
;
border-radius: 5px
;
color: #167dec
; }
 
Вариант 2
Вы можете непосредственно при вставке кода задавать и стили. Выглядеть это будет примерно так:
 
Ваш код


 
И в первом и втором примере, если вставленный код вылезет за пределы статьи, следует добавить свойство overflow: auto;
 что позволит управлять блочным элементом.
Эти способы всем хороши, но хотелось бы как то попроще. В общем, опять лень – двигатель прогресса заставляет придумать что-то, что облегчит этот процесс.
Как добавить кнопку «Вставка кода» в панель редактирования WordPress
А облегчит этот процесс простая кнопка в панели редактирования WordPress. И выглядит она вот так.
Если вы захотите поставить такую кнопку себе, то Вам потребуется несколько минут времени и несколько файлов от меня. Итак, приступим.


Метод вставки html-кода немного различается в зависимости от того, куда конкретно вам его нужно вставить. В соответствии с этим, рассмотрим разные варианты.


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


Часто после вставки хочется немного отформатировать код, например, задать обтекание кода текстом с другой стороны. Для этого существует простой способ, использующий CSS-свойства.


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


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


Как отключить визуальный редактор?


В административной панели щелкните «Сайт» — «Общие настройки» — «Сайт» и в строке «Визуальный редактор» выберите «No Editor». Теперь редактирование и вставку html-кода возможно будет произвести в режиме html-кода. После того, как вы вставите код и сохраните изменения, визуальный редактор можно снова включить.




Если вы захотите повторно отредактировать статью, html-код необходимо будет также вставить повторно. Иногда требуется, чтобы html-код отображался на каждой из страниц сайта. Вставка html-кода таким образом, чтобы он отображался на каждой из страниц сайта.


Для решения этой задачи войдите с помощью блокнота или другого редактора в главный файл сайта (по умолчанию это index.php или index.html). В открытом файле выберите предпочтительное место для вставки кода. Для удобства вы можете задать фразу в поиске, расположенную в том месте, куда вам нужно вставить код, так вы быстрее его найдете. Потом скопируйте код и вставьте в желаемое место. При необходимости код можно отформатировать таким же способом, который был описан для форматирования кода в статье.


Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код
 в статью или страницу, никаких особых знаний не надо. Делается это очень просто. Вы уже знаете, что html код – это просто текст. Во время создания статьи или страницы выбираем режим Текст
. Затем вставляем нужный Вам код. Сохраняем. И все, готово!


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


Это тег  . Принцип такой Сначала . Привожу пример  Ваш Html код  Где


  • style отвечает за стиль, размеры, цвет текста внутри тега,
    • 

  • margin: 10px; размер отступа,
    • 

  • width: 300px; размер ширины,
    • 

  • height: 120px; размер высоты.
    • 



P.S. Небольшая тренировка мозга


Три лягушки сидели на берегу пруда. Одна из них решила прыгнуть в пруд. Сколько лягушек осталось на берегу?


Возможно вам это будет интересно:




  • Как подключить рассылку к сайту
    • 

 2014-03-09T04:38:56+00:00
 Надежда

WordPress
html код,вставить html код

Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код в статью или страницу, никаких особых знаний не надо. Делается это очень просто. Вы уже знаете, что html код – это просто текст. Во время создания...
Надежда

Трофимова
[email protected]
Administrator
Блог сайт



Возможно Вас также заинтересует:
Как убрать /category/ из url wordpress
Как убрать category из url wordpress и зачем это надо? Как этот префикс мешает продвижению сайта.
 
Как отключить и включить редактор файлов в консоли wordpress
Редактирование WP-config.php как-то мало меня интересовало, но видно до некоторой поры. Все-таки пришлось. Вхожу в консоль своего сайта, а там нет редактора файлов. Вы знаете...
 
Как настроить тему Islemag wordpress
Islemag является одной из самых лучших бесплатных тем.
 
Как откатить WordPress на старую версию
Приветствую читателей моего блога. Ну вот, пришла пора и я столкнулась с проблемой при обновлении новой версии WordPress, а именно из WordPress 5 на WordPress 4.7.
 
Как ускорить сайт на wordpress, выключив HeartBeat API
Всем привет. Продолжаем тему ускорения сайта на wordpress. В статье Как ускорить wordpress с помощью минимизации CSS, HTML и Javascript мы убрали лишнее из файлов, но...


Поговорим о том как вставить код на сайт, как вставить html код, код счетчика, код стороннего скрипта, в Artisteer. В самой программе код можно вставить в двух местах, первое это при создании нижнего колонтитула нажав на кнопку "текст", и второе в самый низ страницы, при задании настроек экспорта вкладка "Description". В последнем все таки удобней вставлять уже после создания шаблона.
Как вставить код счетчика
Код счетчика
 можно вставить внизу страницы в месте указанном на картинке, это наиболее логичное место. 
 В шаблонах Joomla код счетчика
 можно вставить открыв блокнотом страницу index.php папки шаблона. Находим внизу строки:
 
 и в место строки "Designed by  Есть и другая возможность вставить
 модуль с кодом в позицию debug для этого создаем свободный модуль (как описано ниже) и вставляем в него код.
В шаблонах WordPress код счетчика
 в это место (в низ страницы) можно вставить
 открыв файл footer.php сделанного шаблона и найдя строки:
 
 Заменив строчку,
Код PHP:

    Powered by <
a href=
"http://wordpress.org/"
 target=
"_blank"
>
WordPress
 and <
a href=
"http://www.artisteer.com/?p=wordpress_themes"
 target=
"_blank"
>
WordPress Theme
 created with Artisteer
    

На код Вашего счетчика.
В шаблонах Drupal код счетчика
 можно вставить
 открыв страницу page.tpl.php сделанного шаблона заменив в самом низу код:
Код PHP:

    " "
.
t("Drupal"
)
.
" "
.
t("and"
)
.
" Drupal Theme "
.
t("created with"
)
.
" Artisteer"
;
 ?>
.
    

На код счетчика или кнопки.
Вставить код скрипта
, код html
 в модуль тоже можно вставить, и хотя это вопросы использования конкретной CMS, остановимся на некоторых из них.
Вставить код HTML в модуль Joomla
Для вставки кода в Joomla 1.5 (в joomla 1.7 вставляется аналогично) надо создать новый модуль HTML, в админ панели открываем Расширения--> Менеджер модулей-->кнопка создать модуль--> выбираем Произвольный HTML-код --> кнопка след. Далее попадаем в созданный нами модуль mod_custom
 Устанавливаем позицию, заполняем данные. Внизу видим редактор. В редакторе нажимаем кнопку HTML:
 
 И вставляем нужный нам код скрипта или баннера. Примечание: обратите внимание, что используется редактор TinyMSE если Вы установили другой редактор то надо переключится на TinyMSE если в установленном вами нет кнопки HTML.

Здравствуйте, уважаемые читатели!


Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.

Код в виде текста: зачем это нужно


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


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


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


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


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


Добавляемый в визуальном редакторе контента блок, состоящий из одной и нескольких строк кода, WordPress при переходе в текстовый режим заменяет в тегах все символы < и > символами <
 и >



Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом  с помощью кнопки на панели инструментов:


Выглядеть на странице это будет примерно так:














Наименование 1
Наименование 2




Значение 1
Значение 2





Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html 
Сохраняющий все дополнительные пробелы, служащие для формирования отступов. Содержимое элементов 
И  по умолчанию отображается браузерами моноширинным шрифтом.


Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега 

 

 

 Наименование 1
 Наименование 2
 

 

  Значение 1
  Значение 2
 




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




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


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


Плагины вставки кода для WordPress


Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.


SyntaxHighlighter Evolved




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


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

WP-Syntax




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


WP-Syntax
 не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег 
С атрибутом выбора языка:

 
пример


пример


пример


Список поддерживаемых языков приводится на странице плагина.


Атрибут line
 в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped
 со значением true
 в качестве опции:


пример


Пример вывода и подсветки CSS-кода с помощью плагина:


 1
2
3
4
5
6
7
8
 .block
 {

 border
:
 2px
 #8E0505
;

 color
:
 #2D0000
;
 /*цвет текста*/

 padding
:
 2px
;
 /*внутренние отступы*/

 text-align
:
 left
;
 /*выравнивание текста*/

 font-family
:
 arial;

 font-size
:
 14px
;

}



Block {
 border: 2px #8E0505;
 color: #2D0000; /*цвет текста*/
 padding: 2px; /*внутренние отступы*/
 text-align: left; /*выравнивание текста*/
 font-family: arial;
 font-size: 14px;
}


При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег 
И код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.


Code Prettify




Легкий плагин без настроек, дающий возможность вставить код на сайте WordPress с использованием автоматической подсветки без необходимости указывать язык. Реализует подсветку для тегов 
И  на странице. Простое решение на основе модуля Google Code Prettify library
 для тех, кто не желает вникать в особенности форматирования синтаксиса выводимых на сайте блоков с программным кодом.


Заключение


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