Как найти элемент в коде

Здравствуйте уважаемые начинающие веб-мастера.

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

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

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

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

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

Весь код Вам пока знать не обязательно.

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

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

Допустим Вам захотелось изменить внешний вид и положение заголовка сайта.

С помощью веб инспектора Вы определите, что заголовок заключён в тег <h1></h1>, а стили (оформление) его находятся в файле style.css, и расположены в селекторе site-title.

Значит идём в Консоль — Внешний вид — Редактор, и когда он откроется, нажимаем комбинацию клавиш Ctrl-F.

После этого, в правом верхнем углу редактора откроется поле поиска, куда и нужно ввести словосочетание site-title

Поиск в коде

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

Точно так же можно найти любой элемент кода в, куда более сложном файле php.

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

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

Если щёлкнуть правой клавишей мыши, выбрать «Просмотреть код страницы», затем комбинация клавиш Contrl-F, то точно так же появится окно поиска, в которое можно ввести искомый элемент кода.

Поиск в коде

И вот он — пожалуйста.

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

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


Перекур

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?

Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

Расширенный редактор для WordPress — «Ultimate TinyMCE» < < < ◊ > > > Исправляем шаблон WordPress. Веб-инспектор

 

Запись опубликована в рубрике WordPress. Добавьте в закладки постоянную ссылку.

5 комментариев на «Как найти элемент в коде»

  1. stariс говорит:

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

  2. Антон говорит:

    Спасибо за статью. Я для поиска свойств елементов страницы пользуюсь встроенными средствами браузера Google Chrom.
    Что очень хорошо — это возможность вносить в css-свойства страницы изменения и сразу видеть результат этих изменений. После того как добьюсь нужных мне изменений, вношу правки в шаблон сайта.

  3. Александр говорит:

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

  4. Ирина говорит:

    Здравствуйте. Ваш сайт для меня просто находка. ))) Я только сейчас решила освоить искусство управления шаблонами WordPress, так что буду заглядывать.

  5. seoonly говорит:

    В мозиле удобнее всего код подсвечивать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *