FireBug — черновик для работы над сайтом

FireBug - черновик для работы над сайтом

FireBug - черновик для работы над сайтом

Здравствуйте уважаемые читатели блога Сам себе Seoшник. Сегодня тема моей новой статьи будет охватывать очень широкий спектр работы над сайтом, а именно работа с кодом. В одной из статей блога уже было описано как расширить границы шаблона, но сегодня я хочу полностью обобщить тему работы с кодом с помощью одной очень полезной утилиты для браузера Mozila FireFox.

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

Как работать с программой FireBug?

Для того, чтобы начать работу с кодом вам надо установить программу FireBug. Поэтому заходим на официальный сайт программы (FireBug.ru) и нажимаем кнопочку установить, которая находится на главной странице этого сайта

FireBug - черновик для работы над сайтом

Примечательно, что самым корректным образом эта утилита будет работать только в браузере Mozila Firefox.

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

FireBug - черновик для работы над сайтом

Чтобы активировать FireBug нужно нажать на этого жука либо с помощью клавиши F12, после чего у вас должно выйти окно этой программы.

FireBug - черновик для работы над сайтом

Если у вас все получилось и окно такого типа появилось после запуска программы, то я вас поздравляю.

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

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

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

FireBug - черновик для работы над сайтом

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

FireBug - черновик для работы над сайтом

Теперь вам остается лишь убрать не нужные знаки в этом отрывке текста. Для этого кликаем на данный текст и убираем все, что нам не нравится. После повторного клика мышью настройки автоматически сохранятся в программе и будут показаны на вашем сайте. Но запомните - эти настройки видны лишь вам, для того, чтобы исправить или убрать ненужные знаки в коде надо зайти в корневую директорию и искать этот отрезок кода там. Чтобы это не заняло у вас все время FireBug позаботился о вас и уже полностью прописал весь путь к этому анонсу.

FireBug - черновик для работы над сайтом

Вот в таком принципе работает программа FireBug.

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

Оформите подписку на обновление блога!

Введите ваш email адрес:

автор: Ловцова Елена

15 комментариев к записи “FireBug — черновик для работы над сайтом”

  • Станислав:

    Отличная статья, надеюсь мне поможет 🙂

    Елена, подскажите, пожалуйста, где именно лежит информация о статьях. «Надо зайти в корневую директорию и искать этот отрезок кода там». Eсли честно, мне та строчка (<div class="post-73….) мало о чем говорит. Зашел в корневую папку сайта, в файлах ничего подобного (post-73), скорее всего нужно искать или wp-content или wp-includes или wp-admin, но там куча файлов, в каждом искать, так и дня три пройти может 🙂

    • ElenAleksy:

      Скажите Стас, для чего вам нужна информация о статьях? Вам что то нужно вставить, какой то код или просто для информации?

      • Станислав:

        Елена, я бы хотел, чтобы предложение не обрывалось значком […] (см. скрины выше). Т.е. я хотел бы, чтобы тег more работал не только в статьях на главной странице, но и в рубриках. Сейчас же, этот тег на главной работает нормально, а в рубриках обзац обрывается значком […]. Таким образом, мало того, что абзац не закончен, так еще и предложение.

        Поэтому я хотел бы, чтобы этой «автообрезки» абзаца не происходило, а работал нормальный тег more. Если тег more в рубриках заставить работать нельзя, значит мне нужно ручками изменить все предописания к статьям. А для этого мне как раз и нужно знать где хранится информация о статьях, а точнее где найти строчку «<div class="post-73….", чтобы поменять все в шаблоне как и писали Вы в этой статье 🙂

        • ElenAleksy:

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

          < ?php the_content('Читать полностью...'); ?>

          в следующие файлы:
          index.php, single.php, search.php, page.php

          • Станислав:

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

            Что-то как-то неумно его сверстали… или не заметили *WASSUP*

          • ElenAleksy:

            Прописать нужно выбрав специальное место в коде, а «читать полностью» можно легко заменить на любое слово или словосочетание. У многих шаблонов такая недоработка, может просто не стоит на этом зацикливаться?

          • Станислав:

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

  • Станислав:

    Кстати, посмотреть эту же информацию без Firebug можно и в GoogleChrome. Правда мне от этого не легче 😉

  • Алексей:

    Здравствуйте! Большое спасибо за статью. Firebug — это действительно очень удобно. Но как мне в joomla найти в таком же виде тот html-файл, который мне надо исправить? нашел один источник, но там так непонятно написано. Может быть Вы поможе? На примере, доступно для чайника. Это было бы многим полезно. Заранее благодарен.

  • ElenAleksy:

    Привет Алексей!
    Что конкретно вы ищите, для каких целей, в общем опишите в подробностях!

  • Светлана:

    День добрый или вечер 🙂

    Скачала себе FireBug, но так и не поняла, как нужно сделать тему шире, Елена. Wrapper не могу найти и с этой программой. Если тему нужно расширять, то все блоки в ней, я правильно поняла?

    Заранее спасибо за ответ.

    • ElenAleksy:

      Здравствуйте Светлана!
      Дело в том, что «Wrapper» есть не во всех темах, но есть замена в большинстве случаев, это значение нужно искать методом «тыка» так сказать, а для этого и нужна прога FireBug с помощью которой можно изменять размеры шаблона не навредив сайту. Вы правильно поняли то, что если менять ширину шаблона, то понадобится и изменить все блоки.

  • Светлана:

    Спасибо за ответ.

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

    • ElenAleksy:

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

  • den:

    В Опере есть встроенный инструмент для этого, называется Opera dragonfly.

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

CAPTCHA изображение
*

Часы
Наши спонсоры
Объявления
записки на работе
Часы
Наши спонсоры
Объявления
Интересно