FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Как подсматривать названия чужих тем на CMS Joomla, Drupal и WordPress

Категории: Вебмастеру

подглядываем названия темСегодня хочу поднять очень интересную для веб-мастеров и дизайнеров тему. Впрочем, это касается только ленивых веб-мастеров. Как говаривал Билл Гейтс: «Я поручу трудную работу ленивому человеку только потому, что он найдёт самый лёгкий способ её сделать» :).

Речь о том, как быстро и безболезненно определить не только движок, на котором построен тот или иной сторонний сайт, но и увидеть файл темы и расположение HTML-блоков на сайте, прочитать файл CSS с тем, чтобы использовать какие-то новые фишки на своём сайте.

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

Выход простой как лом. Если вы умеете открывать исходный код страницы (а вы умеете), то проблем не будет никаких. Редко кто защищает свой сайт таким образом, что прочитать исходный код становится невозможным. Я встречал таких сайтов 5 или 6 за всё время. Защиту ставят многие, но она для детей, точнее – от детей. Поэтому на заинтересовавшем вас сайте жмите Ctrl+U или F8 (это зависит от вашего браузера), и будет вам счастье. Сразу должен сказать – способ этот никак не навредит тому сайту, информацию с которого вы будете считывать, так что – смело в бой!

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

temy

Что он может нам рассказать и как его применить в практических целях? Здесь у нас налицо чистокровный 1C Bitrix – система управления сайтом. Эта CMS уже немного устарела, но сайтов с её использованием в сети пруд пруди и, возможно, ваш интернет-магазин или портал построен именно на Битрикс. Видите ссылки в исходном коде? Все они начинаются с корня и имеют продолжение в директории /bitrix/ и т.д. Это значит, что сайт построен на Битрикс, и вы можете при надобности узнать о нём более подробно. Например, файл css – он вам может понадобиться, если на сайте задействована какая-нибудь интересная фишка (я уже говорил), и вы хотите её скопировать себе.

temy

В этом примере всё стандартно, и взять отсюда нечего. Как открыть файл css? Очень просто. Находите строку с адресом, заканчивающимся на /css, щёлкаете по ней мышкой, и всё, файл перед вами. На скриншоте я подчеркнул путь к картинке, которая стандартно используется в теле страницы. Также из исходного кода главной страницы сайта вы можете узнать кодировку сайта, адреса его фидов, и даже некоторые плагины, установленные на сайте. Впрочем, на Битрикс плагины немного не так работают, а вот в WordPress это легко сделать. Смотрите здесь:

temy

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

Возможностей, которые можно почерпнуть, прочитав правильно исходный код сайта, много. Так, можно узнать, на какой CMS работает сайт, даже если этой строчки нет в коде. Раньше строку типа:

temy

можно было увидеть почти на каждом сайте. Мета-тег «generator» прописывался в обязательном порядке. Но сейчас многие в целях безопасности (не понимаю смысл такой безопасности) убирают её, так как эта строчка ни на что не влияет и несёт чисто информационную нагрузку. Просто на один запрос к серверу станет меньше, но от этого скорость загрузки сайта не очень-то и увеличится. Но узнать всё равно можно, и довольно легко.

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

1
<meta name="author" content="Administrator" />

Или, взглянув на исходный код и обнаружив там строки типа

1
<link rel="apple-touch-icon" href="/templates/yoo_nano/apple_touch_icon.png" />

сразу можно смело относить этот сайт к джумловскому. Только на этом конструкторе используется директория templates по умолчанию. А переименовывать папки с целью замаскировать свой сайт – это уже явный перебор.

Для Drupal, например, характерно использование модульной системы построения содержимого сайта, поэтому папка modules обязательна. Файл css также можно сразу вычислить и сказать, на каком конструкторе сделан сайт. Для Друпал это css?c – с окончанием «с» на конце имени файла. И ещё одна особенность сайтов на Drupal – для каждого модуля создаётся свой файл стилей. Громоздко, конечно, но что поделаешь – каждому своё.

temy

Для WordPress, например, всё намного проще – один файл стилей, одна папка темы, которая, кстати, тоже очень часто прописывается в начале файла css. А ещё название темы на WordPress можно узнать из такой строчки:

temy

Где сразу ясно (строка подчёркнута), что сайт использует CMS WordPress, тема – Twenty Eleven, сайт верифицирован в Google, ну и так далее по тексту. Характерная для WordPress папка – wpcontent, которая определяет расположение всех остальных папок и файлов сайта. В этой директории лежат файлы плагинов (папка wp-plugins), файл стилей и возможно, папка с вложениями стилей. Всё это можно прочитать в исходном коде.

Сам css файл темы можно прочитать, перейдя по ссылке (подчёркнуто). Здесь вы найдёте подтверждение полученной информации, а также имя автора темы, ссылку на скачивание этой темы, версию шаблона и т.д.

temy

Ещё одна фишка в помощь веб-мастерам – некоторые данные о сайте можно считать с файла robots.txt сайта. Для этого достаточно к основному адресу любого сайта приписать в адресной строке браузера имя файла — robots.txt. Например, http://www.site.ru/ robots.txt. В результате вы можете увидеть такую картину:

temy




Здесь видно, что сайт построен на WordPress. Конечно, не обязательно именно так будут прописаны правила – каждый их определяет сам для своего сайта, но смысл понятен. Здесь отдельными строками прописано правило на индексирование роботами Яндекса и Гугла изображений сайта, значит, можно сделать вывод, что сайт делает упор на медиаинформацию – видео, фотографии, изображения. Названия директорий также указывают на WordPress – wp-.

Также можно при помощи браузера, точнее, расширения в нём, прочитать подробнее HTML-код страницы и взять кое-какую информацию. Так, для Firefox есть хорошее расширение веб-разработчика. Оно встроено в браузер, и при работе с ним нужно просто выделить интересующий вас участок на странице сайта и нажать в выпавшем окне «Исследовать элемент». Дальше – дело техники:

названия тем

Как видно из скриншота, здесь можно не только подробно прочитать HTML-код выделенного фрагмента, но и узнать подробности его css оформления. Так что Мозилла вам в помощь! Хотя в других браузерах тоже есть аналогичные плагина или расширения. Просто не все об этом знают, а если и знают, то не умеют ими пользоваться. Как пользоваться подобными инструментами – тема для отдельной статьи, так как возможностей очень много.

В практических целях я использовал фишку с копированием файла style.css несколько раз. Один раз, помню, для того, чтобы сделать неподвижной шапку сайта на одном из своих ресурсов. Просто случайно увидел такое интересное решение в интернете – шапка стоит, а тело сайта скроллится – удобно, всё время меню сайта на виду. Тогда я мало был знаком с CSS, и проделал этот, как мне казалось, оригинальный фокус на свой страх и риск – скопировал полностью файл стилей и начал в нём ковыряться с целью выяснить, какие же буковки отвечают за то, чтобы шапка при прокрутке оставалась на месте – в верхней части страницы. Всё оказалось, как всегда – просто и понятно, но опыт я получил колоссальный. Кстати, значение position : absolute; — это то, что мне и было нужно.




  • Неплохие способы, правда некоторые несколько нудноватые — могу тебе подбросить еще один сервис, думаю разобраться не составит труда, там увидишь адреса и тем и прочей дряни, я через него шапки слизывал 🙂
    (site-perf.com) 

  • Неплохо, неплохо. Буржуйский, правда. Я аналоги тоже раньше уже где-то встречал -)

  • Paladin

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

Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail