Создавай шаблон для сайта своими руками, в любом случае придется работать с кодом. Именно об этом мы с вами поговорим в нашем очередном уроке. В первую очередь, нужно разобраться, как быстро находить нужный участок кода среди всех файлов. Ведь, чтобы вносить изменения, нужно сначала найти место, где оставлять правки. Всегда можно привлечь программистов, но ведь мы хотим создать шаблон своими руками. Ради сохранения финансов, которые могут потребоваться на внесение изменений, и получения новых знаний, в нашем уроке будут рассказаны самые основные моменты, необходимые для поиска фрагментов кода в файлах плагинов и шаблонов. Для тех, кто хочет не создавать новую тему, а вносить правки в уже имеющуюся, также разработан специальный вариант поиска.
Полезно: шаблон WordPress своими руками. Урок 1. Информация до разработки
Исходный код страницы
Сайты состоят из разных элементов, связанных между собой. Общая структура страниц прописывается в HTML документах, а дизайн задают стили CSS. Если же говорит об исходном коде страницы, то он включает в себя три основных раздела:
- таблицу стилей CSS;
- HTML-разметку;
- дополнительные элементы, сгенерированные с помощью JS, или ссылки на файлы с иным кодом.
Для серверной стороны эти файлы представляют собой простой текст, который новичку будет достаточно сложно понять. Но после обработки браузером, они превращаются в привычный нам красивый веб-сайт.
Уметь разбираться в исходном коде нужно не только для создания нового шаблона сайта, но и для анализа тех или иных аспектов работы уже готовых страничек. Изучив код, вы сможете:
- найти мета-теги ресурса;
- определить наличие или отсутствие тех или иных элементов;
- узнать характеристики отдельных элементов;
- просмотреть ссылки;
- найти возможные проблемы и требующие оптимизации детали.
На самом деле, знания работы с кодом откроют еще массу других возможностей, которые приходятся вам впоследствии.
Полезно: шаблон WordPress своими руками. Урок 2. Информация до разработки
Для чего нужен быстрый поиск?
Давайте разберемся, для чего необходим быстрый поиск по файлам PHP, CSS и HTML. Большинству из тех, кто обращается к статьям с подобным вопросом, уже понятно, чем занимается та или иная функция. Если же вы совсем новичок в этой области, давайте разберем простейшие примеры.
Поиск по документам может понадобиться для того, чтобы найти следующие элементы:
- функции – если вы решите исправить какую-то из них, то нужно определить не только где находится она сама, но и в каком месте она вызывается в других файлах шаблона;
- классы – для тех случаев, когда требуется внести правки в класс или же настроить его иначе, нужно найти место его использования;
- очистка шаблона от лишних элементов, которые формируют избыточные запросы к базе данных, очень важна для конечного сайта, так как повысит быстродействие сайта и его производительность.
Эти и иные проблемы, связанные с поиском фрагментов кода в файлах, поможет решить наш урок.
Полезно: шаблон WordPress своими руками. Урок 3. Тег bloginfo ()
Поиск участков кода
Для начала работы с кодом вам потребуется скачать и установить самый популярный редактор Notepad++, который поставляется по бесплатной лицензии. Он открывает большое количество возможностей при работе с кодом. В нем можно задать язык написания кода, установить разметку и выбрать подсветку элементов. Именно с помощью этого программного продукта будет производиться вся основная работа с нашим новым шаблоном, а также с его помощью можно производить поиск по одному или нескольким файлам.
После загрузки программы, заходим в нее и открывает все нужные документы, в которых и будет осуществляться последующий поиск. Сделать это быстро можно выделив все файлы мышкой и просто перетащив в окно редактора. Этого можно и не делать, но именно так будет максимально удобно работать с ними в дальнейшем, ведь мы будем вносить в код правки, а значит потребуется открывать их. Лучше сделать это заранее, чтобы после не тратить лишнее время на их поиск в папках.
Файлы перенесены и открыты в редактора, теперь можно вызвать окно поиска. Делается это нажатием сочетания клавиш Shift + Ctrl + F. Перед вами появится всплывающее окно поиска с рядом настроек. Далее нам потребуется ввести искомую фразу в поле «Найти», выбрать папку со всеми файлами. Также стоит нажать галочку рядом с настройкой «Во всех подпапках», чтобы поиск заходит глубже указанной вами директории. Теперь нажимаем кнопку «Найти все».
Открыть окно поиска можно и через верхнее меню программы, нажав «Поиск». Первая вкладка всплывающего окна позволит выполнять поиск по одному, активному документы. Третья же «Поиск в файлах» поможет найти фрагменты кода в том случае, когда вы не знаете точного файла, в котором нужно искать.
Если все параметры были заданы верно, то внизу экрана отобразится список файлов, в которых была употреблена заданная фраза, а также строчки кода для более быстрого поиска. После установки директории и линии, где обнаружен данный параметр, можно приступать к внесению изменений.
Наиболее часто программисты избавляются от лишних вызовов тега «bloginfo», который создает много запросов к базе данных. О нем мы уже говорили в прошлых уроках, поэтому использовать его стоит с умом.
Вы можете быть удивлены, как часто данная функция используется в шаблонах, при том что в ряде случаев ее можно заменить на статичную. Это никак не повлияет на движок сайта. Например, мы может убрать целых 8 обращений тега к БД в нашем шаблоне, которые выполнялись с каждой загрузкой страницы.
Полезно: шаблон WordPress своими руками. Урок 4. Информация до разработки
Просмотр кода на готовых сайтах
В качестве примера для своего шаблона вы можете ориентироваться на ресурсы в интернете. Давайте разберемся, как посмотреть данные об исходном коде интернет-странички. Сделать это не сложно, достаточно кликнуть правой кнопкой мышки на любую область и выбрать «Просмотр кода страницы». После этого перед вами откроется HMTL-код сайта, представляющий собой список строк с информацией об элементах странички, где каждая новая строчка имеет свой номер. Чтобы легко разбираться в открытом файле, нужно различать отдельные участки кода.
В качестве примера рассмотрим содержимое тега «Head». Внутри него находится информация для поисковиков и веб-мастеров, которая не выводится на сайт с внешней стороны. Здесь находятся ключевые слова и описания. Также в этом разделе вы сможете увидеть с помощью какой CMS выполнен сайт или используемой теме WordPress. Стили CSS и шрифтов отображаются внутри этого тега.
На этой же страничке вы сможете найти стили отдельных составляющих сайта, например, заголовков или цвета ссылок. Все шаблоны разные, хоть и имеют схожую структуру. Так как же найти нужный участок кода на любом сайте? Для выполнения правильного поиска и работы с шаблонами требуется понимание, что CSS и HTML файлы совершенно разные вещи. Первый несет в себе информацию о дизайне сайта, то есть шрифты, размеры, цвета и другие подобные элементы, а второй за общую структуру, то есть какие блоки идут в каком порядке. Поэтому, если вас интересует оттенок или размер шрифта, то искать подобную информацию нужно будет в таблице стилей.
Полезно: как найти товары WooCommerce в базе данных
Заключение
В данном уроке мы разобрались, каким простым и удобным способом мы можем работать сразу с несколькими файлами в шаблоне. Это поможет не только на этапе внесения правок в имеющиеся темы, но и при создании своей собственной. Работать с кодом придется достаточно много, поэтому проще уметь быстро искать отдельные элементы. Таким образом, вы всегда сможете определить, где и когда уже использовали функцию или класс. Также мы изучили основные аспекты, связанные с исходным кодом и необходимость его изучения.
