Как узнать, в каком файле находится код элемента wordpress

Обновлено: 03.07.2024

Я хотел бы вручную отредактировать код моих страниц WordPress. Интерфейс WP позволяет мне индивидуально редактировать CSS или PHP. Функция редактирования страницы дает мне доступ к определенной части кода, за исключением тега Body.

Пожалуйста, помогите мне найти мои файлы на сервере.

Спасибо за помощь!

4 ответа 4

WordPress хранит содержимое в базе данных, физических файлов с содержимым страниц (или сообщений) нет. Файлы шаблонов темы управляют тем, как рендерить и отображать ваш сайт, вы можете найти эти файлы в wp-content/themes/YOUR-ACTIVE-THEME-NAME-HERE ..

Надеюсь, это поможет.

Несмотря на то, что это зависит от темы, многие структурные элементы дизайна ваших страниц содержатся в файлах .php тем. Перейдите в ИНФОРМАЦИОННАЯ ПАНЕЛЬ > ВНЕШНИЙ ВИД > РЕДАКТОР, и вы увидите файлы, из которых состоят шаблоны, а в случае некоторых тем — разделы ваших отображаемых страниц. Вы можете открыть эти файлы с помощью редактора WordPress или текстового редактора и внести изменения в сам шаблон темы, что может позволить вам внести нужные вам изменения (обязательно работайте с копией, пока не будете удовлетворены).

На примере темы Twenty-Ten вы можете найти информацию в файле header.php.

Каталог, в котором вы найдете файлы, был указан выше. Но я чувствовал, что есть что добавить. Файл page.php содержит структуру для страниц вашего сайта, которые не являются вашей домашней страницей или страницей вашего блога/сообщений. Обычно вы увидите такие вещи, как

И, конечно же, все остальное. Но важно то, что документ время от времени появляется и исчезает из php, а между ними находится редактируемый html. Надеюсь, это поможет

Не тот ответ, который вы ищете? Просмотрите другие вопросы с меткой html server или задайте свой вопрос.

Связанные

Горячие вопросы о сети

Чтобы подписаться на этот RSS-канал, скопируйте и вставьте этот URL-адрес в программу для чтения RSS.

WordPress — товарный знак WordPress Foundation, зарегистрированный в США и других странах. Этот сайт никоим образом не связан с WordPress Foundation.

Используя Chrome, вы можете щелкнуть правой кнопкой мыши элемент "Проверить", чтобы увидеть HTML-код этого элемента:

Интересно, как узнать, какой php-файл сгенерировал этот html. Может быть, есть какой-то инструмент для установки точки останова в html, чтобы сервер php останавливался при попытке сгенерировать его снова?

Я использую WordPress локально. У меня Ubuntu 14.04LMS. Я использую Sublime Text 3 с XDebug.

ОБНОВЛЕНИЕ 1

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

При проверке элемента с помощью инструментов разработчика Chrome (или других) он может не являться частью реального HTML-кода. Это также может происходить из javascript

В вашем возвышенном текстовом редакторе используйте command+shift+f, чтобы найти во всем файле i Yo Quiero!. я уверен, что это работает нормально

8 ответов 8

Используйте этот плагин "что за файл", чтобы узнать файл php. Дальше остается узнать функцию или что-то еще по CTRL+F в любом редакторе.

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

Этот плагин работал отлично. На самом деле экономит время. Спасибо и добро пожаловать в stackoverflow Rituparna Sonowal!

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

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

Я поместил его в header.html темы. К сожалению, вывод говорит: . index.php имеет следующую строку кода: require( dirname( __FILE__ ). '/wp-blog-header.php' );

$_SERVER['PHP_SELF'] будет файлом, фактически вызываемым пользователем. Так что в этом случае, я думаю, вам придется жестко закодировать имя в header.php echo ' '; или что-то в этом роде.

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

К сожалению, с WordPress вам нужно немного покопаться:

Это страница/публикация/пользовательская запись (т. е.вы можете найти страницу в админке и отредактировать ее)
Если да, посмотрите на назначенный шаблон (в сообщениях обычно нет поля выбора шаблона, если только не добавлен пользовательский код) и найдите соответствующий шаблон страницы в вашей теме (page-whatever.php) (он может называться не как вы видите в раскрывающемся списке, но в своих примечаниях оно будет иметь имя, которое вы видите), или если сообщение вы ищете single.php или если пользовательское сообщение ищет single-whatever.php.
Вышеупомянутое значение используется по умолчанию и подходит для 60 % ситуаций. Но если вы добавите плагин, и он добавит новые страницы, шаблон страницы будет в плагине, и начнется настоящее веселье.
Если подключаемый модуль разработан с учетом пользовательских модов, его страницы должны находиться в одном месте или в функционально установленной папке. Найдите вышеуказанные файлы в этих местах, если они существуют, или в общих папках плагинов.
Если по-прежнему не получается, поищите add_action('save_post', 'whatever'); может быть код, указывающий return $template , возможно, это также будет иметь тип сообщения в функции. Ищите путь, по которому он звонит
Еще один способ добавить страницу — переписать URL (поиск перезаписи в файлах). Он будет содержать путь к файлу (есть несколько способов сделать это, так что найдите их, чтобы вы их узнали).

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

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

Это может быть полезно упомянуть, если вы когда-нибудь будете создавать плагин целиком, логически хранить файлы и включать их из файлового контроллера или файла плагина. Храните страницы в папке pages, чтобы их было легко найти.

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

Файлы шаблонов в темах WordPress

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

Например, файл single.php управляет отображением отдельных сообщений на вашем веб-сайте. Это не единственный файл для этого.

Если в вашей теме нет файла single.php, WordPress будет искать альтернативные шаблоны, такие как index.php, для отображения страницы.

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

Сказав это, давайте посмотрим, как легко узнать, какие файлы нужно редактировать в вашей теме WordPress.

Поиск файлов шаблонов в темах WordPress

Первое, что вам нужно сделать, это установить и активировать плагин What The File. Подробнее см. в нашем пошаговом руководстве по установке плагина WordPress.

Плагин работает сразу после установки, и вам не нужно настраивать никаких параметров.

После активации вам нужно посетить свой веб-сайт, и вы увидите новое меню «Что за файл» в панели администратора WordPress.

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

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

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

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

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

Плагин What The File поможет вам найти файлы тем, которые нужно скопировать и отредактировать в дочерней теме.

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

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоруководств по WordPress. Вы также можете найти нас в Twitter и Facebook.

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

Что такое Inspect Element или инструменты разработчика?

Современные веб-браузеры, такие как Google Chrome и Mozilla Firefox, имеют встроенные инструменты, которые позволяют веб-разработчикам устранять ошибки. Эти инструменты показывают код HTML, CSS и JavaScript для страницы и то, как браузер выполняет этот код.

С помощью инструмента Inspect Element вы можете редактировать код HTML, CSS или JavaSCript для любой веб-страницы и видеть свои изменения в реальном времени (только на своем компьютере).

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

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

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

Мы всего лишь коснемся вариантов использования. Элемент проверки действительно мощный.

В этой статье мы сосредоточимся на Inspect Element в Google Chrome, потому что это наш любимый браузер. Firefox имеет собственные инструменты разработчика, которые также можно вызвать, выбрав элемент проверки в меню браузера.

Готовы? Приступим.

Видеоурок

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

Запуск элемента проверки и поиск кода

Вы можете запустить инструмент проверки элемента, нажав клавиши CTRL + Shift + I на клавиатуре. В качестве альтернативы вы можете щелкнуть в любом месте веб-страницы и выбрать элемент проверки в меню браузера.

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

Окно инструментов разработчика далее разделено на два окна. Слева вы увидите HTML-код страницы. На правой панели вы увидите правила CSS.

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

Вы также можете навести указатель мыши на элемент на веб-странице, щелкнуть правой кнопкой мыши и выбрать элемент "Проверить". Элемент, на который вы указали, будет выделен в исходном коде.

Редактирование и отладка кода в Inspect Element

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

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

Когда вы вносите изменения в CSS или HTML, эти изменения немедленно отражаются в браузере.

Обратите внимание, что любые изменения, внесенные здесь, нигде не сохраняются. Элемент Inspect — это инструмент отладки, и он не записывает ваши изменения обратно в файлы на вашем сервере. Это означает, что если вы обновите страницу, все ваши изменения исчезнут.

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

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

Легкий поиск ошибок на вашем сайте

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

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

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

Такие инструменты, как Inspect Element Console и SupportAlly, помогут вам повысить качество поддержки клиентов, потому что группа технической поддержки любит клиентов, которые проявляют инициативу в предоставлении подробного отзыва о проблеме.

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоруководств по WordPress. Вы также можете найти нас в Twitter и Google+.

Читайте также: