Создание и редактирование шаблонов wordpress. Основы правильного редактирования шаблонов Wordpress. Добавление рабочей области Work Area

текст Leave a Comment заменить на

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

Как отредактировать

Резервная копия.

Самое первое, что Вы должны сделать — это создать резервную копию своего шаблона . Если внесенные правки будут ошибочны — Вы всегда можете вернуться к копии шаблона, которая создана еще до редактирования.
Чтобы создать резервную копию нужно необходимо в Панели Управления сайтом перейти Дизайн — Резервное копирование шаблона

Резервная копия создает копии всех шаблонов Вашего сайта. Мы уже рассматривали ранее что на сайте Ucoz для определенных страниц сайта — определенный шаблон.
Нажмите «Создать резервную копию » для ее создания. Сразу создаться новая резервная копия, которой будет присвоен свой номер из 10 цифр. Цифры Вы конечно не запомните, но по дате создания резервной копии можно сориентироваться. И все же мой совет — не создавайте слишком много копий, а старые, которые уже точно не пригодятся — удаляйте. Тогда будет легче ориентироваться.

Нажмите «Восстановить «, чтобы Ваш сайт принял прежний вид (вид сохраненных ранее шаблонов).

Строение шаблона сайта uCoz

Шаблон любой страницы сайта uCoz состоит из:

• HTML разметки — HTML теги , определяющие расположение блоков на странице. Собственно каркас шаблона.
• Системные коды uCoz, которые заключены в $…$. Список системных кодов (с расшифровкой их обозначения), которые можно использовать в конкретном шаблоне находится ниже поля редактирования шаблона. Пользуйтесь этим списком, как шпаргалкой, так как иногда бывает, что в другом шаблоне Вы НЕ можете использоваться какой-то системный код. Таким образом, список системных кодов подходит ТОЛЬКО тому шаблону, под которым он расположен.

На картинке условна обозначила расположение на странице: зеленым цветом — теги HTML; красным цветом — CSS стили; синим цветом — системные коды uCoz.

Редактирование шаблона сайта uCoz

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

Итак, для редактирования шаблона перейдите: Панель Управления — Дизайн — Управление дизайном (шаблоны). Выберите нужный шаблон и нажмите на него.

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

Теперь можете внести необходимые изменения. Тут Вам не нужно знать HTML и CSS, но перечень системных кодов и их значение знать необходимо. Само редактирование очень похоже на Word или простой визуальный редактор uCoz.
Обязательно нажмите кнопку сохранить для сохранения внесенных изменений.

2. Изменение HTML кода шаблона. Этот способ подходит для внесения любых изменений в шаблон вплоть до полного изменения шаблона, но необходимо иметь хоть какое-то представление о HTML тегах и CSS стилях.
Изменять код можно прямо на странице кода, но лично я предпочитаю делать это в стороннем HTML редакторе. Я уже неоднократно писала, что я предпочитаю Dreamweaver. Поэтому я буду рассказывать на примере этой программы.

В Dreamveaver просто редактировать шаблон, так как с одной стороны ты видишь весь код шаблона, а справа схематический результат:

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

Если Вы хотите первыми узнавать о новых статьях на сайте!!!

От автора: приветствую вас, друзья, в очередной статье по теме WordPress. Если перед вами встала задача что-то изменить в коде темы на вашем сайте WordPress, тогда статья Редактирование темы WordPress, думаю, может вам пригодиться. Из данной статье статьи мы попробуем узнать, как редактировать тему WordPress.

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

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

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

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

В качестве примера я возьму стандартную тему Twenty Fifteen, которая идет в комплекте WordPress. С учетом замечания выше о различных способах создания тем, объяснять лучше именно на одной из стандартных тем WordPress. Взглянем на структуру папки с темой.

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

Давайте в качестве примера изменим размер заголовков названий статей. Через инструменты разработчика мы можем найти правила в файле стилей, отвечающие за оформление того или иного элемента.

Откроем файл style.css в редакторе и изменим значение свойства font-size для заголовка статьи с 3.9 на 2.9. Сохраним файл, обновим его на сервере и после обновления страницы мы можем увидеть, что размер заголовка стал меньше. Точно по такой же схеме мы можем изменить оформление и любого другого элемента в дизайне вашей темы.

content.php — файл отвечает за центральную часть сайта, то есть область контента;

footer.php — нижняя часть сайта (подвал или футер);

header.php — верхняя часть сайта (шапка или хедер);

sidebar.php — боковая часть сайта (сайдбар).

Для примера давайте возьмем тот же заголовок статьи и попробуем его немного отредактировать. В теме Twenty Fifteen это заголовок второго уровня (h2). Давайте заменим его, например, заголовком третьего уровня (h3). Для этого откроем шаблон content.php, попробуем найти соответствующий участок кода и внести правки. Вот этот код:

После изменения h2 на h3 и сохранения файла мы должны увидеть соответствующие изменения на сайте. Точно так же производится редактирование для прочих элементов вашей темы. Здесь снова повторюсь, что речь в статье в первую очередь идет именно о редактировании темы WordPress, т.е. о внесении некоторых незначительных правок в структуру темы или же об изменении оформления. Если же вам нужно вносить кардинальные изменения, тогда, как и говорилось выше, у вас есть два варианта:

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

изучить вопрос создания тем самостоятельно, в этом случае для вас не составит никакого труда отредактировать тему WordPress самостоятельно.

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

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

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

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

\wp-content\themes

В каждой папке лежит отдельная тема.
А файл настроек 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(); ?>

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

• 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 элементы подсвечиваются и на самой странице сайта.

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

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

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

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

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

//Sample Comment

/* 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, потому что видно именно те файлы, в которых есть изменения.

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