Меню

Как внести изменения во внешний вид блога с помощью исходного кода

И снова, здравствуйте!

Я почти вернулся… Не я не ленюсь, просто занят другим нужным делом и скоро его завершу. Тьфу-тьфу-тьфу, чтобы не сглазить.

Это будет разминочной статьей, а то перерыв был долгий, надо постепенно включаться)))

Как изменить блог

Итак… Сегодняшняя статья будет из рубрики “Блог без плагинов”, но не совсем про плагины и их замену на код.

Пролог

Как-то я писал гостевую статью для Ларисы Web-Кошки, на тему… ммм…. Если кратко, то статья была на тему: “Какими инструментами можно анализировать собственный блог (ну или не собственный)”.

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

Но статья была, вроде как не по теме моего блога и я предложил ее Ларисе в качестве гостевой. Вот так и родилась статья “Тайна переписки, или Полезные инструменты для вебмастера + практический кейс”. Так что, можете считать данную статью продолжением моей гостевой статьи.

к меню

Часть первая. Начало

В общем, эту статью можно было назвать “Как применять инструменты вебмастера”, причем на примере.

Подопытным блогом у нас будет… та-а-а-дам – блог Юлии Королевой Inet-boom.ru. А все потому, что Юля не знала, как бы ей виджет анонсов статей оформить по красивше, ну я и влез, как обычно, с советом и песня понеслась…

Как изменить блог

Я когда читал позже, то понял, что зазнался. Да-да, зазнался, так как вспомнил себя год назад… Видите ли, “там ничего сложного”… Во даю! Красавчег, просто))) Сейчас для меня может и не сложно, а для тех кто не разбирается во внутренностях блогов? Вот то-то!

Потому и решил расписать подробно весь процесс, может и пригодиться кому-нибудь, к тому же Юля дала разрешение на экзекуцию над ее блогом.

к меню

Часть вторая. Инструменты и знания

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

к меню

Инструменты

Сам я использую следующие инструменты:

  • Браузер Хром и его встроенные функции. Сей браузер недавно обновился и просмотрщик исходного кода стал не хуже, чем Firebug. Ну может быть, не совсем достаточный функционал, но для наших целей “за глаза”
  • Любой текстовый редактор, вплоть до Блокнота. Хотя лучше пользоваться чем-нибудь специальным. Я использую тандем из Notepad++ и Adobe Dreamweaver. В Adobe Dreamweaver хорошая визуализация всех изменений, а в Notepad++ замечательная подсветка кода. хотя можно обойтись и без дополнительных программ.

Набор инструментов может быть любым, тут уж кому как удобнее.

Из инструментов все, больше ничего не потребуется.

к меню

Знания

Хотя бы на базовом уровне необходимо понимать:

  • язык гипертекстовой разметки HTML
  • каскадные таблицы стилей CSS
  • структуру шаблонов WordPress

Почему именно в таком порядке? Давайте разберемся.

  • Мы будем просматривать исходный код, который весь написан на html и требуется отличать тег <p> от тег <a>. К тому же не просто отличать, а понимать как работаю эти теги и как на них влиять. Это раз.
  • Итоговый результат у нас будет получен не виде картинок, а в виде стилевых каскадных таблиц, потому надо знать, что такое селектор, идентификатор, как с помощью стилей изменить размер шрифта, цвет шрифта, добавить границы и отступы. Это два.
  • И наконец, экспериментируем мы с блогом на WordPress, а потому надо знать куда вносить изменения в шаблоне, чтобы все работало как надо. И это три.

Не убедил, ну что ж, нет так нет.

Но все же я вам советую на данные темы посмотреть бесплатные курсы Евгения Попова по HTML, CSS.

Еще не плохо бы, держать под рукой справочные материалы в виде сайта htmlbook.ru, статью у Ларисы Веб-Кошки про CSS и просто Гугл с Яндексом.

к меню

Часть третья. Решаем задачу

Ну что ж, инструментами вооружились? Тогда давайте сформулируем задачу.

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

Если кратко изложить, то получится:

Требуется применить к тексту стили, аналогичные облаку тегов.

Как изменить блог

к меню

Поиск нужных стилей

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

Наводим мышку на любой элемент облака тегов и нажимаем правую кнопку мыши. Вызываем меню “Просмотр кода элементов”

Как изменить блог

Увидим вот такое окно, в котором и покажут нам нужные стили, классы и селекторы

Как изменить блог

Что мы видим в итоге?

В левом окне нам показывают html-код, в правом – стили css. Что нам и требуется. Пол задачи решено! Стили есть, теперь надо правильно их применить.

к меню

Верстаем html

На данном этапе нам и потребуется Notepad++ или Adobe Dreamweaver. Показывать буду в Dreamweaver, в нем визуализация проще. Но для начала давайте просто порассуждаем…

У нас есть три строки текста. Так? Так. Причем информационными у нас являются только первых две строки. Последняя – призыв к действию, в данном случае к подписке на обновления блога.

Как изменить блог

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

К информационным строкам мы применим маркированные списки, а к призыву – тег абзаца.

Почему так? Ну потому, что анонсов может быть несколько, а  маркированные списки позволяют элементарно добавлять новые элементы.

Итак, в Dreamweaver создаем новый html-файл и внутри тега body пишем следующее:

Как изменить блог

Да-да, к основному тегу маркированного списка ul мы применили класс anonsi  И не забываем закрывать все теги, так как они все парные.

Что забыли? Ага, призыв к действию забыли. Ну здесь все просто, на следующей строке после закрывающего тега ul пишем Нужный призы и заключаем его в тег абзаца.

Как изменить блог

Dreamweaver в правом окне показывает что получилось. Получилось то, что и задумывалось, теперь осталось только применить стили.

к меню

Применяем стили

Стили нам уже известны и нами найдены, так что осталось их только правильно скопировать.

Копировать можно прямо из окна просмотра элементов кода, а можно несколько иначе. Заходим в панель администрирования сайта и открываем редактор системных файлов (Админка – Внешний вид – Редактор)

Нам нужен файл style.css, в котором поиском (Ctrl+F) ищем нужный нам класс, в нашем случае – это класс .tagcloud

Как изменить блог

 А дальше выделяем нужные стили и идем в наш файл, открытый в Dreamweaver и внутри тега head создаем тег style, в который и вставляем наши стили. Должно получиться вот так

Как изменить блог

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

Итак, стили применены просто ко всему маркированному списку:

Как изменить блог

А теперь, только к элементам списка

Как изменить блог

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

font-size: 14px!important;  — размер шрифта
padding: 2px 10px; – внутренние отступы
margin-bottom: 10px; – внешний отступ снизу
margin-right: 7px; – внешний отступ справа
float: left; – обтекание текста, вот из-за чего элементы у нас криво смотрятся
background: #E9E9E9; – цвет фона элементов
color: #615F5F; – цвет шрифта
border-right: 1px solid #CACACA!important; – граница справа
border-bottom: 1px solid #CACACA!important; – граница снизу
border-top: 1px solid #CACACA!important; – граница сверху
border-left: 3px solid #00A8FF; – граница слева

Итак, давайте сразу уберем свойство float и посмотрим что получиться

Как изменить блог

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

Как изменить блог

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

к меню

Вешаем виджет

Виджет все умеют создавать? Вот и хорошо. Итак, создаем виджет и в нужное поле вставляем наш код. В виджет нужно вставлять только то, что находиться внутри тега style и тега ul, все остальное нам не нужно

Как изменить блог

Получаем вот такой виджет

Как изменить блог

И вот такой результат

Как изменить блог

к меню

Эпилог

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

Самое главное, что в итоге мы получили то, что требуется, да еще с возможностью вносить изменения прямо из админки…

Всем удачи! Жду всех в комментариях…

Всегда ваш, Абрамович Артем.

P.S. Не забудьте подписаться на обновления, скоро будет серьезная статья и серьезное для меня событие.

P.P.S. Кстати,вы в курсе, что взломали аккаунт Евгения Попова на Smartresponder. Вот так вот, более 300 тысяч (!) подписчиков теперь получают какую-то фигню. Понятно, что все разрулится, но не приятно что такой серьезный сервис не может обеспечить безопасность своих клиентов.

И я вот теперь думаю, где собирать базу подписчиков. Подскажите какие есть альтернативы Smartresponder?

Поддержи проект лайком
39 комментариев
  1. Таисия Егорова / Ответить
    • Абрамович Артем / Ответить
  2. Юлия Qween / Ответить
    • Абрамович Артем / Ответить
      • Юлия Qween / Ответить
        • Абрамович Артем / Ответить
          • Юлия Qween / Ответить
            • Абрамович Артем /
            • Юлия Qween /
            • Alexander Meier /
            • Абрамович Артем /
            • Alexander Meier /
            • Абрамович Артем /
            • Alexander Meier /
  3. Alexander Meier / Ответить
    • Абрамович Артем / Ответить
      • Alexander Meier / Ответить
        • Абрамович Артем / Ответить
          • Alexander Meier / Ответить
            • Абрамович Артем /
            • Alexander Meier /
            • Абрамович Артем /
  4. Николай Танкушин / Ответить
    • Николай Танкушин / Ответить
      • Абрамович Артем / Ответить
  5. Leonard / Ответить
    • Абрамович Артем / Ответить
  6. Валентина Кирс / Ответить
    • Абрамович Артем / Ответить
  7. Валентина Кирс / Ответить
    • Абрамович Артем / Ответить
    • Alexander Meier / Ответить
      • Валентина Кирс / Ответить
  8. Вадим / Ответить
    • Абрамович Артем / Ответить
  9. Наталья / Ответить
    • Абрамович Артем / Ответить
  10. Наталья / Ответить
    • Абрамович Артем / Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подписка на новости

Спасибо за подписку! Теперь вам надо подтвердить ее.