Установка и редактирование темы (шаблона) WordPress

Logo
Установка и редактирование темы (шаблона) Wordpress

В этой статье я буду приводить базовые понятия устройства тем (шаблонов) WordPress, буду пошагово рассказывать, как установить тему (шаблон) WordPress, как ее редактировать и какие файлы нужно править. Также познакомимся с общими принципами создания тем, как они устроены и функционируют. Если у вас есть хоть какие-то познания в HTML и CSS, то после прочтения этой статьи вы без труда сможете разобраться с файлами темы и внести нужные вам поправки в дизайн и функционал сайта. Кроме этого, это даст вам возможность оптимизировать свой сайт («Оптимизация блога WordPress для снижения нагрузки на сервер», «Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess») и уменьшить количество разнообразных плагинов, реализовав их функции самостоятельно. Опять же для этого нужны хоть какие-то познания в программировании.

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

Установка новой темы в WordPress происходит очень просто. Первым делом вам нужно скачать новую тему и распаковать архив. Внутри архива будет находится папка с файлами темы (шаблона) WordPress. Их, вместе с папкой, нужно скопировать к себе на сайт в папку «themes», которая находится по адресу: http://mysite.com/wp-content/themes/. Для активации новой темы (шаблона) зайдите в Административную панель – Внешний вид – Темы. После того, как вы скопировали папку с файлами новой темы, она появится у вас в списке доступных тем для блога и ее можно будет активировать, нажав по ссылке «Активировать».

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

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

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

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

Итак, давайте рассмотрим с каких основных частей состоит обычная среднестатистическая тема WordPress.

Как видите с изображения, темы обычно состоят со следующих файлов:

  • Header.php – отвечает за создания шапки сайта. С помощью него формируется верхняя часть сайта (шапка сайта) в которой зачастую находится логотип и меню.
  • Sidebar.php – этот файл отвечает за формирование сайдбара, который находится слева или справа от контента. В нем зачастую выводят категории блога, последние заметки, рекламу и многое другое.
  • Footer.php – этот файл отвечает за формирование футера (подвала) сайта. Он завершает формирование страницы и с его помощью выводят информации внизу сайта. Обычно здесь выводится копирайт, статистика посещаемости и т.п.
  • Index.php – главный документ темы, который отвечает за вывод контента. Этот файл обычно отвечает только за вывод информации на главной странице, но в некоторых случаях может также выводить заметки и т.д., но такое бывает редко.
  • Page.php – этот файл отвечает за вывод статических страниц таких как «Контакты», «Об авторе» и т.д.
  • Single.php – благодаря этому файлу выводятся отдельные заметки на блоге. Ему нужно уделить особое внимание, так как именно он является самым популярным и занимается выводом всех записей (статей) блога. Именно в него нужно добавлять разные примочки, такие как кнопки социальных сетей и т.п. Более подробно о создании кнопок социальных сетей для блога вы можете прочитать в статье «Создаем кнопки социальных сетей и закладок для сайта на WordPress при помощи карт изображений (image map)». В этой же статье можете взять уже готовый код кнопок и картинку, что позволит без труда установить кнопки социальных сетей к себе на сайт.
  • Archive.php – главная задача этого файла это вывод содержимого категорий. Также занимается выводом архивов записей с определенными метками, архивов блога и т.д.
  • Search.php – отвечает за вывод результатов поиска. При необходимости тоже можно немного подкрутить и добавить что-то.
  • Author.php – выводит список заметок одного автора, которого вы выберете. Лично я не использую эту функцию, так как блог веду я один. Но если на вашем сайте несколько авторов, то вы можете оставить данную функцию.
  • 404 – страница ошибок. Данную страницу тоже не мешало бы немного настроить. У меня, например, выводится сообщение, что страница не найдена и предлагается перейти в любую категорию либо воспользоваться поиском по блогу. Вы же можете написать что-то свое. Это зависит от вашей фантазии.
  • Style.css – этот файл я бы назвал сердцем всей темы (шаблона) WordPress, так как именно он отвечает за внешний вид вашего сайта (Каскадные таблицы стилей CSS — Часть 1 — Необходимый минимум знаний для работы с CSS). С его помощью можно, наверное, в 90% случаев решить проблемы с внешним видом сайта.

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

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

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 16

  • Руслан

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

  • Дмитрий

    Привет. Для этого нужно править шаблон и переписывать таблицу стилей. Попробуйте использовать минимальную и максимальную ширину для блоков. То есть, min-width и max-width. Лично я никогда не делаю резиновые шаблоны, поэтому в полной мере раскрыть данный вопрос не могу.

  • Ольга

    Здравствуйте Дмитрий!

    А я вот просто хотела шаблон обновить — старый не нравился! И как последний лох взяла и перед тем как скопировать архив новой темы ( с помощью filezillы) в папочку public_html/wp-content/themes — взяла и удалила папочку с предыдущей рабочей темой (прям бес попуталась , одним махом все удалилось!) Ааааа))) вот сижу пялюсь теперь в серый экранчик — туда где только что был сайт мой!((( ну и что? это всё — хана??? можно что то сделать??? заранее спасибо!!!

  • Дмитрий

    Здравствуйте, Ольга! Ничего страшного. Скопируйте в папку themes новую тему оформления, зайдите в административную панель и активируйте ее. После этого все начнет работать нормально.

  • Ольга

    Доброе утро!! Большое спасибо за ответ! Но у меня как раз с этим и проблема — я скопировала архир новой темы в папку Themes — но в Админпанель зайти не могу — т к на сайте ничего нет — просто серый экран и больше ничего, совсем ничего, так что активировать оттуда я не могу(((

  • Дмитрий

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

  • Ольга

    Добрый день, Дмитрий! Помогите пожалуйста еще раз) Сайт отремонтировала, оказывается была повреждена новая тема, так что все переустановила, все работает, и виджеты и пр. Столкнулась с такой вот проблемой. не могу изменить логотип. Нарисовала новый логотип в Гимпе, сохранила как png, загрузила на сайт в Загрузки и в Настройках темы в строке Изображение логотипа вставила путь к файлу. Ничего не получается. Вместо логотипа крестик. Через папку Image в теме тоже не получается. не знаю что и делать — в прошлый раз вставляла аналогичным способом и все получалось. Что не так??? Спасибо заранее!

  • Дмитрий

    Здравствуйте, Ольга! Скорее всего ошибка в пути к файлу. В редких случаях бывают проблемы с выставленными правами на изображения. Такое у меня было всего лишь 1 раз, поэтому я больше чем уверен, что проблема все же в пути к изображению. Проверьте, открывается ли изображение по ссылке на файл. Если да, то смотрите исходный код на сайте. Скорее всего как-то не так прописан путь к изображению. Если ничего не получится, напишите мне в "Контакты" и не забудьте описать ситуацию, а также указать ссылку на свой сайт.

  • Ольга

    Большое спасибо!!!

    Путь неправильно указала — хотя странно ,что в прошлый раз все работало. Ну да ладно, зато узнала, что такое абсолютный путь и относительный) Большое вам спасибо Дмитрий за отзывчивость и терпение!!! Я просто живу на вашем сайте — так все замечательно и понятно расписано!!! Удачи вам!!!

  • Дмитрий

    Рад, что вам удалось решить проблему. Если вдруг возникнут еще какие-то вопросы — обращайтесь. Всегда рад помочь.

  • Дмитрий

    Дмитрий подскажите почему footer.php отображается в правом боку сайта?

  • Дмитрий

    Скорее всего ошибка в коде. Возможно где-то неправильно прописаны стили в таблице стилей или же при редактировании был некорректно закрыт div. Для выяснения причины проблемы рекомендую воспользоваться плагином для браузера FireBug. Очень полезное расширение. Сам постоянно использую.

  • Катерина

    Добрый день! Помогите пожалуйста установить тему на сайт. Скачала тему, а в папке нет style.css, как быть?

  • Дмитрий

    Здравствуйте. Скорее всего архив или папка с файлами битые. Лучше найти другую тему или же просто скачать ту же самую тему с другого источника.

  • Nat

    Здравствуйте. я совсем совсем чайник в wordpress, скопировала свой блог из blogger, теперь хочу добавить окошки рекламы на сайт вордпресс. Ничего не понимаю, где искать HTML code в wordpress, что бы изменить. Только увидела в "Внешний вид">>"Свой дизайн" , но это за 30дол в год.
    Разьясните совсем для чайников, пжлста.:)

  • Дмитрий

    Здравствуйте. Для установки рекламы на сайт, работающий под управлением WordPress, используйте любой из способов, описанных в следующих статьях: dmitriydenisov.com/wordpress/wp-plugins/ustanovka-reklamnyx-blokov-google-adsense-na-sajt-wordpress.html dmitriydenisov.com/wordpress/wp-theme/avtomaticheskoe-dobavlenie-reklamy-wordpress.html

Оставить комментарий

отменить ответ