Урок WordPress 8: используем Firebug в работе над блогом

Привет, читатели SEObiz.com.ua. В некоторых статьях, я часто упоминаю о различных тегах, о том, как и где править код, но как-то упустила из виду рассказать в одном из уроков по WordPress для начинающих о таком замечательном дополнении к Мозилле, как Firebug.

Если ты seo оптимизатор, используешь FireFox, и создаешь сайты, то тебе просто необходимо скачать дополнение Firebug, о котором я буду рассказывать в данном уроке.

Почему? Все просто: при работе над блогом на WordPress очень часто возникает необходимость вносить различные правки в HTML код, а Firebaп для Mozzila FireFox позволит это тебе делать играючи. Простой пример, чтобы найти место, которое нужно исправить на странице, мы часто просто открываем исходный код и начинаем его искать.

Используя в работе дополнение к браузеру, тебе больше не придется попросту тратить время и напрягать глаза в поисках места, которое нужно исправить в коде блога на WordPress. В статье об анализе сайта онлайн, я говорила о том, как можно проанализировать содержимое отдельной страницы для ее дальнейшего эффективного продвижения в поисковых системах. Тогда и возник вопрос в комментариях (кстати, комментарии очень полезно читать — именно в них часто скрыта невидимая глазу истина), как исправить ошибку, которая возникает у многих — Title страницы не заключен в тег h1, на бесплатных шаблонах для WordPress он часто заключен в тег h2, что не очень хорошо.

Но вернемся к практике и к установленному дополнению к FireFox — надеюсь, что вы скачали Firebug.

1. После установки дополнения, в панели появится симпатичный жучок — иконка Firebug:

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

Дополнение Firebug для FireFox

После того, как нажмешь на иконке расширения для FireFox, внизу появляется окно плагина. В этом окне нужно щелкнуть на рамочке (как показано на скриншоте), а затем выделить интересующих тебя фрагмент на странице.

В моем случае — это какие теги используются для Title страницы — как можно убедиться, Title заключен не в тег h1. Иду исправлять…

3. Открываю файл темы single.php и ищу функцию, которая отвечает за вывод заголовка:

Нашла: <h2> <a href=» <?php the_permalink(); ?>» title=» <?php the_title(); ?> «> <?php the_title(); ?> </a> </h2>

Все, что нужно, чтобы наш блог на WordPress отвечал в плане заголовков требованиям SEO — заменить тег h2 на h1.

Нашли мы это за секунду благодаря плагину для FireFox — Firebug.

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

Опять выделяем нужный нам кусок текста (на скриншоте я выделила заголовок из своего женского SEO блога) и справа внизу наводим на цифры курсор — видим, какой цвет используется. Этот пример пригодится тем, кто хочет заменить цвет чего-либо у себя на сайте. После того, как мы знаем в какой строке задано вывод цвета ссылки, к примеру, остается лишь найти эту строку в файле стилей style.css и заменить на тот цвет, который подойдет именно тебе.

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

И главное: не забывай всегда делать бэкап любого файла, в который собираешься вносить изменения!

К записи "Урок WordPress 8: используем Firebug в работе над блогом" 10 комментариев
  1. Интересненько. «3. Открываю файл темы single.php и ищу функцию, которая отвечает за вывод заголовка:»
    А как узнать, в каком именно файле что находится? В Хроме есть подобное, но там только файлик style.css показывает. А вот как править сами файлы темы и знать где что находится, это было бы интересно.

  2. Да я тут мучаюсь с темой блога, не на wordpress, а maxsite. Хочу комменты красивые сделать. Хотя в wordpress тоже не просто вычислить подключаемые файлы (

    • Да, кстати, резонный вопрос задан был. На WP то это относительно легко такие манипуляции творятся, а чтобы сделать подобное с другими CMS тут еще помучатся нужно. Например, шаблон joomla, там и черт голову сломит или шаблон drupal, который чуточку легче, чем joomla, но в котором могут дублироваться участки кода и вводить в заблуждение. Правильнее было бы в руководстве еще сослать новичков на прогу Notepad++ или ей подобные аналоги, там удобный поиск по файлам в пределах указанной директории, заодно и подсветка синтаксиса PHP и многих других языков. C помощью Firebug вычислил HTML-код, который выводит то, что мы хотим заменить, а с Notepad++ его нашел и откорректировал по своему. А вот насчет цвета не соглашусь. Иногда шаблоны того же WP могут использовать таблицы стилей не только свои собственные, но и импортировать их из других источников, например системные стили или же даже с внешних ресурсов и тогда еще нужно немного потанцевать перед тем как поменять казалось бы незначительную деталь. Так что, с закрытыми глазами программный код редактировать противопоказано.

  3. Спасибо за статью Елена. Firebug установил пару недель назад, но пока не очень понятно как им пользоваться.

  4. А в Хроме он настолько прост, что, похоже, даже бесполезен 🙂
    В Мозиллу неохота было идти, пришлось вручную находить title и справлять.

  5. Проверил свой сайт и обнаружил, что Title страницы не заключен вообще ни в какой из тегов h. Теперь не знаю, что дальше делать, т.к. у меняв в тег h1 заключено название сайта: «Бизнес для женщин». Сделал это по совету автора блога Ктонановенького. Теперь не понятно в какие теги заключать Title страниц.

    • Elena:

      Станислав, все правильно. Но есть плагин All in One Seo — там можно задать, каким должен быть порядок отображения формата страницы с постом. Должно быть %post_title% | %blog_title%
      Заключить название надо в h1 — так как обычно в названии используют ключевые слова, а в названии блога они не обязательно присутствуют.

  6. Спасибо. У меня так и отображается формат страницы.

  7. Андрей:

    А как сохранять в Firebug.

Оставить свой комментарий

Поиск по сайту
Читатели

Спонсор блога:
Отзывы о Steadyhoster.com
Самые обсуждаемые статьи
  • Плагин Заплати лайком. Как продают то, что можно взять бесплатно (39)
  • Урок WordPress 6: проверяем шаблон WordPress на вредоносность (29)
  • Контекстная реклама: РСЯ или Google AdSense (25)
  • ЧПУ и все о них (24)
  • Как увеличить доход с Google AdSense (23)
  • Основы продвижения сайта (SEO) в поисковых системах (21)
  • Урок WordPress 19: как убрать дату из постов в блоге? (21)
  • © 2017    SEObiz.com.ua    //    Войти   //    Вверх