Как сделать тему для wordpress
Первые шаги при создании темы WordPress на основе готовой вёрстки
В этом уроке мы делаем первые шаги по переносу нашей обычной HTML + CSS вёрстки на WordPress тему.
В процессе курса я рекомендую вам использовать свою вёрстку, но если такой вариант для вас пока что трудноват, то скачивайте мою, на которой я и буду всё показывать.
Для доступа к файлам вёрстки необходимо приобрести курс.
Что такое стартовые темы и для чего они нужны
Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css …
Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS 😅
Первоначально стартовые темы задуманы для упрощения этого процесса – чтобы вам вроде как пришлось меньше писать один и тот же код. Вроде как. Когда я только начинал свою карьеру в создании WordPress-тем, и когда даже не знал о существовании стартовых тем (а может их и вовсе не было), я задумывался о создании своего собственного «темплейта», то есть стартовой темы, при помощи которой я бы мог сэкономить себе время.
Сейчас в мире не существует такой стартовой темы, которая бы подошла под мои уникальные ежедневные задачи, да и как вы убедитесь в процессе этого курса, они также не подходят и для переноса вёрстки на WordPress. Опс. Меня за это захейтят.
Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.
Сайт темы Underscores (underscores.me), вам достаточно ввести название темы и кликнуть кнопку Generate, после чего тема скачается.
Параметры темы
В самом начале урока я создал файл style.css и вставил туда следующий код:
Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:
Description Описание темы, которое будет отображаться в админке. Version Версия темы, например 1.0 License Тут можете указать название лицензии, под которой распространяется тема, обратите только внимание, что WordPress требует лицензию GPL License URI Можно указать ссылку на лицензию. Tags Если планируете загрузить тему на официальный репозиторий тем WordPress, здесь потребуется указать теги, по которым можно будет найти вашу тему. Список тегов можно найти тут.
Есть ещё параметры Template и Text Domain, но о них мы поговорим в следующих уроках.
Изображение темы
В видеоуроке я быстро сделал скриншот главной страницы вёрстки и закинул его в папку с темой с названием screenshot.png – и этот скриншот сразу же стал изображением темы:
Однако вы заметили, что он не идеально подошёл по размерам, чтобы это исправить, вам следует использовать рекомендуемое разрешение 1200x900px.
Функции PHP и WordPress
Тут я прежде всего рекомендую вам почитать моё руководство по PHP для начинающих, чтобы немного разобраться в теме.
Функции WordPress, использованные в этом уроке
В конце каждого урока моего курса вы встретите такой раздел со ссылками на подробную документацию всех использованных в уроке функций.
Что делать, если админ-панель наехала на вёрстку сайта?
После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.
Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.
В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php :
Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?
После добавления соответствующих CSS-стилей вы можете заметить, что изменения применяются даже тогда, когда админ-панель не отображается на сайте! (например для незарегистрированных пользователей). Что делать?
Также можете почитать на моём сайте урок, в котором я переносил админ бар в нижнюю часть страницы.
Что делать, если в процессе выполнения этого урока у вас всё сломалось и отображается белый экран?
Если вы делали шаги в этом уроке, но после того, как вставили или изменили какой-то код, у вас стал отображаться белый экран, и вы не знаете из-за чего, то вы можете поступить следующим образом:
Будет ли домашнее задание?
Лучше всего, если после просмотра урока вы будете повторять мои шаги с той же вёрсткой, которую вы можете скачать в предыдущем уроке.
Конечно, вы можете взять любую другую, возможно даже ту, которую вам нужно сделать для заказчика! С одной стороны так будет даже лучше, но и тяжелее конечно.
WordPress. Основы создания тем
В первом уроке курса мы с вами рассмотрим некоторые организационные моменты, такие как: выбор сервера, редактора написания кода, установка WordPress и т.д. Также мы обозначим необходимый минимум знаний, который потребуется для прохождения курса. Конечно же, коснемся вопроса разработки тем для WordPress на современном этапе.
Создание темы мы начнем не с нуля, как это было принято делать раньше. Мы будем создавать тему на некоторой базе, в качестве которой будет выступать стартовая тема Underscores. Благодаря данной теме, мы значительно ускорим процесс создания собственной, поскольку в стартовой теме уже имеется весь необходимый набор файлов, использующихся в стандартных темах WordPress. Само собой, в этих файлах есть базовый код, который мы можем взять за основу и вносить в него при необходимости правки.
Урок 2. Стили и скрипты. Меню
Текущий урок мы отведем преимущественно для работы с файлом functions создаваемой темы WordPress. В частности, именно через данный файл рекомендуется подключать стили и скрипты для темы.
Как уже отмечалось выше, благодаря стартовой теме Underscores, у нас имеется некоторый типовой код, который мы можем взять за основу. В файле функций темы имеется функция для подключения стилей и скриптов. Мы ее и используем, добавив все необходимые стили, скрипты и шрифты для подключения к теме.
Также в уроке мы зарегистрируем, создадим и выведем меню на сайте. Сделаем мы это в шаблоне header, который используется для подключения к ключевым шаблонам темы.
Урок 3. Фреймворк Unyson
В этом уроке мы поговорим о вопросе необходимости фреймворков для современных тем WordPress. Если раньше мы могли обходиться без них и в большинстве случаев было достаточно возможностей стандартного визуального редактора в WordPress, то сейчас этого уже мало.
Страницы современных сайтов зачастую многосекционны и разнообразны. Часто они используют возможности сеток, т.е. предполагают возможность делить контентную часть на колонки. Все это практически невозможно реализовать с помощью обычного визуального редактора. И здесь нужен конструктор страниц.
Фреймворки для WordPress имеют в арсенале конструктор страниц и в данном уроке мы установим один из таких фреймворков – Unyson. Также мы установим необходимые расширения из его комплекта – это слайдер и конструктор страниц.
Урок 4. Слайдер и секции Главной страницы
В этом уроке мы займемся реализацией главной страницы темы. И здесь мы будем активно использовать возможности конструктора страниц фреймворка Unyson. В частности, мы реализуем слайдер на главной странице и пару секций с контентом, создать которые без конструктора страниц было бы практически невозможно.
В результате мы получим готовую главную страничку сайта, на которой можно управлять фактически каждым ее элементом. Например, мы с легкостью можем добавлять и удалять слайды в слайдер, менять слайды местами, изменять внешний вид слайдера, выбирая ту или иную библиотеку слайдера. Конечно же, мы без проблем сможем управлять и прочим контентом главной страницы.
Урок 5. Страница About
Это достаточно типовая секция для современных сайтов и реализовать ее нам будет очень просто, поскольку фреймворк Unyson имеет в наборе компонентов шорткод участник команды. Используя его, мы создадим нужную секцию буквально за считанные минуты.
Урок 6. Страница контактов
Последней постоянной страницей, которую мы создадим через конструктор страниц, будет страница контактов. Она также предполагает наличие нескольких секций, в одной из которых будет выводиться Google карта, а во второй – контактная форма.
Реализовать оба элемента и иметь возможность ими управлять – для нас также не составит особого труда, поскольку оба этих компонента есть во фреймворке Unyson. Особое внимание мы уделим контактной форме, добившись того, чтобы форма отправлялась асинхронно, т.е. без перезагрузки страницы.
Урок 7. Страница блога
В этом уроке мы поработаем с еще двумя шаблонами темы WordPress – это шаблоны index и single. Первый шаблон будет использован для показа последних записей (новостей, статей) сайта. Ну а второй шаблон используется WordPress для показа отдельной записи.
Здесь мы познакомимся с функциями постов WordPress, благодаря которым мы получить все необходимые данные записи: название, контент, дату публикации ссылку на полный текст, миниатюру записи и т.п.
Урок 8. Локализация темы
Последний урок нашего мини-курса мы посвятим вопросы локализации темы и мультиязычности сайта. Если вы решите создавать темы на продажу или же создавать мультиязычный сайт, тогда без локализации темы вам не обойтись. И после создания темы вам нужно подготовить ее для перевода.
Благодаря локализации темы ее легко можно будет перевести на любой другой язык. В уроке мы подготовим нашу тему для перевода, т.е. произведем ее локализацию. Здесь мы познакомимся с функциями WordPress, позволяющими создавать мультиязычные темы, а также используем программу Poedit для создания файлов перевода темы, т.е. языковых файлов.
Видео презентация курса «WordPress-Мастер. Разработка тем для WordPress с нуля»
Редактирование и настройка темы WordPress: ТОП-10 Шаблонов
Добрый день, уважаемые читатели! Сегодня подробно изучим структуру, гибкую настройку темы WordPress своими руками.
Для начала о том, зачем нужна настройка шаблона WordPress опытному веб-мастеру и новичку:
Разбираем структуру по кирпичикам
Если изобразить HTML-код как один большой квадрат, шаблон можно разбить на несколько частей: шапку сайта, контентную область, сайдбар, футер.
Часто приходится редактировать такие файлы:
Мы назвали 3 элемента, которые редактируют чаще остальных. Кроме них, есть другие:
В некоторых темах могут появляться другие файлы. Разбираться, какую функцию выполняют они, нужно отдельно в каждом конкретном случае.
Редактируем шаблон самостоятельно
Простая, но очень важная рекомендация для новичков. Если HTML, CSS для вас дремучий лес, даже не пытайтесь переделывать код. Одно дело, когда в уроке советуют скопировать кусок кода и вставить его в конкретное место файла. Совершенно другое дело, когда блоггер пытается настроить параметры темы WordPress наобум. Помните о регулярном бэкапе базы данных.
Есть три варианта настройки темы или шаблона WordPress:
Достаточно зайти в раздел «Внешний вид» и найти там редактор. В правой колонке будет список всех файлов темы. Нужно выбрать нужный файл, внести изменения и нажать «Обновить».
Чаще всего веб-мастеры прибегают к этому способу, когда понадобилось внести минимальные изменения. Редактирование выполняется быстро и просто, без запуска программ, ввода паролей. Недостатки тоже имеются. Код не подсвечивается, нумерация строк тоже отсутствует. Поэтому если вы планируете создавать свою тему для WordPress с нуля или вносить более серьезные (и многочисленные) изменения, лучше воспользоваться другим, более эффективным способом.
Например, у beget просто замечательный файловый менеджер, имеющий дружелюбный интерфейс. У большинства других хостингов тоже есть такие файловые менеджеры. Данный способ хорош тем, что вам не придется устанавливать какие-то дополнительные программы, настраивать подключение или копировать файлы. К тому же, код всегда подсвечивается, что тоже радует.
Как работает редактор тем WordPress? Вам нужно открыть папку по адресу /wp-content/темы/название_темы/файл. Если файлового менеджера нет, есть смысл задуматься о смене хостинга.
Когда намечается основательная работа с контентом, и нужно отредактировать сразу несколько файлов в папках, на помощь приходит третий вариант – ftp-клиент.
Достаточно выполнить три простых действия:
Как выглядит настройка в админке ВордПресса?
Если при выборе тематики для сайта вы скачали сочные и красивые темы WordPress, отредактировать их можно в админке блога. Вам даже не придется копаться в коде. Предлагаем ознакомиться с пошаговым руководством:
ТОП-10 бесплатных шаблонов
В качестве бонуса предлагаем подборку качественных, совершенно бесплатных шаблонов ВордПресс. Их можно использовать для web-сайтов различных тематик и направлений.
Avada
Минималистичная, универсальная тема WordPress с регулярными обновлениями. Есть русификатор. Рекомендуем ее для создания, дальнейшего администрирования магазинов, инфосайтов.
Nitro
Одна из лучших WooCommerce тем. Больше всего востребован макет парфюмерии. Многие плагины и фильтры товаров уже встроены по умолчанию. Есть даже шаблоны распределения скидок, настройка логотипа, атрибута товара.
Sydney
Как создать бизнес-сайт, который стал бы лицом компании, смог представить фрилансера, любого другого специалиста в выгодном свете? Для этих целей можно смело использовать шаблон Sydney. Логотип легко настраивается. Также отметим возможность управления макетами, чрезвычайно удобную навигацию.
Allegiant
По словам разработчиков, великолепная тема для малого бизнеса. На главной страничке есть слайдер, поле отзывов, блок с новостями и пр.
Riba Lite
Как упростить ведение блога, сделать процесс увлекательнее и разнообразнее? Попробуйте установить тему Riba Lite! Это идеальный вариант для тех, кто практикует создание текстового контента в таких жанрах, как путешествия, красота и здоровье, стиль жизни. Доступен большой выбор цветовых схем, поддержка версий для всех мобильных платформ. За счет использования Retina Ready получаем отличную производительность.
ColorMag
Если вы давно подыскивали хорошую тему для онлайн-журнала, портала новостей, попробуйте ColorMag. Все посты закрепляются на странице сайта как отдельные блоки. 100% кастомизация интерфейса вплоть до смены логотипа.
eStore
Клевый WooCommerce макет, который идеально подходит для создания онлайн-магазина. Совместим с плагинами Wishlist.
Ascent
Зачетная тема, которая выглядит симпатично на любом десктопе и мобильном устройстве. Имеет простой и минималистичный дизайн, работает с технологиями CSS, HTML 5.
Onetone
Шаблон сайта-одностраничника Onetone стал настолько популярным, что его установили себе десятки тысяч веб-мастеров. Позволяет организовать ресурс любой тематики. Создан с использованием CSS3, HTML5.
Awaken
Нет лучшего решения для «открытого журнала», чем Awaken. Благодаря ему, посетители вашего сайта смогут смотреть новости в удобном формате, оставлять комментарии. Тема привлекает сочным интерфейсом, удобными виджетами.
Заключение
На этом все – мы разобрали 3 основных способа редактирования тем WordPress и 10 лучших шаблонов для сайта. Выбирайте тот, который по душе и как раз соответствует вашей тематике. Желаем успехов!
Как создать собственную тему WordPress
В интернете есть, конечно, информация на данную тему, но она так скудна.. и совсем не для новичков, которые стремятся к познаниям и в тоже время первый раз видят PHP-код.
Сейчас я расскажу о том, как создать свою тему для WordPress. Рассмотрим всё по пунктам, с картинками. Скажу лишь, что ничего придумывать не надо, все функции, которые здесь употребляются — уже встроены в движок.
Работать мы сегодня будем с дизайном для марки Sticky. Главная фишка сайта — легкий сайдбар, который будет всегда находиться на своём месте, независимо от прокрутки. Также разные украшательства сделаны с помощью CSS3.
Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 12 колонок по 24px; мягкие цвета для основного цвета и коричневый и тёмно-красный — для акцентов; в тексте используем шрифт serif; в целом дизайн производит впечатления осязаемого и реалистичного.
Анатомия темы WordPress
Перед тем, как начинать создавать тему, важно знать, как же она устроена. Если посмотреть структуру большинства тем, то можно увидеть, что она состоит из примерно 12 корневых файлов.
Что это за файлы?
Базовый код
Так как наша тема использует в основном HTML и CSS, и немного PHP, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:
Создание WP — темы
Теперь, когда у нас есть очертания будущей страницы, мы начнём превращать наш код в wordpress-тему. Начнём с создания папки для нашей темы и создания php — файлов (header.php, и тд.). Как вариант, можете из из темы Default, которая прилагается с движком, удалить содержимое и заменить на своё и залить свои скрипты и картинки..
Создание файла стилей
Каждая тема Worpress снабжена таким файлом, это обычный CSS. Так что в самом верху пропишем кое-что о себе:
Загружаем Header
Открываем наш header.php и вставляем в него соответствующую часть кода из HTML. Теперь мы должные поменять код на корректный для WordPress. wp_title(); отображает title страницы, которое следует из bloginfo(‘name’), которая в свою очередь заменяется в админ-панели.
bloginfo(‘stylesheet_url’); подключает страницу стилей. Им заменяют обычный путь к стилю.
Другие файлы, такие как Javascript, подключает тег bloginfo(‘template_url’); он указывает путь до папки с темой.
Если вы хотите наполнить свою тему комментариями, что добавьте соответствующий javascript из ядра WordPress. Перед тем, как закроется тег /head>, вставляем wp_head();, это то место, куда будут добавляться дополнительные плагины.
Строим Index
Здесь начинается самое сочное) Сначала мы вставляем теги get_header(); и get_sidebar(), которые отвечают header.php и sidebar.php.
WordPress «закручивается» и начинает проверять контент, которые ему доступен. Внутри этого цикла мы видим различные теги, которые содержат информацию о посте, такие как the_title();, и the_permalink();. Они заключаются в теги HTML соответственно их цели. Так, тег the_permalink отвечает за путь к ядру темы и указывается 2 раза — в пути к картинке и в ссылке на сам пост в теге title.
the_post_thumbnail(); — дополнительная опция, этот код может добавить к посту иконку в WordPress 2.9. Ниже расположен контент, который вставляется через тег the_content(»);
В мета — секции можно увидеть такую специфическую информацию, как время написания, количество комментариев и тп.. Это всё подключается шаблонными тегами, такими как the_time(‘F jS, Y’);. Параметры их можно менять, например, отображение даты можно изменять в соответствующем разделе админки WordPress. (полезно будет почитать WordPress Codex).
Двигаясь чуть ниже, цикл отображает тег else, который отображает то, что получается, если постов не найдено) и цикл заканчивается тегом endif.
После завершения цикла мы добавляем get_footer(); который подстоединяет footer.php
Заполняем Sidebar
В боковой панели отображаются такие вещи, как список категорий и список страниц.Sidebar подключается функцией get_sidebar();
Только три вещи в нашем sidebar’e — лого, список страниц и категорий. Лого поместим в тег h1, к которому подключены функции get_option(‘home’); и bloginfo(‘name’); для обозначения URL Блога и присвоения соответствующего имени в нужных местах. Список страниц обеспечивает wp_list_pages(‘title_li=’ );, который вылавливает названия всех страниц, которые были созданы. Список категорий вызвать столь же легко, wp_list_categories();.
Эта функция используется со многими параметрами, такими как show_count=0 ( предотвращает показ количества постов в каждой категории), hide_empty=0 (показывает категорию, даже если в той нет постов), и exclude=1 (исключает категорию с как правило это категория «Без рубрики «).
Закругляемся на footer’е
Это самая простая часть, вставаляем wp_footer(); перед /body>. В него помещается такая информация, как последние записи, последние комментарии и что-нибудь в этом духе. Всё это можно сделать, используя шаблонные теги WordPress.
Создаём страницу архива
Архив содержит в себе список постов, рассортированных по автору, дате, категории и тп. Эта страница очень похожа на index.php, но в самом её верху публикуется тега с заголовком, чтобы юзер знал, в на какой странице он вообще находится. Например, «Архив». По желанию можно почистить цикл от текстов постов, количества комментариев и тд,, в этом случае будет выводиться просто список заголовков постов.
Конструируем страницу просмотра одного поста
Для создания страницы поста используется шаблонный файл single.php, которая очень похожа на page.php. Тут всё просто. Комментаррии подсоединяем comments_template();
Конфигурация комментариев
Чем придумывать код — надо взять комментарии с Default theme, и внести свои изменения.
Если создать шаблон для комментариев, то он пригодится очень надолго. Сложно писать CSS для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт Firebug — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size).
Завершаем страницей 404 и страницей поиска
Страница поиска — копия archive.php, но вручную нужно добавить:
Результаты поиска,
а в странице 404 может разгуляться ваша фантазия. Только не забудьте добавить get_header();, и get_footer(); где нужно
Вот и всё
Мы ознакомились, как создать свою тему WordPress. Для тестирования будет полезно подабавлять пару-тройку пробных постов. Если вы боритесь за чистоту кода, то следите внимательно за тем, куда вставлять нужные куски кода.
Я надеюсь, вам помогла эта статья! Если что-то непонятно, не бойтесь спрашивать.