Как натянуть свою верстку на WordPress?
Приветствую
Решил научиться работать с WordPress, так как часто просят клиенты натягивать верстку на какую-нибудь цмс. Установил, немного погуглил и сразу же возникло множество вопросов, прошу ответить на самые главные из них:
1) Какие секции/блоки/записи сайта нужно «связывать» с цмской? В смысле, вот есть простенький сайт — xxx.ru.
Я уже зарегистрировал 2 виджета для верхнего и нижнего меню, можно добавлять пункты с панели. Но вот там есть блоки «Что это такое?» «Схема работы» и т.п. Это нужно интегрировать в Вордпресс? Это не заказ, взял старую свою верстку просто, интересует что обычно требуют заказчики?
2) Второй вопрос вытекает из предыдущего, каким образом, блоки текста, которые не являются ни статьями, ни пунктами меню, ни какими-либо виджетами, переносить в панель управления, чтобы клиент мог редактировать их по своему усмотрению?
Натяжка уникальной верстки на билдер WP
Вообщем есть уникальный дизайн. Необходимо привязать к WP с возможностью редактирования контента из админки. Как это делать через кастомные записи и через кастомизатор темы я вкурсе, но как я заметил в готовых темах с Themeforest везде прям используются билдеры Elementor или WP Backery.
Отсюда вопрос. Как вы считаете можно ли накидать контент на билдере и потом с помошью определения классов для элементов стилизовать так как нужно в итоге.
Заказчик хочет менять контент в визуальном редакторе. Или предложите пожалуйста ваши методики реализации подобных задач. Заранее Спасибо Большое!
Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
Всем привет! Сегодня рассмотрим такую сложную и интересную тему, как создание WordPress шаблонов (тем) и грамотную посадку готовой HTML верстки на WordPress. В качестве Theming-фреймворка будем использоваьть Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS. Ключевые моменты — генерация стартовой Underscores темы, создание кастомных шорткодов для билдера Unyson, работа с адаптивной сеткой, создание Theme Options (опции шаблона) различных типов, создание метабоксов в статьях, на страницах и в категориях, раширение функционала фреймворка, автоматическое подключение плагинов в WordPress посредством TGM.
Ресурсы урока:
Последняя версия Unyson: Скачать
Скачать последнюю версию Unyson c GitHub
- Документация Unyson: Ознакомиться
- Генератор Стартового WordPress шаблона: underscores.me
- Скачать TGM Plugin Activation – Source code (zip) с GitHub
- Темы с публичной информацией об использовании «Unyson»: на ThemeForest
Пример подключения нового CSS-файла с версией в последних релизах WordPress:
Пошаговое руководство по верстке на вордпресс. Глава первая: создаем тему
В этой главе мы узнаем, что такое верстка для веба, а также о том, как создавать тему для WP — самое начало.
Верстать (создавать) сайт для кмс вордпресс – не самое сложное занятие. В сети много мануалов по этой теме, но законченного я так и не нашел. Где-то что-то отсутствует (весьма важные части), где-то, напротив, все чересчур подробно. Попробую восполнить этот пробел я сам.
Итак, в данном цикле заметок мы научимся верстать сайты под вордпресс с нуля. Уровень читателя подразумевает знание HTML + CSS + JS на минимальном уровне. Иными словами: вы уже умеете немного верстать (даже если сами об этом не знаете), но не понимаете, как применить ваши знания относительно WP.
Немного теории
Во-первых, что такое верстка? Если говорить просто, для чайников, то верстка в веб-программировании – это создание особой (гипертекстовой) разметки из картинки. Простой пример. Есть у нас картинка up.jpg и текст «Мой первый сайт!»; чтобы браузер показал картинку и текст вместе на страничке, достаточно одной строки:
Здесь текст – это текст, а изображение выводится с помощью специального тега img. При верстке надо «закодировать» все картинки, прописать шрифты и расположить между собой блоки как на макете – с учетом полей и отступов.
На самом деле это не так уж и сложно, но есть немало тонкостей. Например, надо сделать так, чтобы макет отображался одинаково на последних версиях популярных браузеров (чаще всего проблемы здесь возникают с IE) — кроссбраузерность. Часто требуется валидность и адаптация.
Особенности WP
Для верстки под кмс по большому счету ничего особенного и не требуется – нужно просто узнать расположение блоков, где чего выводится и, в соответствии с этим, создавать шаблоны для разных страниц.
Иными словами, нам требуется узнать структуру, по какой вордпресс формирует и выводит код страниц.
Также, при верстке WP от нас требуется минимальное знание php. Да, да. Например, чтобы заработал функционал меню в теме, необходимо в файле functions.php добавить три строчки:
Но, обо всем по порядку. Не пугайтесь, мы всему научимся.
Создание темы
Начнем с создания темы. Создайте скриншот вашей темы – просто экспортируйте для веб в формате png ваш исходник psd (именно в этом формате чаще всего получают верстальщики прототип сайта, его внешний вид). Файл сделайте 880 на 660 пикселей размером.
Ах да, все действие будет происходить по адресу /wp-content/themes/upread – где upread – это название вашей темы. Ну а что? Ничем не хуже других название.
В это папке создайте пару пустых файлов с названиями index.php и style.css, а также пустую папку images. Теперь, если все это залить на сервер, то уже будет кнопочка «Активировать».
Понятно, что после активации нашей темы, мы увидим белый экран – не пугайтесь, это так и задумано.
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
заметки, wordpress, верстка