После того, как Вы купили домен и заказали хостинг, самое время произвести настройки wordpress. Блог нельзя использовать в том виде, в котором он сейчас находится. Нужно правильно настроить постоянные ссылки, выбрать и установить тему (дизайн), подключить все необходимые плагины.
Все эти настройки нужны для того, чтобы у блога был опрятный вид как для будущих посетителей, так и для поисковых роботов. Что положительно повлияет на дальнейшее поисковое продвижение.
Также нужно разобраться в меню консоли. Консоль еще называют “админкой”. Вы могли заметить, что в админке достаточно много дополнительных настроек.
Чтобы попасть в админку блога, нужно зайти по адресу site.ru/wp-admin/. Вместо site.ru подставьте название своего домена.
На главной странице находятся основная информация по всему блогу. С этой страницы можно добавить статью, произвести базовые настройки темы или увидеть последние комментарии сделанные к записи.
В обновлениях можно посмотреть текущую версию WordPress, а также не требует ли он новых обновлений. Как только разработчики выпустят обновление, Вы это увидите в своей админке.
Не забывайте обновляться, если Вас просят об этом. Это защитит Вас от попыток взлома злоумышленниками.
В этом меню можно увидеть все записи сделанные за все время. Также можно посмотреть сколько комментариев набрала каждая статья и к какой рубрике она относится.
Наведите курсор мышки на статью и появится подменю с помощью которого можно редактировать, перейти или удалить статью.
Если Вы после установки WordPress ничего не меняли, то у Вас уже будет первая тестовая запись. Наведите на нее и удалите. Если Вы по ошибке удалили запись, ее всегда можно восстановить из корзины. Если записи больше не нужны, то не забывайте очищать корзину.
Прежде чем начать публиковать статьи в блог, нужно сделать несколько очень важных настроек. Сделайте их в пункте 8.1 и 11.3. После того, как Вы настроите постоянные ссылки или как их еще называют (ЧПУ), можете приступать к публикации статей.
Вверху пишется заголовок. Он должен быть не слишком длинным и не слишком коротким. После того, как введете заголовок под ним, появится постоянная ссылка. У нее будет такой вид, если Вы поставите специальный плагин, который находится в пункте 8.1.
Ниже перед Вами будут инструменты, с помощью которых можно оформлять текст, добавлять картинки и ставить активные ссылки. Если Вы знакомы с программой Word, то проблем с этим не будет.
Если Вы впервые сталкиваетесь с таким редактором, то посмотрите видео-уроки на YouTube о том, как добавить статью на блог WordPress. После того, как статья добавлена и отформатирована, выберите или создайте для нее рубрику. Одна статья в одну рубрику, запомните это!
Загрузите миниатюру, это небольшая картинка к Вашей статье. Такие картинки поддерживают большинство тем. После того, как все готово нажмите на “Опубликовать”. Теперь перейдите на главную страницу своего блога и посмотрите, как выглядит Ваша запись.
При добавлении фотографий старайтесь всегда прописывать атрибут “Alt”. Если Вы используете свои фотографии, то это позволит Вам привлечь трафик из поисковых систем из раздела “картинки”.
Достаточно 2-3 слов о том, что изображено на самой картинке. Если не знаете что писать, лучше ничего не пишите.
Фото можно выровнять по центру или по краю. Если у Вас большая картинка и Вы хотите, чтобы при ее нажатии она открывалась в полном размере, то выберите “ссылка на медиафайл”. Если нужно перенаправить на другой сайт, то используйте произвольный url.
В настройка размер Вы можете задать тот размер, который Вы хотите. Помните, что ширина самого блога редко превышает 1000 пикселей в ширину. Рекомендую ставить полный.
Следите за тем, чтобы все Ваши фотографии перед загрузкой на блог имели название латинскими буквами например, moy-dom.jpg.
Это меню предназначено для создания рубрик. Например, у Вас блог по кулинарным рецептам. Рубрики могут быть такие:
В название напишите свою рубрику. В ярлык напишите название этой же рубрики, но только латинскими буквами. Можно прописывать и кириллицей, но рекомендую сделать, как на примере.
У рубрик могут быть подрубрики. Например в “Салаты” могут входить такие подрубрики: “Салаты с курицей”, “Простые салаты”, “Рецепты салатов на зиму” итд. Подрубрики можно создать в меню “Родительская”.
Напишите 2-3 предложения описывающую вашу рубрику. Изложите самую суть. Обязательно сделайте его уникальным. Это значит, что Вы должны сами придумать это описание, а не скопировать его. Как только все поля будут заполнены, можно нажать на кнопку “Добавить новую рубрику”.
Метки нужны, чтобы сделать большой сайт более удобным для пользователя. Если Вы не планируете создавать большой портал с множеством рубрик и подрубрик, то метки лучше не использовать.
В этом разделе Вы найдете все фото, которые когда-либо были загружены на блог. Также Вы можете добавить новую фотографию в свою библиотеку. Это меню нам практически не понадобится, так как добавить фото к своей статье можно и в разделе 3.1.
Не путать этот раздел с записями! Такие страницы нужны в основном для информации. Например, у меня на блоге есть отдельные страницы об авторе и о блоге. Вы можете создать страницу с контактами своей организации или любую другую информацию.
Сейчас у Вас есть тестовая страница. Посмотрите ее, попробуйте отредактировать и затем удалите.
В этом разделе Вы увидите все созданные страницы. Если нужно создать новую, то просто перейдите в меню “Добавить новую” и воспользуйтесь редактором, как в меню 3.1.
Тут Вы сможете видеть все комментарии сделанные вашими пользователями. Комментарии можно запрещать, одобрять и редактировать.
По умолчанию WordPress предоставляет 3 темы. По дизайну они так себе и редко кто пользуется ими. Все три темы Вы можете видеть в этом меню. На просторах интернета есть большое количество сайтов, которые предлагают скачать бесплатные шаблоны.
Я же рекомендую ставить темы из официального магазина WordPress. Во-первых, они бесплатные, а во-вторых на них нет вредоносного кода или вируса. Чтобы установить новый шаблон, достаточно нажать на “Добавить новую тему”.
Вы попадете в раздел, где можете выбрать ту тему, которая Вам нравится. Наведите курсор на любой шаблон и посмотрите, как он будет выглядеть. Можете выбрать тему, задав фильтр характеристик, которые Вам нужны. После того, как выбор будет сделан, нажмите на установить и активировать.
Не бойтесь ставить разные темы. Очень сложно с первого раза найти ту, которая будет нравиться. Все лишние темы Вы всегда можете удалить в любой момент.
У бесплатных шаблонов есть и минусы. Они плохо оптимизированы под поисковые системы.
Или можно сразу же купить для своего проекта недорогой шаблон, который избавит от всех технических ошибок. Устанавливаете тему, настраиваете один раз под себя и пользуетесь.
Если возникнут вопросы по настройке темы, то вам всегда поможет русскоязычная служба поддержки бесплатно. Рекомендую сделать выбор из этих трех шаблонов.
Также в этом разделе Вы всегда можете сменить пароль и email.
Этот раздел можно смело пропустить, здесь пока нет ничего интересного. При добавлении новых плагинов, некоторые из них будут находиться именно здесь.
Самое важное меню почему-то находится в самом конце. Прежде чем начать публиковать статьи и создавать новые страницы, нужно произвести настройки.
Напишите название своего сайта. Описание должно быть короткое и понятное. Оно должно содержать всю суть Вашей ниши. Краткое описание можно пропустить. Если есть что написать, то заполните. Можно написать какой-нибудь слоган.
Адрес WordPress и адрес сайта. Тут Вы можете указать то, как будет отображаться Ваш блог. Например, с www или без. https или http. Это очень важный параметр, заполните его обязательно.
Если Вы регистрировали домен и хостинг по моему , то у Вас должен быть сертификат защищенного протокола https. Значит — настройки ставьте, как на картинке. Выберите формат даты и времени тот, который Вам нужен. Меню “написание” пропускаем.
В этом разделе можно настроить свой черный список. Если Вы видите, что Вам кто-то оставляет спам-комментарии, то Вы можете занести его в черный список. Достаточно добавить IP адрес, который можно увидеть в комментариях или составить свой список стоп-слов.
Например, если добавить слова: www, http://, скачать, бесплатно, то такие комментарии не пройдут автоматическую модерацию. Настройки медиафайлов можно смело пропустить.
Одна из самых важных настроек WordPress находится именно здесь. Это настройка постоянных ссылок. Поставьте галочку на “Произвольно” и вставьте туда вот такой шаблон:
/%category%/%postname%.html
Чтобы узнать сколько человек посещают блог, на него нужно установить специальный счетчик. Этот счетчик будет показывать подробную информацию о пользователе. Рекомендую установить Яндекс Метрику .
Если у Вас еще нет почты от Яндекса, то зарегистрируйте ее прямо сейчас, это займет несколько минут.
После того как Вы попали внутрь, нажмите на “Добавить счетчик”.
Далее заполните: имя счетчика и адрес сайта, поставьте галочку “я принимаю условие”, создать счетчик. Поставьте галочку на вебвизор и нажмите сохранить. Ниже Вы увидите код счетчика, который нужно установить.
Скопируйте его и перейдите в админку своего блога, как показано на картинке ниже.
Найдите в правой колонке и нажмите на “Заголовок (header.php)”. Вставьте скопированный код в свободное место. Лучше это сделать, где заканчивается .
Нажмите обновить файл. Вернитесь в список счетчиков, нажав на “Счетчики”.
Через несколько минут счетчик обновится и загорится зеленым. Если этого не произошло, выйдете из аккаунта и зайдите заново.
Готово! Через какое-то время счетчик будет фиксировать всех посетителей на Вашем блоге. Нажмите на название и Вы попадете в основное меню.
Если Вы хотите разобраться со всеми возможностями этого инструмента, то обратитесь к руководству .
Если Вы не знаете, что такое robots.txt и для чего он нужен, то можете почитать в справке Яндекса. Чтобы не мучиться и не составлять его самостоятельно, Вы можете просто его скачать .
Не забудьте исправить в файле свой сайт заменив site.ru и site.ru/sitemap.xml на свой. Также пропишите http или https. Теперь его нужно закачать к себе на сервер в корневую папку, где установлен Ваш блог.
Если вы пользуетесь хостингом «Бегет» , который я рекомендую, то загрузить этот файл вы можете следующим образом. Зайдите в хостинг и нажмите «Файловый менеджер».
Найдите папку с вашим сайтом и зайдите в нее нажав 2 раза. Вы должны увидеть вот это:
Зайдите в эту папку нажав 2 раза. Теперь вы попали в корневую папку своего сайта. Теперь нажмите «Загрузить файлы» и «Browse…»
Выберите файл и нажмите на кнопку «Загрузка». Файл загружен на сайт.
Теперь можете проверить. Введите в поисковой строке такой запрос: https://site.ru/robots.txt в место site.ru подставьте свой сайт. Также учтите значение https или http.
Заказать хостинг и купить домен >>>
Теперь Ваш блог полностью настроен и готов к работе. Начните наполнять его качественными статьями для людей. Начните потихоньку разбираться в SEO (поисковая оптимизация).
Как только Ваш блог достигнет посещаемости в 500 человек в сутки, то купите уникальную тему. Если у Вас остались вопросы, то обязательно задавайте их в комментариях ниже.
С уважением, Сергей Смирнов.
Темы WordPress состоят из файлов и стилей, которые вместе определяют внешний вид сайта. Они могут сильно отличаться между собой, позволяя пользователям быстро изменить дизайн веб-сайта. Но зачем вам может понадобиться своя тема?
Тема WordPress также предоставляет некоторые преимущества.
Но зачем вам создавать свою собственную тему? Вот в чём главный вопрос.
При написании кода тем WordPress, придерживайтесь следующих стандартов:
Темы WordPress находятся в поддиректориях wp-content/themes/ . Директория темы содержит таблицы стилей, файл дополнительного функционала (functions.php) и картинки. К примеру, тема под названием "test" вероятно будет расположена в директории wp-content/themes/test/ .
По умолчанию WordPress содержит три темы, созданные командой разработчиков Wordpress: "Twenty Fifteen", "Twenty Sixteen" и "Twenty Seventeen". Эти темы отличаются между собой и используют различные функции и теги для создания внешнего вида и страниц сайта. Внимательно изучите составляющие их файлы, чтобы лучше понять, как создать свою собственную тему.
Тема WordPress состоит из трёх основных типов файлов, в дополнение к изображениям. Первый - это таблица стилей под именем style.css , которая контролирует внешний вид страниц сайта. Второй предоставляет собой файл дополнительного функционала (functions.php). Остальные файлы - это файлы шаблонов , которые определяют, каким образом выводится информация из базы данных на веб-страницу. Давайте рассмотрим каждый тип по отдельности.
Помимо собственно таблицы стилей вашей темы, файл style.css обязательно должен содержать информацию о вашей теме в виде комментариев. Каждая тема должна иметь свою собственную уникальную информацию в комментариях заголовка, в обратном случае возникнут проблемы в . Создавая новую тему на основе уже существующей, в первую очередь измените комментарии заголовка.
Ниже приведен шаблон заголовка таблицы стилей (style sheet header) вашей темы Rose . Он должен находится в начале файла стилей style.css , в первых строках:
/* Theme Name: Rose Theme URI: домашняя-страница-темы Description: краткое-описание-темы Author: ваше-имя Author URI: ваш-URI Template: напишите-здесь-наименование-родительской-темы--необязательное-поле Version: номер-версии--необязательное-поле. Развёрнутое описание темы/Лицензия-если-нужно. . */
Простейшая тема включает в себя только файл style.css плюс изображения, если они необходимы. Для создания такой темы необходимо в строке заголовка Template: указать имя родительской темы. Например, если ваша тема "Rose" происходит (наследует) от темы "test", напишите в заголовке style.css следующую строку:
Template: test
После добавления такой строки в заголовок style.css все шаблоны темы "test" будут наследоваться вашей темой "Rose", в которой ничего нет, кроме файла с таблицей стилей style.css , и возможно, рисунков. Эти файлы необходимо поместить в каталог wp-content/themes/Rose .
Начиная с WordPress 2.7 тема-потомок может содержать файлы-шаблоны, имена которых совпадают с именами шаблонов в родительской теме, в админ-панели можно выбрать эти шаблоны для использования, и они будут использоваться вместо родительских.
Комментарии в заголовке style.css нужны WordPress для идентификации темы и отображения её в подменю > в качестве установленной темы, вместе с другими установленными темами.
Примечание : Когда вы определяете родительскую тему, в строке комментариев Template: , вы должны использовать имя каталога темы. Например, для использования темы "Default Wordpress Theme", не пишите
Template: WordPress Default
а пишите
Template: default
поскольку "default" - это имя каталога родительской темы.
Тема может дополнительно использовать файл с необходимыми функциями для работы темы, он должен располагаться в каталоге темы и называться functions.php . Этот файл в основном работает подобно плагину, и если он присутствует в каталоге темы, которую вы используете, то он автоматически загружается во время инициализации WordPress. Это верно как для страниц админки, так и для остальных (внешних к админке) страниц. Предлагается следующее использование для этого файла:
Темы, поставляемые с WordPress и установленные из коробки, имеют файл functions.php , который определяет ряд функций и настроек в админке темы, поэтому вы можете использовать его в качестве модели. Файл functions.php в основном работает как плагин, раздел Кодекса - лучшее место, где можно получить более подробную информацию о том, как вы можете использовать этот файл.
WordPress позволяет программисту использовать различные варианты для подключения шаблонов из набора : во-первых, с использованием иерархии шаблонов , во-вторых - с использованием условных тегов внутри цикла обработки файлов шаблона.
В первом случае, при использовании иерархии шаблонов , необходимо создать специальные файлы шаблонов, которые будут автоматически использоваться в необходимый момент для создания страницы вместо базового шаблона index.php . Например, если ваша тема содержит шаблон под названием category.php и пришёл запрос на страницу с категорией, шаблон category.php будет загружен вместо шаблона index.php . Если файл category.php в теме отсутствует, будет загружен шаблон index.php , как обычно.
Вы можете определить шаблон для конкретной категории, например, добавив в тему файл шаблона category-6.php . Файл будет использован вместо index.php в том случае, когда ID категории будет равен 6. Чтобы узнать ID категории, зайдите в > , если у вас есть доступ администратора в WordPress version 2.3 или ниже.
Начиная с WordPress 2.5 столбец ID был удалён из панели администратора. Вы можете определить ID категории, кликнув "Edit Category" и посмотрев в URL-е значение cat_ID. Например, конец URL:
"...categories.php?action=edit&cat_ID=3"
где "3" - и есть ID текущей категории. Более детально этот процесс рассмотрен в
Если ваша тема должна уметь еще более подробно управлять шаблоном отображения, чем тот уровень контроля, который обеспечивает иерархия шаблонов , вы можете использовать условные теги . Условные теги в основном проверяют, если какое-либо особое состояние верно во время исполнения , в таком случае вы можете загрузить определенный шаблон или отобразить некоторые варианты текста на странице в соответствии с этим состоянием.
Например, для создания различных стилей, в зависимости от номера категории, код может выглядеть следующим образом:
Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:
post; if ($post->in_category("9")) { include(TEMPLATEPATH . "/single2.php"); } else { include(TEMPLATEPATH . "/single1.php"); } ?>
В любом случае, оба примера кода будут вызывать различные шаблоны, в зависимости от ID категории. Условные теги не ограничиваются категориями, см. статью , в ней рассмотрены все возможные варианты.
Wordpress использует иконки типов файлов () в вашем блоге и в интерфейсе Админ-панели, если эти иконки существуют в указанном месте.
Wordpress ищет эти файлы в каталоге images текущей темы. (А в Wordpress 2.2, тема по умолчанию имеет только одну иконку, audio.jpg .)
Например, для отрисовки иконки типа MIME type audio/mpeg , Wordpress будет искать файл иконки в указанном каталоге images текущей темы, он выбирает первый подходящий файл (см. описание функции ):
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Конечно, ваша тема может содержать и другие файлы стилей, изображений или программ. Просто имейте в виду, что приведеные ниже имена файлов имеют особое значение для WordPress - см. шаблон иерархии для получения дополнительной информации.
Style.css Главный файл таблицы стилей. Файл должен быть в теме обязательно и обязательно должен содержать описанные выше комментарии в заголовке файла. index.php Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен. comments.php Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию. comments-popup.php Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию. home.php Шаблон главной страницы блога. single.php Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php , если в вашей теме нет соответствующего файла шаблона. page.php Шаблон отдельной страницы, используется для отображения запрошенной страницы . category.php Шаблон категории . Используется при запросе категории. author.php Шаблон автора блога . Используется при запросе автора блога. date.php Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда. archive.php Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php , author.php и date.php для соответствующих типов запросов. search.php Шаблон результатов поиска. Используется после выполнения поиска. 404.php Шаблон для сообщения об ошибке . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.
Эти файлы имеют специальное значение в WordPress, поскольку они используются для замены index.php , когда они есть в каталоге темы, в соответствии с иерархией шаблонов , и когда поступил соответствующий запрос; или же в соответствии с истинностью условных тегов , когда функция типа is_*(); возвращает "true".
Например, если требуется отобразить единственный пост, функция возвращает "true", и в каталоге активной темы есть файл шаблона single.php , этот шаблон используется для создания страницы.
Тема WordPress по умолчанию представляет собой хороший пример техники (впервые описанной Майклом Хелманном (Michael Heilemann) в Kubrick в макете для WordPress 1.2), как запросы отображаются в шаблонах.
Следующий код вставляет URL шаблона в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы из вашей темы.
Следующий код добавляет URL каталога, который содержит файлы стилей.css вашей темы, в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы вашей темы, особенно те, которые необходимы для таблиц стилей (чтобы этого избежать, используйте это вместо ).
Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа "/" в конце).
Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога. Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:
H1 { background-image: URL(images/my_background.jpg); }
Это хороший вариант использовать способ, описанный выше, для ссылки на файлы. В этом случае вам не понадобятся абсолютные пути в ваших шаблонах.
Для добавления своих собственных типов шаблонов, которые используются в определённых вами случаях, можно использовать систему плагинов WordPress. Это необходимо, если вы хотите сделать, например, различную вёрстку для различных случаев или свой шаблон комментариев и т.д. Это расширение возможностей WordPress можно достичь при помощи перехвата события template_redirect , см. . Более подробную информацию о создании плагинов можно найти по ссылке .
При разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить. Плагины расширяют функциональные возможности WordPress с помощью перехвата событий ("Action Hooks", см. для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов:
Wp_head Происходит при отображении кода элемента
в шаблоне header.php . Пример использования в плагине: добавление кода javascript. Использование: -или- wp_footer Происходит при отображении заголовка (верхнего колонтитула) "footer" темы в шаблоне footer.php . Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице. Использование: -или- wp_meta Событие обычно происходит при обработке тегаДля реального примера, вы можете найти эти вызовы событий для плагинов в соответствующих шаблонах темы по умолчанию.
Пожалуйста, четко представьте себе и опишите в вашей документации на тему (файл README, включенный в вашу тему, поможет многим пользователям обойти любые потенциальные камни преткновения):
Полный список ресурсов, касающихся тем и шаблонов доступен в статье .
Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
Этой статьей я продолжаю серию уроков о создании сайтов на движке WordPress. После установки новой темы на блог, нам надо будет настроить ее под свои нужды. Это сделать совсем не сложно. А вот для редактирования шаблона WordPress , нужно, как минимум, знать, как он устроен и какие его файлы за что отвечают. Изучив структуру шаблона WordPress и имея базовые знания HTML и CSS, Вы уже сможете редактировать шаблон темы, изменяя ее внешний вид и функциональность. Но обо всем по порядку.
Сразу после установки новой темы, вряд ли Ваш блог будет иметь привлекательный вид. Чтобы это исправить, надо настроить тему WordPress, добавив и упорядочив на страницах блога все необходимые элементы. Итак, приступим к настройке шаблона темы WordPress .
Войдем в Панель инструментов () WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн “, который отвечает за внешний вид и редактирование шаблона WordPress:
Следующая вкладка “Виджеты “. При переходе на нее перед нами откроется такая картина:
В левой части мы видим все “Доступные виджеты “: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно.
Для того чтобы заполнить сайдбар необходимыми нам виджетами, надо просто выделить требуемый виджет левой кнопкой мыши и, удерживая ее, перетащить виджет на нужный нам сайдбар. Таким же образом можно перемещать виджеты вверх или вниз в самом сайдбаре.
Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст “. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст “, нажмите кнопку “Сохранить “, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить ” или перетащив их обратно в раздел “Доступные виджеты “. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты “. В любой момент Вы сможете вернуть его обратно.
Далее идет вкладка “Меню “. Открыв ее, мы попадаем на страницу создания собственного меню блога с подробным описанием, как это сделать. В меню можно включить рубрики, страницы и произвольные ссылки расположив их в требуемом порядке простым перетаскиванием. Нажав кнопку “Сохранить меню “, меню блога будет создано.
Чтобы созданное меню появилось в сайдбаре, надо перейти на вкладку “Виджеты ” и перетащить виджет “Собственное меню ” в сайдбар. Соответственно, если у Вас на блоге были активированы виджеты “Рубрики ” и “Страницы “, то их можно будет деактивировать. Надо сказать, что мало кто использует меню на блоге.
Последняя вкладка “Редактор ” позволяет редактировать файлы шаблона WordPress. Открыв ее, справа Вы увидите список всех файлов шаблона WordPress, то есть его структуру. При нажатии на любом из этих файлов, его содержимое откроется в окне для редактирования. После внесения необходимых изменений не забудьте подтвердить их, нажав кнопку “Обновить файл “.
Итак, мы изучили раздел “Дизайн ” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress.
Стоит отметить, что почти каждая современная тема имеет свои собственные настройки. Обычно они вынесены в админ.панель отдельным разделом с названием темы.
Иногда индивидуальные настройки шаблона темы WordPress находятся в виде отдельных пунктов в разделе “Дизайн “.
Как настроить ту или иную тему должно быть подробно описано на сайте разработчика или локализатора шаблона, с которого Вы ее скачали. Индивидуальные настройки темы WordPress позволяют с легкостью, не вмешиваясь в исходный код шаблона, изменять элементы дизайна сайта (логотип, фон, шрифты, расположение сайдбаров и др.), вставлять банеры, кнопки социальных сетей и RSS, счетчики статистики, рекламные блоки и многое другое. Советую внимательно изучить эти настройки, особенно если Вы плохо знакомы с HTML и CSS.
Внимание! Важно знать, что если Вы делали изменения в индивидуальных настройках шаблона, то при установке новой темы, эти настройки надо вернуть в исходное состояние. Обычно для этих целей существуют кнопки “Сбросить ” или “Восстановить по умолчанию “, в зависимости от выбранной Вами темы WordPress.
А теперь давайте посмотрим, из каких файлов состоит шаблон темы, изучим его структуру.
Каждый из файлов шаблона WordPress отвечает за оформление отдельных блоков на веб-странице сайта. Потом, подобно конструктору, из этих блоков собираются в единое целое страницы блога. Так как темы (шаблоны) WordPress создают разные разработчики, то и структура этих шаблонов может быть различной. Некоторые файлы шаблона темы в обязательном порядке присутствуют на каждой веб-странице, другие выводятся только в определенных случаях.
На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress.
Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание:
Теперь, зная структуру шаблона WordPress и за что отвечает каждый из его файлов, можно изменять внешний вид и функциональность определенной части сайта.
Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS , лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл.
От себя замечу, что редактировать шаблон WordPress удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “ “.
А на сегодня все. Теперь созданный Вами сайт будет выглядеть гораздо привлекательнее. До встречи на страницах блога .
Оставляйте свои комментарии и не забывайте нажимать на кнопки соц.сетей внизу статьи, тем самым Вы поможете развитию этого блога. Заранее спасибо!
