Посадка верстки на Wordpress - Видеоуроки. Wordpress верстка
Верстка под WordPress. Как сделать верстку WordPress
От автора: если вы сегодня выберите для себя профессию верстальщика и решите работать в веб-студии, тогда будьте готовы к тому, что просто знаний HTML и CSS и непосредственно верстки сайтов на сегодняшний день уже недостаточно. Реалии сегодняшнего дня требуют дополнительных знаний, например верстка под WordPress или другую популярную CMS. В данной статье попробуем узнать, чем отличается верстка сайта под WordPress от просто верстки сайтов и как сделать верстку сайта на WordPress.
Что должен знать современный верстальщик?
Времена, когда верстальщику достаточно было знать только HTML и CSS уже давно прошли. Это раньше для того, чтобы устроиться работать верстальщиком, требовалось лишь умение работать с готовым макетом PSD и сверстать страницу по предоставленному макету. А были даже времена, когда достаточно было лишь знаний HTML… но это, конечно, было уже очень давно, в те времена, когда все верстали таблицами 
Сейчас же, если вы откроете сайты вакансий и наберете соответствующий поисковый запрос, то увидите, что зачастую современная должность верстальщика предполагает наличие дополнительных знаний и обязанностей, которые ранее целиком и полностью возлагались на программиста. Например, это знание JavaScript и jQuery, знание основ PHP или даже MySQL, умение сделать верстку под популярные CMS. Просто знания HTML и CSS сегодня уже мало кому интересны.
Ну а поскольку WordPress является сейчас наиболее популярной CMS, то неудивительно, что многие работодатели требуют навыков работы с WordPress и умения сделать верстку WordPress. Хотя, на мой взгляд, верстка сайта под WordPress — это все же работа программиста, а не верстальщика, но, как говорится, время и реалии рынка диктуют нам свои правила, которым остается лишь следовать.
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress
Узнать подробнееВерстка WordPress
Если вы пока еще не сталкивались с версткой сайта на WordPress, волнуетесь и задаетесь вопросом а получится ли у вас, ведь вы не программист, тогда постараюсь вас успокоить. Верстка на WordPress — не слишком сложна и зачастую потребует от вас знаний лишь основ программирования на PHP.
WordPress имеет замечательную документацию, в том числе и переводную, что значительно упрощает работу с ним и создание сайта на WordPress. Зачастую вам будет достаточно в нужном месте сверстанного вами обычного шаблона HTML вызывать функции WordPress, которые часто можно скопировать прямо из документации. Собственно, в этом и состоит по большому счету все отличие верстки под WordPress от просто верстки шаблона.
Например, перед нами стоит банальная задача — вывести на страницу записи. Согласитесь, совсем несложно загуглить простейший запрос wordpress вывод постов и прочесть в документации о цикле WordPress и использовать пример цикла из той же документации в своей верстке сайта.
Конечно, если вам нужна верстка и создание нестандартного или сложного макета, тогда без уверенных знаний WordPress и программирования все же не обойтись, но все это приходит с практикой. Сделав верстку пары-тройки несложных сайтов WordPress, вы набьете руку и уже сможете ставить для себя и реализовывать проекты посложнее, верстать сложные и нестандартные макеты WordPress.
Ну а если кому-то более удобно воспринимать информацию с экрана, то и здесь есть выбор — множество всевозможных уроков и курсов, как платных, так и бесплатных. Да далеко ходить и не нужно. Если вы ищете уроки верстки под WordPress, тогда вам безусловно пригодится наш курс. Изучив курс, вы узнаете, как сделать верстку WordPress и на практике сверстаете три разных темы для WordPress.
В целом могу сказать, что научиться верстать под WordPress — достаточно просто. Уже через несколько дней после начала изучения вы сможете сверстать свой первый несложный сайт. Ну а через неделю-другую это может быть вполне сайт и на порядок сложнее. Так что все в ваших руках. Ну а я на этом с вами прощаюсь. До новых встреч!
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”
Получить
webformyself.com
Верстка шаблона для Wordpress. Часть 1
С каждым днем все больше и больше пользователей заводят свои собственные блоги, и рано или поздно они задаются вопросом как создать свой шаблон для wordpress? В этой серии уроков я изложу информацию максимально просто и доходчиво, думаю даже новичок сможет создать дизайна сайта wordpress.
Наша задача, сделать шаблон для wordpress на html5 с адаптивной версткой. За основу будущей темы мы возьмем фреймворк Twitter Bootstrap. Данный курс будет своеобразными уроками bootstrap, а так же наглядным примером как строятся шаблоны на bootstrap.
1. Приступим
Создадим отдельную web папку на вашем хостинге (подразумевается что у вас уже есть свой сайт), если вы еще только хотите купить дешевый хостинг, могу посоветовать friendhosting.net, сам размещаю сайт у них, очень доволен качеством, советую. После того как вы создали папку, скачиваем фреймворк нажав на кнопку Download Boostrap. И разархивируем его в ранее созданную папку web.
2. Создаем макет
Для начала создадим файл index.php в котором и начнем строить наш макет сайта. Прописываем стандартную разметку, подключаем кодировку utf-8, и указываем русский язык для html ( Указав lang=”ru” в html теге, виджеты twiitter, facebook и вконтакте будут автоматически отображаться на русском языке ).
Добавляем мета теги в отсек head. Добавим мета тег author который в будущем поможет нам с подтверждением авторских прав на контент. После чего прописываем meta og (Open Graph), которые помогут выводить информацию в социальные сети.
Вот что должно получиться у нас в итоге
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Шаблон для WordPress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Имя автора"> <meta content="Название сайта" /> <meta content="website" /> <meta content="Ссылка на изображение логотипа" /> <link href="./css/bootstrap.css" rel="stylesheet"> <link href="./style.css" rel="stylesheet"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="./js/html5shiv.js"></script> <![endif]--> </head>В архиве заходим в папку dist и копируем оттуда файл html5shiv.js который вставляем в нашу js папку.
- Разметка шаблона. Для разметки я выбрал стандартный каркас для блога.
<body> <div><!-- Фиксированная респонсив навигация --> <header> <div> <div> <div><a href="#">Имя сайта</a> <div> <menu></menu></div> </div> </div> </div> </header> <div> <div> <div>Тест контент</div> <div> <aside>Тест сайдбар</aside></div> </div> </div> <!-- Прижимаем футер к низу --> <div></div> </div> <footer> <div> <div>Подвал</div> </div> </footer> <!-- Подключаем скрипты --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> </body> </html>
Теперь наша разметка готова. Напомню что мы создаем responsive дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.
В следующем уроке как создать шаблон для wordpress мы приступим к оформлению шаблона, созданием стиля записи, оформим сайдабр и подвал. Думаю после того как мы закончим уроки, вы перестанете задавать себе вопрос как создать дизайн сайта? Я буду рад если моя статья поможет кому нибудь создать шаблон сайта для wordpress. Если возникли вопросы, задавайте в комментарии.
Похожие записи
Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мнойwp-query.ru
Как я делал недорого дизайн и вёрстку шаблона для Wordpress
Запилили мне шаблон под wordpress. Да не простой, а с лендингом на главной. Да ещё и адаптивно всё.
Старый лендинг
До этого стоял у меня простой статический лендос, который я спиздил с какого-то сайта c предложением услуг копирайтинга. Конечно, не совсем спиздил, я его переделал. Цвета, блоки, меню, и т. д. Но всё это делалось на коленке. Ибо дизайнер из меня никакой. Так, html код в трех местах поправить могу конечно.
Вот так это выглядело:
Форма заказа это уже новая, через wp, вставленная. Была красивая, но она как-то перестала работать. Причем, обнаружилось, что она не пашет, только через пару месяцев. Это летом было. Я пиздец негодовал тогда — два месяца люди не могли написать мне и заказать услуги потому что я нормально не протестировал форму заказа! Были заказы через скайп, напрямую в почту, в личках на форумах. А вот с лендинга внезапно перестали приходить заявки.
А по первой-то, когда только слабал этот сайтик — заявки поступали регулярно. Потом голову ломал почему вдруг перестали. Оказалось что форма не работала. Ну как, не работала, она работала — со второй попытки уходила заявка. Поэтому я и проебал в тестах этот момент — потому что она кое-как всё таки работала. Но кто будет писать второй раз админу, у которого не пашет форма обратной связи? Вот так всё и продолжалось, пока какой-то добрый человек не сообщил мне в скайпе, что форма нихуя не пашет. Тотчас же убрал форму, и воткнул чат живосайт. Дело потихоньку наладилось.
А в сентябре я решил запустить таки этот бложек. Конечно же на wordpress. А на главную прилепил свой лендинг вот таким способом.
Ну и недавно уже вернул форму заявок через плагин встроил в этот лендос.
Но это всё как-то несерьёзно.
Где взял бабки на новый дизайн?
Наверное это уже всех заебало за последнее время, но история будет опять про кворк. Ибо сервис на самом деле хороший — исполнителей много, связаться с ними быстро, работают тоже быстро.
Пошли на кворке заказы, немного появилось там капусты на счету. Подумалось — а зачем мне это выводить, я же могу засчет своих услуг делать на эти бабки нужные мне работы и задачи у других фрилансеров. Давно уже прикидывал запилить приличный дизайн для лендоса. Стал искать там «шаблоны на wordpress». Но оказывается так никто не делает. Нужно сначала дизайн нарисовать, а потом отдать верстальщику, чтобы он это все в html-коде изобразил.
Недорогой дизайн для сайта или лендинга
Заказывать дизайн на кворке вообще милое дело. Я там раньше уже заказывал логотипы и шапки для сайтов. Под такое дело знаю вот этих людей, которые делают очень хорошо и быстро. И самое главное — недорого, смекаешь?
Но тут надо же нарисовать макет всего сайта. У тех ребят, с которыми я раньше работал такой услуги нет, ибо каждый кворк — это такая лавочка. Там нужны узкие специалисты, которые пилят эту несложную услугу быстро и хорошо. Найти хорошего дизайнера для отрисовки макета сайта тоже труда не составило — попал практически сразу. Ярослав делает недорого, быстро и профессионально.
В общем, я был доволен. Ну я и выбирал тщательно, у дизайнеров обычно есть нормальное портфолио, по которому можно более-менее оценить умельца. На подготовку макета ушла примерно неделя времени, включая постановку и обсуждение-уточнение. Дизайн принял без правок. А, по стоимости на дизайн ушло 4000 руб. Считай что кворк еще прожорлив на комиссию, исполнителю достается сумма-20% — 3200 руб. Как по мне — так это охуительный дизайн за такую стоимость. Наверняка эти ваши студии пилят такие дизайны в 10 раз дороже.
Верстка шаблона под wordpress
Теперь этот дизайн нужно еще сверстать. Да не абы как, а чтобы получился полноценный шаблон под wordpress, который я мог бы поставить на любой wordpress-сайт. Ну а хуле, раз уж делать, так надо качество и чтобы это осталось в виде готового решения на будущее.
Вот тут то меня и ждала засада. Оказывается найти верстальщика довольно сложно. Я искал недели 2, и не только в кворке.
Сколько нынче стоит вёрстка шаблона под WordPress
Несмотря на то, что в кворке таких предложений чуть более чем дохуя — с версткой оказалось не всё так радужно. Во-первых, половина исполнителей тупо не отвечают на твои сообщения. Это ладно, просто выбираем 10-20 предложений и пишем им свой запрос на услугу. Но те кто отвечают более-менее быстро, имеют какой-то уже рейтинг на бирже и портфолио — они ставят какие-то космические цены. Ну, по моим меркам конечно. В общем, сверстать вот этот диз человек 5 мне выставляли ценник от 6000 до 10000 рублей. Ну и сроки неделю.
И ещё:
три:
четыре:
А еще мой клиент из скайпа тоже как раз решил поинтересоваться не нужен ли кому-нибудь сайт, нужны заказы по разработке. Я говорю — дак мне нужен — сверстать надо шаблон под WP. Связались, пообщались. Оказалось ребята типа студия, втюхивают самопис на Laravell. Ребята с украины. Примеры работ так и не дали мне посмотреть, ибо я охуел с их ценника. 500-600 USD зарядили мне цену! Я говорю — тут даже 100 дохуя, вы чё! Нее, тогда фи. И я вот не понимаю — неужели у кодеров настолько дохуя работы, что им простецкую работенку на пару дней за сотку баксов сделать — зашквар?
Вёрстка по адекватным ценам
Нашлись верстальщики и подешевле, но они не могли приступить к работе сразу. Вот здесь человек готов был взяться сверстать мой диз за 3000 руб, что меня вполне устраивало. Но по срокам не срослось с ним, он был занят. Ну и примеров работ его нет, как он делает я тоже не знаю. Вот ещё один верстальщик, который объявил цену в «5 кворков» = 2500 руб. Но он долго отвечал, поэтому заказ ушел туда куда ушёл. Чему я только рад.
Уже стал искать по контактам в скайпе людей. И таки нашёл! Но уже позже. Так что у меня теперь куча контактов верстальщиков под wordpress. Правда работать с ними не довелось, ибо нашел кворк Дмитрия — верстка PSD-макета.
По цене было адекватное предложение в 4000 рублей, и 4 дня работы. На что я немедля согласился. Как оказалось, вёрстка действительно дело непростое. Было пару десятков замечаний и правок, которые в течение двух суток терпеливо допиливались.
В результате получилось то что получилось, и что вы можете видеть теперь на этом сайте. Итого, обошлось всё дизайн+верстка шаблона в сумме в 8000 рублей. Как вам шаб? Да и вообще, это нормальные цены? Может быть я не прав, и такая верстка реально 10к рублей стоит, а я просто жмот?)
vpsadm.ru
верстка под Wordpress, верстка шаблона Wordpress — Netpeak Blog
На днях я перевёл полезную статью и хочу поделиться ею со всеми. Итак, статью написал товарищ Nick La и далее повествование будет от его лица.
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).
Стандартный Frontpage (index.php)
Стандартный Single (single.php)
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip, чтобы увидеть готовый файл Photoshop.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip. Распаковав архив, вы увидите index.html, single.html и page.html. Далее я буду использовать их для превращения в шаблон.
Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.
6. Style.css
Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе. 
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. 
Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h2 и div class=description.
Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;
Ссылка: wp_list_pages
9. Sidebar.php
Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.
- Замените form id=searchform со всем содержимым на .
- Замените теги li категорий на
- Замените теги li архивов на
Ссылка: wp_list_categories и wp_get_archives
10. Footer.php
Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.
Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)
11. Index.php
Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне. 
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found».
13. Копирование цикла
Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.
Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.
Дополнительная литература:
Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.
netpeak.net
Брачные игры с Wordpress / Хабр
Всем здравствуйте. В этой статье пойдет речь о первом неловком опыте верстки под Wordpress. Опишу ситуацию, клиент приобрел тему для WP, дизайнеры немного пофантазировали и вот мы получаем на выходе макет многостраничного сайта (интернет-магазин, плод извращенной фантазии клиента и кропотливой работы дизайнера) который необходимо сверстать, причем так, чтобы при натяжке на движок не захотелось задушить клиента, утопить дизайнера и застрелиться.Но мой первый опыт верстки под WP нельзя назвать приятным. Следующие пункты — это не истина в первой инстанции, это исключительно описание моего небольшого опыта, надеюсь, что эта информация пригодится кому-нибудь, ну и конечно искренне надеюсь на критику.
Сразу следует отметить, что необходимо:
Style Guide. По возможности Вам необходим guide, если проект небольшой, то вы без него можете обойтись, но если у Вас больше одной страницы, то настоятельно рекомендую оговорить это с дизайнером, а лучше, чтобы дизайнеры по умолчанию предоставляли вам его всегда. Это значительно ускорит верстку, если вы заранее сверстаете ряд компонентов и определите ряд базовых стилей.
Логика страниц. Вы должны прекрасно понимать какие страницы будут сделаны исключительно с помощью визуального редактора, а какие будут в большинстве своем использовать шорткоды. Лучше всего, сразу все страницы разбить на эти группы, нарисовать схему.
Header, Footer etc. Отличный способ потратить время – создание своего хэдера и футера! Можно пойти невероятно занимательным путем, имея header, footer, писать свои, а имеющимся в теме, задавать “display:none”. Да, кому-то может показаться это решение вполне приемлемым, а может и нет, я не знаю, я не читаю мысли. Но могу с уверенностью сказать какое решение значительно упрощает жизнь. Этот вариант менее веселый, но нужно найти исходники структуры (header.php, footer.php etc) и внести изменения в них. Это касается и остальных файлов. Если мы пишем на WP, то необходимо использовать все его возможности.
Shortcode. Отличная вещь, хоть иногда и можно заиграться с ними и чуток переборщить. Используйте их только там, где это реально необходимо. Помните, Вы создаете сайт на CMS, клиент может захотеть потом что то поменять. Практически везде, где я читал рекомендуют писать в functions.php. Это вполне себе нормальный, а может и хороший вариант, но я поделюсь еще одним вариантом – это вынесение ваши шорткоды в отдельный файл shortcode.php. В вэбе сейчас царствует компонентный подход, давайте поддержим его правление!
Images. Здесь просто небольшой совет, т.к. клиент не всегда следует логике при наполнении контентом своего сайта, то есть смысл сделать отображение картинок, фотографий максимально универсальным. Используйте overflow для обертки, object-fit для image, также для image вы можете использовать max-width. Помните, клиент может захотеть залить любую картинку.
Шаблонные страницы. Есть страницы, структура которых повторяется или сама страница будет часто повторяться: страница новости, блога и т.д. Вам необходимо предусмотреть стили для максимального количества тегов (p, ul, li, h2 etc). Если вдруг клиент захочет добавить список или заголовок, span или em, а он будет выбиваться из стилистики сайта? Будет как-то неловко.
Таблицы. При верстке заполняемых таблиц рекомендую не использовать классы, т.к. заказчик зачастую забывает проставлять классы таблицам. Да, знаю, это была бы лучшая работа на свете если бы не все эти заказчики.
Параграфы. Если в параграфах используются выделения не только жирным стилем, то как показывает практика, лучше оборачивайте и используйте для этих целей em или в крайнем случае span. Клиенту проще оборачивать отдельные слова в тег em, потому что он на панели редактора.
Стили. По этому поводу мнения у многих расходятся. Одни считают, что если вы работает с темой WP, то лучше писать большинство стилей именно через админку, клиенту проще будет это понять и изменять. Другие считают, что нечего заказчиков допускать к стилям и все стремятся прописать в файле. Здесь я считаю исключительно на ваше усмотрение и желание клиента. Если у него есть базовые знания HTML/CSS он может попросить Вас сделать именно в файле.
В заключении хочу сказать, что верстка под CMS практически ничем не отличатся от просто верстки. В сети куча вопросов «как верстать по CMS?”. Соблюдая эти небольшие правила, Вам будет проще адаптировать верстку под движок.
habr.com
Как сделать адаптивную верстку сайта на Wordpress
Приветствую друзья, на днях я наконец сделал то, что ленился сделать последние 2 года — адаптировал этот сайт для мобильных устройств.Поисковики вот уже как пару лет активно намекают вебмастерам о необходимости перехода на адаптивную верстку. И это понятно — доля мобильного трафика с каждым годом растет как на дрожжах. Более того, теперь адаптивность сайта к мобильным разрешениям экрана и на ранжирование влияет — об этом официально заявили представители Гугла.
Т.е. если сайт не заточен под мобильные устройства, то вы попросту будете терять позиции в поисковой выдаче, по сравнению с теми сайтами, которые заточены.
Как же быть тем, у кого старые сайты с фиксированной статичной версткой?
Увы, но рано или поздно придется менять верстку, если хотите оставаться на плаву. В WordPress проблема, казалось бы, решается обычной сменой шаблона — благо все новые темы для wp сейчас делаются адаптивными.
Но у такого решения есть несколько серьезных недостатков:
- Вы потеряете все изменения, которые вносили в старый шаблон — верстку и дизайн, счетчики и метрики, хуки и всевозможные правки в коде. По сути после смены шаблона будет новый, совсем сырой сайт, со старым текстом и картинками.
- Есть риск потерять позиции в поисковых система. Неоднократно замечено, что у некоторых вебмастеров после смены шаблона серьезно и надолго проседал трафик.
Если это вас не напугало, то вперед) Однако, как по мне, после смены шаблона работы будет куда больше, чем если просто адаптировать старый шаблон под мобильные системы.
Кроме того, существуют спец. плагины, которые должны помочь вебмастеру оптимизировать сайт под мобильные устройства. Но на деле все обстоит не так красиво, как в теории.
Раньше для этих целей мне приходилось использовать специальный вордпрессовский плагин (даже название его писать не буду ибо не советую им пользоваться), но он был очень тяжелый, и к тому же глючил по черному: то работал, то не работал, то вообще не грузил сайт на мобильных устройствах. В итоге вместо удобства для пользователя я часто лишался мобильного трафика. Кроме того, почти все эти плагины платные, а на бесплатных версиях вы получаете урезанный функционал и открытые внешние ссылки на хитроумных разработчиков.
Теперь же блог ruskweb.ru может похвастаться собственной адаптивной версткой, удобной для чтения с мобильников, без всяких плагинов и велосипедов на костылях. Понадобился всего лишь фреймворк Bootstrap 3. А так же пару бессонных ночей, и конечно знание структуры wordpress и CSS.
Скачать Bootstrap 3 можно бесплатно по этому адресу http://getbootstrap.com/getting-started/#download
Проверить насколько удобен ваш сайт для мобильных экранов и планшетов вы можете на сервисе от гугла https://www.google.ru/webmasters/tools/mobile-friendly/
У моего сайта теперь с адаптивностью порядок
Как происходит замена старой верстки сайта на адаптивную
Сразу хочу предупредить — если у вас нет хотя бы среднего уровня знаний CSS и вы плохо ориентируетесь во внутренностях Вордпресса, то не советую лезть в такие дебри. Скорей всего вы только изуродуете верстку своего сайта.
Лучше потратить пару тысяч, заплатив фрилансеру, чем потерять кучу нервов и времени, а в результате положить сайт.
Кстати можете обращаться ко мне — могу помочь сделать ваш сайт адаптивным за скромное вознаграждение =) Писать на почту [email protected] или через форму обратной связи в контактах.
Редактировать нужно не только шаблон главной, но и шаблоны страниц записей single.php, страницы вида page.php, sidebar.php, страницы результатов поиска, страницы с архивами (рубрики, метки), и прочую таксономию. В зависимости от вашей темы оформления вордпресса набор может меняться. Однако во многих файлах блоки будут повторяться, поэтому достаточно просто скопировать их.
Как работать с Bootstrap
В первую очередь нужно понять логику верстки на Bootstrap. Разметка страницы идет по так называемой сеточной модели — это 12 равных столбцов, на которые можно условно поделить рабочую область сайта.
Все содержимое сайта внутри body должно оборачиваться в специальный блок div с классом .container (либо .container-fluid для резиновой верстки). Далее внутри этого контейнера весь контент оборачивается в колонки div с классом .col- , размер которых варьируется для 4-х диапазонов разрешений устройств и обозначаются префиксами .col-lg- .col-md- .col-sm- .col-xs-:
После префикса мы добавляем цифру от 1 до 12, в зависимости от того, сколько «колонок» должен занимать наш элемент по размерам. Меняя префиксы у класса col мы задаем размеры и позиционируем элемент для разных разрешений без какого-либо вмешательства в CSS.
На первый взгляд может показаться слишком сложно, но поверьте, с практикой вы оцените быстроту и легкость такой верстки, в сравнении с ручной правкой стилей. Вот несколько примеров как это выглядит на практике:
Когда вы видите такой код, то класс col-md-4 расшифровывается следующим образом: блок для отображения на средних устройствах с разрешением экрана ≥992px занимающий 4/12 части родительского элемента.
Для примера покажу на своем сайте. Редактирую страницу index.php для главной, добавляю блок сразу после обертки
Таким образом я выделяю под контент 8/12 части рабочей области сайта. Остальные же 4/12 приходятся на сайдбар
В результате я имею следующее — мой контент и сайдбар будут выстраиваться в 2 колонки на разрешениях для больших и средних устройств, а как только размер окна перейдет отметку в 768 пикселей, то сайдбар уплывет вниз под основной контент. Это делается для того, что бы на небольших экранах все смотрелось красиво и гармонично без горизонтальной прокрутки. Иначе бы блок сайдбара сжимался до малюсеньких размеров и стал неудобным для чтения.
При этом между колонками идет стандартный padding, так что блоки не «слипаются». И да, не забудем поставить закрывающие тэги для наших div’ов. Причем хочу сразу заметить, в некоторых шаблонах открытие дива и закрытие может находится в разных php файлах.
При желании можно скрыть ненужные блоки на выбранном вами разрешении, добавив класс .hidden- с префиксом нужного вам разрешения, на котором нужно скрыть блок.
Там на самом деле хватает своих нюансов и моментов. Подробнее вы можете почитать о бутстрапе тут http://bootstrap-3.ru/css.php или же найти в сети обучающие видео уроки и статьи, коих предостаточно. Для изучения, конечно, придется потратить время. И не забудьте предварительно сделать полный бэкап сайта, прежде чем перейти к практическим занятиям 🙂
Важно! Могут возникать конфликты старых CSS-стилей сайта и стилей bootstrap. Что бы исправить их возможны следующие действия:
- Убирать фиксированные размеры (в основном width) у элементов сайта в таблицах стилей
- Некоторые id и class’ы придется заменить бутстраповскими, или удалять мешающие стили вручную
- Менять позиционирование или графические элементы на сайте, которые хорошо смотрелись на статичной верстке, но не подходят для адаптивной
- Если на сайте есть большие таблицы, то придется повозиться с ними
- Проверить каждую страницу сайта, обязательно изменяя размеры окна браузера, что бы найти косяки в верстке и исправить их
Таким образом, благодаря данному инструменты можно заменить устаревшую верстку сайта на адаптивную, не переписывая тысячи строк CSS стилей вручную. После работы не забудьте проверить отображение сайта в сервисе гугла и в валидаторе.
ruskweb.ru
Посадка верстки на Wordpress (А. Исламов)
Посадка верстки на Wordpress
Duration 03:56:44
Открыть все курсы от Артем ИсламовПосадка верстки на Wordpress - Полный список уроков
Развернуть / Свернуть- Урок 1. Первая встреча 00:45:01
- Урок 2. Установка верстки на админку Wordpress 00:36:50
- Урок 3. Изменяемые поля на сайте 00:21:23
- Урок 4. Динамический вывод постов 00:27:27
- Урок 5. Google Карты на сайте + Контактные формы 00:15:54
- Урок 6. Переносим сайт с локального хостинга на настоящий 00:12:44
- Урок 7. Делаем многостраничный сайт (бонус) 00:15:06
- Урок 8. Итоговый стрим 01:02:19
Этого не было в оригинальных играх и фильмах о Codename 47, но нам попал в руки эксклюзивный материал, где наш лысый герой натягивает не только одни струны по шеям охранников, а пошел еще дальше, и начал натягивать верстку на Wordpress. Он натягивает верстку на wordpress... вот так то. Эксклюзив ребята.
Твоя оценка
Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.Комментарии
Похожие курсы
05-02-201816-08-2016 en 28 уроков 
В этом курсе вы узнаете как создать пользовательскую тему WordPress с нуля, что даст вам возможность создавать именно такой сайт, который вам нужно.Многие дизайнеры и разработчики полагаются на дефолтную для WordPress тему. Хотя это ускоряет работу, вы ограничены возможностями и гибкостью выбранной вами темы. В этом курсе WordPress Custom Theme Development вы узнаете, как создать пользовательскую тему WordPress с нуля. Мы вместе пройдем от...
Duration 02:18:19
19-10-2017ru 10 уроков 
Wordpress определенно самая гибкая cms для нетривиальных сайтов, а в руках хорошего специалиста, на нем можно сделать даже больше, чем вы могли себе представить до этого. Курс по WordPress от Дмитрия Лаврика призван сделать с вас именно такого специалиста.
Duration 16:36:52
03-04-2017ru 19 уроков 
В этом видеокурсе вы сверстаете сайт портфолио и наложите его на cms wordpress. Хороший и быстрый туториал, который показывает как это все делается на самом деле, без сухой теории. Финальный результат работы находится в материалах видеокурса.
Duration 04:50:42
29-04-2018ru 5 уроков 
Этот курс предназначен для тех, кто владеет сайтом на cms wordpress а также начинающих веб-разработчиков, которые хотят быстро научится пользоватся этой платформой. Мы детально рассмотрим функционал Wordpress, его установку и настройку, работу с шаблонами и работу с внешними плагинами.
Duration 01:00:24
19-06-201823-11-2017 en 112 уроков udemy Advanced WordPress Topics: Post Types Taxonomies & Metaboxes 
Готовы ли вы применить свои навыки WordPress на совершенно новом уровне? С расширенными темами WordPress: Post Types Taxonomies & Metaboxes вы узнаете все эти технологии со 100% практическим курсом. Мы будем использовать множество различных методов и интегрировать различные технологии, такие как: jQuery, CSS3, WP Ajax, Shortcode API, Custom Metaboxes 2 (CMB2), WP REST API, Filterizr и многое другое! Если у вас есть опыт работы с WordPress, и...
Duration 10:00:01
coursehunters.net
