Адаптивная верстка сайта на Wordpress. Верстка для wordpress
Заказать верстку сайта для WordPress
Заказать верстку (WordPress) вы можете у специалистов, зарегистрированных на сайте youdo.com. Исполнители Юду разрабатывают шаблоны для сайтов любой направленности: блогов, интернет-магазинов, социальных сетей, каталогов, отраслевых порталов, посадочных страниц. Профессиональный верстальщик, чьи услуги вы закажете на YouDo, учтет все пожелания и сделает уникальный, эффективный веб-ресурс на базе Вордпресс быстро и недорого.
Чтобы узнать, сколько стоит сверстать отдельную web-страницу, блог или сайт для WordPress, оставьте заявку на Юду, и сервис оповестит о ней специалистов. Желающие выполнить проект вскоре откликнутся, вы сможете выбрать исполнителя из их числа.
От чего зависит стоимость работы?
В профилях исполнителей на Юду размещены портфолио, в которых вы можете увидеть примеры готовых проектов и приблизительные цены. Чтобы специалист более точно посчитал стоимость верстки для WordPress, сообщите в заявке на Юду:
- какая верстка требуется (адаптивная, статическая, динамическая)
- формат исходного шаблона
- какие шрифты (редкие или стандартные) будут использоваться
- под какими браузерами должен отображаться сайт
- какие динамические объекты необходимы (слайдеры, автоматическое перелистывание, всплывающие окна и пр.)
Отзывы предыдущих заказчиков на Юду помогут вам убедиться в высоком качестве услуг, предоставляемых нашими специалистами. Вы также можете заказать верстку (WordPress) только для одной страницы сайта, чтобы принять окончательное решение о дальнейшем сотрудничестве с выбранным на Юду исполнителем. Цены на услуги верстальщиков, зарегистрированных на сайте youdo.com, в среднем на 20-30% ниже, чем в специализированных компаниях.
Особенности предоставления услуги
Верстальщики, зарегистрированные на Юду, сами изготавливают шаблоны сайтов для WordPress, а также работают с теми, которые разрабатывались сторонними дизайнерами. Помимо верстки, вы можете заказать у исполнителей Юду интеграцию макета (Вордпресс) в компьютерную программу или информационную систему.
Специалист Юду, которого вы выберете среди откликнувшихся на заказ, внимательно изучит веб-ресурс и:
- очистит сайт от дублирующегося контента, циклических ссылок и пр.
- приведет код к требуемым стандартам
- внедрит семантические теги
- распределит ссылочный вес, чтобы повысить позиции ресурса в поисковиках
- установит и настроит нужные плагины
- правильно расставит акценты на страницах, чтобы отвлечь поисковые системы от содержимого вторичного плана (сайдбара, рекламы и пр.) и переключить их внимание на основной контент
- протестирует редирект
Верстка сайта на WordPress будет выполнена специалистом Юду с учетом ваших пожеланий и самых современных стандартов. В своей работе исполнители Юду используют новейшие инструменты и технологии, поэтому вы получите качественный по всем параметрам шаблон.
Специалисты, зарегистрированные на Юду, всегда готовы помочь с переносом сайта с одного домена на другой, подбором хостинга, оптимизацией и настройкой веб-ресурса. Воспользовавшись сервисом YouDo, вы сможете быстро и по доступной цене заказать верстку (WordPress) и любые другие услуги.
9 уроков по рисованию макета сайта, его верстке и установке на CMS WordPress.
- Тема: Веб-дизайн
- Время ролика: 00:15:41
- Cложность: легкая
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не "налазили" и "прятались" друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.
- Тема: Веб-дизайн
- Время ролика: 00:58:53
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.
- Тема: Веб-дизайн
- Время ролика: 00:29:48
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем простое и удобное меню, поиск по сайту, красивый ротатор картинок на всю ширину, правый блок с категориями стран. Также создадим посты, которые будет удобно читать, и сделаем футер, который не будет отвлекать от контента, но будет давать всю необходимую информацию о сайте.
- Тема: HTML, CSS
- Время ролика: 00:57:52
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы продумаем разметку будущей HTML страницы, выделим основные блоки из которых она будет состоять. Вырежем из макета все необходимые для работы изображения. Сверстаем «шапку» сайта, меню и форму для поиска. Так же установим логотип и слоган сайта.
- Тема: HTML, CSS
- Время ролика: 00:66:41
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS 3. А так же, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.
- Тема: HTML, CSS
- Время ролика: 00:23:01
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS 3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Так же в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.
- Тема: WordPress
- Время ролика: 01:07:30
- Cложность: средняя
- Прикладные программы: WordPress
- Автор: Кудлай Андрей
Этот урок мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы.
После установки CMS WordPress и создания папки для будущей темы, мы рассмотрим наиболее часто используемые функции WP, знание которых является неотъемлемой частью при создании любой темы. При этом уже на данном этапе Вам станут понятны принципы создания и работы с темами WordPress.
После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. Ну и, наконец, мы разделим шаблон на логические части: header (шапка), footer (подвал), sidebar (боковая колонка), которые подключим к главному шаблону темы (index).
- Тема: WordPress
- Время ролика: 01:14:24
- Cложность: средняя
- Прикладные программы: WordPress
Этот урок мы начнем с рассмотрения понятия "безопасного подключения скриптов". Узнаем, почему желательно выбрать именно данный вариант подключения, который рекомендован в документации WordPress. Ну и, конечно же, выберем именно этот способ, безопасно подключив к теме скрипты и стили.
Далее в цикле WordPress мы осуществим вывод статей на главную страницу. Добавим теме поддержку произвольных меню, создадим эти меню и выведем на сайт.
Также добавим теме поддержку виджетов и создадим области для виджетов в сайдбаре и футере. В конце урока создадим два дополнительных шаблона: шаблон отдельной статьи (single) и шаблон страницы (page).
- Тема: WordPress
- Время ролика: 01:18:00
- Cложность: средняя
- Прикладные программы: WordPress
Фактически наша тема уже готова. Остались некоторые мелочи, которые мы и реализуем в последнем уроке. В частности, мы создадим следующие шаблоны:
- шаблон рубрик;
- шаблон для результатов поиска;
- шаблон 404-ой ошибки;
- шаблон комментариев.
Кроме шаблонов мы реализуем две вещи, которые практически всегда реализуются при помощи специальных расширений - плагинов. Мы реализуем постраничную навигацию (пагинацию) для материалов сайта, а также реализуем управление слайдером из админки. При этом для решения последней задачи нам необходимо будет познакомиться с пользовательскими типами записей и создать новый тип постов для сайта.
webformyself.com
Семантическая верстка темы WordPress - видеоурок
Приветствую вас, уважаемый читатель. В данной публикации курса по созданию сайта на WordPress я предлагаю заняться непосредственно версткой уникальной темы с использованием семантических элементов.
Решение верстать макет в соответствии стандартам HTML5 делает возможным применение семантических тегов, выделяющих тот или иной блок сайта.
Познакомимся с яркими представителями семантических HTML-элементов:
<header> — блок, применяемый для выделения шапки сайта.
<article> — блок, применяемый для верстки основного содержимого. В него мы будем заворачивать заголовок и текст поста блога.
<footer> — очевидно, что назначением данного блока является выделение подвала.
Это далеко не все семантические элементы. По мере необходимости мы будем использовать и другие. А сейчас, заинтересовавшимся предлагаю посмотреть видео доклада Вадима Макеева о верстке со смыслом.
С семантическими элементами можно работать точно также как и с обычным блоком <div>, за исключением одного НО: в IE, версии ниже 9, стили к семантическим элементам не применяются.
Для устранения описанного НО я использую JavaScript-файл, скачанный с Яндекса.
Использовав условный комментарий я заставлю старые версии IE применять стили к семантическим элементам: для IE, версии меньше 9, содержимое комментария будет интерпретировано как подключение файла html5.js.
<!--[if lt IE 9]> <script src="/js/html5.js"></script> <![endif]-->В верстке мы стали активно применять внешний (margin) и внутренний (padding) отступы. Для более детального осмысления работы с данными CSS-свойствами не забудьте заглянуть на htmlbook: margin и padding.
В видеоуроке я использовал свойство CSS 3 border-radius для закругления углов футера. Для совместимости со старыми версиями браузеров (Chrome до версии 4.0, Safari до версии 5.0, iOS), на ряду с border-radius применяется нестандартное свойство -webkit-border-radius. Для FireFox версии ниже четвертой — -moz-border-radius. Я очень хочу верить в светлое будущее, соответствующее стандартам, и в видеоуроке сознательно умолчал о данном нестандартном приеме. По крайней мере, все мои браузеры послушно закруглили углы безо всякого нестандартного мракобесия.
Перед верстальщиком частенько встает задача сохранения изображения в наиболее подходящий формат. О выборе форматов изображения я писал здесь.
Видеоурок
Скачать видеоурок (44.5 МБ, *.wmv).
Скачать исходники темы и JavaScript от Яндекса (11.9 кБ, *.zip).
← Предыдущая публикация курса
С уважением, Андрей Морковин.
www.sdelaysite.com
SEO-верстка под Wordress - Видеокурс
Приветствую вас, уважаемый читатель, в новом цикле статей и видеоуроков, посвященных верстке самой лучшей, оптимизированной под поисковики и обладающей с ног сшибательным юзабилити темы для движка WordPress.
На протяжении курса я постараюсь продемонстрировать все этапы, связанные с запуском свежего блога на WordPress:
- Установка движка на локальном компьютере.
- Настройка движка и необходимых плагинов.
- Отрисовка самой лучше темы в редакторе Photoshop.
- Верстка под движок WordPress.
- Выгрузка блога на хостинг.
Сегодняшний видеоурок будем считать вводным и в нем пойдет речь об установке и первом запуске движка на локальном компьютере.
Я продемонстрирую, с некими пояснениями, процесс настройки нового локального хоста для установки и последующего тестирования блога на локальном компьютере, покажу процесс создания базы данных для хранения материалов сайта с соответствующим пользователем и паролем.
Перед просмотром видеоурока рекомендую ознакомиться со следующими статьями:
- Установка и настройка Apache + PHP + MySQL на локальном компьютере. В данной статье я подробнейшим образом описал процесс установки локальной среды разработки. Локальная среда разработки позволит запустить PHP-скрипты и осуществить обработку материалов в базе данных. Таким образом, все наладочные работы вы сможете проводить на своем локальном компьютере, а уж после того как все будет работать нормально, выгрузить блог на хостинг.
- В видеуроке для настройки доступа к базе данных движком WordPress я использую программу HeidiSQL, которой посвящена отдельная статья.
Видеоурок. Часть 1-1
Часть 1-2
С уважением, Андрей Морковин.
www.sdelaysite.com
Адаптивная верстка сайта на Wordpress
На сегодня адаптивную верстку имеет доля 10-20% всех сайтов. 21 апреля 2015 года Google «обрадовал» веб-мастеров, занимающихся сайтостроением, и владельцев ресурсов сообщениями на почту, где сервис предупреждал о неудобстве использования для мобильных устройств. И дальше следовало, что поисковая система отказывается от индексирования таких страниц. Для многих это стало частичной потерей потока посетителей из мобильного интернета.
Сегодня сайты, не поддерживающие мобильную версию, хуже ранжируются. Поэтому, чтобы сайт находился выше в позициях поисковой выдачи среди страниц конкурентной тематики, рекомендуется сделать адаптацию под мобильные системы.
Что такое адаптивная верстка для мобильной версии?
Адаптивная верстка представляет из себя обычный веб-дизайн, умеющий подстраиваться под любое разрешение экрана, в т.ч. для mobile, чтобы пользователю было удобно просматривать страницы ресурса. Как вариант решения проблемы - создать мобильную версию сайта.
Работа над созданием адаптивного веб-дизайна начинается с проверки на сервисах Google. Обычно сервис выдает перечень доработок, которые необходимо выполнить для перехода на мобильную версию. При адаптивной верстке на WordPress изменения вносятся в css-файлы, а внутри header.php в части head прописывается мета-тег с атрибутом viewport, позволяющий подстроить содержимое интерфейса под размер экрана.
Удобство этого метода – не нужно создавать новый сайт, следить за наполнением, заново проводить seo-оптимизацию. Однако, возникают проблемы с отображением в разных браузерах, элементы в некоторых из них начинают «ехать». Требуется тонкая настройка css стилей.
Плагины на WordPress для адаптации сайта
Специально для WordPress создатели разработали бесплатные плагины, помогающие перейти, например, MobilePress, Duda Mobile Website Builder. Их можно скачать с официального сайта.
Плагины для адаптации в состоянии применить даже непрофессиональный веб-мастер, не обладающий широкими познаниями HTML и CSS. Плагины позволяют заточить уже имеющийся шаблон. Однако иногда возникают проблемы с кроссбраузерностью, а при кэшировании выходят непредвиденные ошибки. Если в дальнейшем не планируется посещаемость ресурса свыше 2000 человек, то плагины хорошая альтернатива.
Адаптивные шаблоны WordPress
Найти качественные адаптивные шаблоны для веб-мастера не займет много времени, однако потребует знания основ HTML и CSS. Шаблон для работы легко скачивается и переделывается на свое усмотрение.
Достоинства:
- Легко установить и настроить. При желании можно найти даже премиум-шаблоны бесплатно;
- Проверенные шаблоны поддерживают кроссбраузерность;
- Огромное количество в интернете;
- Не потребуется много времени, чтобы перейти на адаптивный дизайн.
Недостатки:
- Придется полностью менять старый на новый;
- Внутри встречаются закодированные ссылки автора или на другие сайты.
Перечисленные способы хорошо подходят для адаптации под мобильную версию. Однако для переноса более крупных сайтов будет полезно изучить работу с каскадными стилями.
Также по теме:
xn----8sbmboedxefg1bbo2l.xn--p1ai
Верстка для Wordpress - обтекание картинки
Приветствую вас, уважаемый читатель!
По многочисленным просьбам я решил продолжить тему верстки под wordpress. Сегодня я расскажу, как изменить положение иллюстрирующей картинки на главной странице блога.
Заодно, в процессе верстки, научимся работать с редко используемым CSS-псевдоклассом :first-child и поупражняемся в искусстве владения FireBug-ом.
Постановка задачи:
На страницах блога с хронологическим перечнем постов (главная страница и т.д.) иллюстрирующее изображение должно располагаться слева от обтекающего текста. На странице полного текста статьи изображение должно позиционироваться по умолчанию.
Видеоурок:
Скачать видеоурок (29 Мбайт, *.wmv).
Что нам понадобится для выполнения поставленной задачи:
- Знания о назначении файлов темы. Об этом я подробно рассказывал в видеоуроке 5-2 курса верстки для WordPress.
- Для демонстрации верстки я использую свежеустановленный движок WordPress 3.2.1 (движок я качал здесь) с темой по умолчанию «twentyeleven».
В бой!
После анализа HTML-кода главной страницы FireBug-ом (видеоурок по работе с FireBug) или аналогичным расширением для Chrome становится понятным, что текст каждого поста заключен в блок <div class=”entry-content”>.
Поскольку в данный блок попадает изображение, положение которого мы хотим изменить, предлагаю добавить блоку дополнительный класс. Именно этим дополнительным классом мы будем пользоваться для манипуляций с изображением.
Уважаемый читатель, ознакомившийся с уроками 5-1 и 5-2 верстки для WordPress, должен четко понимать, что за отображение главной страницы отвечает файл index.php в папке с темой twentyeleven. Покопавшись в файле index.php не сложно догадаться, что блок <div class=”entry-content”>, для случая удачного обнаружения записей блога, вынесен в файл content.php (этот файл также расположен в папке с нашей темой).
Открываем content.php на редактирование, находим блок <div class=”entry-content”> и добавляем ему дополнительный класс «imgleft»: <div>.
Остается настроить положение изображений в элементе с классом «imgleft» посредством CSS-свойств.
Открываем на редактирование файл style.css внутри папки с темой twentyeleven и в конце дописываем необходимые CSS-инструкции:
Листинг 1. Настройка отображения картинки
.imgleft img { float: left; width: 150px; }Таким образом, все изображения, попавшие в блок с классом imgleft, будут обтекаться справа и иметь ширину 150 пикселов (высота будет выбрана автоматически с сохранением пропорций).
В результате имеем неизвестно откуда взявшиеся отступы, обозначенные на скриншоте желтыми прямоугольниками.
Поискав причину возникновения желтых прямоугольников FireBug-ом можно умозаключить, что это следствие CSS-стилей темы twentyeleven.
Причины возникновения отступа, обозначенного верхним прямоугольником
В теме twentyeleven отступы между абзацами формируются добавлением свойства margin-bottom: 1.625em к каждому из абзацев поста. Конечно, можно в свойствах класса imgleft обнулить отступы между абзацами и тем самым ликвидировать верхний прямоугольник на скриншоте; но представьте, что в коротком описании к посту встретятся несколько абзацев — наше решение приведет к тому, что все абзацы слипнуться, это совсем не хорошо.
Мы пойдем другим путем и используем псевдокласс :first-child.
Листинг 2. Использование псевдокласса :first-child
.imgleft p:first-child { margin-bottom: 0; }Вышеописанный код сообщает браузеру следующие инструкции: обнулить нижний внешний отступ у первого абзаца в элементе с классом imgleft.
Псевдоклассы в CSS довольно разнообразны. Предлагаю желающим почитать соответствующий раздел на сайте htmlbook.ru.
Проблема с верхним прямоугольником решена.
Причина появления нижнего отступа — заданные по умолчанию внутренний и внешний отступы для изображений (padding и margin). С этим мы легко справимся немного изменив листинг 1:
Листинг 3. Модификация листинга 1 с целью решения проблемы нижнего отступа
.imgleft img { float: left; width: 150px; padding: 0; margin: 0 10px 0 0; }В результате имеем желаемую интерпретацию в браузере:
Есть одна «пичалька», псевдокласс :first-child не работает в IE6. Но скорее это не проблема верстальщика, а проблема пользователя, применяющего устаревший браузер.
В случае малого количества текста в описании поста вверх запросто может подскочить ссылка «читать далее», а в худшем случае за ней может подпрыгнуть и что-нибудь еще.
Для того чтобы обеспечить постоянное положение ссылки под картинкой можно воспользоваться простеньким CSS-кодом:
Листинг 4. Фиксация положения ссылки «читать далее» под картинкой
.more-link { display: block; clear: both; }Ссылка «читать далее» имеет класс more-link. Благодаря свойствам листинга 4 данный элемент становится блочным и отменяется его обтекаемость со всех сторон.
С уважением, Андрей Морковин.
www.sdelaysite.com
