Как сделать резиновую верстку wordpress

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Подскажите пожалуйста материалы для новичка, что бы натянуть вёрстку на WordPress! Заранее спасибо!

Что-то линки не вставляются как надо.

Спасибо Вам за ответ!

Создай functions.php файл в теме, только с текстом

А какой плагин подключаете? И как он не работает корректно, что делает/чего не делает (скриншоты в студию)) )?

Если совсем в двух словах, то functions.php расширяет функционал темы. А дальше.

Для примера, можете взять файл из стандартной темы типа TwentyEleven и посмотреть какие переменные там инициализируются/создаются/используются, какие функции/классы создаются. Тут ведь большой разброс от глобальных настроек до мелких сниппетов.

Здравствуйте! У меня такой вопрос. По поводу натягивания вёрстки на WordPress. Я конечно понимаю, что об этом уже много всего написано и много видео есть в интернете. Но всё-таки хочу спросить. Есть непонятный момент. Не могу разобраться. Когда я в установленном WordPress устанавливаю какую-либо тему из репозитория, то получаю практически пустой сайт, в который я при помощи PageBuilder вставляю контент. При этом в файлах темы ничего не меняется. В файле index.php всего несколько строк. Куда же записывается весь контент? Если мы поменяем тему на другую, то весь контент остаётся, но меняется его вид (стили). А когда речь идет о натягивании вёрстки, то мы переносим нашу вёрстку в файл index.php. Мы записываем в index.php все тексты, картинки и т.п. И если мы потом поменяем тему на какую-то другую, то мы потеряем весь контент. И еще - index.php это шаблон страницы. А мы ведь можем создать много разных страниц, и чем они будут заполняться? Я смотрел видео про натягивание вёрстки, там говорят, что переносим основное содержимое файла index.html в файл index.php, шапка при этом помещается в header.php. А если у нас несколько html страниц, то куда их переносить ? Я никак не могу понять. Натянуть вёрстку это что значит? Перенести весь контент ? или нет . Или мы так же должны получить пустой сайт, в который заказчик сам будет вставлять свой контент ?

Чтобы сделать свой сайт на WordPress, вам обязательно нужно будет добавить тему. Их еще называют шаблонами. Это основа любого веб-ресурса.

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

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

Для каких целей создается тема вручную

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

Итак, вот основные причины, почему вам стоит самостоятельно сделать шаблон для сайта:

• узнаете все о HTML, CSS и кое-что о PHP;
• сможете творить, ведь веб-дизайн — это тоже искусство;
• можно будет зарабатывать на продаже тем;
• откроете для себя новый навык;
• создадите оформление, которое 100 % будет подходить под ваш будущий сайт.

Каким стандартам отвечает тема

При написании шаблона очень важно следовать официальным правилам. Нарушение кода, вставка тега в неположенном месте и пропуск его — это может навредить оформлению и полностью испортить его вид. Вам следует хорошо ознакомиться с правилами написания PHP-код, а также HTML, если вы еще не знакомы с этими языками. Кроме того, вам предстоит иметь дело с каскадными таблицами стилей CSS, так что вспомните и их основы — в Интернете много информации по этому поводу. Ну, и самое последнее наименее важное требование — создавайте сайт, как дизайнер, а не как школьник, чтобы у вас получился серьезный проект. Иначе нет смысла браться за это дело.

Прежде чем начать, вам следует хотя бы несколько раз взглянуть на структуру уже готовых тем. Сайт WordPress по умолчанию содержит два стандартных шаблона, которые вы можете просмотреть. Это шаблон Default и Classic. Откройте их файлы в нужной директории на сервере и сравняйте их отличия.

Вы заметите, что шаблон, как правило, состоит из файлов трех форматов:

1. Style.css — стилевой файл, ответственный за внешнее оформление сайта.
2. Functions.php — функциональный файл, добавляющий на страницы различные возможности.
3. Другие php-файлы, которые отвечают за особенности вывода шаблона на сайте, интеграцию темы с WordPress. Именно эти файлы позволяют перевести psd макет в полноценный шаблон.

Разберем каждый их этих файлов детальнее, чтобы понять как проходит верстка темы WordPress.

Правила создания файла style.css

Во-первых, он должен отвечать всем особенностям разметки CSS. От этого файла зависит то, как будет выглядеть ваш сайт. Но он не заработает, если вы не добавите в него описание созданного шаблона. Эта первая особенность WordPress, которую необходимо учитывать при переносе макета psd на движок Вордпресс. Вам предстоит указать следующие параметры:

1. Имя шаблона.
2. URL, который ведет к теме.
3. Описание с указанием основных особенностей шаблона. Кратко.
4. Имя автора. В данном случае укажите свое имя.
5. Ссылка на автора, то есть на вас. Можете указать ссылку на профиль в социальных сетях.
6. Название родительской темы — это указывать необязательно.
7. Версия темы. Если только создали, тогда v. 1.0.
8. Полное описание шаблона. Можно писать развернуто.

Особенности файла дополнительного функционала functions.php

Шаблоны не всегда используют файл functions.php, но в большинстве случае он необходим. Его необходимо размещать в директории с соответственной темой. Учтите, что если этот файл имеется в папке с шаблоном, то он будет учитываться при инициализации темы. Он работает как плагин. И будет выполнять такие функции, какими вы его наделите.

Основное предназначение файла functions.php — это определение доступных функций настройки в админке для данной темы. То есть все функции, которые вы впишите в functions.php будут отображаться в админпанели, либо на странице для пользователя. Обычно, это смена цветового решения для сайта WordPress, изменение шрифта и многое другое. Но есть множество вариантов использования этого файла. Однако, это уже совсем другая история…

Особенности php файлов шаблона

Файлы формата php будут отвечать за отдельные части сайта. Они определяют как составляющие страницы, так и рубрики, категории и другие разделы, которые будут выводиться перед пользователем. Поскольку сейчас вы создатель темы, то только вы будете определять какие и сколько файлов шаблонов выбрать. После их выбора в вашей админки появятся новые функции. Чем меньше файлов вы выберете, тем быстрее будет работать сайт, но тем меньше будет у него функционала. Хорошенько подумайте какие файлы вам необходимы, а без каких можно и обойтись.

Если хотите добавить на сайт минимальную тему, или испытать свой psd макет, тогда вам понадобится только два файла в директории шаблона:

Опытные вебмастера умудряются так изменять файл index.php, что только его достаточно для того, чтобы внести настройки футера, сайдбара, поиска, архива, рубрик, страниц и т. д. Но вам лучше попробовать сделать такой шаблон WordPress, в котором каждый файл будет выполнять соответственную функцию.

• header.php — отвечает за шапку сайта;
• sidebar.php — боковые колонки;
• footer.php — подвал ресурса (его нижняя часть);
• comments.php и comments-popup.php — комментарии.

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

чтобы добавить файл шапки сайта (header.php) пропишите тег

get_header () tamplate tag;

Пример включения одного из файлов шаблона в index.php будет выглядеть следующим образом: . Вам придется искать по каждому из указанных ключевых файлов шаблона отдельную информацию. Найдите мануалы по каждому из файлов, а также образцы, чтобы вы понимали все функции, прописанные в шаблонах.

Выбор функционала шаблона

Со временем вы столкнетесь с дилеммой — какой тип шаблона выбрать. Движок предоставляет выбор. Либо вы сможете выбрать шаблон с подключенной иерархией Template Hierarchy, либо макет с тегами Conditional Tags.

Первый вариант уже был рассмотрен. Все файлы php шаблона — это и есть иерархия Template Hierarchy. То есть следуя правилам этой иерархии, вы постепенно генерируете отдельные файлы макета. Таким образом, у вас создастся полноценный шаблон из ряда функциональных php-составляющих. Иерархия в этом случае работает по принципу загрузки по запросу. К примеру, если у вас есть файл категорий (category.php) и пользователь запросил его, то в браузере загрузится именно эта составляющая сайта. Если же его нет, тогда будет загружен ключевой файл шаблона index.php.

Таким образом, вы сможете изменять внешний вид для отдельных частей сайта при помощи принципа Template Hierarchy. У каждой страницы есть свой определенный ID. Добавьте в директорию с темой файл category-6.php и при запросе рубрики с ID, равным 6, откроется именно это оформление. Если же его не будет, то настройки останутся стандартными — развернется index.php.

Порой принципа Template Hierarchy оказывается недостаточно, чтобы обеспечить максимально комфортное отображение шаблона. В таком случае программисты прибегают к использованию второго принципа — они вводят условные теги Conditional Tags. Эти теги проверяют сайта на соблюдение определенных условий, и если таковые не соблюдаются, они изменяют его внешний вид. То есть эти теги работают по принципу if/else (если/тогда). Так вам не придется добавлять море файлов php с номером каждой категории, а сможете единожды прописать условия для каждого ID.

Как происходит верстка psd макета в Вордпрессе

Некоторые любят прежде создать макет будущего дизайна при помощи различных программ, и только потом его переносить на определенный движок. Это и правда удобно, ведь некоторые приложения позволяют без каких-либо умений сгенерировать отличный дизайн. Если у вас уже есть файл формата psd, и вы хотите его сверстать под движок Вордпресс без использования кода, тогда можете воспользоваться помощью одного из популярных сервисов.

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

PSD — это файл из приложения Photoshop. Это как бы графическое изображение вашего дизайна. Чтобы его сверстать, необходимо в текстовом редакторе добавить html-разметку. Постепенно вы будете изменять каждый из пунктов этой разметки, добиваясь конечного результата, который изображен на макете. Сразу укажите центрирование вашего шаблона, а также размеры разных его частей.

Следующий шаг — это добавление фоновых изображений. Вы также их можете сделать самостоятельно при помощи того самого приложения Photoshop. Самый простой вариант — это создание градиентных фоновых изображений. Далее займитесь создание логотипа. Постепенно решайте все возникшие запросы — регулируйте шапку сайта, подвал, сайдбар и все его части, согласно сделанному макету. Не забудьте добавить важные файлы шаблона в его директорию, чтобы сайт загружался согласно вашим требованиям.

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

Перед тем чтобы начать давайте вспомним с чего всё начиналось:

Ну а теперь давайте посмотрим сам результат.

Ну а сейчас я постараюсь Вам как можно проще объяснить как сверстать шаблон для WordPress, если Вам были понятны прошлые мои уроки, то и этот урок будет прост для Вас. Но прежде чем начать давайте перечислим те инструменты, которые нам понадобятся:

Локальный сервер

Без локального сервера на Вашем ПК ничего не получиться. Так как исправлять и редактировать наш шаблон лучше на локальном сервере чем на хостинге, так на много быстрее и удобнее.

После того как Вы установите Денвер Вам нужно будет установить сам WordPress на локальный сервер. Устанавливается не сложно, Вам всего лишь нужно скинуть файлы движка в указанную папку на ПК, и установить движёк. Подробно на этом останавливаться не буду.

Браузер Опера

После того как WordPress уже работает на Вашем компьютере, нам нужно установить, если у Вас её нет, Оперу не выше 12 версии, так как после того как Опера перешла на Вебкит, она лишилась HTML редактора, что очень плохо.

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

И вот теперь когда у нас всё настроено и поставлено, а так же работает как часики :) мы будем заниматься самым интересным процессом, а именно вёрсткой шаблона HTML в шаблон для WordPress.

Вступление

Сейчас хочу Вам немного рассказать как в настоящее время у меня проходит процесс верстки. Так как у меня шаблонов уже несколько, я наработал некий шаблон вёрстки, по которому проходит весь процесс. Таким образом я просто меняю изображения и стили, и немного редактирую код на локальном сервере, до то желаемого результата. Надеюсь понятно объяснил.

Самый сложный был первый шаблон, в который нужно было вставлять код отдельно. Ох и намучился я. Но всё же получилось. А второй шаблон я уже делал по первому и так далее.

Файлы

Теперь нам нужно создать файлы в которые мы потом будем помещать весь код шаблона. Для начала создайте новую папку и назовите её как угодно Вам. Открываем папку и создаём ещё одну папку под названием images. В этой папке у нас будут храниться все изображения шаблона. А изображения нужно скопировать с нашего HTML шаблона в папку images будущего шаблона для WordPress.

После этого создаём следующие текстовые файлы и не забываем менять формат *txt на формат *php. Вот полный список файлов:

• archive.php
• comments.php
• footer.php
• functions.php
• header.php
• index.php
• page.php
• search.php
• sidebar.php
• single.php

И ещё не забываем создать файл style.css обратите внимание, что расширение у него должно быть именно CSS, в этом файле будут находиться все стили шаблона.

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

header.php

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

А вот сам код, который должен содержать этот файл:

отвечает за вывод заголовка для блога и заголовков записей которые Вы создаёте.

За вывод верхнего меню служит вот этот код:

С помощью этого кода выводится список страниц, которые созданы Вами, заметьте, не список рубрик, а именно список страниц. За вывод списка рубрик служит следующий код:

Всё, пока с этим файлом закончили, переходим к следующему.

index.php

Этот php файл отвечает за вывод записей на главной странице блога. Вот, что в него входит:

В коде я постарался описать что за код и за что он отвечает.

sidebar.php

Данный файл отвечает за вывод боковой колонки блога. Он довольно короткий, содержит код для вывода поиска и вывода виджетов, которые можно изменять из админки блога:

footer.php

С помощью этого файла мы отображаем низ сайта. В данном случае шаблон простой, по этому и кода в нём не слишком много:

single.php

Данный файл выводит саму запись созданную пользователем в админке блога, вот что в него входит:

archive.php

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

Хочу заметить, что данный файл практически ничем не отличается от index.php, только выводом названия рубрик и меток.

search.php

comments.php

Выводим комментарии на сайте

page.php

Он такой же как и single.php.

functions.php

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

К каждому коду я оставил комментарии какой код за что отвечает.

Всё, теперь мы сделали большую часть работы, теперь нам осталось немного отредактировать стили CSS, а также добавить некоторые строчки.

Стили CSS

Берём все стили с шаблона, который мы недавно делали и копируем в файл под названием style.css.

После того как все стили были скопированы, в самом начале добавьте следующие строчки:

Эти строчки отвечают за название, описание шаблона, а так же за вывод автора, и описания автора. Обязательно добавьте эти строчки, иначе шаблон не запустится.

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

И класс .sub_nav меняем на ul li ul в итоге вот что должно получиться:

Ну а теперь давайте я Вам представлю весь, уже готовый CSS код, который Вам нужно скопировать:

Установка шаблона

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

Затем выбираем разрешение .ZIP и нажимаем OK.

Всё! Наш шаблон готов для установки! Теперь Вы его можете установить и протестировать.

Или же Вы можете посмотреть уже готовый шаблон, или скачать и посмотреть как он работает.

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

Всем привет! Сегодня рассмотрим такую сложную и интересную тему, как создание WordPress шаблонов (тем) и грамотную посадку готовой HTML верстки на WordPress. В качестве Theming-фреймворка будем использоваьть Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS. Ключевые моменты - генерация стартовой Underscores темы, создание кастомных шорткодов для билдера Unyson, работа с адаптивной сеткой, создание Theme Options (опции шаблона) различных типов, создание метабоксов в статьях, на страницах и в категориях, раширение функционала фреймворка, автоматическое подключение плагинов в WordPress посредством TGM.

Ресурсы урока:

Или скачать Unyson – Source code (zip) c GitHub (если первый вариант недоступен)

Интерфейс WordPress может отличаться, в зависимости от версии, но в целом, все интуитивно понятно, Unyson работает во всех версиях WordPress.

Если у вас установлена русскоязычная версия Unyson, то в списке расширений "Page Builder" - это "Конструктор страниц", "Sliders" - это "Слайдер", "Visual Page Builder" - теперь "Unyson Builder", "Layout Elements" - это "Элементы макета", "Content Elements" - это "Элементы контента".

Пример подключения нового CSS-файла с версией в последних релизах WordPress:

Читайте также:

  
• Как сделать сортировку по времени в экселе
  
• Как сделать пирог пай
  
• Как сделать принцессу луну в пони тауне
  
• Как сделать косичку из 5 прядей
  
• Как сделать нос боксера