Part-Start.ru

Январь 11, 2013 | Рубрика: Курсы и тренинги

Инструменты для работы с темой WordPress

Основные программы для вебмастера

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

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

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

Для определения цвета под курсором, имеется хорошая компактная программа ColorSchemer, которую можно скачать с сайта разработчика. Для этого на странице ColorSchmer ColorzpPix нужно выбрать ссылку Download

Бывает, что графический элемент оформления, например кнопку с надписью, нужно отредактировать, изменить надпись. В этом нам поможет графический редактор. Можно использовать Paint из набора стандартных программ Windows. Ее можно найти по адресу: Пуск - Все программы - Стандартные - Paint.

Для редактирования изображения можно использовать on-line графический редактор. Такой сервис можно найти на сайте с on-line графическим редактором Pixlr

Для определения html кода и стилей оформления css каждого элемента на  страницы понадобиться браузер Mazilla Firefox  в Нем есть встроенный инструмент для вебмастера:  Инструменты - Веб-разработка - Инспектор.

И еще ода функция проверки: Инструменты - Информация о странице. Более подробно инструменты, встроенные в браузер, рассмотрены в видео на странице: Дополнительные возможности Firefox

Для редактирования html кода страниц и css стилей, понадобится текстовый редактор Notepad++ Все о Notepad++ лучшем редакторе На этой странице ссылки на видео-уроки, которые учат основам работы с Notepad++

Дополнительно для работы с кодом используйте визуальный HTML редактор. хороший бесплатный вариант NVU. Лучший платный вариант Dreamweaver. Визуальный редактор вам понадобится для генерации участков кода.

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

Например, нужно вставить картинку в виджет. Для этого вставьте картинку в запись. Скопируйте код и вставьте его в виджет.

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

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

Для работы с архивами используйте архиватор 7Zip. Все о 7Zip архиваторе - собраны ссылки на уроки по теме архивации файлов.

На этом этапе работы с файлами темы оформления WordPress, установите Denwer или Денвер - джентльменский набор web-разработчика. Этот набор включает в себя:

  • Apache - веб-сервер.
  • PHP - язык программирования для сознания веб-страниц.
  • MySQL - база данных.

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

Вообще рабочая среда состоит из трех сайтов:

Первый - на локальном компьютере для работы с кодом.

Второй - на сервере, тестовый, для сборки WordPress и для тестирования плагинов, шаблонов, обновлений CMS и вообще всех изменений.

Третий - рабочий, окончательный стабильный вариант. Коммерческий сайт для публикации статей и размещения блоков контекстной рекламы.

Денвер можно и не устанавливать, тогда придется все изменения в коде PHP проверять, загружая измененные файлы на сервер. Сборку WordPress нужно сразу делать на тестовом сайте. На локальном компьютере удобно работать с отдельными блоками проекта, а сборку делать на удаленном сервере. Это важно разделять.

Создайте свою рабочую среду. Все эти программы и сервисы легко доступны и удобны в работе. Подберите для себя удобный набор инструментов.

Поработайте с темой оформления, посмотрите из каких файлов она состоит. Какие настройки доступны в разделе админ панели WordPress: Внешний вид - Темы - Управление темами.

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

Установите и активируйте тему, которую вы в данный момент исследуете, делайте в графическом редакторе, или на листе бумаги, макет страницы сайта. Укажите все основные размеры и цветовую гамму.

Цвет элементов указывайте в формате: #000000, например черный цвет имеет такой код, белый такой #ffffff, а красный, вот такой #ff0000

Начинайте изучать CSS, Каскадные Таблицы Стилей. Хороший бесплатный курс-справочник по стилям есть у Евгения Попова.

Зайдите на станицу с кратким описанием бесплатного видео-курса: Изучите CSS - 45 уроков бесплатного видео.

 

Найдите нужную статью на сайте. Введите слово или фразу в форму поиска!

Напишите комментарий

Ссылки

PART-START

Свежие записи

Refill Services canadian pharmacy of seeing a doctor. A catalog of medical and cosmetic products with descriptions. Thematic categories, search by alphabet and key words. All in online pharmacies [!* viagra super active We constantly offer promotions for our customers. The details of the bonus program, see Special Offer.