Как найти элемент на wordpress

Публикация в группе: Otshelnik-Fm – мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Другое

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

Здравствуйте. Периодически нужно найти и откорректировать какой-то фрагмент кода, но искать его на хостинге по всем папкам и файлам очень долго. Есть ли какой-то более быстрый способ поиска?

В этой заметке я вам покажу: как найти нужный блок в исходном коде и в каком файле он вызывается.

Как пример возьмем вот этот блок:

Что мы знаем о этой странице?
В вордпресс ее выводит плагин WP-Recall. А сама страница выводится шорткодом productlist с атрибутом type=slab

Ок.

Инспектируем:
В браузере жмем F12. Открывается консоль разработки. В верхнем углу, слева, в этой панели кнопка “Инспектировать” (иконка курсор с прямоугольником) жмем по ней и тыкаем на искомый элемент на странице:

– ок. Имя дива мы знаем. Это product-metas

Теперь плагин WP-Recall (ведь именно он выводит этот контент в нашем случае) копируем на ПК, и ищем по всем файлам этого плагина (ctrl + shift + F в notepad++)
Находим:

три файла. Один — таблица стилей. Два — темплейты. Этот блок я выводил шорткодом slab. Значит мой вариант — файл product-slab.php

Буквально за 2 минуты мы нашли то что искали. Это даже быстрей чем написать свой вопрос на форуме.

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

Но никогда не правьте плагин напрямую. Пользуйтесь хуками и фильтрами и как в этом примере – данный файл product-slab.php – это шаблон WP-Recall плагина

Советую к обучению новичкам – так же как работать с панелью браузера: Учимся работать с панелью разработчика браузера.

p.s. один знающий товарищ написал:

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

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

не всегда чтобы что-то найти ищут именно для изменения. Мне часто надо просто глянуть исходники и найти за что зацепиться чтобы решить свою задачу — т.к. у 99% плагинов нет технического описания их api. Вот и изучаю самостоятельно.

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

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

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

Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.

Перед Вами откроется код файла style.css. Покрутите его вниз, и первое, что придёт Вам в голову будет: ё-моё, как же в этой массе английских слов, цифр и символов, найти то, что нам будет нужно.

Для полноты ощущения, можно открыть один из php файлов, которые расположены в колонке справа от поля редактора.

Только сразу отгоните мысль типа: «Я в этом до самой смерти не разберусь». Разберётесь, и я Вам в этом помогу.

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

Вариант 1.

Условие: мы точно знаем то, что нам нужно найти.

Для примера возьмём код страницы.

Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.

Этот поиск работает абсолютно для любого кода, открытого в браузере, то есть на странице.

Вариант 2.

Условие: мы видим элемент на странице, но не знаем ни его html, ни css.

В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.

Инструмент разработчика есть во всех браузерах и открыть его можно или клавишей F12, или правой клавишей мыши, выбрав “Просмотреть код” или “Исследовать элемент”. В разных браузерах по разному.

Главное не выбирайте “Просмотреть код страницы”. Похоже, но не то.

После этого появится web-инспектор. Его интерфейс в разных браузерах немного отличается, но принцип действия везде одинаковый.

Я покажу на примере web-инспектора Chrome.

Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.

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

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

Определить, какой код, какому элементу соответствует, очень просто.

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

Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.

Теперь, зная class или id элемента, можно спокойно идти в файл style.css, найти в нём нужный селектор, с помощью Поиска (Ctrl+F), и править внешний вид элемента.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?
Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

В раздел > > > Исправляем шаблон WordPress. Веб-инспектор

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

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

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

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

Что за файл

ЦЕНА: Бесплатно

Как только вы поймете, что аббревиатура этого плагина – WTF, вы поймете, насколько он классный на самом деле. После того, как вы установите и активируете его, What the File создаст простой пункт меню прямо на вашей панели инструментов, рядом с вашим именем пользователя и вашей классной фотографией. Если вы сейчас откроете любую страницу своего сайта, вы сможете навести курсор на пункт меню What the File, и плагин сообщит вам, какие части шаблона были использованы для создания этой конкретной страницы.

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

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

Локатор строк

ЦЕНА: Бесплатно

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

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

Если вы ищете слово, целую фразу или фрагмент кода, этот плагин сможет его найти.

Все, что вам нужно сделать, это перейти в Инструменты -> Локатор строк и начать поиск. Затем плагин просканирует все файлы тем и плагинов, которые вы установили, и найдет поисковый запрос. Вы даже можете выбрать конкретную тему / плагин для плагина для поиска.

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

Теперь вы можете изменить любую часть любой темы / плагина, вы можете перевести их жестко запрограммированные части и забыть о ручном сканировании файлов, которые вам неизвестны.

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

Источник записи: https://firstsiteguide.com

Насколько я понял суть вопроса, вам нужно добраться до кода странички чтобы внаглую, зачёркнуто, цинично, зачёркнуто, немного его поправить. И тогда да, это не совсем очевидно.
Дело в том, что CMS WordPress генерирует странички на основе составленных вами блоков и плагинов, посредством PHP и JS кода. Как, впрочем, большинство CMS. Это если вкратце.

Если нужно вставить какой то код помимо как в блоках конструктора, можно воспользоваться каким-нибудь site-wide плагином. Например Head & Footer Code. Он бесплатен, прост и удобен. Вот в него можно встроить любой код, хоть свой PHP или JS, ну, и естественно, HTML.

Таблицу стилей (style.css) можно править напрямую через ftp по адресу [ваш_домен/wp-content/themes/ваша_тема/style.css]. Или через консоль: Внешний видредактор тем.
Рекомендую создать свой файл css а в основном сделать линк на него через импорт (например: @import url("/css/main.css");). Тогда при сменеобновлении темы, будет достаточно вписать этот линк и не приписывать все свои стили.