Как редактировать сайт на wordpress

От автора: сегодня я вам расскажу, как редактировать сайт, который есть в вашем распоряжении. Конечно, тут слишком много нюансов, но общие принципы должны знать все.

Ответить на этот вопрос коротко просто невозможно. Все потому, что способов редактирования сегодня существует огромное количество. Их столько, сколько движков и конструкторов, в которых есть такие возможности.

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

Изменяем сайт в cms WordPress

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

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

Новые посты в WordPress добавляются с помощью удобного визуального редактора. При необходимости вы можете переключиться в режим html, в котором можете свободно вставлять код в запись, при условии владения языками html, css и javascript.

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

Медиафайлы. Здесь вы можете посмотреть, какие файлы вы уже загрузили, редактировать их, а также добавлять новые. Обычно это делается уже при редактировании самой записи.

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

Комментарии. В этой вкладке вы можете модерировать комментарии. Если кто-то оставил комментарий и его нужно модерировать, вы это обязательно увидите. Комментарий можно одобрить, изменить, удалить или отправить в спам. А еще на него можно ответить, завязав общение с человеком.

Внешний вид. Эту вкладку я подробно рассматривать не буду, так как это займет 10 страниц текста) В общем, здесь вы можете настроить меню, виджеты, изменить шаблон, фоновый рисунок и даже поковыряться в коде.

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

Вообще редактировать код лучше через редактор на компьютере, чем встроенными средствами движка, потому что это намного удобнее.

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

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

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

Инструменты. Сюда будут добавляться различные дополнительные возможности, которые предлагает WordPress и его плагины.

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

Вот мы и прошлись по всем пунктам, которые есть в WordPress. Хочу отметить, что это именно те, что доступны администратору. Если вы войдете на сайт в качестве автора, например, то увидите лишь пару возможностей, которые будут доступны.

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

Как редактировать сайт в конструкторе?

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

Как редактировать код сайта?

Код вы сможете изменять, только если имеете доступ к файлам на сервере. Например, FTP-доступ. Соединяемся по ftp и находим у себя на сервере папку со своим сайтом. Там уже вы сможете увидеть файлы, найти нужный и редактировать. Вообще советую вам лезть в код, только если есть хотя бы базовые знания.

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

Первый способ позволяет увидеть результат сразу. Но вообще для экспериментов я крайне советую вам ставить локальный сервер.

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

webformyself.com

Зачем нужно менять дизайн сайта или блога?

Большинство сайтов и блогов в сети интернет изначально строятся на бесплатных шаблонах, и уже впоследствии меняют дизайн этой темы. Если у вас стандартная тема или шаблон (это одно и то же) и вы не меняли ее дизайн,то скорее всего сайтов с таким же дизайном как у вас несколько сотен или тысяч. Значит ваш сайт не уникален, его вряд ли запомнят пользователи, случайно попавшие на ваш блог или сайт.

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

Из каких элементов состоят web сайты?

Несмотря на то, что в сети интернет существует миллионы сайтов, структура всех веб сайтов схожа:

• Header – шапка сайта;
• Footer – подвал;
• Sidebar – сайдбар или боковая колонка;
• Body – тело страницы;

Это значит, что все страницы одного сайта будут иметь эти элементы, и благодаря современным CMS, отредактировав всего один файл, можно изменить дизайн всех страниц сразу.

Как быстро изменить дизайн сайта на WordPress?

Так как я использую движок WordPress, начну традиционно с него.

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

Скачать такой шаблон можно с любого сайта, достаточно просто забить в поиске «темы вордпресс».

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

И затем загрузить его в корневую директорию блога через FTP клиент или напрямую через браузер.

Чтобы добавить новую тему через браузер, выберете в меню «Внешний вид», «Темы», «Добавить новую».

Обращу ваше внимание, что лучше устанавливать адаптивную тему, чтобы ваш блог было удобно просматривать на мобильных телефонах и планшетах.

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

Заходим в раздел «Внешний вид», «Настроить». Перед вами будет раздел настроек. В зависимости от особенностей шаблона, этот раздел может несколько отличаться, но в целом принцип схож.

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

Если в разделе «Внешний вид» таковых настроек нет, возможно настройки дизайна темы вынесены отдельно. Проверьте так ли это. Для этого зайдите в раздел «Внешний вид», «Настройка темы».

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

Если же таковых настроек в визуальном редакторе нет, то придется немного поработать с кодом.

Весь дизайн блога формируется в одном файле style.css

Как изменить дизайн шапки блога или сайта?

В файле style.css найдите раздел «HEADER». В этом разделе можно изменить дизайн шапки сайта, изменить цвет и размер шрифта названия сайта и его описания, а так же при необходимости изменить размер шапки сайта.

Для того, чтобы изменить дизайн шапки сайта, будем менять саму картинку, для этого в разделе «HEADER» ишем фоновое изображение, обычно оно находиться в классе #site-heading, #header-logo или что-то вроде этого и следует за значением background.

Наша задача изменить ссылку на изображение находящуюся здесь на свою.

Как изменить дизайн сайдбара и элементов в нем?

В визуальном редакторе дизайн сайдбара изменить нельзя. Можно лишь менять местами блоки. Для того, чтобы изменить дизайн сайдбара сайта, снова заходим в файл Style.css и ищем раздел «SIDEBAR».

Аналогично изменению шапки сайта, меняем и сайдбар.

• Фоновое изображение – background;
• Ширина сайдбара – width;
• Рамка сайдбара – border;

Изменить подвал сайта (footer)

Чтобы изменить подвал сайта, нужно в файле style.css найти раздел «FOOTER».

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

Так же как в предыдущем случае ищем фоновое изображение background и меняем на свое, затем меняем цвет и размер шрифта и ссылок.

• font-size – размер шрифта;
• color – цвет шрифта;
• text-align – расположение текста;

nazyrov.ru

Структура шаблона WordPress

HTML-код шаблона WordPress разбит на несколько php-файлов. Сделано это для удобства: повторяющиеся на разных страницах куски кода вынесены в отдельные файлы и подключаются к каждой странице с помощью функции include. Шапка, футер и сайдбар находятся в отдельных файлах, а файл каждого типа страниц содержит только центральную область: Наиболее часто редактируемые файлы шаблона WordPress:

• index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
• header.php — Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега <html>, содержит полностью <head></head>, в который вставляется большинство скриптов при настройке блога. В нем открывается тег <body> и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
• style.css – основной стилевой файл шаблона, в котором задается внешний вид элементов сайта. Чтобы редактировать шаблон WordPress, чаще всего приходится работать именно с этим файлом.

Остальные файлы:

• single.php – отвечает за отображение каждой отдельной записи. Т.е. внешний вид страницы, на которой вы сейчас читаете мою статью, настраивается именно в этом файле.
• page.php – вывод статической страницы блога. Новые страницы создаются в разделе «страницы» в левом меню, а их вид настраивается в этом файле.
• sidebar.php – отвечает за вывод сайдбара (боковой колонки блога), где находятся виджеты. Эта часть шаблона тоже повторяется на каждой странице WordPress сайта, поэтому вынесена в отдельный файл. Обычно не приходится редактировать этот файл, потому что все изменения производятся над виджетами. Однако никто не запрещает вписать какой-то код напрямую в файл sidebar.php.
• functions.php – файл с php-функциями темы. Все они влияют на внешний вид и работу сайта, определяют события при определенных действиях пользователей.
• footer.php – футер (подвал) сайта, его нижняя часть. Это тоже повторяющийся на всех страницах элемент. В него обычно вставляют счетчики посещаемости, копирайт и контактные данные.
• category.php – за вывод страницы с перечнем всех записей определенной категории отвечает данный файл.
• tag.php – вывод архива записей по соответствующему тегу прописан в этом файле.
• archive.php – архив всех записей за определенный месяц (год) настраивается здесь.
• search.php – выводит результаты поиска по блогу.
• comments.php – отображение комментариев к записям и страницам.
• 404.php – шаблон ошибки 404 – страница не найдена.

В зависимости от выбранной темы, в ней могут появиться и другие файлы, тогда придется самостоятельно разобраться для чего нужны они.

Как редактировать файлы шаблона WordPress

Сразу хочу предупредить, что не стоит лезть в код и пытаться самостоятельно его переделать, если вы ничего не понимаете в CSS и HTML. Другое дело, когда в каком-то уроке говорится вставить определенный код в определенное место файла. Обязательно сделайте бэкап файлов и базы данных, прежде чем вносить какие-то изменения! Для редактирования файлов темы WordPress сайта я предлагаю три варианта:

1. Редактирование шаблона через админку WordPress
   В админке зайдите в раздел «Внешний вид» — «Редактор» и справа в колонке вы увидите все файлы темы, доступные для редактирования. Выберите нужный файл, отредактируйте и не забудьте кликнуть по кнопке «Обновить».Данный способ очень удобен, когда нужно внести незначительные изменения: редактирование через админку делается быстро, просто, не нужно запускать дополнительные программы и вводить пароли. Из минусов – стандартный редактор не имеет функции подсветки кода и нумерации строк, поэтому вносить серьезные многочисленные изменения таким образом не удобно.
2. Правка файлов через файловый менеджер хостинга
   Как вы уже знаете, я пользуюсь одним из лучших хостингов — beget, у которого отличный файловый менеджер с дружелюбным интерфейсом. Мне нравится редактировать шаблоны WordPress этим способом, потому что опять же не нужно запускать никаких программ, настраивать подключений, копировать файлы на компьютер и код подсвечивается. Файлы шаблона WordPress, который вам нужно отредактировать, находятся в папке: /wp-content/themes/название_вашей_темы/ Зайдите в нее и откройте нужный файл для редактирования. Если ваш хостинг не обладает таким удобным файловым менеджером, советую выбрать другой хостинг:)
3. Редактирование шаблона по ftp
   Этот способ удобен, если предстоит серьезная работа с файлами, особенно если нужно редактировать сразу несколько файлов в разных папках.
   • Запустите ваш ftp-клиент. Для подключения по ftp я использую программу FileZilla или Total Commander — по ссылке подробная инструкция настройки соединения. Настройте соединение с сайтом и зайдите в папку вашей вордпресс темы: /wp-content/themes/название_вашей_темы/
   • Скопируйте файл, который нужно редактировать к себе на локальный диск.
   • Откройте файл в программе для редактирования кода и внесите необходимые изменения. Я советую программы Notepad++ или Dreamweaver, в них подсвечивается код, пронумерованы строки и конечно есть множество других функций и преимуществ.

pro-wordpress.ru

Чем открыть шаблон WordPress?

Хочу сразу отметить, что если вы ничего не понимаете в кодах, CSS и HTML, то лучше не пытаться ничего делать. Ваши пробы редактирования шаблона могут привести к полной не функциональности сайта. Совсем другое, если какой-то урок четко прописывает действия и этапы выполнения, где написано откуда скопировать и куда вставить. Однако, подстрахуйтесь и сделайте бэкап данных (резервная копия), чтоб в любой момент восстановить сайт в изначальном виде.

Как менять шаблоны WordPress?

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

Редактирование шаблона WordPress

1. Откройте админку WordPress.
2. Далее выберите Внешний вид-Редактор.
3. В колонке справа будут все файлы шаблона, которые можно редактировать. Выбираете нужный вам файл, измените его и жмете Обновить.

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

Редактирование файлов используя файловый менеджер хостинга

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

Файлы WordPress шаблона, которые редактируются, размещены в папке: /wp-content/themes/название_вашего_шаблона/. Открываете ее и ищете необходимый для редактирования файл.

Редактирование темы на ftp

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

• Запустите свой клиент ftp. Можно использовать Total Commander или же FileZilla для подключения клиента ftp. Проверьте соединение с вашим сайтом и откройте папку вашего шаблона: /wp-content/themes/название_вашго_шаблона/
• Файл, который планируете редактировать, скопируйте на локальный диск.
• Откройте данный файл в программе — редакторе кода и можете смело вносить все нужные изменения.

Чем редактировать шаблон WordPress?

Будет лучше, если тестовый вариант сайта был установлен локально. Это позволит без риска внести изменения и уже полностью отредактированным переносить на хостинг. Для редактирования файлов предлагаю использовать бесплатный Notepad++ редактор, имеющий подсветку синтаксиса. С ним вы сможете легко копаться одновременно во всех файлах темы.

В меню указываете папку, которую нужно найти или функцию, или слово или тег, и Notepad++ безошибочно покажет файлы, в которых есть подобные вхождения. А далее выбираете нужный вам файл и вносите в них изменения. Благодаря имеющейся подсветке, работа по редактированию будет проще и удобнее.

Выводы

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

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

www.templatemonster.com

Речь этой статье пойдет о том, как менять различные элементы и преобразить внешний вид блога без особых знаний HTML и CSS.

Сразу хочу сказать, что сейчас многие темы, которые выпускаются в последнее время, имеют свои настройки в админзоне самого сайта. И здесь есть возможность на вкладке “Внешний вид”, менять в графическом редакторе настройки внешнего вида.

Но что делать, если таковых настроек нет или они вас по какой-то причине не устраивают, но тема шаблона очень нравиться и хорошо подходит. Так как же внести некоторые коррективы?

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

Как редактировать шаблон wordpress — начнем с самого простого

Давайте начнем с самых простых вещей. Идем на свой блог и смотрим. Например, мы хотим изменить ширину текстового поля под контент. Увеличим ее за счет того, что сузим чуть-чуть область правого сайтбара (правая колонка).

Сделать это очень просто. Щелкаем правой кнопкой мыши в той области, которую хотим изменить, в нашем случае это сейчас сайтбар, и выбираем в выпадающем меню просмотр кода элемента.

Делать это желательно в браузере Гугл Хром, другие браузеры тоже поддерживают эту функцию, но я привык делать это в Хроме.

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

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

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

В видео я все наглядно на примере показываю.

Так вот, в этом окне, в левой его части мы видим код HTML, а справа стили CSS.

Когда мышкой наводим на какую-нибудь строчку (левая область), то вверху видим, что выделяется определенный элемент или область шаблона. Это означает, что данная строчка кода отвечает как раз за ту выделенную часть в нашем шаблоне.

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

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

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

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

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

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

www.wptheme.us

Где лежат файлы

Папки с темами можно найти в поддиректории установки WordPress

wp-contentthemes

В каждой папке лежит отдельная тема.
А файл настроек WordPress wp-config.php, он тоже может понадобиться, находится в основной директории.

Структура тем WordPress

При установке новой темы WordPress вы скачиваете архив, состоящий из нескольких десятков файлов, которые отвечают за отображение информации сайта. Эти файлы представляют из себя смесь php команд, html тегов, css форматирования и простого текста. Все они связаны между собой и служат для вывода разных типов страниц. Чтобы показать информацию на отдельно взятой странице WordPress, грубо говоря, берет несколько файлов из этой папки и соединяет их последовательно в один большой файл, который, после всех дополнительных обработок, становится веб-страницей вашего сайта. У каждого типа страницы есть свой основной файл:

• single.php – используется WordPress для вывода записей;
• page.php – вывод страниц;
• archive.php, category.php и т.п. – показывает страницы списков;
• image.php – прикрепленное изображение;
• 404.php – ошибка;

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

/**  * The template for displaying all pages  *  * This is the template that displays all pages by default.  * Please note that this is the WordPress construct of pages and that  * other 'pages' on your WordPress site will use a different template.  *  * @package WordPress  * @subpackage Twenty_Fourteen  * @since Twenty Fourteen 1.0  */  get_header(); ?>  <div id="main-content" class="main-content">  <?php 	if ( is_front_page() && twentyfourteen_has_featured_posts() ) { 		// Include the featured content template. 		get_template_part( 'featured-content' ); 	} ?> 	<div id="primary" class="content-area"> 		<div id="content" class="site-content" role="main">  			<?php 				// Start the Loop. 				while ( have_posts() ) : the_post();  					// Include the page content template. 					get_template_part( 'content', 'page' );  					// If comments are open or we have at least one comment, load up the comment template. 					if ( comments_open() || get_comments_number() ) { 						comments_template(); 					} 				endwhile; 			?>  		</div><!-- #content --> 	</div><!-- #primary --> 	<?php get_sidebar( 'content' ); ?> </div><!-- #main-content -->  <?php get_sidebar(); get_footer();

Некоторые из функций обращаются к другим файлам:

• get_header() – показывает содержимое файла header.php (шапку);
• get_template_part( 'content', 'page' ) – шаблон с указанным именем;
• comments_template() – комментарии comments.php;
• get_sidebar() – сайдбары с виджетами;
• get_footer() – футер сайта.

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

//get_sidebar();

Сайдбар исчезнет, но это может повлечь за собой неожиданный эффект, потому что css код стилей написан именно для того изначального сайта с сайдбаром. Такие кардинальные изменения нужно делать с учетом css.

Чем редактировать шаблон

Лучше всего, чтобы тестовая версия сайта была установлена локально, тогда можно без страха отладить все изменения и уже готовый результат перенести на хостинг. Для просмотра файлов можно использовать один популярный бесплатный редактор Notepad++ с подсветкой синтаксиса. С его помощью можно легко копаться поиском сразу во всех файлах шаблона:

В меню надо указать папку для поиска, в нашем случае это будет папка с редактируемой темой и теперь если потребуется найти некую специфическую функцию, слово или тег, то Notepad++ окажется незаменимым помощником в этом деле, он безошибочно выдаст все вхождения фразы во всех файлах. Здесь же в настройках можно указать как именно искать слова: целиком или же только часть.

Специфические функции шаблона

Все функции, имя которых начинается с названия темы, объявлены в специальном файле functions.php. Этот файл работает как плагин, только для тем. Он может подключать другие файлы, которые функционируют точно так же, используемые для удобства разделения разной информации по логическим блокам. Таким образом все функции в шаблонах WordPress можно разделить на два типа: встроенные в само ядро и функции из файла functions.php.

Стили темы

Стили, отвечающие за оформление внешнего вида сайта, объявляются в файлах с расширением css. Все темы WordPress содержат один основной файл стилей с названием style.css. Если нужно поменять цвет, например, ссылок на сайте, то достаточно внести изменения в этот файл:

 a { 	color: #0033cc; } 

Основные изменения, скорее всего, вы будете делать именно в этом файле. С помощью css можно менять оформление, цвета, добавлять фоновые рисунки и скрывать блоки:

 #my-sidebar { 	display: none; } 

Как найти нужный элемент

Если вы пользуетесь Chrome, то у вас в контекстном меню, всплывающем по клику правой кнопкой на любом элементе страницы, есть пункт “Просмотр кода элемента”. Это меню выводит на экран окно инструментов для разработчика. Здесь очень удобно искать названия классов и id элементов, причем, при наведении мышки на строку с html в окне developer tools элементы подсвечиваются и на самой странице сайта.

Зная id элемента, остается прописать для него нужный стиль в файл style.css. Если вы не можете найти нужное место в style.css для переопределения стиля, то, в крайнем случае, можно задать ему наивысший приоритет с помощью оператора !important:

 #my-sidebar { 	display: none !important; } 

Теперь точно должно сработать.

Стирать или не стирать

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

//Sample Comment

html:

<!-- Sample Comment -->

css:

/* Sample Comment */

Ну и конечно до внесения изменений надо сохранить исходную копию темы. Мало ли что.

Обновление тем

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

Дочерний шаблон

Вместо того, чтобы править исходную тему, можно создать свой личный дочерний вариант для правки. Чтобы сделать дочернюю тему нужно создать новую папку в том же разделе, где лежит основная тема, и скопировать туда файл style.css исходной темы. В этом файле (в самом начале) надо заменить название на свое и указать для нее родительскую тему.
Например, чтобы сделать дочернюю тему для Twenty Fourteen заголовок можно поменять следующим образом:

 /*  Theme Name: Twenty Fourteen Child  Theme URI: //example.com/twenty-fourteen-child/  Description: Twenty Fourteen Child Theme  Author: I AM  Author URI: //example.com  Template: twentyfourteen  Version: 1.0.0  Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready  Text Domain: twenty-fourteen-child */

После этого появится возможность выбрать новую тему Twenty Fourteen Child в админке WordPress. В эту папку можно копировать те файлы, в которых планируется производить изменения (кроме functions.php и ему подобных). Так очень удобно редактировать шаблон WordPress, потому что видно именно те файлы, в которых есть изменения.

С более полным и корректным на настоящий момент способом создания дочерней темы можно ознакомиться здесь.

visualpharm.com

Особенности шаблонов для WordPress

Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html. Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:

В состав темы входит несколько основных групп файлов:

• CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
• Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php;
• functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
• Изображения – рисунки, которые используются в качестве фона.

Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню «Внешний вид» — «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте «Theme Options»:

• Поменять цвет меню;
• Установить цвет ссылок;
• Выбрать один из вариантов структуры сайта;
• Задать расположение меню;
• Установить цвет фона для контента.

Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню «Внешний вид»:

На диске (или хостинге) файлы всех установленных тем хранятся в папке wp-content/themes/. В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:

Чтобы лучше понять, как редактировать шаблон WordPress, разберем на примере создание темы для сайта.

Создаем новую рубашку для своего сайта

Создавать тему будем пошагово:

1) Заходим в директорию wp-content/themes/ и создаем папку theme_test. В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css. Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver. Внутри комментариев прописываем название темы:

Так мы даем понять WordPress, что это стилевой файл новой темы;

3) Создаем с помощью того же редактора файл index.php. Вставляем в него код:

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

На данном этапе новая тема уже видна через админку сайта в списке установленных:

Если активировать тему, то в окне браузера сайт будет выглядеть вот так:

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

Так что перед тем, как сделать шаблон для WordPress, нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php. Затем разнесем по ним код одноименных частей страницы.

Содержимое footer.php:

Содержимое header.php:

Здесь строкой

Вот таким образом мы создали одностраничный шаблон для блога.

Более легкий способ

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

Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS. Также можно загрузить уже готовые темы:

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

После некоторых манипуляций с интерфейсом программы для создания шаблонов WordPress может получиться что-то стоящее. Доступен предварительный просмотр созданной темы в нескольких браузерах:

К сожалению, в бесплатной версии приложения сохранение темы не доступно. Возможен лишь ее импорт через ftp:

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

• lubith.com – ресурс имеет англоязычный, но вполне понятный интерфейс. Для начала работы нужно пройти простую процедуру регистрации. Сервис позволяет не только создавать, но и скачивать разработанные шаблоны:

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

Какой вариант создания шаблона выбрать?

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

www.internet-technologies.ru

Добавить меню

Меню можно располагать не только в местах, установленных темой (делается это через виджеты), но и в любой другой части сайта или даже на определённой странице.

Чтобы вставить меню в любое место, добавьте строку:

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

где вместо Меню_1 нужно ввести название вашего меню.

Изменить страницу 404

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

Чтобы изменить содержимое страницы откройте в редакторе файл 404.php, найдите строки с отображающимся в браузере текстом и измените их (выводимый текст чаще всего заключается в кавычки). Например, в одной из стандартных тем (twentyfourteen) вас будет интересовать следующий код:

Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.

Прописать копирайт

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

За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php, и искать отвечающий за копирайт код следует именно в нём.

Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:

Русифицировать текст

Частенько шаблоны WordPress русифицированы не до конца или не переведены вовсе. Зная файловую структуру темы и то, что показываемый пользователю текст (если это не переменная) в коде всегда взят в кавычки, легко найти и самостоятельно перевести нужный фрагмент, причём не обязательно искать слово вручную — для этого можно воспользоваться автоматическим поиском, который присутствует в каждом редакторе кода.

Например, в шаблоне flat-white сразу хочется русифицировать как минимум две надписи: «READ MORE» и «Leave a Comment», так как их видно на главной странице.

За главную страницу отвечает файл index.php, расположенный в корне каталога темы, следовательно, редактировать надо его. Но текста надписей в нём нет, поэтому необходимо разбираться в коде, чтобы узнать, где они хранятся. В нашем случае за информацию под постами на главной странице отвечает файл template-parts/content.php, подключенный строкой

Если перейти в него и в коде

текст Leave a Comment заменить на Оставить комментарий, а вместо Read More написать Далее, то текст изменится и в браузере.

www.seostop.ru