Исполняемый PHP код в статьях и виджетах WordPress (функции и плагины). Код страницы wordpress
Как вставить код в страницу WordPress: простые способы
Здравствуйте, уважаемые читатели!
Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.
Содержание:
- Кому и зачем нужен код на страницах сайта
- Использование тегов и возможностей WordPress
- Плагины для вставки и подсветки кода
Код в виде текста: зачем это нужно
Потребность в выводе программного кода в WordPress распространенной не назовешь. Можно с уверенностью сказать, что у владельцев медицинских, строительных или кулинарных блогов подобный вопрос вряд ли возникнет. Чего не скажешь об авторах проектов, посвященных таким темам как создание и продвижение сайтов, веб-дизайн и программирование, разработка приложений и т.п.
Необходимость в публикации отдельных строк кода порой не ограничивается простым добавлением нужного фрагмента на сайт. Сопутствующее этому желание «сделать красиво» упирается в использование подсветки синтаксиса кода и в те или иные способы реализации. Подсветка кода на сайте способна существенно облегчить восприятие данных посетителями, привыкшими к использованию продвинутых редакторов вроде Notepad++.
Если просто вставить код в статью, WordPress интерпретирует его и исказит при публикации. Поэтому подобный тип данных всегда должен подвергаться обработке. Решить эту задачу можно различными способами: прописыванием необходимых тегов на странице вручную, используя встроенную в редактор WordPress кнопку и с помощью различных плагинов.
Как добавить код в статью без плагина
WordPress предлагает для решения этой задачи администратору сайта собственный, являющийся частью системы управления контентом, инструмент.
Добавляемый в визуальном редакторе контента блок, состоящий из одной и нескольких строк кода, WordPress при переходе в текстовый режим заменяет в тегах все символы < и > символами < и >
Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом <code> с помощью кнопки на панели инструментов:
Выглядеть на странице это будет примерно так:
<table border="1"><tr><th>Наименование 1</th><th>Наименование 2</th></tr><tr><td>Значение 1</td><td>Значение 2</td></tr></table>
Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html <pre>, сохраняющий все дополнительные пробелы, служащие для формирования отступов. Содержимое элементов <pre> и <code> по умолчанию отображается браузерами моноширинным шрифтом.
Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега <pre>:
<table border="1"> <tr> <th>Наименование 1</th> <th>Наименование 2</th> </tr> <tr> <td>Значение 1</td> <td>Значение 2</td> </tr> </table>К тегу <pre> применимы универсальные атрибуты, в частности, атрибут style, используемый для определения элемента с помощью CSS. В приведенном ниже примере показано, как значениями атрибута style задаются цвет выводимого текста, цвет фона блока, толщина, цвет и радиус закругления границы блока:
<pre>
Возможности форматирования выводимых на странице блоков с помощью атрибутов достаточно широки, но не безграничны. Использование рассмотренных тегов оправдано, когда на страницу добавляются в качестве примеров одиночные строки или небольшие фрагменты кода. О красивом оформлении в этом случае говорить не приходится, результат вставки будет предельно минималистичен, но многим достаточно и этого.
Сложное форматирование, позволяющее реализовать подсветку синтаксиса — результат работы плагинов, о которых пойдет речь ниже.
Плагины вставки кода для WordPress
Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.
SyntaxHighlighter Evolved
Распространенный плагин для вставки кода в WordPress, продвинутый и мощный, на странице настроек которого можно применить одну из семи имеющихся тем оформления и, при необходимости, выбрать отображение нумерации строк и панели инструментов, сделать кликабельными URL свернуть поле кода, выставить автоматический перенос длинных строк и т.д. Тут же присутствует визуальный предпросмотр вывода, имеется расшифровка используемых атрибутов.
В плагине SyntaxHighlighter Evolved предусмотрено все, что может когда-либо понадобиться. Вставить код в статью WordPress с его помощью очень просто, для этого необходимо в настройках разрешить плагину обрабатывать тег <pre> или использовать соответствующие шорткоды:
WP-Syntax
Еще один плагин, долгое время заслуженно пользовавшийся признанием у вебмастеров. В настоящее время статистика официального репозитория показывает более 10 тысяч активных установок. К сожалению, плагин не обновлялся уже год, однако продолжает исправно выполнять заявленные функции.
WP-Syntax не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег <pre> с атрибутом выбора языка:
<pre lang="php">пример</pre> <pre lang="java">пример</pre> <pre lang="css">пример</pre>Список поддерживаемых языков приводится на странице плагина.
Атрибут line в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped со значением true в качестве опции:
<pre lang="xml" line="1" escaped="true">пример</pre>
Пример вывода и подсветки 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 интерпретирует тег <pre> и код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.
Code Prettify
Заключение
Рассмотренные в статье решения на основе плагинов — лишь малая часть того, что предлагает хранилище плагинов WordPress. Перейдя по ссылкам меню консоли «Плагины — Добавить новый» на страницу поиска, по ключевым словам Highlight и Syntax можно обнаружить еще несколько десятков аналогичных плагинов, позволяющих красиво оформить программный код. Важно понимать, насколько уместным и необходимым будет подобный плагин на сайте. Возможно, именно в вашем случае вставить код в страницу WordPress будет проще вручную в текстовом редакторе, воспользовавшись тегами <pre> и <code>.
pro-wordpress.ru
Как легко и безопасно добавить код на сайт WordPress
Смею предположить, что в вашей жизни возникали случаи, когда вам захотелось что-либо добавить (подправить) в теме вашего сайта WP, либо в функционале какого-то плагина. Причём разработчики не заложили эту возможность в стандартные средства управления. А ваша душа не признаёт никаких ограничений и требует полёта фантазии 
Как вы понимаете, выход есть из любой ситуации, в данном случае – нам придётся подправить код плагина, темы…
Главная сложность в редактировании кода состоит в том, что изменения, которые вы вносите, к сожалению, не сохраняются надолго, и вероятнее всего аннулируются при следующем обновлении. Если решение вы видите в том, чтобы оказаться от обновлений – смею вас отговорить от сего опасного неблагородного решения, поскольку в обновлениях содержатся важные изменения в части безопасности и устранения ошибок, а зачастую ещё и появляются новые функции.
В следствии чего предпочтительнее воспользоваться способами, которые устоят в нашем столь динамично меняющемся мире и вместе с этим сэкономят ваше драгоценное время.
Предостережения!
На просторах интернета вы часто можете встретить советы, в которых предлагают внести изменения в файл functions.php — если есть любая возможность обойтись без этого – лучше не трогать этот файл. В приведённых ниже способах вы увидите способ как это реализовать. И в любом случае – нужно создать дочернюю тему и не трогать родительскую.
Добавляя префиксы к функции всегда применяйте кастомный код в виде: _ prefix (к названию изменяемой функции). Сие действо убережёт вас от конфликтов с другими функциями темы или плагина.
Итак, как же добавить код на WP сайт?
1) Кастомный плагин
Так вы можете вставить кодовые сниппеты, и они не будут удалены при обновлении, а так же в дальнейшем сможете их редактировать, активировать или наоборот – деактивировать по необходимости.
Сделать это просто: для начала необходимо создать каталог для вашего плагина, и назвать его соответствующим образом, например moy-plugin (используем только тире, а не нижний слеш)
Далее создаём главный файл плагина. Как вы понимаете он должен включать название, описание и основную информацию, а также код, который поможет обезопасить плагин от злоумышленников. И называем этот файл, допустим moy-plugin.php. Расширение .php покажет WP на каком языке создан данный файл.
Создать файл описанным выше способом можно в любом текстовом редакторе, например в NotePad, который уже заботливо установлен в операционной системе Windows (TextEdit в Mac). Редактором же Microsoft Word лучше не пользоваться, поскольку он форматирует текст, а нам это совершенно не нужно в данной ситуации.
Итак, вот код, который нужно добавить:
<?php /* * * Plugin Name: Moy Plugin * Plugin URI: https://clubwp.ru/ * Description: Adds custom Moy Plugin websites. * Author: ClubWP * Author URI: https://clubwp.ru/ * Version: 1.0 * Text Domain: Moy Plugin * * Copyright: (c) 2012-2014 ClubWP, Inc. ([email protected]) * * License: GNU General Public License v3.0 * License URI: http://www.gnu.org/licenses/gpl-3.0.html * * @author clubwp.ru * @copyright Copyright (c) 2012-2016, clubwp.ru, Inc. * @license http://www.gnu.org/licenses/gpl-3.0.html GNU General Public License v3.0 * */if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directlyПосле чего осталось только запаковать созданное в zip-архив и отправить на ftp вашего сайта. В будущем, так вы сможете внести любые изменения вашего плагина.
Сим не сложным способом вы создадите простой плагин для ваших нужд.
2) Плагин Code Snippets
Если описанный выше способ для вас сложен, либо же вы очень практичный человек и привыкли получать результат быстрее — Code Snippets создан специально для вас. Как и описанная выше возможность, плагин добавляет ваш код с возможностью его дальнейшего редактирования, не используя вашу тему.
После установки плагина, в админке появиться новое окно “Snippets”, в котором, соответственно, вы сможете внести новые сниппеты. Для которых можно внести код и информацию о его назначении.
Таким образом вам доступно: включать или отключать кастомный код в виде плагинов. Очень удобно и практично, т.к. иногда возможны конфликты с темами и плагинами, и вы сможете это легко понять и отключить созданный код.
3) Редактирование Functions.php дочерней темы
Если использование плагинов вам не подходит и нужно внести изменение прямо в тему вашего сайта – то данный способ для вас. Напоминаю, что делать это можно только с дочерними темами.
Для использования данного метода, предлагаю мой шаблон functions.php дочерней темы. Распаковывайте и редактируйте файл style.css (название шаблона и импорт URL)
P.S. Постарайтесь сделать всё возможное дабы упростить свою жизнь в будущем, в части вашей нелёгкой доли устранения багов и редактирования кастомного кода по мере возникновения сей необходимости.
clubwp.ru
Как добавить код на главную страницу блога на вордпресс для проверки собственности
У каждого владельца блога или сайта на WordPress обязательно возникнет трудность по добавлению кода на свой блог.
Это может быть нужно, как для проверки собственности сайта, так и добавления его в каталог сайтов от Google или каталог Яндекса или каталог Bing или другой любой каталог.
Хотя возможна и ситуация когда нужно добавить статистику от Гугла – Google Analytics. И это это можно легко решить если знаешь куда заходить и что пошагово делать.
Многие не знают, как это сделать. Я вот сегодня столкнулся с такой проблемой и мне удалось её решить.
Теперь рассмотрим, что же делать пошагово.
После того как вы получили код на сайте для проверки собственности или добавлении статистики, мы идем на ваш сайт или блог вставляем его.
1) Заходим в админку
2) Видим категорию Внешний вид и далее выпадает меню в котором выбираем Редактор и заходим туда
3) В боковой панели выбираем Заголовок (header.php) и заходим в него.
Перед следующей процедурой я вам настоятельно рекомендую скопировать код ( включая от слов <head> до следующего <head> включительно ), который у вас уже есть в Заголовке (header.php).
Чтобы если у вас не получится с первого раза вставить код вы могли его восстановить и все работало корректно, а ваша главная страница отображалась правильно.
4) Далее копируем код который нужно вставить и вставляем ниже слова <head>
Код для добавления в каталог сайтов ГуглаУ должно получиться как у меня : идет слова <head> ниже вы вставляете свой код потом должно быть снова слово <head>.
Если же у вас будет как и у меня стоять какой-то ещё код по умолчанию уже , тогда вы просто ставите поверх него тот код который нужен для подтверждения собственности. И все работает.
5) Код добавлен и вы можете видеть если это баннер, что он работает на главной странице своего сайта.
Также можно добавить и баннер на главную страницу своего сайта или блога на вордпресс.
Вас возможно заинтересует инструкция по добавлению видео на блог с движком вордперсс.
– РЕКОМЕНДУЕМ –
alexstuff.ru
Как найти и изменить код html
Здесь написана серия статей о том, как изменить шрифт, размер, цвет некоторых важных элементов блога — таких, как заголовок блога или поста, тег more и тому подобное. Нужный код искал вручную, экспериментируя с тестовым доменом, на основе чего позже писалась статья.
И вот недавно понадобилось изменить цвет ссылок. Перелопатив кучу литературы по этому вопросу, понял простую вещь: все приводят примеры из собственных шаблонов, но шаблоны-то у нас у всех разные и хорошо, если код из примера хоть чуть-чуть похож: не нытьем, так катаньем все равно найду — методом тыка.
С кодом ссылки номер не прошел. Все указывали совершенно разные пути. Задумался, нет ли простого и точного инструмента, как найти нужный код html на любом сайте. Многие блоггеры даже с опытом испытывают трудности в незначительной доработке шаблона. В этом нет ничего страшного, ведь у каждого свои интересы и цели создания сайта.
Если вы хотите внести небольшие изменения в шаблон, например изменить любой заголовок, название статей и рубрик, цвет и размер шрифтов и ссылок, обычно вполне достаточно научиться простому принципу, который рассмотрен в этой статье. Но бывают и сложные случаи, требуюущие либо более глубокого изучения html и css, либо помощи специалиста.
Однажды обратился знакомый с просьбой найти, где изменить цвет панели рубрик в его шаблоне. Закачал тему на тестовый поддомен. Настройки этого элемента хранились не в style.css, а в другом файле, поэтому человек не мог найти.
Как найти и изменить html и css код сайта
Если не любите длинные статьи, для вас в конце статьи видеоурок, в котором рассказывается, как можно увидеть код html сайта с помощью Notepad++ и внести изменения в дизайн любого шаблона на примере, как поменять цвет шрифта. В видео найдутся и другие тонкости обращения с блогом. А для тех, кому ближе и понятнее текст, внизу подробный разбор темы со скриншотами.
Термины и понятия
Было бы точнее называть статью «Как найти код css«, но я решил остановиться на «неправильном» названии, потому что в основном ответ на этот вопрос ищут в html. CSS и HTML — очень разные вещи, хоть и являются двумя частями одной системы. В интернете много технических статей, нам здесь достаточно будет понять, что:
- HTML — отвечает за структуру сайта (что за чем следует, в каком порядке и т. д.). Это основа, на которой создан сайт. Если сравнить с домом, то это это его планировка, расположение комнат.
- CSS — отвечает за дизайн (какие шрифты, размеры, цвета и подобное). Это общий стиль дома и стиль его отдельных комнат: какие обои будут, светильники, занавески, мебель. Поэтому документ, в котором прописываются коды css, называется «таблица стилей»
И если вы задались вопросом, как изменить, например, цвет заголовка сайта, размер шрифта в текстах или цвет заголовков в сайдбаре, то искать все это нужно в таблице стилей CSS. Вот это единственное, что стоит понять для начала, чтобы вносить изменения в код самостоятельно.
Мне нравится превращать сложное в простое. Помню, давно, когда у меня была первая машина, очень старая, проводка гнилая, часто перегорали предохранители, и я тянул ее каждый раз на СТО на буксире. Представьте, сколько денег было выкинуто, при том что самостоятельная замена, как оказалось, стоит копейки.
Однажды я посмотрел, что именно делает мастер. До сих пор не знаю, как устроен предохранитель. Но знаю, где его менять). Мотор я чинить сам бы не стал, а уж предохранитель заменить не сложно. Так же и с сайтами.
Если вы не хотите стать программистом, то нет необходимости глубоко разбираться в программинге. Достаточно ясно понимать, что для чего предназначено, где это искать и как изменить. То, что можно, лучше изменить самим, а все остальное оставить специалистам. В статье о дизайне блога есть полезная ссылка на эту тему.
Нужно ли быть специалистом во всем
В seo-блогах часто ведутся дискуссии, нужно ли новичку глубоко разбираться в html, а еще лучше — научиться самим писать сайты, чтобы было все уникальное.. Ну, не знаю — каждому свое и тут уж кому что ближе. Мне интересно чуть больше, поэтому я сейчас дополнительно учусь у Владимира. В ноябре этого года Владимир открыл свой авторский блог. Его блог сделан на самом простом, бесплатном шаблоне, он его лишь чуть изменил под себя.
Через 10 дней существования блог занял 104-е место в рейтинге всех сайтов Рунета с посещаемостью около 1,5 тысяч человек в сутки. За 10 дней. Так в чем же дело? Владимир прекрасно разбирается в html, может заказать и купить себе уникальный шаблон. Вот и вы должны понять, что секрет кроется не в шаблонах, а в полезности информации.
Где прячется код html
Простите за отступление, вернемся к нашим кодам). Допустим, вы хотите изменить цвет шрифта заголовка блога. Будем рассматривать на примере моего тестового сайта.
- Открываем сайт в браузере Google Chrome (если еще не пользуетесь им, установите — он хорошо заточен для работы с сайтами, в нем много встроенных инструментов).
- Наводим курсор мышки на элемент, который собираемся изменить. В данном случае — на название блога. Щелкаем по нему «правой» мышкой и в появившемся окне выбираем ПРОСМОТР КОДА ЭЛЕМЕНТА.
ВАЖНО: не перепутайте с ПРОСМОТРОМ КОДА СТРАНИЦЫ! Вся страница нам сейчас не нужна, только отдельный элемент.
Щелкаем по нему — в нижней части браузера появляется окно просмотра кода:
Красным выделена строка кода, которую мы меняем.
А вот в области, выделенной синим, содержится то, что мы ищем. Именно здесь вы можете найти точную (а не приблизительную) строчку кода, отвечающую за шрифты, цвет, размер, выделение и прочее. Таким образом вы можете узнать ЛЮБОЙ код любого элемента любого шаблона.
Находим нужную строчку в блоке, выделенным синим. Справа там есть ползунок, можно пролистать и найти нужную строчку.
Общий принцип, где что ищется:
Название шрифта — в строке FONT FAMILY
Размер шрифта — в строке FONT SIZE
Цвет шрифта — в строке COLOR
Вот три основные строчки, в которых меняется название, размер и цвет шрифта любого элемента. Справа в строке style css дается позиция строчки в документе. Если вам нужно изменить какой-то другой элемент (например, нужно узнать, где находится строчка. в которой можно изменить цвет панели меню или цвет ссылок), все делается абсолютно так же.
ВНИМАНИЕ:
красным на рисунке выделена строчка, которую мы будем копировать,
чтобы потом найти ее в таблице стилей.
4. Копируем строчку. Поскольку в этом примере мы хотим изменить цвет названия сайта, то копирую строчку, во второй картинке выделенную красным прямоугольником. В моем шаблоне она отвечает за изменение цвета названия сайта:
#header h2 a, #header h2 a:visited {
Находим нужную строчку в файле «таблица стилей (style.css)». Это делается уже в админке. Настоятельно прошу, пока нет уверенности и полного понимания, все эксперименты проводить на тестовом поддомене, чтобы исключить поломку сайта.
Итак, заходим в админпанель: КОНСОЛЬ — ВНЕШНИЙ ВИД — РЕДАКТОР. В правом сайдбаре находим файл ТАБЛИЦА СТИЛЕЙ (STYLE.CSS), открываем его.
Теперь открываем строку поиска клавишами CTRL + F: в верхнем окне появится пустая строчка-окошко. Вставляем в него ту строку, что скопировали в пункте 4.
И вы увидите, как в таблице стилей эта строчка выделится (на рисунке — оранжевым цветом):
Вносим изменение в элемент. В нашем случае мы меняем цвет шрифта, поэтому в строке COLOR подставляем другое значение — того цвета, который хотим. В примере черный цвет, его значение:
#282828
Выбрать цвет можно в любом сервисе палитр веб-цветов: наберите в поисковике «Палитра веб-цветов» и подберите тот, что хотите. Выбираем цвет, копируем его цифровое значение и аккуратно подставляем взамен старого. после чего нажимаем ОБНОВИТЬ ФАЙЛ и переходим смотреть, что получилось.
Если изменения не отобразились, очистите кэш за прошедший час и снова зайдите на страницу — на этот раз все должно отобразиться.
Описывается это долго, но на практике все делается быстро, особенно когда появляется начальный навык.
Более подробно, как изменить те или иные элементы:
Как изменить шрифт в заголовке блога
Как изменить шрифт в заголовке поста
Как изменить Home на Главную
Как изменить «читать далее»
На сегодня все, больше не буду мучить вас кодами. Надеюсь, что теперь вы сами сможете легко находить и менять любой элемент кода html, или, вернее, код css — да простят меня специалисты за упрощение. А если не разберетесь, посетите все же страницу Полезные сайты. Не тратьте время на ерунду.
Предлагаю посмотреть видео Артема Абрамовича, как искать и находить в любой теме/шаблоне, для любого движка (wordpress, joomla и т.п.) любое слово или элемент и заменить на то, что вам надо:
Поделитесь пожалуйста, если понравилось:Возможно вам будет интересно еще узнать:
opartnerke.ru
Исполняемый PHP код в виджетах и контенте Wordpress: функции и плагины
Приветствуют, друзья. Сегодня мы с вами разберемся в том, как заставить работать любой PHP код в виджетах, статьях и на страницах WordPress. По умолчанию такая функция в этой CMS недоступна и максимум, на что может рассчитывать пользователь – это внедрение HTML кода.
Содержание:
Почему PHP код не работает по-умолчанию
Казалось бы, почему разработчики не наградили столь популярный и удобный движок полезными возможностями по автоматическому исполнению PHP кода. Поначалу я задумывался об этом, но пришел к выводу , что такая политика ведется с позиции безопасности, ведь, неумелое применение PHP в виджетах или внутри записей может привести к непоправимым последствиям – в базе данных что-нибудь нарушится и весь сайт крякнет.
Поэтому, работа с PHP отдана на откуп программистов или людей более менее продвинутых в этом вопросе – непосредственно в файлах WordPress тем любые скрипты исполняются.
Для публичных сайтов (там, где несколько авторов) исполнение PHP в теле статьи повышается риск умышленного саботажа, так как любой автор может получить полный доступ к сайту через окно редактирования статей.
По степени опасности я бы разделил всю эту ситуацию на 3 уровня:
- Оставить все как задумали разработчики – безопасно, случайно или умышленно повредить сайт сложно.
- Разрешить исполнение PHP в виджетах – средний уровень опасности, только администратор сайта имеет доступ.
- Применение кода везде – опасно, так как управлять сайтом может каждый кто допущен к редактированию статей и страниц (модераторы, авторы)
Для чего нужен PHP в виджетах
Вопрос индивидуальный, так как реализовать с помощью этого языка программирования можно все что угодно. Лично меня к написанию этого поста подтолкнул заказ клиента, сайт которого я сейчас делаю. На нем необходимо было вывести в сайдбаре в отдельном виджете список новостей из одной рубрики – «Новости». В стандартных виджетах WordPress нет такой возможности.
Вопрос стоял между поиском плагина с соответствующими возможностями или применением несложного PHP кода. Скрипт для такой задачи, действительно, небольшой и нагружать сайт лишним плагином, который больше нигде использоваться не будет, не хотелось.
В целом, разрешая исполн
biznessystem.ru
Как посмотреть исходный код страницы и код элемента
25 октября 2013 
Алексей Ершов Просмотров: 61 042 Как посмотреть исходный код (html код) страницы?
Ctrl + U
Как посмотреть исходный код элемента?
Нажмите правую кнопку мыши на интересующем элементе страницы.
Далее в контекстном меню кликните левой кнопкой по пункту
Google Chrome: “Просмотр кода элемента”
Opera: “Проинспектировать элемент”
FireFox: “Анализировать элемент”
В других браузерах ищите подобный по смыслу пункт меню.
Всем привет!
Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.
Информация может быть многим известна, но поскольку пишу для начинающих блоггеров, веб-программистов и прочих старателей, то эта справочная статья обязательно должна присутствовать.
В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.
Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.
Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U. В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “keywords”. Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.
По аналогии можно искать и изучать другие фрагменты кода.
Просмотр всего исходного кода страницы в большинстве случаев не очень удобен, поэтому во всех браузерах существует возможность просмотреть код отдельного элемента или фрагмента.
Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow. Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту “Просмотр кода элемента” или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.
Мы видим, что в коде ссылки присутствует rel=”nofollow”. Это значит, что по этой ссылке не будет “утекать” тИЦ и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.
Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.
wordpress-life.ru
Как добавить код на страницы сайта в WordPress
В просторах интернета каждый день появляются сайты на WordPress. Начинающие пользователи довольствуются существующим функционалом, не вдаваясь в подробности кода и ничего не меняя. Однако со временем появляется потребность или желание залезть в механизм этой чудесной системы: подкрутить, что-то пофиксить, настроить под себя.
О том, как добавить код на страницы сайта, который будет выполнять или изменять ту или иную функцию, мы расскажем в этой статье.
Как правильно добавить код на страницы сайта
Добавлять код в файлы темы не имеет смысла, так как после обновления все внесенные вами изменения пропадут. Но как же в таком случае поступать? Вам следует создать дочернюю тему, с помощью которой вы сможете внедрять пользовательский код в файл function.php, без страха, что результат работы пропадет даром.
Дочерняя тема это подшаблон текущего шаблона вашего сайта. Для того, чтобы создать подтему, посредством которой вы сможете добавить код на страницы сайта, вам достаточно в корневой директории сайта, создать еще одну папку, в которой сделать файл CSS, который будет брать параметры из файла родительского шаблона.
Как альтернатива дочерней теме можно воспользоваться специализированными плагинами, позволяющими внедрять код, и минимизировать риск удалить что-то нужное или заменить на что-то не нужное. При этом изменения останутся даже после обновлений.
Один из плагинов, на который стоит обратить внимание – Insert Headers And Footers, который позволяет внедрять код в подвал и шапку сайта.
Плагин Global Content Blox позволяет работать с записями, внедрять в них код и запоминать сниппеты. Для добавления скриптов различных сервисов существует плагин Code Insert Manage. Однако данные дополнения не всегда могут дать желаемый результат.
Еще одним способом добавить код на страницы сайта – создать самому плагин, который будет реализовывать необходимую задачу или ряд задач. Это отличный способ сохранить функционал после обновлений. При этом плагин можно в любой момент деактивировать, или внести дополнительные изменения.
Если плагин широко применим, то его можно даже залить на официальный каталог расширений WordPress, чтобы им воспользовались другие пользователи и оценили ваше творение. Подробнее о том, что такое плагины, мы рассказали тут.
Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.
Также по этой теме:
wpuroki.ru
