Как найти элемент в коде
Новичку очень трудно найти нужный символ или слово в массе кода, однако это делается очень быстро и просто. Если не знаете как, то читайте дальше.
В следующей статье, мы приступим к редактированию шаблона, и нам придётся находить нужные элементы в коде темы.
Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.
Перед Вами откроется код файла style.css . Покрутите его вниз, и первое, что придёт Вам в голову будет: ё-моё, как же в этой массе английских слов, цифр и символов, найти то, что нам будет нужно.
Для полноты ощущения, можно открыть один из php файлов, которые расположены в колонке справа от поля редактора.
Только сразу отгоните мысль типа: «Я в этом до самой смерти не разберусь». Разберётесь, и я Вам в этом помогу.
Рассмотрим два варианта, в зависимости от начальных условий, нахождения нужного элемента в коде.
Условие: мы точно знаем то, что нам нужно найти.
Для примера возьмём код страницы.
Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.
Этот поиск работает абсолютно для любого кода, открытого в браузере, то есть на странице.
Условие: мы видим элемент на странице, но не знаем ни его html, ни css.
В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.
Инструмент разработчика есть во всех браузерах и открыть его можно или клавишей F12, или правой клавишей мыши, выбрав «Просмотреть код» или «Исследовать элемент». В разных браузерах по разному.
Главное не выбирайте «Просмотреть код страницы». Похоже, но не то.
После этого появится web-инспектор. Его интерфейс в разных браузерах немного отличается, но принцип действия везде одинаковый.
Я покажу на примере web-инспектора Chrome.
Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.
Изначально, код откроется в сложенном виде, то есть будут видны только основные элементы страницы, но если щёлкнуть по треугольничку в начале строки, то откроются все вложения, находящиеся в элементе.
И вот так, открывая вложение за вложением, можно добраться практически до любого элемента, находящегося на странице.
Определить, какой код, какому элементу соответствует, очень просто.
Надо просто вести по строкам курсором, и как только курсор оказывается на строке с кодом, так тут-же элемент, которому соответствует этот код, подсвечивается.
Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.
Теперь, зная class или id элемента, можно спокойно идти в файл style.css, найти в нём нужный селектор, с помощью Поиска (Ctrl+F), и править внешний вид элемента.
Желаю творческих успехов.
Неужели не осталось вопросов? Спросить
Перемена
— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?
Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.
Как найти элемент в wordpress?
Помогите новичку, искала весь день как изменить всего одно слово на сайте. Firebug выдаёт HTML код элемента, но как его найти в редакторе, нет его. а как просто редактировать ОДНО слово.
palmagram.ru искомое слово «комментарий». HTML код вот такой < label for = "comment ">Комментарий < / label >(прописала с пробелами
как его можно изменить в wordpress/ хэээлп
- Вопрос задан более трёх лет назад
- 1716 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Sublime text -> Find -> Find in files -> Скармливаем пупку с темой -> В поиске указываем нужное слово.
Ответ написан более трёх лет назад
Нравится 1 5 комментариев
Poly @polypoly Автор вопроса
я пыталась через Notepad++ не находит ( это же HTML// а вы какой редактор имеете ввиду?)
Poly: Sublime Text 3 https://www.sublimetext.com/3 , или Atom: https://atom.io/
Игорь Воротнёв @HeadOnFire
Роман Краббз: в n++ поиск по файлам есть)
Poly @polypoly Автор вопроса
Игорь Воротнёв: я так поняла, Note++ не находит HTML. пока и через сублимтекст не получается. Это вообще возможно?
Игорь Воротнёв @HeadOnFire
Poly: Почитайте мой ответ ниже, там искать надо в файлах перевода скорее всего
Игорь Воротнёв @HeadOnFire
PHP, Laravel & WordPress Evangelist
Переводы в файлах .mo, используйте программу POedit. Подробнее тут https://make.wordpress.org/polyglots/handbook/
Ответ написан более трёх лет назад
Нравится 1 9 комментариев
Poly @polypoly Автор вопроса
спасибо за ответ, я нубка и я вообще нечего не поняла, что там делать))) похоже это нужно изучать с месяцок? ))
Poly @polypoly Автор вопроса
покапалась я в POEDIT. посмотрела принцип работы. Прилетел еще косяк — ни на хостинге через FTP, ни на локальном в папке language (кстати она странное местоположение имеет) нет действующей темы. просто нет и все)))
Игорь Воротнёв @HeadOnFire
Poly: А что за тема то?)
Poly @polypoly Автор вопроса
Игорь Воротнёв @HeadOnFire
Poly: Во первых, никогда не качайте темы с непонятных сторонних источников — вы никогда не знаете что там могли добавить в оригинальный код. Есть вероятность подцепить заразу. Вот ссылка на оригинал — csthemes.com/theme/pieces Во-вторых, тема сама по себе translation ready, но файлов перевода в ней нет, надо генерировать самостоятельно. В третьих, если я правильно понимаю, речь идет о лейбле в форме комментирования, слева от textarea? Этот фрагмент генерируется родной вордпресовской функцией comment_form(). В коде темы (файл comments.php) она вызывается с кучей параметров, но среди них нет тех, которые бы модифицировали этот лейбл, соответственно используется стандартный. А стандартный должен быть в файле перевода самого WordPress.
Игорь Воротнёв @HeadOnFire
Poly: Ну или можно перезаписать на свое в массиве $args, элемент ‘fields’. Посмотрите документацию к функции comment_form()
Poly @polypoly Автор вопроса
Игорь Воротнёв: спасибо за помощь. вы все правильно понимаете, мозолит мне глаза это. определите меня пжлст, мне нужно через POedit найти общую папку перевода wordpress и там изменить перевод «комментарий» на, допустим «_». ахаха. или все вышесказанное вами означает «пусть остаётся как есть и не парьтесь» ))
Игорь Воротнёв @HeadOnFire
Poly: Если вас не затруднит, напишите более четко что конкретно вы хотите сделать. Если заменить фразу «Комментарий», то на что. Только текст или и разметку. И тд. Я не совсем понимаю чего вы пытаетесь добиться)
Poly @polypoly Автор вопроса
Игорь Воротнёв: вот сайт palmagram.ru если не сложно зайдите на любую запись и спуститесь к форме комментариев, у меня есть «добавить комментарий», «отправить комментарий» и еще просто слово «комментарий». последний хотелось бы просто удалить, ну или просто заменить хоть на смайл, без последствий. слишком много слов «комментарии» )))) заранее благодарю
Как найти слово в строке java
Для того, чтобы найти подстроку в строке в Java , вы можете использовать метод indexOf() или lastIndexOf() класса String . Эти методы позволяют найти индекс первого (или последнего) вхождения заданной подстроки в строке. Если подстрока не найдена, методы возвращают -1.
Например, чтобы найти индекс первого вхождения подстроки «world» в строке «Hello world!», вы можете использовать следующий код:
String str = "Hello world!"; int index = str.indexOf("world"); System.out.println(index); // => 6 Также можно использовать метод contains() для проверки наличия подстроки в строке без необходимости получать ее индекс.
String str = "Hello world!"; boolean contains = str.contains("world"); System.out.println(contains); // => true Как научиться читать код сайта и зачем это нужно, если вы не программист
Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно. Примечание: мы не будем лезть в дебри и подробно описывать процесс программирования. Расскажем о том минимуме, что пригодится в работе над вашим сайтом.
Зачем понимать исходный код
- Больше понимать в SEO-продвижении.
Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.
Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.
- Анализировать сайты конкурентов на более глубоком уровне.
Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.
- Составлять грамотные ТЗ для разработчика самостоятельно.
Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.
Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.
- Экономить, самостоятельно внося изменения в сайт.
Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.
Что такое исходный код сайта
Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.
Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.
Как посмотреть код любого сайта
Расскажем, как посмотреть исходный код страницы в браузере Google Chrome*. В остальных браузерах этот процесс примерно такой же.
Код вызывается одной из комбинаций:
- комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:
- комбинация клавиш Ctrl + Shift + I или правая кнопка мыши → «Просмотреть код» — удобная команда, чтобы посмотреть не весь исходный код страницы сразу, а код отдельных элементов на странице.
Панель с кодом откроется на этой же странице, а не в другом окне. При наведении мышки на код будет подсвечиваться соответствующая ему область на текущей странице.
Дальше в статье мы будем пользоваться именно этим инструментом — он нагляднее.
Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.
Что такое HTML
HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.
Что можно узнать о сайте из исходного кода
Код сайта предназначен в первую очередь для браузера и поисковых систем. Браузеру он говорит, что и в каком порядке выводить на странице. Поисковые системы берут из исходного кода всю информацию о странице: заголовок, описание, метаданные — всё то, что потребуется, чтобы показать страницу в выдаче поисковика. Обычный пользователь тоже может прочитать этот специальный текст — достаточно знать, как он устроен.
Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:
- текст, который есть на странице;
- цвета, шрифты и размеры элементов страницы;
- иллюстрации, фотографии и другие детали;
- ссылки;
- важные теги, метатеги и атрибуты кода;
- скрипты, счётчики, генераторы заявок, коды идентификации в системах и пр.;
- данные JavaScript;
- ошибки и поломки в коде и прочее.
Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.
Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.
Основные теги
HTML-страница состоит из набора тегов, которые вместе с содержимым называются элементами — это строительный материал веб-страницы. Другими словами, теги — команды для браузера, чтобы он понял, как нужно показывать сайт пользователю. Указывая в коде определенные теги, вы говорите браузеру: «Это текст, а это картинка, это ссылка, а это кнопка или форма». И браузер показывает все элементы интерфейса так, как вы их разместили.
Теги обычно открываются и закрываются так:
Теги делятся на два вида: блочные и строчные.
- Блочные теги всегда занимают отдельную строку в коде и обозначают целый элемент страницы сайта. Пример: заголовки или параграфы.