Создание темы для WordPress. Первые шаги. Wordpress с нуля сайт


Создание темы для WordPress с нуля

Блог  /  WordPress  /  Создание темы для WordPress. Первые шаги.

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

Основа любой темы — файлы style.css и index.php 

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123. Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css, то в админке во Внешний вид > Темы ожидайте такой ошибки:

Отсутствует файл стилей темы WordPress

Если вы забили на index.php:

Отсутствует index.php главный шаблон темы вордпресс

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

/* Theme Name: Тема для Миши Version: 105.1 Description: Вполне себе годная темка, получше некоторых Author: Миша Рудрастых Author URI: https://misha.blog */ body{color:#555;} /* это типо я показываю, что дальше идут уже ваши CSS стили */
Theme Name Название темы, я прав? Version Текущая версия вашей темы Description Не знаю, что значит этот параметр Author Тут можете указать себя и тех людей, которые вам помогали Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией Text Domain Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию. Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте.

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Тема без информации в WordPress

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Новая тема для WordPress

Установка изображения темы 

Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Как установить изображение темы

Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png.

Вот, другое дело:

screenshot.jpg в качестве изображения темы

В этом примере я специально взял квадратную картинку в jpg-формате и она вполне годно отображается на странице со всеми темами, но если вы откроете информацию о теме в попап-окне, то будет печаль. Картинка растянется и будет некачественно.

Хоть и не обязательный, но по факту главный файл темы — functions.php 

Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

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

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

И никогда! 👿

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" /> </head> <body> Привет мир! </body></html>

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

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

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом </head> функцию wp_head(), а перед закрывающимся тегом </body> функцию wp_footer(), выглядеть это будет примерно так:

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" /> <?php wp_head() ?> </head> <body> Привет мир! <?php wp_footer() ?></body> </html>

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией get_header(), код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией get_footer(). Приступим.

header.php

В хедер стараемся включить то, что повторяется на всех страницах сайта, ну или почти на всех.

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" /> <?php wp_head() ?> </head> <body>

Чаще всего в header.php также попадает основная навигация сайта, меню.

footer.php

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

<?php wp_footer() ?></body> </html>

В итоге наш index.php стал выглядеть вот так:

<?php get_header(); // вставка header.php ?> Привет мир! <?php get_footer(); // footer.php ?>

Что дальше? 

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

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Продолжаем создавать тему для WordPress

  • Файлы темы в WordPress. Их иерархия и порядок подключения.Иерархия файлов тем WordPress. Графики и примеры. Порядок подключения.
  • Шаблоны страниц и типов записейКак сделать каждую страницу или запись WP уникальной при помощи шаблонов страниц? Как создать собственный шаблон страницы или произвольного типа поста?
  • Меню в WordPress. Волкер меню.Рассмотрим детально функционал меню в WordPress: как включить его поддержку, как создать меню и вывести его на сайте, выясним на примере, что такое волкер меню.
  • wp_head() — хук для подключения CSS, JS, jQuery и добавления мета-теговФункция запускает хук wp_head, используемый многими плагинами для подключения стилей и скриптов на страницах сайта.
  • wp_footer() — запускает хук wp_footerФункция запускает хук wp_footer, используемый для подключения js-файлов (JavaScript) плагинами, а иногда и для добавления HTML-кода.
  • wp_enqueue_script() — подключение JavaScriptРекомендуемый метод подключения файлов JavaScript в WordPress.
  • wp_enqueue_style() — подключение стилей CSSРекомендуемый метод подключения CSS-стилей в WordPress. Ставит указанный файл в очередь на вывод.
  • get_header() — подключает шапку сайтаПодключает файл шаблона шапки сайта. (обычно это header.php)
  • get_footer() — подключение подвала сайтаПодключает файл шаблона подвала сайта. (обычно это footer.php). Описание функции, ее параметров и примеры.
  • add_theme_support() — добавляет поддержку: форматов постов, миниатюр, меню, HTML5, произвольного фона и заголовкаДобавляет поддержку дополнительных возможностей Wordpress: форматов постов, миниатюр, произвольных фонов и заголовков, меню.

misha.blog

Создание сайта на WordPress с нуля

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

Сайт будем делать суперлегкий — учебный. Цель показать основные этапы самого создания сайта на WordPress. Не будет прототипирования, не будет PSD макета, не будет верстки HTML макета.

создание сайта на wordpress

Статический HTML исходник

Я набросал HTML макет, который мы и будем использовать в качестве исходника для будущего сайта на WordPress. Тема — визитка для творческого малого бизнеса, либо обычный авторский блог. Предлагаю ознакомиться с макетом вживую.

А что тогда будет, спросите вы?Будем создавать собственные дополнительные файлы для WordPress, помимо стандартных.

Выведем на главной странице публикации из двух категорий. По аналогии можно будет выводить анонсы из определенных категорий.

Создадим несколько шаблонов страниц, с несколькими вариантами расположения сайдбаров.

Соберем ВЕСЬ СТАНДАРТНЫЙ функционал WordPress сайта. В процессе создания будем пользоваться уже готовыми PHP сниппетами, где-то будем пользоваться моими наработками, а где-то и возьмем отрывки кода из свободного доступа.

В процессе верстки немного познакомимся с разметкой Twitter Bootstrap.

Добавим иконочные шрифты FontAwesome (куда без них 🙂 ).

Создадим навигационное меню с выпадающими пунктами.

Создадим кастомизатор — собственные настройки шаблона (опционально и не принципиально).

Также добавим немного анимации и плавный скролл при прокрутке страницы (опционально и не принципиально).

Сделаем СЕО оптимизацию шаблона и микроразметку Schema.org (опционально и не принципиально).

Думаете сложно создать сайт на WordPress? Я раньше думал, что сложно. Оказывается нужно только желание! Взять и сделать!

Что в итоге?

В итоге у нас получится сайт-визитка на платформе WordPress с интеграцией системы адаптивной разметки от разработчиков Twitter Bootstrap, очень популярной и современной на данный момент.

Ну а в остальном это будет обычный сайт на WordPress.

Что нужно для создания сайта на WordPress с нуля

Понимание HTML, CSS на уровне текстового редактора WordPress. И сам редактор. Такой как Notepad ++, либо любой другой с поддержкой HTML, CSS и подсветкой кода, это не принципиально.

Локальный сервер на компьютере. Забудьте про Денвер! Установим простейший, без всяких настроек и плясок с бубном вокруг сервак с уже встроенным модулем WordPress платформы!

Хотя можно работать и на хостинге с использованием любого FTP клиента. Кому как удобнее. Вот ссылка на настройку файлового менеджера Total Commander с FTP клиентом.

Ну и, конечно же, интерес и желание. 🙂

— Я специально создал FeedBerner, чтобы вы не пропустили не одной публикации. Вот ссылка на FeedBurner, просто кликните по картинке :

Feed новостей моего сайта почтой

создание сайта на wordpress

Лучший способ отблагодарить автора

Похожие по Тегам статьи

filwebs.ru

Как создать сайт на WordPress с нуля бесплатно

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

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

Wordpress лидер среди CMS систем

WordPress предлагает массу шаблонов для оформления как платных, так и бесплатных. Заметным преимуществом для не слишком искушенных пользователей являются доступность и простота при администрировании веб-ресурса. Еще одна грань работы с платформой Вордпресс – плагины. Здесь, пожалуй, придется приложить некоторые усилия. Будьте уверены, они себя оправдают с лихвой.

Итак, как создать сайт на Wordpress с нуля? Если рассматривать нашу задачу в общем, то пошаговая инструкция будет выглядеть следующим образом:

  • Установка WordPress на сервер-хостинг провайдера;
  • Выбор шаблона;
  • Редактирование шаблона;
  • Установка плагинов;
  • Проверка валидности.

Установка на хостинг и выбор шаблона

Если вы решили сделать сайт на Вордпресс самостоятельно, определитесь с целями вашей страницы. Обрисуйте хотя бы самые общие вопросы. Например, является лишь проект коммерческим или вы преследуете иные цели? На самом деле от этого зависит очень много. В частности, первый шаг. Если ваш проект в будущем не будет монетизирован – создавайте его на бесплатном хостинге. В ином случае обязательно ищите платный хостинг. Выбор последнего – совершенно несложная задача. Даже у среднестатистического хостера есть возможность взять пробный период на несколько недель или на месяц. Этого времени достаточно, чтобы понять, стоит ли вам сотрудничать с хостинг-провайдером далее.

Чтобы создать сайт на Вордпресс, с самого начала регистрируйтесь на выбранном вами хостинге. Среди них могут быть:

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

Не все хостеры предоставляют установку Вордпресс, поэтому в некоторых случаях это нужно сделать вручную. Воспользуйтесь официальным ресурсом, чтобы скачать самую новую версию. Распаковав архив, начните с создания базы данных. Чтобы создать сайт на Wordpress с нуля бесплатно, необходимо пройти и этот, на первый взгляд, не простой этап. Еще один шаг, который хостинг может проигнорировать: настройка адреса DNS-сервера. Решить эту проблему не трудно, достаточно найти соответствующую функцию в личном кабинете.

WordPress – самая популярная платформа для создания веб сайтов

Первый этап в том, как создать сайт на Wordpress с нуля, мы прошли. Далее создаем не менее важную часть хорошего веб-ресурса – шаблон. Функциональность и общий вид вашего ресурса имеют колоссальное значение – это, пожалуй, более чем очевидно. Как только мы начали пошагово разбирать, как сделать сайт на Wordpress, было сказано, что важно определиться с целями вашего проекта. Эта же проблема всплывает во второй раз при выборе шаблона. Если проект достаточно масштабный, то, скорее всего, вы намерены отдельно создать мобильную версию своего блога. Если это не так, выбирайте адаптивный шаблон. Таким образом, ваш веб-сайт можно будет без ущерба просматривать в мобильном режиме.

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

Редактирование шаблона и выбор плагинов

Смена шаблона на Вордпресс – крайне простая процедура. У вас она отнимет всего лишь несколько минут. В панели администратора вы найдете строку, отвечающую за внешний вид. Выбрав установку темы, загружаете уже готовый вариант из личных файлов на вашем компьютере. Заполните каждую строку, о которой говорит платформа – загрузите свой логотип, создайте настройки слайдера и макет веб-сайта. Обязательно сделайте иконки на свои страницы в социальных сетях. Задумайтесь о СЕО настройке темы, ведь от этого зависит приток посетителей вашего сайта. Другими словами – оптимизируйте. Настройте все необходимые детали – общую информацию о ресурсе, введите адрес сайта, часовой пояс, формат, в котором будет отражаться дата.

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

  • WordPress Database Backup – предназначен для создания копии MySQL блога;
  • WP DS Blog Map – создает карту веб-сайта в формате HTML;
  • Invisible Captcha – плагин с ярко выраженной функцией – защитой от спама;
  • Breadcrumb NavXT – плагин для оптимизации веб-проекта;
  • Profile Builder – этот плагин создает возможности для ваших читателей. После установки вы будете получать комментарии без надобности проверки, также будут выводиться аватары пользователей.

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

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

Top CMS

Проверка валидности

Наконец, вам необходимо обнаружить возможные ошибки, избежать которые со стопроцентной возможностью не всегда реально. Они могут быть в исходном коде – разработчики тоже могут допускать ошибки. С другой стороны, ошибки часто появляются и при сбое работы плагинов. Некоторые из них могут быть менее, некоторые более вредоносными. В любом случае, лучше решить этот вопрос как можно более масштабно и сразу. Чтобы сделать сайт на Wordpress с нуля действительно качественно, не стоит пренебрегать этой частью процедуры. Без проверки проекта валидатором у вас могут возникнуть проблемы при интерпретации поисковыми системами, что значительно ухудшит возможность посещаемости.

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

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

propartnerka.ru

Создание темы wordpress - программа для создания шаблонов с нуля

Если вы хотите, чтобы ваш сайт wordpress стал перспективным, то для начала вам стоит задуматься о создании уникальной темы для него. Данный процесс является достаточно трудоемким, потому как напрямую связан с различными кодировками и скриптами. Разберем его с нуля.

Почти каждая тема на wordpress устанавливается в директорию wp-content/themes и состоит из 3 категорий файлов:

  1. файлы таблицы стилей;
  2. файлы дополнительного функционала;
  3. файлы шаблона.

Файлами таблицы стилей являются style.css. Они отвечают за цвет, размеры, шрифт и другие параметры элементов сайта. У каждого сайта есть только 1 файл style.css. Если открыть данный файл, то в самом верху можно увидеть информацию о названии, авторе и кратком описании темы. При создании собственной темы можете вписать в style.css информацию о себе.

sozdanie-temy-wordpress-s-nulya-podgotovka-wordpress

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

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

Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.

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

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

  1. Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
  2. Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
  3. Чтобы генерировать главную страницу, используется home.php.
  4. Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
  5. Файл page.php же осуществляет генерацию отдельных страниц сайта.
  6. Для вывода информации об авторе вам понадобится author.php.
  7. За категории отвечает category.php.
  8. Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
  9. Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
  10. Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.

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

Для начала нужно установить подходящий шаблон. Его можно найти как на официальном сайте wordpress.org, так и на каком-либо другом. Рекомендуется использовать официальный сайт, потому как любой сторонний может содержать вредоносные файлы и битые ссылки.

После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел «Темы», выбрать ту, которую загрузили, и кликнуть по кнопке «Активировать».

Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише «Установить», а затем «Активировать». Перед установкой предлагается осуществить предварительный просмотр.

Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.

Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.

После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел «Редактор» и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.

Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота — height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.

При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.

После замены стандартной шапки можно заняться заменой стандартного фона сайта wordpress, виджетов, навигации, нижней части (футера) и других компонентов сайта wordpress. Их тоже можно нарисовать в каком-либо графическом редакторе и загрузить на сайт в виде рисунка.

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

Чтобы создать качественную навигацию с нуля, вам понадобятся небольшие знания о таких тегах, как

<div><a><ul><li>

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

<div><ul><li> <a href="ссылка на страницу">название страницы</a></li></ul></div>

Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки «название страницы». Обратите внимание на то, что каждый тег закрывается с помощью символа «/». Если теги не закрывать, то могут возникнуть сбои в работе сайта.

Виджеты же сайта wordpress не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку «Внешний вид» и кликнуть по полю «Виджеты». Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции «Текст» и ввести туда необходимый код.

В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке «Удалить».

В футере чаще всего отображается ссылка на автора темы и текущий год. Также в футер можно добавить счетчик посещений. Его можно получить абсолютно бесплатно в Liveinternet и других подобных сервисах.

Создание уникальной темы при помощью специальных программ и сервисов с нуля

1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту «XHTML 1.0 Transitional». Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.

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

Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием «Идеи». Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, товам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.

Обратите внимание на опцию «Верхний колонтитул». Она отвечает за отображение шапки сайта. У вас есть возможность использовать стандартную шапку или же загрузить свою. Как сделать уникальную шапку, вы уже знаете.

Для настройки ширины сайта, вам нужно будет использовать опцию «Лист». Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).

Опция «Фон» отвечает за настройку фона, как вы уже догадались. Его можно выбрать среди стандартных вариантов или же загрузить собственный.

Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию «Макет».

Не менее важной опцией является «Статьи». В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.

Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция «Цвета и шрифты».

После проделанных действий вы можете сохранить ваше творение. Для этого нужно кликнуть по палитре, которая находится в верхнем левом углу. Перед вами появится окно. В нем нужно кликнуть «Сохранить как». После этого вам останется лишь выбрать имя файла и место его расположения. Обратите внимание, что файл должен иметь расширение «.artx». При дальнейшей работе с программой для сохранения вам понадобится лишь 1 раз кликнуть «Сохранить».

Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке «Экспорт» и выбрать «Тема WordPress».

2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата «.psd» в тот формат, который будет поддерживаться всеми браузерами.

3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.

4. Аналогом предыдущего сервиса является WordPress Theme Generator. Он также является легким в работе и содержит широкий выбор различных опций. Данный сервис является абсолютно бесплатным. Единственным недостатком является то, что данный сервис поддерживает только английский язык.

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

6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.

7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.

8. Dotemplate предоставить вам около 11 различных шаблонов wordpress, которые можно будет изменить. Единственным недостатком является отсутствие возможности загружать свой графический файл. Поэтому шапку придется загружать самостоятельно через файловый менеджер сайта.

9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.

10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.

Похожие статьи

wordpresslib.ru