- Как простой HTML шаблон сверстать под WordPress
- Демо ι Скачать
- Локальный сервер
- Браузер Опера
- Вступление
- Файлы
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- archive.php
- search.php
- comments.php
- page.php
- functions.php
- Стили CSS
- Установка шаблона
- Демо ι Скачать
- Шаблон сайта на чистом HTML
- Создание шаблона сайта
- Описание сайта
- Общая информация
Как простой HTML шаблон сверстать под WordPress
Наконец то я решился сверстать уже наш тестовый шаблон из HTML в WordPress. Ура 🙂 Теперь я хочу рассказать и показать Вам, дорогие читатели, сам процесс вёрстки. Как оказалось, что он не такой уж и сложный. В общем я понял, что каждый новый шаблон даётся на много легче чем прошлый.
Перед тем чтобы начать давайте вспомним с чего всё начиналось:
Ну а теперь давайте посмотрим сам результат.
Демо ι Скачать
Ну а сейчас я постараюсь Вам как можно проще объяснить как сверстать шаблон для WordPress, если Вам были понятны прошлые мои уроки, то и этот урок будет прост для Вас. Но прежде чем начать давайте перечислим те инструменты, которые нам понадобятся:
Локальный сервер
Без локального сервера на Вашем ПК ничего не получиться. Так как исправлять и редактировать наш шаблон лучше на локальном сервере чем на хостинге, так на много быстрее и удобнее.
Подобных серверов на просторах интернета огромное количество. Я, например, пользуюсь сервером Денвер. Он прост в установке и в настройке. Как его установить и настроить Вы сможете найти на официальном сайте http://www.denwer.ru там же Вы сможете его и скачать.
После того как Вы установите Денвер Вам нужно будет установить сам 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
Страница для вывода записей из поиска блога. Опять же, он почти ничем не отличается от index.php, кроме вывода поискового запроса пользователя.
comments.php
Выводим комментарии на сайте
page.php
Выводим содержание страниц на блоге. Например, такие как «Контакты» или «Карта сайта»
Он такой же как и single.php.
functions.php
Этот файл отвечает за вывод некоторых функций на блоге, в него можно добавлять практически любой код. Например, можно вывести хлебные крошки без плагина, просто добавить нужный код, и просто его потом использовать на любой странице сайта.
К каждому коду я оставил комментарии какой код за что отвечает.
Всё, теперь мы сделали большую часть работы, теперь нам осталось немного отредактировать стили CSS, а также добавить некоторые строчки.
Стили CSS
Берём все стили с шаблона, который мы недавно делали и копируем в файл под названием style.css.
После того как все стили были скопированы, в самом начале добавьте следующие строчки:
Эти строчки отвечают за название, описание шаблона, а так же за вывод автора, и описания автора. Обязательно добавьте эти строчки, иначе шаблон не запустится.
Теперь нам нужно немного изменить стили выпадающего меню, ищем строчку
#dropdown_nav .sub_nav
И класс .sub_nav меняем на ul li ul в итоге вот что должно получиться:
Ну а теперь давайте я Вам представлю весь, уже готовый CSS код, который Вам нужно скопировать:
Установка шаблона
Ну а вот теперь, друзья, когда весь код уже на месте, нам нужно все файлы заархивировать. Это можно сделать с помощью любого архиватора, например, я пользуюсь WinRar.
Выделите все файлы, затем нажмите правой кнопкой мыши и в выпадающем меню выбирайте «Добавить в архив»:
Затем выбираем разрешение .ZIP и нажимаем OK.
Всё! Наш шаблон готов для установки! Теперь Вы его можете установить и протестировать.
Или же Вы можете посмотреть уже готовый шаблон, или скачать и посмотреть как он работает.
Демо ι Скачать
Друзья, если у Вас будет что то не получаться, или что то не получиться, спрашивайте в комментариях, я обязательно помогу. Спасибо.
Источник
Шаблон сайта на чистом HTML
Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.
Правда полноценный ресурс, с применением одного языка программирования, сделать затруднительно, но вот сайт-визитку из нескольких страничек, вполне возможно.
Если у кого-то именно он и является целью, и нет желания изучать другие языки, то эта статья для них.
Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.
А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.
Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.
Разделим весь процесс на четыре части.
1. Создание места для сайта на своём компьютере.
2. Создание сайта.
3. Создание директории сайта
4. Перевод сайта с нашего компа на хостинг, то есть в интернет.
Создание места для сайта на своём компьютере
Первый пункт самый простой.
Нужно просто создать отдельную папку, например в разделе Документы и назвать её как вам будет угодно, например site .
Чуть погодя, когда у нас будут готовы файлы сайта, мы будем складывать их в эту папку и это будет уже не просто папка, а директория, или корень сайта.
А что, куда и как положить, я подробно покажу после кода главной страницы, чтоб уже было с чем идти в директорию.
Приступим ко второму пункту, самому творческому.
Создание шаблона сайта
Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.
Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.
Я рекомендую Notepad++. Он бесплатный, простой в использовании, и в отличие от Блокнота, в нём легко просматривать картинку в браузере, после внесения изменений в код.
За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.
Но и до сих пор, табличная структура не устарела и с успехом применяется.
Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.
Итак, вот такой сайт, с минимальным оформлением.
Как в дальнейшем оформлять таблицы, очень подробно показано в статье Таблицы HTML.
Название сайта (организации) Описание сайта
|
---|