Темы (шаблоны) wordpress — установка и содержание тем

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! Возвращаемся к теме создания блогов на платформе WordPress. Мы рассмотрели что такое блог и CMS, установку WordPress и первоначальные настройки. Теперь рассмотрим еще одно действие, которое необходимо сделать практически сразу после установки — выбор темы оформления.

Из чего состоят темы WordPress и как их установить

Почему после установки? А потому что темы всегда разные и сделаны различными способами. В статье я подробней опишу эти способы. Просто если вы остановите свой выбор на одной теме и измените ее для более комфортного использования, установив кнопки социальных медиа и пр., то в дальнейшем, поменяв тему, вы потеряете все настройки.

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

Темы WordPress

Сразу после установки WordPress будет применена стандартная тема. Это или Twenty Eleven или Twenty Ten, уже не помню. Но, скорее всего, вам она придется не по-вкусу и вы захотите ее поменять. Чтобы установить новую тему, нужно перейти в раздел «Установка тем» на той же странице:

Установка тем

Можете перейти на страницы с лучшими и новыми темами и выбрать понравившуюся. Но лучше использовать встроенный фильтр и подобрать вариант «для себя». Темы можно отсеять по преобладающему цвету, размерам и некоторым особенностям. Выберете наиболее комфортную для вас тему. Есть возможность предпросмотра. Выбрав тему, вам нужно ее установить, нажав на соответствующую кнопку.

Основные файлы темы и их значение

Любая тема WordPress состоит из отдельных файлов в формате .php. PHP — язык программирования для динамических сайтов. Немного поясню. Существуют различные зыки программирования. В одной из прошлых статей мы разобрали язык гипертекстовой разметки HTML. Это основной язык всего интернета.

Если коротко, то HTML содержит так называемые теги и атрибуты, которые браузер переводит в «человеческий вид». Браузер выступает в роли переводчика. Любая страничка интернета может быть представлена и сохранена в формате .html или .htm. Хороший браузер сохранит не просто страницу, т.е. гольный код, но и все содержимое (графику, например).

Вот PHP создан для того, чтобы облегчить работу браузеру, пользователю и уменьшить нагрузку на хостинг. Раньше, когда существовал лишь HTML, каждый сайт представлял собой набор html-документов (страниц), каждая из которых писалась вручную веб-мастером. Создать сайт в то время было довольно-таки сложно. Сейчас же благодаря различным CMS создать свой интернет ресурс вы можете за несколько минут (наполнить контентом уже другое дело).

PHP - скриптовый (сценарный) язык, т.е. выполняющий определенные скрипты (сценарии), представляющие из себя ряд действий. Это может быть вызов HTML-кода, какое-либо действие с базой данных и т.д. Все требуемые действия записываются с помощью специального кода (как и в любом другом языке программирования). Чтобы дать понять, где начало и конец кода, его нужно заключить между тегами <?php и ?>...Самого языка я не знаю, поэтому что-либо конкретное дополнить не смогу.

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

  1. Header.php — файл, в котором содержится код «верхушки» сайта. То есть тега декларации до открывающего тега <body>.
  2. Index.php — код главной страницы, все содержимое тега <body>.
  3. Single.php — шаблон страницы записей (именно записей). Напомню, что в Вордпрессе существуют страницы и записи
  4. Page.php — шаблон Страниц. На моем блоге этот шаблон используется на всех страницах верхнего меню.
  5. Sidebar.php — содержимое боковой колонки. Если у вас их несколько, то и файлов будет столько же.
  6. Functions.php — функции темы. В данный файл  можно, например, внести код контекстной рекламы и присвоить ему так называемый shortcode, вследствие чего вы сможете вызывать блоки рекламы, добавь в требуемое место одно слово.
  7. Footer.php — в переводе — «подвал». Нижняя часть вашего сайта.
  8. Comments.php — форма комментариев. Включает в себя как саму область ввода комментария, так и отображение уже существующих.
  9. Archive.php — шаблон записей в категориях. Откройте любую рубрику на данном блоге. Все записи будут отображаться исходя из кода в этом файле.
  10. 404.php — думаю, не сложно догадаться, за что отвечает этот файл. Здесь вы можете настроить страницу ошибки 404 (коды ответов сервера).

Это основной перечень файлов, которые должны быть в теме WordPress. В моей теме еще содержатся файлы формы поиска (search.php), которую я не использую и некоторые шаблоны страниц. Все вышеперечисленные элементы могут иметь другое название. Код каждого файла вызывается с помощью специального кода: <?php get_имя файла без .php (); ?>. Например, <?php get_footer (); ?> вызовет код из файла footer.php.

Помимо php-файлов в папке с темой (или в определенном разделе админки) вы найдете файл таблицы каскадных стилей. Это style.css. Если своими словами, то он отвечает за вид тегов в обработанном виде.  С появлением CSS жизнь веб-мастеров стала намного легче. Но это совсем другая тема, о которой я подробнее расскажу в следующих статьях.

А сейчас представлю вашему вниманию структуру страницы сайта на WordPress:

Структура сайта

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

Порядок обращения к файлам темы WordPress при загрузке страниц

В любом случае, при загрузке страниц порядок обращения к файлам будет немного различаться. Рассмотрим возможные варианты страниц. В каждом пункте  писать название файлов я не буду, т.к. их можно переименовать или они будут называться по-другому (в зависимости от темы). Home, Index, Archive - условные названия функций, которые они выполняют  Т.е. Index — главная страница, Archive — архивы (просто в большинстве случаев файлы носят эти названия).

  • Главная страница.  Если у вас в папке с темой есть определенный файл, отвечающий за главную страницу (например home.php), то будет использоваться он. Если же таких не имеется, то будет использоваться Index.
    • Home
    • Index
  • Статичная страница. За нее отвечает файл Page.php. Однако, в Вордпресс есть функция присвоения какой-либо странице отдельного шаблона. Например, если вы хотите, чтобы на странице с результатами поиска не отображался сайдбар, то создайте свой php-файл, в котором не будет строки, отвечающей за вывод сайдбара. Присвоить свой шаблон вы можете в разделе «Страницы». Если же нет ни вашего файла, ни page.php, то будет использоваться шаблон главной страницы.
    • Шаблон, созданный вами, для статичной страницы
    • Page
    • Index
  • Страница записи. В отличии от предыдущего пункта, присвоить каким-либо записям отдельный шаблон нельзя, поэтому будет использоваться Single. Если же он отсутствует, будет применен шаблон главной страницы.
    • Single
    • Index
  • Категории (рубрики). Для рубрик можно использовать отдельно созданные файлы категорий с прописанными идентификаторами записей. Они будет иметь примерно такой вид: Category-17. Затем идет Category, а после — Archive. У меня на блоге нет файла категорий, поэтому всю настройку рубрик я провожу во втором файле.
    • Выбранный вами шаблон
    • Category
    • Archive
    • Index
  • Записи одного автора. Если только вы ведете свой блог, то данный файл вам просто не нужен. Однако, сортировка записей по авторству присутствует на многих ресурсах. Порядок будет таким:
    • Author
    • Archive
    • Index
  • Записи по датам. В любой записи или странице вы можете указать дату ее появления на блоге. Тогда будет доступна возможность сортировки записей (страниц) по дате, а WordPress будет искать шаблона Date. Порядок:
    • Date
    • Archive
    • Index
  • Метки (теги). Если вы заполняете поле метки (или теги) при написании статьи, то будет доступна страница записей по меткам. Также можно использовать тка называемое облако тегов. Им можно задать отдельный шаблон.
    • Созданный шаблон
    • Tag
    • Archive
    • Index
  • Страница ошибки 404. Как часто вы замечали, что при переходе по какой-либо ссылке на внутреннюю страницу, в браузере открывалась главная? Это значит, что шаблон страницы 404 ошибки отсутствует. Вот такой порядок, состоящий всего из двух обращений:
    • 404
    • Index
  • Поиск по сайту. В файлах темы обычно находятся два поисковых элемента: форма поиска и результаты. Если же шаблона страницы результатов у вас нет, то вместо них вы увидите главную страницу.
    • Search (запрос и результаты)
    • Index

Как видите, при отсутствии каких-либо файлов  вы увидите главную страницу. Но это только в том случае, если страница, на которую вы хотите попасть, действительно существует. Я имею ввиду вводимый адрес. Если же нет, то вы попадете на страницу ошибки 404. Хотя и оттуда вы попадете на главную, если у вас нет файла 404 страницы .

Как правильно скачать и установить темы WordPress

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

Но существуют качественные ресурсы, откуда вы можете скачать темы, не опасаясь за их содержимое. Если же вы хотите действительно качественную темы, то лучше ее купить.  Стоят они порядка 2 тысяч рублей, в зависимости от их внешнего вида и структуры.

Если вы все же решили скачать тему с бесплатного ресурса, то нужно помнить 3 главных правила.

  1. Изучите ресурс, на котором нашли подходящую тему. Думаю, можно потратить побольше времени, т.к. выбранная тема оформления вашего сайта останется на долго (хотя бы на несколько месяцев). Почитайте отзывы о сайте, лучше на сторонних ресурсах. Оцените сам сайт — вряд ли качественные темы можно скачать на некачественном сайте (кстати, прочитайте про отличия ГС и СДЛ).
  2. Как только скачали тему, проверьте ее на вирусы. Звучит может немного глупо, но лишняя осторожность не помешает.Вероятнее всего, вы скачаете архив. Проверьте его на наличие файлов, которые темой не предусмотрены. Например, другого формата.
  3. Проверьте сам код файлов темы, особенно подвал и шапку. Во-первых там может быть вредоносный код (скрипты, левые ссылки). А во-вторых, есть люди, которые наращивают ссылочную массу за счет проставления ссылки на свой ресурс в подвали. В основном они имеют вид «Сделано студией такой-то» и ссылка. А если попытаться убрать ее, то сайт может быть заблокирован. Проверьте и этот факт.

Установить тему не составит никакого труда. Ниже я представлю два варианта установки.

  • Первый способ. Вы скачали тему в архиве. Перейдите в панели администратора WordPress в раздел «Установка тем» В верхней строке выбираете «Загрузить», затем ищите и загружаете архив с темой. После окончания загрузки. Вот и весь процесс.
  • Второй способ. Подключаетесь к вашему сайту через FTP-клиент. Идете примерно по такому пути: Public_html->wp-content->themes. Это папка со всеми установленными темами. Создаете новую папку с названием вашей и копируете все содержимое из архива в созданную папку. Затем переходите в админ-панель, раздел «Темы», и устанавливаете тему (называться она будет либо по-своему, либо как папка, в которой находится)

Теперь вы можете начать настройку темы, предварительно сделав первоначальные настройки WordPress (если вы еще их не сделали). Под словом «Настройка» я имею ввиду изменять тему «под себя», т.е. внешний вид переделывать как вам хочется. А на этом все. До скорых встреч на страницах блога MonetavInternete.ru!

Всего комментариев: 3 Комментировать

  1. Stanleyei /

    Теперь рассмотрим еще одно действие, которое необходимо сделать практически сразу после установки выбор темы оформления.

    Для релакса головного мозга рекомендую: красивые прикольные картинки дня на своём блоге

  2. Роман /

    Здравствуйте.Подскажите как сделать чтобы на главной странице в анонсе отображалась картинка с текстом, но чтобы один кусочек текста был выше картинки, а другой кусочек текста ниже картинки)).Так как у вас сделано на главной. Спасибо.

    1. Andrey / Автор записи

      Здравствуйте. Просто напишите материал в формате «текст-картинка-текст-ссылка на полную статью-текст». То есть тег more ставится после второго абзаца.

Оставить ответ