Меню Рубрики

Установка верстки сайта на wordpress

Из HTML в WordPress за 10 минут

Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут. На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.

Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:

Заходим в админ. панель WordPress

Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин. Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-contentthemes и создаем папку с названием нашей новой темы «truestory»

Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.

Открываем файл header.php в стандартной теме WordPress ➜ «twentyfifteen» и смотрим, как там всё устроено. Правим по аналогии файл header.php из нашей темы, копируем в неё стандартные php вставки, вплоть до вставок wp_head и body_class. Пути к стилям тоже не забываем подправить. Что касается картинки логотипа, то её путь мы сейчас не можем вывести динамично, так как у нас ещё нет таких настроек в админке WP. Давайте исправим эту ситуацию прямо сейчас.

В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:

Дальше нам надо активировать саму тему, но сейчас она попросту не обнаруживается WP в разделе «Внешний вид». Чтобы это исправить создаем файлик style.css в корне нашей темы и вписываем туда простой css комментарий вот такого вида:

Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.

В файле header.php можно вывести логотип вот таким образом:

Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.

Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.

Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.

Выносим структуру статей в файл content.php и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen». Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет, поэтому копируйте код ниже.

Вывод списка категорий на WordPress:

Вывод даты публикации на WordPress:

Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.

В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:

Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.

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

Для наглядности посмотрите видео версию урока от «Хауди Хо»

источник

Как сверстать собственный шаблон под WordPress

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

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

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

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

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

Тема (шаблон) – это совокупность функциональных и стилевых файлов, которые в сумме определяют дизайн ресурса. От темы зависит то, как будет выглядеть сайт, потому очень важно правильно подойти к процессу создания шаблона. Многие сейчас задаются вопросом: “А зачем создавать свою тему, если можно скачать уже готовую в Интернете, причем бесплатно?”. Это логичный вопрос и на него есть вполне исчерпывающий ответ: “Чтобы сделать идеальный шаблон, который полностью отвечает вашим требованиям”.

Читайте также:  Установка и снятие сигналов ограждения подвижного состава

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

Кроме того, после создания шаблона вы ощутите себя “медиком” WordPress – будете знать, что у сайта находится внутри. Поймете, какие элементы за что отвечают. Тогда сайт и вы будете разговаривать на Ты. Ознакомитесь с тегами, структурой и циклами WordPress. А быть может, вам захочется заняться этим профессионально, и вы начнете зарабатывать на жизнь созданием шаблонов.

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

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

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

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

Все темы WordPress содержатся на хостинге в папке wp-content/themes/. Внутри этой папки есть другие папки с отдельными темами, файл с дополнительными функциями (functions.php), стилевые файлы и изображения. Чтобы найти данные по отдельной теме, вам необходимо зайти в соответственную директорию. Так тема “Vestern” будет размещена в папке wp-content/themes/vestern/.

Прежде чем начать, вам следует хотя бы несколько раз взглянуть на структуру уже готовых тем. Сайт 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. Полное описание шаблона. Можно писать развернуто.

Чтобы создать самую простую тему WordPress, достаточно добавить редактированную версию с одним файлом style.css. В этом файле возле строки “template” укажите имя родительской темы. К примеру, Classic, если вы редактируете стандартный шаблон. Теперь созданная тема будет полностью соответствовать шаблону Classic. Потому файлы вам нужно будет загружать именно в директорию wp-content/themes/classic.

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

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

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

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

Читайте также:  Установки статического зондирования на буровые установки

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

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

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

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

Даже если вы случайно не укажите какой-либо файл шаблона, WordPress автоматически внесет на сайт собственные стандартные параметры настроек. Например, если не добавить файл, ответственный за комментарии, то движок отыщет в директориях свои варианты этой функции – к примеру, wp-comments.php. Тогда в структуру вашего сайта врежется “чужеродные” комментарии, которые не будут отвечать требованиям шаблона. Чтобы такого не случилось, вам необходимо добавить все основные файлы для отображения разных составляющих страницы:

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

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

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

  • для футера аналогично, только вместо header укажите footer и т. д.
  • Пример включения одного из файлов шаблона в 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

    От автора: если вы сегодня выберите для себя профессию верстальщика и решите работать в веб-студии, тогда будьте готовы к тому, что просто знаний 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 — не слишком сложна и зачастую потребует от вас знаний лишь основ программирования на PHP.

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

    Например, перед нами стоит банальная задача — вывести на страницу записи. Согласитесь, совсем несложно загуглить простейший запрос wordpress вывод постов и прочесть в документации о цикле WordPress и использовать пример цикла из той же документации в своей верстке сайта.

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

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

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

    Основы создания тем WordPress

    Научитесь создавать мультиязычные темы с нестандартной структурой страниц

    источник

    Добавить комментарий